@kirill.konshin/utils 0.0.8 → 0.0.9

package/src/electron-builder/builder.ts

@@ -0,0 +1,150 @@
+import type { Configuration, MacConfiguration } from 'electron-builder';
+import type { GithubOptions, S3Options } from 'builder-util-runtime';
+
+const {
+    GITHUB_REF_TYPE,
+    GITHUB_REF_NAME,
+    GITHUB_RUN_ID,
+    GITHUB_REF,
+    AWS_URL,
+    AWS_ACCESS_KEY_ID,
+    AWS_SECRET_ACCESS_KEY,
+    GH_TOKEN,
+    CSC_IDENTITY_AUTO_DISCOVERY,
+} = process.env;
+
+const isGithubTag = GITHUB_REF_TYPE === 'tag';
+const isGithubMaster = GITHUB_REF_TYPE === 'branch' && GITHUB_REF_NAME === 'master';
+const isDevPublish = AWS_URL?.includes(':9000');
+const isNoAutoDiscovery = CSC_IDENTITY_AUTO_DISCOVERY === 'false';
+const isSkipPublish = !isDevPublish && !isGithubMaster && !isGithubTag;
+
+//FIXME Refine logic, tags should be versions, not channels, use branches? See how Changesets does it
+const channel = isGithubTag ? 'latest' : GITHUB_REF_NAME; // https://www.electron.build/tutorials/release-using-channels.html
+
+function getVersion() {
+    if (isGithubMaster) {
+        return `0.0.${GITHUB_RUN_ID}`; //TODO Figure out last normal in master and bump it
+    }
+    if (isGithubTag) {
+        return GITHUB_REF!.split('/').pop();
+    }
+    return `0.0.${Date.now()}`; //TODO Read from package.json?
+}
+
+function getTarget() {
+    const arch = ['arm64', isNoAutoDiscovery ? '' : 'x64'].filter(Boolean) as any;
+
+    const target: MacConfiguration['target'] = [
+        {
+            target: 'dmg',
+            arch,
+        },
+        {
+            target: 'zip',
+            arch,
+        },
+    ];
+
+    // Leave only DMG if no signing
+    if (isNoAutoDiscovery) {
+        console.log('Skipping signing...');
+        delete process.env.CSC_LINK;
+        return [target[0]]; // only keep DMG
+    }
+
+    return target;
+}
+
+export function builerConfig(options: {
+    config: Configuration;
+    s3?: Pick<S3Options, 'bucket'> & Partial<S3Options>; //TODO Omit?
+    githubReleases: Pick<GithubOptions, 'owner' | 'repo'> & Partial<GithubOptions>;
+}): Configuration {
+    if (options.s3 && (!AWS_URL || !AWS_ACCESS_KEY_ID || !AWS_SECRET_ACCESS_KEY)) {
+        throw new Error('Missing AWS configuration');
+    }
+
+    if (options.githubReleases && !GH_TOKEN) {
+        throw new Error('Missing AWS configuration');
+    }
+
+    const config: Configuration = {
+        files: [
+            '**/*',
+            '!electron-builder.js',
+            '!electron-builder.yml',
+            '!package.json',
+            'assets',
+            ...(options.config.files as never),
+        ],
+        directories: {
+            buildResources: 'assets',
+        },
+        mac: {
+            category: options.config.mac?.category ?? 'public.app-category.utils',
+            target: getTarget(),
+        },
+        //TODO Windows target
+        dmg: {
+            contents: [
+                {
+                    x: 130,
+                    y: 130,
+                },
+                {
+                    x: 370,
+                    y: 130,
+                    type: 'link',
+                    path: '/Applications',
+                },
+            ],
+        },
+        publish: [
+            options.s3 &&
+                ({
+                    provider: 's3',
+                    endpoint: AWS_URL,
+                    channel,
+                    ...options.s3, // bucket
+                } as S3Options),
+            options.githubReleases &&
+                GH_TOKEN &&
+                (isGithubTag || isGithubMaster) &&
+                ({
+                    provider: 'github',
+                    private: true,
+                    token: GH_TOKEN,
+                    releaseType: isGithubTag ? 'release' : 'draft',
+                    channel,
+                    ...options.githubReleases, // repo, owner
+                } as GithubOptions),
+        ].filter(Boolean) as never,
+        extraMetadata: {
+            version: getVersion(),
+        },
+    };
+
+    if (isSkipPublish) {
+        delete config.publish;
+        delete (config as never as any).extraMetadata;
+    }
+
+    console.log('Electron Builder context', {
+        isDevPublish,
+        isGithubMaster,
+        isGithubTag,
+        isSkipPublish,
+        isNoAutoDiscovery,
+        channel,
+        GITHUB_RUN_ID: GITHUB_RUN_ID,
+        GITHUB_REF_TYPE: GITHUB_REF_TYPE,
+        GITHUB_REF_NAME: GITHUB_REF_NAME,
+        CSC_IDENTITY_AUTO_DISCOVERY: CSC_IDENTITY_AUTO_DISCOVERY,
+        AWS_URL: AWS_URL,
+    });
+
+    console.log('Electron Builder configuration', JSON.stringify(config, null, 2));
+
+    return config;
+}

