@shohojdhara/atomix 0.3.13 → 0.3.15

package/scripts/cli/templates/composable-templates.js

@@ -0,0 +1,171 @@
+/**
+ * Composable Hook Templates
+ * Templates for React custom hooks generation
+ */
+
+/**
+ * Default composable hook template that matches existing patterns
+ */
+export const composableTemplate = (name) => {
+  const componentPrefix = name.toLowerCase().replace(/([A-Z])/g, '-$1').toLowerCase().replace(/^-/, '');
+  
+  return `import { ${name}Props } from '../types/components';
+import { ${name.toUpperCase()} } from '../constants/components';
+
+/**
+ * ${name} state and functionality
+ * @param initialProps - Initial ${name.toLowerCase()} properties
+ * @returns ${name} state and methods
+ */
+export function use${name}(initialProps?: Partial<${name}Props>) {
+  // Default ${name.toLowerCase()} properties
+  const defaultProps: Partial<${name}Props> = {
+    variant: 'primary',
+    size: 'md',
+    disabled: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate ${name.toLowerCase()} class based on properties
+   * @param props - ${name} properties
+   * @returns Class string
+   */
+  const generateClassNames = (props: Partial<${name}Props> = {}): string => {
+    const {
+      variant = defaultProps.variant,
+      size = defaultProps.size,
+      disabled = defaultProps.disabled,
+      glass = defaultProps.glass,
+      className = '',
+    } = props;
+
+    const sizeClass = size === 'md' ? '' : \`c-${componentPrefix}--\${size}\`;
+    const disabledClass = disabled ? 'c-${componentPrefix}--disabled' : '';
+    const glassClass = glass ? 'c-${componentPrefix}--glass' : '';
+
+    return [
+      ${name.toUpperCase()}.BASE_CLASS,
+      \`c-${componentPrefix}--\${variant}\`,
+      sizeClass,
+      disabledClass,
+      glassClass,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+  };
+
+  /**
+   * Handle ${name.toLowerCase()} click with disabled check
+   * @param handler - Click handler function
+   * @returns Function that respects disabled state
+   */
+  const handleClick = (handler?: (event: React.MouseEvent<HTMLDivElement>) => void) => {
+    return (event: React.MouseEvent<HTMLDivElement>) => {
+      if (!defaultProps.disabled && handler) {
+        handler(event);
+      }
+    };
+  };
+
+  return {
+    defaultProps,
+    generateClassNames,
+    handleClick,
+  };
+}
+`;
+};
+
+/**
+ * Simple composable template
+ */
+export const simpleComposableTemplate = (name) => `import { useState } from 'react';
+import type { ${name}Props } from '../types/components';
+
+export function use${name}(props: ${name}Props) {
+  const [isReady, setIsReady] = useState(false);
+  
+  useEffect(() => {
+    setIsReady(true);
+  }, []);
+
+  const generateClassNames = (baseClassName = '') => {
+    return \`c-${name.toLowerCase()} \${baseClassName}\`.trim();
+  };
+
+  return {
+    isReady,
+    generateClassNames,
+  };
+}
+`;
+
+/**
+ * Complex composable template
+ */
+export const complexComposableTemplate = (name) => `import { useState, useEffect, useRef } from 'react';
+import { ${name.toUpperCase()} } from '../constants/components';
+import type { ${name}Props, ${name}State, ElementRefs } from '../types/components';
+
+interface Use${name}Result {
+  state: ${name}State;
+  refs: ElementRefs;
+  methods: {
+    // Define methods for complex interactions
+    updateState: (newState: Partial<${name}State>) => void;
+    reset: () => void;
+  };
+  generateClassNames: (baseClassName?: string) => string;
+}
+
+export function use${name}(
+  initialProps?: Partial<${name}Props>
+): Use${name}Result {
+  const defaultProps: Partial<${name}Props> = {
+    disabled: false,
+    ...initialProps,
+  };
+
+  const [state, setState] = useState<${name}State>({
+    // Complex state definition
+  });
+
+  const panelRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  const updateState = (newState: Partial<${name}State>) => {
+    setState(prev => ({ ...prev, ...newState }));
+  };
+
+  const reset = () => {
+    // Reset to initial state
+  };
+
+  const generateClassNames = (baseClassName = ''): string => {
+    const baseClasses = [
+      ${name.toUpperCase()}.SELECTORS.${name.toUpperCase()}.replace('.', ''),
+      state.isOpen ? ${name.toUpperCase()}.CLASSES.IS_OPEN : '',
+      defaultProps.disabled ? ${name.toUpperCase()}.CLASSES.IS_DISABLED : '',
+      baseClassName
+    ].filter(Boolean).join(' ');
+
+    return baseClasses;
+  };
+
+  return {
+    state,
+    refs: { panelRef, contentRef, buttonRef },
+    methods: { updateState, reset },
+    generateClassNames,
+  };
+}
+`;
+
+export const composableTemplates = {
+  useHook: composableTemplate,
+  simpleHook: simpleComposableTemplate,
+  complexHook: complexComposableTemplate,
+};

package/scripts/cli/templates/config-templates.js

