3a-ecommerce-utils 1.0.0

package/src/config/jest.frontend.config.js

@@ -0,0 +1,50 @@
+/** 
+ * Base Jest configuration for frontend React applications
+ * @type {import('jest').Config} 
+ */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  roots: ['<rootDir>/tests'],
+  setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
+  moduleNameMapper: {
+    // Handle CSS imports
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    // Handle @e-commerce packages - projects should override these
+    '^@e-commerce/utils$': '<rootDir>/tests/__mocks__/utils.ts',
+    '^@e-commerce/ui-library$': '<rootDir>/tests/__mocks__/ui-library.tsx',
+    '^@e-commerce/types$': '<rootDir>/tests/__mocks__/types.ts',
+    // Handle FontAwesome
+    '^@fortawesome/react-fontawesome$': '<rootDir>/tests/__mocks__/fontawesome.tsx',
+  },
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        tsconfig: 'tsconfig.json',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['/node_modules/(?!(zustand|@reduxjs/toolkit|@tanstack/react-query)/)'],
+  testMatch: ['**/*.test.ts', '**/*.test.tsx'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/main.tsx',
+    '!src/bootstrap.tsx',
+    '!src/vite-env.d.ts',
+  ],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['text', 'lcov', 'html'],
+  coverageThreshold: {
+    global: {
+      branches: 70,
+      functions: 70,
+      lines: 70,
+      statements: 70,
+    },
+  },
+  testTimeout: 10000,
+  verbose: true,
+};

package/src/config/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/config/tailwind.config.ts

@@ -0,0 +1,70 @@
+import theme from '../../../ui-library/src/theme/theme.json';
+import daisyui from 'daisyui';
+
+const baseConfig = {
+  darkMode: 'class',
+  content: ['./src*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: theme.colors.primary,
+        secondary: theme.colors.secondary,
+        accent: theme.colors.accent,
+        neutral: theme.colors.neutral,
+      },
+      fontFamily: {
+        sans: theme.typography.fontFamily.sans,
+        serif: theme.typography.fontFamily.serif,
+        mono: theme.typography.fontFamily.mono,
+      },
+      fontSize: theme.typography.fontSize,
+      fontWeight: theme.typography.fontWeight,
+      lineHeight: theme.typography.lineHeight,
+      spacing: theme.spacing,
+      borderRadius: theme.borderRadius,
+      boxShadow: theme.shadows,
+      screens: theme.breakpoints,
+      zIndex: theme.zIndex,
+      transitionDuration: {
+        fast: '150ms',
+        DEFAULT: '250ms',
+        slow: '350ms',
+      },
+    },
+  },
+  plugins: [daisyui],
+  daisyui: {
+    themes: [
+      {
+        light: {
+          primary: '#3b82f6',
+          secondary: '#10b981',
+          accent: '#f59e0b',
+          neutral: '#64748b',
+          'base-100': '#ffffff',
+          'base-200': '#f8fafc',
+          'base-300': '#f1f5f9',
+          info: '#3b82f6',
+          success: '#10b981',
+          warning: '#f59e0b',
+          error: '#ef4444',
+        },
+        dark: {
+          primary: '#3b82f6',
+          secondary: '#10b981',
+          accent: '#f59e0b',
+          neutral: '#94a3b8',
+          'base-100': '#0f172a',
+          'base-200': '#1e293b',
+          'base-300': '#334155',
+          info: '#3b82f6',
+          success: '#10b981',
+          warning: '#f59e0b',
+          error: '#ef4444',
+        },
+      },
+    ],
+  },
+};
+
+export default baseConfig;

package/src/config/tsconfig.base.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "types": ["vite/client"],
+    "paths": {
+      "@e-commerce/types": ["../../packages/types/src"],
+      "@e-commerce/types/*": ["../../packages/types/src/*"],
+      "@e-commerce/ui-library": ["../../packages/ui-library/src"],
+      "@e-commerce/ui-library/*": ["../../packages/ui-library/src/*"],
+      "@e-commerce/utils": ["../../packages/utils/src"],
+      "@e-commerce/utils/*": ["../../packages/utils/src/*"]
+    }
+  }
+}

package/src/config/vite.config.ts

