@duskmoon-dev/components 0.1.2

package/dist/components/form/index.js

@@ -0,0 +1,449 @@
+"use client";
+
+// src/components/form/Form.tsx
+import React, {
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/form.ts
+var formClass = "form";
+var formItemClass = "form-item";
+var formItemLabelClass = "form-item-label";
+var formItemControlClass = "form-item-control";
+var formItemExtraClass = "form-item-extra";
+var formItemHelpClass = "form-item-help";
+var formItemRequiredClass = "form-item-required";
+var formItemErrorClass = "form-item-error";
+var formListClass = "form-list";
+var formErrorListClass = "form-error-list";
+function getFormClasses({
+  layout = "horizontal",
+  disabled,
+  className
+}) {
+  return cn(formClass, `form-${layout}`, disabled && "form-disabled", className);
+}
+function getFormItemClasses({
+  required,
+  error,
+  className
+}) {
+  return cn(formItemClass, required && formItemRequiredClass, error && formItemErrorClass, className);
+}
+
+// src/components/form/Form.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function nameKey(name) {
+  return Array.isArray(name) ? name.join(".") : String(name);
+}
+function isEmpty(value) {
+  return value === undefined || value === null || value === "" || Array.isArray(value) && value.length === 0;
+}
+function createFormStore(initialValues = {}) {
+  let initial = { ...initialValues };
+  let values = { ...initialValues };
+  let submitHandler = () => {
+    return;
+  };
+  let version = 0;
+  const listeners = new Set;
+  const rules = new Map;
+  function emit() {
+    version += 1;
+    for (const listener of listeners) {
+      listener();
+    }
+  }
+  const form = {
+    getFieldValue: (name) => values[nameKey(name)],
+    getFieldsValue: () => ({ ...values }),
+    setFieldValue: (name, value) => {
+      values = { ...values, [nameKey(name)]: value };
+      emit();
+    },
+    setFieldsValue: (nextValues) => {
+      values = { ...values, ...nextValues };
+      emit();
+    },
+    resetFields: (names) => {
+      if (!names) {
+        values = { ...initial };
+      } else {
+        values = { ...values };
+        for (const name of names) {
+          values[nameKey(name)] = initial[nameKey(name)];
+        }
+      }
+      emit();
+    },
+    validateFields: async (names) => {
+      const keys = names?.map(nameKey);
+      const errorFields = [];
+      for (const entry of rules.values()) {
+        const key = nameKey(entry.name);
+        if (keys && !keys.includes(key)) {
+          continue;
+        }
+        const value = values[key];
+        const errors = [];
+        for (const rule of entry.rules) {
+          if (rule.required && isEmpty(value)) {
+            errors.push(rule.message ?? "Required");
+          }
+          if (rule.validator) {
+            try {
+              await rule.validator(rule, value);
+            } catch (error) {
+              errors.push(error instanceof Error ? error.message : String(error));
+            }
+          }
+        }
+        if (errors.length > 0) {
+          errorFields.push({ name: entry.name, errors });
+        }
+      }
+      if (errorFields.length > 0) {
+        throw errorFields;
+      }
+      return { ...values };
+    },
+    submit: () => submitHandler(),
+    __subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    __getVersion: () => version,
+    __setSubmit: (submit) => {
+      submitHandler = submit;
+    },
+    __setInitialValues: (nextInitialValues) => {
+      initial = { ...nextInitialValues };
+    },
+    __getRules: () => rules
+  };
+  return form;
+}
+var FormContext = createContext(null);
+var ProviderContext = createContext({});
+function useInternalForm(form, initialValues) {
+  const [internalForm] = useState(() => form ?? createFormStore(initialValues));
+  return internalForm;
+}
+function useForm(form) {
+  return [useInternalForm(form)];
+}
+function useFormInstance() {
+  const context = useContext(FormContext);
+  if (!context) {
+    throw new Error("Form.useFormInstance must be used inside Form");
+  }
+  return context.form;
+}
+function useFormVersion(form) {
+  const internal = form;
+  return useSyncExternalStore(internal?.__subscribe ?? (() => () => {
+    return;
+  }), internal?.__getVersion ?? (() => 0), internal?.__getVersion ?? (() => 0));
+}
+function useWatch(name, form) {
+  const context = useContext(FormContext);
+  const targetForm = form ?? context?.form;
+  useFormVersion(targetForm);
+  return targetForm?.getFieldValue(name);
+}
+var FormBase = forwardRef(({
+  children,
+  className,
+  disabled,
+  form,
+  initialValues,
+  layout = "horizontal",
+  labelCol,
+  wrapperCol,
+  colon = true,
+  requiredMark = true,
+  onFinish,
+  onFinishFailed,
+  onValuesChange,
+  name,
+  ...props
+}, ref) => {
+  const formInstance = useInternalForm(form, initialValues);
+  const initialValuesRef = useRef(initialValues);
+  const [errors, setErrors] = useState({});
+  const [, rerender] = useState(0);
+  const providerForms = useContext(ProviderContext);
+  const formName = String(name ?? "default");
+  useImperativeHandle(ref, () => formInstance);
+  useLayoutEffect(() => {
+    const internal = formInstance;
+    internal.__setInitialValues?.(initialValuesRef.current ?? {});
+    if (initialValuesRef.current) {
+      formInstance.setFieldsValue(initialValuesRef.current);
+    }
+  }, [formInstance]);
+  useLayoutEffect(() => {
+    const internal = formInstance;
+    return internal.__subscribe?.(() => rerender((value) => value + 1));
+  }, [formInstance]);
+  useEffect(() => {
+    formInstance.__setSubmit?.(() => {
+      submit();
+    });
+  });
+  const setFieldError = useCallback((fieldName, fieldErrors) => {
+    setErrors((current) => ({
+      ...current,
+      [nameKey(fieldName)]: fieldErrors
+    }));
+  }, []);
+  const getFieldError = useCallback((fieldName) => {
+    return errors[nameKey(fieldName)] ?? [];
+  }, [errors]);
+  const registerField = useCallback((fieldName, rules = []) => {
+    const store = formInstance.__getRules?.();
+    store?.set(nameKey(fieldName), { name: fieldName, rules });
+    return () => {
+      store?.delete(nameKey(fieldName));
+    };
+  }, [formInstance]);
+  async function submit() {
+    try {
+      const values = await formInstance.validateFields();
+      setErrors({});
+      onFinish?.(values);
+      providerForms[formName]?.submit;
+    } catch (error) {
+      const errorFields = Array.isArray(error) ? error : [];
+      const nextErrors = {};
+      for (const field of errorFields) {
+        nextErrors[nameKey(field.name)] = field.errors;
+      }
+      setErrors(nextErrors);
+      onFinishFailed?.({
+        errorFields,
+        values: formInstance.getFieldsValue()
+      });
+    }
+  }
+  const contextValue = useMemo(() => ({
+    form: formInstance,
+    disabled,
+    layout,
+    labelCol,
+    wrapperCol,
+    colon,
+    requiredMark,
+    registerField,
+    getFieldError,
+    setFieldError
+  }), [
+    colon,
+    disabled,
+    formInstance,
+    getFieldError,
+    labelCol,
+    layout,
+    registerField,
+    requiredMark,
+    setFieldError,
+    wrapperCol
+  ]);
+  return /* @__PURE__ */ jsx(FormContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsx("form", {
+      ...props,
+      name,
+      className: getFormClasses({ layout, disabled, className }),
+      onSubmit: (event) => {
+        event.preventDefault();
+        submit();
+      },
+      onChange: () => {
+        onValuesChange?.({}, formInstance.getFieldsValue());
+      },
+      children
+    })
+  });
+});
+FormBase.displayName = "Form";
+var FormItem = forwardRef(({
+  children,
+  className,
+  extra,
+  help,
+  label,
+  name,
+  noStyle,
+  required,
+  rules = [],
+  trigger = "onChange",
+  valuePropName = "value",
+  ...props
+}, ref) => {
+  const context = useContext(FormContext);
+  useFormVersion(context?.form);
+  const fieldErrors = name && context ? context.getFieldError(name) : [];
+  const ruleRequired = required ?? rules.some((rule) => rule.required);
+  useEffect(() => {
+    if (!name || !context) {
+      return;
+    }
+    return context.registerField(name, rules);
+  }, [context, name, rules]);
+  function renderControl() {
+    if (!name || !context || !isValidElement(children)) {
+      return children;
+    }
+    const key = nameKey(name);
+    const value = context.form.getFieldValue(name);
+    const childProps = children.props;
+    const originalTrigger = childProps[trigger];
+    return React.cloneElement(children, {
+      [valuePropName]: valuePropName === "checked" ? Boolean(value) : value ?? "",
+      disabled: childProps.disabled ?? context.disabled,
+      [trigger]: (...args) => {
+        const event = args[0];
+        const nextValue = valuePropName === "checked" ? event?.target?.checked : event?.target?.value ?? args[0];
+        context.form.setFieldValue(key, nextValue);
+        context.setFieldError(name, []);
+        originalTrigger?.(...args);
+      }
+    });
+  }
+  if (noStyle) {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: renderControl()
+    });
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getFormItemClasses({
+      required: ruleRequired,
+      error: fieldErrors.length > 0,
+      className
+    }),
+    children: [
+      label ? /* @__PURE__ */ jsx("label", {
+        className: formItemLabelClass,
+        children: label
+      }) : null,
+      /* @__PURE__ */ jsx("div", {
+        className: formItemControlClass,
+        children: renderControl()
+      }),
+      extra ? /* @__PURE__ */ jsx("div", {
+        className: formItemExtraClass,
+        children: extra
+      }) : null,
+      help || fieldErrors.length > 0 ? /* @__PURE__ */ jsx("div", {
+        className: formItemHelpClass,
+        children: help ?? fieldErrors.map((error, index) => /* @__PURE__ */ jsx("div", {
+          children: error
+        }, index))
+      }) : null
+    ]
+  });
+});
+FormItem.displayName = "Form.Item";
+function FormList({ name, initialValue = [], children }) {
+  const form = useFormInstance();
+  useFormVersion(form);
+  const list = form.getFieldValue(name) ?? initialValue;
+  const fields = list.map((_, index) => ({
+    key: index,
+    name: index,
+    fieldKey: index
+  }));
+  function setList(next) {
+    form.setFieldValue(name, next);
+  }
+  return /* @__PURE__ */ jsx("div", {
+    className: formListClass,
+    children: children(fields, {
+      add: (defaultValue, insertIndex = list.length) => {
+        const next = [...list];
+        next.splice(insertIndex, 0, defaultValue);
+        setList(next);
+      },
+      remove: (index) => {
+        const indexes = Array.isArray(index) ? index : [index];
+        setList(list.filter((_, itemIndex) => !indexes.includes(itemIndex)));
+      },
+      move: (from, to) => {
+        const next = [...list];
+        const [item] = next.splice(from, 1);
+        next.splice(to, 0, item);
+        setList(next);
+      }
+    }, { errors: [] })
+  });
+}
+var ErrorList = forwardRef(({ errors = [], className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: [formErrorListClass, className].filter(Boolean).join(" "),
+  children: errors.map((error, index) => /* @__PURE__ */ jsx("div", {
+    children: error
+  }, index))
+}));
+ErrorList.displayName = "Form.ErrorList";
+function FormProvider({ children }) {
+  return /* @__PURE__ */ jsx(ProviderContext.Provider, {
+    value: {},
+    children
+  });
+}
+var Form = FormBase;
+Form.useForm = useForm;
+Form.useFormInstance = useFormInstance;
+Form.useWatch = useWatch;
+Form.Item = FormItem;
+Form.List = FormList;
+Form.ErrorList = ErrorList;
+Form.Provider = FormProvider;
+Form.Context = FormContext;
+Form.create = () => {
+  return;
+};
+export {
+  FormContext,
+  Form
+};

