pentatrion-design 0.0.1

package/src/components/select/useSelectContext.ts

@@ -0,0 +1,19 @@
+import { useInteractions } from "@floating-ui/react";
+import { createContext, useContext } from "react";
+
+interface SelectContext {
+  activeIndex: number | null;
+  selectedIndex: number | null;
+  getItemProps: ReturnType<typeof useInteractions>["getItemProps"];
+  handleSelect: (index: number | null) => void;
+}
+
+export const SelectContext = createContext<SelectContext | null>(null);
+
+export default function useSelect() {
+  const context = useContext(SelectContext);
+  if (context === null) {
+    throw new Error("Select components must be wrapped in <Select>");
+  }
+  return context;
+}

package/src/components/select/util.ts

@@ -0,0 +1,12 @@
+export function isValidMultiMode<V>(value: any, multiple: boolean): value is V & any[] {
+  if (!multiple) {
+    return false;
+  }
+
+  if (value !== undefined && !Array.isArray(value)) {
+    console.warn("[Select] Incorrect usage : if using multiple mode, value must be an array");
+    return false;
+  }
+
+  return true;
+}

package/src/components/snack/Snack.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta } from "@storybook/react";
+import Snack from "./Snack";
+const meta = {
+  title: "Components/Snack",
+  component: Snack,
+} satisfies Meta<typeof Snack>;
+export default meta;
+
+export const Basic = () => {
+  return (
+    <div className="ll-snack-bar fixed bottom-0 left-0 right-0 z-notification">
+      <div className="snack-bar-inner mb-4 mx-4 flex flex-col gap-4 items-center">
+        <Snack id={"a"} content="Hello world" expiration={-1} color="yellow" canClose={true} />
+        <Snack
+          id={"b"}
+          content="Basic notification"
+          expiration={-1}
+          color="yellow"
+          canClose={false}
+          withLoader={true}
+        />
+        <Snack id={"c"} content="Error message" expiration={-1} color="red" />
+        <Snack id={"c"} content="Warning message" expiration={-1} color="orange" />
+        <Snack
+          id={"c"}
+          content="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium fuga totam facilis veritatis eaque ea ad laboriosam debitis accusantium, quos placeat magni architecto enim tempore, unde quae! Unde, voluptatum sint?"
+          expiration={-1}
+          color="blue"
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/snack/Snack.tsx

@@ -0,0 +1,47 @@
+import clsx from "clsx";
+import { useEffect } from "react";
+
+import { Button } from "../button";
+import { useEventCallback } from "~/hooks";
+import { Dialog } from "../dialog";
+import Loader from "../loader/Loader";
+import { Message } from "~/types.d";
+
+export type SnackProps = Partial<Message> & {
+  onRemove?: () => void;
+};
+
+export default function Snack({
+  expiration = 5000,
+  content = "",
+  color = "yellow",
+  withLoader = false,
+  canClose = false,
+  onRemove = () => {},
+}: SnackProps) {
+  const onRemoveStable = useEventCallback(onRemove);
+
+  useEffect(() => {
+    if (expiration === -1) {
+      return;
+    }
+
+    const timeoutId = setTimeout(() => onRemoveStable(), expiration);
+    return () => void clearTimeout(timeoutId);
+  }, [onRemoveStable, expiration]);
+
+  return (
+    <Dialog className={clsx("animate-fade-in", "ll-snack")} placement="top" color={color}>
+      <div className="w-fit min-w-60 px-2 py-1 flex items-center">
+        <span className="pr-4 flex-1">{content}</span>
+        {withLoader && <Loader size="small" color="gray" />}
+
+        {canClose && (
+          <Button icon variant="text" color="gray" onClick={onRemove}>
+            <i className="fe-cancel"></i>
+          </Button>
+        )}
+      </div>
+    </Dialog>
+  );
+}

package/src/components/sortable/Sortable.stories.tsx

@@ -0,0 +1,98 @@
+import { Meta } from "@storybook/react";
+import { useState } from "react";
+import { ItemInterface, ReactSortable } from "react-sortablejs";
+import { Button } from "../button";
+import { Input } from "../input";
+import { Sortable } from ".";
+
+const meta = {
+  title: "Components/Sortable",
+  component: Sortable,
+} satisfies Meta;
+export default meta;
+
+export interface Item extends ItemInterface {
+  id: number;
+  name: string;
+}
+
+const data: Item[] = [
+  {
+    id: 0,
+    name: "Rare Wind",
+  },
+  {
+    id: 1,
+    name: "Saint Petersburg",
+  },
+  {
+    id: 2,
+    name: "Deep Blue",
+  },
+  {
+    id: 3,
+    name: "Ripe Malinka",
+  },
+  {
+    id: 4,
+    name: "Near Moon",
+  },
+];
+
+const twClasses = {
+  item: "row-item rounded-2xl p-2 flex items-center [&.sortable-chosen]:shadow",
+};
+
+/**
+ * ReactSortable mutate state, it can't be used with redux.
+ * see: https://github.com/SortableJS/react-sortablejs/issues/237
+ */
+export const BasicOriginal = () => {
+  const [items, setItems] = useState(data);
+
+  return (
+    <ReactSortable list={items} setList={setItems} animation={200} handle=".handle">
+      {items.map((item) => (
+        <div key={item.id} className={twClasses.item}>
+          <Button icon variant="text" color="gray" className="handle cursor-row-resize mr-2">
+            <i className="fe-braille"></i>
+          </Button>
+          {item.name}
+        </div>
+      ))}
+    </ReactSortable>
+  );
+};
+
+export const Basic = () => {
+  const [items, setItems] = useState(data);
+
+  return (
+    <Sortable list={items} setList={setItems} animation={200} handle=".handle">
+      {items.map((item) => (
+        <div key={item.id} className={twClasses.item}>
+          <Button icon variant="text" color="gray" className="handle cursor-row-resize mr-2">
+            <i className="fe-braille"></i>
+          </Button>
+          {item.name}
+        </div>
+      ))}
+    </Sortable>
+  );
+};
+
+export const WithInputs = () => {
+  const [items, setItems] = useState(data);
+  return (
+    <Sortable list={items} setList={setItems} animation={200} handle=".handle">
+      {items.map((item) => (
+        <div key={item.id} className={twClasses.item}>
+          <Button icon variant="text" color="gray" className="handle cursor-row-resize mr-2">
+            <i className="fe-braille"></i>
+          </Button>
+          <Input className="flex-1" defaultValue={item.name} />
+        </div>
+      ))}
+    </Sortable>
+  );
+};

package/src/components/sortable/Sortable.tsx

@@ -0,0 +1,37 @@
+import { arrayEquals } from "~/lib";
+import { useMemo } from "react";
+import {
+  ItemInterface,
+  ReactSortable,
+  ReactSortableProps,
+  Sortable as SortableLib,
+  Store,
+} from "react-sortablejs";
+
+export default function Sortable<T extends ItemInterface>({
+  children,
+  list,
+  setList,
+  ...rest
+}: ReactSortableProps<T>) {
+  const mutableList = useMemo(() => {
+    return list.map((item) => ({ ...item }));
+  }, [list]);
+
+  function handleList(updatedList: T[], sortable: SortableLib | null, store: Store) {
+    if (
+      !arrayEquals(
+        updatedList.map((l) => l.id),
+        mutableList.map((l) => l.id),
+      )
+    ) {
+      setList(updatedList, sortable, store);
+    }
+  }
+
+  return (
+    <ReactSortable list={mutableList} setList={handleList} {...rest}>
+      {children}
+    </ReactSortable>
+  );
+}

package/src/components/sortable/index.ts

@@ -0,0 +1,2 @@
+export type * from "./types.d";
+export { default as Sortable } from "./Sortable";

package/src/components/sortable/types.d.ts

@@ -0,0 +1,12 @@
+export interface SortableItem<I> {
+  /** The unique id associated with your item. It's recommended this is the same as the key prop for your list item. */
+  id: string | number;
+  /** When true, the item is selected using MultiDrag */
+  selected?: boolean;
+  /** When true, the item is deemed "chosen", which basically just a mousedown event. */
+  chosen?: boolean;
+  /** When true, it will not be possible to pick this item up in the list. */
+  filtered?: boolean;
+
+  data: I;
+}

package/src/components/steps/Step.tsx

@@ -0,0 +1,41 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import clsx from "clsx";
+interface Props extends ComponentPropsWithoutRef<"li"> {
+  icon?: ReactNode;
+  status?: "done" | "current" | "todo";
+
+  /** choose center if content height is less than ll-circle height */
+  align?: "start" | "center";
+
+  markerClassName?: string;
+  contentClassName?: string;
+}
+
+export default function Step({
+  status = "todo",
+  className,
+  children,
+  markerClassName,
+  contentClassName,
+  align = "start",
+  icon = null,
+  ...rest
+}: Props) {
+  return (
+    <li className={clsx(["ll-step", `status-${status}`, `align-${align}`, className])} {...rest}>
+      <div className="marker-container">
+        <div
+          className={clsx([
+            "marker",
+            "relative z-[1] inline-flex items-center justify-center rounded-full ",
+            ["done", "current"].includes(status) && "active",
+            markerClassName,
+          ])}
+        >
+          {icon}
+        </div>
+      </div>
+      <div className={clsx(["content", contentClassName])}>{children}</div>
+    </li>
+  );
+}

package/src/components/steps/Steps.stories.tsx

@@ -0,0 +1,141 @@
+import { Meta } from "@storybook/react";
+import Steps from "./Steps";
+import Step from "./Step";
+import { Input } from "../input";
+import { useState } from "react";
+import { ReactSortable } from "react-sortablejs";
+
+const meta = {
+  title: "Components/Steps",
+  component: Steps,
+} satisfies Meta<typeof Steps>;
+
+export default meta;
+
+export const Context = () => {
+  return (
+    <div className="grid grid-cols-1 gap-8">
+      <Steps direction="horizontal" lineStyle="dotted">
+        <Step icon="A" status="done">
+          <h4 className="text-sm">Step 1</h4>
+          <p className="text-xs">Some desc text</p>
+        </Step>
+        <Step icon="B" status="current">
+          <h4 className="text-sm">Step 2</h4>
+        </Step>
+        <Step icon="C" status="todo">
+          <h4 className="text-sm">Step 3</h4>
+          <p className="text-xs">Another description</p>
+        </Step>
+        <Step icon="D" status="todo">
+          <h4 className="text-sm">Step 4</h4>
+        </Step>
+      </Steps>
+      <Steps direction="horizontal" markerType="bullet">
+        <Step status="done">
+          <h4 className="text-sm">Step 1</h4>
+          <p className="text-xs">Some desc text</p>
+        </Step>
+        <Step status="current">
+          <h4 className="text-sm">Step 2</h4>
+        </Step>
+        <Step status="todo">
+          <h4 className="text-sm">Step 3</h4>
+          <p className="text-xs">Another description</p>
+        </Step>
+        <Step status="todo">
+          <h4 className="text-sm">Step 4</h4>
+        </Step>
+      </Steps>
+      <Steps lineStyle="dotted">
+        <Step icon="A" status="done">
+          <h4 className="text-sm">Step 1</h4>
+          <p className="text-xs">Some desc text</p>
+        </Step>
+        <Step icon="B" status="current" align="center">
+          <Input defaultValue="Hello world" />
+        </Step>
+        <Step icon="C" status="todo">
+          <h4 className="text-sm">Step 3</h4>
+          <p className="text-xs">
+            Some desc text
+            <br />
+            with much more content
+          </p>
+        </Step>
+        <Step icon="D" status="todo">
+          <Input defaultValue="Hello world" />
+        </Step>
+      </Steps>
+      <Steps markerType="bullet" lineStyle="dotted">
+        <Step status="done">
+          <h4 className="text-sm">Step 1</h4>
+          <p className="text-xs">Some desc text</p>
+        </Step>
+        <Step icon="B" status="current">
+          <Input defaultValue="Hello world" />
+        </Step>
+        <Step icon="C" status="todo">
+          <Input defaultValue="Hello world" />
+        </Step>
+        <Step icon="D" status="todo">
+          <Input defaultValue="Hello world" />
+        </Step>
+      </Steps>
+    </div>
+  );
+};
+
+interface Item {
+  id: number;
+  name: string;
+}
+
+const data: Item[] = [
+  {
+    id: 0,
+    name: "Rare Wind",
+  },
+  {
+    id: 1,
+    name: "Saint Petersburg",
+  },
+  {
+    id: 2,
+    name: "Deep Blue",
+  },
+  {
+    id: 3,
+    name: "Ripe Malinka",
+  },
+  {
+    id: 4,
+    name: "Near Moon",
+  },
+];
+
+export const WithSortable = () => {
+  const [items, setItems] = useState(data);
+  return (
+    <Steps markerType="bullet" lineStyle="dotted" associateLineWithStep={false}>
+      <ReactSortable
+        list={items}
+        setList={setItems}
+        animation={200}
+        handle=".handle"
+        className="ll-sortable"
+      >
+        {items.map((item, index) => (
+          <Step
+            key={item.id}
+            icon={index + 1}
+            status={index < items.length - 1 ? "done" : "current"}
+            markerClassName="handle"
+          >
+            <Input defaultValue={item.name} />
+          </Step>
+        ))}
+      </ReactSortable>
+    </Steps>
+  );
+};

package/src/components/steps/Steps.tsx

@@ -0,0 +1,49 @@
+import { ComponentPropsWithoutRef } from "react";
+import clsx from "clsx";
+
+interface Props extends ComponentPropsWithoutRef<"ul"> {
+  direction?: "horizontal" | "vertical";
+  lineStyle?: "solid" | "dashed" | "dotted";
+  markerType?: "circle" | "bullet";
+
+  /**
+   * if your Step is multiline keep it false
+   * better render and add line-space
+   *
+   * if your Steps are Sortable and eash Step si only one line
+   * and steps are vertical
+   * set it to true, line will not be animated when sorting
+   */
+  associateLineWithStep?: boolean;
+}
+
+export const stepsVariants = {
+  direction: {
+    horizontal: "",
+    vertical: "",
+  },
+};
+
+export default function Steps({
+  direction = "vertical",
+  lineStyle = "solid",
+  markerType = "circle",
+  associateLineWithStep = true,
+  className,
+  ...rest
+}: Props) {
+  return (
+    <ul
+      {...rest}
+      className={clsx(["ll-steps", className])}
+      data-global-line={(!associateLineWithStep).toString()}
+      data-direction={direction}
+      data-marker={markerType}
+      style={{
+        "--line-style": lineStyle,
+        "--line-space": associateLineWithStep ? "4px" : "0px",
+        // "--step-circle-radius": markerType === "circle" ? "18px" : "9px",
+      }}
+    />
+  );
+}

package/src/components/steps/index.ts

@@ -0,0 +1,3 @@
+export { default as Step } from "./Step";
+export { default as Steps } from "./Steps";
+export * from "./util";

package/src/components/steps/util.ts

@@ -0,0 +1,3 @@
+export function getIndexLetter(index: number) {
+  return String.fromCharCode(65 + (index % 26));
+}

package/src/components/table/Table.stories.tsx

@@ -0,0 +1,36 @@
+import { Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow } from ".";
+
+export default {
+  title: "Components/Tables",
+};
+
+export const Basic = () => {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>ID</TableHeaderCell>
+          <TableHeaderCell>Name</TableHeaderCell>
+          <TableHeaderCell>Loremium</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell label="ID">Lorem ipsum</TableCell>
+          <TableCell label="Name">Lorem ipsum</TableCell>
+          <TableCell label="Description">Loremium</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell label="ID">Lorem ipsum</TableCell>
+          <TableCell label="Name">Lorem ipsum</TableCell>
+          <TableCell label="Description">Loremium</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell label="ID">Lorem ipsum</TableCell>
+          <TableCell label="Name">Lorem ipsum</TableCell>
+          <TableCell label="Description">Loremium</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};

package/src/components/table/Table.tsx

@@ -0,0 +1,13 @@
+import { ReactNode, ComponentProps } from "react";
+
+interface Props extends ComponentProps<"table"> {
+  children: ReactNode;
+}
+
+export default function Table({ children, ...props }: Props) {
+  return (
+    <table className="w-full" {...props}>
+      {children}
+    </table>
+  );
+}

package/src/components/table/TableBody.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+interface Props {
+    children: ReactNode;
+}
+
+export default function Table({ children, ...props }: Props) {
+    return <tbody {...props}>{children}</tbody>;
+}

package/src/components/table/TableCell.tsx

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import { ReactNode, ComponentProps } from "react";
+
+interface Props extends ComponentProps<"td"> {
+  children: ReactNode;
+  label?: ReactNode | string;
+}
+
+export default function Table({ children, className, label, ...props }: Props) {
+  return (
+    <td className={clsx("p-2 block lg:table-cell", className)} {...props}>
+      {label && <p className="font-medium text-sm text-gray-6 lg:hidden">{label}</p>}
+      {children}
+    </td>
+  );
+}

package/src/components/table/TableFooter.tsx

@@ -0,0 +1,9 @@
+import { ComponentProps, ReactNode } from "react";
+
+interface Props extends ComponentProps<"tfoot"> {
+  children: ReactNode;
+}
+
+export default function Table({ children, ...props }: Props) {
+  return <tfoot {...props}>{children}</tfoot>;
+}

package/src/components/table/TableHeader.tsx

@@ -0,0 +1,14 @@
+import clsx from "clsx";
+import { ComponentProps, ReactNode } from "react";
+
+interface Props extends ComponentProps<"thead"> {
+  children: ReactNode;
+}
+
+export default function Table({ children, className, ...props }: Props) {
+  return (
+    <thead className={clsx("hidden lg:table-header-group", className)} {...props}>
+      {children}
+    </thead>
+  );
+}

package/src/components/table/TableHeaderCell.tsx

@@ -0,0 +1,14 @@
+import clsx from "clsx";
+import { ReactNode, ComponentProps } from "react";
+
+interface Props extends ComponentProps<"th"> {
+  children: ReactNode;
+}
+
+export default function Table({ children, className, ...props }: Props) {
+  return (
+    <th className={clsx("text-left font-bold p-2", className)} {...props}>
+      {children}
+    </th>
+  );
+}

package/src/components/table/TableRow.tsx

@@ -0,0 +1,14 @@
+import clsx from "clsx";
+import { ComponentProps, ReactNode } from "react";
+
+interface Props extends ComponentProps<"tr"> {
+  children: ReactNode;
+}
+
+export default function Table({ children, className, ...props }: Props) {
+  return (
+    <tr className={clsx("border-b border-gray-3 block lg:table-row", className)} {...props}>
+      {children}
+    </tr>
+  );
+}

package/src/components/table/index.ts

@@ -0,0 +1,7 @@
+export { default as Table } from "./Table";
+export { default as TableBody } from "./TableBody";
+export { default as TableCell } from "./TableCell";
+export { default as TableHeader } from "./TableHeader";
+export { default as TableHeaderCell } from "./TableHeaderCell";
+export { default as TableRow } from "./TableRow";
+export { default as TableFooter } from "./TableFooter";