pixedi 1.0.0

package/src/shared/components/ImageEditor/ui/select/Select.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Select, type SelectOption } from "./Select";
+
+const items = [
+  { value: "1", label: "Small" },
+  { value: "2", label: "Medium" },
+  { value: "3", label: "Large" },
+];
+
+const groupedItems = [
+  {
+    label: "Sizes",
+    options: [
+      { value: "s", label: "Small", rightLabel: "S" },
+      { value: "m", label: "Medium", rightLabel: "M" },
+      { value: "l", label: "Large", rightLabel: "L" },
+    ],
+  },
+  {
+    label: "Formats",
+    options: [
+      { value: "jpg", label: "JPEG" },
+      { value: "png", label: "PNG" },
+      { value: "webp", label: "WebP" },
+    ],
+  },
+] as SelectOption[];
+
+const meta = {
+  title: "ImageEditor/UI/Select",
+  component: Select,
+  tags: ["autodocs"],
+  args: {
+    items,
+    value: "1",
+    placeholder: "Select an option",
+    onChange: fn(),
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ minHeight: 300, maxWidth: 320 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SingleItems: Story = {};
+
+export const GroupedItems: Story = {
+  args: {
+    items: groupedItems,
+    value: "m",
+  },
+};
+
+export const CustomRenderOption: Story = {
+  args: {
+    renderOption: (option) => (
+      <strong style={{ color: "#60a5fa" }}>{option.label}</strong>
+    ),
+  },
+};

package/src/shared/components/ImageEditor/ui/select/Select.tsx

@@ -0,0 +1,161 @@
+import { useEffect, useRef, useState, useMemo, useLayoutEffect } from "react";
+import { ChevronDown, Check } from "../../assets/icons";
+import "./select.css";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  options?: SelectOption[];
+  rightLabel?: string;
+  fullName?: string;
+}
+
+interface SelectProps {
+  items: SelectOption[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  renderOption?: (option: SelectOption) => React.ReactNode;
+}
+
+export const Select: React.FC<SelectProps> = ({
+  items,
+  value,
+  onChange,
+  placeholder = "Select an option",
+  className = "",
+  renderOption,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const allOptions = useMemo(() => {
+    const flatten = (list: SelectOption[]): SelectOption[] => {
+      return list.reduce<SelectOption[]>((acc, item) => {
+        if (item.options) {
+          return [
+            ...acc,
+            ...flatten(
+              item.options.map((option) => ({
+                ...option,
+                fullName: `${item.label} ${option.label}`,
+              })),
+            ),
+          ];
+        }
+        return [...acc, item];
+      }, []);
+    };
+    return flatten(items);
+  }, [items]);
+
+  const selectedOption = allOptions.find((opt) => opt.value === value);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!isOpen || !triggerRef.current || !contentRef.current) return;
+
+    const editorRect = containerRef.current
+      ?.closest<HTMLElement>(".picedi.main")
+      ?.getBoundingClientRect();
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const contentRect = contentRef.current.getBoundingClientRect();
+    const availableBottom = (editorRect?.bottom ?? window.innerHeight) - 16;
+    const contentBottom = triggerRect.bottom + contentRect.height + 4;
+
+    let contentTop = "calc(100% + 4px)";
+    if (contentBottom > availableBottom) {
+      const diff = contentBottom - availableBottom;
+      contentTop = `calc(100% + 4px - ${diff}px)`;
+    }
+
+    contentRef.current.style.top = contentTop;
+  }, [isOpen, items]);
+
+  const handleSelectItem = (val: string) => {
+    onChange(val);
+    setIsOpen(false);
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`select-wrapper ${className}`.trim()}
+      data-state={isOpen ? "open" : "closed"}
+    >
+      <button
+        ref={triggerRef}
+        type="button"
+        className="select-trigger"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <span>{selectedOption ? selectedOption.fullName : placeholder}</span>
+        <ChevronDown className="select-trigger-arrow" />
+      </button>
+
+      <div ref={contentRef} className="select-content">
+        {items.map((item, index) => {
+          if (item.options) {
+            return (
+              <div key={`group-${index}`}>
+                {/* Group Name */}
+                <div className="select-group-label semibold">{item.label}</div>
+                {item.options.map((option) => (
+                  <div
+                    key={option.value}
+                    className="select-item"
+                    onClick={() => handleSelectItem(option.value)}
+                  >
+                    {renderOption ? (
+                      renderOption(option)
+                    ) : (
+                      <span className="select-item-left">{option.label}</span>
+                    )}
+                    <div className="select-item-addon">
+                      {option.rightLabel && <span>{option.rightLabel}</span>}
+                      {value === option.value && (
+                        <Check className="select-item-check" />
+                      )}
+                      {value !== option.value && <b />}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            );
+          }
+
+          return (
+            <div
+              key={item.value}
+              className="select-item"
+              onClick={() => handleSelectItem(item.value)}
+            >
+              {renderOption ? (
+                renderOption(item)
+              ) : (
+                <span className="select-item-left">{item.label}1</span>
+              )}
+              {value === item.value && <Check className="select-item-check" />}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/shared/components/ImageEditor/ui/select/select.css

@@ -0,0 +1,147 @@
+.select-wrapper {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.select-trigger {
+  width: 100%;
+  height: 32px;
+  padding-left: 10px;
+  padding-right: 8px;
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--foreground);
+  background-color: var(--background);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  outline: none;
+  user-select: none;
+  transition: border-color 0.2s;
+}
+
+.select-trigger:hover,
+.select-trigger:focus {
+  border-color: var(--muted-foreground);
+}
+
+.select-trigger-arrow {
+  width: 16px;
+  height: 16px;
+  color: var(--muted-foreground);
+  transition: transform 0.2s;
+}
+
+.select-wrapper[data-state="open"] .select-trigger-arrow {
+  transform: rotate(180deg);
+}
+
+.select-content {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  width: 100%;
+  max-height: 282px;
+  overflow-y: auto;
+  background-color: var(--background);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  z-index: 50;
+  box-sizing: border-box;
+  padding: 4px;
+}
+
+.select-content::-webkit-scrollbar {
+  width: 4px;
+}
+
+.select-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.select-content::-webkit-scrollbar-thumb {
+  background-color: var(--border);
+  border-radius: 10px;
+}
+
+.select-wrapper[data-state="closed"] .select-content {
+  display: none;
+}
+
+.select-group-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  padding: 8px 10px;
+  user-select: none;
+}
+
+.select-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 4px 10px;
+  color: var(--foreground);
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  background: transparent;
+}
+
+.select-item:hover {
+  background-color: var(--secondary);
+}
+
+.select-item-left {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.select-item-addon {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.select-item-addon > span {
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+
+.select-item-addon > svg {
+  font-size: 14px;
+}
+
+.select-item-addon > b {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.select-item-right-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.select-item-right {
+  font-size: 14px;
+  color: var(--muted-foreground);
+}
+
+.select-item-check {
+  width: 16px;
+  height: 16px;
+  color: var(--foreground);
+  flex-shrink: 0;
+}

package/src/shared/components/ImageEditor/ui/separator/Separator.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Separator } from "./Separator";
+
+const meta = {
+  title: "ImageEditor/UI/Separator",
+  component: Separator,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  args: {
+    orientation: "horizontal",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 200 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Vertical: Story = {
+  args: {
+    orientation: "vertical",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: 100, display: "flex" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/shared/components/ImageEditor/ui/separator/Separator.tsx

@@ -0,0 +1,27 @@
+import { forwardRef } from "react";
+import "./separator.css";
+
+interface SeparatorProps extends React.HTMLAttributes<HTMLHRElement> {
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}
+
+export const Separator = forwardRef<HTMLHRElement, SeparatorProps>(
+  ({ className = "", orientation = "horizontal", ...props }, ref) => {
+    // Сглобяваме чистите класове
+    const combinedClasses = `separator ${className}`.trim();
+
+    return (
+      <hr
+        ref={ref}
+        role="separator"
+        aria-orientation={orientation}
+        data-orientation={orientation}
+        className={combinedClasses}
+        {...props}
+      />
+    );
+  },
+);
+
+Separator.displayName = "Separator";

package/src/shared/components/ImageEditor/ui/separator/separator.css

@@ -0,0 +1,19 @@
+.separator {
+  display: block;
+  flex-shrink: 0;
+  background-color: var(--border);
+  border: none;
+  box-sizing: border-box;
+}
+
+.separator[data-orientation="horizontal"] {
+  height: 1px;
+  width: 100%;
+}
+
+.separator[data-orientation="vertical"] {
+  width: 1px;
+  height: 100%;
+  align-self: stretch;
+  margin: 0;
+}

package/src/shared/components/ImageEditor/utils.test.ts

@@ -0,0 +1,136 @@
+import { describe, expect, it } from "vitest";
+import {
+  degree2Rad,
+  getCropByNewSizes,
+  getCropPoints,
+  getInitalCrop,
+} from "./utils";
+
+const element = {
+  offsetLeft: 10,
+  offsetTop: 20,
+  offsetWidth: 80,
+  offsetHeight: 60,
+} as HTMLElement;
+
+describe("getInitalCrop", () => {
+  it.each([
+    [1, 200, 100, { x: 30, y: 10, w: 40, h: 80 }],
+    [
+      16 / 9,
+      200,
+      100,
+      { x: 14.444444444444446, y: 10, w: 71.11111111111111, h: 80 },
+    ],
+    [9 / 16, 200, 100, { x: 38.75, y: 10, w: 22.5, h: 80 }],
+    [1, 100, 200, { x: 10, y: 30, w: 80, h: 40 }],
+  ])(
+    "centers a %s crop inside a %sx%s frame",
+    (ratio, width, height, expected) => {
+      const crop = getInitalCrop(ratio, width, height);
+
+      expect(crop.x).toBeCloseTo(expected.x);
+      expect(crop.y).toBeCloseTo(expected.y);
+      expect(crop.w).toBeCloseTo(expected.w);
+      expect(crop.h).toBeCloseTo(expected.h);
+      expect(crop.x + crop.w / 2).toBeCloseTo(50);
+      expect(crop.y + crop.h / 2).toBeCloseTo(50);
+    },
+  );
+});
+
+describe("getCropPoints", () => {
+  it("keeps free-form edge resizing within the frame and minimum width", () => {
+    const crop = getCropPoints(
+      "r",
+      true,
+      1,
+      100,
+      0,
+      -100,
+      0,
+      100,
+      100,
+      { x: 10, y: 20, w: 40, h: 50 },
+      element,
+    );
+
+    expect(crop).toEqual({ x: 10, y: 20, w: 32, h: 50 });
+  });
+
+  it("keeps free-form corner resizing within parent bounds", () => {
+    const crop = getCropPoints(
+      "br",
+      true,
+      1,
+      0,
+      0,
+      200,
+      200,
+      100,
+      100,
+      { x: 20, y: 30, w: 40, h: 40 },
+      element,
+    );
+
+    expect(crop).toEqual({ x: 20, y: 30, w: 80, h: 70 });
+  });
+
+  it("preserves fixed ratios when the requested resize remains valid", () => {
+    const crop = getCropPoints(
+      "r",
+      false,
+      2,
+      100,
+      0,
+      120,
+      0,
+      200,
+      200,
+      { x: 50, y: 50, w: 80, h: 40 },
+      element,
+    );
+
+    expect(crop).toEqual({ x: 50, y: 45, w: 100, h: 50 });
+    expect(crop.w / crop.h).toBe(2);
+  });
+
+  it("restores the element rectangle for invalid fixed-ratio resizes", () => {
+    const crop = getCropPoints(
+      "r",
+      false,
+      2,
+      100,
+      0,
+      200,
+      0,
+      100,
+      100,
+      { x: 10, y: 20, w: 80, h: 40 },
+      element,
+    );
+
+    expect(crop).toEqual({ x: 10, y: 20, w: 80, h: 60 });
+  });
+});
+
+describe("crop utility helpers", () => {
+  it("rescales crop rectangles and clamps their visible bounds", () => {
+    expect(
+      getCropByNewSizes({ x: -1, y: 10, w: 80, h: 60 }, 100, 50, 50),
+    ).toEqual({
+      x: 0,
+      y: 20,
+      w: 100,
+      h: 50,
+    });
+  });
+
+  it.each([
+    [0, 0],
+    [90, Math.PI / 2],
+    [180, Math.PI],
+  ])("converts %s degrees to radians", (degrees, radians) => {
+    expect(degree2Rad(degrees)).toBeCloseTo(radians);
+  });
+});