pentatrion-design 0.0.1

package/src/components/input/Toggle.tsx

@@ -0,0 +1,35 @@
+import { ComponentPropsWithRef, forwardRef, useRef } from "react";
+import { type ThemeColor } from "~/types.d";
+import { useCombinedRefs } from "~/hooks";
+import clsx from "clsx";
+
+interface Props extends ComponentPropsWithRef<"input"> {
+  disabled?: boolean;
+  color?: ThemeColor;
+}
+
+const Toggle = forwardRef<HTMLInputElement, Props>(
+  ({ color = "yellow", disabled = false, checked, className, children, ...rest }, ref) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const combinedRef = useCombinedRefs(inputRef, ref);
+    return (
+      <label className={clsx("cursor-pointer flex items-center", disabled && "disabled")}>
+        <input
+          data-color={color}
+          ref={combinedRef}
+          disabled={disabled}
+          type="checkbox"
+          className={clsx(
+            "p8n-input-checkbox p8n-input-toggle ll-toggle w-[30px] h-[18px] box-border appearance-none rounded-xl inline-block relative mr-1 bg-gray-1 checked:bg-gray-0 after:absolute after:top-[3px] after:left-[3px] after:rounded-full after:w-[12px] after:h-[12px] after:bg-gray-2 after:outline after:outline-1 after:outline-gray-3 checked:after:bg-current checked:after:translate-x-[12px] checked:after:outline-current after:transition-all",
+            className,
+          )}
+          checked={checked}
+          {...rest}
+        />
+        {children}
+      </label>
+    );
+  },
+);
+
+export default Toggle;

package/src/components/input/index.ts

@@ -0,0 +1,4 @@
+export { default as Input, inputConfig } from "./Input";
+export { default as Checkbox } from "./Checkbox";
+export { default as RadioGroup } from "./RadioGroup";
+export { default as Toggle } from "./Toggle";

package/src/components/input-field/InputField.stories.tsx

