@emporix/component-library 1.0.0 → 1.0.2

package/README.md

@@ -10,6 +10,7 @@ A modern React component library built with TypeScript, Vite, and SCSS modules.
 - 🧪 **Testing**: Comprehensive test suite with Vitest and React Testing Library
 - 📦 **Library Build**: Optimized for npm package distribution
 - 🔄 **CI/CD**: Automated testing and publishing pipeline
+- 🎨 **CSS Variables**: Global theming system with CSS custom properties
 
 ## Quick Start
 
@@ -29,13 +30,13 @@ npm install @emporix/component-library
 ```
 
 ```tsx
-import { Button } from '@emporix/component-library'
+import { PrimaryButton } from '@emporix/component-library'
 
 const MyComponent = () => {
   return (
-    <Button variant='primary' onClick={() => console.log('Clicked!')}>
+    <PrimaryButton onClick={() => console.log('Clicked!')}>
       Click me
-    </Button>
+    </PrimaryButton>
   )
 }
 ```
@@ -43,21 +44,107 @@ const MyComponent = () => {
 #### Method 2: Import styles in your main JavaScript/TypeScript file
 
 ```tsx
-import { Button } from '@emporix/component-library'
+import { PrimaryButton } from '@emporix/component-library'
 import '@emporix/component-library/styles'
 
 const MyComponent = () => {
   return (
-    <Button variant='primary' onClick={() => console.log('Clicked!')}>
+    <PrimaryButton onClick={() => console.log('Clicked!')}>
       Click me
-    </Button>
+    </PrimaryButton>
   )
 }
 ```
 
-#### Method 3: Copy CSS file manually
+#### Method 3: Copy CSS file manually (Fallback)
 
-If the above methods don't work, you can copy the CSS file from `node_modules/@emporix/component-library/dist/style.css` to your project and import it directly.
+If the above methods don't work, copy the CSS file from `node_modules/@emporix/component-library/dist/style.css` to your project and import it directly.
+
+## Components
+
+### PrimaryButton
+
+A simple, focused button component for primary actions.
+
+```tsx
+import { PrimaryButton } from '@emporix/component-library'
+
+// Basic usage
+<PrimaryButton>Click me</PrimaryButton>
+
+// With disabled state
+<PrimaryButton disabled>Disabled Button</PrimaryButton>
+
+// With click handler
+<PrimaryButton onClick={() => alert('Confirmed!')}>
+  Confirm Action
+</PrimaryButton>
+```
+
+#### Props
+
+| Prop        | Type       | Default | Description                |
+| ----------- | ---------- | ------- | -------------------------- |
+| children    | ReactNode  | -       | Button content             |
+| disabled    | boolean    | false   | Whether button is disabled |
+| onClick     | () => void | -       | Click handler              |
+| className   | string     | -       | Additional CSS class       |
+| data-testid | string     | -       | Test ID for testing        |
+
+### Tabs
+
+A flexible tabs component for organizing content into multiple panels.
+
+```tsx
+import { Tabs, TabItem } from '@emporix/component-library'
+
+const tabs: TabItem[] = [
+  {
+    id: 'tab1',
+    label: 'First Tab',
+    content: <div>First tab content</div>,
+  },
+  {
+    id: 'tab2',
+    label: 'Second Tab',
+    content: <div>Second tab content</div>,
+  },
+]
+
+// Basic usage
+<Tabs
+  tabs={tabs}
+  activeTabId="tab1"
+  onTabChange={(tabId) => setActiveTab(tabId)}
+/>
+
+// With custom styling and test ID
+<Tabs
+  tabs={tabs}
+  activeTabId="tab1"
+  onTabChange={(tabId) => setActiveTab(tabId)}
+  className="custom-tabs"
+  data-testid="my-tabs"
+/>
+```
+
+#### Props
+
+| Prop        | Type                    | Default | Description                    |
+| ----------- | ----------------------- | ------- | ------------------------------ |
+| tabs        | TabItem[]               | -       | Array of tab items             |
+| activeTabId | string                  | -       | ID of the currently active tab |
+| onTabChange | (tabId: string) => void | -       | Callback when tab is changed   |
+| className   | string                  | -       | Additional CSS class           |
+| data-testid | string                  | -       | Test ID for testing            |
+
+#### TabItem Interface
+
+| Prop    | Type      | Description                    |
+| ------- | --------- | ------------------------------ |
+| id      | string    | Unique identifier for the tab  |
+| label   | string    | Display label for the tab      |
+| content | ReactNode | Content to display when active |
 
 ## Theming with CSS Variables
 
@@ -67,24 +154,116 @@ The component library uses CSS variables for easy theming. You can customize the
 :root {
   --color-primary: #your-primary-color;
   --color-primary-hover: #your-primary-hover-color;
-  --color-secondary: #your-secondary-color;
   --border-radius-md: 0.5rem;
-  --font-size-base: 1.1rem;
+  --font-size-lg: 1.2rem;
   /* ... other variables */
 }
 ```
 
