@mohammadsalman/storybook-custom-ui 1.0.0

package/README.md

@@ -0,0 +1,189 @@
+# Storybook Component Library
+
+A minimal React TypeScript component library with Storybook, featuring a flexible theming system.
+
+## Features
+
+- ✅ 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
+
+## Getting Started
+
+### Installation
+
+```bash
+npm install
+```
+
+### Running Storybook
+
+```bash
+npm run storybook
+```
+
+This will start Storybook on `http://localhost:6006`
+
+### Building Storybook
+
+```bash
+npm run build-storybook
+```
+
+## 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>
+  );
+}
+```
+
+## 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.

package/package.json

@@ -0,0 +1,53 @@
+{
+  "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>",
+  "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"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepublishOnly": "npm run build-storybook"
+  },
+  "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"
+  }
+}

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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,144 @@
+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

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

package/src/components/index.ts

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

package/src/hooks/index.ts

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

package/src/hooks/useFormInput.stories.tsx

@@ -0,0 +1,126 @@
+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

@@ -0,0 +1,114 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,182 @@
+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

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

package/src/theme/types.ts

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,15 @@
+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;