Merge remote-tracking branch 'origin/fix/remove-vite-config-timestamp…

…-ignoring' into fix/remove-vite-config-timestamp-ignoring

.github/workflows/build-zip.yml

@@ -20,7 +20,7 @@ jobs:
 
       - run: pnpm install --frozen-lockfile --prefer-offline
 
-      - run: pnpm type-check && pnpm build
+      - run: pnpm build
 
       - uses: actions/upload-artifact@v4
         with:

README.md

@@ -69,10 +69,14 @@ This boilerplate is made for creating chrome extensions using React and Typescri
 
 ## Getting started: <a name="getting-started"></a>
 
-1. Clone this repository.
-2. Change `extensionDescription` and `extensionName` in `messages.json` file.
-3. Install pnpm globally: `npm install -g pnpm` (check your node version >= 18.19.1)
-4. Run `pnpm install`
+1. When you're using Windows run this:
+   - `git config --global core.eol lf`
+   - `git config --global core.autocrlf input`
+   #### This will change eol(End of line) to the same as on Linux/Mac, without this, you will have conflicts with your teammates with those systems and our bash script won't work
+2. Clone this repository.
+3. Change `extensionDescription` and `extensionName` in `messages.json` file.
+4. Install pnpm globally: `npm install -g pnpm` (check your node version >= 18.19.1))
+5. Run `pnpm install`
 
 ### And then, depending on needs:
 
@@ -154,7 +158,7 @@ Some shared packages
 - `tsconfig` - shared tsconfig for entire project
 - `ui` - here's a function to merge your tailwind config with global one, and you can save components here
 - `vite-config` - shared vite config for entire project
-- `zipper` - By ```pnpm zip``` you can pack ```dist``` folder into ```extension.zip``` inside newly created ```dist-zip``` 
+- `zipper` - By ```pnpm zip``` you can pack ```dist``` folder into ```extension.zip``` inside newly created ```dist-zip```
 - `e2e` - By ```pnpm e2e``` you can run end to end tests of your zipped extension on different browsers
 
 ### Pages <a name="structure-pages"></a>

package.json

@@ -56,10 +56,10 @@
     "eslint-plugin-react-hooks": "4.6.2",
     "husky": "^9.1.4",
     "lint-staged": "^15.2.7",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
-    "tailwindcss": "^3.4.6",
+    "tailwindcss": "^3.4.11",
     "tslib": "^2.6.3",
     "turbo": "^2.0.12",
     "typescript": "5.5.4",

packages/storage/lib/types.ts → packages/storage/lib/base/types.ts

@@ -9,12 +9,6 @@ export type BaseStorage<D> = {
   subscribe: (listener: () => void) => () => void;
 };
 
