pixedi 1.0.0 → 1.0.2

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

@@ -1,54 +0,0 @@
-import { useBellow } from "../hooks";
-import { Settings, X } from "../assets/icons";
-import { Button, Separator } from "../ui";
-import { SidebarResize } from "./SidebarResize";
-import { SidebarCrop } from "./SidebarCrop";
-import { SidebarPresets } from "./SidebarPresets";
-import { useImageEditorContext } from "../provider/useImageEditorContext";
-import "./sidebar.css";
-
-export const Sidebar = () => {
-  const { getSidebar, setSidebar } = useImageEditorContext();
-  const isSidebarOpen = getSidebar();
-  const isBellowMd = useBellow("md");
-
-  return (
-    <>
-      <Button
-        variant="outline"
-        className="sidebar-settings"
-        onClick={() => setSidebar(true)}
-      >
-        <Settings />
-      </Button>
-      <div
-        className="sidebar"
-        style={{
-          transform:
-            isBellowMd && isSidebarOpen
-              ? "translateX(-320px)"
-              : "translateX(0%)",
-        }}
-      >
-        <div className="sidebar-container">
-          <div className="sidebar-content">
-            {isBellowMd && (
-              <Button
-                variant="ghost"
-                className="sidebar-close-btn btn-rect"
-                onClick={() => setSidebar(false)}
-              >
-                <X />
-              </Button>
-            )}
-            <SidebarResize />
-            <Separator className="sidebar-separator" />
-            <SidebarCrop />
-            <Separator className="sidebar-separator" />
-            <SidebarPresets />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};

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

@@ -1,57 +0,0 @@
-import { Crop, Image, Square } from "../assets/icons";
-import { useImageEditorContext } from "../provider/useImageEditorContext";
-import type { ActionCrop } from "../types";
-import { ButtonCrop } from "../ui";
-
-export const SidebarCrop = () => {
-  const { currentAction, setCurrentAction, getLastHistoryItem, setSidebar } =
-    useImageEditorContext();
-  const { name, args } = currentAction || {};
-  const currentValue = name === "crop" ? (args?.id as string) : "";
-  const { width, height } = getLastHistoryItem();
-  const originRatio = width / height;
-
-  const handleClick = (value: string) => {
-    if (value === currentValue) {
-      return;
-    }
-
-    const ratio = value === "1:1" ? 1 : originRatio;
-
-    const args: ActionCrop = {
-      id: value,
-      ratio,
-      isFree: value === "freeform",
-      preset: null,
-    };
-
-    setCurrentAction({ name: "crop", args });
-    setSidebar(false);
-  };
-
-  return (
-    <div className="sidebar-crop">
-      <h4>Crop</h4>
-      <div className="sidebar-crop-ratios">
-        <ButtonCrop
-          label="Freeform"
-          icon={<Crop />}
-          active={currentValue === "freeform"}
-          onClick={() => handleClick("freeform")}
-        />
-        <ButtonCrop
-          label="Original"
-          icon={<Image />}
-          active={currentValue === "original"}
-          onClick={() => handleClick("original")}
-        />
-        <ButtonCrop
-          label="1:1"
-          icon={<Square />}
-          active={currentValue === "1:1"}
-          onClick={() => handleClick("1:1")}
-        />
-      </div>
-    </div>
-  );
-};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,20 +0,0 @@
-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";