@shohojdhara/atomix 0.4.7 → 0.4.9

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

@@ -508,51 +508,77 @@ export const envTemplate = `# Environment Variables
 export const itcssIndexTemplates = {
   settings: `// Settings Layer
 // Global variables, config switches, and brand colors
+// 
+// This layer imports design tokens and configuration from Atomix.
+// Override variables here before importing tools and other layers.
 
-// Import Atomix settings or define your own
-// @use '@shohojdhara/atomix/scss/settings' as *;
+// Import core design tokens from Atomix
+@use '@shohojdhara/atomix/scss/settings' as *;
+
+// Optional: Override specific tokens for your brand
+// Example:
+// $primary-6: #your-brand-color;
+// $font-family-base: 'Your Font', sans-serif;
 `,
 
   tools: `// Tools Layer
 // Globally used mixins and functions
+// 
+// This layer imports utility mixins and functions from Atomix.
+// Use these tools to generate consistent CSS across your project.
 
-// Import Atomix tools or define your own
-// @use '@shohojdhara/atomix/scss/tools' as *;
+// Import Atomix tools (mixins, functions)
+@use '@shohojdhara/atomix/scss/tools' as *;
 `,
 
   generic: `// Generic Layer
 // Ground-zero styles (normalize.css, resets, box-sizing)
+// 
+// This layer imports base reset and normalization styles.
+// These are far-reaching, low-specificity foundational styles.
 
-// Import Atomix generic styles or define your own
-// @use '@shohojdhara/atomix/scss/generic' as *;
+// Import Atomix generic styles
+@use '@shohojdhara/atomix/scss/generic' as *;
 `,
 
   elements: `// Elements Layer
 // Unclassed HTML elements (type selectors)
+// 
+// This layer imports base element styling from Atomix.
+// Styles for bare HTML elements without classes.
 
-// Import Atomix element styles or define your own
-// @use '@shohojdhara/atomix/scss/elements' as *;
+// Import Atomix element styles
+@use '@shohojdhara/atomix/scss/elements' as *;
 `,
 
   objects: `// Objects Layer
 // Cosmetic-free design patterns (layouts, grids)
+// 
+// This layer imports structural layout patterns from Atomix.
+// Object classes are functional, not cosmetic.
 
-// Import Atomix object styles or define your own
-// @use '@shohojdhara/atomix/scss/objects' as *;
+// Import Atomix object styles
+@use '@shohojdhara/atomix/scss/objects' as *;
 `,
 
   components: `// Components Layer
 // Designed components, chunks of UI
+// 
+// This layer imports UI component styles from Atomix.
+// Components are specific, designed pieces of interface.
 
-// Import Atomix components or define your own
-// @use '@shohojdhara/atomix/scss/components' as *;
+// Import Atomix component styles
+@use '@shohojdhara/atomix/scss/components' as *;
 `,
 
   utilities: `// Utilities Layer
 // Helper classes with ability to override anything
+// 
+// This layer imports utility helper classes from Atomix.
+// Utilities use !important to override previous layers.
 
-// Import Atomix utilities or define your own
-// @use '@shohojdhara/atomix/scss/utilities' as *;
+// Import Atomix utilities
+@use '@shohojdhara/atomix/scss/utilities' as *;
 `,
 
   main: `// Main Stylesheet

package/scripts/cli/templates/components/react-component.ts

