@kirill.konshin/utils 0.0.8 → 0.0.10

package/builders/rollup.config.mjs

@@ -0,0 +1,50 @@
+import { globSync } from 'glob';
+import dts from 'vite-plugin-dts';
+import resolve from '@rollup/plugin-node-resolve';
+import swc from '@rollup/plugin-swc';
+import commonjs from '@rollup/plugin-commonjs';
+import del from 'rollup-plugin-delete';
+import multi from '@rollup/plugin-multi-entry';
+import { fixExports, excludeGlob, includeGlob, entryGlob, entry, external } from './exports.mjs';
+
+//FIXME https://github.com/rollup/rollup/issues/4629 watch spits all files
+//FIXME https://github.com/rollup/rollup/issues/3150 watch spits all files
+//FIXME Multi produces virtual files
+
+const dir = 'dist-rollpup';
+
+/** @type {import('rollup').RollupOptions} */
+const config = {
+  // input: includeGlob, // multi
+  // input: entryGlob, // multi
+  input: entry, // glob array, seems to be a bit faster
+  // ignore: excludeGlob,
+  output: {
+    dir,
+    preserveModules: true,
+    preserveModulesRoot: 'src',
+    sourcemap: true,
+    format: 'es',
+  },
+  external,
+  onwarn(warning, warn) {
+    if (warning.code === 'MODULE_LEVEL_DIRECTIVE') return;
+    warn(warning);
+  },
+  plugins: [
+    del({ targets: dir, runOnce: true }),
+    swc(),
+    commonjs(),
+    resolve({ extensions: ['.ts', '.tsx'] }),
+    dts({ outDir: dir }), // exclude: excludeGlob,
+    // multi({ preserveModules: true }),
+    {
+      name: 'Generate Exports',
+      async buildEnd() {
+        // await fixExports();
+      },
+    },
+  ],
+};
+
+export default config;

package/builders/rslib.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from '@rslib/core';
+import type { RsbuildPlugin } from '@rsbuild/core';
+import { fixExports, generateIndex, includeGlob } from './vite.exports';
+
+//FIXME https://github.com/egoist/tsup/issues/945 dts is slow
+//TODO https://api-extractor.com/pages/setup/invoking/ instead of dts
+//TODO https://github.com/egoist/tsup/issues/615 incremental
+
+export default defineConfig({
+    lib: [{ bundle: false, format: 'esm', dts: { bundle: false } }],
+    source: { entry: { index: includeGlob } },
+    output: { sourceMap: true, cleanDistPath: true, distPath: { root: 'dist-rslib' } },
+    plugins: [
+        // {
+        //     name: 'Generate Index & Exports',
+        //     setup(api) {
+        //         api.onBeforeBuild(async () => {
+        //             await generateIndex();
+        //         });
+        //         api.onAfterBuild(async () => {
+        //             await fixExports();
+        //         });
+        //     },
+        // } satisfies RsbuildPlugin,
+    ],
+});

package/builders/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "declarationDir": "dist",
+    "incremental": false,
+    "allowJs": true,
+    /* Build-specific options */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "exclude": ["**/*.test.ts", "**/*.stories.ts", "**/*.stories.tsx"]
+}

package/builders/tsup.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'tsup';
+import { fixExports, formats, includeGlob } from './exports.mjs';
+
+//FIXME https://github.com/egoist/tsup/issues/945 dts is slow
+//TODO https://api-extractor.com/pages/setup/invoking/ instead of dts
+//TODO https://github.com/egoist/tsup/issues/615 incremental
+
+export default defineConfig({
+    outDir: 'dist-tsup',
+    entry: [includeGlob],
+    format: Object.keys(formats) as any,
+    bundle: false,
+    splitting: false,
+    sourcemap: true,
+    clean: true,
+    dts: true,
+    async onSuccess() {
+        // await fixExports();
+    },
+});

package/builders/turbo.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build", "build:vite", "build:exports"]
+    },
+    "build:exports": {
+      "outputs": ["package.json"]
+    },
+    "build:index": {
+      "outputs": ["src/**/*/index.ts"]
+    },
+    "build:vite": {
+      "outputs": ["dist/**/*"],
+      "dependsOn": ["build:index"]
+    },
+    "start": {
+      "persistent": true,
+      "cache": false,
+      "dependsOn": ["build:index", "build:exports"]
+    }
+  }
+}