@@ -0,0 +1,126 @@
+/**
+ * Configuration Templates
+ * Templates for different configuration formats
+ */
+
+/**
+ * Basic configuration templates
+ */
+export const basicConfigTemplates = {
+  '.atomixrc.json': {
+    theme: {
+      path: 'themes/custom',
+      tokens: {
+        colors: {
+          primary: '#7AFFD7',
+          secondary: '#FF5733'
+        }
+      }
+    },
+    components: {
+      path: 'src/components',
+      generate: {
+        typescript: true,
+        stories: true,
+        tests: false
+      }
+    },
+    build: {
+      outputPath: 'dist',
+      includeSourceMaps: false
+    }
+  }
+};
+
+/**
+ * Advanced configuration template
+ */
+export const advancedConfigTemplate = `// Atomix Design System Configuration
+// Generated by Atomix CLI
+
+export default {
+  theme: {
+    path: 'themes/custom',
+    tokens: {
+      // Import custom token files
+      extend: ['./tokens/colors.scss', './tokens/spacing.scss']
+    },
+    // Theme configuration
+    darkMode: 'class', // 'class' | 'media' | false
+    cssVarPrefix: 'atomix',
+    scope: ':root'
+  },
+  
+  components: {
+    path: 'src/components',
+    // Component generation options
+    generate: {
+      typescript: true,
+      stories: true,
+      tests: true,
+      cssModules: false,
+      // Custom component templates
+      templates: {
+        component: './templates/component.tsx.hbs',
+        story: './templates/story.tsx.hbs',
+        test: './templates/test.tsx.hbs'
+      }
+    },
+    // Component scanning
+    scan: {
+      patterns: ['src/components/**/*.{ts,tsx}'],
+      exclude: ['**/*.test.*', '**/*.stories.*']
+    }
+  },
+  
+  build: {
+    outputPath: 'dist',
+    includeSourceMaps: process.env.NODE_ENV === 'development',
+    // Build optimization
+    optimization: {
+      minify: true,
+      treeshake: true,
+      purgeCSS: {
+        enabled: true,
+        content: ['src/**/*.{js,ts,tsx,html}']
+      }
+    }
+  },
+  
+  // Development server
+  devServer: {
+    port: 3000,
+    open: true,
+    hmr: true
+  },
+  
+  // Plugin configuration
+  plugins: [
+    // '@shohojdhara/atomix-plugin-storybook',
+    // '@shohojdhara/atomix-plugin-tailwind'
+  ],
+  
+  // CLI commands
+  cli: {
+    generate: {
+      component: {
+        template: 'react',
+        directory: 'src/components'
+      },
+      theme: {
+        template: 'scss',
+        directory: 'themes'
+      }
+    }
+  }
+};`;
+
+/**
+ * Configuration templates export object
+ */
+export const configTemplates = {
+  basic: basicConfigTemplates,
+  advanced: {
+    'atomix.config.js': advancedConfigTemplate
+  }
+};

package/scripts/cli/templates/index.js

@@ -0,0 +1,102 @@
+/**
+ * Templates Index
+ * Aggregates all template modules for the Atomix CLI
+ */
+
+// Import template modules
+import { reactTemplates } from './react-templates.js';
+import { storybookTemplates } from './storybook-templates.js';
+import { testingTemplates } from './testing-templates.js';
+import { scssTemplates } from './scss-templates.js';
+import { typesTemplates } from './types-templates.js';
+import { composableTemplates } from './composable-templates.js';
+import * as tokenTemplates from './token-templates.js';
+import { projectTemplates } from './project-templates.js';
+import { configTemplates } from './config-templates.js';
+import { commonTemplates } from './common-templates.js';
+
+/**
+ * Main templates object that maintains backward compatibility
+ * This structure matches the original templates.js format
+ */
+export const componentTemplates = {
+  react: {
+    component: reactTemplates.component,
+    simple: reactTemplates.simple,
+    medium: reactTemplates.medium,
+    complex: reactTemplates.complex,
+    index: reactTemplates.index,
+    story: storybookTemplates.story,
+    test: testingTemplates.test,
+    scss: scssTemplates.full,
+    settings: scssTemplates.settings,
+    componentStyles: scssTemplates.component,
+    types: typesTemplates.types,
+    constants: typesTemplates.constants,
+  },
+  composable: composableTemplates,
+  storybook: storybookTemplates,
+  testing: testingTemplates,
+  scss: scssTemplates,
+  types: typesTemplates,
+};
+
+// Export everything for flexibility
+export {
+  tokenTemplates,
+  projectTemplates,
+  configTemplates,
+  commonTemplates
+};
+
+/**
+ * Get template by name and type
+ * @param {string} type - Template type (react, composable, etc.)
+ * @param {string} name - Template name (simple, medium, complex, etc.)
+ * @returns {Function|null} Template function or null if not found
+ */
+export function getTemplate(type, name) {
+  if (type === 'react') {
+    return componentTemplates.react[name] || null;
+  } else if (type === 'composable') {
+    return componentTemplates.composable[name] || null;
+  }
+  return null;
+}
+
+/**
+ * Get all available templates for a type
+ * @param {string} type - Template type
+ * @returns {Object} Object with all available templates
+ */
+export function getTemplatesByType(type) {
+  return componentTemplates[type] || {};
+}
+
+/**
+ * List all available template types
+ * @returns {string[]} Array of template type names
+ */
+export function getTemplateTypes() {
+  return Object.keys(componentTemplates);
+}
+
+/**
+ * Legacy export for backward compatibility
+ * Maintains the same structure as the original templates.js
+ */
+export default {
+  componentTemplates,
+  generateColorTokens: tokenTemplates.generateColorTokens,
+  generateSpacingTokens: tokenTemplates.generateSpacingTokens,
+  generateTypographyTokens: tokenTemplates.generateTypographyTokens,
+  generateShadowTokens: tokenTemplates.generateShadowTokens,
+  generateRadiusTokens: tokenTemplates.generateRadiusTokens,
+  generateAnimationTokens: tokenTemplates.generateAnimationTokens,
+  projectTemplates,
+  configTemplates,
+  // Helper functions
+  getTemplate,
+  getTemplatesByType,
+  getTemplateTypes,
+};