@shohojdhara/atomix 0.3.14 → 0.4.0

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

@@ -1,149 +1,171 @@
 /**
- * Composable Templates
- * Templates for custom hooks and composables
+ * Composable Hook Templates
+ * Templates for React custom hooks generation
  */
 
 /**
- * Custom hook template for React components
+ * Default composable hook template that matches existing patterns
  */
-export const hookTemplate = (name) => `import { useState, useCallback, useRef, useEffect } from 'react';
-import type { ${name}Props } from '../../lib/types/components';
+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';
 
 /**
- * Custom hook for ${name.toLowerCase()} component
- * Provides controlled/uncontrolled state management and accessibility
+ * ${name} state and functionality
+ * @param initialProps - Initial ${name.toLowerCase()} properties
+ * @returns ${name} state and methods
  */
 export function use${name}(initialProps?: Partial<${name}Props>) {
-  const {
-    isOpen: controlledIsOpen,
-    defaultIsOpen = false,
-    onToggle,
-    ...props
-  } = initialProps || {};
-
-  // State management for controlled/uncontrolled pattern
-  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);
-  const isControlled = typeof controlledIsOpen === 'boolean';
-  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
-
-  // Refs for DOM elements
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const panelRef = useRef<HTMLDivElement>(null);
+  // Default ${name.toLowerCase()} properties
+  const defaultProps: Partial<${name}Props> = {
+    variant: 'primary',
+    size: 'md',
+    disabled: false,
+    ...initialProps,
+  };
 
-  // Toggle function with controlled support
-  const toggle = useCallback(() => {
-    if (isControlled) {
-      onToggle?.(!isOpen);
-    } else {
-      setInternalIsOpen(!isOpen);
-      onToggle?.(!isOpen);
-    }
-  }, [isOpen, isControlled, onToggle]);
-
-  // Open function
-  const open = useCallback(() => {
-    if (isControlled) {
-      onToggle?.(true);
-    } else {
-      setInternalIsOpen(true);
-      onToggle?.(true);
-    }
-  }, [isControlled, onToggle]);
-
-  // Close function
-  const close = useCallback(() => {
-    if (isControlled) {
-      onToggle?.(false);
-    } else {
-      setInternalIsOpen(false);
-      onToggle?.(false);
-    }
-  }, [isControlled, onToggle]);
-
-  // Keyboard navigation
-  const handleKeyDown = useCallback((event: KeyboardEvent) => {
-    switch (event.key) {
-      case 'Enter':
-      case ' ':
-        event.preventDefault();
-        toggle();
-        break;
-      case 'Escape':
-        if (isOpen) {
-          close();
-          triggerRef.current?.focus();
-        }
-        break;
-    }
-  }, [isOpen, toggle, close]);
-
-  // Accessibility helpers
-  const getTriggerProps = useCallback(() => ({
-    ref: triggerRef,
-    'aria-expanded': isOpen,
-    'aria-controls': panelRef.current?.id,
-    onKeyDown: handleKeyDown,
-    onClick: toggle,
-  }), [isOpen, handleKeyDown, toggle]);
-
-  const getPanelProps = useCallback(() => ({
-    ref: panelRef,
-    'aria-hidden': !isOpen,
-    role: 'region',
-  }), [isOpen]);
-
-  const getHeaderProps = useCallback(() => ({
-    role: 'heading',
-    'aria-level': 3,
-  }), []);
-
-  const getContentProps = useCallback(() => ({
-    // Content-specific props
-  }), []);
-
-  // State object for external access
-  const state = {
-    isOpen,
-    isControlled,
+  /**
+   * 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(' ');
   };
 
-  // Set controlled state from external updates
-  const setIsOpen = useCallback((newIsOpen: boolean) => {
-    if (!isControlled) {
-      setInternalIsOpen(newIsOpen);
-    }
-  }, [isControlled]);
+  /**
+   * 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 {
-    // State
-    state,
-    isOpen,
-    isControlled,
-    
-    // Actions
-    toggle,
-    open,
-    close,
-    setIsOpen,
-    
-    // Props helpers
-    getTriggerProps,
-    getPanelProps,
-    getHeaderProps,
-    getContentProps,
-    
-    // Refs
-    triggerRef,
-    panelRef,
+    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();
+  };
 
-export default use${name};
+  return {
+    isReady,
+    generateClassNames,
+  };
+}
 `;
 
 /**
- * Composable templates object
+ * 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 = {
-  hook: hookTemplate,
+  useHook: composableTemplate,
+  simpleHook: simpleComposableTemplate,
+  complexHook: complexComposableTemplate,
 };

package/scripts/cli/templates/index.js

@@ -13,6 +13,7 @@ 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
@@ -20,27 +21,33 @@ import { configTemplates } from './config-templates.js';
  */
 export const componentTemplates = {
   react: {
-    ...reactTemplates,
-    ...storybookTemplates,
-    ...testingTemplates,
-    ...scssTemplates,
-    ...typesTemplates,
+    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,
 };
 
-// Re-export token generation functions
+// Export everything for flexibility
 export {
-  generateColorTokens,
-  generateSpacingTokens,
-  generateTypographyTokens,
-  generateShadowTokens,
-  generateRadiusTokens,
-  generateAnimationTokens,
-} from './token-templates.js';
-
-// Re-export project and config templates
-export { projectTemplates, configTemplates };
+  tokenTemplates,
+  projectTemplates,
+  configTemplates,
+  commonTemplates
+};
 
 /**
  * Get template by name and type

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

@@ -3,13 +3,35 @@
  * Templates for different project types and configurations
  */
 