package/builders/vite.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { fixExports, formats, entry, external, distDir } from './exports.mjs';
+
+// https://rbardini.com/how-to-build-ts-library-with-vite/
+
+export default defineConfig({
+    build: {
+        ssr: true,
+        sourcemap: true,
+        outDir: distDir,
+        emptyOutDir: true,
+        // target: 'esnext',
+        lib: {
+            entry,
+            formats: Object.keys(formats) as any,
+        },
+        rollupOptions: {
+            external,
+            output: {
+                preserveModules: true,
+                preserveModulesRoot: 'src',
+            },
+        },
+    },
+    plugins: [
+        react(),
+        dts(),
+        {
+            name: 'Generate Exports',
+            async buildEnd() {
+                // await fixExports();
+            },
+        },
+    ],
+});

package/demo/cache-demo.ts

@@ -188,7 +188,8 @@ function create<
     S extends ResSchemaFinal<ResSchema>,
     M extends keyof S,
     F extends (key: S[M][0], input: S[M][1]) => S[M][2],
->(schema: S, message: M, responder: F): F { // context: Context<S, M, 'response'>
+>(schema: S, message: M, responder: F): F {
+    // context: Context<S, M, 'response'>
     return responder as any;
 }
 

package/package.json

@@ -1,37 +1,181 @@
 {
   "name": "@kirill.konshin/utils",
-  "version": "0.0.8",
+  "description": "Utilities",
+  "version": "0.0.10",
   "type": "module",
-  "main": "build/index.js",
-  "module": "build/index.js",
-  "types": "build/index.d.ts",
-  "exports": {
-    ".": "./build/index.js",
-    "./cache": "./build/cache.js",
-    "./errors": "./build/errors.js",
-    "./measure": "./build/measure.js",
-    "./mutex": "./build/mutex.js",
-    "./worker": "./build/worker.js"
-  },
   "scripts": {
-    "clean": "rm -rf .tscache tsconfig.tsbuildinfo build",
-    "build": "tsc --build",
-    "start": "yarn build --watch --preserveWatchOutput",
-    "wait": "wait-on build/index.js"
+    "----- BUILD -----": "",
+    "clean": "rm -rf dist .tscache tsconfig.tsbuildinfo",
+    "build": "vite build",
+    "build:index": "cti create ./src/*",
+    "build:check-types": "attw --pack .",
+    "start": "yarn build --watch",
+    "wait": "wait-on ./dist/core/index.mjs",
+    "----- TEST -----": "",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest watch --coverage",
+    "----- STORYBOOK -----": "",
+    "storybook:start": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "colors": "^1.4.0",
-    "many-keys-map": "^2.0.1"
+    "expo-file-system": "^18.0.7",
+    "expo-sharing": "^13.0.1",
+    "expo-updates": "^0.26.13",
+    "many-keys-map": "^2.0.1",
+    "psd": "^3.4.0",
+    "react-hook-form": "^7.54.2",
+    "sharp": "^0.33.5"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.14",
-    "typescript": "^5.7.3",
-    "wait-on": "^8.0.2"
+    "@arethetypeswrong/cli": "^0.17.3",
+    "@chromatic-com/storybook": "^3.2.4",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^6.4.2",
+    "@mui/styled-engine": "^6.4.2",
+    "@storybook/addon-essentials": "^8.5.2",
+    "@storybook/addon-interactions": "^8.5.2",
+    "@storybook/addon-onboarding": "^8.5.2",
+    "@storybook/blocks": "^8.5.2",
+    "@storybook/react": "^8.5.2",
+    "@storybook/react-vite": "^8.5.2",
+    "@storybook/test": "^8.5.2",
+    "@types/psd": "^3.4.3",
+    "@vitest/coverage-v8": "^3.0.4",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
+    "create-ts-index": "^1.14.0",
+    "electron": "^34.0.1",
+    "electron-builder": "^25.1.8",
+    "electron-default-menu": "^1.0.2",
+    "electron-store": "^10.0.1",
+    "electron-updater": "^6.4.0",
+    "glob": "^11.0.1",
+    "next": "^15.1.6",
+    "react-bootstrap": "^2.10.8",
+    "react-native": "^0.77.0",
+    "sass-embedded": "^1.83.4",
+    "storybook": "^8.5.2",
+    "tailwindcss": "^4.0.1",
+    "vite": "^6.0.11",
+    "vitest": "^3.0.4",
+    "zod": "^3.24.1"
+  },
+  "peerDependencies": {
+    "@mui/material": "^6",
+    "bootstrap": "^5",
+    "bootstrap-icons": "^1",
+    "electron": "^34",
+    "next": "^15",
+    "react": "^19",
+    "react-bootstrap": "^2",
+    "react-native": "^0.77",
+    "tailwindcss": "^4",
+    "zod": "^3"
+  },
+  "peerDependenciesMeta": {
+    "@mui/material": {
+      "optional": true
+    },
+    "bootstrap": {
+      "optional": true
+    },
+    "bootstrap-icons": {
+      "optional": true
+    },
+    "electron": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-bootstrap": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"
   },
   "author": "Kirill Konshin <kirill@konshin.org> (https://konshin.org)",
   "license": "MIT",
-  "description": ""
-}
+  "exports": {
+    "./tailwind": {
+      "import": {
+        "import": "./dist/tailwind/index.mjs",
+        "types": "./dist/tailwind/index.d.ts"
+      }
+    },
+    "./react-native": {
+      "import": {
+        "import": "./dist/react-native/index.mjs",
+        "types": "./dist/react-native/index.d.ts"
+      }
+    },
+    "./react": {
+      "import": {
+        "import": "./dist/react/index.mjs",
+        "types": "./dist/react/index.d.ts"
+      }
+    },
+    "./next": {
+      "import": {
+        "import": "./dist/next/index.mjs",
+        "types": "./dist/next/index.d.ts"
+      }
+    },
+    "./mui": {
+      "import": {
+        "import": "./dist/mui/index.mjs",
+        "types": "./dist/mui/index.d.ts"
+      }
+    },
+    "./electron-builder": {
+      "import": {
+        "import": "./dist/electron-builder/index.mjs",
+        "types": "./dist/electron-builder/index.d.ts"
+      }
+    },
+    "./electron": {
+      "import": {
+        "import": "./dist/electron/index.mjs",
+        "types": "./dist/electron/index.d.ts"
+      }
+    },
+    "./core": {
+      "import": {
+        "import": "./dist/core/index.mjs",
+        "types": "./dist/core/index.d.ts"
+      }
+    },
+    "./bootstrap": {
+      "import": {
+        "import": "./dist/bootstrap/index.mjs",
+        "types": "./dist/bootstrap/index.d.ts"
+      }
+    },
+    ".": {
+      "import": {
+        "import": "./dist/core/index.mjs",
+        "types": "./dist/core/index.d.ts"
+      }
+    }
+  },
+  "main": "./dist/core/index.mjs",
+  "module": "./dist/core/index.mjs",
+  "types": "./dist/core/index.d.ts"
+}

