pixedi 1.0.0 → 1.0.2

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

@@ -1,48 +0,0 @@
-.input {
-  display: block;
-  width: 100%;
-  height: 32px;
-  padding-left: 8px;
-  padding-right: 8px;
-  font-family: inherit;
-  font-size: 14px;
-  line-height: normal;
-  color: var(--foreground);
-  background-color: var(--background);
-  border: 1px solid var(--input);
-  border-radius: 4px;
-  box-sizing: border-box;
-  outline: none;
-  transition:
-    border-color 0.2s,
-    box-shadow 0.2s;
-}
-
-.input:hover:not(:disabled):not(:focus) {
-  border-color: var(--muted-foreground);
-}
-
-.input:focus {
-  box-shadow: 0 0 0 1px var(--ring);
-}
-
-.input:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-  background-color: var(--secondary);
-}
-
-.input::placeholder {
-  color: var(--muted-foreground);
-  opacity: 1;
-}
-
-.input-number-clean::-webkit-outer-spin-button,
-.input-number-clean::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.input-number-clean[type="number"] {
-  -moz-appearance: textfield;
-}

package/src/shared/components/ImageEditor/ui/input-pixel/InputPixel.stories.tsx

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { InputPixel } from "./InputPixel";
-
-const meta = {
-  title: "ImageEditor/UI/InputPixel",
-  component: InputPixel,
-  tags: ["autodocs"],
-  args: {
-    label: "Width",
-    value: 120,
-    onChange: fn(),
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ maxWidth: 320 }}>
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof InputPixel>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithValue: Story = {
-  args: {
-    label: "Height",
-    value: 240,
-  },
-};

package/src/shared/components/ImageEditor/ui/input-pixel/InputPixel.tsx

@@ -1,23 +0,0 @@
-import { forwardRef } from "react";
-import "./input-pixel.css";
-import { Input } from "../../ui";
-
-interface InputPixelProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  label: string;
-  className?: string;
-}
-
-export const InputPixel = forwardRef<HTMLInputElement, InputPixelProps>(
-  ({ label, className = "", style, ...props }, ref) => {
-    return (
-      <div
-        className={`input-pixel-container ${className}`.trim()}
-        style={style}
-      >
-        <span className="input-pixel-legend">{label}</span>
-        <Input ref={ref} type="number" {...props} />
-        <span className="input-pixel-suffix">px</span>
-      </div>
-    );
-  },
-);

package/src/shared/components/ImageEditor/ui/input-pixel/input-pixel.css

@@ -1,24 +0,0 @@
-.input-pixel-container {
-  position: relative;
-}
-
-.input-pixel-legend {
-  position: absolute;
-  top: -9px;
-  font-size: 12px;
-  color: var(--muted-foreground);
-  padding-left: 4px;
-  padding-right: 4px;
-  margin-left: 8px;
-  background: var(--background);
-}
-
-.input-pixel-suffix {
-  position: absolute;
-  right: 8px;
-  bottom: 2px;
-  font-size: 14px;
-  color: var(--muted-foreground);
-  pointer-events: none;
-  user-select: none;
-}

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

@@ -1,67 +0,0 @@
-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

@@ -1,161 +0,0 @@
-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

@@ -1,147 +0,0 @@
-.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

@@ -1,37 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,19 +0,0 @@
-.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;
-}