package/src/electron-builder/images.ts

@@ -0,0 +1,33 @@
+import psd from 'psd';
+import sharp from 'sharp';
+import path from 'node:path';
+
+export async function generateImages({
+    iconPsdPath,
+    dmgBackgroundPsdPath,
+    electronAssetsPath,
+    webPublicPath,
+}: {
+    iconPsdPath: string;
+    dmgBackgroundPsdPath: string;
+    electronAssetsPath: string;
+    webPublicPath: string;
+}) {
+    const iconPsd = await psd.open(iconPsdPath);
+    await iconPsd.image!.saveAsPng(path.join(electronAssetsPath, 'icon.png'));
+
+    const bgPsd = await psd.open(dmgBackgroundPsdPath);
+    await bgPsd.image!.saveAsPng(path.join(electronAssetsPath, 'background@2x.png'));
+
+    const iconPng = sharp(path.join(electronAssetsPath, 'icon.png'));
+    const bgPng = sharp(path.join(electronAssetsPath, 'background@2x.png'));
+
+    await bgPng.resize(500).toFile(path.join(electronAssetsPath, 'background.png'));
+
+    await iconPng.toFile(path.join(electronAssetsPath, 'splash.webp'));
+    await iconPng.toFile(path.join(electronAssetsPath, 'icon.icns'));
+
+    //TODO Crop without icon BG
+    await iconPng.toFile(path.join(webPublicPath, 'icon.png'));
+    await iconPng.resize(32).toFile(path.join(webPublicPath, 'favicon.ico'));
+}

package/src/electron-builder/index.ts

@@ -0,0 +1,2 @@
+export * from './builder';
+export * from './images';

package/src/mui/README.md

@@ -0,0 +1,3 @@
+## Prior Art
+
+https://codesandbox.io/p/sandbox/l7vykxl57q MUI v4

package/src/mui/formControlFieldset.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TextField, Stack, InputLabel, RadioGroup, Radio, FormControlLabel, Box } from '@mui/material';
+
+import { GenericControl } from './genericControl';
+import { ReadOnly } from './readOnly';
+import { FormControlFieldset } from './formControlFieldset';
+import { FormLabelLegend } from './formLabelLegend';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+    title: 'MUI / FormControlFieldset',
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+    render: function Render() {
+        return (
+            <Box sx={{ position: 'relative' }}>
+                <Rule top={12} />
+                <Rule top={37} />
+                <Rule top={48} />
+                <Stack direction="row" gap={3} sx={{ alignItems: 'flex-start' }}>
+                    <FormControlFieldset>
+                        <FormLabelLegend>Radios</FormLabelLegend>
+                        <ReadOnly>
+                            {/* TODO The size of the component. small is equivalent to the dense radio styling. */}
+                            <RadioGroup row defaultValue="female" name="radio-buttons-group" sx={{ mt: -1 }}>
+                                <FormControlLabel value="female" label="Female" control={<Radio size="small" />} />
+                                <FormControlLabel value="male" label="Male" control={<Radio size="small" />} />
+                                <FormControlLabel value="other" label="Other" control={<Radio size="small" />} />
+                            </RadioGroup>
+                        </ReadOnly>
+                    </FormControlFieldset>
+
+                    <GenericControl>
+                        <InputLabel shrink>GenericControl</InputLabel>
+                        <ReadOnly>
+                            This is a <code>div</code>, not an input with <code>readOnly</code>
+                        </ReadOnly>
+                    </GenericControl>
+
+                    <FormControlFieldset>
+                        <FormLabelLegend>FormLabelLegend</FormLabelLegend>
+                        <ReadOnly>
+                            This is a <code>div</code>, not an input with <code>readOnly</code>
+                        </ReadOnly>
+                    </FormControlFieldset>
+
+                    <TextField label="TextField" defaultValue="Bar" variant="standard" />
+                </Stack>
+            </Box>
+        );
+    },
+} satisfies Meta<typeof GenericControl>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+function Rule({ top }) {
+    return (
+        <Box sx={{ background: 'red', position: 'absolute', left: 0, top: `${top}px`, width: '100%', height: '1px' }} />
+    );
+}
+
+export const Default: Story = {
+    args: {},
+};