package/dist/components/grid/Grid.d.ts

@@ -0,0 +1,8 @@
+import type { Breakpoint, BreakpointScreenInput, BreakpointScreenMap } from "./Grid.types";
+export declare function useBreakpoint(fallbackScreens?: BreakpointScreenInput): BreakpointScreenMap;
+export declare function useWatch(breakpoint: Breakpoint): boolean;
+export declare function useWatch<T>(selector: (screens: BreakpointScreenMap) => T): T;
+export declare const Grid: {
+    readonly useBreakpoint: typeof useBreakpoint;
+    readonly useWatch: typeof useWatch;
+};

package/dist/components/grid/Grid.types.d.ts

@@ -0,0 +1,5 @@
+import type { gridBreakpointQueries, gridBreakpoints } from "../../classes/grid";
+export type Breakpoint = (typeof gridBreakpoints)[number];
+export type BreakpointQueryMap = typeof gridBreakpointQueries;
+export type BreakpointScreenMap = Record<Breakpoint, boolean>;
+export type BreakpointScreenInput = Partial<BreakpointScreenMap>;

package/dist/components/grid/index.d.ts

@@ -0,0 +1,2 @@
+export { Grid, useBreakpoint, useWatch } from "./Grid";
+export type { Breakpoint, BreakpointQueryMap, BreakpointScreenInput, BreakpointScreenMap, } from "./Grid.types";

