♻️ Restructure ui package (#991)

apps/web/tsconfig.json

@@ -8,12 +8,6 @@
     },
     "strictNullChecks": true,
   },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.js",
-    ".next/types/**/*.ts",
-    "src/app/[locale]/p/[participantUrlId]/page.tsx",
-  ],
+  "include": ["**/*.ts", "**/*.tsx", "**/*.js", ".next/types/**/*.ts"],
   "exclude": ["node_modules"],
 }

packages/ui/components.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/globals.css",
+    "baseColor": "gray",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@rallly/ui",
+    "ui": "src",
+    "utils": "@rallly/ui"
+  }
+}

packages/ui/index.ts

@@ -1 +0,0 @@
-export { cn } from "./lib/utils";

packages/ui/package.json

@@ -4,9 +4,16 @@
   "private": true,
   "main": "src/index.ts",
   "types": "src/index.ts",
+  "scripts": {
+    "ui:add": "npx shadcn-ui@latest add"
+  },
+  "exports": {
+    ".": "./src/lib/utils.ts",
+    "./*": "./src/*.tsx"
+  },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-checkbox": "^1.0.3",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-label": "^2.0.1",
@@ -16,10 +23,11 @@
     "@radix-ui/react-slot": "^1.0.1",
     "@radix-ui/react-switch": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.6",
     "@radix-ui/react-toast": "^1.1.4",
+    "@radix-ui/react-tooltip": "^1.0.6",
     "@rallly/icons": "*",
     "@rallly/languages": "*",
+    "@rallly/tailwind-config": "*",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
     "tailwind-merge": "^1.12.0"

packages/ui/src/accordion.tsx

@@ -4,7 +4,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDown } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const Accordion = AccordionPrimitive.Root;
 

packages/ui/src/alert.tsx

@@ -1,7 +1,7 @@
 import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const alertVariants = cva(
   "flex sm:flex-row flex-col gap-x-3 gap-y-2 rounded-md border p-4",

packages/ui/src/badge.tsx

@@ -1,7 +1,7 @@
 import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",

packages/ui/src/billing-plan.tsx

@@ -1,6 +1,6 @@
 import { CheckCircle2Icon } from "lucide-react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 export const BillingPlan = ({
   children,
@@ -71,7 +71,7 @@ export const BillingPlanPerk = ({
     <li className="flex items-start gap-x-2.5">
       <CheckCircle2Icon
         className={cn(
-          "size-4 mt-0.5 shrink-0",
+          "mt-0.5 size-4 shrink-0",
           !pro ? "text-gray-500" : "text-primary",
         )}
       />

packages/ui/src/button.tsx

@@ -4,7 +4,7 @@ import { Loader2Icon } from "lucide-react";
 import { cva, VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const buttonVariants = cva(
   "inline-flex border font-medium disabled:text-muted-foreground focus:ring-1 focus:ring-gray-300 disabled:bg-muted disabled:pointer-events-none select-none items-center justify-center whitespace-nowrap rounded-md border",
@@ -79,7 +79,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             {loading ? (
               <Loader2Icon className="size-4 animate-spin" />
             ) : Icon ? (
-              <Icon className={cn("size-4 -ml-0.5")} />
+              <Icon className={cn("-ml-0.5 size-4")} />
             ) : null}
             {children}
           </>

packages/ui/src/card.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const Card = React.forwardRef<
   HTMLDivElement,

packages/ui/src/checkbox.tsx

@@ -1,10 +1,10 @@
 "use client";
 
+import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
-import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "data-[state=checked]:border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary peer size-5 shrink-0 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-white",
+      "border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}
@@ -21,7 +21,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <CheckIcon className="size-4" />
+      <CheckIcon className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

packages/ui/src/command.tsx

@@ -5,8 +5,8 @@ import { SearchIcon } from "lucide-react";
 import { Command as CommandPrimitive } from "cmdk";
 import * as React from "react";
 
-import { Dialog, DialogContent } from "./dialog";
-import { cn } from "./lib/utils";
+import { Dialog, DialogContent } from "@rallly/ui/dialog";
+import { cn } from "@rallly/ui";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -42,7 +42,7 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <SearchIcon className="size-4 mr-2 shrink-0 opacity-50" />
+    <SearchIcon className="mr-2 size-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(

packages/ui/src/dialog.tsx

@@ -4,7 +4,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const Dialog = DialogPrimitive.Root;
 

packages/ui/src/dropdown-menu.tsx

@@ -4,7 +4,7 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, PlusCircleIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

packages/ui/src/form.tsx

@@ -11,7 +11,7 @@ import {
 } from "react-hook-form";
 
 import { Label } from "./label";
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const Form = FormProvider;
 

packages/ui/src/index.ts

@@ -0,0 +1 @@
+export { cn } from "@rallly/ui";

packages/ui/src/input.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 

packages/ui/src/label.tsx

@@ -4,7 +4,7 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",

packages/ui/src/popover.tsx

@@ -3,7 +3,7 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const Popover = PopoverPrimitive.Root;
 

packages/ui/src/radio-group.tsx

@@ -4,7 +4,7 @@ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { CircleIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "border-border bg-background text-primary ring-offset-background focus-visible:ring-ring size-4 aspect-square rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "border-border bg-background text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

packages/ui/src/select.tsx

@@ -4,7 +4,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const Select = SelectPrimitive.Root;
 
@@ -26,7 +26,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDownIcon className="size-4 ml-2 opacity-50" />
+      <ChevronDownIcon className="ml-2 size-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));

packages/ui/src/switch.tsx

@@ -3,7 +3,7 @@
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,

packages/ui/src/table.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const Table = React.forwardRef<
   HTMLTableElement,

packages/ui/src/tabs.tsx

@@ -3,7 +3,7 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const Tabs = TabsPrimitive.Root;
 

packages/ui/src/textarea.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 

packages/ui/src/toast.tsx

@@ -3,7 +3,7 @@ import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const ToastProvider = ToastPrimitives.Provider;
 

packages/ui/src/tooltip.tsx

@@ -3,7 +3,7 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
 
-import { cn } from "./lib/utils";
+import { cn } from "@rallly/ui";
 
 const TooltipProvider = TooltipPrimitive.Provider;
 

packages/ui/tailwind.config.js

@@ -0,0 +1,5 @@
+const sharedConfig = require("@rallly/tailwind-config/tailwind.config");
+
+module.exports = {
+  ...sharedConfig,
+};

packages/ui/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"],
+      "@rallly/ui/*": ["./src/*"],
     },
   },
   "include": ["**/*.ts", "**/*.tsx"],

yarn.lock

@@ -2630,20 +2630,20 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
-"@radix-ui/react-checkbox@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.3.tgz"
-  integrity sha512-55B8/vKzTuzxllH5sGJO4zaBf9gYpJuJRRzaOKm+0oAefRnMvbf+Kgww7IOANVN0w3z7agFJgtnXaZl8Uj95AA==
+"@radix-ui/react-checkbox@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz#98f22c38d5010dd6df4c5744cac74087e3275f4b"
+  integrity sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==
   dependencies:
     "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-presence" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.2"
-    "@radix-ui/react-use-controllable-state" "1.0.0"
-    "@radix-ui/react-use-previous" "1.0.0"
-    "@radix-ui/react-use-size" "1.0.0"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
 
 "@radix-ui/react-collapsible@1.0.3":
   version "1.0.3"