@g4rcez/components 0.0.1 → 0.0.3

package/src/components/table/thead.tsx

@@ -1,108 +0,0 @@
-import { AnimatePresence, Reorder, TargetAndTransition } from "framer-motion";
-import { PlusIcon, SearchIcon } from "lucide-react";
-import { Dropdown } from "~/components/floating/dropdown";
-import { useReactive } from "~/hooks/use-reactive";
-import { ColumnHeaderFilter, createFilterFromCol } from "./filter";
-import { SorterHead } from "./sort";
-import { Col, getLabel, TableOperationProps } from "./table-lib";
-
-type TableHeaderProps<T extends {}> = {
-    headers: Col<T>[];
-} & Pick<TableOperationProps<T>, "filters" | "setFilters" | "setCols" | "setSorters" | "sorters">;
-
-const targetTransitionAnimate: TargetAndTransition = { opacity: 1 };
-
-const whileDrag: TargetAndTransition = { opacity: 0.75, backgroundColor: "#a1a1aa" };
-
-const exit: TargetAndTransition = { opacity: 0, transition: { duration: 0.4, type: "spring" } };
-
-type HeaderChildProps<T extends {}> = {
-    header: Col<T>;
-} & Pick<TableOperationProps<T>, "filters" | "setFilters" | "sorters" | "setSorters">;
-
-const HeaderChild = <T extends {}>(props: HeaderChildProps<T>) => {
-    const ownFilters = props.filters.filter((x) => x.name === props.header.id);
-    return (
-        <Reorder.Item
-            {...(props.header.thProps as {})}
-            as="th"
-            exit={exit}
-            initial={false}
-            dragSnapToOrigin
-            dragDirectionLock
-            value={props.header}
-            whileDrag={whileDrag}
-            animate={targetTransitionAnimate}
-            className={`hidden px-2 py-4 first:table-cell md:table-cell ${props.header.thProps?.className ?? ""}`}
-        >
-            <span className="flex items-center justify-between">
-                <span className="flex items-center gap-1">
-                    <Dropdown
-                        arrow
-                        trigger={<SearchIcon size={14} />}
-                        onChange={(opened) => {
-                            if (!opened) return;
-                            props.setFilters((prev) => prev.concat(createFilterFromCol(props.header, {})));
-                        }}
-                    >
-                        Filter by: {getLabel(props.header)}
-                        {(ownFilters.length === 0) === null ? null : (
-                            <ul>
-                                {ownFilters.map((filter) => (
-                                    <li key={`thead-filter-${filter.id}`} className="my-1">
-                                        <ColumnHeaderFilter filter={filter} set={props.setFilters} />
-                                    </li>
-                                ))}
-                                <li>
-                                    <button
-                                        onClick={() => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header)))}
-                                        className="text-primary-muted flex items-center"
-                                    >
-                                        <PlusIcon size={14} /> Add
-                                    </button>
-                                </li>
-                            </ul>
-                        )}
-                    </Dropdown>
-                    <span className="pointer-events-auto text-balance text-base">{props.header.thead}</span>
-                    <SorterHead col={props.header} setSorters={props.setSorters} sorters={props.sorters} />
-                </span>
-            </span>
-        </Reorder.Item>
-    );
-};
-
-export const TableHeader = <T extends {}>(props: TableHeaderProps<T>) => {
-    const [headers, setHeaders] = useReactive<Col<T>[]>(props.headers);
-
-    const onPointerUp = () => props.setCols(headers);
-
-    return (
-        <Reorder.Group
-            as="tr"
-            axis="x"
-            drag
-            layout
-            layoutRoot
-            layoutScroll
-            initial={false}
-            values={headers}
-            onReorder={setHeaders}
-            onPointerUp={onPointerUp}
-            className="bg-table-background border-none text-lg"
-        >
-            <AnimatePresence>
-                {headers.map((header) => (
-                    <HeaderChild<T>
-                        key={`header-child-item-${header.id as string}`}
-                        setFilters={props.setFilters}
-                        filters={props.filters}
-                        setSorters={props.setSorters}
-                        sorters={props.sorters}
-                        header={header}
-                    />
-                ))}
-            </AnimatePresence>
-        </Reorder.Group>
-    );
-};

package/src/hooks/use-form.ts

