@mohammadsalman/storybook-custom-ui 1.0.1 → 1.0.2

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/index.ts

@@ -1,11 +0,0 @@
-// Export all components
-export * from './components';
-
-// Export all hooks
-export * from './hooks';
-
-// Export theme
-export * from './theme';
-
-// Export utils
-export * from './utils/styles';

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>
-  );
-};

package/src/theme/defaultTheme.ts

@@ -1,182 +0,0 @@
-import { Theme, PaletteColor } from './types';
-
-const createPaletteColor = (main: string, light: string, dark: string): PaletteColor => ({
-  50: light,
-  100: light,
-  200: light,
-  300: main,
-  400: main,
-  500: main,
-  600: main,
-  700: dark,
-  800: dark,
-  900: dark,
-});
-
-export const defaultTheme: Theme = {
-  mode: 'light',
-  palette: {
-    primary: createPaletteColor('#1976d2', '#42a5f5', '#1565c0'),
-    secondary: createPaletteColor('#9c27b0', '#ba68c8', '#7b1fa2'),
-    success: createPaletteColor('#2e7d32', '#66bb6a', '#1b5e20'),
-    error: createPaletteColor('#d32f2f', '#ef5350', '#c62828'),
-    warning: createPaletteColor('#ed6c02', '#ff9800', '#e65100'),
-    info: createPaletteColor('#0288d1', '#42a5f5', '#01579b'),
-    grey: {
-      50: '#fafafa',
-      100: '#f5f5f5',
-      200: '#eeeeee',
-      300: '#e0e0e0',
-      400: '#bdbdbd',
-      500: '#9e9e9e',
-      600: '#757575',
-      700: '#616161',
-      800: '#424242',
-      900: '#212121',
-    },
-    text: {
-      primary: 'rgba(0, 0, 0, 0.87)',
-      secondary: 'rgba(0, 0, 0, 0.6)',
-      disabled: 'rgba(0, 0, 0, 0.38)',
-    },
-    background: {
-      default: '#ffffff',
-      paper: '#ffffff',
-    },
-    divider: 'rgba(0, 0, 0, 0.12)',
-    action: {
-      active: 'rgba(0, 0, 0, 0.54)',
-      hover: 'rgba(0, 0, 0, 0.04)',
-      selected: 'rgba(0, 0, 0, 0.08)',
-      disabled: 'rgba(0, 0, 0, 0.26)',
-      disabledBackground: 'rgba(0, 0, 0, 0.12)',
-    },
-  },
-  typography: {
-    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-    fontSize: 14,
-    fontWeightLight: 300,
-    fontWeightRegular: 400,
-    fontWeightMedium: 500,
-    fontWeightBold: 700,
-    h1: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 300,
-      fontSize: '6rem',
-      lineHeight: '1.167',
-      letterSpacing: '-0.01562em',
-    },
-    h2: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 300,
-      fontSize: '3.75rem',
-      lineHeight: '1.2',
-      letterSpacing: '-0.00833em',
-    },
-    h3: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '3rem',
-      lineHeight: '1.167',
-      letterSpacing: '0em',
-    },
-    h4: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '2.125rem',
-      lineHeight: '1.235',
-      letterSpacing: '0.00735em',
-    },
-    h5: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '1.5rem',
-      lineHeight: '1.334',
-      letterSpacing: '0em',
-    },
-    h6: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 500,
-      fontSize: '1.25rem',
-      lineHeight: '1.6',
-      letterSpacing: '0.0075em',
-    },
-    subtitle1: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '1rem',
-      lineHeight: '1.75',
-      letterSpacing: '0.00938em',
-    },
-    subtitle2: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 500,
-      fontSize: '0.875rem',
-      lineHeight: '1.57',
-      letterSpacing: '0.00714em',
-    },
-    body1: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '1rem',
-      lineHeight: '1.5',
-      letterSpacing: '0.00938em',
-    },
-    body2: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '0.875rem',
-      lineHeight: '1.43',
-      letterSpacing: '0.01071em',
-    },
-    button: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 500,
-      fontSize: '0.875rem',
-      lineHeight: '1.75',
-      letterSpacing: '0.02857em',
-    },
-    caption: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '0.75rem',
-      lineHeight: '1.66',
-      letterSpacing: '0.03333em',
-    },
-    overline: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '0.75rem',
-      lineHeight: '2.66',
-      letterSpacing: '0.08333em',
-    },
-  },
-  spacing: {
-    unit: 8,
-  },
-  shape: {
-    borderRadius: 4,
-  },
-  shadows: {
-    0: 'none',
-    1: '0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)',
-    2: '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
-    3: '0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12)',
-    4: '0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)',
-    5: '0px 3px 5px -1px rgba(0,0,0,0.2), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12)',
-    6: '0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)',
-    8: '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
-    12: '0px 7px 8px -4px rgba(0,0,0,0.2), 0px 12px 17px 2px rgba(0,0,0,0.14), 0px 5px 22px 4px rgba(0,0,0,0.12)',
-    16: '0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12)',
-    24: '0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12)',
-  },
-  zIndex: {
-    mobileStepper: 1000,
-    speedDial: 1050,
-    appBar: 1100,
-    drawer: 1200,
-    modal: 1300,
-    snackbar: 1400,
-    tooltip: 1500,
-  },
-};