package/src/bootstrap/adaptiveContainer.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Container, ContainerProps } from 'react-bootstrap';
+import { useBreakpoint } from './responsiveHelper';
+
+export function AdaptiveContainer({ children, ...props }: ContainerProps) {
+    const { isMobile } = useBreakpoint();
+    return (
+        <Container fluid={isMobile} {...props}>
+            {children}
+        </Container>
+    );
+}

package/src/bootstrap/controls.stories.tsx

@@ -0,0 +1,62 @@
+import React, { cloneElement, useCallback, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Select, Control, Range, Checkbox } from './controls';
+
+const defaultOptions = { num: 1, bool: false, select: 'bar' };
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+    title: 'Bootstrap / Controls',
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+    args: { options: { ...defaultOptions }, setOptions: fn(), defaultOptions: { ...defaultOptions }, name: 'unused' },
+    render: function Demo(args) {
+        const [options, setOptionsRaw] = useState(args.options);
+
+        const setOptions = useCallback(
+            (options) =>
+                setOptionsRaw((currentOptions) => {
+                    return { ...currentOptions, ...options };
+                }),
+            [],
+        );
+
+        const controlProps = { options, setOptions, defaultOptions };
+
+        const { children, name, ...safeArgs } = args;
+
+        return <div style={{ width: '300px' }}>{cloneElement(children as any, { ...safeArgs, ...controlProps })}</div>;
+    },
+} satisfies Meta<typeof Control>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const RangeControl: Story = {
+    args: {
+        children: <Range name="Num" min={0} max={1} />,
+    },
+};
+
+export const CheckboxControl: Story = {
+    args: {
+        children: <Checkbox name="Bool" />,
+    },
+};
+
+export const SelectControl: Story = {
+    args: {
+        children: (
+            <Select name="Select">
+                <option value="foo">Foo</option>
+                <option value="bar">Bar</option>
+            </Select>
+        ),
+    },
+};

package/src/bootstrap/controls.tsx

