refactor: reorganize libs with feature sliced design and bulletproof …

…react

.gitignore

@@ -79,5 +79,5 @@ yarn-error.log*
 .vercel
 next-env.d.ts
 
-storybook-static
+**/*/storybook-static
 build-storybook.log

components.json

@@ -3,7 +3,7 @@
   "style": "default",
   "rsc": false,
   "tailwind": {
-    "config": "libs/shared/utils/tailwind.config.js",
+    "config": "libs/shared/external/shadcn/utils/tailwind.config.js",
     "css": "libs/shared/utils/global.css",
     "baseColor": "neutral",
     "cssVariables": true

libs/shared/external/shadcn/ui/tailwind.config.ts

@@ -0,0 +1,3 @@
+import { buildConfig } from '../utils/src/tailwind.config'
+
+export default buildConfig(__dirname)

libs/shared/external/shadcn/utils/README.md

@@ -0,0 +1,7 @@
+# utils
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test utils` to execute the unit tests via [Jest](https://jestjs.io).

libs/shared/external/shadcn/utils/eslint.config.js

@@ -0,0 +1,37 @@
+// const nx = require("@nx/eslint-plugin");
+// const baseConfig = require("../../eslint.config.js");
+
+// module.exports = [
+//     ...baseConfig,
+//     ...nx.configs["flat/react"],
+//     {
+//         files: [
+//             "**/*.ts",
+//             "**/*.tsx",
+//             "**/*.js",
+//             "**/*.jsx"
+//         ],
+//         // Override or add rules here
+//         rules: {}
+//     }
+// ];
+
+import baseConfigPromise from '../../../eslint.config.js'
+
+export default (async () => {
+  const baseConfig = await baseConfigPromise
+
+  return [
+    ...baseConfig,
+    {
+      files: [
+        '**/*.ts',
+        '**/*.tsx',
+        '**/*.js',
+        '**/*.jsx',
+      ],
+      // Override or add rules here
+      rules: {},
+    },
+  ]
+})()

libs/shared/external/shadcn/utils/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "utils",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/shared/utils/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project utils --web",
+  "targets": {}
+}

libs/shared/external/shadcn/utils/src/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export const cn = function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

libs/shared/external/shadcn/utils/src/global.css

@@ -0,0 +1,66 @@
+/**
+ * Don't forget to update your APPs global.css to include this file!
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      'rlig' 1,
+      'calt' 1;
+  }
+}

libs/shared/external/shadcn/utils/src/index.ts

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

libs/shared/external/shadcn/utils/src/tailwind.config.ts

@@ -0,0 +1,78 @@
+import type { Config } from 'tailwindcss'
+import { join } from 'node:path'
+import { createGlobPatternsForDependencies } from '@nx/react/tailwind'
+
+import TailwindAnimate from 'tailwindcss-animate'
+
+export function buildConfig(
+  appDir: string,
+): Config {
+  return {
+    content: [
+      join(
+        appDir,
+        '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}',
+      ),
+      ...createGlobPatternsForDependencies(appDir),
+    ],
+    theme: {
+      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)',
+        },
+        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],
+  }
+}

libs/shared/external/shadcn/utils/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": false
+  },
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "files": [],
+  "include": []
+}

libs/shared/external/shadcn/utils/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ],
+    "outDir": "../../../dist/out-tsc"
+  },
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ]
+}

libs/shared/features/awesome-feature/index.ts

@@ -0,0 +1 @@
+// entry point for the feature, it should serve as the public API of the given feature and exports everything that should be used outside the feature

libs/shared/src/config/eslint/antfu.js

@@ -0,0 +1,10 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  formatters: true,
+  // unocss: true,
+  react: true,
+  slidev: true,
+},
+// {}
+)

libs/shared/src/config/eslint/default.js

@@ -0,0 +1,31 @@
+export default [
+  ...nx.configs['flat/base'],
+  ...nx.configs['flat/typescript'],
+  ...nx.configs['flat/javascript'],
+  {
+    ignores: ['**/dist'],
+  },
+  {
+    files: ['**.ts', '**.tsx', '**.js', '**.jsx'],
+    rules: {
+      '@nx/enforce-module-boundaries': [
+        'error',
+        {
+          enforceBuildableLibDependency: true,
+          allow: ['^.*/eslint(\\.base)?\\.config\\.[cm]?js$'],
+          depConstraints: [
+            {
+              sourceTag: '*',
+              onlyDependOnLibsWithTags: ['*'],
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    files: ['**.ts', '**.tsx', '**.js', '**.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/shared/config/eslint/playwright.js → libs/shared/src/config/eslint/playwright.js

@@ -1,16 +1,3 @@
-// const playwright = require('eslint-plugin-playwright');
-// const baseConfig = require('../../eslint.config.js');
-
-// module.exports = [
-//   playwright.configs['flat/recommended'],
-//   ...baseConfig,
-//   {
-//     files: ['**/*.ts', '**/*.js'],
-//     // Override or add rules here
-//     rules: {},
-//   },
-// ]
-
 import playwright from 'eslint-plugin-playwright'
 import baseConfigPromise from '../../eslint.config.js'