@usefui/components 1.6.0 → 1.7.1

package/src/ruler/index.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import React from "react";
+import { useRuler, RulerProvider } from "./hooks";
+
+import {
+  HorizontalRuler,
+  VerticalRuler,
+  CornerSquare,
+  HTickContainer,
+  VTickContainer,
+  HTickMark,
+  VTickMark,
+  HTickLabel,
+  VTickLabel,
+  VerticalGuideLine,
+  HorizontalGuideLine,
+  CanvasContent,
+  CanvasWrapper,
+} from "./styles";
+
+import { MAJOR_TICK_INTERVAL, MINOR_TICK_INTERVAL } from "./constants";
+import { Guide } from "./types";
+import { IReactChildren } from "../../../../types";
+
+export interface RulerComposition {
+  Root: typeof RulerRoot;
+  Row: typeof RulerRow;
+  Corner: typeof RulerCorner;
+  Lines: typeof RulerLines;
+  Canvas: typeof RulerCanvas;
+}
+
+const Ruler = ({ children }: IReactChildren) => {
+  return <CanvasWrapper>{children}</CanvasWrapper>;
+};
+Ruler.displayName = "Ruler";
+
+const RulerRoot = ({ children }: IReactChildren) => {
+  return <RulerProvider>{children}</RulerProvider>;
+};
+RulerRoot.displayName = "Ruler.Root";
+
+const RulerRow = ({
+  orientation,
+}: {
+  orientation: "horizontal" | "vertical";
+}) => {
+  const { addGuide, setActiveGuide, setIsDragging, canvasRef } = useRuler();
+
+  const rulerRef = React.useRef<HTMLDivElement>(null);
+  const [size, setSize] = React.useState(0);
+
+  const isH = orientation === "horizontal";
+
+  React.useEffect(() => {
+    const update = () => {
+      if (canvasRef.current) {
+        setSize(
+          isH ? canvasRef.current.offsetWidth : canvasRef.current.offsetHeight,
+        );
+      }
+    };
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, [canvasRef, isH]);
+
+  const getPos = (e: React.MouseEvent) => {
+    const rect = rulerRef.current?.getBoundingClientRect();
+    if (!rect) return null;
+    return isH ? e.clientX - rect.left : e.clientY - rect.top;
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    const position = getPos(e);
+    if (position === null) return;
+    const guide = addGuide({
+      position: 0,
+      orientation: isH ? "horizontal" : "vertical",
+    }) as any;
+    setActiveGuide(guide);
+    setIsDragging(true);
+  };
+
+  const ticks = Array.from(
+    { length: Math.floor(size / MINOR_TICK_INTERVAL) + 1 },
+    (_, idx) => {
+      const i = idx * MINOR_TICK_INTERVAL;
+      const isMajor = i % MAJOR_TICK_INTERVAL === 0;
+      return isH ? (
+        <HTickContainer key={i} $x={i}>
+          <HTickMark $major={isMajor} />
+          {isMajor && <HTickLabel>{i}</HTickLabel>}
+        </HTickContainer>
+      ) : (
+        <VTickContainer key={i} $y={i}>
+          <VTickMark $major={isMajor} />
+          {isMajor && <VTickLabel>{i}</VTickLabel>}
+        </VTickContainer>
+      );
+    },
+  );
+
+  const RulerEl = isH ? HorizontalRuler : VerticalRuler;
+
+  return (
+    <RulerEl ref={rulerRef} onMouseDown={handleMouseDown}>
+      {ticks}
+    </RulerEl>
+  );
+};
+RulerRow.displayName = "Ruler.Row";
+
+const RulerCorner = () => {
+  return <CornerSquare />;
+};
+RulerCorner.displayName = "Ruler.Corner";
+
+const RulerLine = ({ guide }: { guide: Guide }) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const { activeGuide, removeGuide, setActiveGuide, setIsDragging } =
+    useRuler();
+
+  const highlighted = activeGuide?.id === guide.id || isHovered;
+
+  const sharedProps = {
+    $active: highlighted,
+    onMouseDown(e: React.MouseEvent) {
+      e.stopPropagation();
+      setActiveGuide(guide);
+      setIsDragging(true);
+    },
+    onDoubleClick(e: React.MouseEvent) {
+      e.stopPropagation();
+      removeGuide(guide.id);
+    },
+    onMouseEnter() {
+      setIsHovered(true);
+    },
+    onMouseLeave() {
+      setIsHovered(false);
+    },
+  };
+
+  if (guide.orientation === "vertical") {
+    return <VerticalGuideLine $x={guide.position} {...sharedProps} />;
+  }
+
+  return <HorizontalGuideLine $y={guide.position} {...sharedProps} />;
+};
+RulerLine.displayName = "Ruler.Line";
+
+const RulerLines = () => {
+  const {
+    guides,
+    activeGuide,
+    updateGuide,
+    removeGuide,
+    setActiveGuide,
+    isDragging,
+    setIsDragging,
+    canvasRef,
+  } = useRuler();
+
+  React.useEffect(() => {
+    if (!isDragging || !activeGuide) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const rect = canvas.getBoundingClientRect();
+      const pos =
+        activeGuide.orientation === "vertical"
+          ? e.clientX - rect.left
+          : e.clientY - rect.top;
+
+      updateGuide(activeGuide.id, Math.max(0, pos));
+    };
+
+    const handleMouseUp = (e: MouseEvent) => {
+      const canvas = canvasRef.current;
+      if (canvas && activeGuide) {
+        const rect = canvas.getBoundingClientRect();
+        const isOutside =
+          e.clientX < rect.left ||
+          e.clientX > rect.right ||
+          e.clientY < rect.top ||
+          e.clientY > rect.bottom;
+        if (isOutside) removeGuide(activeGuide.id);
+      }
+      setIsDragging(false);
+      setActiveGuide(null);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [
+    isDragging,
+    activeGuide,
+    updateGuide,
+    removeGuide,
+    setActiveGuide,
+    setIsDragging,
+    canvasRef,
+  ]);
+
+  return (
+    <React.Fragment>
+      {guides.map((guide) => (
+        <RulerLine key={guide.id} guide={guide} />
+      ))}
+    </React.Fragment>
+  );
+};
+RulerLines.displayName = "Ruler.Lines";
+
+const RulerCanvas = ({ children }: IReactChildren) => {
+  const { canvasRef, isDragging } = useRuler();
+
+  return (
+    <CanvasContent ref={canvasRef} $isDragging={isDragging}>
+      {children}
+    </CanvasContent>
+  );
+};
+RulerCanvas.displayName = "Ruler.Canvas";
+
+Ruler.Root = RulerRoot;
+Ruler.Row = RulerRow;
+Ruler.Corner = RulerCorner;
+Ruler.Lines = RulerLines;
+Ruler.Canvas = RulerCanvas;
+
+export { Ruler, RulerRoot, RulerRow, RulerCorner, RulerLines, RulerCanvas };

package/src/ruler/styles/index.tsx

@@ -0,0 +1,154 @@
+import styled, { css } from "styled-components";
+import { RULER_SIZE } from "../constants";
+
+const activeGuideStyles = css`
+  background-color: var(--color-orange);
+  transition: background ease-in-out 0.2s;
+`;
+
+const inactiveGuideStyles = css`
+  background-color: var(--alpha-orange-60);
+  transition: background ease-in-out 0.2s;
+`;
+
+export const RulerBase: any = styled.div`
+  position: absolute;
+  background-color: transparent;
+  user-select: none;
+  overflow: hidden;
+  z-index: var(--depth-default-100);
+`;
+
+export const HorizontalRuler: any = styled(RulerBase)`
+  top: 0;
+  left: ${RULER_SIZE}px;
+  right: 0;
+  height: var(--measurement-medium-70);
+  /* border-bottom: var(--measurement-small-30) solid var(--font-color-alpha-10); */
+  cursor: s-resize;
+`;
+
+export const VerticalRuler: any = styled(RulerBase)`
+  top: ${RULER_SIZE}px;
+  left: 0;
+  bottom: 0;
+  width: ${RULER_SIZE}px;
+  /* border-right: var(--measurement-small-30) solid var(--font-color-alpha-10); */
+  cursor: e-resize;
+`;
+
+export const CornerSquare: any = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: ${RULER_SIZE}px;
+  height: ${RULER_SIZE}px;
+  background-color: transparent;
+
+  z-index: var(--depth-default-100);
+`;
+
+export const HTickContainer: any = styled.div<{ $x: number }>`
+  position: absolute;
+  top: 0;
+  left: ${({ $x }) => $x}px;
+`;
+
+export const VTickContainer: any = styled.div<{ $y: number }>`
+  position: absolute;
+  left: 0;
+  top: ${({ $y }) => $y}px;
+`;
+
+export const HTickMark: any = styled.div<{ $major: boolean }>`
+  width: var(--measurement-small-30);
+  height: ${({ $major }) => ($major ? 6 : 3)}px;
+  background-color: ${({ $major }) =>
+    $major ? "var(--font-color-alpha-20)" : "var(--font-color-alpha-10)"};
+`;
+
+export const VTickMark: any = styled.div<{ $major: boolean }>`
+  height: var(--measurement-small-30);
+  width: ${({ $major }) => ($major ? 6 : 3)}px;
+  background-color: ${({ $major }) =>
+    $major ? "var(--font-color-alpha-30)" : "var(--font-color-alpha-10)"};
+`;
+
+export const HTickLabel: any = styled.span`
+  position: absolute;
+
+  top: var(--fontsize-small-30);
+  left: calc(var(--fontsize-small-30) / 1.25 * -1);
+
+  font-size: var(--fontsize-small-30);
+  color: var(--font-color-alpha-30);
+
+  font-family: monospace;
+  user-select: none;
+`;
+
+export const VTickLabel: any = styled.span`
+  position: absolute;
+
+  top: calc(var(--fontsize-small-30) / 1.25 * -1);
+  left: var(--fontsize-small-30);
+
+  font-size: var(--fontsize-small-30);
+  color: var(--font-color-alpha-30);
+
+  font-family: monospace;
+  user-select: none;
+
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+`;
+
+export const VerticalGuideLine: any = styled.div<{
+  $x: number;
+  $active: boolean;
+}>`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--measurement-small-30);
+  cursor: col-resize;
+  z-index: var(--depth-default-90);
+  left: ${({ $x }) => $x}px;
+  ${({ $active }) => ($active ? activeGuideStyles : inactiveGuideStyles)}
+`;
+
+export const HorizontalGuideLine: any = styled.div<{
+  $y: number;
+  $active: boolean;
+}>`
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: var(--measurement-small-30);
+  cursor: row-resize;
+  z-index: var(--depth-default-90);
+  top: ${({ $y }) => $y}px;
+  ${({ $active }) => ($active ? activeGuideStyles : inactiveGuideStyles)}
+
+  transition: bakground ease-in-out 0.2s;
+`;
+
+export const CanvasContent: any = styled.div<{ $isDragging?: boolean }>`
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+
+  ${({ $isDragging }) =>
+    $isDragging &&
+    css`
+      pointer-events: none;
+      user-select: none;
+    `}
+`;
+
+export const CanvasWrapper: any = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+`;