+import { commonTemplates } from './common-templates.js';
+
 /**
  * React project templates
  */
 export const reactProjectTemplates = {
   dependencies: ['react', 'react-dom'],
-  devDependencies: ['@vitejs/plugin-react', 'vite', 'typescript'],
+  devDependencies: ['@vitejs/plugin-react', 'vite', 'typescript', '@types/react', '@types/react-dom', 'sass'],
   files: {
+    // TypeScript Configuration
+    'tsconfig.json': commonTemplates.typescript.react,
+    'tsconfig.node.json': commonTemplates.typescript.reactNode,
+    
+    // Git Configuration
+    '.gitignore': commonTemplates.git.gitignore,
+    '.gitattributes': commonTemplates.git.gitattributes,
+    
+    // Code Quality
+    '.prettierrc': commonTemplates.prettier.prettierrc,
+    '.prettierignore': commonTemplates.prettier.prettierignore,
+    '.eslintrc.cjs': commonTemplates.eslint.react,
+    
+    // Environment
+    '.env.example': commonTemplates.env,
+    
+    // Vite Environment Types
+    'src/vite-env.d.ts': commonTemplates.viteEnv,
+    
+    // Main Application Files
     'src/App.tsx': `import React from 'react';
 import './App.css';
 
@@ -27,22 +49,19 @@ function App() {
 }
 
 export default App;`,
+    
     'src/main.tsx': `import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import './styles/index.scss';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
 );`,
-    'src/App.css': `/* Import Atomix styles */
-@use '@shohojdhara/atomix/scss/settings' with (
-  // Your custom theme overrides here
-);
-@use '@shohojdhara/atomix/scss/components';
-
-.App {
+    
+    'src/App.css': `.App {
   text-align: center;
 }
 
@@ -57,6 +76,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   justify-content: center;
   font-size: calc(10px + 2vmin);
 }`,
+    
     'index.html': `<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -70,11 +90,21 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>`,
+    
     'vite.config.ts': `import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+      '@components': resolve(__dirname, './src/components'),
+      '@lib': resolve(__dirname, './src/lib'),
+      '@styles': resolve(__dirname, './src/styles'),
+    },
+  },
   css: {
     preprocessorOptions: {
       scss: {
@@ -82,7 +112,28 @@ export default defineConfig({
       }
     }
   }
-});`
+});`,
+
+    // ITCSS Structure
+    'src/styles/index.scss': commonTemplates.itcss.main,
+    'src/styles/01-settings/_index.scss': commonTemplates.itcss.settings,
+    'src/styles/02-tools/_index.scss': commonTemplates.itcss.tools,
+    'src/styles/03-generic/_index.scss': commonTemplates.itcss.generic,
+    'src/styles/04-elements/_index.scss': commonTemplates.itcss.elements,
+    'src/styles/05-objects/_index.scss': commonTemplates.itcss.objects,
+    'src/styles/06-components/_index.scss': commonTemplates.itcss.components,
+    'src/styles/99-utilities/_index.scss': commonTemplates.itcss.utilities,
+    
+    // Library Structure
+    'src/lib/types/index.ts': commonTemplates.lib.types,
+    'src/lib/types/components.ts': `// Component type definitions\n`,
+    'src/lib/constants/index.ts': commonTemplates.lib.constants,
+    'src/lib/composables/index.ts': commonTemplates.lib.composables,
+    'src/lib/utils/index.ts': commonTemplates.lib.utils,
+    
+    // Placeholder files
+    'src/components/.gitkeep': '',
+    'src/assets/.gitkeep': '',
   }
 };
 
