Podicom UI

A modular, tree-shakeable React component library for Podicom products.

Features

• React and TypeScript
• ESM-only package
• Root and subpath imports
• Tree-shakeable components
• Explicit CSS entrypoints
• RTL-friendly components
• Storybook documentation
• Package validation with Publint and Are The Types Wrong
• Bundle-size and tree-shaking audits

Requirements

• React 18 or newer
• React DOM 18 or newer
• A modern ESM-compatible bundler
• TypeScript with moduleResolution: "bundler", "node16", or "nodenext"

Installation

npm install podicom-ui

Global styles

Import the complete stylesheet once in the application entrypoint:

import 'podicom-ui/styles.css';

Examples of suitable locations:

Vite

// src/main.tsx
import 'podicom-ui/styles.css';

Next.js App Router

// app/layout.tsx
import 'podicom-ui/styles.css';

Basic usage

import 'podicom-ui/styles.css';

import { Button, Card, CardContent, CardHeader, CardTitle } from 'podicom-ui';

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Podicom UI</CardTitle>
      </CardHeader>

      <CardContent>
        <Button type="button">Continue</Button>
      </CardContent>
    </Card>
  );
}

Subpath imports

Every public component also has an independent entrypoint:

import { Button } from 'podicom-ui/button';
import { Card, CardContent, CardHeader, CardTitle } from 'podicom-ui/card';

Root imports and subpath imports are both tree-shakeable:

import { Button } from 'podicom-ui';

import { Button } from 'podicom-ui/button';

Use subpath imports when explicit component boundaries are preferred.

Public component entrypoints

Core components

import { Button } from 'podicom-ui/button';
import { Card } from 'podicom-ui/card';
import { Checkbox } from 'podicom-ui/checkbox';
import { Chip } from 'podicom-ui/chip';
import { Notification } from 'podicom-ui/notification';
import { RadioGroup } from 'podicom-ui/radio-group';
import { Spinner } from 'podicom-ui/spinner';
import { Stepper } from 'podicom-ui/stepper';
import { Switch } from 'podicom-ui/switch';
import { Textarea } from 'podicom-ui/text-area';
import { TextField } from 'podicom-ui/text-field';
import { Uploader } from 'podicom-ui/uploader';

Overlays

import { BottomSheet } from 'podicom-ui/bottom-sheet';
import { Dialog } from 'podicom-ui/dialog';
import { Toast } from 'podicom-ui/toast';

Forms

import { Form } from 'podicom-ui/form';
import { InputOTP } from 'podicom-ui/input-otp';

Data selection

import { DropDown } from 'podicom-ui/drop-down';
import { DropDownTree } from 'podicom-ui/drop-down-tree';
import { Tree } from 'podicom-ui/tree';

Navigation

import { Pagination } from 'podicom-ui/pagination';

Content

import { Banner } from 'podicom-ui/banner';
import { Carousel } from 'podicom-ui/carousel';

Charts

import { LineChart } from 'podicom-ui/line-chart';
import { PieChart } from 'podicom-ui/pie-chart';

Date and time

import { DayMonthSwiper } from 'podicom-ui/day-month-swiper';

import { DesktopDatePicker } from 'podicom-ui/desktop-date-picker';

import { MobileDatePicker } from 'podicom-ui/mobile-date-picker';

import { DesktopTimePicker } from 'podicom-ui/desktop-time-picker';

import { MobileTimePicker } from 'podicom-ui/mobile-time-picker';

CSS entrypoints

Complete styles

import 'podicom-ui/styles.css';

This is the recommended option for most applications.

Theme only

import 'podicom-ui/theme.css';

Reset only

import 'podicom-ui/reset.css';

Input OTP styles

import 'podicom-ui/input-otp.css';

Desktop DatePicker styles

import 'podicom-ui/desktop-date-picker.css';

Tree styles

import 'podicom-ui/tree.css';

Component-specific CSS entrypoints are useful when an application does not want to load the complete stylesheet.

Selective styles example

import 'podicom-ui/theme.css';
import 'podicom-ui/input-otp.css';

import { InputOTP } from 'podicom-ui/input-otp';

ESM-only package

Podicom UI is published as an ESM-only package.

Supported:

import { Button } from 'podicom-ui';

Not supported:

const { Button } = require('podicom-ui');

TypeScript configuration

Recommended configuration:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "react-jsx",
    "strict": true
  }
}

Node.js projects can use:

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext"
  }
}

RTL support

Components are designed to work in RTL applications.

Set the document direction at the application level:

<html lang="fa" dir="rtl">
  <body>{children}</body>
</html>

Tree shaking

The package exposes independent JavaScript entrypoints and does not inject unrelated component CSS through root imports.

Both examples only include the required component code:

import { Button } from 'podicom-ui';

import { Button } from 'podicom-ui/button';

CSS is intentionally imported separately:

import 'podicom-ui/styles.css';

Development

Install dependencies:

npm install

Start Storybook:

npm run storybook

Run tests:

npm run test

Run TypeScript checks:

npm run typecheck

Build the package:

npm run build

Run all repository checks:

npm run check

Validation

Run the bundle and tree-shaking audit:

npm run audit:bundle:build

Validate the publishable npm tarball:

npm run package:validate

Run the complete release gate:

npm run release:check

Publishing

Authenticate with npm:

npm login

Check the publishable files:

npm pack --dry-run

Publish the package:

npm publish

The package is published with public access according to publishConfig.

License

MIT