@@ -0,0 +1,282 @@
+/**
+ * React Component Templates
+ * Templates for generating React components following Atomix architecture
+ */
+
+/**
+ * Generates a full-featured React component with composable pattern
+ */
+export const componentTemplate = (name: string): string => {
+  const componentPrefix = name.toLowerCase().replace(/([A-Z])/g, '-$1').toLowerCase().replace(/^-/, '');
+
+  return `import React, { forwardRef, useCallback, memo } from 'react';
+import { use${name} } from '../../lib/composables/use${name}';
+import { ${name.toUpperCase()}, THEME_NAMING } from '../../lib/constants/components';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import { ThemeNaming } from '../../lib/utils/themeNaming';
+import type { ${name}Props } from '../../lib/types/components';
+
+export const ${name} = React.memo(
+  forwardRef<HTMLDivElement, ${name}Props>(
+    (
+      {
+        children,
+        className = '',
+        disabled = false,
+        variant = 'primary',
+        size = 'md',
+        glass,
+        onClick,
+        onHover,
+        onFocus,
+        onBlur,
+        'aria-label': ariaLabel,
+        'aria-describedby': ariaDescribedBy,
+        tabIndex,
+        style,
+        ...props
+      },
+      ref
+    ) => {
+      const { generateClassNames, handleClick } = use${name}({
+        variant,
+        size,
+        disabled,
+        glass,
+      });
+
+      const componentClass = [
+        ${name.toUpperCase()}.BASE_CLASS,
+        ThemeNaming.variantClass('${componentPrefix}', variant),
+        size !== 'md' ? ThemeNaming.sizeClass('${componentPrefix}', size) : '',
+        disabled ? ThemeNaming.stateClass('${componentPrefix}', 'disabled') : '',
+        glass ? ThemeNaming.stateClass('${componentPrefix}', 'glass') : '',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ');
+
+      // Handle click event
+      const handleClickEvent = useCallback(
+        (event: React.MouseEvent<HTMLDivElement>) => {
+          if (disabled) {
+            event.preventDefault();
+            return;
+          }
+          onClick?.(event);
+        },
+        [disabled, onClick]
+      );
+
+      // Handle hover
+      const handleMouseEnter = useCallback(
+        (event: React.MouseEvent<HTMLDivElement>) => {
+          if (!disabled) {
+            onHover?.(event);
+          }
+        },
+        [disabled, onHover]
+      );
+
+      // Handle focus
+      const handleFocusEvent = useCallback(
+        (event: React.FocusEvent<HTMLDivElement>) => {
+          if (!disabled) {
+            onFocus?.(event);
+          }
+        },
+        [disabled, onFocus]
+      );
+
+      // Handle blur
+      const handleBlurEvent = useCallback(
+        (event: React.FocusEvent<HTMLDivElement>) => {
+          if (!disabled) {
+            onBlur?.(event);
+          }
+        },
+        [disabled, onBlur]
+      );
+
+      // Component props
+      const componentProps = {
+        ref,
+        className: componentClass,
+        onClick: handleClickEvent,
+        onMouseEnter: onHover ? handleMouseEnter : undefined,
+        onFocus: onFocus ? handleFocusEvent : undefined,
+        onBlur: onBlur ? handleBlurEvent : undefined,
+        'aria-disabled': disabled,
+        'aria-label': ariaLabel,
+        'aria-describedby': ariaDescribedBy,
+        tabIndex: tabIndex !== undefined ? tabIndex : (disabled ? -1 : 0),
+        style,
+        ...props,
+      };
+
+      // Default glass props
+      const defaultGlassProps = {
+        displacementScale: 20,
+        blurAmount: 0,
+        saturation: 200,
+        elasticity: 0,
+      };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+      // Component content
+      const componentContent = (
+        <div {...componentProps}>
+          {children}
+        </div>
+      );
+
+      return glass ? <AtomixGlass {...glassProps}>{componentContent}</AtomixGlass> : componentContent;
+    }
+  )
+);
+
+${name}.displayName = '${name}';
+
+export default ${name};`;
+};
+
+/**
+ * Generates a simple presentational React component
+ */
+export const simpleTemplate = (name: string): string => `import React, { forwardRef } from 'react';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import type { ${name}Props } from '../../lib/types/components';
+
+/**
+ * ${name} - Simple Presentational Component
+ * 
+ * @param {${name}Props} props - Component properties
+ * @returns {JSX.Element} The rendered component
+ */
+export const ${name} = forwardRef<HTMLDivElement, ${name}Props>(
+  ({ children, className = '', glass, 'aria-label': ariaLabel, ...props }, ref) => {
+    const componentClass = [\`c-${name.toLowerCase()}\`, className].filter(Boolean).join(' ');
+
+    const content = (
+      <div ref={ref} className={componentClass} aria-label={ariaLabel} {...props}>
+        {children}
+      </div>
+    );
+
+    return glass ? <AtomixGlass {...(glass === true ? {} : glass)}>{content}</AtomixGlass> : content;
+  }
+);
+
+${name}.displayName = '${name}';
+`;
+
+/**
+ * Generates a medium complexity React component with composable pattern
+ */
+export const mediumTemplate = (name: string): string => `import React, { forwardRef, useId, memo } from 'react';
+import { ${name.toUpperCase()} } from '../../lib/constants/components';
+import { use${name} } from '../../lib/composables/use${name}';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import type { ${name}Props } from '../../lib/types/components';
+
+/**
+ * ${name} - Medium Presentational Component
+ * 
+ * @param {${name}Props} props - Component properties
+ * @returns {JSX.Element} The rendered component
+ */
+export const ${name} = memo(
+  forwardRef<HTMLDivElement, ${name}Props>(
+    ({ children, className = '', disabled = false, glass, style, 'aria-label': ariaLabel, ...props }, ref) => {
+      const instanceId = useId();
+      const { generateClassNames } = use${name}({ disabled });
+      
+      const content = (
+        <div
+          ref={ref}
+          className={generateClassNames(className)}
+          style={style}
+          aria-label={ariaLabel}
+          aria-disabled={disabled}
+          {...props}
+        >
+          {children}
+        </div>
+      );
+
+      return glass ? <AtomixGlass {...(glass === true ? {} : glass)}>{content}</AtomixGlass> : content;
+    }
+  )
+);
+
+${name}.displayName = '${name}';
+
+export default ${name};
+`;
+
+/**
+ * Generates a complex React component with state management
+ */
+export const complexTemplate = (name: string): string => `import React, { forwardRef, useId, memo } from 'react';
+import { ${name.toUpperCase()} } from '../../lib/constants/components';
+import { use${name} } from '../../lib/composables/use${name}';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import type { ${name}Props, ${name}State } from '../../lib/types/components';
+
+/**
+ * ${name} - Complex Functional Component
+ * 
+ * @param {${name}Props} props - Component properties
+ * @returns {JSX.Element} The rendered component
+ */
+export const ${name} = memo(
+  forwardRef<HTMLDivElement, ${name}Props>(
+    ({ children, className = '', disabled = false, glass, style, onStateChange, 'aria-label': ariaLabel, ...props }, ref) => {
+      const instanceId = useId();
+      const { generateClassNames } = use${name}({ disabled, onStateChange });
+      
+      const content = (
+        <div
+          ref={ref}
+          className={generateClassNames(className)}
+          style={style}
+          aria-label={ariaLabel}
+          aria-disabled={disabled}
+          {...props}
+        >
+          {children}
+        </div>
+      );
+
+      return glass ? <AtomixGlass {...(glass === true ? {} : glass)}>{content}</AtomixGlass> : content;
+    }
+  )
+);
+
+${name}.displayName = '${name}';
+
+export default ${name};
+`;
+
+/**
+ * Generates an index file export for a component
+ */
+export const indexTemplate = (name: string): string => `export { default as ${name} } from './${name}';
+export type { ${name}Props } from './${name}';
+`;
+
+/**
+ * All React component templates
+ */
+export const reactComponentTemplates = {
+  component: componentTemplate,
+  simple: simpleTemplate,
+  medium: mediumTemplate,
+  complex: complexTemplate,
+  index: indexTemplate,
+};
+
+/**
+ * Type for React component templates object
+ */
+export type ReactComponentTemplates = typeof reactComponentTemplates;

