@mohammadsalman/storybook-custom-ui 1.0.0 → 1.0.2

package/package.json

@@ -1,53 +1,64 @@
 {
   "name": "@mohammadsalman/storybook-custom-ui",
-  "version": "1.0.0",
   "description": "A minimal React TypeScript component library with Button component and useFormInput hook",
-  "main":"src/index.ts",
-  "module": "src/index.ts",
-  "types": "src/index.ts",
-  "files": [
-    "src"
-  ],
-  "keywords": [
-    "react",
-    "typescript",
-    "components",
-    "hooks",
-    "storybook",
-    "button",
-    "form-input"
-  ],
-  "author": "Your Name <your.email@example.com>",
+
+  "version": "1.0.2",
+  "main": "dist/index.js", 
+  "module": "dist/index.esm.js",  
+  "types": "dist/index.d.ts", 
+  "files": ["dist"], 
+  
+  "keywords": ["react", "typescript", "components", "storybook"],
+  "author": "Mohammad Salman <mohammadsalman71993@gmail.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/MohSalman/creative-ui-react-ui-library.git"
   },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
+  "type": "module",
   "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "prepublishOnly": "npm run build-storybook"
+    "build-storybook": "storybook build"
+  },
+
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
-  "dependencies": {},
+
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@babel/preset-react": "^7.28.5",
-    "@babel/preset-typescript": "^7.28.5",
-    "@storybook/addon-essentials": "^7.6.5",
-    "@storybook/addon-interactions": "^7.6.5",
-    "@storybook/addon-links": "^7.6.5",
-    "@storybook/blocks": "^7.6.5",
-    "@storybook/react": "^7.6.5",
-    "@storybook/react-webpack5": "^7.6.5",
-    "@storybook/test": "^7.6.5",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "storybook": "^7.6.5",
-    "typescript": "^5.3.3"
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "storybook": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
+    "@chromatic-com/storybook": "^5.0.0",
+    "@storybook/addon-vitest": "^10.1.11",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-onboarding": "^10.1.11",
+    "eslint-plugin-storybook": "^10.1.11",
+    "vitest": "^4.0.17",
+    "playwright": "^1.57.0",
+    "@vitest/browser-playwright": "^4.0.17",
+    "@vitest/coverage-v8": "^4.0.17"
   }
 }

package/src/components/Button/Button.stories.tsx

@@ -1,109 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  title: 'Components/Button',
-  component: Button,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: ['contained', 'outlined', 'text'],
-    },
-    color: {
-      control: { type: 'select' },
-      options: ['primary', 'secondary', 'success', 'error', 'warning', 'info'],
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
-    },
-    fullWidth: {
-      control: { type: 'boolean' },
-    },
-    disabled: {
-      control: { type: 'boolean' },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Contained: Story = {
-  args: {
-    children: 'Button',
-    variant: 'contained',
-    color: 'primary',
-    size: 'medium',
-  },
-};
-
-export const Outlined: Story = {
-  args: {
-    children: 'Button',
-    variant: 'outlined',
-    color: 'primary',
-    size: 'medium',
-  },
-};
-
-export const Text: Story = {
-  args: {
-    children: 'Button',
-    variant: 'text',
-    color: 'primary',
-    size: 'medium',
-  },
-};
-
-export const Colors: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-      <Button color="primary">Primary</Button>
-      <Button color="secondary">Secondary</Button>
-      <Button color="success">Success</Button>
-      <Button color="error">Error</Button>
-      <Button color="warning">Warning</Button>
-      <Button color="info">Info</Button>
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-      <Button size="small">Small</Button>
-      <Button size="medium">Medium</Button>
-      <Button size="large">Large</Button>
-    </div>
-  ),
-};
-
-export const Variants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-      <Button variant="contained">Contained</Button>
-      <Button variant="outlined">Outlined</Button>
-      <Button variant="text">Text</Button>
-    </div>
-  ),
-};
-
-export const FullWidth: Story = {
-  args: {
-    children: 'Full Width Button',
-    fullWidth: true,
-    variant: 'contained',
-  },
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-      <Button variant="contained" disabled>Disabled</Button>
-      <Button variant="outlined" disabled>Disabled</Button>
-      <Button variant="text" disabled>Disabled</Button>
-    </div>
-  ),
-};