@@ -91,14 +142,31 @@ export default defineConfig({
  */
 export const nextjsProjectTemplates = {
   dependencies: ['next', 'react', 'react-dom'],
-  devDependencies: ['typescript', '@types/node', '@types/react', '@types/react-dom', 'sass'],
+  devDependencies: ['typescript', '@types/node', '@types/react', '@types/react-dom', 'sass', 'eslint', 'eslint-config-next'],
   files: {
+    // TypeScript Configuration
+    'tsconfig.json': commonTemplates.typescript.nextjs,
+    
+    // Git Configuration
+    '.gitignore': commonTemplates.git.gitignore,
+    '.gitattributes': commonTemplates.git.gitattributes,
+    
+    // Code Quality
+    '.prettierrc': commonTemplates.prettier.prettierrc,
+    '.prettierignore': commonTemplates.prettier.prettierignore,
+    '.eslintrc.json': commonTemplates.eslint.nextjs,
+    
+    // Environment
+    '.env.example': commonTemplates.env,
+    
+    // Next.js Pages
     'src/pages/_app.tsx': `import '../styles/globals.scss';
 import type { AppProps } from 'next/app';
 
 export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;
 }`,
+    
     'src/pages/index.tsx': `import Head from 'next/head';
 
 export default function Home() {
@@ -116,11 +184,8 @@ export default function Home() {
     </>
   );
 }`,
-    'src/styles/globals.scss': `/* Import Atomix styles */
-@use '@shohojdhara/atomix/scss/settings' with (
-  // Your custom theme overrides here
-);
-@use '@shohojdhara/atomix/scss/components';
+    
+    'src/styles/globals.scss': `@use './index.scss';
 
 html,
 body {
@@ -134,6 +199,7 @@ main {
   padding: 2rem;
   text-align: center;
 }`,
+    
     'next.config.js': `/** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -142,7 +208,27 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;`
+module.exports = nextConfig;`,
+
+    // ITCSS Structure
+    'src/styles/index.scss': commonTemplates.itcss.main,
+    'src/styles/01-settings/_index.scss': commonTemplates.itcss.settings,
+    'src/styles/02-tools/_index.scss': commonTemplates.itcss.tools,
+    'src/styles/03-generic/_index.scss': commonTemplates.itcss.generic,
+    'src/styles/04-elements/_index.scss': commonTemplates.itcss.elements,
+    'src/styles/05-objects/_index.scss': commonTemplates.itcss.objects,
+    'src/styles/06-components/_index.scss': commonTemplates.itcss.components,
+    'src/styles/99-utilities/_index.scss': commonTemplates.itcss.utilities,
+    
+    // Library Structure
+    'src/lib/types/index.ts': commonTemplates.lib.types,
+    'src/lib/types/components.ts': `// Component type definitions\n`,
+    'src/lib/constants/index.ts': commonTemplates.lib.constants,
+    'src/lib/utils/index.ts': commonTemplates.lib.utils,
+    
+    // Placeholder files
+    'src/components/.gitkeep': '',
+    'src/public/.gitkeep': '',
   }
 };
 
@@ -151,8 +237,26 @@ module.exports = nextConfig;`
  */
 export const vanillaProjectTemplates = {
   dependencies: [],
-  devDependencies: ['vite', 'typescript'],
+  devDependencies: ['vite', 'typescript', 'sass'],
   files: {
+    // TypeScript Configuration
+    'tsconfig.json': commonTemplates.typescript.vanilla,
+    
+    // Git Configuration
+    '.gitignore': commonTemplates.git.gitignore,
+    '.gitattributes': commonTemplates.git.gitattributes,
+    
+    // Code Quality
+    '.prettierrc': commonTemplates.prettier.prettierrc,
+    '.prettierignore': commonTemplates.prettier.prettierignore,
+    
+    // Environment
+    '.env.example': commonTemplates.env,
+    
+    // Vite Environment Types
+    'src/vite-env.d.ts': commonTemplates.viteEnv,
+    
+    // Main Application Files
     'index.html': `<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -171,14 +275,12 @@ export const vanillaProjectTemplates = {
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>`,
+    
     'src/main.ts': `import './styles/main.scss';
 
 console.log('Atomix Vanilla JavaScript App Initialized');`,
-    'src/styles/main.scss': `/* Import Atomix styles */
-@use '@shohojdhara/atomix/scss/settings' with (
-  // Your custom theme overrides here
-);
-@use '@shohojdhara/atomix/scss/components';
+    
+    'src/styles/main.scss': `@use './index.scss';
 
 #app {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -190,9 +292,18 @@ header {
   padding: 2rem;
   border-bottom: 1px solid #dee2e6;
 }`,
+    
     'vite.config.ts': `import { defineConfig } from 'vite';
+import { resolve } from 'path';
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+      '@lib': resolve(__dirname, './src/lib'),
+      '@styles': resolve(__dirname, './src/styles'),
+    },
+  },
   css: {
     preprocessorOptions: {
       scss: {
@@ -200,7 +311,24 @@ export default defineConfig({
       }
     }
   }
-});`
+});`,
+
+    // ITCSS Structure
+    'src/styles/index.scss': commonTemplates.itcss.main,
+    'src/styles/01-settings/_index.scss': commonTemplates.itcss.settings,
+    'src/styles/02-tools/_index.scss': commonTemplates.itcss.tools,
+    'src/styles/03-generic/_index.scss': commonTemplates.itcss.generic,
+    'src/styles/04-elements/_index.scss': commonTemplates.itcss.elements,
+    'src/styles/05-objects/_index.scss': commonTemplates.itcss.objects,
+    'src/styles/06-components/_index.scss': commonTemplates.itcss.components,
+    'src/styles/99-utilities/_index.scss': commonTemplates.itcss.utilities,
+    
+    // Library Structure
+    'src/lib/types/index.ts': commonTemplates.lib.types,
+    'src/lib/utils/index.ts': commonTemplates.lib.utils,
+    
+    // Placeholder files
+    'src/assets/.gitkeep': '',
   }
 };