-Available CSS variables:
+### Available CSS Variables
 
-- **Colors**: `--color-primary`, `--color-secondary`, `--color-success`, `--color-danger`, `--color-warning`, `--color-info`, `--color-light`, `--color-dark`
-- **Border Radius**: `--border-radius-sm`, `--border-radius-md`, `--border-radius-lg`
-- **Font Sizes**: `--font-size-sm`, `--font-size-base`, `--font-size-lg`
-- **Font Weight**: `--font-weight-medium`
-- **Transitions**: `--transition-fast`, `--transition-normal`, `--transition-slow`
-- **Z-Index Layers**: `--z-dropdown`, `--z-modal`, `--z-tooltip`, etc.
-- **Component Variables**: `--button-padding-md`, `--input-padding-lg`, `--card-padding`, etc.
+The component library provides a minimal set of CSS variables that are actually used in the codebase. These variables are primarily used for the showcase page styling and can be customized for theming.
 
-For a complete reference of all available CSS variables, see [CSS_VARIABLES.md](./CSS_VARIABLES.md).
+#### Colors
+
+```css
+--color-primary: #007bff;
+--color-primary-hover: #0056b3;
+--color-dark: #343a40;
+```
+
+#### Text Colors
+
+```css
+--color-text-primary: #212529;
+--color-text-secondary: #6c757d;
+```
+
+#### Background Colors
+
+```css
+--color-bg-primary: #ffffff;
+--color-bg-secondary: #f8f9fa;
+```
+
+#### Border Colors
+
+```css
+--color-border-light: #e9ecef;
+```
+
+#### Spacing
+
+```css
+--spacing-sm: 0.5rem; /* 8px */
+--spacing-md: 1rem; /* 16px */
+--spacing-lg: 1.5rem; /* 24px */
+--spacing-xl: 3rem; /* 48px */
+```
+
+#### Border Radius
+
+```css
+--border-radius-sm: 0.25rem; /* 4px */
+--border-radius-md: 0.375rem; /* 6px */
+--border-radius-lg: 0.5rem; /* 8px */
+```
+
+#### Typography
+
+**Font Sizes:**
+
+```css
+--font-size-sm: 0.875rem; /* 14px */
+--font-size-base: 1rem; /* 16px */
+--font-size-lg: 1.125rem; /* 18px */
+```
+
+**Font Weights:**
+
+```css
+--font-weight-normal: 400;
+--font-weight-medium: 500;
+--font-weight-semibold: 600;
+--font-weight-bold: 700;
+```
+
+### Theming Examples
+
+#### Basic Theming
+
+```css
+:root {
+  --color-primary: #your-brand-color;
+  --color-primary-hover: #your-brand-hover-color;
+  --border-radius-md: 0.5rem;
+  --font-size-lg: 1.2rem;
+}
+```
+
+#### Dark Theme
+
+```css
+:root {
+  --color-bg-primary: #1a1a1a;
+  --color-bg-secondary: #2d2d2d;
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #cccccc;
+  --color-border-light: #404040;
+}
+```
+
+#### Custom Component Styling
+
+```css
+.my-custom-component {
+  padding: var(--spacing-md);
+  border-radius: var(--border-radius-lg);
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-light);
+}
+```
 
 ## Development
 
@@ -126,45 +305,6 @@ npm run storybook
 - `npm run format` - Format code with Prettier
 - `npm run format:check` - Check code formatting
 
-## Components
-
-### Button
-
-A versatile button component with multiple variants and sizes.
-
-```tsx
-import { Button } from '@emporix/component-library'
-
-// Variants
-<Button variant="primary">Primary</Button>
-<Button variant="secondary">Secondary</Button>
-<Button variant="success">Success</Button>
-<Button variant="danger">Danger</Button>
-
-// Sizes
-<Button size="sm">Small</Button>
-<Button size="md">Medium</Button>
-<Button size="lg">Large</Button>
-
-// States
-<Button disabled>Disabled</Button>
-<Button fullWidth>Full Width</Button>
-```
-
-#### Props
-
-| Prop        | Type                                                                                          | Default   | Description                     |
-| ----------- | --------------------------------------------------------------------------------------------- | --------- | ------------------------------- |
-| children    | ReactNode                                                                                     | -         | Button content                  |
-| variant     | 'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'light' \| 'dark' | 'primary' | Button variant                  |
-| size        | 'sm' \| 'md' \| 'lg'                                                                          | 'md'      | Button size                     |
-| disabled    | boolean                                                                                       | false     | Whether button is disabled      |
-| fullWidth   | boolean                                                                                       | false     | Whether button takes full width |
-| type        | 'button' \| 'submit' \| 'reset'                                                               | 'button'  | Button type                     |
-| onClick     | (event: MouseEvent) => void                                                                   | -         | Click handler                   |
-| className   | string                                                                                        | -         | Additional CSS class            |
-| data-testid | string                                                                                        | -         | Test ID for testing             |
-
 ## Testing
 
 The library includes comprehensive tests using Vitest and React Testing Library.