package/src/ruler/types/index.ts

@@ -0,0 +1,17 @@
+export interface Guide {
+  id: string;
+  position: number;
+  orientation: "horizontal" | "vertical";
+}
+
+export interface RulerContextType {
+  guides: Guide[];
+  addGuide: (guide: Omit<Guide, "id">) => void;
+  updateGuide: (id: string, position: number) => void;
+  removeGuide: (id: string) => void;
+  activeGuide: Guide | null;
+  setActiveGuide: (guide: Guide | null) => void;
+  isDragging: boolean;
+  setIsDragging: (dragging: boolean) => void;
+  canvasRef: React.RefObject<HTMLDivElement | null>;
+}

package/src/select/Select.stories.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Select, Page, Field, ScrollArea } from "..";
+
+const meta = {
+  title: "Components/Select",
+  component: Select,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <Page>
+        <Page.Content className="p-medium-30">
+          <Story />
+        </Page.Content>
+      </Page>
+    ),
+  ],
+} satisfies Meta<typeof Select>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: ({ ...args }) => {
+    const [value, setValue] = React.useState<string | undefined>(undefined);
+    const [valueLabel, setValueLabel] = React.useState<string | undefined>(
+      undefined,
+    );
+    const [valueHandle, setValueHandle] = React.useState<string | undefined>(
+      undefined,
+    );
+
+    const TEAM_MEMBERS = [
+      { value: "phoenix", label: "Phoenix Baker", handle: "@phoenix" },
+      { value: "olivia", label: "Olivia Rhye", handle: "@olivia" },
+      { value: "lana", label: "Lana Steiner", handle: "@lana" },
+      { value: "demi", label: "Demi Wilkinson", handle: "@demi" },
+      { value: "candice", label: "Candice Wu", handle: "@candice" },
+      { value: "natali", label: "Natali Craig", handle: "@natali" },
+      { value: "phoenix", label: "Phoenix Baker", handle: "@phoenix" },
+      { value: "olivia", label: "Olivia Rhye", handle: "@olivia" },
+      { value: "lana", label: "Lana Steiner", handle: "@lana" },
+      { value: "demi", label: "Demi Wilkinson", handle: "@demi" },
+      { value: "candice", label: "Candice Wu", handle: "@candice" },
+      { value: "natali", label: "Natali Craig", handle: "@natali" },
+    ];
+
+    return (
+      <div className="flex flex-column align-center justify-center flex-wrap h-100 w-100 g-medium-30">
+        <Field.Wrapper style={{ width: 325 }}>
+          <Field.Label>Team member</Field.Label>
+          <Select.Root>
+            <Select>
+              <Select.Trigger>
+                {value && valueHandle ? (
+                  <React.Fragment>
+                    {valueLabel}&nbsp;
+                    <span className="opacity-default-60">{valueHandle}</span>
+                  </React.Fragment>
+                ) : (
+                  "Select an Item"
+                )}
+              </Select.Trigger>
+              <Select.Content className="grid g-small-30">
+                {TEAM_MEMBERS.map((member) => (
+                  <Select.Item
+                    key={member.value}
+                    value={member.value}
+                    className="fs-medium-20"
+                    onClick={() => {
+                      setValue(member.value);
+                      setValueHandle(member.handle);
+                      setValueLabel(member.label);
+                    }}
+                  >
+                    {member.label}&nbsp;
+                    <span className="opacity-default-60">{member.handle}</span>
+                  </Select.Item>
+                ))}
+              </Select.Content>
+            </Select>
+          </Select.Root>
+
+          <Field.Meta variant="hint">
+            This is a hint text to help user.
+          </Field.Meta>
+        </Field.Wrapper>
+      </div>
+    );
+  },
+};

