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,12 @@
 import type { StorybookConfig } from '@storybook/nextjs'
 
-const config: StorybookConfig = {
-  stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+// import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin'
+
+export default {
+  stories: [
+    '../libs/external/shadcn/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
+    '../libs/shared/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
+  ],
   framework: {
     name: '@storybook/nextjs',
     options: {},
@@ -84,5 +89,15 @@ const config: StorybookConfig = {
     // https://github.com/whitespace-se/storybook-addon-html
     '@whitespace/storybook-addon-html',
   ],
-}
-export default config
+  // webpackFinal: async (config) => {
+  //   if (config.resolve) {
+  //     config.resolve.plugins = [
+  //       ...(config.resolve.plugins || []),
+  //       new TsconfigPathsPlugin({
+  //         configFile: './tsconfig.storybook.json',
+  //       }),
+  //     ]
+  //   }
+  //   return config
+  // },
+} satisfies StorybookConfig

libs/shared/ui/.storybook/preview.tsx → .storybook/preview.tsx

@@ -10,8 +10,7 @@ import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'
 
 import { customViewports } from './custom-viewports'
 import { commonTheme, darkUIStorybook, lightUIStorybook } from './themes-storybook-ui'
-/* import '../../utils/src/global.css' */
-import './global.css'
+import '../libs/shared/ui/global.css'
 
 const preview: Preview = {
   parameters: {

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

@@ -1,14 +1,9 @@
 {
-  "extends": "./tsconfig.json",
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "emitDecoratorMetadata": true
   },
   "include": [
-    "src/**/*.stories.ts",
-    "src/**/*.stories.js",
-    "src/**/*.stories.jsx",
-    "src/**/*.stories.tsx",
-    "src/**/*.stories.mdx",
     ".storybook/*.js",
     ".storybook/*.ts",
     "tailwind.config.ts",

apps/website/app/root.tsx

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

apps/website/app/routes/_index.tsx

@@ -4,8 +4,8 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from '@shadcn/ui/accordion'
-import { Calendar } from '@shadcn/ui/calendar'
+} from '@shadcn/components/ui/accordion'
+import { Calendar } from '@shadcn/components/ui/calendar'
 
 import { useState } from 'react'
 

apps/website/tailwind.config.ts

@@ -12,6 +12,6 @@
 //   plugins: [],
 // } satisfies Config
 
-import { buildConfig } from '../../libs/shared/utils/src/tailwind.config'
+import { buildConfig } from '../../libs/shared/config/tailwind/shadcn'
 
 export default buildConfig(__dirname)

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,9 +1,9 @@
-import { cn } from '@cuhacking/utils'
 import * as AccordionPrimitive from '@radix-ui/react-accordion'
 import { ChevronDown } from 'lucide-react'
-
 import * as React from 'react'
 
+import { cn } from '../../lib/utils'
+
 const Accordion = AccordionPrimitive.Root
 
 const AccordionItem = React.forwardRef<

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

@@ -1,9 +1,9 @@
-import { cn } from '@cuhacking/utils'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
-
 import * as React from 'react'
 
+import { cn } from '../../lib/utils'
+
 const buttonVariants = cva(
   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {

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

@@ -1,5 +1,5 @@
-import { cn } from '@cuhacking/utils'
-import { buttonVariants } from '@shadcn/ui/button'
+import { buttonVariants } from '@shadcn/components/ui/button'
+import { cn } from '@shadcn/lib/utils'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 
 import * as React from '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 './accordion'
 import {
   TypographyH1,
   TypographyH2,
   TypographyMuted,
   TypographyP,
   TypographySmall,
-} from '@shadcn/ui/typography/typography'
+} from './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 '../../../lib/utils'
 
 export function TypographyH1({
   className,

libs/external/shadcn/index.ts

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

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