@@ -0,0 +1,119 @@
+import React, { HTMLInputTypeAttribute, memo } from 'react';
+
+const lcFirst = (str) => str[0].toLowerCase() + str.substring(1, str.length);
+
+const toProperty = (str) => lcFirst(str).split(' ').join('');
+
+interface ControlProps {
+    value?: any;
+    setValue?: (v: any) => void;
+    defaultValue?: any;
+    options?: { [key: string]: any };
+    setOptions?: (v: { [key: string]: any }) => void;
+    defaultOptions?: { [key: string]: any };
+    name: string;
+    children?: React.ReactNode;
+    inputProps?: {
+        type: HTMLInputTypeAttribute;
+        property?: string;
+        valueExtractor?: (e: any) => any;
+        className?: string;
+    } & any;
+    hideValue?: boolean;
+}
+
+type LabelProps = Pick<ControlProps, 'name' | 'value' | 'defaultValue'> & { reset: () => void };
+
+const Label = memo<LabelProps>(function Label({ name, reset, value, defaultValue }) {
+    return (
+        <label className="flex-grow-1 mb-0 d-flex align-items-center justify-content-start gap-2">
+            {name}
+            {value !== defaultValue && (
+                <>
+                    <a href="javascript: void(0)" onClick={reset}>
+                        <small>reset</small>
+                    </a>
+                </>
+            )}
+        </label>
+    );
+});
+
+export const Control = memo<ControlProps>(function Control({
+    value = null,
+    setValue,
+    defaultValue = null,
+    options = {},
+    setOptions,
+    defaultOptions = {},
+    name,
+    inputProps: { Tag = 'input', property = 'value', valueExtractor = (e) => e.target.value, ...inputProps } = {},
+    hideValue = false,
+    children,
+}) {
+    const prop = toProperty(name);
+
+    defaultValue = defaultValue || defaultOptions[prop];
+    value = value || options?.[prop];
+    setValue = setValue || ((v) => setOptions?.({ [prop]: v }));
+
+    const reset = () => setValue(defaultValue);
+
+    return (
+        <div className="d-flex align-items-center gap-2">
+            <Label name={name} reset={reset} value={value} defaultValue={defaultValue} />
+            <Tag
+                {...inputProps}
+                {...{ [property]: value || '' }} // null is needed to make it always controlled
+                className={`${value === defaultValue ? 'opacity-75' : ''} ${inputProps.className}`}
+                onChange={(e) => setValue(valueExtractor(e))}
+            >
+                {children}
+            </Tag>
+            {!hideValue && (
+                <span onDoubleClick={reset} className="text-start" style={{ width: '20px' }}>
+                    {value}
+                </span>
+            )}
+        </div>
+    );
+});
+
+export interface RangeProps extends ControlProps {
+    min: number;
+    max: number;
+    step?: number;
+}
+
+export const Range = memo<RangeProps>(function Range({ min, max, step = 0.1, ...props }) {
+    return (
+        <Control
+            inputProps={{
+                type: 'range',
+                min,
+                max,
+                step,
+                className: 'form-control-range',
+                valueExtractor: (e) => parseFloat(e.target.value),
+            }}
+            {...props}
+        />
+    );
+});
+
+export const Checkbox = memo<ControlProps>(function Checkbox(props) {
+    return (
+        <Control
+            inputProps={{ type: 'checkbox', property: 'checked', valueExtractor: (e) => e.target.checked }}
+            {...props}
+        />
+    );
+});
+
+export const Select = memo<ControlProps>(function Select({ children, ...props }) {
+    return (
+        <Control inputProps={{ Tag: 'select', className: 'form-select' }} {...props} hideValue={true}>
+            {children}
+        </Control>
+    );
+});

package/src/bootstrap/error.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { ErrorAlert } from './error';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+    title: 'Bootstrap / ErrorAlert',
+    component: ErrorAlert,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        // backgroundColor: { control: 'color' },
+        children: { control: 'text' },
+    },
+    args: { onRetry: fn() },
+} satisfies Meta<typeof ErrorAlert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const String: Story = {
+    args: {
+        children: 'An error occurred',
+    },
+};
+
+export const ErrorObject: Story = {
+    args: {
+        children: new Error('An error occurred'),
+    },
+};

package/src/bootstrap/error.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import React from 'react';
+import { Alert, AlertProps, Button, ButtonProps } from 'react-bootstrap';
+
+//TODO Create MUI-specific?
+export function ErrorAlert({
+    onRetry,
+    children,
+    buttonProps,
+    ...props
+}: {
+    children?: Error | string | any;
+    onRetry?: () => any;
+    buttonProps?: ButtonProps;
+}) {
+    if (!children) return null;
+
+    return (
+        <Alert variant="danger" {...props}>
+            <div>{children.message || children.toString()}</div>
+            {onRetry && (
+                <div>
+                    <Button
+                        variant="link"
+                        className="alert-link"
+                        {...buttonProps}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onRetry();
+                        }}
+                    >
+                        Retry
+                    </Button>
+                </div>
+            )}
+        </Alert>
+    );
+}