Farmacare Design System

A React component library and design token system for Farmacare — pharmacy and healthcare apps. Install once, use anywhere.

Quick Start

1. Install the package

npm install @danaputra09/farmacare-ds

2. Add Google Fonts to your index.html

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />

3. Import design tokens in your entry file

// main.jsx or main.js
import '@danaputra09/farmacare-ds/tokens.css';

4. Copy icons to your public folder

cp -r node_modules/@danaputra09/farmacare-ds/public/icons ./public/

5. Use components

import { DSButton, DSChip, DSInputText } from '@danaputra09/farmacare-ds';

export default function App() {
  return (
    <div>
      <DSButton type="Primary" label="Simpan" />
      <DSChip type="Positive" label="Tersedia" />
      <DSInputText label="Nama Produk" placeholder="Masukkan nama..." />
    </div>
  );
}

Components

Buttons & Actions

| Component | Props | Description | |-----------|-------|-------------| | DSButton | type (Primary/Secondary/Destructive), state, size, label, showPrefix, showSuffix, showKbd, kbdLabel, prefixIcon, suffixIcon, fullWidth | Main button | | DSIconButton | type, state, size, icon | Icon-only button | | DSFloatingActionButton | type, label, icon | FAB | | DSDropdownButton | type, label, options | Button with dropdown |

Form Inputs

| Component | Props | Description | |-----------|-------|-------------| | DSInputText | label, placeholder, value, onChange, state, helperText, showPrefix, showSuffix | Text input | | DSInputNumber | label, value, onChange, min, max, step | Number input with stepper | | DSInputCurrency | label, value, onChange, currency | Currency input (Rp) | | DSInputSearch | placeholder, value, onChange | Search input | | DSInputTextarea | label, placeholder, value, onChange, rows | Multiline text input | | DSInputSelection | label, options, value, onChange | Dropdown select | | DSInputMultiselect | label, options, value, onChange | Multi-select dropdown | | DSInputDate | label, value, onChange | Date picker | | DSInputTime | label, value, onChange | Time picker | | DSCustomInputForms | type, label, options | Custom input variants |

Selection Controls

| Component | Props | Description | |-----------|-------|-------------| | DSCheckbox | label, checked, onChange, state | Checkbox | | DSCheckboxGroup | label, options, value, onChange | Checkbox group | | DSRadio | label, checked, onChange | Radio button | | DSRadioGroup | label, options, value, onChange | Radio group | | DSToggle | checked, onChange, label, size | Toggle switch | | DSSegmentedControl | options, value, onChange | Segmented tabs |

Display

| Component | Props | Description | |-----------|-------|-------------| | DSChip | type (Positive/Negative/Attention/Neutral/Informative), label | Status chip / badge | | DSBadge | type, count, label | Notification badge | | DSTag | label, type, onRemove | Removable tag | | DSAvatar | src, name, size | User avatar | | DSProgressBar | value, max, label | Progress indicator | | DSProgressStepper | steps, currentStep | Step progress |

Navigation

| Component | Props | Description | |-----------|-------|-------------| | DSBottomNavBar | items, activeItem, onChange | Mobile bottom nav | | DSNavigationDrawer | items, activeItem, onChange, open | Side navigation drawer | | DSBreadcrumb | items | Breadcrumb trail | | DSTabs | tabs, activeTab, onChange | Tab bar | | DSPagination | page, total, onChange | Pagination controls |

Overlays & Feedback

| Component | Props | Description | |-----------|-------|-------------| | DSToast | type, title, message, show, onClose | Toast notification | | DSTooltip | content, children, placement | Tooltip wrapper | | DSCoachmark | title, description, show, target | Onboarding coachmark | | DSAlert | type (Info/Warning/Success/Error), title, message | Alert banner | | DSDialog | title, open, onClose, children | Modal dialog | | DSBottomSheet | open, onClose, title, children | Bottom sheet (mobile) |

Data Display

| Component | Props | Description | |-----------|-------|-------------| | DSTable | columns, data, onSort | Data table | | DSEmptyState | icon, title, description, action | Empty state illustration | | DSProductCard | name, price, stock, image | Product card | | DSListItem | title, subtitle, leading, trailing | List row item |

Layout

| Component | Props | Description | |-----------|-------|-------------| | DSTopAppBar | title, leading, trailing | App top bar | | DSDivider | orientation, spacing | Divider line | | DSCard | children, padding, shadow | Card container |

Other

| Component | Props | Description | |-----------|-------|-------------| | DSSkeleton | width, height, variant | Loading skeleton | | DSSpinner | size, color | Loading spinner | | DSCalendar | value, onChange, events | Full calendar | | DSTimeline | items | Timeline list | | DSSnackbar | message, show, onClose | Snackbar notification |

Design Tokens

Import @danaputra09/farmacare-ds/tokens.css to get all CSS variables:

Colors

--color-teal           /* #18737C — primary brand */
--color-teal-light     /* #E6F2F4 */
--color-teal-dark      /* #0F4F56 */
--color-slate-900      /* #1a1a1a — primary text */
--color-slate-600      /* #4a5568 */
--color-slate-400      /* #a0aec0 */
--color-slate-200      /* #e2e8f0 */
--color-slate-100      /* #f7fafc */
--color-white          /* #ffffff */
--color-red            /* #E53E3E — destructive */
--color-red-light      /* #FFF5F5 */
--color-green          /* #38A169 — success */
--color-green-light    /* #F0FFF4 */
--color-yellow         /* #D69E2E — warning */
--color-yellow-light   /* #FFFFF0 */
--color-blue           /* #3182CE — info */
--color-blue-light     /* #EBF8FF */

Typography

--font-heading         /* 'Rubik', sans-serif */
--font-body            /* 'Inter', sans-serif */

Spacing & Radius

--radius-sm    /* 4px */
--radius-md    /* 8px */
--radius-lg    /* 12px */
--radius-xl    /* 16px */
--radius-full  /* 9999px */

Running the Docs Site

The docs site (sandbox) is built with Vite and includes interactive playgrounds for all 51 components.

git clone https://github.com/IPutuDanaPutra/farmacare-design-system.git
cd farmacare-design-system
npm install       # installs workspaces
cd farmacare-ds
npm run dev       # starts docs site at http://localhost:5173

Project Structure

farmacare-design-system/
├── farmacare-ds/              # Design System package
│   ├── src/
│   │   ├── ds/                # Exportable components (51 components)
│   │   │   ├── index.js       # Barrel file — exports all components
│   │   │   ├── Button.jsx
│   │   │   ├── Chip.jsx
│   │   │   └── ...
│   │   ├── components/        # Internal components (not exported)
│   │   │   ├── IconPicker.jsx
│   │   │   └── SandboxHelpers.jsx
│   │   ├── data/              # Design data (types, styles, colors)
│   │   ├── pages/             # Sandbox playground pages
│   │   └── tokens.css         # CSS design tokens
│   ├── public/
│   │   └── icons/             # 150+ SVG icons
│   └── package.json
│
├── farmacare-app/             # Example consumer app
│   └── src/
│       └── App.jsx
│
└── package.json               # Workspace root

Publishing Updates

# 1. Make your changes in src/ds/

# 2. Bump the version
cd farmacare-ds
npm version patch   # or minor / major

# 3. Publish to npm
npm publish

# 4. Push to GitHub
git add .
git commit -m "feat: ..."
git push

License

MIT © IPutuDanaPutra