@arcote.tech/arc-ds 0.4.1

package/src/ds/card-modal/card-modal.tsx

@@ -0,0 +1,161 @@
+import { Button } from "../button/button";
+import { motion, AnimatePresence } from "framer-motion";
+import { X } from "lucide-react";
+import { useEffect } from "react";
+import type { ReactNode } from "react";
+import type { ArcObjectAny } from "@arcote.tech/arc";
+import { Form } from "../form/form";
+import type { FormProps } from "../form/form";
+
+// ---------------------------------------------------------------------------
+// CardModal — generic modal shell, no buttons
+// ---------------------------------------------------------------------------
+
+export interface CardModalProps {
+  layoutId: string;
+  isOpen: boolean;
+  title: ReactNode;
+  onClose: () => void;
+  children: ReactNode;
+}
+
+export function CardModal({
+  layoutId,
+  isOpen,
+  title,
+  onClose,
+  children,
+}: CardModalProps) {
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [isOpen, onClose]);
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <motion.div
+            key="card-modal-backdrop"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
+            onClick={onClose}
+          />
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
+            <motion.div
+              layoutId={layoutId}
+              className="w-full max-w-lg max-h-[85vh] flex flex-col rounded-2xl bg-card border border-border shadow-2xl pointer-events-auto"
+            >
+              <div className="flex items-center justify-between px-6 pt-6 pb-0 mb-5 shrink-0">
+                <h2 className="text-lg font-semibold">{title}</h2>
+                <button
+                  onClick={onClose}
+                  className="rounded-full p-1.5 hover:bg-muted transition-colors"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+              <div className="px-6 pb-6 overflow-y-auto min-h-0">
+                {children}
+              </div>
+            </motion.div>
+          </div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ModalActions — save/cancel buttons, reusable
+// ---------------------------------------------------------------------------
+
+export interface ModalActionsProps {
+  onClose: () => void;
+  isSaving?: boolean;
+  cancelLabel?: ReactNode;
+  saveLabel?: ReactNode;
+  savingLabel?: ReactNode;
+}
+
+export function ModalActions({
+  onClose,
+  isSaving,
+  cancelLabel = "Anuluj",
+  saveLabel = "Zapisz",
+  savingLabel = "Zapisywanie...",
+}: ModalActionsProps) {
+  return (
+    <div className="flex justify-end gap-2 mt-6 pt-4 border-t border-border">
+      <Button label={cancelLabel} onClick={onClose} />
+      <button
+        type="submit"
+        className="inline-flex items-center justify-center rounded-xl bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 disabled:opacity-50"
+        disabled={isSaving === true}
+      >
+        {isSaving ? savingLabel : saveLabel}
+      </button>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CardFormModal — CardModal + Form integrated
+// ---------------------------------------------------------------------------
+
+export type CardFormModalProps<T extends ArcObjectAny> = {
+  layoutId: string;
+  isOpen: boolean;
+  title: ReactNode;
+  onClose: () => void;
+  isSaving?: boolean;
+  cancelLabel?: ReactNode;
+  saveLabel?: ReactNode;
+  savingLabel?: ReactNode;
+} & Pick<FormProps<T>, "schema" | "defaults" | "onSubmit" | "render">;
+
+export function CardFormModal<T extends ArcObjectAny>({
+  layoutId,
+  isOpen,
+  title,
+  onClose,
+  isSaving,
+  cancelLabel,
+  saveLabel,
+  savingLabel,
+  schema,
+  defaults,
+  onSubmit,
+  render,
+}: CardFormModalProps<T>) {
+  return (
+    <CardModal layoutId={layoutId} isOpen={isOpen} title={title} onClose={onClose}>
+      <Form
+        schema={schema}
+        defaults={defaults}
+        onSubmit={onSubmit}
+        render={(Fields, values) => (
+          <>
+            <div className="space-y-4">
+              {render(Fields, values)}
+            </div>
+            <ModalActions
+              onClose={onClose}
+              isSaving={isSaving}
+              cancelLabel={cancelLabel}
+              saveLabel={saveLabel}
+              savingLabel={savingLabel}
+            />
+          </>
+        )}
+      />
+    </CardModal>
+  );
+}

package/src/ds/display-mode.tsx

@@ -0,0 +1,32 @@
+import { createContext, useContext, type ReactNode } from "react";
+import type { DisplayMode } from "./types";
+
+const DisplayModeContext = createContext<DisplayMode>("default");
+
+interface DisplayModeProviderProps {
+  mode: DisplayMode;
+  children: ReactNode;
+}
+
+/**
+ * Deklaruje tryb wyświetlania dla subtree.
+ *
+ * Komponenty DS czytają ten context i dostosowują rendering.
+ * SlotRenderer ustawia go automatycznie na podstawie slotId.
+ * Można też ustawić ręcznie lub nadpisać propem na komponencie.
+ */
+export function DisplayModeProvider({
+  mode,
+  children,
+}: DisplayModeProviderProps) {
+  return (
+    <DisplayModeContext.Provider value={mode}>
+      {children}
+    </DisplayModeContext.Provider>
+  );
+}
+
+/** Zwraca aktualny display mode z contextu. */
+export function useDisplayMode(): DisplayMode {
+  return useContext(DisplayModeContext);
+}

package/src/ds/ds-provider.tsx

@@ -0,0 +1,85 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import type {
+  DSComponentMap,
+  DSComponentOverrides,
+  DSVariantOverrides,
+} from "./types";
+
+// ---------------------------------------------------------------------------
+// Contexts — osobne dla wydajności
+// ---------------------------------------------------------------------------
+
+const ComponentOverridesContext = createContext<DSComponentOverrides>({});
+const VariantOverridesContext = createContext<DSVariantOverrides>({});
+
+// ---------------------------------------------------------------------------
+// Provider
+// ---------------------------------------------------------------------------
+
+interface DesignSystemProviderProps {
+  /** Nadpisanie komponentów — pełna zamiana. */
+  components?: DSComponentOverrides;
+  /** Nadpisanie CVA wariantów — merge z domyślnymi. */
+  variants?: DSVariantOverrides;
+  children: ReactNode;
+}
+
+/**
+ * DesignSystemProvider — nadpisywanie komponentów i wariantów DS.
+ *
+ * Nested providers się mergują — wewnętrzny nadpisuje zewnętrzny.
+ * Oba contexty są ref-stable (useMemo) — zero re-renderów
+ * dopóki props się nie zmienią.
+ */
+export function DesignSystemProvider({
+  components,
+  variants,
+  children,
+}: DesignSystemProviderProps) {
+  const parentComponents = useContext(ComponentOverridesContext);
+  const parentVariants = useContext(VariantOverridesContext);
+
+  const mergedComponents = useMemo(
+    () => ({ ...parentComponents, ...components }),
+    [parentComponents, components],
+  );
+
+  const mergedVariants = useMemo(
+    () => ({ ...parentVariants, ...variants }),
+    [parentVariants, variants],
+  );
+
+  return (
+    <ComponentOverridesContext.Provider value={mergedComponents}>
+      <VariantOverridesContext.Provider value={mergedVariants}>
+        {children}
+      </VariantOverridesContext.Provider>
+    </ComponentOverridesContext.Provider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Hooks
+// ---------------------------------------------------------------------------
+
+/**
+ * Pobiera komponent DS — override jeśli istnieje, inaczej default.
+ */
+export function useDsComponent<K extends keyof DSComponentMap>(
+  name: K,
+  defaultComponent: DSComponentMap[K],
+): DSComponentMap[K] {
+  const overrides = useContext(ComponentOverridesContext);
+  return (overrides[name] as DSComponentMap[K]) ?? defaultComponent;
+}
+
+/**
+ * Pobiera CVA variant overrides dla danego komponentu.
+ * Zwraca undefined jeśli brak overrides.
+ */
+export function useDsVariantOverrides<K extends keyof DSComponentMap>(
+  name: K,
+): DSVariantOverrides[K] | undefined {
+  const overrides = useContext(VariantOverridesContext);
+  return overrides[name];
+}

package/src/ds/form/field.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import type { ArcElement } from "@arcote.tech/arc";
+import React, { createContext, useCallback, useContext, useMemo } from "react";
+import { FormContext } from "./form";
+import { useFormPartField } from "./form-part";
+
+// Helper function to get nested value using dot notation
+function getNestedValue(obj: any, path: string): any {
+  return path.split(".").reduce((current, key) => current?.[key], obj);
+}
+
+export type FormFieldContext = { errors: any; messages: any };
+
+export const FormFieldContext = createContext<null | FormFieldContext>(null);
+
+export function useFormField() {
+  const context = useContext(FormFieldContext);
+  if (!context)
+    throw new Error("useFormField must be used within a FormFieldProvider");
+  return context;
+}
+
+type Translations<E extends ArcElement> =
+  | {
+      [K in keyof Exclude<ReturnType<E["validate"]>, false>]: (
+        data: Exclude<
+          Exclude<ReturnType<E["validate"]>, false>[K],
+          undefined | false
+        >,
+      ) => string;
+    }
+  | ((data: any) => string)
+  | string;
+
+type FormFieldProps<E extends ArcElement, S = undefined> = {
+  translations: Translations<E>;
+  render: (field: FormFieldData<E, S>) => React.ReactNode;
+};
+
+export type FormFieldData<T, S = undefined> = {
+  onChange: (value: any) => void;
+  value: any;
+  defaultValue?: any;
+  name: string;
+  subFields?: S;
+  setFieldValue: (field: string, value: any) => void;
+};
+
+export function FormField<E extends ArcElement, S = undefined>(
+  name: string,
+  defaultValue?: any,
+  subFields?: S,
+) {
+  return ({ translations, render }: FormFieldProps<E, S>) => {
+    const form = useContext(FormContext);
+    if (!form) throw new Error("FormField must be used within a Form");
+
+    useFormPartField(name);
+
+    const { values, errors, dirty, isSubmitted, setFieldValue, setFieldDirty } =
+      form;
+
+    const schemaErrors = errors?.["schema"] || {};
+
+    const fieldErrors = schemaErrors[name as any] || false;
+    const value = getNestedValue(values, name) ?? defaultValue ?? "";
+    const isDirty = dirty.has(name);
+
+    const handleChange = useCallback(
+      (value: any) => {
+        if (value?.target?.value !== undefined) {
+          setFieldValue(name, value.target.value);
+        } else {
+          setFieldValue(name, value);
+        }
+        if (!isDirty) {
+          setFieldDirty(name);
+        }
+      },
+      [name, isDirty, setFieldValue, setFieldDirty],
+    );
+
+    const errorMessages = fieldErrors
+      ? Object.entries(fieldErrors)
+          .map(([key, value]) => {
+            if (!value) return;
+            if (!translations) return;
+
+            const translation =
+              translations[key as keyof typeof translations] || translations;
+            if (typeof translation === "function") {
+              return (translation as any)(value);
+            }
+
+            if (typeof translation === "string") {
+              return translation;
+            }
+          })
+          .filter(Boolean)
+      : [];
+
+    const contextValue = useMemo(
+      () => ({
+        errors: isSubmitted ? fieldErrors : false,
+        messages: errorMessages,
+      }),
+      [fieldErrors, isSubmitted, errorMessages],
+    );
+
+    return (
+      <FormFieldContext.Provider value={contextValue}>
+        {render({
+          onChange: handleChange,
+          name: name.toString(),
+          value,
+          defaultValue,
+          subFields,
+          setFieldValue: setFieldValue as any,
+        })}
+      </FormFieldContext.Provider>
+    );
+  };
+}