@@ -0,0 +1,86 @@
+import { defineConfig, UserConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import * as path from 'path';
+
+export function createBaseViteConfig(rootDir: string): UserConfig {
+  return defineConfig({
+    plugins: [react()],
+    css: {
+      postcss: path.resolve(rootDir, 'postcss.config.js'),
+    },
+    resolve: {
+      alias: {
+        '@e-commerce/ui-library': path.resolve(rootDir, '../../packages/ui-library/src'),
+        '@e-commerce/types': path.resolve(rootDir, '../../packages/types/src'),
+        '@e-commerce/utils': path.resolve(rootDir, '../../packages/utils/src'),
+      },
+    },
+  });
+}
+
+export async function createLibraryViteConfig(rootDir: string): Promise<UserConfig> {
+  const base = createBaseViteConfig(rootDir) as UserConfig;
+
+  const config: any = Object.assign({}, base);
+
+  config.build = config.build || {};
+  config.build.lib = {
+    entry: path.resolve(rootDir, 'src/index.ts'),
+    name: 'ui-library',
+    formats: ['es', 'cjs', 'umd'],
+    fileName: (format: string) => `ui-library.${format}.js`,
+  };
+  config.build.rollupOptions = config.build.rollupOptions || {};
+  config.build.rollupOptions.external = ['react', 'react-dom'];
+  config.build.rollupOptions.output = {
+    globals: {
+      react: 'React',
+      'react-dom': 'ReactDOM',
+    },
+  };
+
+  const isVitest =
+    Boolean(process.env.VITEST) ||
+    Boolean(
+      process.env.npm_lifecycle_event && process.env.npm_lifecycle_event.includes('vitest')
+    ) ||
+    process.argv.join(' ').includes('vitest');
+
+  if (isVitest) {
+    // @ts-ignore - Dynamic import with fallback, module may not exist
+    const { storybookTest } = await import('@storybook/addon-vitest/vitest-plugin').catch(() => ({
+      storybookTest: undefined,
+    }));
+    // @ts-ignore - Dynamic import with fallback, module may not exist
+    const { playwright } = await import('@vitest/browser-playwright').catch(() => ({
+      playwright: undefined,
+    }));
+
+    if (storybookTest) {
+      config.test = {
+        projects: [
+          {
+            extends: true,
+            plugins: [
+              storybookTest({
+                configDir: path.join(rootDir, '.storybook'),
+              }),
+            ],
+            test: {
+              name: 'storybook',
+              browser: {
+                enabled: true,
+                headless: true,
+                provider: playwright ? playwright({}) : undefined,
+                instances: [{ browser: 'chromium' }],
+              },
+              setupFiles: ['.storybook/vitest.setup.ts'],
+            },
+          },
+        ],
+      };
+    }
+  }
+
+  return config;
+}

package/src/config/vitest.base.config.ts

@@ -0,0 +1,74 @@
+import { defineConfig, UserConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import * as path from 'path';
+
+/**
+ * Base Vitest configuration for browser/React testing
+ */
+export function createBrowserVitestConfig(rootDir: string, options?: {
+  setupFiles?: string[];
+  include?: string[];
+  coverageInclude?: string[];
+  coverageExclude?: string[];
+}): UserConfig {
+  return defineConfig({
+    plugins: [react()],
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      setupFiles: options?.setupFiles || ['./vitest.setup.ts'],
+      include: options?.include || ['src/**/*.test.{ts,tsx}', 'tests/**/*.test.{ts,tsx}'],
+      coverage: {
+        provider: 'v8',
+        reporter: ['text', 'json', 'html', 'lcov'],
+        include: options?.coverageInclude || ['src/**/*.{ts,tsx}'],
+        exclude: options?.coverageExclude || [
+          'src/**/*.test.{ts,tsx}',
+          'src/**/*.d.ts',
+          'src/main.tsx',
+          'src/bootstrap.tsx',
+          'src/vite-env.d.ts',
+        ],
+        thresholds: {
+          lines: 80,
+          functions: 80,
+          branches: 70,
+          statements: 80,
+        },
+      },
+    },
+    resolve: {
+      alias: {
+        '@': path.resolve(rootDir, './src'),
+        '@e-commerce/ui-library': path.resolve(rootDir, '../../packages/ui-library/src'),
+        '@e-commerce/utils': path.resolve(rootDir, '../../packages/utils/src'),
+        '@e-commerce/types': path.resolve(rootDir, '../../packages/types/src'),
+      },
+    },
+  });
+}
+
+/**
+ * Base Vitest configuration for Node.js/backend testing
+ */
+export function createNodeVitestConfig(rootDir: string, options?: {
+  include?: string[];
+  coverageInclude?: string[];
+  coverageExclude?: string[];
+}): UserConfig {
+  return defineConfig({
+    test: {
+      globals: true,
+      environment: 'node',
+      include: options?.include || ['tests/**/*.test.ts'],
+      coverage: {
+        provider: 'v8',
+        reporter: ['text', 'json', 'html'],
+        include: options?.coverageInclude || ['src/**/*.ts'],
+        exclude: options?.coverageExclude || ['src/**/*.d.ts'],
+      },
+    },
+  });
+}
+
+export { defineConfig };

package/src/config/webpack.base.config.ts

@@ -0,0 +1,126 @@
+import * as path from 'path';
+import webpack, { Configuration } from 'webpack';
+import type { Configuration as DevServerConfiguration } from 'webpack-dev-server';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
+type WebpackConfiguration = Configuration & {
+  devServer?: DevServerConfiguration;
+};
+
+export interface WebpackBaseOptions {
+  rootDir: string;
+  entry?: string;
+  outputPath?: string;
+  publicPath?: string;
+  htmlTemplate?: string;
+  htmlTitle?: string;
+  devServerPort?: number;
+}
+
+/**
+ * Creates base Webpack configuration for shell/host applications
+ */
+export function createBaseWebpackConfig(options: WebpackBaseOptions): WebpackConfiguration {
+  const {
+    rootDir,
+    entry = './src/index.tsx',
+    outputPath = 'dist',
+    publicPath = 'auto',
+    htmlTemplate = './public/index.html',
+    htmlTitle = 'E-Commerce App',
+    devServerPort = 3000,
+  } = options;
+
+  const isProduction = process.env.NODE_ENV === 'production';
+
+  return {
+    entry,
+    target: 'web',
+    output: {
+      path: path.resolve(rootDir, outputPath),
+      filename: 'bundle.[contenthash].js',
+      publicPath,
+      clean: true,
+    },
+    resolve: {
+      extensions: ['.tsx', '.ts', '.jsx', '.js'],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(png|jpe?g|gif|svg|webp)$/i,
+          type: 'asset/resource',
+          generator: {
+            filename: 'assets/images/[name].[hash][ext]',
+          },
+        },
+        {
+          test: /\.(ts|tsx)$/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                presets: [
+                  '@babel/preset-react',
+                  ['@babel/preset-typescript', { onlyRemoveTypeImports: true }],
+                ],
+              },
+            },
+          ],
+          exclude: /node_modules\/(?!@e-commerce)/,
+        },
+        {
+          test: /\.css$/,
+          use: [
+            isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
+            'css-loader',
+            'postcss-loader',
+          ],
+        },
+      ],
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: htmlTemplate,
+        title: htmlTitle,
+      }),
+      new MiniCssExtractPlugin({
+        filename: '[name].[contenthash].css',
+      }),
+    ],
+    optimization: {
+      splitChunks: {
+        chunks: 'all',
+        cacheGroups: {
+          vendor: {
+            test: /[\\/]node_modules[\\/]/,
+            name: 'vendors',
+            priority: 10,
+          },
+          react: {
+            test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/,
+            name: 'react-vendor',
+            priority: 20,
+          },
+          uiLibrary: {
+            test: /[\\/]packages[\\/]ui-library[\\/]/,
+            name: 'ui-library',
+            priority: 15,
+          },
+        },
+      },
+      runtimeChunk: 'single',
+    },
+    performance: {
+      hints: false,
+    },
+    devServer: {
+      port: devServerPort,
+      hot: true,
+      historyApiFallback: true,
+    },
+  };
+}
+
+export { webpack, HtmlWebpackPlugin, MiniCssExtractPlugin };