Light-it-labs · ThunderNaka · Sep 30, 2024 · Sep 10, 2024 · Sep 11, 2024 · Sep 11, 2024
diff --git a/.gitignore b/.gitignore
@@ -24,6 +24,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+emails/exported-emails
 
 # Sentry Config File
 .env.sentry-build-plugin

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-pnpm lint-staged
+pnpm lint-staged
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-pnpm lint-staged
+pnpm lint-staged
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["javascript"],
   "editor.formatOnType": false,

diff --git a/emails/_components/base.tsx b/emails/_components/base.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Preview,
+  Tailwind,
+} from "@react-email/components";
+
+type BaseEmailTemplateProps = {
+  preview: string;
+} & React.PropsWithChildren;
+
+export const BaseEmailTemplate = ({
+  preview,
+  children,
+}: BaseEmailTemplateProps) => {
+  return (
+    <Html>
+      <Head></Head>
+      <Tailwind>
+        <Preview>{preview}</Preview>
+        <Body className='mx-auto my-auto bg-gray-400 p-10 px-2 font-sans'>
+          <Container className='mx-auto max-w-[340px] rounded-[20px] border border-solid border-gray-600 bg-white p-6'>
+            {children}
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
diff --git a/emails/_components/index.ts b/emails/_components/index.ts
@@ -0,0 +1,2 @@
+export * from "./base";
+export * from "./text";
diff --git a/emails/_components/text.tsx b/emails/_components/text.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { Text as ReactEmailText } from "@react-email/components";
+import { tv, VariantProps } from "tailwind-variants";
+
+const emailText = tv({
+  base: "m-0 leading-tight tracking-[.5%]",
+  variants: {
+    variant: {
+      base: "text-black",
+      error: "text-red-500",
+      info: "text-blue-500",
+      success: "text-green-500",
+    },
+    size: {
+      default: "text-base",
+      small: "text-sm",
+      title: "text-2xl",
+    },
+  },
+  defaultVariants: {
+    variant: "base",
+    size: "default",
+  },
+});
+
+type Props = {
+  className?: string;
+} & React.PropsWithChildren &
+  VariantProps<typeof emailText>;
+
+export const EmailText = ({ variant, size, className, children }: Props) => {
+  return (
+    <ReactEmailText className={emailText({ variant, size, className })}>
+      {children}
+    </ReactEmailText>
+  );
+};
diff --git a/emails/example.tsx b/emails/example.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { BaseEmailTemplate, EmailText } from "./_components";
+
+export default function ExampleEmail() {
+  return (
+    <BaseEmailTemplate preview='This is an example email'>
+      <EmailText size='title'>Example Email</EmailText>
+      <EmailText className='my-4'>
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus
+        corrupti incidunt eius deserunt ullam? Rem laborum beatae porro earum
+        suscipit doloremque obcaecati maxime atque fugiat placeat itaque magni,
+        aut veritatis consequatur eum, voluptates quas quod ipsam temporibus
+        numquam nam quam.
+      </EmailText>
+      <EmailText>
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus
+        corrupti incidunt eius deserunt ullam? Rem laborum beatae porro earum
+        suscipit doloremque obcaecati maxime atque fugiat placeat itaque magni,
+        aut veritatis consequatur eum, voluptates quas quod ipsam temporibus
+        numquam nam quam.
+      </EmailText>
+    </BaseEmailTemplate>
+  );
+}
diff --git a/eslint.config.js b/eslint.config.js
@@ -1,46 +1,31 @@
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
-import { FlatCompat } from "@eslint/eslintrc";
-import js from "@eslint/js";
+import { fixupPluginRules } from "@eslint/compat";
 import typescriptEslint from "@typescript-eslint/eslint-plugin";
 import tsParser from "@typescript-eslint/parser";
+import vercelBrowser from "@vercel/style-guide/eslint/browser";
+import vercelReact from "@vercel/style-guide/eslint/react";
 import _import from "eslint-plugin-import";
 import globals from "globals";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
-
 export default [
   {
     ignores: [
       "**/eslint.config.mjs",
+      "**/plopfile.js",
       "**/*.config.js",
+      "**/*.config.ts",
       "**/*.config.cjs",
+      "**/*.config.mjs",
       "node_modules/",
       "**/vendor/",
       "public/build/",
       ".storybook/",
       "**/reports/",
     ],
   },
-  ...fixupConfigRules(
-    compat.extends(
-      "eslint:recommended",
-      "plugin:@typescript-eslint/recommended-type-checked",
-      "plugin:@typescript-eslint/stylistic-type-checked",
-      "plugin:jsx-a11y/recommended",
-      "plugin:react-hooks/recommended",
-      "plugin:react/recommended",
-    ),
-  ),
   {
     plugins: {
+      browser: fixupPluginRules(vercelBrowser),
+      react: fixupPluginRules(vercelReact),
       "@typescript-eslint": fixupPluginRules(typescriptEslint),
       import: fixupPluginRules(_import),
     },
@@ -59,38 +44,22 @@ export default [
       parser: tsParser,
       ecmaVersion: 5,
       sourceType: "script",
-
       parserOptions: {
         project: true,
       },
     },
 
-    settings: {
-      react: {
-        version: "detect",
-      },
-    },
-
     rules: {
       "react/prop-types": "off",
       "@typescript-eslint/unbound-method": "off",
-
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        {
-          argsIgnorePattern: "^_",
-          varsIgnorePattern: "^_",
-        },
-      ],
-
+      "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
       "@typescript-eslint/consistent-type-imports": [
         "warn",
         {
           prefer: "type-imports",
           fixStyle: "separate-type-imports",
         },
       ],
-
       "@typescript-eslint/no-misused-promises": [
         2,
         {
@@ -99,11 +68,11 @@ export default [
           },
         },
       ],
-
-      "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+      "@typescript-eslint/consistent-type-definitions": ["error", "type"],
     },
   },
   {
+    // Rules for Storybook
     files: ["**/*.stories.*"],
     rules: {
       "react/react-in-jsx-scope": "off",

diff --git a/package.json b/package.json
@@ -4,14 +4,15 @@
   "engines": {
     "node": ">=v20.9.0"
   },
-  "packageManager": "[email protected]",
   "version": "0.0.1",
   "type": "module",
   "scripts": {
     "build": "pnpm with-env vite build",
     "clean": "git clean -xdf dist node_modules",
     "dev": "pnpm with-env vite",
     "preview": "pnpm with-env vite preview",
+    "email": "email dev",
+    "email:export": "email export --outDir './emails/exported-emails'",
     "storybook": "storybook dev -p 6969",
     "build-storybook": "storybook build",
     "lint": "eslint .",
@@ -24,36 +25,42 @@
     "build-production": "pnpm with-env-production vite build",
     "with-env-staging": "dotenv -e ./.env.staging --",
     "with-env-production": "dotenv -e ./.env.production --",
-    "prepare": "husky || true"
+    "prepare": "husky || true",
+    "knip": "knip"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.4.2",
+    "@lukemorales/query-key-factory": "^1.3.4",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
-    "@sentry/react": "^8.4.0",
-    "@sentry/vite-plugin": "^2.17.0",
-    "@tanstack/react-query": "^5.39.0",
-    "@tanstack/react-query-devtools": "^5.39.0",
+    "@sentry/integrations": "^7.114.0",
+    "@sentry/react": "^8.30.0",
+    "@sentry/tracing": "^7.114.0",
+    "@sentry/vite-plugin": "^2.22.4",
+    "@tanstack/react-query": "^5.56.2",
+    "@tanstack/react-query-devtools": "^5.56.2",
     "axios": "^1.7.2",
     "date-fns": "^3.6.0",
     "jwt-decode": "^4.0.0",
     "mem": "^10.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.51.5",
-    "react-router-dom": "^6.23.1",
-    "tailwind-merge": "^2.3.0",
+    "react-hook-form": "^7.53.0",
+    "react-router-dom": "^6.26.2",
+    "tailwind-merge": "^2.5.2",
     "tailwind-variants": "^0.2.1",
-    "tailwindcss": "3.4.3",
+    "tailwindcss": "3.4.12",
     "tailwindcss-animate": "^1.0.7",
-    "uuid": "^9.0.1",
+    "uuid": "^10.0.0",
     "zod": "^3.23.8",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.5"
   },
   "devDependencies": {
     "@eslint/compat": "^1.1.1",
-    "@eslint/js": "^9.8.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
+    "@eslint/js": "^9.11.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+    "@react-email/components": "0.0.25",
+    "@sentry/types": "^8.30.0",
     "@storybook/addon-a11y": "^7.6.17",
     "@storybook/addon-actions": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
@@ -68,38 +75,39 @@
     "@storybook/react-vite": "^7.6.17",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^7.6.17",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "^20.11.25",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/node": "^20.12.12",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.10",
     "@types/uuid": "^9.0.8",
-    "@types/yargs": "^17.0.32",
+    "@vercel/style-guide": "^6.0.0",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "autoprefixer": "^10.4.18",
     "dotenv-cli": "^7.4.0",
-    "eslint": "^9.8",
+    "eslint": "^9.11.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "globals": "^15.8.0",
-    "husky": "^9.0.11",
+    "husky": "^9.1.6",
+    "knip": "^5.30.2",
     "lint-staged": "^15.2.2",
     "plop": "^4.0.1",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "pretty-quick": "^4.0.0",
+    "react-email": "3.0.1",
     "storybook": "^7.6.17",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.2",
-    "typescript-eslint": "^7.17.0",
-    "vite": "^5.1.7",
-    "yargs": "^17.7.2"
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.6.0",
+    "vite": "^5.4.6"
   },
   "postcss": {
     "plugins": {
@@ -114,4 +122,4 @@
       "pretty-quick --staged"
     ]
   }
-}
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./base";
		export * from "./text";