pixedi 1.0.0

package/src/shared/components/ImageEditor/sidebar/SidebarPresets.tsx

@@ -0,0 +1,54 @@
+import { useImageEditorContext } from "../provider/useImageEditorContext";
+import { presetsData } from "../constants";
+import type { ActionCrop } from "../types";
+import { Select } from "../ui";
+
+const presetOptions = presetsData.map((p) => p.options).flat();
+
+export const SidebarPresets = () => {
+  const { setCurrentAction, currentAction, setSidebar } =
+    useImageEditorContext();
+  const currentValue =
+    currentAction?.name === "crop" &&
+    presetOptions.some((preset) => preset.value === currentAction.args.id)
+      ? currentAction.args.id
+      : "";
+
+  const handleChange = (value: string | null) => {
+    if (!value) {
+      return;
+    }
+
+    const flattenedData = presetsData.map((p) => p.options).flat();
+    const option = flattenedData.find((po) => po.value === value);
+    if (!option) {
+      return;
+    }
+
+    const ratio = option.w / option.h;
+
+    const args: ActionCrop = {
+      id: value,
+      ratio,
+      isFree: false,
+      preset: { w: option.w, h: option.h },
+    };
+
+    setCurrentAction({ name: "crop", args });
+    setSidebar(false);
+  };
+
+  return (
+    <div className="sidebar-preset">
+      <h4>Presets</h4>
+      <div className="relative">
+        <Select
+          value={currentValue}
+          placeholder="Select a preset"
+          onChange={handleChange}
+          items={presetsData}
+        />
+      </div>
+    </div>
+  );
+};

package/src/shared/components/ImageEditor/sidebar/SidebarResize.tsx

@@ -0,0 +1,26 @@
+import { Fullscreen } from "../assets/icons";
+import { useImageEditorContext } from "../provider/useImageEditorContext";
+import { Button } from "../ui";
+
+export const SidebarResize = () => {
+  const { getLastHistoryItem, setCurrentAction, setSidebar } =
+    useImageEditorContext();
+  const { width, height } = getLastHistoryItem() ?? { width: 0, height: 0 };
+
+  const handleClick = () => {
+    setCurrentAction({ name: "resize", args: { width, height } });
+    setSidebar(false);
+  };
+
+  return (
+    <Button variant="outline" className="sidebar-resize" onClick={handleClick}>
+      <div className="sidebar-resize-icon">
+        <Fullscreen />
+        Resize
+      </div>
+      <div className="sidebar-resize-size">
+        {width} x {height}
+      </div>
+    </Button>
+  );
+};

package/src/shared/components/ImageEditor/sidebar/index.ts

@@ -0,0 +1 @@
+export { Sidebar } from "./Sidebar";

package/src/shared/components/ImageEditor/sidebar/sidebar.css

@@ -0,0 +1,101 @@
+.sidebar {
+  position: relative;
+  width: 0;
+  z-index: 10;
+  transition: transform 0.15s ease-out;
+
+  @media (min-width: 768px) {
+    width: 320px;
+    transition: none;
+  }
+}
+
+.sidebar-settings {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 8px 10px -6px rgba(0, 0, 0, 0.1);
+
+  @media (min-width: 768px) {
+    display: none;
+  }
+}
+
+.sidebar-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  box-sizing: border-box;
+  border-left: 1px solid var(--border);
+}
+
+.sidebar-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 320px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  background-color: var(--background);
+  padding: 16px;
+  box-sizing: border-box;
+
+  @media (max-width: 767px) {
+    padding-top: 48px;
+  }
+}
+
+.sidebar-close-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+.sidebar-separator {
+  margin-top: 20px;
+  margin-bottom: 12px;
+}
+
+.sidebar-resize {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-resize-icon {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sidebar-resize-size {
+  font-size: 14px;
+  color: var(--muted-foreground);
+}
+
+.sidebar-crop {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.sidebar-crop-ratios {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.sidebar-preset {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}

package/src/shared/components/ImageEditor/types.ts

@@ -0,0 +1,59 @@
+export const breakpoints = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+} as const;
+
+export type Breakpoint = keyof typeof breakpoints;
+
+export type Sizes = {
+  width: number;
+  height: number;
+};
+
+export type Direction = "r" | "l" | "t" | "b" | "tl" | "tr" | "bl" | "br";
+
+export type CropSizes = {
+  w: number;
+  h: number;
+};
+
+export type CropRect = CropSizes & {
+  x: number;
+  y: number;
+  xPx?: number;
+  yPx?: number;
+  wPx?: number;
+  hPx?: number;
+};
+
+export type ActionCrop = {
+  id: string;
+  ratio: number;
+  isFree: boolean;
+  preset: CropSizes | null;
+};
+
+export type ActionWithVal = {
+  val: number;
+};
+
+export type Action =
+  | { name: "resize"; args: Sizes }
+  | { name: "crop"; args: ActionCrop }
+  | { name: "flipH"; args: ActionWithVal }
+  | { name: "flipV"; args: ActionWithVal }
+  | { name: "filters"; args: Record<string, number> };
+
+export type HistoryItem = Sizes & {
+  name: string;
+  base64: string;
+};
+
+export type History = {
+  pointer: number;
+  items: Array<HistoryItem>;
+};
+
+export type FuncSaveArgs = (base64: string) => Promise<void> | void;

package/src/shared/components/ImageEditor/ui/button/Button.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Button } from "./Button";
+import { Check } from "../../assets/icons";
+
+const meta = {
+  title: "ImageEditor/UI/Button",
+  component: Button,
+  tags: ["autodocs"],
+  args: {
+    children: "Button",
+    onClick: fn(),
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <>
+        <Check />
+        Button
+      </>
+    ),
+  },
+};

package/src/shared/components/ImageEditor/ui/button/Button.tsx

@@ -0,0 +1,21 @@
+import { forwardRef } from "react";
+import "./button.css";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "outline" | "ghost";
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className = "", variant = "default", children, ...props }, ref) => {
+    const variantClass = `btn-${variant}`;
+    const combinedClasses = `btn ${variantClass} ${className}`.trim();
+
+    return (
+      <button ref={ref} className={combinedClasses} {...props}>
+        {children}
+      </button>
+    );
+  },
+);

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