@@ -1,155 +0,0 @@
-import { parse } from "qs";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { AllPaths, Is, setPath } from "sidekicker";
-import { z, ZodArray, ZodNumber } from "zod";
-import { formReset } from "~/components/form/form";
-import { InputProps } from "~/components/form/input";
-import { SelectProps } from "~/components/form/select";
-
-const sort = (a: string, b: string) => a.localeCompare(b);
-
-const options = {
-    sort,
-    allowDots: true,
-    charset: "utf-8",
-    parseArrays: true,
-    plainObjects: true,
-    charsetSentinel: true,
-    allowPrototypes: false,
-    depth: Number.MAX_SAFE_INTEGER,
-    arrayLimit: Number.MAX_SAFE_INTEGER,
-    parameterLimit: Number.MAX_SAFE_INTEGER,
-} as const;
-
-export const formToJson = (form: HTMLFormElement): any => {
-    const formData = new FormData(form);
-    const urlSearchParams = new URLSearchParams(formData as any);
-    return parse(urlSearchParams.toString(), options) as never;
-};
-
-export const convertPath = (path: string) => path.replace("[", ".").replace("]", "").split(".");
-
-export const getSchemaShape = <T extends z.ZodObject<any>>(name: string, schema: T) =>
-    convertPath(name).reduce((acc, el) => {
-        if (el === "") return acc;
-        const shape = acc.shape?.[el] || acc;
-        return shape instanceof ZodArray ? shape.element : shape;
-    }, schema);
-
-const getValueByType = (e: HTMLInputElement) => {
-    if (e.type === "checkbox") return e.checked;
-    if (e.type === "number") return e.valueAsNumber;
-    return e.value;
-};
-
-type CustomOnInvalid = (args: { form: HTMLFormElement; errors: Record<string, string> }) => any;
-
-type CustomOnSubmit<T> = (args: { json: T; form: HTMLFormElement; reset: () => void; event: React.FormEvent<HTMLFormElement> }) => any;
-
-export const useForm = <T extends z.ZodObject<any>>(schema: T) => {
-    const [errors, setErrors] = useState<Record<string, string | undefined> | null>(null);
-    const ref = useRef<Record<string, { element: HTMLElement; schema: z.ZodType }>>({});
-
-    const select = <Props extends SelectProps>(name: AllPaths<z.infer<T>>, props?: Props): Props => {
-        const validator = getSchemaShape(name, schema);
-        return {
-            ...props,
-            name,
-            id: name,
-            error: errors?.[name],
-            ref: (e: HTMLSelectElement) => {
-                if (e === null) return;
-                ref.current[name] = { element: e, schema: validator };
-            },
-        } as any;
-    };
-
-    const input = <Props extends InputProps>(name: AllPaths<z.infer<T>>, props?: Props): Props => {
-        const validator = getSchemaShape(name, schema);
-        return {
-            ...props,
-            name,
-            id: name,
-            type: Is.instance(validator, ZodNumber) ? "number" : props?.type ?? "text",
-            error: errors?.[name],
-            ref: (e: HTMLInputElement) => {
-                if (e === null) return;
-                ref.current[name] = { element: e, schema: validator };
-            },
-        } as any;
-    };
-
-    useEffect(() => {
-        const events = Object.values(ref.current).map((input) => {
-            const validation = input.schema.safeParse(getValueByType(input.element as any));
-            const onBlurField = (e: any) => {
-                const validation = input.schema.safeParse(getValueByType(e.target));
-                const html = input.element as HTMLInputElement;
-                const name = html.name;
-                if (validation.success) {
-                    html.setCustomValidity("");
-                    return setErrors((prev) => {
-                        const { [name]: removed, ...rest } = prev || {};
-                        return rest === null || Is.empty(rest) ? null : rest;
-                    });
-                }
-                if (html.required) {
-                    const errorMessage = validation.error.issues[0].message;
-                    html.setCustomValidity(errorMessage);
-                    setErrors((prev) => ({ ...prev, [name]: errorMessage }));
-                }
-            };
-            const event = input.element.tagName === "INPUT" ? "blur" : "change";
-            input.element.addEventListener(event, onBlurField);
-            return {
-                input,
-                hasInitialError: (input.element as HTMLInputElement).required ? !validation.success : false,
-                unsubscribe: () => input.element.removeEventListener(event, onBlurField),
-            };
-        });
-        const hasErrors = events.some((x) => x.hasInitialError);
-        if (hasErrors) setErrors((prev) => (prev === null ? {} : prev));
-        return () => events.forEach((item) => item.unsubscribe());
-    });
-
-    const onInvalid = useCallback(
-        (exec?: CustomOnInvalid) => (event: React.FormEvent<HTMLFormElement>) => {
-            event.preventDefault();
-            const form = event.currentTarget;
-            const validationErrors = Object.values(ref.current).reduce((acc, input) => {
-                const field = input.element as HTMLInputElement;
-                const validation = input.schema.safeParse(getValueByType(field));
-                if (validation.success) return acc;
-                const errorMessage = validation.error.issues[0].message;
-                field.setAttribute("data-initialized", "true");
-                return { ...acc, [field.name]: errorMessage };
-            }, {});
-            const e = Is.empty(validationErrors) ? null : {};
-            setErrors(e);
-            exec?.({ form, errors: e || {} });
-        },
-        []
-    );
-
-    const onSubmit = useCallback(
-        (exec: CustomOnSubmit<z.infer<T>>) => (event: React.FormEvent<HTMLFormElement>) => {
-            event.preventDefault();
-            const form = event.currentTarget;
-            let json = formToJson(form);
-            Array.from(form.elements).forEach((field) => {
-                if (field.tagName === "SELECT") {
-                    const input = field as HTMLSelectElement;
-                    json = setPath<any>(json as any, input.name, input.value);
-                }
-                if (field.tagName === "INPUT") {
-                    const input = field as HTMLInputElement;
-                    json = setPath<any>(json as any, input.name, getValueByType(input));
-                }
-            });
-            exec({ form, json, event, reset: () => formReset(form) });
-        },
-        []
-    );
-
-    return { input, select, onSubmit, errors, onInvalid, disabled: errors !== null };
-};