package/src/select/hooks/index.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import React from "react";
+import { IReactChildren, IComponentAPI } from "../../../../../types";
+
+const defaultComponentAPI: IComponentAPI = {
+  id: "",
+  states: {},
+  methods: {},
+};
+const SelectContext = React.createContext<IComponentAPI>(defaultComponentAPI);
+export const useSelect = () => React.useContext(SelectContext);
+
+export const SelectProvider = ({
+  children,
+}: IReactChildren): React.JSX.Element => {
+  const context = useSelectProvider();
+
+  return (
+    <SelectContext.Provider value={context}>{children}</SelectContext.Provider>
+  );
+};
+
+function useSelectProvider(): IComponentAPI {
+  const DEFAULT_POSITIONS = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  };
+  const DEFAULT_DIMENSIONS = {
+    width: 0,
+    height: 0,
+  };
+
+  const [open, setOpen] = React.useState<boolean>(false);
+  const [value, setValue] = React.useState<string | null>(null);
+  const [label, setLabel] = React.useState<string>("");
+
+  const [contentProps, setContentProps] = React.useState({
+    ...DEFAULT_POSITIONS,
+    ...DEFAULT_DIMENSIONS,
+  });
+  const [triggerProps, setTriggerProps] = React.useState({
+    ...DEFAULT_POSITIONS,
+    ...DEFAULT_DIMENSIONS,
+  });
+
+  const triggerId = React.useId();
+  const listboxId = React.useId();
+  const composedId = `${triggerId}|${listboxId}`;
+
+  return {
+    id: composedId,
+    states: {
+      open,
+      value,
+      label,
+      contentProps,
+      triggerProps,
+    },
+    methods: {
+      toggleOpen: (): boolean | void => setOpen(!open),
+      setOpen,
+      setValue,
+      setLabel,
+      setContentProps,
+      setTriggerProps,
+    },
+  };
+}