@@ -0,0 +1,69 @@
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  height: 32px;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  background-color: transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  box-sizing: border-box;
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    opacity 0.2s;
+}
+
+.btn:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.btn:active {
+  transform: translateY(1px);
+}
+
+.btn svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.btn-default {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+.btn-default:hover {
+  opacity: 0.9;
+}
+
+.btn-outline {
+  border-color: var(--border);
+  background-color: var(--background);
+  color: var(--foreground);
+}
+.btn-outline:hover {
+  background-color: var(--secondary);
+}
+
+.btn-ghost {
+  color: var(--foreground);
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.btn-ghost:hover {
+  background-color: var(--secondary);
+}
+
+.btn-rect {
+  width: 32px;
+  height: 32px;
+}

package/src/shared/components/ImageEditor/ui/button-crop/ButtonCrop.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { ButtonCrop } from "./ButtonCrop";
+import { Crop } from "../../assets/icons";
+
+const meta = {
+  title: "ImageEditor/UI/ButtonCrop",
+  component: ButtonCrop,
+  tags: ["autodocs"],
+  args: {
+    icon: <Crop />,
+    label: "Crop",
+    onClick: fn(),
+  },
+} satisfies Meta<typeof ButtonCrop>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Inactive: Story = {};
+
+export const Active: Story = {
+  args: {
+    active: true,
+  },
+};

package/src/shared/components/ImageEditor/ui/button-crop/ButtonCrop.tsx

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import "./button-crop.css";
+
+interface ButtonCropProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  active?: boolean;
+  icon: React.ReactNode;
+  label: string;
+}
+
+export const ButtonCrop = forwardRef<HTMLButtonElement, ButtonCropProps>(
+  ({ className = "", active = false, icon, label, ...props }, ref) => {
+    const combinedClasses = `btn-crop ${className}`.trim();
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-pressed={active}
+        className={combinedClasses}
+        {...props}
+      >
+        {icon}
+        <span className="semibold">{label}</span>
+      </button>
+    );
+  },
+);
+
+ButtonCrop.displayName = "ButtonCrop";

package/src/shared/components/ImageEditor/ui/button-crop/button-crop.css

@@ -0,0 +1,38 @@
+.btn-crop {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+}
+
+.btn-crop:hover:not([aria-pressed="true"]) {
+  background-color: var(--secondary);
+}
+
+.btn-crop[aria-pressed="true"] {
+  border-color: var(--accent-blue);
+  background-color: var(--accent-blue-light);
+  color: var(--foreground);
+}
+
+.btn-crop svg {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.btn-crop span {
+  white-space: nowrap;
+}

package/src/shared/components/ImageEditor/ui/index.ts

@@ -0,0 +1,6 @@
+export { Button } from "./button/Button";
+export { ButtonCrop } from "./button-crop/ButtonCrop";
+export { Separator } from "./separator/Separator";
+export { Select } from "./select/Select";
+export { Input } from "./input/Input";
+export { InputPixel } from "./input-pixel/InputPixel";

package/src/shared/components/ImageEditor/ui/input/Input.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Input } from "./Input";
+
+const meta = {
+  title: "ImageEditor/UI/Input",
+  component: Input,
+  tags: ["autodocs"],
+  args: {
+    placeholder: "Type here...",
+    onChange: fn(),
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 320 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Text: Story = {
+  args: {
+    type: "text",
+    value: "Sample text",
+  },
+};
+
+export const Number: Story = {
+  args: {
+    type: "number",
+    value: 42,
+  },
+};
+
+export const NumberWithArrows: Story = {
+  args: {
+    type: "number",
+    hideArrows: false,
+    value: 42,
+  },
+};

package/src/shared/components/ImageEditor/ui/input/Input.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from "react";
+import "./input.css";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  hideArrows?: boolean;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className = "", type = "text", hideArrows = true, ...props }, ref) => {
+    const numberClass =
+      type === "number" && hideArrows ? "input-number-clean" : "";
+    const combinedClasses = `input ${numberClass} ${className}`.trim();
+
+    return (
+      <input ref={ref} type={type} className={combinedClasses} {...props} />
+    );
+  },
+);
+
+Input.displayName = "Input";

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

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

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

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

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