feat(indie-ui): scaffold library

.storybook/main.ts

@@ -9,6 +9,7 @@ export default {
     '../libs/external/aceternity/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
     '../libs/external/farm-ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
     '../libs/external/magic-ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
+    '../libs/external/indie-ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
     '../libs/docs/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
     '../libs/shared/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
     '../libs/website/feature/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',

.storybook/preview.tsx

@@ -41,6 +41,7 @@ const preview: Preview = {
           'cuHacking Design System',
           '✨ Aceternity',
           'Farm UI',
+          'Indie UI',
           '🪄 Magic UI',
           'Shadcn-ui',
           [

libs/external/indie-ui/README.md

@@ -0,0 +1,7 @@
+# ui
+
+This is the shared UI library containing both Shadcn/ui and cuHacking/ui primitive components, also known as presentation/dumb components.
+
+[Shadcn/ui](https://ui.shadcn.com/) doesn't yet have an official Storybook.
+
+PR [#1561](https://github.com/shadcn-ui/ui/pull/1561) adds support, and work-in-progress stories for components can be found [here](https://github.com/lloydrichards/shadcn-ui/tree/94ee191d989cf93246f2feaca68b1fdb24c18940/apps/www/registry/stories).

libs/external/indie-ui/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/external/indie-ui/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/external/indie-ui/index.ts

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

libs/external/indie-ui/lib/utils/cn.ts

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

libs/external/indie-ui/lib/utils/index.ts

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

libs/external/indie-ui/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

libs/external/indie-ui/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "indie-ui",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/external/indie-ui",
+  "projectType": "library",
+  "tags": [],
+  "targets": {}
+}

libs/external/indie-ui/tailwind.config.ts

@@ -0,0 +1,37 @@
+import type { Config } from 'tailwindcss'
+import { join } from 'node:path'
+import { createGlobPatternsForDependencies } from '@nx/react/tailwind'
+
+import TailwindAnimate from 'tailwindcss-animate'
+import { flattenColorPalette } from 'tailwindcss/lib/util/flattenColorPalette'
+
+export function buildConfig(
+  appDir: string,
+): Config {
+  return {
+    content: [
+      join(
+        appDir,
+        '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}',
+      ),
+      ...createGlobPatternsForDependencies(appDir),
+    ],
+    darkMode: 'class',
+    theme: {
+      extend: {},
+    },
+    plugins: [TailwindAnimate, addVariablesForColors],
+  }
+}
+
+// This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200).
+function addVariablesForColors({ addBase, theme }: any) {
+  const allColors = flattenColorPalette(theme('colors'))
+  const newVars = Object.fromEntries(
+    Object.entries(allColors).map(([key, val]) => [`--${key}`, val]),
+  )
+
+  addBase({
+    ':root': newVars,
+  })
+}

libs/external/indie-ui/tsconfig.json

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

libs/external/indie-ui/tsconfig.lib.json

@@ -0,0 +1,25 @@
+{
+  "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",
+    "**/*.stories.ts",
+    "**/*.stories.js"
+  ]
+}