package/src/hooks/use-previous.ts

@@ -1,9 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export const usePrevious = <T>(value: T): T => {
-    const ref = useRef<T | undefined>();
-    useEffect(() => {
-        ref.current = value;
-    }, [value]);
-    return ref.current as T;
-};

package/src/hooks/use-reactive.ts

@@ -1,10 +0,0 @@
-import { useEffect, useState } from "react";
-
-export const useReactive = <T extends unknown>(t: T, initial?: T) => {
-    const [state, setState] = useState(() => (initial ? initial : t));
-    useEffect(() => {
-        setState(t);
-    }, [t]);
-    return [state, setState] as const;
-};
-

package/src/index.css

@@ -1,37 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-select.select {
-    @apply appearance-none pr-10 bg-no-repeat;
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-input[type="number"] {
-    -moz-appearance: textfield;
-}
-
-input[type="color"],
-input[type="date"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="email"],
-input[type="month"],
-input[type="number"],
-input[type="password"],
-input[type="search"],
-input[type="tel"],
-input[type="text"],
-input[type="time"],
-input[type="url"],
-input[type="week"],
-select,
-select:focus,
-textarea {
-    @apply text-base;
-}

package/src/index.ts

@@ -1,6 +0,0 @@
-export * from "./components";
-export * from "./hooks/use-form";
-export * from "./hooks/use-previous";
-export * from "./hooks/use-reactive";
-export * from "./lib/dom";
-export * from "./lib/fns";

package/src/lib/dom.ts

@@ -1,27 +0,0 @@
-import { ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-import React, { LegacyRef, MutableRefObject, RefCallback } from "react";
-
-export const mergeRefs =
-    <T extends any = any>(...refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined | null>): RefCallback<T> =>
-    (value) => {
-        refs.forEach((ref) => {
-            if (typeof ref === "function") {
-                ref(value);
-            } else if (ref !== null) {
-                (ref as MutableRefObject<T | null>).current = value;
-            }
-        });
-    };
-
-export const isReactComponent = (a: any): a is React.FC => {
-    if (a.$$typeof === Symbol.for("react.forward_ref")) {
-        return true;
-    }
-    if (a.$$typeof === Symbol.for("react.fragment")) {
-        return true;
-    }
-    return a.$$typeof === Symbol.for("react.element");
-};
-
-export const css = (...styles: ClassValue[]) => twMerge(clsx(styles));

package/src/lib/fns.ts

@@ -1,23 +0,0 @@
-import { AllPaths } from "sidekicker";
-
-export const uuid = (): string =>
-    "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-        let r = (Math.random() * 16) | 0;
-        let v = c == "x" ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-    });
-
-const travel = (path: string, regexp: RegExp, obj: any) =>
-    path
-        .split(regexp)
-        .filter(Boolean)
-        .reduce((res, key) => (res !== null && res !== undefined ? (res as any)[key] : res), obj);
-
-const regexPaths = { basic: /[,[\]]+?/, extend: /[,[\].]+?/ };
-
-export const path = <T extends {}, K extends AllPaths<T>>(obj: T, path: K) => {
-    const result = travel(path, regexPaths.basic, obj) || travel(path, regexPaths.extend, obj);
-    return result === undefined || result === obj ? undefined : result;
-};
-
-export const isSsr = () => typeof window === 'undefined';

package/src/styles/dark.json