@@ -0,0 +1,227 @@
+import { Meta } from "@storybook/react";
+import { ChangeEvent, useState } from "react";
+import InputField from "./InputField";
+import { Toggle, Checkbox, RadioGroup } from "../input";
+
+const meta = {
+  title: "Components/InputField",
+  component: InputField,
+} satisfies Meta<typeof InputField>;
+export default meta;
+
+export const Playbook = () => {
+  const [value, setValue] = useState("");
+  const [label, setLabel] = useState("Your label");
+  const [hint, setHint] = useState("Any hint related to input field");
+  const [placeholder, setPlaceholder] = useState("Ex: Fernando");
+  const [help, setHelp] = useState("Help message into the bottom");
+  const [warning, setWarning] = useState("");
+  const [error, setError] = useState("");
+
+  return (
+    <>
+      <div className="shadow-md rounded-2xl p-12 mb-12">
+        <InputField
+          label={label}
+          hint={hint}
+          placeholder={placeholder}
+          help={help}
+          value={value}
+          warning={warning}
+          error={error}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <InputField
+          label="Label"
+          placeholder="What is your name ?"
+          value={label}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setLabel(e.target.value)}
+        />
+        <InputField
+          label="Hint"
+          placeholder="One hint ?"
+          value={hint}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setHint(e.target.value)}
+        />
+        <InputField
+          label="Placeholder"
+          value={placeholder}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setPlaceholder(e.target.value)}
+        />
+        <InputField
+          label="Help"
+          value={help}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setHelp(e.target.value)}
+        />
+        <InputField
+          label="Warning"
+          placeholder="warning message"
+          value={warning}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setWarning(e.target.value)}
+        />
+        <InputField
+          label="Error"
+          placeholder="Error message"
+          value={error}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setError(e.target.value)}
+        />
+      </div>
+    </>
+  );
+};
+
+export const Context = () => {
+  const [name, setName] = useState("");
+  const [gender, setGender] = useState<string | null>("female");
+  const [isAgree, setIsAgree] = useState(true);
+  const [isEnabled, setIsEnabled] = useState(true);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <InputField
+        label="What is your name"
+        hint="Any hint related to input field"
+        placeholder="Ex: Fernando"
+        help="Help text for your input field"
+        value={name}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+      />
+      <InputField
+        label="What is your name"
+        hint="Any hint related to input field"
+        placeholder="Ex: Fernando"
+        help="Help text for your input field"
+        error="Input is required"
+        value={name}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+      />
+      <InputField
+        label="What is your name"
+        hint="Any hint related to input field"
+        placeholder="Ex: Fernando"
+        help="Help text for your input field"
+        warning="Only your firstname"
+        value={name}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+      />
+      <InputField
+        value={gender}
+        onChange={(value: string | null) => {
+          setGender(value);
+        }}
+        label="What is your gender"
+        hint="You don't have to answer"
+        as={RadioGroup}
+        options={[
+          { label: "Male", value: "male" },
+          { label: "Female", value: "female" },
+          { label: "I don't want to answer", value: "undefined" },
+        ]}
+        help="You still have to check a box"
+      />
+      <InputField
+        value={gender}
+        onChange={(value: string | null) => {
+          setGender(value);
+        }}
+        label="What is your gender"
+        hint="You don't have to answer"
+        as={RadioGroup}
+        error="This field is required"
+        options={[
+          { label: "Male", value: "male" },
+          { label: "Female", value: "female" },
+          { label: "I don't want to answer", value: "undefined" },
+        ]}
+        help="You still have to check a box"
+      />
+
+      <InputField
+        value={gender}
+        onChange={(value: string | null) => {
+          setGender(value);
+        }}
+        label="What is your gender"
+        hint="You don't have to answer"
+        as={RadioGroup}
+        warning="Make your choice"
+        options={[
+          { label: "Male", value: "male" },
+          { label: "Female", value: "female" },
+          { label: "I don't want to answer", value: "undefined" },
+        ]}
+        help="You still have to check a box"
+      />
+      <InputField
+        checked={isAgree}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setIsAgree(e.target.checked)}
+        label="Gender"
+        hint="One hint"
+        as={Checkbox}
+      >
+        I agree
+      </InputField>
+      <InputField
+        checked={isAgree}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setIsAgree(e.target.checked)}
+        label="Gender"
+        hint="One hint"
+        warning="Make your choice"
+        as={Checkbox}
+      >
+        I agree
+      </InputField>
+      <InputField
+        checked={isAgree}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setIsAgree(e.target.checked)}
+        label="Gender"
+        hint="One hint"
+        error="This field is required"
+        as={Checkbox}
+      >
+        I agree
+      </InputField>
+
+      <InputField
+        checked={isEnabled}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setIsEnabled(e.target.checked)}
+        label="Label"
+        hint=""
+        as={Toggle}
+      >
+        Enabled
+      </InputField>
+      <InputField
+        checked={isEnabled}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setIsEnabled(e.target.checked)}
+        label="Label"
+        hint="One hint"
+        warning="Make your choice"
+        as={Toggle}
+      >
+        Enabled
+      </InputField>
+      <InputField
+        checked={isEnabled}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setIsEnabled(e.target.checked)}
+        label="Label"
+        hint="One hint"
+        error="This field is required"
+        as={Toggle}
+      >
+        Enabled
+      </InputField>
+      <pre>
+        name: {name}
+        <br />
+        gender: {gender}
+        <br />
+        agree: {isAgree ? "True" : "False"}
+        <br />
+        enabled: {isEnabled ? "True" : "False"}
+      </pre>
+    </div>
+  );
+};

package/src/components/input-field/InputField.tsx

@@ -0,0 +1,62 @@
+import { ElementType, ForwardedRef, ReactNode, forwardRef, useId } from "react";
+import { Input } from "../input";
+import { type ThemeColor } from "~/types.d";
+import { type PolymorphicPropsWithRef } from "~/env.d";
+
+interface InputFieldOwnProps {
+  label?: ReactNode;
+  hint?: ReactNode;
+  help?: ReactNode;
+  error?: ReactNode | boolean;
+  warning?: ReactNode | boolean;
+}
+
+const defaultElement = Input;
+
+type Props<E extends ElementType> = PolymorphicPropsWithRef<InputFieldOwnProps, E>;
+
+const InputFieldBase = <E extends ElementType = typeof defaultElement>(
+  { label, hint, help, error, warning, as, ...rest }: Props<E>,
+  ref: ForwardedRef<Element>,
+) => {
+  const id = useId();
+  const Element: ElementType = as || defaultElement;
+
+  const labelElement = label && <span className="font-bold">{label}</span>;
+  const hintElement = hint && <span className="ml-auto text-gray-6 text-sm">{hint}</span>;
+  const errorElement = error && typeof error !== "boolean" && (
+    <span className="text-red-4 font-medium">
+      <i className="fe-circle-exclamation"></i>
+      <span>{error}</span>
+    </span>
+  );
+  const warningElement = warning && typeof warning !== "boolean" && (
+    <span className="text-orange-4 font-medium">
+      <i className="fe-circle-exclamation"></i>
+      <span>{warning}</span>
+    </span>
+  );
+
+  const color: ThemeColor = error ? "red" : warning ? "orange" : "yellow";
+
+  return (
+    <div>
+      {label || hint ? (
+        <label className="flex items-end mb-1" htmlFor={id}>
+          {labelElement}
+          {hintElement}
+        </label>
+      ) : (
+        <label htmlFor={id} className="invisible"></label>
+      )}
+      <Element ref={ref} id={id} color={color} {...rest} />
+      <div className="text-gray-6 text-sm mt-1">{errorElement || warningElement || help}</div>
+    </div>
+  );
+};
+InputFieldBase.displayName = "InputField";
+
+const InputField: <E extends ElementType = typeof defaultElement>(props: Props<E>) => ReactNode =
+  forwardRef(InputFieldBase);
+
+export default InputField;

