@rovula/ui 0.0.22 → 0.0.24

package/dist/theme/presets/colors.js

@@ -81,6 +81,12 @@ module.exports = {
           "--base-color-popup-foreground"
         ),
         "base-stroke": withColorMixin("--base-color-workspace-stroke"),
+        "base-workspace-stroke": withColorMixin(
+          "--base-color-workspace-stroke"
+        ),
+        "base-guideline-stroke": withColorMixin(
+          "--base-color-guideline-stroke"
+        ),
 
         "common-white": withColorMixin("--common-white"),
         "common-black": withColorMixin("--common-black"),

package/dist/theme/themes/xspector/baseline.css

@@ -4,4 +4,5 @@
 @import url(transparent.css);
 @import url(typography.css);
 @import url(components/action-button.css);
-@import url(components/loading.css);
+@import url(components/loading.css);
+@import url(components/dropdown-menu.css);

package/dist/theme/themes/xspector/color.css

@@ -23,6 +23,7 @@
   --base-color-bg2: #282c31;
   --base-color-bg3: #d8d8d8;
   --base-color-workspace-stroke: #e2e2e2;
+  --base-color-guideline-stroke: #c5c5c5;
   --base-color-popup: #2d2e30;
   --base-color-popup-hightlight: #343638;
   --base-color-popup-curtain: rgba(0 0 0 / 0.6);
@@ -63,5 +64,5 @@
   --primary-foreground: var(--common-white);
   --secondary-foreground: var(--common-white);
 
-  --base-color-popup-foreground: var(--common-white);
+  --base-color-popup-foreground: var(--text-grey-light);
 }

package/dist/theme/themes/xspector/components/dropdown-menu.css

@@ -0,0 +1,28 @@
+:root[data-theme="xspector"] {
+  /* ------------------------------------------------------------------ */
+  /* DropdownMenu Component Tokens                                      */
+  /* ------------------------------------------------------------------ */
+  /* Naming Convention: --[component]-[state]-[property]                */
+  /* Element: [default, hover, selected, disabled]                      */
+  /* ------------------------------------------------------------------ */
+
+  --dropdown-menu-seperator-bg: var(--other-transparency-white-08);
+  --dropdown-menu-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);
+  
+  /* Default State */
+  --dropdown-menu-default-bg: transparent;
+  --dropdown-menu-default-text: inherit;
+  
+  /* Hover State */
+  --dropdown-menu-hover-bg: var(--other-transparency-white-08);
+  --dropdown-menu-hover-text: inherit;
+  
+  /* Selected State */
+  --dropdown-menu-selected-bg: var(--grey-grey-150);
+  --dropdown-menu-selected-text: inherit;
+  
+  /* Disabled State */
+  --dropdown-menu-disabled-bg: transparent;
+  --dropdown-menu-disabled-text: var(--grey-grey-140);
+  
+}

package/dist/theme/tokens/baseline.css

@@ -7,4 +7,5 @@
 @import url(components/button.css);
 @import url(components/action-button.css);
 @import url(components/loading.css);
-@import url(components/navbar.css);
+@import url(components/navbar.css);
+@import url(components/dropdown-menu.css);

package/dist/theme/tokens/color.css

@@ -23,6 +23,7 @@
   --base-color-bg2: #f5f5f5;
   --base-color-bg3: #d8d8d8;
   --base-color-workspace-stroke: #e2e2e2;
+  --base-color-guideline-stroke: #c5c5c5;
   --base-color-popup: #ffffff;
   --base-color-popup-hightlight: #343638;
   --base-color-popup-curtain: rgba(0 0 0 / 0.6);

package/dist/theme/tokens/components/dropdown-menu.css

@@ -0,0 +1,27 @@
+:root {
+  /* ------------------------------------------------------------------ */
+  /* DropdownMenu Component Tokens                                      */
+  /* ------------------------------------------------------------------ */
+  /* Naming Convention: --[component]-[state]-[property]                */
+  /* Element: [default, hover, selected, disabled]                      */
+  /* ------------------------------------------------------------------ */
+  
+  --dropdown-menu-seperator-bg: var(--base-color-workspace-stroke);
+  --dropdown-menu-shadow: 0px 2px 24px 0px rgba(145, 158, 171, 0.24);
+
+  /* Default State */
+  --dropdown-menu-default-bg: transparent;
+  --dropdown-menu-default-text: inherit;
+
+  /* Hover State */
+  --dropdown-menu-hover-bg: var(--state-color-primary-hover-bg);
+  --dropdown-menu-hover-text: inherit;
+
+  /* Selected State */
+  --dropdown-menu-selected-bg: transparent;
+  --dropdown-menu-selected-text: inherit;
+
+  /* Disabled State */
+  --dropdown-menu-disabled-bg: transparent;
+  --dropdown-menu-disabled-text: var(--state-color-disable-outline);
+}

package/dist/theme/tokens/typography.css

@@ -147,6 +147,27 @@
   --small5-style: normal;
   --small5-line-height: 12px;
   --small5-line-height-rem: 0.75rem;