package/src/mui/formControlFieldset.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { GenericControl, GenericControlProps } from './genericControl';
+import { inputClasses } from '@mui/material/Input';
+
+export type FormControlFieldsetProps = GenericControlProps;
+
+export const FormControlFieldset: React.FC<FormControlFieldsetProps> = function FormControlFieldset({
+    children,
+    sx,
+    ...props
+}) {
+    return (
+        <GenericControl
+            {...props}
+            component="fieldset"
+            sx={{
+                ...sx,
+                [`legend + .${inputClasses.root}`]: {
+                    marginTop: 2, //FIXME 16px, hardcoded from @mui/material/Input/Input.js @ 59
+                },
+            }}
+        >
+            {children}
+        </GenericControl>
+    );
+};

package/src/mui/formLabelLegend.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { default as InputLabel, InputLabelProps } from '@mui/material/InputLabel';
+
+export const FormLabelLegend: React.FC<InputLabelProps> = ({ children, ...props }) => {
+    return (
+        // sx={(theme) => theme.typography.caption}
+        <InputLabel {...props} shrink={true} component={'legend' as any}>
+            {children}
+        </InputLabel>
+    );
+};

package/src/mui/genericControl.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { FormControlProps, default as FormControl } from '@mui/material/FormControl';
+import { inputClasses } from '@mui/material/Input';
+
+export type GenericControlProps = FormControlProps & { children: any };
+
+export const GenericControl: React.FC<GenericControlProps> = ({ children, sx, ...props }) => (
+    <FormControl
+        variant="standard"
+        sx={{
+            ...sx,
+            [`& .${inputClasses.root}`]: {
+                '&:before, &:after': { display: 'none' },
+            },
+        }}
+        {...props}
+    >
+        {children}
+    </FormControl>
+);

package/src/mui/index.ts

@@ -0,0 +1,4 @@
+export * from './formControlFieldset';
+export * from './formLabelLegend';
+export * from './genericControl';
+export * from './readOnly';

package/src/mui/readOnly.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { default as Input, InputProps } from '@mui/material/Input';
+
+export const ReadOnly: React.FC<InputProps & { children: any }> = ({ children, inputProps, ...props }) => (
+    <Input {...props} inputComponent={'div' as any} inputProps={{ ...inputProps, children }}></Input>
+);

package/src/next/appLink.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import React, { ComponentProps, FC } from 'react';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import clsx from 'clsx';
+
+//TODO Test this
+export const AppLink: FC<
+    {
+        children: any;
+        exact?: boolean;
+        activeClassName?: any;
+    } & ComponentProps<typeof Link>
+> = function AppLink({
+    href,
+    children,
+    className = '',
+    activeClassName = '',
+    prefetch = false, // set explicit default
+    exact = false,
+    ...props
+}) {
+    const pathname = usePathname();
+    const hrefPath = typeof href === 'string' ? href : href.pathname || '/';
+
+    return (
+        <Link
+            {...props}
+            href={href}
+            className={clsx(className, {
+                [activeClassName]: (!exact && pathname.startsWith(hrefPath)) || (exact && pathname === hrefPath),
+            })}
+            prefetch={prefetch}
+        >
+            {children}
+        </Link>
+    );
+};

package/src/next/index.ts

@@ -0,0 +1,5 @@
+export * from './appLink';
+export * from './measure';
+export * from './noSSR';
+export * from './redirect';
+export * from './useIsInner';

package/src/next/measure.ts

@@ -0,0 +1,7 @@
+import { createMeasurer } from '../core/measure';
+import { PHASE_PRODUCTION_BUILD, PHASE_PRODUCTION_SERVER } from 'next/constants';
+
+export const isProd =
+    process.env.NEXT_PHASE === PHASE_PRODUCTION_BUILD || process.env.NEXT_PHASE === PHASE_PRODUCTION_SERVER;
+
+export const measurer = createMeasurer({ colors: isProd });