package/src/components/loader/Loader.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Loader from "./Loader";
+
+const meta = {
+  title: "Components/Loader",
+  component: Loader,
+  argTypes: {
+    color: {
+      control: {
+        type: "select",
+      },
+      options: ["yellow", "gray", "red", "orange", "green", "blue"],
+    },
+  },
+} satisfies Meta<typeof Loader>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playbook: Story = {
+  args: {
+    size: "medium",
+    color: "yellow",
+  },
+};
+
+export const Context = () => (
+  <div className="flex gap-2 flex-col">
+    <Loader size="small" />
+    <br />
+    <Loader size="medium" color="yellow" />
+    <br />
+    <Loader size="large" color="red" />
+    <br />
+    <Loader size="medium" color="gray" />
+  </div>
+);

package/src/components/loader/Loader.tsx

@@ -0,0 +1,54 @@
+import { CSSProperties, ComponentPropsWithoutRef, useId } from "react";
+import { ThemeColor } from "~/types.d";
+import clsx from "clsx";
+import { colorVariants } from "~/lib/tailwindVariants";
+
+interface Props extends ComponentPropsWithoutRef<"svg"> {
+  size?: "small" | "medium" | "large";
+  color?: ThemeColor;
+}
+
+const sizeConfig = {
+  small: "w-6 h-6 text-base",
+  medium: "w-8 h-8 text-[2rem]",
+  large: "w-12 h-12 text-[3rem]",
+};
+
+const trackStyle: CSSProperties = {
+  strokeLinecap: "round",
+  strokeWidth: 2,
+};
+const circleStyle: CSSProperties = {
+  strokeLinecap: "round",
+  strokeWidth: 2,
+
+  /**
+   * $total-length: 43.699; // total length of path, calculated by getTotalLength() in JS
+   * $looping-percent: 40;
+   * $looping-length: math.div($looping-percent * $total-length, 100) = 17.464;
+   * stroke-dasharray: #{$looping-length * 1px}, #{($total-length - $looping-length) * 1px};
+   */
+  strokeDasharray: "17.45px, 26.21px",
+};
+
+export default function Loader({ size = "medium", color = "blue", className, ...rest }: Props) {
+  const id = useId();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={clsx("inline-block", sizeConfig[size], colorVariants[color].text, className)}
+      viewBox="0 0 16 16"
+      {...rest}
+    >
+      <defs>
+        <circle id={id} cx="8" cy="8" r="7" />
+      </defs>
+      <use href={`#${id}`} className="opacity-25 fill-none stroke-current" style={trackStyle} />
+      <use
+        href={`#${id}`}
+        className="fill-none stroke-current animate-loader-stroke"
+        style={circleStyle}
+      />
+    </svg>
+  );
+}

package/src/components/modal/Components.tsx

