SLB-274 shadcn UI

packages/schema/src/schema.graphql

@@ -105,7 +105,7 @@ type NavigationItem {
   id: ID! @resolveMenuItemId
   parent: ID @resolveMenuItemParentId
   title: String! @resolveMenuItemLabel
-  target: Url! @resolveMenuItemUrl
+  target: Url @resolveMenuItemUrl
 }
 
 interface Navigation {

packages/ui/.storybook/main.ts

@@ -12,6 +12,14 @@ const config: StorybookConfig = {
       },
       resolve: {
         alias: {
+          '@/utils': resolve(
+            dirname(new URL(import.meta.url).pathname),
+            '../src/utils/shadcn/utils',
+          ),
+          '@/shadcn': resolve(
+            dirname(new URL(import.meta.url).pathname),
+            '../src/components/Molecules/shadcn',
+          ),
           '@amazeelabs/bridge': '@amazeelabs/bridge-storybook',
           '@stories': resolve(
             dirname(new URL(import.meta.url).pathname),

packages/ui/.swcrc

@@ -1,6 +1,11 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
   "jsc": {
+    "baseUrl": ".",
+    "paths": {
+      "@/shadcn/*": ["./src/components/Molecules/shadcn/*"],
+      "@/utils": ["./src/utils/shadcn/utils.js"],
+    },
     "parser": {
       "syntax": "typescript"
     }

packages/ui/components.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "src/tailwind.config.cjs",
+    "css": "src/tailwind.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/shadcn",
+    "utils": "@/utils",
+    "ui": "@/shadcn"
+  }
+}

packages/ui/package.json

@@ -35,14 +35,26 @@
     "test:unit": "vitest run --passWithNoTests",
     "test:storybook": "test-storybook --coverage",
     "test:integration": "start-test start http://localhost:6006 test:storybook && pnpm report",
-    "report": "mkdir -p coverage/storybook && nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook"
+    "report": "mkdir -p coverage/storybook && nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook",
+    "component": "pnpm dlx shadcn-ui add -p src/components/Molecules/shadcn"
   },
   "dependencies": {
     "@amazeelabs/silverback-iframe": "^1.3.0",
     "@custom/schema": "workspace:*",
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.1.1",
     "@hookform/resolvers": "^3.3.3",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-context-menu": "^2.1.5",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@tailwindcss/line-clamp": "^0.4.4",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "framer-motion": "^10.17.4",
     "hast-util-is-element": "^2.1.3",
@@ -51,6 +63,8 @@
     "react-hook-form": "^7.49.2",
     "react-intl": "^6.6.2",
     "swr": "^2.2.4",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7",
     "unified": "^10.1.2",
     "zod": "^3.22.4",
     "zustand": "^4.4.7"

packages/ui/src/components/Client/DesktopMenu.tsx

@@ -1,90 +1,42 @@
 'use client';
-import { Disclosure, Popover, Transition } from '@headlessui/react';
+import { Url } from '@custom/schema';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
-import clsx from 'clsx';
 import React, { PropsWithChildren } from 'react';
 
-import { avoidFocusOnClick } from '../../utils/avoidFocusOnClick';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shadcn/popover';
 
 export function DesktopMenu({ children }: PropsWithChildren<{}>) {
-  return (
-    <Popover.Group className="hidden lg:flex lg:gap-x-12">
-      {children}
-    </Popover.Group>
-  );
+  return <div className="hidden lg:flex lg:gap-x-12">{children}</div>;
 }
 
 export function DesktopMenuDropDown({
   title,
+  target,
   children,
-}: PropsWithChildren<{ title: string }>) {
+}: PropsWithChildren<{ title: string; target?: Url }>) {
   return (
-    <Popover className="relative">
-      {({ open }) => (
-        <React.Fragment>
-          <Popover.Button
-            className={clsx(
-              'flex items-center text-base font-medium ml-8 hover:text-blue-600',
-              open ? 'text-blue-600' : 'text-gray-600',
-            )}
-            onClick={() => avoidFocusOnClick()}
-          >
-            {title}
-            <ChevronDownIcon
-              className={clsx(
-                'h-5 w-5 flex-none text-blue-600',
-                open && 'rotate-180',
-              )}
-              aria-hidden="true"
-            />
-          </Popover.Button>
-          <Transition
-            as={React.Fragment}
-            enter="transition ease-out duration-200"
-            enterFrom="opacity-0 translate-y-1"
-            enterTo="opacity-100 translate-y-0"
-            leave="transition ease-in duration-150"
-            leaveFrom="opacity-100 translate-y-0"
-            leaveTo="opacity-0 translate-y-1"
-          >
-            <Popover.Panel
-              static
-              className="absolute left-8 top-full z-10 mt-3 w-56 rounded bg-white shadow-md ring-1 ring-gray-100"
-            >
-              {children}
-            </Popover.Panel>
-          </Transition>
-        </React.Fragment>
-      )}
-    </Popover>
-  );
-}
+    <Popover>
+      <PopoverTrigger className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
+        {title}
+        <ChevronDownIcon
+          className="h-5 w-5 flex-none text-gray-400"
+          aria-hidden="true"
+        />
+      </PopoverTrigger>
 
-export function DesktopMenuDropdownDisclosure({
-  title,
-  children,
-}: PropsWithChildren<{ title: string }>) {
-  return (
-    <Disclosure as="div" className="">
-      {({ open }) => (
-        <div className={clsx('m-1.5 rounded', open && 'bg-gray-100')}>
-          <Disclosure.Button
-            className={clsx(
-              'flex w-full items-center justify-between px-2 py-1 text-sm leading-[1.25rem] hover:text-blue-600',
-              open ? 'text-blue-600 font-medium' : 'text-gray-500',
-            )}
+      <PopoverContent className="top-full z-10 mt-3 w-56 rounded-xl bg-white p-2 shadow-lg ring-1 ring-gray-900/5">
+        {target && (
+          <a
+            href={target}
+            className={
+              'block pl-3 py-1.5 mb-2 rounded-lg text-sm font-semibold leading-7 text-gray-900 relative hover:bg-gray-50 after:absolute after:-bottom-1 after:left-0 after:w-full after:content-[""] after:block after:border-b after:border-b-gray-200'
+            }
           >
             {title}
-            <ChevronDownIcon
-              className={clsx('h-5 w-5 flex-none text-blue-600', {
-                'rotate-180': open,
-              })}
-              aria-hidden="true"
-            />
-          </Disclosure.Button>
-          <Disclosure.Panel className="">{children}</Disclosure.Panel>
-        </div>
-      )}
-    </Disclosure>
+          </a>
+        )}
+        {children}
+      </PopoverContent>
+    </Popover>
   );
 }