V0.3.6 (#61)

* ✨ rename buttons.category.tsx to category.ts and add dual action button component

* ✨ add Mac OS context menu components and update package dependencies

* 📝 add Dropdown Menu and Context Menu categories to the component library

* 📝 update changelog for November 27, 2024, and add dual button component

apps/website/src/changelogs/2024-11-27.mdx

@@ -0,0 +1,19 @@
+---
+title: Previews & Dropdown Menus
+---
+
+#### New Category
+
+- Added the Dropdown Menu category to the component library.
+- Added the Context Menu category to the component library.
+- Introduced a macOS-style dropdown menu and context menu.
+
+
+#### Updated Previews
+
+- Refreshed previews with a minimalist style that reflects each category’s content. This consistent design will be used for all future previews.
+
+
+#### New component
+
+- Added the dual button component to the component library. This component is a combination of two action button, often use for saving and canceling actions.

apps/website/src/changelogs/last-changelog-date.ts

@@ -1,2 +1,2 @@
 // This file is generated by the generate-latest-changelog-date script
-export const lastChangelogDate = new Date("2024-11-23T23:00:00.000Z");
+export const lastChangelogDate = new Date("2024-11-26T23:00:00.000Z");

apps/website/src/lib/generated-package-check-list-to-install.ts

@@ -207,6 +207,10 @@ export const packageCheckListToInstall: PackageToInstallType[] = [
     find: [`from "@number-flow/react"`],
     packageName: "@number-flow/react",
   },
+  {
+    find: [`from "@radix-ui/react-context-menu"`],
+    packageName: "@radix-ui/react-context-menu",
+  },
   {
     find: [`from "@radix-ui/react-slider"`],
     packageName: "@radix-ui/react-slider",

packages/internal-cli/package.json

@@ -5,7 +5,7 @@
 	"bin": "dist/cli.js",
 	"type": "module",
 	"scripts": {
-		"build": "tsc",
+		"build-cli": "tsc",
 		"cli": "node dist/cli.js"
 	},
 	"files": [

packages/ui/categories-previews-list.ts

@@ -3,6 +3,7 @@ import application_ui_alert_preview from './cuicui/application-ui/alert/preview'
 import application_ui_authentication_preview from './cuicui/application-ui/authentication/preview';
 import application_ui_battery_preview from './cuicui/application-ui/battery/preview';
 import application_ui_code_preview from './cuicui/application-ui/code/preview';
+import application_ui_context_menu_preview from './cuicui/application-ui/context-menu/preview';
 import application_ui_cookie_banner_preview from './cuicui/application-ui/cookie-banner/preview';
 import application_ui_dropdown_menu_preview from './cuicui/application-ui/dropdown-menu/preview';
 import application_ui_kbd_preview from './cuicui/application-ui/kbd/preview';
@@ -80,6 +81,7 @@ export const categoriesPreviewsList = {
   'authentication': application_ui_authentication_preview,
   'battery': application_ui_battery_preview,
   'code': application_ui_code_preview,
+  'context-menu': application_ui_context_menu_preview,
   'cookie-banner': application_ui_cookie_banner_preview,
   'dropdown-menu': application_ui_dropdown_menu_preview,
   'kbd': application_ui_kbd_preview,

packages/ui/cuicui/application-ui/application-ui.section.ts

@@ -17,6 +17,7 @@ import { treeCategory } from "@/cuicui/application-ui/tree/tree.category";
 import { notificationCategory } from "@/cuicui/application-ui/notification/category.notification";
 import { dropdownMenuCategory } from "@/cuicui/application-ui/dropdown-menu/category";
 import { tableOfContentCategory } from "@/cuicui/application-ui/table-of-contents/table-of-contents.category";
+import { contextMenuCategory } from "@/cuicui/application-ui/context-menu/category";
 
 export const applicationUiSection: MultiComponentSectionType = {
   type: "multiple-component",
@@ -30,6 +31,7 @@ export const applicationUiSection: MultiComponentSectionType = {
     authenticationCategory,
     batteryCategory,
     codeCategory,
+    contextMenuCategory,
     cookieBannerCategory,
     dropdownMenuCategory,
     kbdCategory,

packages/ui/cuicui/application-ui/context-menu/category.ts

@@ -0,0 +1,12 @@
+import { SquareMenuIcon } from "lucide-react";
+import type { CategoryType } from "@/lib/types/component";
+import { macOsContextMenuComponent } from "@/cuicui/application-ui/context-menu/mac-os-context-menu/component";
+
+export const contextMenuCategory: CategoryType = {
+  slug: "context-menu",
+  name: "Context Menu",
+  description: "Context menu components",
+  releaseDateCategory: new Date("2024-11-23"),
+  icon: SquareMenuIcon,
+  componentList: [macOsContextMenuComponent],
+};

packages/ui/cuicui/application-ui/context-menu/mac-os-context-menu/component.ts

@@ -0,0 +1,17 @@
+import { PreviewMacOsContextMenu } from "@/cuicui/application-ui/context-menu/mac-os-context-menu/preview.mac-os-context-menu";
+import type { ComponentType } from "@/lib/types/component";
+
+export const macOsContextMenuComponent: ComponentType = {
+  slug: "mac-os-context-menu",
+  name: "Mac OS Context Menu",
+  description: "Mac OS Context Menu",
+  sizePreview: "sm",
+  variantList: [
+    {
+      name: "Default",
+      component: PreviewMacOsContextMenu,
+      slugPreviewFile: "preview.mac-os-context-menu",
+      slugComponentFile: "mac-os-context-menu",
+    },
+  ],
+};

packages/ui/cuicui/application-ui/context-menu/mac-os-context-menu/mac-os-context-menu.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/cuicui/utils/cn/cn";
+
+const ContextMenu = ContextMenuPrimitive.Root;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-pointer gap-2 select-none items-center rounded-[4px] px-1.5 py-0.5 text-sm text-white/90 hover:bg-blue-600",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto size-4" />
+  </ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "rounded-[6px] z-50 min-w-32 text-sm p-1 text-white bg-[rgba(30,30,31,0.5)] shadow-[0px_20px_30px_0px_rgba(0,0,0,0.25),0px_0px_15px_0px_rgba(0,0,0,0.1),inset_0px_0px_0px_1px_rgba(255,255,255,0.075),0px_0px_0px_1px_rgba(0,0,0,0.5)] w-fit backdrop-blur-lg",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "rounded-[6px] min-w-32 text-sm p-1 text-white bg-[rgba(30,30,31,0.5)] backdrop-blur-xl shadow-[0px_20px_30px_0px_rgba(0,0,0,0.25),0px_0px_15px_0px_rgba(0,0,0,0.1),inset_0px_0px_0px_1px_rgba(255,255,255,0.075),0px_0px_0px_1px_rgba(0,0,0,0.5)] w-fit",
+        className,
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "truncate cursor-pointer whitespace-nowrap py-0.5 text-white/90 px-1.5 hover:bg-blue-600 rounded-[4px] focus:outline-none focus:ring-0",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "truncate flex items-center gap-3 cursor-pointer whitespace-nowrap py-0.5 text-white/90 px-1.5 hover:bg-blue-600 rounded-[4px]",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "truncate cursor-pointer whitespace-nowrap py-0.5 text-white/90 flex items-center gap-3 px-1.5 hover:bg-blue-600 rounded-[4px]",
+      className,
+    )}
+    {...props}
+  >
+    <span className="flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-1.5 py-0.5 text-sm font-semibold text-white/90",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("my-1 h-px bg-white/20", className)}
+    {...props}
+  />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest text-white/60", className)}
+      {...props}
+    />
+  );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

packages/ui/cuicui/application-ui/context-menu/mac-os-context-menu/preview.mac-os-context-menu.tsx

@@ -0,0 +1,77 @@
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "./mac-os-context-menu";
+
+export const PreviewMacOsContextMenu = () => {
+  return (
+    <div
+      style={{
+        backgroundImage:
+          "url('https://static1.squarespace.com/static/5e949a92e17d55230cd1d44f/t/6667b379b716e7212d986a57/1718072191450/Seq3x2.png?format=1500w')",
+      }}
+      className="w-full h-full p-10 bg-cover grid place-items-center"
+    >
+      <ContextMenu>
+        <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm z-10 text-white">
+          Right click here
+        </ContextMenuTrigger>
+        <ContextMenuContent className="w-64 z-20">
+          <ContextMenuItem inset={true}>
+            Back
+            <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem inset={true} disabled={true}>
+            Forward
+            <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem inset={true}>
+            Reload
+            <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuSub>
+            <ContextMenuSubTrigger inset={true}>
+              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={true}>
+            Show Bookmarks Bar
+            <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+          </ContextMenuCheckboxItem>
+          <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+          <ContextMenuSeparator />
+          <ContextMenuRadioGroup value="pedro">
+            <ContextMenuLabel inset={true}>People</ContextMenuLabel>
+            <ContextMenuSeparator />
+            <ContextMenuRadioItem value="pedro">
+              Pedro Duarte
+            </ContextMenuRadioItem>
+            <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+          </ContextMenuRadioGroup>
+        </ContextMenuContent>
+      </ContextMenu>
+    </div>
+  );
+};