rlz-engine 0.0.1 → 0.0.3

package/dist/client/widgets/ItemsSelect.d.ts

@@ -0,0 +1,18 @@
+import { type SxProps } from '@mui/material';
+import { type ReactElement } from 'react';
+export type ItemType = {
+    value: string;
+    label: string;
+    fontStyle?: string;
+};
+export type ItemsType = readonly ItemType[];
+interface Props {
+    items: ItemsType;
+    selected: readonly string[];
+    onSelectedChange: (selected: string[]) => void;
+    selectMany: boolean;
+    selectZero: boolean;
+    sx?: SxProps;
+}
+export declare function ItemsSelect(props: Props): ReactElement;
+export {};

package/dist/client/widgets/ItemsSelect.js

@@ -0,0 +1,87 @@
+import { Clear as ClearIcon } from '@mui/icons-material';
+import { Box, Chip, FilledInput, FormControl, IconButton, InputAdornment, InputLabel, Stack } from '@mui/material';
+import useEmblaCarousel from 'embla-carousel-react';
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+const A_STYLE = { fontSize: '0' };
+export function ItemsSelect(props) {
+    const { height, ref } = useResizeDetector();
+    const [carouselRef, carouselApi] = useEmblaCarousel({}, [WheelGesturesPlugin()]);
+    const selected = new Set(props.selected);
+    const pageHeight = (24 + 8) * 4;
+    const [pages, setPages] = useState(1);
+    const [page, setPage] = useState(0);
+    const [filter, setFilter] = useState(null);
+    const onSelect = useCallback((api) => {
+        setPage(api.selectedScrollSnap());
+    }, [pages]);
+    useEffect(() => {
+        setPages(height === undefined ? 1 : Math.ceil(height / pageHeight));
+    }, [height]);
+    useEffect(() => {
+        if (carouselApi !== undefined) {
+            carouselApi.on('select', onSelect);
+            return () => {
+                carouselApi.off('select', onSelect);
+            };
+        }
+    }, [carouselApi, onSelect]);
+    const onSelectedChangeContainer = useMemo(() => { return { v: props.onSelectedChange }; }, []);
+    onSelectedChangeContainer.v = props.onSelectedChange;
+    const items = useMemo(() => {
+        const items = filter === null
+            ? props.items
+            : (() => {
+                const re = new RegExp(filter, 'i');
+                return props.items.filter(i => re.test(i.label));
+            })();
+        return items.map((i) => {
+            const fontStyle = typeof i === 'string' ? undefined : i.fontStyle;
+            if (selected.has(i.value)) {
+                const chip = React.createElement(Chip, { key: i.value, color: 'primary', size: 'small', label: i.label, sx: { fontStyle } });
+                if (props.selectZero || (props.selectMany && selected.size > 1)) {
+                    return (React.createElement("a", { key: i.value, style: A_STYLE, onClick: () => {
+                            onSelectedChangeContainer.v(props.selected.filter(s => s !== i.value));
+                        } }, chip));
+                }
+                return chip;
+            }
+            return (React.createElement("a", { key: i.value, style: A_STYLE, onClick: () => {
+                    if (props.selectMany) {
+                        onSelectedChangeContainer.v([...selected, i.value]);
+                    }
+                    else {
+                        onSelectedChangeContainer.v([i.value]);
+                    }
+                } },
+                React.createElement(Chip, { size: 'small', label: i.label, sx: { fontStyle } })));
+        });
+    }, [props.items, props.selected, filter, props.selectMany]);
+    return (React.createElement(Box, { sx: props.sx },
+        React.createElement(FormControl, { variant: 'filled', size: 'small', fullWidth: true, sx: { mb: 2 } },
+            React.createElement(InputLabel, null, 'Filter'),
+            React.createElement(FilledInput, { fullWidth: true, size: 'small', value: filter ?? '', onChange: (ev) => {
+                    setFilter(ev.target.value === '' ? null : ev.target.value);
+                }, endAdornment: (React.createElement(InputAdornment, { position: 'end' },
+                    React.createElement(IconButton, { disabled: filter === null, onClick: () => { setFilter(null); }, edge: 'end' },
+                        React.createElement(ClearIcon, null)))) })),
+        React.createElement(Box, { overflow: 'hidden', ref: carouselRef },
+            React.createElement(Stack, { direction: 'row' },
+                React.createElement(Box, { height: pageHeight, overflow: 'hidden', flex: '0 0 100%' },
+                    React.createElement(Box, { display: 'flex', ref: ref, flexWrap: 'wrap', gap: 1 }, items)),
+                Array.from(Iterator.range(pages ?? 0).map((p) => {
+                    if (p === 0) {
+                        return undefined;
+                    }
+                    return (React.createElement(Box, { key: p, height: pageHeight, overflow: 'hidden', position: 'relative', flex: '0 0 100%' },
+                        React.createElement(Box, { position: 'absolute', top: -pageHeight * p },
+                            React.createElement(Box, { display: 'flex', flexWrap: 'wrap', gap: 1 }, items))));
+                })))),
+        React.createElement(Stack, { direction: 'row', justifyContent: 'center', gap: 1, mt: 1, height: 10 }, pages > 1
+            ? Array.from(Iterator.range(pages ?? 0).map((p) => {
+                return (React.createElement("a", { key: p, style: A_STYLE, onClick: () => { carouselApi?.scrollTo(p); } },
+                    React.createElement(Box, { width: 10, height: 10, bgcolor: p === page ? 'secondary.main' : 'text.primary', borderRadius: 10 })));
+            }))
+            : null)));
+}

package/package.json

@@ -1,9 +1,10 @@
 {
     "name": "rlz-engine",
-    "version": "0.0.1",
+    "version": "0.0.3",
     "description": "Deps and tools for my style of development",
     "scripts": {
-        "build": "tsc"
+        "build": "tsc",
+        "publish": "rm -rf dist && tsc && npm publish"
     },
     "author": "Dmitry Maslennikov <maslennikovdm@gmail.com>",
     "license": "ISC",
@@ -45,6 +46,8 @@
         "@types/react-router-dom": "^5.3.3",
         "acme-client": "^5.4.0",
         "ajv-formats": "^3.0.1",
+        "embla-carousel-react": "^8.5.1",
+        "embla-carousel-wheel-gestures": "^8.0.1",
         "fastify": "^5.1.0",
         "fastify-acme": "^1.0.5",
         "fastify-plugin": "^5.0.1",
@@ -57,9 +60,10 @@
         "pino-pretty": "^13.0.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-resize-detector": "^12.0.2",
         "react-router-dom": "^7.1.1",
         "uuidv7": "^1.0.2",
         "zod": "^3.23.8",
         "zod-to-json-schema": "^3.23.5"
     }
-}
+}