pentatrion-design 0.0.1

package/src/components/badge/Badge.tsx

@@ -0,0 +1,70 @@
+import { ReactNode } from "react";
+import { ThemeColor } from "~/types.d";
+import clsx from "clsx";
+import { buttonVariants } from "../button/Button";
+import Href from "../href/Href";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
+interface Props {
+  children: ReactNode;
+  className?: string;
+  tooltip?: string;
+  url?: string;
+  color?: ThemeColor;
+  onClick?: () => void;
+  onRemove?: () => void;
+}
+
+export default function Badge({
+  children,
+  className,
+  onRemove,
+  onClick,
+  tooltip,
+  url,
+  color = "yellow",
+}: Props) {
+  const badge = (
+    <span
+      className={clsx(
+        "ll-badge",
+        "text-xs rounded-full w-fit shadow overflow-hidden inline-flex items-stretch",
+        buttonVariants.variant.contained(color),
+        // badgeVariants.color[color],
+        // `variant-solid-${color}`,
+        // `text-${color}-4`,
+        className,
+      )}
+    >
+      {onClick ? (
+        <button className="px-2" onClick={onClick}>
+          {children}
+        </button>
+      ) : (
+        <span className="px-2">{children}</span>
+      )}
+      {onRemove && (
+        <button className="remove rounded-r-full pr-1 pl-0.5" onClick={onRemove}>
+          <i className="fe-cancel"></i>
+        </button>
+      )}
+    </span>
+  );
+  const wrappedBadge = url ? (
+    <Href href={url} ghost={true}>
+      {badge}
+    </Href>
+  ) : (
+    badge
+  );
+
+  if (!tooltip) {
+    return wrappedBadge;
+  }
+
+  return (
+    <Tooltip>
+      <TooltipContent>{tooltip}</TooltipContent>
+      <TooltipTrigger asChild={true}>{wrappedBadge}</TooltipTrigger>
+    </Tooltip>
+  );
+}

package/src/components/button/Button.stories.tsx