@@ -1,66 +0,0 @@
-{
-    "name": "dark",
-    "spacing": {
-        "base": "1rem",
-        "lg": "1.5rem",
-        "sm": "0.75rem"
-    },
-    "colors": {
-        "foreground": "#f8fafc",
-        "background": "#191817",
-        "accent": "#0ea5e9",
-        "disabled": "#52525b",
-        "primary": {
-            "foreground": "#f8fafc",
-            "DEFAULT": "#0ea5e9",
-            "subtle": "#bae6fd",
-            "hover": "#0284c7"
-        },
-        "secondary": {
-            "DEFAULT": "#475569",
-            "subtle": "#cbd5e1",
-            "hover": "#334155"
-        },
-        "info": {
-            "DEFAULT": "#3b82f6",
-            "subtle": "#93c5fd",
-            "hover": "#1d4ed8"
-        },
-        "danger": {
-            "DEFAULT": "#ef4444",
-            "subtle": "#fca5a5",
-            "hover": "#dc2626"
-        },
-        "success": {
-            "DEFAULT": "#10b981",
-            "subtle": "#6ee7b7",
-            "hover": "#047857"
-        },
-        "input": {
-            "border": "#52525b",
-            "placeholder": "#94a3b8",
-            "mask-error": "#fca5a5",
-            "switch-bg": "#171717",
-            "switch": "#fff"
-        },
-        "card": {
-            "background": "#27272a",
-            "border": "#3f3f46",
-            "overlay": "#00000080"
-        },
-        "floating": {
-            "background": "#252525",
-            "border": "#3f3f46",
-            "overlay": "#00000080"
-        },
-        "tooltip": {
-            "background": "#141414",
-            "border": "#27272a"
-        },
-        "table": {
-            "background": "#27272a",
-            "border": "#52525b",
-            "row": "#3f3f46"
-        }
-    }
-}

package/src/styles/design-tokens.ts

@@ -1,57 +0,0 @@
-type DesignTokens = {
-    [K in string]: string | DesignTokens;
-};
-
-type Token = { key: string; value: string };
-
-type DesignTokensParser = (value: string, key: string, combine: string) => string;
-
-type DesignTokensBuilder = (value: string, key: string, combine: string) => Token;
-
-export const parsers = {
-    cssVariable: (_, __, k) => `var(--${k})`,
-    rgba: (value) => `rgba(${value})`,
-    rgb: (value) => `rgb(${value})`,
-    hsl: (value) => `hsl(${value})`,
-    hsla: (value) => `hsla(${value})`,
-    hex: (value) => value,
-    raw: (value) => value,
-} satisfies Record<string, DesignTokensParser>;
-
-export const reduceTokens = <T extends DesignTokens>(colors: T, parse: DesignTokensBuilder, prefix: string = "", append: string = ""): Token[] =>
-    Object.entries(colors).reduce<Token[]>((acc, [key, value]) => {
-        const combine = append === "" ? `${prefix}${key}` : `${append}-${key}`;
-        if (typeof value === "string") {
-            const k = append === "" ? `${prefix}${key}` : key;
-            return acc.concat(parse(value, k, combine));
-        }
-        return acc.concat(reduceTokens(value, parse, prefix, combine));
-    }, []);
-
-export const createDesignTokens = <T extends DesignTokens>(colors: T, parse: DesignTokensParser, prefix: string = "", append: string = ""): T =>
-    Object.entries(colors).reduce<T>((acc, [key, value]) => {
-        const combine = append === "" ? `${prefix}${key}` : `${append}-${key}`;
-        if (typeof value === "string") {
-            const k = append === "" ? `${prefix}${key}` : key;
-            return { ...acc, [k]: parse(value, key, combine) };
-        }
-        return {
-            ...acc,
-            [key]: createDesignTokens(value, parse, prefix, combine),
-        };
-    }, {} as T);
-
-const modifiers = {
-    default: (variables: string) => `:root { ${variables} }`,
-    dark: (variables: string) => `html.dark {${variables}}`,
-};
-
-const createStyleContent = (tokens: Token[], modifier: (str: string) => string) => {
-    const content = tokens.map((token) => `${token.key}: ${token.value}`).join(";");
-    return modifier(content);
-};
-
-export const createStyles = {
-    default: (tokens: Token[]) => createStyleContent(tokens, modifiers.default),
-    dark: (tokens: Token[]) => createStyleContent(tokens, modifiers.dark),
-};

package/src/styles/light.json

