feat: initialize email-components vite package

packages/server/package.json

@@ -23,6 +23,7 @@
     "@aws-sdk/client-s3": "^3.576.0",
     "@aws-sdk/s3-request-presigner": "^3.583.0",
     "@bigcapital/utils": "*",
+    "@bigcapital/email-components": "*",
     "@casl/ability": "^5.4.3",
     "@hapi/boom": "^7.4.3",
     "@lemonsqueezy/lemonsqueezy.js": "^2.2.0",

shared/email-components/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

shared/email-components/.storybook/main.tsx

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: '.storybook/vite.config.ts',
+      },
+    },
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

shared/email-components/.storybook/preview.tsx

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

shared/email-components/.storybook/vite.config.ts

@@ -0,0 +1,17 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vitest/config';
+import tailwindcss from 'tailwindcss';
+import { UserConfigExport } from 'vite';
+
+const app = async (): Promise<UserConfigExport> => {
+  return defineConfig({
+    plugins: [react()],
+    css: {
+      postcss: {
+        plugins: [tailwindcss],
+      },
+    },
+  });
+};
+// https://vitejs.dev/config/
+export default app;

shared/email-components/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

shared/email-components/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@bigcapital/email-components",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook:dev": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
+  },
+  "main": "./dist/email-components.umd.js",
+  "module": "./dist/email-components.es.js",
+  "types": "./dist/main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/email-components.es.js",
+      "require": "./dist/email-components.umd.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "dependencies": {
+    "tailwindcss": "^3.4.14",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^2.1.3"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "7.2.2",
+    "@storybook/addon-interactions": "7.2.2",
+    "@storybook/addon-links": "7.2.2",
+    "@storybook/addon-styling": "1.3.6",
+    "@storybook/blocks": "7.2.2",
+    "@storybook/react": "7.2.2",
+    "@storybook/react-vite": "7.2.2",
+    "@storybook/testing-library": "0.2.0",
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.13",
+    "eslint-plugin-storybook": "0.6.13",
+    "globals": "^15.11.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.10.0",
+    "storybook": "7.2.2",
+    "vite": "^5.4.9"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}

shared/email-components/postman.config.js

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

shared/email-components/src/lib/Test.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+// import { AtButton, AtButtonProps, AT_BUTTON_VARIANT } from '.'
+// import { objectValuesToControls } from '../../../storybook-utils'
+import { Meta } from '@storybook/react'
+import { StoryFn } from '@storybook/react'
+import { Test, TestProps } from './Test';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof Test> = {
+  title: 'Atoms/Button',
+  component: Test,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // label: { control: 'text' },
+    // variant: objectValuesToControls(AT_BUTTON_VARIANT),
+    // onClick: { action: 'clicked' },
+  },
+}
+export default meta
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: StoryFn<typeof Test> = (args: TestProps) => <Test {...args} />
+
+export const Primary = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Primary.args = {
+  label: 'Button',
+  variant: 'PRIMARY',
+  onClick: () => alert('clicking primary'),
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  label: 'Button',
+  variant: 'SECONDARY',
+}
+
+export const Tertiary = Template.bind({})
+Tertiary.args = {
+  label: 'Button',
+  variant: 'TERTIARY',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  label: 'Button',
+  isDisabled: true,
+}

shared/email-components/src/lib/Test.tsx

@@ -0,0 +1,7 @@
+
+export interface TestProps {
+  a?: string;
+}
+export const Test = (props: TestProps) => {
+  return <h1>asdasd</h1>
+}

shared/email-components/src/lib/main.ts

@@ -0,0 +1,7 @@
+
+
+ const Test = () => {
+  console.log(123123);
+}
+
+export default Test;

shared/email-components/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

shared/email-components/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

shared/email-components/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": ["./src/**/*.stories.*"]
+}

shared/email-components/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

shared/email-components/vite.config.ts

@@ -0,0 +1,55 @@
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+import { defineConfig } from 'vitest/config';
+import dts from 'vite-plugin-dts';
+import tailwindcss from 'tailwindcss';
+import { UserConfigExport } from 'vite';
+import { name } from './package.json';
+
+const app = async (): Promise<UserConfigExport> => {
+  /**
+   * Removes everything before the last
+   * @octocat/library-repo -> library-repo
+   * vite-component-library-template -> vite-component-library-template
+   */
+  const formattedName = name.match(/[^/]+$/)?.[0] ?? name;
+
+  return defineConfig({
+    plugins: [
+      react(),
+      dts({
+        insertTypesEntry: true,
+      }),
+    ],
+    css: {
+      postcss: {
+        plugins: [tailwindcss],
+      },
+    },
+    build: {
+      lib: {
+        entry: path.resolve(__dirname, 'src/lib/main.ts'),
+        name: formattedName,
+        formats: ['es', 'umd'],
+        fileName: (format: string) => `${formattedName}.${format}.js`,
+      },
+      rollupOptions: {
+        external: ['react', 'react/jsx-runtime', 'react-dom', 'tailwindcss'],
+        output: {
+          globals: {
+            react: 'React',
+            'react/jsx-runtime': 'react/jsx-runtime',
+            'react-dom': 'ReactDOM',
+            tailwindcss: 'tailwindcss',
+          },
+        },
+      },
+    },
+    test: {
+      globals: true,
+      environment: 'jsdom',
+    },
+  });
+};
+// https://vitejs.dev/config/
+export default app;