Add UI package with Shadcn components and use them on apps

apps/container/src/app/app.tsx

@@ -42,6 +42,8 @@ export function App() {
           Info
         </NavLink>
         <Button>Click Me</Button>
+        <Button variant="destructive">Click Me</Button>
+        <Button variant="secondary">Click Me</Button>
       </nav>
       <Routes>
         <Route element={<HomePage />} path="/" />

apps/container/src/components/hover-card/index.tsx

@@ -0,0 +1,33 @@
+import {
+  Button,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@mfe-tutorial/ui';
+import { CalendarDays } from 'lucide-react';
+
+export function HoverCardDemo() {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button variant="link">@mfe-tutorial</Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">
+        <div className="flex justify-between space-x-4">
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">@nextjs</h4>
+            <p className="text-sm">
+              The React Framework – created and maintained by @vercel.
+            </p>
+            <div className="flex items-center pt-2">
+              <CalendarDays className="w-4 h-4 mr-2 opacity-70" />{' '}
+              <span className="text-xs text-muted-foreground">
+                Joined December 2021
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  );
+}

apps/container/src/components/social-links/index.tsx

@@ -1,3 +1,6 @@
+import { Badge } from '@mfe-tutorial/ui';
+import { BadgeAlert, BadgeCheck } from 'lucide-react';
+
 const socialLinks = [
   {
     name: '🔗 LinkedIn',
@@ -11,18 +14,32 @@ const socialLinks = [
 
 export default function SocialLinks() {
   return (
-    <div className="flex flex-row items-center justify-center w-full py-4 bg-white border divide-x-2 divide-black rounded-lg md:w-1/3">
-      {socialLinks.map(({ name, url }) => (
-        <a
-          className="px-4 text-xl hover:underline text-primary-400"
-          href={url}
-          key={name}
-          rel="noreferrer"
-          target="_blank"
-        >
-          {name}
-        </a>
-      ))}
-    </div>
+    <section className="flex flex-col items-center justify-center w-full gap-y-4">
+      <Badge className="gap-x-2" variant="secondary">
+        <BadgeCheck />
+        Primary Badge
+      </Badge>
+      <Badge className="gap-x-2" variant="default">
+        <BadgeCheck />
+        Shadcn Badge
+      </Badge>
+      <Badge className="gap-x-2" variant="destructive">
+        <BadgeAlert />
+        Destructive Badge
+      </Badge>
+      <div className="flex flex-row items-center justify-center w-full py-4 bg-white border divide-x-2 divide-black rounded-lg md:w-1/3">
+        {socialLinks.map(({ name, url }) => (
+          <a
+            className="px-4 text-xl hover:underline text-primary"
+            href={url}
+            key={name}
+            rel="noreferrer"
+            target="_blank"
+          >
+            {name}
+          </a>
+        ))}
+      </div>
+    </section>
   );
 }

apps/container/src/pages/home/index.tsx

@@ -1,3 +1,4 @@
+import { HoverCardDemo } from '../../components/hover-card';
 import SocialLinks from '../../components/social-links';
 
 export default function HomePage() {
@@ -13,6 +14,7 @@ export default function HomePage() {
       <p className="text-lg text-gray-400">
         It was created with the Nx plugin for Webpack 5.
       </p>
+      <HoverCardDemo />
       <SocialLinks />
     </div>
   );

apps/container/src/styles.css

@@ -1,4 +1,6 @@
+@import '../../../packages/ui/src/styles.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-/* You can add global styles to this file, and also import other style files */
+/* You can add global styles to this file, and also import other style files */

apps/info/src/app/app.tsx

@@ -1,3 +1,5 @@
+import { ContextMenuDemo } from '../components/context-menu';
+
 export function App() {
   return (
     <main>
@@ -11,6 +13,7 @@ export function App() {
           This app is a remote app that is part of the Nx plugin for Webpack 5.
         </p>
       </section>
+      <ContextMenuDemo />
     </main>
   );
 }

apps/info/src/components/context-menu/index.tsx

@@ -0,0 +1,67 @@
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from '@mfe-tutorial/ui';
+
+export function ContextMenuDemo() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        <ContextMenuItem inset>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem disabled inset>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset>
+          Reload
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent className="w-48">
+            <ContextMenuItem>
+              Save Page As...
+              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+            <ContextMenuItem>Name Window...</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Developer Tools</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuCheckboxItem checked>
+          Show Bookmarks Bar
+          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuRadioGroup value="pedro">
+          <ContextMenuLabel inset>People</ContextMenuLabel>
+          <ContextMenuSeparator />
+          <ContextMenuRadioItem value="pedro">
+            Pedro Duarte
+          </ContextMenuRadioItem>
+          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

components.json

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

package.json

@@ -12,9 +12,17 @@
   },
   "private": true,
   "dependencies": {
+    "@radix-ui/react-context-menu": "^2.1.5",
+    "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.365.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.11.2",
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss-animate": "^1.0.7",
     "tslib": "^2.3.0"
   },
   "devDependencies": {

packages/ui/.eslintrc.json

@@ -4,7 +4,9 @@
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
+      "rules": {
+        "react/prop-types": "off"
+      }
     },
     {
       "files": ["*.ts", "*.tsx"],

packages/ui/src/components/index.ts

@@ -1 +1 @@
-export { default as Button, type BaseButtonProps } from './button';
+export * from './ui';

packages/ui/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

packages/ui/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };