opacacms 0.1.0

package/src/admin/ui/components/ui/select.tsx

@@ -0,0 +1,187 @@
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cn } from "./utils";
+import "../../styles/select.scss";
+
+export interface SelectProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+const SelectContext = React.createContext<{
+  value?: string;
+  onValueChange?: (value: string) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerRef: React.RefObject<HTMLButtonElement | null>;
+} | null>(null);
+
+export function Select({
+  value,
+  onValueChange,
+  children,
+  open: controlledOpen,
+  onOpenChange,
+}: SelectProps & { open?: boolean; onOpenChange?: (open: boolean) => void }) {
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = onOpenChange ?? setInternalOpen;
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+
+  return (
+    <SelectContext.Provider value={{ value, onValueChange, open, setOpen, triggerRef }}>
+      <div className="opaca-ui-select">{children}</div>
+    </SelectContext.Provider>
+  );
+}
+
+export function SelectTrigger({
+  children,
+  className,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  const context = React.useContext(SelectContext);
+  if (!context) throw new Error("SelectTrigger must be used within a Select");
+
+  return (
+    <button
+      ref={context.triggerRef}
+      type="button"
+      className={cn("opaca-ui-select-trigger", className)}
+      onClick={() => context.setOpen(!context.open)}
+      data-state={context.open ? "open" : "closed"}
+    >
+      <span className="trigger-content">{children}</span>
+      <ChevronDown size={14} className="trigger-icon" />
+    </button>
+  );
+}
+
+export function SelectValue({ placeholder }: { placeholder?: string }) {
+  const context = React.useContext(SelectContext);
+  if (!context) throw new Error("SelectValue must be used within a Select");
+
+  return (
+    <span className={!context.value ? "trigger-placeholder" : ""}>
+      {context.value || placeholder}
+    </span>
+  );
+}
+
+export function SelectContent({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const context = React.useContext(SelectContext);
+  if (!context) throw new Error("SelectContent must be used within a Select");
+
+  const [position, setPosition] = React.useState({ top: 0, left: 0, width: 0 });
+
+  const updatePosition = React.useCallback(() => {
+    if (context.open && context.triggerRef.current) {
+      const rect = context.triggerRef.current.getBoundingClientRect();
+      setPosition({
+        top: rect.bottom,
+        left: rect.left,
+        width: rect.width,
+      });
+    }
+  }, [context.open, context.triggerRef]);
+
+  React.useEffect(() => {
+    if (context.open) {
+      updatePosition();
+      window.addEventListener("scroll", updatePosition, true);
+      window.addEventListener("resize", updatePosition);
+      return () => {
+        window.removeEventListener("scroll", updatePosition, true);
+        window.removeEventListener("resize", updatePosition);
+      };
+    }
+  }, [context.open, updatePosition]);
+
+  if (!context.open) return null;
+
+  return createPortal(
+    <div
+      className="opaca-ui-select-portal"
+      style={{
+        top: position.top + 4,
+        left: position.left,
+        width: position.width,
+      }}
+    >
+      <button
+        type="button"
+        className="opaca-ui-select-content-overlay"
+        style={{
+          position: "fixed",
+          inset: 0,
+          zIndex: -1,
+          background: "transparent",
+          border: "none",
+          padding: 0,
+          width: "100%",
+          height: "100%",
+          cursor: "default",
+        }}
+        onClick={() => context.setOpen(false)}
+        tabIndex={-1}
+        aria-hidden="true"
+      />
+      <div className={cn("opaca-ui-select-content", className)}>{children}</div>
+    </div>,
+    document.body,
+  );
+}
+
+export function SelectItem({
+  value,
+  children,
+  className,
+}: {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const context = React.useContext(SelectContext);
+  if (!context) throw new Error("SelectItem must be used within a Select");
+
+  const isSelected = context.value === value;
+
+  return (
+    <button
+      type="button"
+      className={cn("opaca-ui-select-item", className)}
+      data-selected={isSelected}
+      onClick={() => {
+        context.onValueChange?.(value);
+        context.setOpen(false);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function SelectGroup({ children }: { children: React.ReactNode }) {
+  return <div className="opaca-ui-select-group">{children}</div>;
+}
+
+export function SelectLabel({ children }: { children: React.ReactNode }) {
+  return <div className="opaca-ui-select-label">{children}</div>;
+}
+
+export function SelectSeparator() {
+  return <div className="opaca-ui-select-separator" />;
+}

package/src/admin/ui/components/ui/separator.tsx

@@ -0,0 +1,21 @@
+import type React from "react";
+
+interface SeparatorProps {
+  className?: string;
+  orientation?: "horizontal" | "vertical";
+  margin?: string;
+}
+
+export const Separator: React.FC<SeparatorProps> = ({
+  className = "",
+  orientation = "horizontal",
+  margin,
+}) => {
+  return (
+    <div
+      className={`opaca-separator ${orientation} ${className}`}
+      style={margin ? { margin } : undefined}
+      role="none"
+    />
+  );
+};

package/src/admin/ui/components/ui/sheet.tsx

@@ -0,0 +1,106 @@
+import type * as React from "react";
+import { createPortal } from "react-dom";
+import { cn } from "./utils";
+import "../../styles/sheet.scss";
+
+export function Sheet({
+  open,
+  onOpenChange,
+  children,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+}) {
+  if (!open) return null;
+  return createPortal(
+    <div className="opaca-ui-sheet-portal">
+      <button
+        type="button"
+        className="opaca-ui-sheet-overlay"
+        onClick={() => onOpenChange(false)}
+        tabIndex={-1}
+        aria-hidden="true"
+      />
+      <div className="opaca-ui-sheet-wrapper">{children}</div>
+    </div>,
+    document.body,
+  );
+}
+
+export function SheetContent({
+  children,
+  className,
+  onClose,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  onClose?: () => void;
+}) {
+  return (
+    <div className={cn("opaca-ui-sheet-content", className)}>
+      {children}
+      {onClose && (
+        <button type="button" onClick={onClose} className="opaca-ui-sheet-close">
+          <svg
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="opaca-ui-sheet-close-icon"
+          >
+            <line x1="18" x2="6" y1="6" y2="18"></line>
+            <line x1="6" x2="18" y1="6" y2="18"></line>
+          </svg>
+          <span className="opaca-ui-sr-only">Close</span>
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function SheetHeader({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <div className={cn("opaca-ui-sheet-header", className)}>{children}</div>;
+}
+
+export function SheetTitle({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <h2 className={cn("opaca-ui-sheet-title", className)}>{children}</h2>;
+}
+
+export function SheetDescription({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <p className={cn("opaca-ui-sheet-description", className)}>{children}</p>;
+}
+
+export function SheetFooter({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <div className={cn("opaca-ui-sheet-footer", className)}>{children}</div>;
+}

package/src/admin/ui/components/ui/tabs.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { cn } from "./utils";
+import "../../styles/tabs.scss";
+
+interface TabsContextValue {
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+
+const TabsContext = React.createContext<TabsContextValue>({});
+
+export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
+  ({ className, value, defaultValue, onValueChange, children, ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState<string | undefined>(
+      defaultValue,
+    );
+
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : uncontrolledValue;
+
+    const handleValueChange = React.useCallback(
+      (newValue: string) => {
+        if (!isControlled) {
+          setUncontrolledValue(newValue);
+        }
+        if (onValueChange) {
+          onValueChange(newValue);
+        }
+      },
+      [isControlled, onValueChange],
+    );
+
+    const contextValue = React.useMemo(
+      () => ({ value: currentValue, onValueChange: handleValueChange }),
+      [currentValue, handleValueChange],
+    );
+
+    return (
+      <TabsContext.Provider value={contextValue}>
+        <div ref={ref} className={cn("opaca-ui-tabs", className)} {...props}>
+          {children}
+        </div>
+      </TabsContext.Provider>
+    );
+  },
+);
+Tabs.displayName = "Tabs";
+
+export const TabsList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("opaca-ui-tabs-list", className)} role="tablist" {...props} />
+  ),
+);
+TabsList.displayName = "TabsList";
+
+export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string;
+}
+
+export const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
+  ({ className, value, disabled, ...props }, ref) => {
+    const context = React.useContext(TabsContext);
+    const isSelected = context.value === value;
+
+    return (
+      <button
+        type="button"
+        role="tab"
+        aria-selected={isSelected}
+        data-state={isSelected ? "active" : "inactive"}
+        disabled={disabled}
+        onClick={() => {
+          if (!disabled && context.onValueChange) {
+            context.onValueChange(value);
+          }
+        }}
+        ref={ref}
+        className={cn("opaca-ui-tabs-trigger", className)}
+        {...props}
+      />
+    );
+  },
+);
+TabsTrigger.displayName = "TabsTrigger";
+
+export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+
+export const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
+  ({ className, value, ...props }, ref) => {
+    const context = React.useContext(TabsContext);
+    const isSelected = context.value === value;
+
+    if (!isSelected) {
+      return null;
+    }
+
+    return (
+      <div
+        role="tabpanel"
+        data-state={isSelected ? "active" : "inactive"}
+        ref={ref}
+        className={cn("opaca-ui-tabs-content", className)}
+        {...props}
+      />
+    );
+  },
+);
+TabsContent.displayName = "TabsContent";

package/src/admin/ui/components/ui/utils.ts

@@ -0,0 +1,3 @@
+export function cn(...classes: (string | undefined | null | false)[]) {
+  return classes.filter(Boolean).join(" ");
+}

package/src/admin/ui/hooks/use-debounce.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/admin/ui/styles/_locale-switcher.scss

@@ -0,0 +1,33 @@
+.opaca-locale-switcher {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--opaca-card-bg);
+  padding: 0.25rem;
+  border-radius: var(--opaca-radius);
+  border: 1px solid var(--opaca-border);
+  box-shadow: var(--opaca-shadow-sm);
+}
+
+.opaca-locale-btn {
+  background: none;
+  border: none;
+  padding: 0.375rem 0.75rem;
+  border-radius: calc(var(--opaca-radius) - 2px);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--opaca-text-dim);
+  cursor: pointer;
+  transition: all var(--opaca-transition);
+
+  &:hover {
+    color: var(--opaca-text);
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  &.active {
+    background: var(--opaca-accent);
+    color: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+}

package/src/admin/ui/styles/accordion.scss

@@ -0,0 +1,60 @@
+.opaca-sidebar-accordion {
+  margin-bottom: 0.25rem;
+  border: none !important;
+  background: transparent !important;
+
+  .opaca-sidebar-accordion-trigger {
+    background: transparent;
+    padding: 1rem 0.75rem 0.5rem 0.75rem;
+    font-size: 0.625rem;
+    color: var(--opaca-text-dim);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    font-weight: 500;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    transition: color var(--opaca-transition);
+    border: none;
+    outline: none;
+
+    &:hover {
+      color: var(--opaca-text);
+    }
+
+    .opaca-sidebar-accordion-icon {
+      width: 12px;
+      height: 12px;
+      stroke: var(--opaca-text-dim);
+      fill: none;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1);
+    }
+
+    &[aria-expanded="true"] {
+      .opaca-sidebar-accordion-icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .opaca-sidebar-accordion-content {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.2s cubic-bezier(0.87, 0, 0.13, 1);
+
+    &[data-state="open"] {
+      grid-template-rows: 1fr;
+    }
+
+    .opaca-sidebar-accordion-content-inner {
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

package/src/admin/ui/styles/animations.scss

@@ -0,0 +1,41 @@
+@keyframes opaca-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes opaca-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes opaca-toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes opaca-pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.2;
+  }
+  50% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+}
+
+.opaca-spin {
+  animation: opaca-spin 1s linear infinite;
+}