@@ -239,10 +379,8 @@ The project also includes pre-commit hooks that automatically format staged file
 - Update documentation as needed
 - Use arrow functions for React components (enforced by ESLint)
 - Avoid using `React.FC` type annotation (redundant with modern TypeScript)
-
-## License
-
-MIT License - see [LICENSE](LICENSE) file for details.
+- Use CSS variables for all styling values
+- Follow the established naming conventions for CSS classes
 
 ## Troubleshooting
 
@@ -253,14 +391,14 @@ If you encounter import errors like "Failed to resolve entry for package", ensur
 1. The package is properly installed: `npm install @emporix/component-library`
 2. You're using the correct import syntax:
    ```tsx
-   import { Button } from '@emporix/component-library'
+   import { PrimaryButton } from '@emporix/component-library'
    import '@emporix/component-library/styles'
    ```
 3. Your bundler supports ES modules and the package.json exports field
 
 ### Styling Issues
 
-If the Button component appears unstyled or you get "styles not found" errors:
+If the PrimaryButton component appears unstyled or you get "styles not found" errors:
 
 1. **Try Method 1 (Recommended):** Import styles in your main CSS file:
 
@@ -280,7 +418,7 @@ If the Button component appears unstyled or you get "styles not found" errors:
 
 4. **Check your bundler configuration:** Ensure your bundler (Vite, Webpack, etc.) is configured to handle CSS imports from node_modules
 
-5. **Verify the CSS classes:** The component uses SCSS modules with hashed class names (e.g., `_button_184r1_20`, `_primary_184r1_45`) and CSS variables for theming
+5. **Verify the CSS classes:** The component uses SCSS modules with hashed class names (e.g., `_primaryButton_1d0ha_1`, `_primaryButtonDisabled_1d0ha_53`) and CSS variables for theming
 
 ### TypeScript Issues
 
@@ -289,6 +427,28 @@ If TypeScript can't find types, make sure:
 1. The `@types/react` package is installed
 2. Your `tsconfig.json` includes the library in `node_modules`
 
+### Bundler-Specific Notes
+
+#### Vite
+
+All methods should work with Vite. Method 1 (CSS import) is recommended.
+
+#### Webpack
+
+Method 1 and Method 2 should work. If you encounter issues, try Method 3.
+
+#### Create React App
+
+Method 1 and Method 2 should work. If you encounter issues, try Method 3.
+
+#### Next.js
+
+Method 1 (CSS import) is recommended. Import the CSS in your `_app.tsx` or `_app.js` file.
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details.
+
 ## Support
 
 For support and questions, please open an issue in the repository.

package/dist/components/buttons/PrimaryButton.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export interface PrimaryButtonProps {
+    /**
+     * The content of the button
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}
+export declare const PrimaryButton: ({ children, disabled, onClick, className, "data-testid": testId, ...props }: PrimaryButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PrimaryButton.d.ts.map

package/dist/components/buttons/PrimaryButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../src/components/buttons/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,aAAa,GAAI,6EAO3B,kBAAkB,4CAqBpB,CAAA"}

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+export interface TabItem {
+    /**
+     * Unique identifier for the tab
+     */
+    id: string;
+    /**
+     * Display label for the tab
+     */
+    label: string;
+    /**
+     * Content to display when tab is active
+     */
+    content: ReactNode;
+}
+export interface TabsProps {
+    /**
+     * Array of tab items to display
+     */
+    tabs: TabItem[];
+    /**
+     * ID of the currently active tab
+     */
+    activeTabId: string;
+    /**
+     * Callback function when tab is changed
+     */
+    onTabChange: (tabId: string) => void;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}
+export declare const Tabs: ({ tabs, activeTabId, onTabChange, className, "data-testid": testId, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,MAAM,WAAW,OAAO;IACtB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,EAAE,SAAS,CAAA;CACnB;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,EAAE,OAAO,EAAE,CAAA;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,IAAI,GAAI,gFAOlB,SAAS,4CAsCX,CAAA"}

package/dist/index.d.ts

@@ -1,3 +1,5 @@
-export { Button } from './components/Button/Button';
-export type { ButtonProps } from './components/Button/Button';
+export { PrimaryButton } from './components/buttons/PrimaryButton';
+export type { PrimaryButtonProps } from './components/buttons/PrimaryButton';
+export { Tabs } from './components/tabs/Tabs';
+export type { TabsProps, TabItem } from './components/tabs/Tabs';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAG7D,OAAO,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAClE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAE5E,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAGhE,OAAO,qBAAqB,CAAA"}