@datawire-ai/busyfile-design-library 1.12.0 → 1.14.0

package/README.md

@@ -4,6 +4,10 @@ Design system library for Busyfile Applications
 
 ## Installation
 
+Design system library for Busyfile Applications
+
+## Installation
+
 ```bash
 # Using npm
 npm install busyfile-design-system
@@ -14,8 +18,12 @@ pnpm add busyfile-design-system
 
 ## Development
 
+## Development
+
 ### Prerequisites
 
+- Node.js - v22.19
+- pnpm - v10.15
 - Node.js - v22.19
 - pnpm - v10.15
 
@@ -67,6 +75,31 @@ pnpm test
   - [ ] Repeat until the PR is ready for merge into `main`
 - [ ] **Do not publish from your local on npm**
 
+### Development Workflow
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Create changeset `pnpm changeset:add` & `pnpm changeset version`
+5. Submit a pull request
+
+## PRs & Changeset Process
+
+- [ ] **Do not run `changeset` until your PR is ready for merge**
+  - [ ] Complete all required changes
+  - [ ] Apply PR review feedback
+  - [ ] Get the PR reviewed
+- [ ] **Once reviews are done and PR is approved**
+  - [ ] Run the `changeset` scripts
+  - [ ] Get the PR reviewed and approved again
+  - [ ] Merge into `main`
+- [ ] **If you receive comments after creating a `changeset`**
+  - [ ] Delete the generated `changeset` files
+  - [ ] Apply PR feedback
+  - [ ] Push the changes and get them reviewed again
+  - [ ] Repeat until the PR is ready for merge into `main`
+- [ ] **Do not publish from your local on npm**
+
 ### Project Structure
 
 ```
@@ -99,10 +132,39 @@ src/
 ├── main.tsx             # Application entry point
 └── index.ts             # Main package exports
 
+│   └── ui/
+│       ├── badge/       # Badge component
+│       │   ├── badge.tsx
+│       │   ├── badge.types.ts
+│       │   ├── badge.utils.ts
+│       │   └── badge.test.tsx
+        ├── badge.stories.tsx
+│       ├── button/      # Button component
+│       │   ├── button.tsx
+│       │   ├── button.types.ts
+│       │   ├── button.utils.ts
+│       │   └── button.test.tsx
+|       ├── button.stories.tsx
+│       ├── divider/     # Divider component
+│       │   ├── divider.tsx
+│       │   ├── divider.types.ts
+│       │   └── divider.test.tsx
+|       ├── divider.stories.tsx
+│       └── index.ts     # Component exports
+├── lib/                 # Utility functions
+│   └── utils.ts
+├── styles/
+│   └── style.css           # Global styles
+├── App.tsx              # Demo application
+├── main.tsx             # Application entry point
+└── index.ts             # Main package exports
+
 ```
 
 ## Testing
 
+## Testing
+
 ```bash
 # Run all tests
 pnpm test
@@ -119,6 +181,8 @@ pnpm test:browser
 
 ## Storybook
 
+## Storybook
+
 Storybook provides an interactive playground for all components:
 
 ```bash
@@ -133,6 +197,8 @@ Visit http://localhost:6006 to explore components, test props, and see examples.
 
 ## Configuration
 
+## Configuration
+
 ### Tailwind CSS
 
 The design system includes a pre-configured Tailwind CSS setup. You can extend it in your project:
@@ -143,13 +209,18 @@ module.exports = {
   content: [
     './src/**/*.{js,ts,jsx,tsx}',
     './node_modules/busyfile-design-system/**/*.{js,ts,jsx,tsx}',
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/busyfile-design-system/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     extend: {
       // Your custom theme extensions
     },
+    },
   },
   plugins: [],
+};
+  plugins: [],
 };
 ```
 
@@ -223,6 +294,7 @@ These tokens can be used directly as Tailwind utility classes like bg-primary-30
 
 ### Usage
 
+```tsx
 <div className="bg-primary-30 text-white p-4 rounded">
   Primary Button
 </div>
@@ -230,6 +302,7 @@ These tokens can be used directly as Tailwind utility classes like bg-primary-30
 <div className="bg-error-d text-white p-4 rounded">
   Error Alert
 </div>
+```
 
 # Card
 