+  --small6-family: "Montserrat";
+  --small6-size: 10px;
+  --small6-size-rem: 0.625rem;
+  --small6-weight: 600;
+  --small6-style: normal;
+  --small6-line-height: 12px;
+  --small6-line-height-rem: 0.75rem;
+  --small7-family: "Montserrat";
+  --small7-size: 8px;
+  --small7-size-rem: 0.5rem;
+  --small7-weight: 600;
+  --small7-style: normal;
+  --small7-line-height: 10px;
+  --small7-line-height-rem: 0.625rem;
+  --small8-family: "Montserrat";
+  --small8-size: 8px;
+  --small8-size-rem: 0.5rem;
+  --small8-weight: 700;
+  --small8-style: normal;
+  --small8-line-height: 10px;
+  --small8-line-height-rem: 0.625rem;
   --label-label1-family: "Montserrat";
   --label-label1-size: 12px;
   --label-label1-size-rem: 0.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -15,14 +15,17 @@
     "public": "npm run build:package && npm publish --access=public",
     "storybook:serve-css": "npx tailwindcss -i ./src/theme/global.css -o ./dist/src/theme/global.css",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_cee098dd3b9b3ee"
   },
   "files": [
     "dist/**/*",
     "src/**/*"
   ],
   "keywords": [],
-  "author": "NuttapongSa",
+  "author": {
+    "name": "NuttapongSa"
+  },
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.24.5",
@@ -50,6 +53,7 @@
     "@types/node": "^20.12.12",
     "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
+    "chromatic": "^11.7.1",
     "copyfiles": "^2.4.1",
     "css-loader": "^7.1.2",
     "postcss": "^8.4.38",
@@ -72,6 +76,7 @@
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.1.3",

package/src/components/Button/Button.tsx

@@ -1,10 +1,7 @@
-import React, { FC, ReactElement, forwardRef } from "react";
+import React, { ReactElement, forwardRef } from "react";
 import { buttonVariants } from "./Button.styles";
 import { cn } from "@/utils/cn";
-import { title } from "process";
-import { ref } from "yup";
 import Loading from "../Loading/Loading";
-import { EyeIcon } from "@heroicons/react/16/solid";
 
 export type ButtonProps = {
   title?: string;

package/src/components/Collapsible/Collapsible.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Ref, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { CollapsibleProvider, useCollapsible } from "./CollapsibleContext";
 import { cn } from "@/utils/cn";

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,394 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./DropdownMenu";
+import Button from "../Button/Button";
+import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu";
+import Icon from "../Icon/Icon";
+import ActionButton from "../ActionButton/ActionButton";
+
+const meta = {
+  title: "Components/DropdownMenu",
+  component: DropdownMenu,
+  // tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem disabled>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>
+                <Icon type="heroicons" name="check" className="size-4" />
+                Option Description
+              </DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const WithIcon = {
+  args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Open</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4"
+                />
+                <span>Option Description</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4"
+                />
+                <span>Option Description</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem disabled>
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4"
+                />
+                <span>Option Description</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const WithLabel = {
+  args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Open</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>Sort by</DropdownMenuLabel>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Checkboxes = {
+  args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    type Checked = DropdownMenuCheckboxItemProps["checked"];
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Open</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuCheckboxItem>
+                Option Description
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem checked>
+                Option Description
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem disabled>
+                Option Description
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem checked disabled>
+                Option Description
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem>
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4"
+                />
+                <span>Option Description</span>
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem checked>
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4"
+                />
+                <span>Option Description</span>
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem disabled>
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4"
+                />
+                <span>Option Description</span>
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem checked disabled>
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4"
+                />
+                <span>Option Description</span>
+              </DropdownMenuCheckboxItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const SubMenu = {
+  args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuLabel>My Account</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>Profile</DropdownMenuItem>
+              <DropdownMenuItem>Billing</DropdownMenuItem>
+              <DropdownMenuItem>Team</DropdownMenuItem>
+              <DropdownMenuItem>Subscription</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                    <span>Invite users</span>
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent>
+                      <DropdownMenuItem>
+                        <span>Email</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <span>Message</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem>
+                        <span>More...</span>
+                      </DropdownMenuItem>
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+                <DropdownMenuCheckboxItem>Panel</DropdownMenuCheckboxItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const OnIcon = {
+  args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Icon type="heroicons" name="ellipsis-vertical" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const AsChild = {
+  args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <ActionButton variant="icon">
+                <Icon type="heroicons" name="ellipsis-vertical" />
+              </ActionButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Position = {
+  args: {
+    side: "bottom",
+    align: "center",
+    sideOffset: 5,
+    alignOffset: 0,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <ActionButton variant="icon">
+                <Icon type="heroicons" name="ellipsis-vertical" />
+              </ActionButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              {...args}
+              side="bottom" // controls the side (top, bottom, left, right)
+              align="start" // controls the alignment (start, center, end)
+              sideOffset={5} // offset from the side
+              alignOffset={0} // offset from the alignment
+            >
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;