@@ -0,0 +1,189 @@
+import type { Meta, StoryObj, ReactRenderer } from "@storybook/react";
+import { PartialStoryFn } from "@storybook/types";
+
+import { Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow } from "../table";
+
+import { Button } from "../button";
+
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  argTypes: {
+    variant: {
+      control: {
+        type: "select",
+      },
+      options: ["contained", "light", "outlined", "text", "ghost"],
+    },
+    size: {
+      control: {
+        type: "select",
+      },
+      options: ["small", "medium", "large"],
+    },
+    color: {
+      control: {
+        type: "select",
+      },
+      options: ["yellow", "gray", "red", "orange", "green", "blue"],
+    },
+  },
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="bg-gray-1 p-4">
+        <Story />
+      </div>
+    ),
+  ] as ((story: PartialStoryFn<ReactRenderer, any>) => JSX.Element)[],
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    variant: "contained",
+    size: "medium",
+    color: "yellow",
+    children: "My button",
+    loading: undefined,
+    disabled: false,
+    fullWidth: false,
+    selected: false,
+    withRipple: false,
+  },
+};
+
+const variants = ["contained", "light", "outlined", "text", "ghost"] as const;
+const colors = ["yellow", "gray", "red", "orange", "green", "blue"] as const;
+
+export const Context = () => {
+  return (
+    <div>
+      hello
+      <a href="#">link</a>
+      world
+      <button>normal button</button>
+      <span tabIndex={0}>tab</span>
+      index
+      <h3 className="mt-8">Sizes</h3>
+      <div className="flex gap-2 items-center">
+        <Button size="small">small</Button>
+        <Button size="medium">medium</Button>
+        <Button size="large">large</Button>
+      </div>
+      <h3 className="mt-8">Variants</h3>
+      <div className="flex gap-2">
+        <Button variant="contained">solid</Button>
+        <Button variant="light">light</Button>
+        <Button variant="outlined">outlined</Button>
+        <Button variant="text">text</Button>
+        <Button variant="ghost">ghost</Button>
+      </div>
+      <h3 className="mt-8">States</h3>
+      <div className="flex gap-2 items-center">
+        <Button disabled={true}>disabled</Button>
+        <Button loading={false}>isLoading false</Button>
+        <Button loading={true}>isLoading true</Button>
+      </div>
+      <h3 className="mt-8">Default state</h3>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHeaderCell>
+              <></>
+            </TableHeaderCell>
+            {colors.map((color) => (
+              <TableHeaderCell key={color}>{color}</TableHeaderCell>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {variants.map((variant) => (
+            <TableRow key={variant}>
+              <TableCell>{variant}</TableCell>
+              {colors.map((color) => (
+                <TableCell key={color} label={color}>
+                  <div className="flex gap-2">
+                    <Button variant={variant} color={color}>
+                      Lorem
+                    </Button>
+                  </div>
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <h3 className="mt-8">Only Selected state</h3>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHeaderCell>
+              <></>
+            </TableHeaderCell>
+            {colors.map((color) => (
+              <TableHeaderCell key={color}>{color}</TableHeaderCell>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {variants.map((variant) => (
+            <TableRow key={variant}>
+              <TableCell>{variant}</TableCell>
+              {colors.map((color) => (
+                <TableCell key={color} label={color}>
+                  <div className="flex gap-2">
+                    <Button selected variant={variant} color={color}>
+                      Lorem
+                    </Button>
+                  </div>
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <h3 className="mt-8">Icons</h3>
+      <div className="flex items-center gap-4 mb-4">
+        <Button icon variant="contained" color="gray">
+          <i className="fe-cancel"></i>
+        </Button>
+        <Button icon variant="outlined" color="gray">
+          <i className="fe-cancel"></i>
+        </Button>
+        <Button icon variant="text" color="gray">
+          <i className="fe-cancel"></i>
+        </Button>
+        <Button icon variant="ghost" color="gray">
+          <i className="fe-cancel"></i>
+        </Button>
+        <Button variant="contained" color="gray" icon>
+          <i className="fe-cancel"></i>
+          <span>Cancel</span>
+        </Button>
+      </div>
+      <div className="flex items-center gap-4 mb-4">
+        <Button icon variant="contained">
+          <i className="fe-cancel"></i>
+        </Button>
+        <Button icon variant="outlined">
+          <i className="fe-cancel"></i>
+        </Button>
+        <Button icon variant="text">
+          <i className="fe-cancel"></i>
+        </Button>
+        <Button icon variant="ghost">
+          <i className="fe-cancel"></i>
+        </Button>
+        <Button variant="contained" icon>
+          <i className="fe-cancel"></i>
+          <span>Cancel</span>
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/button/Button.test.tsx

@@ -0,0 +1,20 @@
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { Button } from ".";
+
+afterEach(cleanup);
+
+describe("<Button />", () => {
+  it("forwards className", () => {
+    const { getByRole } = render(<Button className="custom" />);
+    expect(getByRole("button")).toHaveClass("custom");
+  });
+
+  it("handle click", () => {
+    const mockOnClick = vi.fn();
+    const { getByRole } = render(<Button onClick={mockOnClick}>Click Me</Button>);
+
+    fireEvent.click(getByRole("button"));
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/button/Button.tsx

@@ -0,0 +1,200 @@
+import { ComponentPropsWithRef, forwardRef, useImperativeHandle, useRef } from "react";
+import clsx from "clsx";
+import { ThemeColor } from "~/types.d";
+import Loader from "../loader/Loader";
+import { useRipple } from "~/hooks";
+
+export interface ButtonProps extends ComponentPropsWithRef<"button"> {
+  withRipple?: boolean;
+
+  variant?: "contained" | "light" | "outlined" | "text" | "ghost";
+
+  size?: "small" | "medium" | "large" | "custom";
+
+  color?: ThemeColor;
+
+  children?: React.ReactNode;
+
+  /**
+   * undefined: hidden
+   * false: invisible
+   * true: visible
+   */
+  loading?: boolean;
+
+  disabled?: boolean;
+
+  fullWidth?: boolean;
+
+  focusable?: boolean;
+
+  /**
+   * For a selected item inside a group.
+   */
+  selected?: boolean;
+
+  icon?: boolean;
+}
+
+export const buttonVariants = {
+  size(icon: boolean, size: "small" | "medium" | "large" | "custom") {
+    if (size === "custom") {
+      return false;
+    }
+    switch (size) {
+      case "small":
+        return clsx(!icon && "px-2", "text-sm h-6");
+      case "medium":
+        return !icon && "px-4 h-8";
+      case "large":
+        return !icon && "px-8 h-12";
+    }
+  },
+  variant: {
+    contained(color: ThemeColor) {
+      return clsx(
+        "shadow hover:shadow-md focus:shadow-md active-full:shadow-lg outline-offset-0",
+        {
+          yellow:
+            "text-yellow-text bg-yellow-3 hover:bg-yellow-4 active-full:bg-yellow-5 focus-visible:outline-yellow-5",
+          gray: "text-gray-text bg-gray-3 hover:bg-gray-4 active-full:bg-gray-5 focus-visible:outline-gray-5",
+          red: "text-red-text bg-red-3 hover:bg-red-4 active-full:bg-red-5 focus-visible:outline-red-5",
+          orange:
+            "text-orange-text bg-orange-3 hover:bg-orange-4 active-full:bg-orange-5 focus-visible:outline-orange-5",
+          green:
+            "text-green-text bg-green-3 hover:bg-green-4 active-full:bg-green-5 focus-visible:outline-green-5",
+          blue: "text-blue-text bg-blue-3 hover:bg-blue-4 active-full:bg-blue-5 focus-visible:outline-blue-5",
+        }[color],
+      );
+    },
+    light(color: ThemeColor) {
+      return clsx(
+        "shadow hover:shadow-md focus:shadow-md active-full:shadow-lg outline-offset-0 bg-gray-0",
+        {
+          yellow:
+            "text-gray-text hover:text-yellow-text hover:bg-yellow-3 active-full:bg-yellow-4 dark:active-full:bg-yellow-4/50 focus-visible:outline-yellow-4",
+          gray: "text-gray-text hover:text-gray-text hover:bg-gray-3 active-full:bg-gray-4 dark:active-full:bg-gray-4/50 focus-visible:outline-gray-4",
+          red: "text-gray-text hover:text-red-text hover:bg-red-3 active-full:bg-red-4 dark:active-full:bg-red-4/50 focus-visible:outline-red-4",
+          orange:
+            "text-gray-text hover:text-orange-text hover:bg-orange-3 active-full:bg-orange-4 dark:active-full:bg-orange-4/50 focus-visible:outline-orange-4",
+          green:
+            "text-gray-text hover:text-green-text hover:bg-green-3 active-full:bg-green-4 dark:active-full:bg-green-4/50 focus-visible:outline-green-4",
+          blue: "text-gray-text hover:text-blue-text hover:bg-blue-3 active-full:bg-blue-4 dark:active-full:bg-blue-4/50 focus-visible:outline-blue-4",
+        }[color],
+      );
+    },
+    outlined(color: ThemeColor) {
+      return clsx(
+        "bg-gray-0 text-gray-7 outline outline-2 outline-offset-[-2px] focus-visible:ring-2 active-full:shadow-md",
+        {
+          yellow:
+            "hover:bg-yellow-1/50 active-full:bg-yellow-2/50 outline-yellow-5 focus-visible:ring-yellow-4",
+          gray: "hover:bg-gray-1 active-full:bg-gray-2 outline-gray-5 focus-visible:ring-gray-4",
+          red: "hover:bg-red-1/50 active-full:bg-red-2/50 outline-red-5 focus-visible:ring-red-4",
+          orange:
+            "hover:bg-orange-1/50 active-full:bg-orange-2/50 outline-orange-5 focus-visible:ring-orange-4",
+          green:
+            "hover:bg-green-1/50 active-full:bg-green-2/50 outline-green-5 focus-visible:ring-green-4",
+          blue: "hover:bg-blue-1/50 active-full:bg-blue-2/50 outline-blue-5 focus-visible:ring-blue-4",
+        }[color],
+      );
+    },
+    text(color: ThemeColor) {
+      return clsx(
+        "bg-transparent active-full:shadow-sm outline-offset-0",
+        {
+          yellow:
+            "hover:bg-yellow-1/50 active-full:bg-yellow-2/25 text-yellow-4 hover:text-yellow-5",
+          gray: "hover:bg-gray-1 active-full:bg-gray-2 text-gray-5 hover:text-gray-6 active-full:text-gray-7",
+          red: "hover:bg-red-1/50 active-full:bg-red-2/50 text-red-4 hover:text-red-5",
+          orange:
+            "hover:bg-orange-1/50 active-full:bg-orange-2/50 text-orange-4 hover:text-orange-5",
+          green: "hover:bg-green-1/50 active-full:bg-green-2/50 text-green-4 hover:text-green-5",
+          blue: "hover:bg-blue-1/50 active-full:bg-blue-2/50 text-blue-4 hover:text-blue-5",
+        }[color],
+      );
+    },
+    ghost(color: ThemeColor) {
+      return clsx(
+        "bg-transparent outline-offset-0",
+        {
+          yellow: "text-yellow-4 hover:text-yellow-5",
+          gray: "text-gray-5 hover:text-gray-6 active-full:text-gray-7",
+          red: "text-red-4 hover:text-red-5",
+          orange: "text-orange-4 hover:text-orange-5",
+          green: "text-green-4 hover:text-green-5",
+          blue: "text-blue-4 hover:text-blue-5",
+        }[color],
+      );
+    },
+  },
+};
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      withRipple = true,
+      variant = "contained",
+      loading,
+      color = "yellow",
+      size = "medium",
+      focusable = true,
+      fullWidth,
+      className,
+      disabled,
+      children,
+      selected = false,
+      icon = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const inputRef = useRef<HTMLButtonElement>(null);
+
+    useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
+      ref,
+      () => inputRef.current,
+    );
+
+    const notClickable = loading || disabled;
+
+    const ripples = useRipple(inputRef);
+
+    // check if overflow-clip-margin: 1px; is needed ?
+    return (
+      <button
+        tabIndex={focusable ? 0 : -1}
+        role="button"
+        ref={inputRef}
+        className={clsx(
+          "rounded-2xl cursor-pointer relative overflow-clip focus-visible:outline focus-visible:outline-2 no-underline border-0 inline-flex items-center transition-color-shadow duration-300 leading-5",
+          className,
+          buttonVariants.size(icon, size),
+          buttonVariants.variant[variant](color),
+          icon && "justify-center min-w-8 h-8 [&_i]:w-8 [&_:last-child:not(i,img)]:pr-4",
+          fullWidth && "w-full",
+          selected && "active",
+          notClickable && "disabled",
+        )}
+        data-variant={variant}
+        disabled={disabled}
+        aria-busy={loading}
+        {...props}
+      >
+        {!notClickable && withRipple && ripples}
+        {children}
+        {loading !== undefined && (
+          <span className="">
+            <Loader
+              color={color}
+              size="small"
+              className={clsx("ml-2 -mr-2", !loading && "invisible")}
+            />
+          </span>
+        )}
+      </button>
+    );
+  },
+);
+
+export default Button;

package/src/components/button/ButtonGroup.stories.tsx

@@ -0,0 +1,46 @@
+import { ThemeColor } from "~/types.d";
+import { Meta } from "@storybook/react";
+import { useState } from "react";
+
+import { Button, ButtonGroup } from "../button";
+
+const meta = {
+  title: "Components/ButtonGroup",
+  component: ButtonGroup,
+} satisfies Meta<typeof ButtonGroup>;
+export default meta;
+
+const buttonLabels = ["one", "two", "three"];
+const colors: ThemeColor[] = ["yellow", "gray", "blue", "red"];
+const variants = ["contained", "light", "outlined", "text"] as const;
+const directions = ["horizontal", "vertical"] as const;
+export const Context = () => {
+  const [val, setVal] = useState("one");
+  return (
+    <div className="grid grid-cols-1 gap-8">
+      {directions.map((direction) => (
+        <div className="flex flex-col gap-4">
+          {variants.map((variant) => (
+            <div key={variant} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
+              {colors.map((color) => (
+                <ButtonGroup key={color} direction={direction}>
+                  {buttonLabels.map((label) => (
+                    <Button
+                      variant={variant}
+                      color={color}
+                      key={label}
+                      selected={val === label}
+                      onClick={() => setVal(label)}
+                    >
+                      {label}
+                    </Button>
+                  ))}
+                </ButtonGroup>
+              ))}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/button/ButtonGroup.tsx

@@ -0,0 +1,29 @@
+import { ComponentProps, ReactNode } from "react";
+import clsx from "clsx";
+
+interface Props extends ComponentProps<"div"> {
+  children: ReactNode;
+  direction?: "horizontal" | "vertical";
+}
+
+const buttonGroupVariants = {
+  horizontal:
+    "[&_:not(:first-child)]:rounded-bl-none [&_:not(:last-child)]:rounded-tr-none [&_[data-variant='outlined']]:-mx-[1px]",
+  vertical:
+    "flex flex-col [&_:not(:first-child)]:rounded-tr-none [&_:not(:last-child)]:rounded-bl-none [&_[data-variant='outlined']]:-my-[1px]",
+};
+
+export default function ButtonGroup({ children, className, direction = "horizontal" }: Props) {
+  return (
+    <div
+      className={clsx(
+        "ll-button-group [&_:not(:first-child)]:rounded-tl-none [&_:not(:last-child)]:rounded-br-none",
+        buttonGroupVariants[direction],
+        `direction-${direction}`,
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export { default as Button, type ButtonProps, buttonVariants } from "./Button";
+export { default as ButtonGroup } from "./ButtonGroup";

package/src/components/card/Card.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta } from "@storybook/react";
+import { cardConfig } from "./config";
+
+const meta = {
+  title: "Components/Card",
+} satisfies Meta;
+export default meta;
+
+export const Basic = () => {
+  return <div className={cardConfig.item}>Hello world</div>;
+};
+
+export const Multiple = () => {
+  return (
+    <div className={cardConfig.group}>
+      <div className={cardConfig.item}>Card 1</div>
+      <div className={cardConfig.item}>Card 2</div>
+      <div className={cardConfig.item}>Card 3</div>
+    </div>
+  );
+};

package/src/components/card/config.ts

@@ -0,0 +1,4 @@
+export const cardConfig = {
+  item: "p-2 bg-gray-1 rounded-2xl",
+  group: "grid grid-cols-2 gap-4",
+};

package/src/components/card/index.ts

@@ -0,0 +1 @@
+export { cardConfig } from "./config";

package/src/components/code/Code.tsx

@@ -0,0 +1,15 @@
+import clsx from "clsx";
+import { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+
+export default function Code({ children, className }: Props) {
+  return (
+    <code className={clsx("px-1 rounded m-[1px] bg-gray-1 border border-gray-2", className)}>
+      {children}
+    </code>
+  );
+}

package/src/components/context-menu/ContextMenu.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta } from "@storybook/react";
+import { ContextMenu, ContextMenuItem } from ".";
+import { action } from "@storybook/addon-actions";
+
+const onChangeAction = action("onChange");
+
+const meta = {
+  title: "Components/ContextMenu",
+} satisfies Meta;
+export default meta;
+
+export const Basic = () => {
+  return (
+    <ContextMenu>
+      <ContextMenuItem label="Back" onClick={onChangeAction} />
+      <ContextMenuItem label="Forward" />
+      <ContextMenuItem label="Reload" disabled />
+      <ContextMenuItem label="Save As..." />
+      <ContextMenuItem label="Print" />
+    </ContextMenu>
+  );
+};