package/src/next/noSSR.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import React, { useLayoutEffect, useState } from 'react';
+
+const DefaultOnSSR = () => <span />;
+
+// @see https://github.com/kadirahq/react-no-ssr/blob/master/src/index.js
+// @see https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only
+export function NoSSR({ children, onSSR = <DefaultOnSSR /> }) {
+    const [canRender, setCanRender] = useState(false);
+
+    useLayoutEffect(() => {
+        setCanRender(true);
+    }, []);
+
+    return canRender ? children : onSSR;
+}

package/src/next/redirect.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import type { LinkProps } from 'next/link';
+
+export default function Redirect({ to, replace }: { to: LinkProps['href']; replace?: LinkProps['replace'] }) {
+    const router = useRouter();
+    useEffect(() => {
+        router[replace ? 'replace' : 'push'](to.toString()); //TODO Test this
+    }, [replace, router, to]);
+    return null;
+}

package/src/next/useIsInner.ts

@@ -0,0 +1,13 @@
+'use client';
+
+import { useSelectedLayoutSegments } from 'next/navigation';
+
+export const useIsInner = (): boolean => {
+    const pathname = useSelectedLayoutSegments();
+    return pathname.length > 0;
+};
+
+export const useIsIndex = (): boolean => {
+    const pathname = useSelectedLayoutSegments();
+    return pathname.length === 0;
+};

package/src/react/apiCall.ts

@@ -0,0 +1,25 @@
+export const jsonContentType = 'application/json';
+
+export type DataResponse<R> = Response & { data?: R };
+
+export async function apiCall<R>(url: string, init?: RequestInit): Promise<DataResponse<R>> {
+    const useBodyAsIs = !init?.body || init?.body instanceof FormData || typeof init?.body === 'string';
+
+    const res: DataResponse<R> = await fetch(url, {
+        method: 'POST',
+        ...init,
+        body: useBodyAsIs ? init?.body : JSON.stringify(init.body),
+        headers: {
+            ...init?.headers,
+            ...(useBodyAsIs ? {} : { 'Content-Type': jsonContentType }),
+        },
+    });
+
+    if (res.headers.get('Content-Type')?.includes(jsonContentType)) {
+        res.data = await res.json();
+    }
+
+    if (!res.ok) throw new Error(res.statusText, { cause: res });
+
+    return res;
+}

package/src/react/form/client.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useActionState, useCallback, useState, useTransition } from 'react';
+import { create, MaybeTypeOf, Validation } from './form';
+import { z } from 'zod';
+
+const FORM_DEBUG = process.env.NEXT_PUBLIC_FORM_DEBUG === 'true';
+
+export function createClient<S extends z.ZodObject<any>>(schema: S) {
+    const { validate } = create(schema);
+
+    function useValidationCallback(
+        actionFn: (data: FormData) => Promise<Validation<S>>,
+    ): (formData: FormData) => Promise<Validation<S>> {
+        return useCallback(
+            async (formData: FormData) => {
+                const clientRes = validate(formData);
+                console.log('Client validation', FORM_DEBUG ? 'ignored' : 'active', clientRes);
+                if (!clientRes.success && !FORM_DEBUG) return clientRes;
+
+                const serverRes = await actionFn(formData);
+                console.log('Server validation', serverRes);
+                return serverRes;
+            },
+            [actionFn],
+        );
+    }
+
+    function useValidation(
+        actionFn: (data: FormData) => Promise<Validation<S>>,
+        initialData: MaybeTypeOf<S> = {} as MaybeTypeOf<S>,
+    ) {
+        const cb = useValidationCallback(actionFn);
+
+        return useActionState<Validation<S>, FormData>(async (_, data) => cb(data), {
+            success: false,
+            data: initialData,
+        });
+    }
+
+    function useValidationTransition(
+        actionFn: (data: FormData) => Promise<Validation<S>>,
+        initialData: MaybeTypeOf<S> = {} as MaybeTypeOf<S>,
+    ): [Validation<S>, (formData: FormData) => Promise<Validation<S>>, boolean] {
+        const [isPending, startTransition] = useTransition();
+        const [state, setState] = useState<Validation<S>>({ success: false, data: initialData });
+        const cb = useValidationCallback(actionFn);
+
+        const wrappedCb = useCallback(
+            (formData: FormData) => {
+                const promise = cb(formData);
+                startTransition(() => promise.then(setState));
+                return promise;
+            },
+            [cb, startTransition],
+        );
+
+        return [state, wrappedCb, isPending];
+    }
+
+    return { useValidation, useValidationTransition };
+}

