ton of new components

gitcoinco · Oct 17, 2024 · ae83692 · ae83692
1 parent b60945f
commit ae83692
Show file tree

Hide file tree

Showing 89 changed files with 7,863 additions and 2,067 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,36 @@
 # Gitcoin UI
+
+## Developing
+
+### Importing ShadCN components
+
+ShadCN requires import aliases to work, which, unfortunately, are different than the ones we use for storybook. If you want to add or update ShadCN components, visit these two files and update the path variables.
+
+the files are:
+
+```
+tsconfig.json
+tsconfig.node.json
+```
+
+and within those files, the paths definition:
+
+```
+    "paths": {
+      "@/*": ["./lib/*"]
+      // Swap this line with the above if you need to import more ShadCN components
+      // "@/*": ["./src/*"]
+
+    },
+```
+
+needs to look like:
+
+```
+    "paths": {
+      // "@/*": ["./lib/*"]
+      // Swap this line with the above if you need to import more ShadCN components
+      "@/*": ["./src/*"]
+
+    },
+```
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": "lib/index.css",
+    "baseColor": "slate",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
diff --git a/lib/examples/button/button-variants.ts b/lib/examples/button/button-variants.ts
@@ -4,51 +4,51 @@ export type ButtonVariants = VariantProps<typeof buttonVariants>;
 
 export const buttonVariants = cva(
   [
-    "ui-font-semibold",
-    "ui-border",
-    "ui-rounded",
-    "ui-shadow-sm",
-    "ui-inline-flex",
-    "ui-items-center",
-    "ui-cursor-pointer",
-    "ui-gap-1.5",
-    "focus-visible:ui-outline",
-    "focus-visible:ui-outline-2",
-    "focus-visible:ui-outline-offset-2",
-    "ui-transition-colors",
-    "disabled:ui-opacity-50",
-    "disabled:ui-cursor-not-allowed",
-    "disabled:ui-pointer-events-none",
+    "font-semibold",
+    "border",
+    "rounded",
+    "shadow-sm",
+    "inline-flex",
+    "items-center",
+    "cursor-pointer",
+    "gap-1.5",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:outline-offset-2",
+    "transition-colors",
+    "disabled:opacity-50",
+    "disabled:cursor-not-allowed",
+    "disabled:pointer-events-none",
   ],
   {
     variants: {
       variant: {
         primary: [
-          "ui-bg-primary-600",
-          "ui-text-white",
-          "ui-border-transparent",
-          "hover:ui-bg-primary-500",
-          "active:ui-bg-primary-400",
+          "bg-primary-600",
+          "text-white",
+          "border-transparent",
+          "hover:bg-primary-500",
+          "active:bg-primary-400",
         ],
         secondary: [
-          "ui-bg-white",
-          "ui-text-slate-900",
-          "ui-border-slate-300",
-          "hover:ui-bg-slate-50",
-          "active:ui-bg-slate-100",
+          "bg-white",
+          "text-slate-900",
+          "border-slate-300",
+          "hover:bg-slate-50",
+          "active:bg-slate-100",
         ],
         destructive: [
-          "ui-bg-danger-600",
-          "ui-text-white",
-          "ui-border-transparent",
-          "hover:ui-bg-danger-500",
-          "active:ui-bg-danger-400",
+          "bg-danger-600",
+          "text-white",
+          "border-transparent",
+          "hover:bg-danger-500",
+          "active:bg-danger-400",
         ],
       },
       size: {
-        small: ["ui-text-sm", "ui-px-2", "ui-py-1"],
-        medium: ["ui-text-sm", "ui-px-2.5", "ui-py-1.5"],
-        large: ["ui-text-sm", "ui-px-3", "ui-py-2"],
+        small: ["text-sm", "px-2", "py-1"],
+        medium: ["text-sm", "px-2.5", "py-1.5"],
+        large: ["text-sm", "px-3", "py-2"],
       },
     },
     defaultVariants: {

diff --git a/lib/examples/callout/callout-variants.ts b/lib/examples/callout/callout-variants.ts
@@ -8,55 +8,52 @@ export type CalloutVariants = VariantProps<typeof calloutVariants>;
 
 const variant = {
   primary: [
-    "ui-bg-primary-200",
-    "ui-border-primary-500",
-    "ui-text-primary-900",
-    "dark:ui-bg-primary-800",
-    "dark:ui-border-primary-900",
-    "dark:ui-text-primary-50",
+    "bg-primary-200",
+    "border-primary-500",
+    "text-primary-900",
+    "dark:bg-primary-800",
+    "dark:border-primary-900",
+    "dark:text-primary-50",
   ],
   information: [
-    "ui-bg-information-200",
-    "ui-border-information-500",
-    "ui-text-information-900",
-    "dark:ui-bg-information-800",
-    "dark:ui-border-information-900",
-    "dark:ui-text-information-50",
+    "bg-information-200",
+    "border-information-500",
+    "text-information-900",
+    "dark:bg-information-800",
+    "dark:border-information-900",
+    "dark:text-information-50",
   ],
   success: [
-    "ui-bg-success-200",
-    "ui-border-success-500",
-    "ui-text-success-900",
-    "dark:ui-bg-success-800",
-    "dark:ui-border-success-900",
-    "dark:ui-text-success-50",
+    "bg-success-200",
+    "border-success-500",
+    "text-success-900",
+    "dark:bg-success-800",
+    "dark:border-success-900",
+    "dark:text-success-50",
   ],
   warning: [
-    "ui-bg-warning-200",
-    "ui-border-warning-500",
-    "ui-text-warning-900",
-    "dark:ui-bg-warning-800",
-    "dark:ui-border-warning-900",
-    "dark:ui-text-warning-50",
+    "bg-warning-200",
+    "border-warning-500",
+    "text-warning-900",
+    "dark:bg-warning-800",
+    "dark:border-warning-900",
+    "dark:text-warning-50",
   ],
   danger: [
-    "ui-bg-danger-200",
-    "ui-border-danger-500",
-    "ui-text-danger-900",
-    "dark:ui-bg-danger-800",
-    "dark:ui-border-danger-900",
-    "dark:ui-text-danger-50",
+    "bg-danger-200",
+    "border-danger-500",
+    "text-danger-900",
+    "dark:bg-danger-800",
+    "dark:border-danger-900",
+    "dark:text-danger-50",
   ],
 };
 
-export const calloutVariants = cva(
-  ["ui-p-4", "ui-rounded-lg", "ui-border", "ui-shadow-md", "ui-space-y-8"],
-  {
-    variants: {
-      variant,
-    },
-    defaultVariants: {
-      variant: "primary",
-    },
+export const calloutVariants = cva(["p-4", "rounded-lg", "border", "shadow-md", "space-y-8"], {
+  variants: {
+    variant,
   },
-);
+  defaultVariants: {
+    variant: "primary",
+  },
+});
diff --git a/lib/examples/callout/callout.tsx b/lib/examples/callout/callout.tsx
@@ -6,7 +6,7 @@ export type CalloutProps = PropsWithChildren<CalloutVariants & { title: string }
 export const Callout = ({ children, title, variant }: CalloutProps) => {
   return (
     <div className={calloutVariants({ variant })}>
-      <h2 className="ui-text-2xl ui-font-semibold">{title}</h2>
+      <h2 className="text-2xl font-semibold">{title}</h2>
       <p>{children}</p>
     </div>
   );

diff --git a/lib/examples/checkbox/checkbox.tsx b/lib/examples/checkbox/checkbox.tsx
@@ -9,14 +9,14 @@ export const Checkbox = ({ label, className, ...props }: CheckboxProps) => {
   return (
     <label
       className={clsx(
-        "ui-inline-flex ui-cursor-pointer ui-select-none ui-items-center ui-gap-1.5",
-        props.disabled && "ui-cursor-not-allowed ui-opacity-50",
+        "inline-flex cursor-pointer select-none items-center gap-1.5",
+        props.disabled && "cursor-not-allowed opacity-50",
         className,
       )}
     >
-      <input type="checkbox" className="ui-peer ui-sr-only" {...props} />
-      <div className="ui-relative ui-size-4 ui-min-w-4 ui-rounded ui-border ui-border-slate-500 ui-bg-slate-50 ui-shadow-sm after:ui-absolute after:ui-left-0.5 after:ui-top-0 after:ui-text-xs after:ui-text-white after:ui-drop-shadow-sm peer-checked:ui-border-primary-800 peer-checked:ui-bg-primary-600 peer-checked:after:ui-content-['✔'] peer-focus:ui-ring-1 peer-focus:ui-ring-primary-500 peer-focus:ui-ring-offset-2 dark:ui-bg-slate-700 dark:ui-ring-offset-slate-800 dark:peer-checked:ui-bg-primary-600" />
-      <span className="ui-text-sm ui-font-medium">{label}</span>
+      <input type="checkbox" className="peer sr-only" {...props} />
+      <div className="peer-checked:border-primary-800 peer-checked:bg-primary-600 peer-focus:ring-primary-500 dark:peer-checked:bg-primary-600 relative size-4 min-w-4 rounded border border-slate-500 bg-slate-50 shadow-sm after:absolute after:left-0.5 after:top-0 after:text-xs after:text-white after:drop-shadow-sm peer-checked:after:content-['✔'] peer-focus:ring-1 peer-focus:ring-offset-2 dark:bg-slate-700 dark:ring-offset-slate-800" />
+      <span className="text-sm font-medium">{label}</span>
     </label>
   );
 };
diff --git a/lib/examples/input/input.tsx b/lib/examples/input/input.tsx
@@ -20,26 +20,26 @@ export const Input = ({
   ...props
 }: InputProps) => {
   return (
-    <label className="ui-flex ui-flex-col ui-gap-1.5">
+    <label className="flex flex-col gap-1.5">
       <span
         className={clsx(
-          "ui-inline-flex ui-items-center ui-gap-1 ui-text-sm ui-font-medium",
-          required && "after:ui-h-1.5 after:ui-w-1.5 after:ui-rounded-full after:ui-bg-accent-500",
-          unlabeled && "ui-sr-only",
+          "inline-flex items-center gap-1 text-sm font-medium",
+          required && "after:bg-accent-500 after:h-1.5 after:w-1.5 after:rounded-full",
+          unlabeled && "sr-only",
         )}
       >
         {label}
       </span>
 
       <input
         value={value}
-        className="ui-block ui-w-full ui-gap-2 ui-rounded-md ui-bg-white ui-px-3 ui-py-1 ui-text-sm ui-placeholder-slate-400 ui-shadow-sm ui-ring-1 ui-ring-inset ui-ring-slate-500 focus:ui-bg-primary-50 focus:ui-outline-none focus:ui-ring-2 focus:ui-ring-primary-600 disabled:ui-cursor-not-allowed disabled:ui-bg-slate-50 dark:ui-bg-slate-800 dark:ui-placeholder-slate-300"
+        className="focus:bg-primary-50 focus:ring-primary-600 block w-full gap-2 rounded-md bg-white px-3 py-1 text-sm placeholder-slate-400 shadow-sm ring-1 ring-inset ring-slate-500 focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:bg-slate-50 dark:bg-slate-800 dark:placeholder-slate-300"
         placeholder={unlabeled ? label : placeholder}
         disabled={disabled}
         required={required}
         {...props}
       />
-      {details && <span className="ui-text-xs ui-text-slate-500">{details}</span>}
+      {details && <span className="text-xs text-slate-500">{details}</span>}
     </label>
   );
 };
diff --git a/lib/examples/task-list/task-list.tsx b/lib/examples/task-list/task-list.tsx
@@ -10,9 +10,9 @@ export const TaskList = () => {
   const { tasks, error, addTask, toggleTask, removeTask, total, incomplete } = useTaskListContext();
 
   return (
-    <main className="ui-space-y-8">
+    <main className="space-y-8">
       <form
-        className="ui-space-y-4"
+        className="space-y-4"
         onSubmit={(e) => {
           e.preventDefault();
           addTask(newTask);
@@ -24,31 +24,31 @@ export const TaskList = () => {
           value={newTask}
           onChange={(e) => setNewTask(e.target.value)}
         />
-        <div className="ui-flex ui-justify-end ui-gap-2">
+        <div className="flex justify-end gap-2">
           <Button disabled={!newTask}>Add Task</Button>
           <Button variant="secondary" onClick={() => setNewTask("")}>
             Clear
           </Button>
         </div>
       </form>
 
-      <div className="ui-flex ui-flex-col ui-rounded-md ui-bg-slate-50 ui-shadow-md dark:ui-bg-slate-800">
+      <div className="flex flex-col rounded-md bg-slate-50 shadow-md dark:bg-slate-800">
         {error ? (
           <div
             data-testid="error-message"
-            className="ui-flex ui-items-center ui-gap-2 ui-border ui-border-danger-500 ui-px-4 ui-py-2 dark:ui-border-slate-800"
+            className="border-danger-500 flex items-center gap-2 border px-4 py-2 dark:border-slate-800"
           >
             Error loading tasks: {error.message}
           </div>
         ) : (
           tasks.map((task) => (
-            <div className="ui-flex ui-items-center ui-gap-2 ui-border-b ui-border-slate-200 ui-px-4 ui-py-2 last:ui-border-b-0 dark:ui-border-slate-800">
+            <div className="flex items-center gap-2 border-b border-slate-200 px-4 py-2 last:border-b-0 dark:border-slate-800">
               <Checkbox
                 key={task.id}
                 label={task.title}
                 checked={task.completed}
                 onChange={() => toggleTask(task.id)}
-                className="ui-w-full ui-rounded-md ui-p-2 hover:ui-bg-slate-100 dark:hover:ui-bg-slate-700"
+                className="w-full rounded-md p-2 hover:bg-slate-100 dark:hover:bg-slate-700"
               />
               <Button
                 title="Remove task"
@@ -63,7 +63,7 @@ export const TaskList = () => {
         )}
       </div>
 
-      <p className="ui-text-right ui-font-semibold after:ui-font-normal after:ui-content-['_tasks_remaning']">
+      <p className="text-right font-semibold after:font-normal after:content-['_tasks_remaning']">
         <span data-testid="incomplete">{incomplete}</span>/<span data-testid="total">{total}</span>
       </p>
     </main>

diff --git a/lib/examples/text-area/text-area.stories.tsx b/lib/examples/text-area/text-area.stories.tsx
@@ -101,7 +101,7 @@ export const LengthTooLong: Story = {
     await userEvent.type(textArea, inputValue);
     expect(count).toHaveTextContent(inputValue.length.toString());
     expect(textArea).toHaveAttribute("aria-invalid", "true");
-    expect(textArea).toHaveClass("ui-ring-danger-500");
+    expect(textArea).toHaveClass("ring-danger-500");
     expect(count).toHaveStyle({ color: "rgb(217, 37, 62)" });
     expect(textArea).toHaveStyle({ boxShadow: "rgb(237, 70, 86)" });
   },