package/src/components/Button/Button.tsx

@@ -1,144 +0,0 @@
-import React from 'react';
-import { useTheme } from '../../theme';
-import { spacing } from '../../utils/styles';
-
-export type ButtonVariant = 'contained' | 'outlined' | 'text';
-export type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
-export type ButtonSize = 'small' | 'medium' | 'large';
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant;
-  color?: ButtonColor;
-  size?: ButtonSize;
-  fullWidth?: boolean;
-  disabled?: boolean;
-  children: React.ReactNode;
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  variant = 'contained',
-  color = 'primary',
-  size = 'medium',
-  fullWidth = false,
-  disabled = false,
-  children,
-  style,
-  ...props
-}) => {
-  const theme = useTheme();
-
-  const getVariantStyles = (): React.CSSProperties => {
-    const colorValue = theme.palette[color][500];
-    const textColor = variant === 'contained' ? '#ffffff' : colorValue;
-
-    switch (variant) {
-      case 'contained':
-        return {
-          backgroundColor: colorValue,
-          color: textColor,
-          border: 'none',
-          boxShadow: theme.shadows[2],
-        };
-      case 'outlined':
-        return {
-          backgroundColor: 'transparent',
-          color: colorValue,
-          border: `1px solid ${colorValue}`,
-          boxShadow: 'none',
-        };
-      case 'text':
-        return {
-          backgroundColor: 'transparent',
-          color: colorValue,
-          border: 'none',
-          boxShadow: 'none',
-        };
-      default:
-        return {};
-    }
-  };
-
-  const getSizeStyles = (): React.CSSProperties => {
-    switch (size) {
-      case 'small':
-        return {
-          padding: spacing(theme, 0.5, 1.5),
-          fontSize: theme.typography.button.fontSize,
-          minWidth: '64px',
-        };
-      case 'medium':
-        return {
-          padding: spacing(theme, 1, 2),
-          fontSize: theme.typography.button.fontSize,
-          minWidth: '64px',
-        };
-      case 'large':
-        return {
-          padding: spacing(theme, 1.5, 3),
-          fontSize: '1rem',
-          minWidth: '64px',
-        };
-      default:
-        return {};
-    }
-  };
-
-  const baseStyles: React.CSSProperties = {
-    fontFamily: theme.typography.button.fontFamily,
-    fontWeight: theme.typography.button.fontWeight,
-    lineHeight: theme.typography.button.lineHeight,
-    letterSpacing: theme.typography.button.letterSpacing,
-    textTransform: 'uppercase',
-    borderRadius: `${theme.shape.borderRadius}px`,
-    cursor: disabled ? 'not-allowed' : 'pointer',
-    outline: 'none',
-    transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-    width: fullWidth ? '100%' : 'auto',
-    opacity: disabled ? 0.6 : 1,
-    ...getVariantStyles(),
-    ...getSizeStyles(),
-    ...style,
-  };
-
-  const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (!disabled && props.onMouseEnter) {
-      props.onMouseEnter(e);
-    }
-  };
-
-  const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (!disabled && props.onMouseLeave) {
-      props.onMouseLeave(e);
-    }
-  };
-
-  return (
-    <button
-      {...props}
-      disabled={disabled}
-      style={baseStyles}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onMouseOver={(e) => {
-        if (!disabled) {
-          e.currentTarget.style.backgroundColor = 
-            variant === 'contained' 
-              ? theme.palette[color][700]
-              : variant === 'outlined'
-              ? theme.palette.action.hover
-              : theme.palette.action.hover;
-        }
-      }}
-      onMouseOut={(e) => {
-        if (!disabled) {
-          e.currentTarget.style.backgroundColor = 
-            variant === 'contained'
-              ? theme.palette[color][500]
-              : 'transparent';
-        }
-      }}
-    >
-      {children}
-    </button>
-  );
-};

