@mohammadsalman/storybook-custom-ui 1.0.1 → 1.0.3

package/src/components/Card/Card.tsx

@@ -1,119 +0,0 @@
-import React from 'react';
-import { useTheme } from '../../theme';
-import { spacing } from '../../utils/styles';
-
-export interface CardProps {
-    variant?: 'outlined' | 'elevated' | 'flat';
-
-    heading?: string;
-    subheading?: string;
-    description?: string;
-    children?: React.ReactNode;
-    className?: string;
-    cardContentClass?: string;
-    cardHeadingClass?: string;
-    cardSubheadingClass?: string;
-    cardDescriptionClass?: string;
-    cardActionsClass?: string;
-
-    actions?: React.ReactNode;
-
-     // Styling
-  elevation?: number; // 0-24 (for elevated variant)
-  style?: React.CSSProperties;
-  
-  // Optional callbacks
-  onClick?: () => void;
-}
-
-export const Card: React.FC<CardProps> = ({
-    variant = 'outlined',
-    heading,
-    subheading,
-    description,
-    children,
-    className,
-    cardContentClass,
-    cardHeadingClass,
-    cardSubheadingClass,
-    cardDescriptionClass,
-    cardActionsClass,
-    actions,
-    elevation = 2, // 0-24 (for elevated variant)
-    style,
-    onClick,
-    ...props
-  }) => {
-    const theme = useTheme();
-
-    const getVariantStyles = (): React.CSSProperties => {   
-        switch (variant) {
-            case 'outlined':
-                return {
-                    border: `1px solid ${theme.palette.grey[300]}`,
-                }
-            case 'elevated':
-                return {
-                    boxShadow: theme.shadows[elevation],
-                }
-            case 'flat':
-                return {
-                    boxShadow: 'none',
-                }
-        default:
-            return {};
-    };  }
-
-    const baseStyles: React.CSSProperties = {
-        fontFamily: theme.typography.button.fontFamily,
-        lineHeight: theme.typography.button.lineHeight,
-        letterSpacing: theme.typography.button.letterSpacing,
-        padding: spacing(theme, 2),
-        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 cardContentStyles: React.CSSProperties = {
-        fontSize: theme.typography.body1.fontSize,
-        fontWeight: theme.typography.body1.fontWeight,
-      };
-
-      const cardHeadingStyles: React.CSSProperties = {
-        fontSize: theme.typography.h6.fontSize,
-        fontWeight: theme.typography.h6.fontWeight,
-      };
-      const cardSubheadingStyles: React.CSSProperties = {
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: theme.typography.body2.fontWeight,
-      };
-      const cardDescriptionStyles: React.CSSProperties = {
-        fontSize: theme.typography.body1.fontSize,
-        fontWeight: theme.typography.body1.fontWeight,
-      };
-
-      const cardActionsStyles: React.CSSProperties = {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        alignItems: 'center',
-      };
-
-    return (
-        <div className={className} style={baseStyles} onClick={onClick} {...props}>
-            <div className={cardContentClass} style={cardContentStyles}>
-                <div className={cardHeadingClass} style={cardHeadingStyles}>{heading}</div>
-                <hr/>
-                <div className={cardSubheadingClass} style={cardSubheadingStyles}>{subheading}</div>
-                <div className={cardDescriptionClass} style={cardDescriptionStyles}>{description}</div>
-            </div>
-            
-            <div className={cardActionsClass} style={cardActionsStyles}>{actions}</div>
-        </div>
-    );
-};

package/src/components/Card/card.stories.tsx

@@ -1,127 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react"; /* Card Stories */
-import { Card } from "./Card";
-import { Button } from "../Button";
-
-const meta: Meta<typeof Card> = {
-  title: "Components/Card",
-  component: Card,
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: ["outlined", "elevated", "flat"],
-    },
-  },
-  args: {
-    variant: "outlined",
-    heading: "Card Heading",
-    subheading: "Card Subheading",
-    description: "Card Description",
-    children: "Card Content",
-  },
-  render: (args) => <Card {...args} />,
-};
-
-export default meta;
-type Story = StoryObj<typeof Card>;
-
-export const Default: Story = {
-  args: {
-    variant: "outlined",
-    heading: "Card Heading",
-    subheading: "Card Subheading",
-    description: "Card Description",
-    children: "Card Content",
-  },
-};
-
-export const Outlined: Story = {
-    args: {
-      variant: "outlined",
-      heading: "Card Heading",
-      subheading: "Card Subheading",
-      description: "Card Description",
-      children: "Card Content",
-    },
-  };
-
-export const Elevated: Story = {
-  args: {
-    variant: "elevated",
-    heading: "Card Heading",
-    subheading: "Card Subheading",
-    description: "Card Description",
-    children: "Card Content",
-  },
-};
-
-export const Flat: Story = {
-  args: {
-    variant: "flat",
-    heading: "Card Heading",
-    subheading: "Card Subheading",
-    description: "Card Description",
-    children: "Card Content",
-  },
-};
-export const WithActions: Story = {
-  args: {
-    variant: "outlined",
-    heading: "Card Heading",
-    subheading: "Card Subheading",
-    description: "Card Description",
-    children: "Card Content",
-    actions: <Button>Action</Button>,
-  },
-};
-export const WithChildren: Story = {
-  args: {
-    variant: "outlined",
-    heading: "Card Heading",
-    subheading: "Card Subheading",
-    description: "Card Description",
-    children: "Card Content",
-  },
-};
-export const WithElevation: Story = {
-  args: {
-    variant: "elevated",
-    heading: "Card Heading",
-    subheading: "Card Subheading",
-    description: "Card Description",
-    children: "Card Content",
-    elevation: 2,
-  },
-};
-export const WithActionsAndChildren: Story = {
-  args: {
-    variant: "outlined",
-    heading: "Card Heading",
-    subheading: "Card Subheading",
-    description: "Card Description",
-    children: "Card Content",
-    actions: <Button>Action</Button>,
-  },
-};
-export const WithActionsAndChildrenAndElevation: Story = {
-  args: {
-    variant: "elevated",
-    heading: "Card Heading",
-    subheading: "Card Subheading",
-    description: "Card Description",
-    children: "Card Content",
-    actions: <Button>Action</Button>,
-    elevation: 2,
-  },
-};
-export const WithActionsAndChildrenAndElevationAndVariant: Story = {
-  args: {
-    variant: "elevated",
-    heading: "Card Heading",
-    subheading: "Card Subheading",
-    description: "Card Description",
-    children: "Card Content",
-    actions: <Button>Action</Button>,
-    elevation: 2,
-  },
-};

package/src/components/Card/index.ts

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

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