package/dist/components/grid/index.js

@@ -0,0 +1,104 @@
+"use client";
+
+// src/components/grid/Grid.ts
+import { useMemo, useSyncExternalStore } from "react";
+
+// src/classes/grid.ts
+var gridBreakpoints = ["xs", "sm", "md", "lg", "xl", "xxl"];
+var gridBreakpointQueries = {
+  xs: "(max-width: 575px)",
+  sm: "(min-width: 576px)",
+  md: "(min-width: 768px)",
+  lg: "(min-width: 992px)",
+  xl: "(min-width: 1200px)",
+  xxl: "(min-width: 1600px)"
+};
+
+// src/components/grid/Grid.ts
+var defaultScreens = gridBreakpoints.reduce((screens, breakpoint) => {
+  screens[breakpoint] = false;
+  return screens;
+}, {});
+var mediaQueries = {};
+var matchMediaSource;
+var currentScreens = defaultScreens;
+function normalizeScreens(screens = {}) {
+  return gridBreakpoints.reduce((normalized, breakpoint) => {
+    normalized[breakpoint] = Boolean(screens[breakpoint]);
+    return normalized;
+  }, { ...defaultScreens });
+}
+function canUseMatchMedia() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function";
+}
+function getMediaQueries() {
+  if (!canUseMatchMedia()) {
+    return {};
+  }
+  if (matchMediaSource !== window.matchMedia) {
+    matchMediaSource = window.matchMedia;
+    mediaQueries = {};
+  }
+  mediaQueries = gridBreakpoints.reduce((queries, breakpoint) => {
+    queries[breakpoint] = queries[breakpoint] ?? window.matchMedia(gridBreakpointQueries[breakpoint]);
+    return queries;
+  }, { ...mediaQueries });
+  return mediaQueries;
+}
+function getCurrentScreens() {
+  const queries = getMediaQueries();
+  const nextScreens = normalizeScreens(gridBreakpoints.reduce((screens, breakpoint) => {
+    screens[breakpoint] = Boolean(queries[breakpoint]?.matches);
+    return screens;
+  }, {}));
+  const hasChanged = gridBreakpoints.some((breakpoint) => currentScreens[breakpoint] !== nextScreens[breakpoint]);
+  if (hasChanged) {
+    currentScreens = nextScreens;
+  }
+  return currentScreens;
+}
+function subscribe(onStoreChange) {
+  const queries = getMediaQueries();
+  if (!Object.keys(queries).length) {
+    return () => {};
+  }
+  const handler = () => onStoreChange();
+  gridBreakpoints.forEach((breakpoint) => {
+    const query = queries[breakpoint];
+    if (query?.addEventListener) {
+      query.addEventListener("change", handler);
+    } else {
+      query?.addListener?.(handler);
+    }
+  });
+  return () => {
+    gridBreakpoints.forEach((breakpoint) => {
+      const query = queries[breakpoint];
+      if (query?.removeEventListener) {
+        query.removeEventListener("change", handler);
+      } else {
+        query?.removeListener?.(handler);
+      }
+    });
+  };
+}
+function useBreakpoint(fallbackScreens) {
+  const fallback = useMemo(() => normalizeScreens(fallbackScreens), [fallbackScreens]);
+  return useSyncExternalStore(subscribe, canUseMatchMedia() ? getCurrentScreens : () => fallback, () => fallback);
+}
+function useWatch(breakpointOrSelector) {
+  const screens = useBreakpoint();
+  if (typeof breakpointOrSelector === "function") {
+    return breakpointOrSelector(screens);
+  }
+  return screens[breakpointOrSelector];
+}
+var Grid = {
+  useBreakpoint,
+  useWatch
+};
+export {
+  useWatch,
+  useBreakpoint,
+  Grid
+};