-export type Theme = 'light' | 'dark';
-
-export type ThemeStorage = BaseStorage<Theme> & {
-  toggle: () => Promise<void>;
-};
-
 export type StorageConfig<D = string> = {
   /**
    * Assign the {@link StorageEnum} to use.

packages/storage/lib/exampleThemeStorage.ts → packages/storage/lib/impl/exampleThemeStorage.ts

@@ -1,6 +1,12 @@
-import { createStorage } from './base';
-import { StorageEnum } from './enums';
-import type { Theme, ThemeStorage } from './types';
+import { StorageEnum } from '../base/enums';
+import { createStorage } from '../base/base';
+import type { BaseStorage } from '../base/types';
+
+type Theme = 'light' | 'dark';
+
+type ThemeStorage = BaseStorage<Theme> & {
+  toggle: () => Promise<void>;
+};
 
 const storage = createStorage<Theme>('theme-storage-key', 'light', {
   storageEnum: StorageEnum.Local,

packages/storage/lib/impl/index.ts

@@ -0,0 +1 @@
+export * from './exampleThemeStorage';

packages/storage/lib/index.ts

@@ -1,7 +1,2 @@
-import { createStorage } from './base';
-import { exampleThemeStorage } from './exampleThemeStorage';
-import { SessionAccessLevelEnum, StorageEnum } from './enums';
-import type { BaseStorage } from './types';
-
-export { exampleThemeStorage, createStorage, StorageEnum, SessionAccessLevelEnum };
-export type { BaseStorage };
+export type { BaseStorage } from './base/types';
+export * from './impl';

packages/tsconfig/base.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "allowJs": true,
     "noEmit": true,
+    "module": "esnext",
     "downlevelIteration": true,
     "isolatedModules": true,
     "strict": true,
@@ -17,10 +18,6 @@
     "resolveJsonModule": true,
     "noImplicitReturns": true,
     "jsx": "react-jsx",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ]
+    "lib": ["DOM", "ESNext"]
   }
 }
-

packages/ui/README.md

@@ -104,3 +104,249 @@ Modify the `tailwind.config.ts` file to make global style changes to the package
 ## Modifying the css variable of the UI library
 
 Modify the css variable in the `ui/lib/global.css` code to change the css variable of the package.
+
+## Guide for Adding shadcn to the UI Package
+
+You can refer to the this [manual guide](https://ui.shadcn.com/docs/installation/manual)
+
+1. Create components.json in packages/ui
+
+Create a file named `components.json` in the `packages/ui` directory with the following content:
+
+```json
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "lib/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/lib/components",
+    "utils": "@/lib/utils",
+    "ui": "@/lib/components/ui",
+    "lib": "@/lib"
+  }
+}
+```
+
+2. Install dependencies
+
+Run the following command from the root of your project:
+
+```shell
+pnpm add tailwindcss-animate class-variance-authority -F ui
+```
+
+3. Edit `withUI.ts` in `lib` folder
+
+This configuration file is from the manual guide. You can refer to the manual guide to modify the configuration file. ([`Configure tailwind.config.js`](https://ui.shadcn.com/docs/installation/manual))
+
+```ts
+import deepmerge from 'deepmerge';
+import type { Config } from 'tailwindcss/types/config';
+import { fontFamily } from 'tailwindcss/defaultTheme';
+import tailwindAnimate from 'tailwindcss-animate';
+
+export function withUI(tailwindConfig: Config): Config {
+  return deepmerge(
+    shadcnConfig,
+    deepmerge(tailwindConfig, {
+      content: ['./node_modules/@extension/ui/lib/**/*.{tsx,ts,js,jsx}'],
+    }),
+  );
+}
+
+const shadcnConfig = {
+  darkMode: ['class'],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      fontFamily: {
+        sans: ['var(--font-sans)', ...fontFamily.sans],
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [tailwindAnimate],
+};
+```
+
+4. Edit `global.css` in `lib` folder
+
+This configuration also comes from the manual guide. You can refer to the manual guide to modify the configuration file. ([`Configure styles`](https://ui.shadcn.com/docs/installation/manual))
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 47.4% 11.2%;
+
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 47.4% 11.2%;
+
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 47.4% 11.2%;
+
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
+
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+
+        --destructive: 0 100% 50%;
+        --destructive-foreground: 210 40% 98%;
+
+        --ring: 215 20.2% 65.1%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 224 71% 4%;
+        --foreground: 213 31% 91%;
+
+        --muted: 223 47% 11%;
+        --muted-foreground: 215.4 16.3% 56.9%;
+
+        --accent: 216 34% 17%;
+        --accent-foreground: 210 40% 98%;
+
+        --popover: 224 71% 4%;
+        --popover-foreground: 215 20.2% 65.1%;
+
+        --border: 216 34% 17%;
+        --input: 216 34% 17%;
+
+        --card: 224 71% 4%;
+        --card-foreground: 213 31% 91%;
+
+        --primary: 210 40% 98%;
+        --primary-foreground: 222.2 47.4% 1.2%;
+
+        --secondary: 222.2 47.4% 11.2%;
+        --secondary-foreground: 210 40% 98%;
+
+        --destructive: 0 63% 31%;
+        --destructive-foreground: 210 40% 98%;
+
+        --ring: 216 34% 17%;
+
+        --radius: 0.5rem;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+        font-feature-settings: "rlig" 1, "calt" 1;
+    }
+}
+```
+
+5. Add shadcn components
+
+Finally, run this command from the root of your project to add the button component:
+
+```shell
+pnpm dlx shadcn@latest add button -c ./packages/ui
+```
+
+This will add the shadcn button component to your UI package.
+
+Remember to adjust any paths or package names if your project structure differs from the assumed layout in this guide. 
+
+6. Export components
+
+Make the `index.ts` file in the `components/ui` directory export the button component:
+
+```ts
+export * from './button';
+```
+
+Edit the `index.ts` file in the `packages/ui` directory to export the shadcn ui component:
+
+```ts
+// export * from './lib/components'; // remove this line: duplicated button component
+export * from './lib/components/ui';
+```

packages/ui/build.mjs

@@ -1,4 +1,5 @@
 import fs from 'node:fs';
+import { replaceTscAliasPaths } from 'tsc-alias';
 import { resolve } from 'node:path';
 import esbuild from 'esbuild';
 
@@ -15,4 +16,17 @@ const buildOptions = {
 };
 
 await esbuild.build(buildOptions);
+
+/**
+ * Post build paths resolve since ESBuild only natively
+ * support paths resolution for bundling scenario
+ * @url https://github.com/evanw/esbuild/issues/394#issuecomment-1537247216
+ */
+await replaceTscAliasPaths({
+  configFile: 'tsconfig.json',
+  watch: false,
+  outDir: 'dist',
+  declarationDir: 'dist',
+});
+
 fs.copyFileSync(resolve('lib', 'global.css'), resolve('dist', 'global.css'));

packages/ui/package.json

@@ -24,7 +24,8 @@
   },
   "devDependencies": {
     "@extension/tsconfig": "workspace:*",
-    "deepmerge": "^4.3.1"
+    "deepmerge": "^4.3.1",
+    "tsc-alias": "^1.8.10"
   },
   "dependencies": {
     "clsx": "^2.1.1",