From 5704168095b2c83b8b51823ed585a1cdf3210dbc Mon Sep 17 00:00:00 2001 From: Serif Date: Sat, 6 Apr 2024 21:23:16 +0300 Subject: [PATCH] Add UI package with Shadcn components and use them on apps --- apps/container/src/app/app.tsx | 2 + .../src/components/hover-card/index.tsx | 33 + .../src/components/social-links/index.tsx | 43 +- apps/container/src/pages/home/index.tsx | 2 + apps/container/src/styles.css | 4 +- apps/info/src/app/app.tsx | 3 + .../src/components/context-menu/index.tsx | 67 ++ components.json | 17 + package.json | 8 + packages/ui/.eslintrc.json | 4 +- packages/ui/src/components/button/index.tsx | 12 - packages/ui/src/components/index.ts | 2 +- packages/ui/src/components/ui/badge.tsx | 36 + packages/ui/src/components/ui/button.tsx | 58 ++ .../ui/src/components/ui/context-menu.tsx | 202 +++++ packages/ui/src/components/ui/hover-card.tsx | 27 + packages/ui/src/components/ui/index.ts | 4 + packages/ui/src/index.ts | 1 + packages/ui/src/lib/index.ts | 1 + packages/ui/src/lib/utils.ts | 11 + packages/ui/src/styles.css | 77 ++ pnpm-lock.yaml | 794 +++++++++++++++--- tailwind.config.js | 68 +- 23 files changed, 1332 insertions(+), 144 deletions(-) create mode 100644 apps/container/src/components/hover-card/index.tsx create mode 100644 apps/info/src/components/context-menu/index.tsx create mode 100644 components.json delete mode 100644 packages/ui/src/components/button/index.tsx create mode 100644 packages/ui/src/components/ui/badge.tsx create mode 100644 packages/ui/src/components/ui/button.tsx create mode 100644 packages/ui/src/components/ui/context-menu.tsx create mode 100644 packages/ui/src/components/ui/hover-card.tsx create mode 100644 packages/ui/src/components/ui/index.ts create mode 100644 packages/ui/src/lib/index.ts create mode 100644 packages/ui/src/lib/utils.ts create mode 100644 packages/ui/src/styles.css diff --git a/apps/container/src/app/app.tsx b/apps/container/src/app/app.tsx index b7b1d61..2178f19 100644 --- a/apps/container/src/app/app.tsx +++ b/apps/container/src/app/app.tsx @@ -42,6 +42,8 @@ export function App() { Info + + } path="/" /> diff --git a/apps/container/src/components/hover-card/index.tsx b/apps/container/src/components/hover-card/index.tsx new file mode 100644 index 0000000..ba99830 --- /dev/null +++ b/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 ( + + + + + +
+
+

@nextjs

+

+ The React Framework โ€“ created and maintained by @vercel. +

+
+ {' '} + + Joined December 2021 + +
+
+
+ + + ); +} diff --git a/apps/container/src/components/social-links/index.tsx b/apps/container/src/components/social-links/index.tsx index 2b1df65..48e42f3 100644 --- a/apps/container/src/components/social-links/index.tsx +++ b/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 ( -
- {socialLinks.map(({ name, url }) => ( - - {name} - - ))} -
+
+ + + Primary Badge + + + + Shadcn Badge + + + + Destructive Badge + +
+ {socialLinks.map(({ name, url }) => ( + + {name} + + ))} +
+
); } diff --git a/apps/container/src/pages/home/index.tsx b/apps/container/src/pages/home/index.tsx index d0d5ba2..5c99cfd 100644 --- a/apps/container/src/pages/home/index.tsx +++ b/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() {

It was created with the Nx plugin for Webpack 5.

+ ); diff --git a/apps/container/src/styles.css b/apps/container/src/styles.css index 844323d..f814171 100644 --- a/apps/container/src/styles.css +++ b/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 */ \ No newline at end of file diff --git a/apps/info/src/app/app.tsx b/apps/info/src/app/app.tsx index a07da5b..49a670a 100644 --- a/apps/info/src/app/app.tsx +++ b/apps/info/src/app/app.tsx @@ -1,3 +1,5 @@ +import { ContextMenuDemo } from '../components/context-menu'; + export function App() { return (
@@ -11,6 +13,7 @@ export function App() { This app is a remote app that is part of the Nx plugin for Webpack 5.

+
); } diff --git a/apps/info/src/components/context-menu/index.tsx b/apps/info/src/components/context-menu/index.tsx new file mode 100644 index 0000000..e99f0ae --- /dev/null +++ b/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 ( + + + Right click here + + + + Back + โŒ˜[ + + + Forward + โŒ˜] + + + Reload + โŒ˜R + + + More Tools + + + Save Page As... + โ‡งโŒ˜S + + Create Shortcut... + Name Window... + + Developer Tools + + + + + Show Bookmarks Bar + โŒ˜โ‡งB + + Show Full URLs + + + People + + + Pedro Duarte + + Colm Tuite + + + + ); +} diff --git a/components.json b/components.json new file mode 100644 index 0000000..55d9ec6 --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/package.json b/package.json index 652ef32..f968ce5 100644 --- a/package.json +++ b/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": { diff --git a/packages/ui/.eslintrc.json b/packages/ui/.eslintrc.json index a39ac5d..24a82e5 100644 --- a/packages/ui/.eslintrc.json +++ b/packages/ui/.eslintrc.json @@ -4,7 +4,9 @@ "overrides": [ { "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": {} + "rules": { + "react/prop-types": "off" + } }, { "files": ["*.ts", "*.tsx"], diff --git a/packages/ui/src/components/button/index.tsx b/packages/ui/src/components/button/index.tsx deleted file mode 100644 index 3951549..0000000 --- a/packages/ui/src/components/button/index.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ComponentProps } from 'react'; - -export type BaseButtonProps = ComponentProps<'button'>; - -export default function Button({ className, ...props }: BaseButtonProps) { - return ( -