ali-mohammadi-design-system 1.0.0 → 2.0.1

package/package.json

@@ -1,27 +1,46 @@
-
-
 {
-   "name": "ali-mohammadi-design-system",
-  "version": "1.0.0",
+  "name": "ali-mohammadi-design-system",
+  "version": "2.0.1",
   "description": "خنثی و dynamic Design System — tokens از پروژه میاد",
-  "main": "src/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "src",
-    "scss"
+    "dist",
+    "src"
   ],
-  "exports": {
-    ".": "./src/index.js",
-    "./scss": "./scss/index.scss"
+  "keywords": [
+    "design-system",
+    "ui",
+    "react",
+    "tokens",
+    "sass"
+  ],
+  "author": "ali mohammadi",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "prop-types": "^15.8.1"
+    "prop-types": "^15.8.1",
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20"
   },
-  "keywords": ["design-system", "ui", "react", "tokens", "sass"],
-  "author": "شرکت شما",
-  "license": "MIT",
-  "publishConfig": {
-  "access": "public"
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./theme": "./dist/theme/index.js",
+    "./tokens": "./dist/tokens/index.js",
+    "./components": "./dist/components/index.js"
+  },
+  "type": "module",
+  "devDependencies": {
+    "@vitejs/plugin-react": "^5.1.2"
+  }
 }
-  
-}

package/src/components/Button/Button.jsx

@@ -1,41 +1,92 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useTokens } from '../../utils/useTokens.js';
 
+/**
+ * Button Component - کامپوننت دکمه با پشتیبانی از تم
+ * 
+ * @example
+ * ```jsx
+ * import { Button } from 'ali-mohammadi-design-system';
+ * 
+ * <Button variant="primary" size="md">Click me</Button>
+ * <Button variant="outline" size="lg">Outline Button</Button>
+ * ```
+ */
 const Button = ({ variant = 'primary', size = 'md', children, className = '', ...props }) => {
+  const { color, spacing, radius, typography } = useTokens();
+
   const variantStyles = {
     primary: {
-      backgroundColor: 'var(--primary-500)',
-      color: 'white',
+      backgroundColor: color('primary.500'),
+      color: '#ffffff',
+      border: 'none',
     },
     outline: {
       backgroundColor: 'transparent',
-      border: '2px solid var(--primary-500)',
-      color: 'var(--primary-500)',
+      border: `2px solid ${color('primary.500')}`,
+      color: color('primary.500'),
     },
     text: {
       backgroundColor: 'transparent',
-      color: 'var(--primary-500)',
+      border: 'none',
+      color: color('primary.500'),
+    },
+    secondary: {
+      backgroundColor: color('neutral.200'),
+      color: color('neutral.900'),
+      border: 'none',
+    },
+    success: {
+      backgroundColor: color('success.500'),
+      color: '#ffffff',
+      border: 'none',
+    },
+    error: {
+      backgroundColor: color('error.500'),
+      color: '#ffffff',
+      border: 'none',
     },
   };
 
-  const sizePadding = {
-    sm: 'var(--space-sm)',
-    md: 'var(--space-md)',
-    lg: 'var(--space-lg)',
+  const sizeStyles = {
+    sm: {
+      padding: `${spacing(2)} ${spacing(4)}`,
+      fontSize: typography('sizes.14') || '14px',
+    },
+    md: {
+      padding: `${spacing(3)} ${spacing(6)}`,
+      fontSize: typography('sizes.16') || '16px',
+    },
+    lg: {
+      padding: `${spacing(4)} ${spacing(8)}`,
+      fontSize: typography('sizes.18') || '18px',
+    },
   };
 
   return (
     <button
-      className={`ds-button ${className}`}
+      className={`ds-button ds-button--${variant} ds-button--${size} ${className}`}
       style={{
-        padding: `${sizePadding[size]} calc(var(--space-unit) * 4)`,
-        borderRadius: 'var(--radius-md)',
-        fontFamily: 'var(--font-family)',
-        fontSize: '1rem',
+        borderRadius: radius('md'),
+        fontFamily: typography('fontFamily'),
+        fontWeight: '500',
         cursor: 'pointer',
+        transition: 'all 0.2s ease',
         ...variantStyles[variant],
+        ...sizeStyles[size],
         ...props.style,
       }}
+      onMouseEnter={(e) => {
+        if (variant === 'primary') {
+          e.currentTarget.style.opacity = '0.9';
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (variant === 'primary') {
+          e.currentTarget.style.opacity = '1';
+        }
+      }}
       {...props}
     >
       {children}
@@ -45,7 +96,7 @@ const Button = ({ variant = 'primary', size = 'md', children, className = '', ..
 
 Button.propTypes = {
   children: PropTypes.node.isRequired,
-  variant: PropTypes.oneOf(['primary', 'outline', 'text']),
+  variant: PropTypes.oneOf(['primary', 'outline', 'text', 'secondary', 'success', 'error']),
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   className: PropTypes.string,
 };

package/src/components/index.js

@@ -0,0 +1,5 @@
+export { default as Button } from './Button/Button.jsx';
+// Export سایر کامپوننت‌ها اینجا اضافه می‌شوند
+// export { default as Input } from './Input/Input.jsx';
+// export { default as Card } from './Card/Card.jsx';
+

package/src/index.js

@@ -1,6 +1,20 @@
-export { injectCSS } from './theme/injectCSS';
-export { defaultConfig } from './config/defaultConfig';
-export * from './tokens/colors';
+// Export کامپوننت‌ها
+export * from './components/index.js';
 
-export { default as Button } from './components/Button';
-// export بقیه کامپوننت‌ها...
+// Export Theme Provider و Hooks
+export { ThemeProvider, useTheme } from './theme/ThemeProvider.jsx';
+export { useTokens } from './utils/useTokens.js';
+
+// Export توکن‌ها
+export { defaultTokens, baseTokens, createTokens, defaultColors } from './tokens/index.js';
+
+// Export توابع تم
+export { generateTheme } from './theme/generateTheme.js';
+export { injectCSS } from './theme/injectCSS.js';
+export { generateSCSS } from './theme/generateSCSS.js';
+
+// Export پیش‌فرض
+export { defaultConfig } from './config/index.js';
+
+// Default export برای راحتی
+export { ThemeProvider as default } from './theme/ThemeProvider.jsx';

package/src/theme/ThemeProvider.jsx

@@ -0,0 +1,107 @@
+import React, { createContext, useContext, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { createTokens } from '../tokens/index.js';
+import { generateTheme } from './generateTheme.js';
+
+const ThemeContext = createContext(null);
+
+/**
+ * ThemeProvider - مدیریت تم و توکن‌ها در پروژه
+ * 
+ * @example
+ * ```jsx
+ * import { ThemeProvider } from 'ali-mohammadi-design-system';
+ * 
+ * const customTokens = {
+ *   colors: {
+ *     primary: { 500: '#6366f1' }
+ *   }
+ * };
+ * 
+ * <ThemeProvider tokens={customTokens}>
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+export function ThemeProvider({ tokens = {}, children }) {
+  const mergedTokens = useMemo(() => {
+    return createTokens(tokens);
+  }, [tokens]);
+
+  useEffect(() => {
+    // تزریق CSS variables به DOM
+    generateTheme(mergedTokens);
+  }, [mergedTokens]);
+
+  const value = useMemo(() => ({
+    tokens: mergedTokens,
+    getToken: (path) => {
+      const keys = path.split('.');
+      let value = mergedTokens;
+      for (const key of keys) {
+        if (value && typeof value === 'object' && key in value) {
+          value = value[key];
+        } else {
+          return undefined;
+        }
+      }
+      return value;
+    },
+  }), [mergedTokens]);
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+ThemeProvider.propTypes = {
+  tokens: PropTypes.object,
+  children: PropTypes.node.isRequired,
+};
+
+/**
+ * Hook برای دسترسی به تم و توکن‌ها
+ * 
+ * @example
+ * ```jsx
+ * import { useTheme } from 'ali-mohammadi-design-system';
+ * 
+ * function MyComponent() {
+ *   const { tokens, getToken } = useTheme();
+ *   const primaryColor = getToken('colors.primary.500');
+ *   return <div style={{ color: primaryColor }}>Hello</div>;
+ * }
+ * ```
+ */
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  
+  if (!context) {
+    // اگر ThemeProvider استفاده نشده، از توکن‌های پیش‌فرض استفاده کن
+    console.warn('useTheme must be used within ThemeProvider. Using default tokens.');
+    const { createTokens } = require('../tokens/index.js');
+    const defaultTokens = createTokens();
+    return {
+      tokens: defaultTokens,
+      getToken: (path) => {
+        const keys = path.split('.');
+        let value = defaultTokens;
+        for (const key of keys) {
+          if (value && typeof value === 'object' && key in value) {
+            value = value[key];
+          } else {
+            return undefined;
+          }
+        }
+        return value;
+      },
+    };
+  }
+  
+  return context;
+}
+
+export default ThemeProvider;
+

package/src/theme/generateTheme.js

@@ -1,34 +1,11 @@
-export function generateTheme(userTokens = {}) {
-  const defaultTokens = {
-    colors: {
-      primary: { 500: '#6366f1' },
-      neutral: { 900: '#111827', 700: '#374151', 500: '#6b7280', 300: '#d1d5db', 100: '#f3f4f6', 0: '#ffffff' },
-      success: { 500: '#10b981' },
-      error: { 500: '#ef4444' },
-      warning: { 500: '#f59e0b' },
-      info: { 500: '#3b82f6' },
-    },
-    typography: {
-      fontFamily: 'system-ui, sans-serif',
-      baseSize: 16,
-      minSize: 14,
-      scaleRatio: 1.25,
-    },
-    spacing: { unit: 4 },
-    radius: { sm: 4, md: 8, lg: 12, xl: 16, full: 9999 },
-  };
-
-  const tokens = {
-    colors: { ...defaultTokens.colors, ...(userTokens.colors || {}) },
-    typography: { ...defaultTokens.typography, ...(userTokens.typography || {}) },
-    spacing: { ...defaultTokens.spacing, ...(userTokens.spacing || {}) },
-    radius: { ...defaultTokens.radius, ...(userTokens.radius || {}) },
-  };
+import { createTokens } from '../tokens/index.js';
 
-  const t = tokens.typography;
-  const slope = (t.baseSize - t.minSize) / (1920 - 320);
-  const yIntersection = -320 * slope + t.minSize;
-  const preferredValue = `${yIntersection}px + ${slope * 100}vw`;
+/**
+ * تولید CSS variables از توکن‌ها و تزریق به DOM
+ * @param {Object} userTokens - توکن‌های سفارشی کاربر
+ */
+export function generateTheme(userTokens = {}) {
+  const tokens = createTokens(userTokens);
 
   const style = document.createElement('style');
   style.id = 'ds-theme';
@@ -45,23 +22,64 @@ export function generateTheme(userTokens = {}) {
   });
 
   // Typography
+  const t = tokens.typography;
   css += `  --font-family: ${t.fontFamily};\n`;
-  css += `  --font-size-base: clamp(${t.minSize}px, ${preferredValue}, ${t.baseSize}px);\n`;
-  css += `  --type-scale: ${t.scaleRatio};\n`;
+  
+  if (t.baseSize && t.minSize) {
+    const slope = (t.baseSize - t.minSize) / (1920 - 320);
+    const yIntersection = -320 * slope + t.minSize;
+    const preferredValue = `${yIntersection}px + ${slope * 100}vw`;
+    css += `  --font-size-base: clamp(${t.minSize}px, ${preferredValue}, ${t.baseSize}px);\n`;
+  } else {
+    css += `  --font-size-base: ${t.baseSize || 16}px;\n`;
+  }
+  
+  css += `  --type-scale: ${t.scaleRatio || 1.25};\n`;
+
+  // Typography sizes
+  if (t.sizes) {
+    Object.entries(t.sizes).forEach(([key, value]) => {
+      css += `  --font-size-${key}: ${value}px;\n`;
+    });
+  }
+
+  // Typography line heights
+  if (t.lineHeights) {
+    Object.entries(t.lineHeights).forEach(([key, value]) => {
+      css += `  --line-height-${key}: ${value}px;\n`;
+    });
+  }
+
+  // Typography weights
+  if (t.weights) {
+    Object.entries(t.weights).forEach(([key, value]) => {
+      css += `  --font-weight-${key}: ${value};\n`;
+    });
+  }
 
   // Spacing
-  css += `  --space-unit: ${tokens.spacing.unit}px;\n`;
-  css += `  --space-xs: calc(var(--space-unit) * 1);\n`;
-  css += `  --space-sm: calc(var(--space-unit) * 2);\n`;
-  css += `  --space-md: calc(var(--space-unit) * 4);\n`;
-  css += `  --space-lg: calc(var(--space-unit) * 6);\n`;
-  css += `  --space-xl: calc(var(--space-unit) * 8);\n`;
+  const spacingUnit = tokens.spacing.unit || 4;
+  css += `  --space-unit: ${spacingUnit}px;\n`;
+  
+  // Spacing values
+  Object.entries(tokens.spacing).forEach(([key, value]) => {
+    if (key !== 'unit') {
+      css += `  --space-${key}: ${value}px;\n`;
+    }
+  });
 
   // Radius
   Object.entries(tokens.radius).forEach(([k, v]) => {
     css += `  --radius-${k}: ${v}px;\n`;
   });
 
+  // Shadows
+  if (tokens.shadows) {
+    Object.entries(tokens.shadows).forEach(([k, v]) => {
+      css += `  --shadow-${k}: ${v};\n`;
+    });
+  }
+
   css += '}\n';
   css += 'html { font-size: var(--font-size-base); }\n';
   css += 'body { font-family: var(--font-family); }\n';

package/src/theme/index.js

@@ -0,0 +1,5 @@
+export { ThemeProvider, useTheme } from './ThemeProvider.jsx';
+export { generateTheme } from './generateTheme.js';
+export { injectCSS } from './injectCSS.js';
+export { generateSCSS } from './generateSCSS.js';
+