@bizapps/design-system-testing 0.4.3 → 1.0.0

package/README.md

@@ -22,12 +22,12 @@ A React component library built for TCCE CRM applications. Provides reusable, co
 
 Your project must have the following installed before using this library:
 
-| Package | Version |
-|---|---|
-| `react` | ^19 |
-| `react-dom` | ^19 |
-| `tailwindcss` | ^4 |
-| `@tailwindcss/vite` | ^4 |
+| Package             | Version |
+| ------------------- | ------- |
+| `react`             | ^19     |
+| `react-dom`         | ^19     |
+| `tailwindcss`       | ^4      |
+| `@tailwindcss/vite` | ^4      |
 
 > **Note:** `shadcn`, `tw-animate-css`, and font packages are already bundled inside the library's CSS. You do **not** need to install them separately.
 
@@ -48,16 +48,13 @@ pnpm add @bizapps/design-system-testing
 Add the Tailwind CSS plugin to your `vite.config.ts`:
 
 ```ts
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
-  plugins: [
-    react(),
-    tailwindcss(),
-  ],
-})
+    plugins: [react(), tailwindcss()],
+});
 ```
 
 ### 2. Import the styles
@@ -65,8 +62,8 @@ export default defineConfig({
 In your main CSS file (e.g. `src/index.css`), add these two lines **in this order**:
 
 ```css
-@import "tailwindcss";
-@import "@bizapps/design-system-testing/styles";
+@import 'tailwindcss';
+@import '@bizapps/design-system-testing/styles';
 ```
 
 > **Important:** `tailwindcss` must come **before** the library styles so that Tailwind's base layer is available when the library's theme tokens are applied.
@@ -76,7 +73,7 @@ In your main CSS file (e.g. `src/index.css`), add these two lines **in this orde
 Make sure your `src/main.tsx` imports the CSS file:
 
 ```tsx
-import './index.css'
+import './index.css';
 ```
 
 That's it. No further configuration is needed.
@@ -88,14 +85,14 @@ That's it. No further configuration is needed.
 Import components directly from the package:
 
 ```tsx
-import { Button } from '@bizapps/design-system-testing'
+import { Button } from '@bizapps/design-system-testing';
 
 function App() {
-  return (
-    <Button variant="primary" size="md">
-      Click me
-    </Button>
-  )
+    return (
+        <Button variant='primary' size='md'>
+            Click me
+        </Button>
+    );
 }
 ```
 
@@ -106,18 +103,18 @@ function App() {
 ### Button
 
 ```tsx
-import { Button } from '@bizapps/design-system-testing'
+import { Button } from '@bizapps/design-system-testing';
 ```
 
 #### Props
 
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `variant` | `'primary' \| 'secondary' \| 'cancel' \| 'outline' \| 'ghost'` | `'primary'` | Visual style of the button |
-| `size` | `'sm' \| 'md' \| 'lg' \| 'icon-sm'` | `'md'` | Size of the button |
-| `isLoading` | `boolean` | `false` | Shows a loading state |
-| `disabled` | `boolean` | `false` | Disables the button |
-| `asChild` | `boolean` | `false` | Renders as child element (via Radix Slot) |
+| Prop        | Type                                                           | Default     | Description                               |
+| ----------- | -------------------------------------------------------------- | ----------- | ----------------------------------------- |
+| `variant`   | `'primary' \| 'secondary' \| 'cancel' \| 'outline' \| 'ghost'` | `'primary'` | Visual style of the button                |
+| `size`      | `'sm' \| 'md' \| 'lg' \| 'icon-sm'`                            | `'md'`      | Size of the button                        |
+| `isLoading` | `boolean`                                                      | `false`     | Shows a loading state                     |
+| `disabled`  | `boolean`                                                      | `false`     | Disables the button                       |
+| `asChild`   | `boolean`                                                      | `false`     | Renders as child element (via Radix Slot) |
 
 #### Examples
 
@@ -202,13 +199,13 @@ The library includes the following fonts, loaded automatically:
 
 ```css
 .my-card {
-  background: var(--color-main-white);
-  border-radius: var(--border-radius-card);
-  box-shadow: var(--shadow-black-card);
+    background: var(--color-main-white);
+    border-radius: var(--border-radius-card);
+    box-shadow: var(--shadow-black-card);
 }
 
 .my-card:hover {
-  box-shadow: var(--shadow-hover-black-card);
+    box-shadow: var(--shadow-hover-black-card);
 }
 ```
 
@@ -217,9 +214,7 @@ The library includes the following fonts, loaded automatically:
 The tokens are also registered as Tailwind theme values, so you can use them as utility classes:
 
 ```tsx
-<div className="bg-main-blue-primary text-main-white rounded-card shadow-black-card">
-  Hello
-</div>
+<div className='bg-main-blue-primary text-main-white rounded-card shadow-black-card'>Hello</div>
 ```
 
 ---
@@ -273,9 +268,9 @@ git commit -m "feat: description of changes"
 ```
 
 2. Update the version in `package.json` following [semver](https://semver.org/):
-   - `patch` (0.4.x) → bug fixes
-   - `minor` (0.x.0) → new components or features
-   - `major` (x.0.0) → breaking changes
+    - `patch` (0.4.x) → bug fixes
+    - `minor` (0.x.0) → new components or features
+    - `major` (x.0.0) → breaking changes
 
 3. Build the library:
 
@@ -300,8 +295,8 @@ npm publish --access public
 Make sure the import order in your CSS file is correct — `tailwindcss` must come first:
 
 ```css
-@import "tailwindcss";                              /* ✅ first */
-@import "@bizapps/design-system-testing/styles";    /* ✅ second */
+@import 'tailwindcss'; /* ✅ first */
+@import '@bizapps/design-system-testing/styles'; /* ✅ second */
 ```
 
 ### `Cannot resolve './tokens.css'` or similar errors