package/src/react/form/form.tsx

@@ -0,0 +1,109 @@
+import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } from 'zod';
+
+const nonEmpty = 'This field cannot be empty';
+
+export const stringRequired = () => z.string({ required_error: nonEmpty }).min(1, nonEmpty);
+export const maxLength = (schema: z.ZodString): number => schema.maxLength || 0;
+export const minLength = (schema: z.ZodString): number => schema.minLength || 0;
+export const isRequired = (schema: z.ZodString): boolean => minLength(schema) > 0;
+
+export type ZodObject = z.ZodObject<any> | z.ZodEffects<z.ZodObject<any>>; // z.ZodType<any, any, any>
+export type MaybeTypeOf<S extends ZodObject> = Partial<TypeOf<S>>;
+export type SafeTypeOf<S extends ZodObject> = SafeParseReturnType<TypeOf<S>, TypeOf<S>>['data'];
+export type Errors<S extends ZodObject> = typeToFlattenedError<TypeOf<S>>['fieldErrors'];
+export type Validation<S extends ZodObject> =
+    | {
+          success: true; // this is true only if form was validated successfully
+          data: SafeTypeOf<S>;
+          errors?: never;
+      }
+    | {
+          success: false;
+          data?: MaybeTypeOf<S>;
+          errors?: Errors<S>;
+      };
+
+export function create<S extends ZodObject>(schema: S) {
+    const getShape = () =>
+        (schema as z.ZodObject<any>).shape || (schema as z.ZodEffects<z.ZodObject<any>>).sourceType().shape;
+
+    if (!getShape()) {
+        throw new Error('Invalid schema: only z.object() or z.object().refine() are supported');
+    }
+
+    function register(name: keyof TypeOf<S>, data?: MaybeTypeOf<S>, errors?: Errors<S>, mui: boolean = false) {
+        const field = getShape()[name];
+        return {
+            name,
+            id: name,
+            required: isRequired(field),
+            maxLength: maxLength(field),
+            type: field.isEmail ? 'email' : (name as string).includes('password') ? 'password' : 'text',
+            defaultValue: data?.[name],
+            ...(mui
+                ? {
+                      label: field.description,
+                      helperText: errors?.[name]?.join(', '),
+                      error: !!errors?.[name]?.length,
+                  }
+                : {}),
+        };
+    }
+
+    function validationError(data: MaybeTypeOf<S>, errors: Errors<S>): Validation<S> {
+        return {
+            success: false,
+            data, // data is undefined if there are errors
+            errors, // Next.js will butcher error object, so we provide something more primitive
+        };
+    }
+
+    function validate(formData: FormData): Validation<S> {
+        const rawData = Object.fromEntries(formData) as TypeOf<S>;
+        const { error, data } = schema.safeParse(rawData);
+
+        // console.log('Validate result', { error, data, rawData });
+
+        if (error) {
+            // data is undefined if there are errors
+            // Next.js will butcher error object, so we provide something more primitive
+            return validationError(rawData, error.flatten().fieldErrors as any);
+        }
+
+        return { success: true, data };
+    }
+
+    //FIXME Context?
+    function Field({
+        children,
+        name,
+        errors,
+        hint,
+    }: {
+        children?: any;
+        name: string;
+        errors?: Validation<S>['errors'];
+        hint?: string;
+    }) {
+        const { description } = getShape()[name];
+
+        return (
+            <div className="form-row">
+                {description && <label htmlFor={name}>{description}</label>}
+                {children}
+                {hint && <Hint>{hint}</Hint>}
+                {errors?.[name]?.map((e: string) => (
+                    <Hint error key={e}>
+                        {e}
+                    </Hint>
+                ))}
+            </div>
+        );
+    }
+
+    return { register, validate, Field, validationError };
+}
+
+export function Hint({ children, error }: { children: any; error?: boolean }) {
+    return <div className={`hint ${error ? 'hint-error' : ''}`}>{children}</div>;
+}

package/src/react/form/index.ts

@@ -0,0 +1,2 @@
+export * from './client';
+export * from './form';

package/src/react/index.ts

@@ -0,0 +1,4 @@
+export * from './form';
+export * from './apiCall';
+export * from './useFetch';
+export * from './useFetcher';