@@ -280,6 +353,103 @@ It supports multiple variants, types `(filled / outline)`, and accepts custom ch
   </Badge>
 </div>
 ```
+```tsx
+| Prop       | Type                                                                                                              | Default     | Description                                                   |
+| ---------- | ----------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------- |
+| `variant`  | `"primary" \| "success" \| "warning" \| "error" \| "gray" \| "neutral" \| "blue" \| "purple" \| "pink" \| "rose"` | `"primary"` | Color style of the badge.                                     |
+| `type`     | `"filled" \| "outline"`                                                                                           | `"filled"`  | Whether the badge is filled or outlined.                      |
+| `children` | `React.ReactNode`                                                                                                 | —           | Content inside the badge (text, icons, avatars, flags, etc.). |
+```
+
+# Timeline
+
+A flexible and customizable timeline component built with React. Supports different visual styles (`filled`, `outlined`, and `icon`), visited/unvisited states, connectors, and custom content.
+
+## Usage
+
+```tsx
+import { Timeline } from '@/components/timeline';
+import { CheckCircle } from 'lucide-react';
+
+<Timeline
+  variant="icon"
+  items={[
+    {
+      id: 'step-1',
+      title: 'Step 1',
+      description: 'This is the first step of the process.',
+      icon: <CheckCircle size={16} />,
+    },
+    {
+      id: 'step-2',
+      title: 'Step 2',
+      description: 'This step contains extra details.',
+      content: <CustomComponent />,
+      icon: <CheckCircle size={16} />,
+    },
+    {
+      id: 'step-3',
+      title: 'Step 3',
+      notVisited: true,
+      icon: <CheckCircle size={16} />,
+    },
+  ]}
+/>;
+```
+
+### Props
+
+| Prop        | Type                                                                                                                                  | Default      | Description                                                                                                                                    |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items`     | `Array<{ id: string; title: string; description?: string; content?: React.ReactNode; icon?: React.ReactNode; notVisited?: boolean }>` | **Required** | Timeline steps data. Each item requires a unique `id` and `title`. Optional fields include `description`, `content`, `icon`, and `notVisited`. |
+| `variant`   | `"filled" \| "outlined" \| "icon"`                                                                                                    | `"filled"`   | Style variant of the timeline dot. `"icon"` allows passing a custom `icon` for each item.                                                      |
+| `className` | `string`                                                                                                                              | `-`          | Custom classes for the root wrapper.                                                                                                           |
+
+# Button
+
+The `Button` component is a core interactive element in the design system. It supports multiple variants, sizes, and icons while ensuring accessibility and consistency.
+
+## Usage
+
+````tsx
+;
+<Button variant="default">Default</Button>
+<Button variant="primary">Primary</Button>
+<Button variant="outline" size="sm">Outline Small</Button>
+<Button size="icon"><Icon /></Button>
+```
+
+## Badge
+
+The `Badge` component is used to display small status indicators, tags, or labels.
+It supports multiple variants, types `(filled / outline)`, and accepts custom children (icons, avatars, flags, etc.).
+
+### Usage
+
+````tsx
+<div className="flex gap-2 flex-wrap">
+  <Badge variant="primary">Primary</Badge>
+  <Badge variant="success">Success</Badge>
+  <Badge variant="warning">Warning</Badge>
+  <Badge variant="error">Error</Badge>
+  <Badge variant="gray">Gray</Badge>
+  <Badge variant="blue">Blue</Badge>
+  <Badge variant="purple">Purple</Badge>
+  <Badge variant="pink">Pink</Badge>
+  <Badge variant="rose">Rose</Badge>
+
+  {/* Outline badges */}
+  <Badge variant="blue" type="outline">
+    Outlined
+  </Badge>
+
+  {/* With icons */}
+  <Badge variant="success">
+    <span className="mr-1">✔</span>
+    Success with Icon
+  </Badge>
+</div>
+```
 
 | Prop       | Type                                                                                                               | Default     | Description                                                          |
 | ---------- | ------------------------------------------------------------------------------------------------------------------ | ----------- | -------------------------------------------------------------------- |
@@ -292,7 +462,7 @@ It supports multiple variants, types `(filled / outline)`, and accepts custom ch
 The `Divider` component is used to separate content visually.
 It supports `vertical` and `horizontal` orientations, with configurable thickness (size) and custom width/height.
 
-```tsx
+````tsx
     <div className="flex flex-col gap-4">
       {/* Horizontal Divider */}
       <Divider orientation="horizontal" size={2} />
@@ -314,13 +484,23 @@ It supports `vertical` and `horizontal` orientations, with configurable thicknes
 | `color`       | `string`                                 | `#D9DAE4`      | Color of the divider line.
 
 
+````tsx
+;
+<Button variant="default">Default</Button>
+<Button variant="primary">Primary</Button>
+<Button variant="outline" size="sm">Outline Small</Button>
+<Button size="icon"><Icon /></Button>
+```
 
 ### Stepper
+
 A re-usable stepper component to lead users through multi-step workflows (checkout, sign-up, forms, etc.).
 Supports numeric, dots, progress, and labeled versions.
 
 ### Example
-``` const steps = [
+
+````tsx
+const steps = [
   { title: "Account Setup" },
   { title: "Profile Info" },
   { title: "Preferences" },
@@ -343,7 +523,8 @@ export default function Example() {
       <Stepper steps={steps} variant="labeled" />
     </div>
   );
-}```
+}
+```
 
 
 | Prop           | Type                                             | Default     | Description                        |
@@ -359,7 +540,8 @@ export default function Example() {
 A custom dropdown supporting single, multi(with chips), and grouped selections. Built with React and Tailwind CSS.
 
 ### Usage
-```import { useState } from "react"
+````tsx
+import { useState } from "react"
 import { SelectOption } from "@/components/select-option"
 
 const options = [
@@ -389,7 +571,8 @@ export default function Demo() {
       />
     </>
   )
-};  ```
+};  
+```
 
 ### Props
 
@@ -411,7 +594,8 @@ Full TypeScript support is included. No additional types package needed.
 
 ## Building
 
-```bash
+````tsx
+bash
 # Build for production
 pnpm build
 
@@ -422,7 +606,4 @@ pnpm build:types
 pnpm build-storybook
 ````
 
-```
-
 Made with ❤️ by the BusyFile team
-```