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

libs/shared/ui/.storybook/main.ts → .storybook/main.ts

@@ -1,7 +1,10 @@
 import type { StorybookConfig } from '@storybook/nextjs'
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+  stories: [
+    '../libs/external/shadcn/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
+    '../libs/shared/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
+  ],
   framework: {
     name: '@storybook/nextjs',
     options: {},

apps/website/app/root.tsx

@@ -8,7 +8,7 @@ import {
   ScrollRestoration,
 } from '@remix-run/react'
 
-import '@cuhacking/utils/global.css'
+import '@cuhacking/ui/global.css'
 
 export const links: LinksFunction = () => [
   { rel: 'preconnect', href: 'https://fonts.googleapis.com' },

components.json

@@ -3,13 +3,14 @@
   "style": "default",
   "rsc": false,
   "tailwind": {
-    "config": "libs/shared/utils/tailwind.config.js",
-    "css": "libs/shared/utils/global.css",
+    "config": "libs/shared/external/shadcn/tailwind.config.ts",
+    "css": "libs/shared/external/shadcn/global.css",
     "baseColor": "neutral",
     "cssVariables": true
   },
   "aliases": {
-    "components": "@shadcn",
-    "utils": "@cuhacking/utils"
+    "utils": "@shadcn/lib/utils",
+    "components": "@shadcn/components",
+    "hooks": "@shadcn/hooks"
   }
 }

libs/shared/ui/src/shadcn/accordion.tsx → libs/external/shadcn/components/ui/accordion.tsx

@@ -1,5 +1,5 @@
-import { cn } from '@cuhacking/utils'
 import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { cn } from '@shadcn/lib/utils'
 import { ChevronDown } from 'lucide-react'
 
 import * as React from 'react'

libs/shared/ui/src/shadcn/button.stories.tsx → libs/external/shadcn/components/ui/button.stories.tsx

@@ -4,8 +4,8 @@ import {
   EnvelopeOpenIcon,
   ReloadIcon,
 } from '@radix-ui/react-icons'
+import { Button } from '@shadcn/components/ui/button'
 import { fn } from '@storybook/test'
-import { Button } from './button'
 
 const meta = {
   title: 'Shadcn-ui/Button',

libs/shared/ui/src/shadcn/button.tsx → libs/external/shadcn/components/ui/button.tsx

@@ -1,5 +1,5 @@
-import { cn } from '@cuhacking/utils'
 import { Slot } from '@radix-ui/react-slot'
+import { cn } from '@shadcn/lib/utils'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 import * as React from 'react'

libs/shared/ui/src/shadcn/calendar.tsx → libs/external/shadcn/components/ui/calendar.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@cuhacking/utils'
+import { cn } from '@shadcn/lib/utils'
 import { buttonVariants } from '@shadcn/ui/button'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 

libs/shared/ui/src/shadcn/introduction.tsx → libs/external/shadcn/components/ui/introduction.tsx

@@ -3,14 +3,14 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from '@shadcn/ui/accordion'
+} from '@shadcn/components/ui/accordion'
 import {
   TypographyH1,
   TypographyH2,
   TypographyMuted,
   TypographyP,
   TypographySmall,
-} from '@shadcn/ui/typography/typography'
+} from '@shadcn/components/ui/typography/typography'
 
 function Introduction() {
   return (

libs/shared/ui/src/shadcn/typography/typography.tsx → libs/external/shadcn/components/ui/typography/typography.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable unused-imports/no-unused-vars */
-import { cn } from '@cuhacking/utils'
+import { cn } from '@shadcn/lib/utils'
 
 export function TypographyH1({
   className,

libs/shared/ui/project.json → libs/external/shadcn/project.json

@@ -1,14 +1,14 @@
 {
-  "name": "ui",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "libs/shared/ui/src",
+  "name": "shadcn",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/external/shadcn",
   "projectType": "library",
   "tags": [],
   "targets": {
     "add-component": {
       "executor": "@nx-extend/shadcn-ui:add",
       "options": {
-        "cwd": "libs/shared/ui/src/shadcn"
+        "cwd": "libs/external/shadcn"
       }
     }
   }

libs/external/shadcn/tailwind.config.ts

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

libs/shared/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/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

@@ -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'
 

libs/shared/config/typescript/base.json

@@ -17,7 +17,7 @@
     "moduleResolution": "node",
     // "---------- EMIT ---------": "",
     "paths": {
-      "@cuhacking/ui": ["libs/shared/ui/src/index.ts"]
+      "@cuhacking/*": ["libs/shared/*"]
     },
     "declaration": false,
     "importHelpers": true,

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/utils/project.json → libs/shared/project.json

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

libs/shared/ui/tsconfig.json → libs/shared/tsconfig.json

@@ -9,9 +9,6 @@
   "references": [
     {
       "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.storybook.json"
     }
   ],
   "files": [],

libs/shared/utils/tsconfig.lib.json → libs/shared/tsconfig.lib.json

@@ -18,6 +18,8 @@
     "src/**/*.spec.js",
     "src/**/*.test.js",
     "src/**/*.spec.jsx",
-    "src/**/*.test.jsx"
+    "src/**/*.test.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js"
   ]
 }