package/src/components/Button/index.ts

@@ -1 +0,0 @@
-export * from './Button';

package/src/components/index.ts

@@ -1 +0,0 @@
-export * from './Button';

package/src/hooks/index.ts

@@ -1 +0,0 @@
-export * from './useFormInput';

package/src/hooks/useFormInput.stories.tsx

@@ -1,126 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { useFormInput } from './useFormInput';
-import { Button } from '../components/Button';
-
-// Demo component to showcase the hook
-const FormInputDemo = ({ 
-  initialValue, 
-  validate, 
-  label 
-}: { 
-  initialValue?: string; 
-  validate?: (value: string) => string | null;
-  label?: string;
-}) => {
-  const input = useFormInput({
-    initialValue,
-    validate,
-  });
-
-  return (
-    <div style={{ maxWidth: '400px', padding: '20px' }}>
-      <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>
-        {label || 'Input'}
-      </label>
-      <input
-        type="text"
-        value={input.value}
-        onChange={input.onChange}
-        onBlur={input.onBlur}
-        style={{
-          width: '100%',
-          padding: '8px 12px',
-          border: `1px solid ${input.error ? '#d32f2f' : '#ccc'}`,
-          borderRadius: '4px',
-          fontSize: '14px',
-          outline: 'none',
-        }}
-        placeholder="Type something..."
-      />
-      {input.error && (
-        <div style={{ color: '#d32f2f', fontSize: '12px', marginTop: '4px' }}>
-          {input.error}
-        </div>
-      )}
-      <div style={{ marginTop: '12px', display: 'flex', gap: '8px' }}>
-        <Button size="small" onClick={input.reset}>
-          Reset
-        </Button>
-        <div style={{ 
-          padding: '8px', 
-          fontSize: '12px', 
-          color: input.isValid ? '#2e7d32' : '#666' 
-        }}>
-          Valid: {input.isValid ? 'Yes' : 'No'}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const meta: Meta<typeof FormInputDemo> = {
-  title: 'Hooks/useFormInput',
-  component: FormInputDemo,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'A custom hook for managing form input state, validation, and error handling.',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof FormInputDemo>;
-
-export const Basic: Story = {
-  args: {
-    label: 'Basic Input',
-  },
-};
-
-export const WithInitialValue: Story = {
-  args: {
-    label: 'Input with Initial Value',
-    initialValue: 'Hello World',
-  },
-};
-
-export const WithValidation: Story = {
-  args: {
-    label: 'Email Input (with validation)',
-    initialValue: '',
-    validate: (value) => {
-      if (!value) return 'Email is required';
-      if (!/\S+@\S+\.\S+/.test(value)) return 'Invalid email format';
-      return null;
-    },
-  },
-};
-
-export const PasswordValidation: Story = {
-  args: {
-    label: 'Password (min 8 characters)',
-    initialValue: '',
-    validate: (value) => {
-      if (!value) return 'Password is required';
-      if (value.length < 8) return 'Password must be at least 8 characters';
-      return null;
-    },
-  },
-};
-
-export const NumberValidation: Story = {
-  args: {
-    label: 'Age (must be 18+)',
-    initialValue: '',
-    validate: (value) => {
-      if (!value) return 'Age is required';
-      const num = parseInt(value, 10);
-      if (isNaN(num)) return 'Must be a number';
-      if (num < 18) return 'Must be 18 or older';
-      return null;
-    },
-  },
-};

package/src/hooks/useFormInput.ts

@@ -1,114 +0,0 @@
-import { useState, useCallback, ChangeEvent } from 'react';
-
-export interface UseFormInputOptions {
-  initialValue?: string;
-  validate?: (value: string) => string | null;
-  onChange?: (value: string) => void;
-}
-
-export interface UseFormInputReturn {
-  value: string;
-  error: string | null;
-  onChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-  onBlur: () => void;
-  setValue: (value: string) => void;
-  setError: (error: string | null) => void;
-  reset: () => void;
-  isValid: boolean;
-}
-
-/**
- * Custom hook for managing form input state, validation, and error handling
- * 
- * @param options - Configuration options for the hook
- * @param options.initialValue - Initial value for the input (default: '')
- * @param options.validate - Validation function that returns error message or null
- * @param options.onChange - Optional callback when value changes
- * @returns Object containing input state and handlers
- * 
- * @example
- * ```tsx
- * const emailInput = useFormInput({
- *   initialValue: '',
- *   validate: (value) => {
- *     if (!value) return 'Email is required';
- *     if (!/\S+@\S+\.\S+/.test(value)) return 'Invalid email format';
- *     return null;
- *   }
- * });
- * 
- * <input
- *   value={emailInput.value}
- *   onChange={emailInput.onChange}
- *   onBlur={emailInput.onBlur}
- * />
- * {emailInput.error && <span>{emailInput.error}</span>}
- * ```
- */
-export const useFormInput = ({
-  initialValue = '',
-  validate,
-  onChange: onChangeCallback,
-}: UseFormInputOptions = {}): UseFormInputReturn => {
-  const [value, setValueState] = useState<string>(initialValue);
-  const [error, setErrorState] = useState<string | null>(null);
-  const [touched, setTouched] = useState<boolean>(false);
-
-  const handleChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const newValue = e.target.value;
-      setValueState(newValue);
-      
-      // Clear error when user starts typing
-      if (error && touched) {
-        const validationError = validate ? validate(newValue) : null;
-        setErrorState(validationError);
-      }
-      
-      // Call optional onChange callback
-      if (onChangeCallback) {
-        onChangeCallback(newValue);
-      }
-    },
-    [error, touched, validate, onChangeCallback]
-  );
-
-  const handleBlur = useCallback(() => {
-    setTouched(true);
-    if (validate) {
-      const validationError = validate(value);
-      setErrorState(validationError);
-    }
-  }, [value, validate]);
-
-  const setValue = useCallback((newValue: string) => {
-    setValueState(newValue);
-    if (touched && validate) {
-      const validationError = validate(newValue);
-      setErrorState(validationError);
-    }
-  }, [touched, validate]);
-
-  const setError = useCallback((errorMessage: string | null) => {
-    setErrorState(errorMessage);
-  }, []);
-
-  const reset = useCallback(() => {
-    setValueState(initialValue);
-    setErrorState(null);
-    setTouched(false);
-  }, [initialValue]);
-
-  const isValid = error === null;
-
-  return {
-    value,
-    error,
-    onChange: handleChange,
-    onBlur: handleBlur,
-    setValue,
-    setError,
-    reset,
-    isValid,
-  };
-};

package/src/theme/ThemeProvider.tsx

@@ -1,34 +0,0 @@
-import React, { createContext, useContext, ReactNode } from 'react';
-import { Theme } from './types';
-
-const ThemeContext = createContext<Theme | undefined>(undefined);
-
-export const useTheme = (): Theme => {
-  const theme = useContext(ThemeContext);
-  if (!theme) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return theme;
-};
-
-interface ThemeProviderProps {
-  theme: Theme;
-  children: ReactNode;
-}
-
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {
-  return (
-    <ThemeContext.Provider value={theme}>
-      <div
-        style={{
-          color: theme.palette.text.primary,
-          backgroundColor: theme.palette.background.default,
-          fontFamily: theme.typography.fontFamily,
-          fontSize: theme.typography.fontSize,
-        }}
-      >
-        {children}
-      </div>
-    </ThemeContext.Provider>
-  );
-};