@@ -1,49 +0,0 @@
-{
-    "name": "dark",
-    "spacing": {
-        "base": "1rem",
-        "lg": "1.5rem",
-        "sm": "0.75rem"
-    },
-    "colors": {
-        "background": "#f1f5f9",
-        "foreground": "#334155",
-        "accent": "#0ea5e9",
-        "primary": {
-            "foreground": "#334155",
-            "DEFAULT": "#0ea5e9",
-            "subtle": "#7dd3fc",
-            "hover": "#0284c7"
-        },
-        "secondary": {
-            "DEFAULT": "#475569",
-            "subtle": "#cbd5e1",
-            "hover": "#334155"
-        },
-        "info": {
-            "DEFAULT": "#3b82f6",
-            "subtle": "#93c5fd",
-            "hover": "#1d4ed8"
-        },
-        "danger": {
-            "DEFAULT": "#ef4444",
-            "subtle": "#fca5a5",
-            "hover": "#dc2626"
-        },
-        "success": {
-            "DEFAULT": "#10b981",
-            "subtle": "#6ee7b7",
-            "hover": "#047857"
-        },
-        "input": {
-            "border": "#d1d5db",
-            "placeholder": "#94a3b8",
-            "mask-error": "#fca5a5"
-        },
-        "card": {
-            "background": "#ffffff",
-            "border": "#cbd5e1",
-            "overlay": "#00000080"
-        }
-    }
-}

package/src/types.ts

@@ -1,11 +0,0 @@
-import React,{ Dispatch, ReactElement, ReactNode, SetStateAction } from "react";
-
-export type Label = React.ReactNode | React.ReactElement | string;
-
-export type Merge<T> = { [K in keyof T]: T[K] } & {};
-
-export type Override<Source, New> = Omit<Source, keyof New> & New;
-
-export type SetState<T> = Dispatch<SetStateAction<T>>;
-
-export type POJO = Record<string, any>

package/styles.config.ts

@@ -1,42 +0,0 @@
-import { Config } from "tailwindcss";
-import plugin from "tailwindcss/plugin";
-import DarkMode from "./src/styles/dark.json";
-import { createDesignTokens, parsers } from "./src/styles/design-tokens";
-
-const COLORS = createDesignTokens(DarkMode.colors, parsers.cssVariable);
-
-const css = String.raw;
-
-const config: Partial<Config> = {
-    theme: {
-        transitionTimingFunction: { DEFAULT: "cubic-bezier(1,.43,.36,.67)" },
-        transitionDuration: { DEFAULT: "375ms" },
-        extend: {
-            fill: COLORS,
-            colors: COLORS,
-            borderColors: COLORS,
-            placeholderColor: COLORS,
-            zIndex: {
-                floating: "10",
-            },
-            boxShadow: {
-                floating: "rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px"
-            }
-        },
-    },
-    plugins: [
-        plugin(function ({ addVariant }) {
-            addVariant("link", ["&:hover", "&:active"]);
-            addVariant("landing", ["&"]);
-            addVariant("group-assert", [css`:merge(.group):valid:has(.input:valid:not(:placeholder-shown)) &`]);
-            addVariant("group-error", [
-                css`:merge(.group):invalid:has(.input:not(:focus):invalid[data-initialized=true]) &`,
-                css`:merge(.group[data-error=true][data-interactive=true]):has(.input[data-initialized=true]) &`,
-                css`:merge(.group[data-error=true][data-interactive=true]):has(.input) &`,
-                css`:merge(.group[data-error=true]:has(.input[data-initialized=true])) &`,
-            ]);
-        }),
-    ],
-};
-
-export default config;

package/tailwind.config.ts

@@ -1,11 +0,0 @@
-import type { Config } from "tailwindcss";
-import preset from "./styles.config";
-
-const content = process.env.NODE_ENV === "production"
-
-const config: Config = {
-    presets: [preset],
-    content: ["./app/**/*.{js,ts,jsx,tsx,mdx}", "./src/**/*.{js,ts,jsx,tsx,mdx}"],
-};
-
-export default config;

package/tsconfig.json

@@ -1,55 +0,0 @@
-{
-  "compilerOptions": {
-    "allowJs": false,
-    "allowSyntheticDefaultImports": true,
-    "allowUmdGlobalAccess": false,
-    "allowUnreachableCode": false,
-    "allowUnusedLabels": false,
-    "alwaysStrict": true,
-    "declaration": true,
-    "declarationDir": "./dist",
-    "declarationMap": true,
-    "emitDeclarationOnly": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "strictBindCallApply": true,
-    "strictFunctionTypes": true,
-    "strictNullChecks": true,
-    "strictPropertyInitialization": true,
-    "target": "ES2015",
-    "paths": {
-      "~/*": [
-        "./src/*"
-      ]
-    },
-    "noEmit": true,
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
-  },
-  "include": [
-    "./src",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "docs"
-  ]
-}