package/scripts/cli/templates/config/project-config.ts

@@ -0,0 +1,112 @@
+/**
+ * Project Configuration Templates
+ * Templates for generating project configuration files
+ */
+
+/**
+ * Generates a package.json template for new projects
+ */
+export const packageJsonTemplate = (): string => `{
+  "name": "@shohojdhara/atomix-project",
+  "version": "1.0.0",
+  "description": "Project built with Atomix Design System",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext ts,tsx",
+    "test": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@shohojdhara/atomix": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "jest-axe": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vitest": "^1.0.0"
+  }
+}
+`;
+
+/**
+ * Generates a tsconfig.json template
+ */
+export const tsconfigTemplate = (): string => `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@components/*": ["src/components/*"],
+      "@styles/*": ["src/styles/*"],
+      "@lib/*": ["src/lib/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+`;
+
+/**
+ * Generates a vite.config.ts template
+ */
+export const viteConfigTemplate = (): string => `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@components': path.resolve(__dirname, './src/components'),
+      '@styles': path.resolve(__dirname, './src/styles'),
+      '@lib': path.resolve(__dirname, './src/lib'),
+    },
+  },
+  css: {
+    modules: {
+      localsConvention: 'camelCase',
+      generateScopedName: '[name]__[local]___[hash:base64:5]',
+    },
+  },
+});
+`;
+
+/**
+ * All project configuration templates
+ */
+export const projectConfigTemplates = {
+  packageJson: packageJsonTemplate,
+  tsconfig: tsconfigTemplate,
+  viteConfig: viteConfigTemplate,
+};
+
+/**
+ * Type for project configuration templates object
+ */
+export type ProjectConfigTemplates = typeof projectConfigTemplates;