feat: initialized shadcn (gitcoinco#3)

* fix: shadcn requires src folder * feat: initialized shadcn
santamasa · Oct 18, 2024 · 4989d63 · 4989d63
1 parent 9125bb4
commit 4989d63
Show file tree

Hide file tree

Showing 32 changed files with 62 additions and 11 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,7 +1,7 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../lib/**/*.mdx", "../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -3,11 +3,11 @@ import type { Preview } from "@storybook/react";
 import { withThemeByDataAttribute } from "@storybook/addon-themes";
 
 import { initialize, mswLoader } from "msw-storybook-addon";
-import { handlers } from "../lib/mocks/handlers";
+import { handlers } from "../src/mocks/handlers";
 
 initialize();
 
-import "../lib/index.css";
+import "../src/index.css";
 
 const preview: Preview = {
   parameters: {

diff --git a/components.json b/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
diff --git a/package.json b/package.json
@@ -72,6 +72,7 @@
     "storybook": "^8.3.5",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.14",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.10.0",
     "vite": "^5.4.8",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/lib/colors.mdx → src/colors.mdx b/lib/colors.mdx → src/colors.mdx
diff --git a/lib/examples/icon/icon.tsx → src/examples/icon/icon.tsx b/lib/examples/icon/icon.tsx → src/examples/icon/icon.tsx
diff --git a/lib/examples/icon/index.tsx → src/examples/icon/index.tsx b/lib/examples/icon/index.tsx → src/examples/icon/index.tsx
diff --git a/...ecker/pages/OverviewPage/OverviewPage.tsx → ...ecker/pages/OverviewPage/OverviewPage.tsx b/...ecker/pages/OverviewPage/OverviewPage.tsx → ...ecker/pages/OverviewPage/OverviewPage.tsx
diff --git a/...ewPageTitle/OverviewPageTitle.stories.tsx → ...ewPageTitle/OverviewPageTitle.stories.tsx b/...ewPageTitle/OverviewPageTitle.stories.tsx → ...ewPageTitle/OverviewPageTitle.stories.tsx
diff --git a/...s/OverviewPageTitle/OverviewPageTitle.tsx → ...s/OverviewPageTitle/OverviewPageTitle.tsx b/...s/OverviewPageTitle/OverviewPageTitle.tsx → ...s/OverviewPageTitle/OverviewPageTitle.tsx
diff --git a/...age/components/OverviewPageTitle/index.ts → ...age/components/OverviewPageTitle/index.ts b/...age/components/OverviewPageTitle/index.ts → ...age/components/OverviewPageTitle/index.ts
diff --git a/...s/PendingReviewList/PendingReviewItem.tsx → ...s/PendingReviewList/PendingReviewItem.tsx b/...s/PendingReviewList/PendingReviewItem.tsx → ...s/PendingReviewList/PendingReviewItem.tsx
diff --git a/...s/PendingReviewList/PendingReviewList.tsx → ...s/PendingReviewList/PendingReviewList.tsx b/...s/PendingReviewList/PendingReviewList.tsx → ...s/PendingReviewList/PendingReviewList.tsx
diff --git a/...age/components/PendingReviewList/index.ts → ...age/components/PendingReviewList/index.ts b/...age/components/PendingReviewList/index.ts → ...age/components/PendingReviewList/index.ts
diff --git a/...s/ReadyToSubmitList/ReadyToSubmitItem.tsx → ...s/ReadyToSubmitList/ReadyToSubmitItem.tsx b/...s/ReadyToSubmitList/ReadyToSubmitItem.tsx → ...s/ReadyToSubmitList/ReadyToSubmitItem.tsx
diff --git a/...s/ReadyToSubmitList/ReadyToSubmitList.tsx → ...s/ReadyToSubmitList/ReadyToSubmitList.tsx b/...s/ReadyToSubmitList/ReadyToSubmitList.tsx → ...s/ReadyToSubmitList/ReadyToSubmitList.tsx
diff --git a/...age/components/ReadyToSubmitList/index.ts → ...age/components/ReadyToSubmitList/index.ts b/...age/components/ReadyToSubmitList/index.ts → ...age/components/ReadyToSubmitList/index.ts
diff --git a/...er/pages/OverviewPage/components/index.ts → ...er/pages/OverviewPage/components/index.ts b/...er/pages/OverviewPage/components/index.ts → ...er/pages/OverviewPage/components/index.ts
diff --git a/lib/icons.mdx → src/icons.mdx b/lib/icons.mdx → src/icons.mdx
diff --git a/lib/index.css → src/index.css b/lib/index.css → src/index.css
@@ -11,3 +11,9 @@
 body {
   @apply dark:ui-bg-black dark:ui-text-white;
 }
+
+@layer base {
+  :root {
+    --radius: 0.5rem;
+  }
+}
diff --git a/lib/index.ts → src/index.ts b/lib/index.ts → src/index.ts
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/lib/mocks/handlers.ts → src/mocks/handlers.ts b/lib/mocks/handlers.ts → src/mocks/handlers.ts
diff --git a/lib/tokens/colors.ts → src/tokens/colors.ts b/lib/tokens/colors.ts → src/tokens/colors.ts
diff --git a/lib/tokens/types.ts → src/tokens/types.ts b/lib/tokens/types.ts → src/tokens/types.ts
diff --git a/lib/tokens/utils.ts → src/tokens/utils.ts b/lib/tokens/utils.ts → src/tokens/utils.ts
diff --git a/lib/typography.mdx → src/typography.mdx b/lib/typography.mdx → src/typography.mdx
diff --git a/lib/vite-env.d.ts → src/vite-env.d.ts b/lib/vite-env.d.ts → src/vite-env.d.ts
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,17 +1,22 @@
 import type { Config } from "tailwindcss";
-import { colors } from "./lib/tokens/colors";
+import { colors } from "./src/tokens/colors";
 
 export default {
   prefix: "ui-",
-  content: ["./lib/**/*.{js,ts,jsx,tsx,mdx}"],
+  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
   darkMode: ["class", "[data-mode='dark']"],
   theme: {
     extend: {
       fontFamily: {
         mono: ["DM Mono", "monospace"],
       },
-      colors,
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      colors: {},
     },
   },
-  plugins: [],
+  plugins: [require("tailwindcss-animate")],
 } satisfies Config;
diff --git a/tsconfig.json b/tsconfig.json
@@ -20,11 +20,12 @@
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
     "paths": {
-      "@/*": ["./lib/*"]
+      "@/*": ["./src/*"]
     },
     "outDir": "./dist"
   },
-  "include": ["lib"],
+  "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -9,7 +9,7 @@ import path, { resolve } from "path";
 export default defineConfig({
   build: {
     lib: {
-      entry: resolve(__dirname, "./lib/index.ts"),
+      entry: resolve(__dirname, "./src/index.ts"),
       name: "gitcoin-ui",
       fileName: (format, filename) => {
         const extension = format === "es" ? "mjs" : format;
@@ -35,7 +35,7 @@ export default defineConfig({
   plugins: [react(), dts({ rollupTypes: true }), cssInjectedByJsPlugin()],
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "lib"),
+      "@": path.resolve(__dirname, "./src"),
     },
   },
   css: {