@@ -0,0 +1,58 @@
+import { ComponentProps } from "react";
+import { useModalContext } from ".";
+import clsx from "clsx";
+import { Button } from "../button";
+import Scroll from "../scroll/Scroll";
+
+interface ModalHeaderProps extends ComponentProps<"h2"> {
+  closeButton?: boolean;
+}
+export function ModalHeader({
+  children,
+  className,
+  closeButton = true,
+  ...props
+}: ModalHeaderProps) {
+  const { setOpen } = useModalContext();
+
+  return (
+    <>
+      {closeButton && (
+        <div className="p-1 float-right">
+          <Button icon variant="text" color="gray" onClick={() => setOpen(false)}>
+            <i className="fe-cancel"></i>
+          </Button>
+        </div>
+      )}
+      <header className={clsx("flex items-center px-2 pt-2", className)} {...props}>
+        <h4>{children}</h4>
+      </header>
+    </>
+  );
+}
+
+interface ModalDescriptionProps extends ComponentProps<"div"> {
+  height?: number;
+}
+export function ModalDescription({ children, className, height, ...props }: ModalDescriptionProps) {
+  if (!height) {
+    return (
+      <div className={clsx("p-2", className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+  return (
+    <div className={clsx("py-2", className)} {...props}>
+      <Scroll style={{ height: `${height}px` }}>{children}</Scroll>
+    </div>
+  );
+}
+
+export function ModalFooter({ children, className, ...props }: ComponentProps<"footer">) {
+  return (
+    <footer className={clsx("relative z-10 px-2 pb-2", className)} {...props}>
+      {children}
+    </footer>
+  );
+}

package/src/components/modal/Modal.stories.tsx

@@ -0,0 +1,113 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Button } from "../button";
+
+import { Modal, ModalTrigger, ModalContent, ModalDescription, ModalHeader, ModalFooter } from ".";
+
+const meta = {
+  title: "Components/Modal",
+  component: Modal,
+} satisfies Meta<typeof Modal>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: ({ children, ...args }) => {
+    return (
+      <Modal {...args}>
+        <ModalTrigger>open Modal</ModalTrigger>
+        <ModalContent>
+          <ModalHeader>Header</ModalHeader>
+          <ModalDescription>Content</ModalDescription>
+        </ModalContent>
+      </Modal>
+    );
+  },
+  args: {
+    initialOpen: false,
+    color: "default",
+  },
+};
+
+export const Context = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <Modal
+      open={isOpen}
+      onOpen={(e) => {
+        console.log("setIsOpen", e);
+        setIsOpen(e);
+      }}
+    >
+      <ModalTrigger>open Modal</ModalTrigger>
+      <ModalContent>
+        <ModalHeader>Header</ModalHeader>
+        <ModalDescription>Content</ModalDescription>
+        <ModalFooter>
+          <div className="flex justify-between">
+            <Button variant="text" color="gray" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button color="yellow" onClick={() => setIsOpen(false)}>
+              Accept
+            </Button>
+          </div>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export const ScrollableModal = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <Modal
+      open={isOpen}
+      onOpen={(e) => {
+        console.log("setIsOpen", e);
+        setIsOpen(e);
+      }}
+    >
+      <ModalTrigger>open scrollable modal</ModalTrigger>
+      <ModalContent>
+        <ModalHeader>Header</ModalHeader>
+        <ModalDescription height={160}>
+          <div className="px-4 text-justify">
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+              rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+              Deleniti iure amet qui vero, blanditiis quos?
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+              rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+              Deleniti iure amet qui vero, blanditiis quos?
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+              rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+              Deleniti iure amet qui vero, blanditiis quos?
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
+              rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
+              Deleniti iure amet qui vero, blanditiis quos?
+            </p>
+          </div>
+        </ModalDescription>
+        <ModalFooter>
+          <div className="flex justify-between">
+            <Button variant="text" color="gray" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button color="yellow" onClick={() => setIsOpen(false)}>
+              Accept
+            </Button>
+          </div>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};

package/src/components/modal/Modal.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { ModalOptions } from "./interface";
+import useModal from "./useModal";
+import { ModalContext } from "./useModalContext";
+
+interface Props extends ModalOptions {
+  children?: ReactNode;
+}
+
+export default function Modal({ children, ...options }: Props) {
+  const modal = useModal(options);
+  return <ModalContext.Provider value={modal}>{children}</ModalContext.Provider>;
+}

package/src/components/modal/ModalContent.tsx

@@ -0,0 +1,46 @@
+import {
+  FloatingFocusManager,
+  FloatingOverlay,
+  FloatingPortal,
+  useMergeRefs,
+} from "@floating-ui/react";
+import { ComponentProps, forwardRef } from "react";
+import { useModalContext } from ".";
+import clsx from "clsx";
+import { Dialog } from "../dialog";
+
+const ModalContent = forwardRef<HTMLDivElement, ComponentProps<"div">>(
+  ({ style, children, ...props }, propRef) => {
+    const context = useModalContext();
+    const floatingContext = context.context;
+
+    const ref = useMergeRefs([context.refs.setFloating, propRef]);
+    if (!context.open) {
+      return null;
+    }
+
+    return (
+      <FloatingPortal>
+        <FloatingOverlay
+          className={clsx(["flex-center bg-gray-7/40 z-overlay", "animate-fade-in-opacity"])}
+          lockScroll
+        >
+          <FloatingFocusManager context={floatingContext}>
+            <Dialog
+              className={clsx("w-96 max-w-full", `border-${context.color}-2`, "animate-fade-in")}
+              ref={ref}
+              aria-labelledby={context.labelId}
+              aria-describedby={context.descriptionId}
+              style={style}
+              {...context.getFloatingProps(props)}
+            >
+              {children}
+            </Dialog>
+          </FloatingFocusManager>
+        </FloatingOverlay>
+      </FloatingPortal>
+    );
+  },
+);
+
+export default ModalContent;