@mohammadsalman/storybook-custom-ui 1.0.0 → 1.0.2

package/README.md

@@ -1,189 +1,73 @@
-# Storybook Component Library
+# React + TypeScript + Vite
 
-A minimal React TypeScript component library with Storybook, featuring a flexible theming system.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-## Features
+Currently, two official plugins are available:
 
-- ✅ Button component with multiple variants, colors, and sizes
-- ✅ Custom `useFormInput` hook for form input management
-- ✅ TypeScript support with full type safety
-- ✅ Theming system that can be adapted to any project
-- ✅ Storybook with interactive controls
-- ✅ Zero external UI library dependencies
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-## Getting Started
+## React Compiler
 
-### Installation
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
 
-```bash
-npm install
-```
-
-### Running Storybook
+## Expanding the ESLint configuration
 
-```bash
-npm run storybook
-```
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
 
-This will start Storybook on `http://localhost:6006`
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
 
-### Building Storybook
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
 
-```bash
-npm run build-storybook
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
 ```
 
-## Theming System
-
-The theming system is designed to be easily adaptable to any project. All components use the theme through the `useTheme` hook.
-
-### Default Theme
-
-The default theme is located in `src/theme/defaultTheme.ts`. It includes:
-
-- **Palette**: Colors for primary, secondary, success, error, warning, info, and grey scales
-- **Typography**: Font families, sizes, weights, and line heights for all text variants
-- **Spacing**: Consistent spacing unit (default: 8px)
-- **Shadows**: Elevation shadows (0-24)
-- **Shape**: Border radius values
-- **Z-Index**: Layering system
-
-### Using the Theme
-
-Wrap your application with the `ThemeProvider`:
-
-```tsx
-import { ThemeProvider, defaultTheme } from './theme';
-
-function App() {
-  return (
-    <ThemeProvider theme={defaultTheme}>
-      <YourComponents />
-    </ThemeProvider>
-  );
-}
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
 ```
-
-## Available Components
-
-### Button
-
-A versatile button component with multiple variants, colors, and sizes.
-
-```tsx
-import { Button } from './components';
-
-<Button variant="contained" color="primary" size="medium">
-  Click Me
-</Button>
-```
-
-**Props:**
-- `variant`: 'contained' | 'outlined' | 'text'
-- `color`: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'
-- `size`: 'small' | 'medium' | 'large'
-- `fullWidth`: boolean
-- `disabled`: boolean
-
-## Available Hooks
-
-### useFormInput
-
-A custom hook for managing form input state, validation, and error handling.
-
-```tsx
-import { useFormInput } from './hooks';
-
-const MyForm = () => {
-  const emailInput = useFormInput({
-    initialValue: '',
-    validate: (value) => {
-      if (!value) return 'Email is required';
-      if (!/\S+@\S+\.\S+/.test(value)) return 'Invalid email format';
-      return null;
-    }
-  });
-
-  return (
-    <div>
-      <input
-        value={emailInput.value}
-        onChange={emailInput.onChange}
-        onBlur={emailInput.onBlur}
-      />
-      {emailInput.error && <span>{emailInput.error}</span>}
-      <button onClick={emailInput.reset}>Reset</button>
-    </div>
-  );
-};
-```
-
-**Options:**
-- `initialValue`: string (default: '')
-- `validate`: (value: string) => string | null
-- `onChange`: (value: string) => void (optional callback)
-
-**Returns:**
-- `value`: string
-- `error`: string | null
-- `onChange`: (e: ChangeEvent) => void
-- `onBlur`: () => void
-- `setValue`: (value: string) => void
-- `setError`: (error: string | null) => void
-- `reset`: () => void
-- `isValid`: boolean
-
-## Project Structure
-
-```
-src/
-  ├── components/          # UI components
-  │   └── Button/
-  │       ├── Button.tsx
-  │       ├── Button.stories.tsx
-  │       └── index.ts
-  ├── hooks/               # Custom hooks
-  │   ├── useFormInput.ts
-  │   ├── useFormInput.stories.tsx
-  │   └── index.ts
-  ├── theme/              # Theming system
-  │   ├── types.ts
-  │   ├── defaultTheme.ts
-  │   ├── ThemeProvider.tsx
-  │   └── index.ts
-  └── utils/              # Utility functions
-      └── styles.ts
-.storybook/               # Storybook configuration
-  ├── main.ts
-  ├── preview.tsx
-  └── global.css
-```
-
-## Adding New Components
-
-To add a new component:
-
-1. Create a new directory in `src/components/`
-2. Add your component file (e.g., `MyComponent.tsx`)
-3. Create an `index.ts` file that exports your component
-4. Create a `MyComponent.stories.tsx` file for Storybook
-5. Export from `src/components/index.ts`
-
-## Adding New Hooks
-
-To add a new hook:
-
-1. Create a new file in `src/hooks/` (e.g., `useMyHook.ts`)
-2. Export from `src/hooks/index.ts`
-3. Optionally create a `useMyHook.stories.tsx` file for Storybook
-
-## Adapting to Your Project
-
-To use these components and hooks in your project:
-
-1. Copy the `src/components`, `src/hooks`, `src/theme`, and `src/utils` directories to your project
-2. Create your custom theme based on your design system
-3. Wrap your app with `ThemeProvider` using your custom theme
-4. Import and use components and hooks as needed
-
-The theme system is designed to be flexible - you can override any part of it to match your brand colors, typography, spacing, and more.