package/src/theme/index.ts

@@ -1,3 +0,0 @@
-export * from './types';
-export * from './ThemeProvider';
-export * from './defaultTheme';

package/src/theme/types.ts

@@ -1,106 +0,0 @@
-export type ThemeMode = 'light' | 'dark';
-
-export interface PaletteColor {
-  50: string;
-  100: string;
-  200: string;
-  300: string;
-  400: string;
-  500: string;
-  600: string;
-  700: string;
-  800: string;
-  900: string;
-}
-
-export interface Palette {
-  primary: PaletteColor;
-  secondary: PaletteColor;
-  success: PaletteColor;
-  error: PaletteColor;
-  warning: PaletteColor;
-  info: PaletteColor;
-  grey: PaletteColor;
-  text: {
-    primary: string;
-    secondary: string;
-    disabled: string;
-  };
-  background: {
-    default: string;
-    paper: string;
-  };
-  divider: string;
-  action: {
-    active: string;
-    hover: string;
-    selected: string;
-    disabled: string;
-    disabledBackground: string;
-  };
-}
-
-export interface Typography {
-  fontFamily: string;
-  fontSize: number;
-  fontWeightLight: number;
-  fontWeightRegular: number;
-  fontWeightMedium: number;
-  fontWeightBold: number;
-  h1: TypographyVariant;
-  h2: TypographyVariant;
-  h3: TypographyVariant;
-  h4: TypographyVariant;
-  h5: TypographyVariant;
-  h6: TypographyVariant;
-  subtitle1: TypographyVariant;
-  subtitle2: TypographyVariant;
-  body1: TypographyVariant;
-  body2: TypographyVariant;
-  button: TypographyVariant;
-  caption: TypographyVariant;
-  overline: TypographyVariant;
-}
-
-export interface TypographyVariant {
-  fontFamily: string;
-  fontWeight: number;
-  fontSize: string;
-  lineHeight: string;
-  letterSpacing: string;
-}
-
-export interface Spacing {
-  unit: number;
-}
-
-export interface Shape {
-  borderRadius: number;
-}
-
-export interface Shadows {
-  [key: number]: string;
-}
-
-export interface Theme {
-  mode: ThemeMode;
-  palette: Palette;
-  typography: Typography;
-  spacing: Spacing;
-  shape: Shape;
-  shadows: Shadows;
-  zIndex: {
-    mobileStepper: number;
-    speedDial: number;
-    appBar: number;
-    drawer: number;
-    modal: number;
-    snackbar: number;
-    tooltip: number;
-  };
-}
-
-export type ThemeProviderProps = {
-  theme: Theme;
-  children: React.ReactNode;
-};

package/src/utils/styles.ts

@@ -1,15 +0,0 @@
-import { Theme } from '../theme/types';
-
-export const spacing = (theme: Theme, ...values: number[]): string => {
-  return values.map(value => `${value * theme.spacing.unit}px`).join(' ');
-};
-
-export const getColor = (
-  theme: Theme,
-  color: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info',
-  shade: keyof Theme['palette']['primary'] = 500
-): string => {
-  return theme.palette[color][shade];
-};
-
-export const css = (styles: React.CSSProperties): React.CSSProperties => styles;