opacacms 0.1.0 → 0.1.2

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

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

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

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

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

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

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

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

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

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

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