package/dist/components/image/Image.d.ts

@@ -0,0 +1,2 @@
+import type { ImageComponent } from "./Image.types";
+export declare const Image: ImageComponent;

package/dist/components/image/Image.types.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export interface ImagePreviewConfig {
+    visible?: boolean;
+    mask?: ReactNode;
+    src?: string;
+    onVisibleChange?: (visible: boolean, prevVisible: boolean) => void;
+}
+export type ImagePreview = boolean | ImagePreviewConfig;
+export interface ImageProps extends Omit<ComponentProps<"img">, "alt" | "children" | "fallback" | "placeholder" | "preview" | "src"> {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    placeholder?: ReactNode | boolean;
+    preview?: ImagePreview;
+    imgClassName?: string;
+    wrapperClassName?: string;
+}
+export interface ImagePreviewGroupProps extends ComponentProps<"div"> {
+    preview?: ImagePreview;
+    children?: ReactNode;
+}
+export type ImagePreviewGroupComponent = ForwardRefExoticComponent<ImagePreviewGroupProps & RefAttributes<HTMLDivElement>>;
+export type ImageComponent = ForwardRefExoticComponent<ImageProps & RefAttributes<HTMLDivElement>> & {
+    PreviewGroup: ImagePreviewGroupComponent;
+};

package/dist/components/image/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Image";
+export * from "./Image.types";