@kirill.konshin/utils 0.0.19 → 0.0.20

package/dist/tailwind/index.js

@@ -1,7 +0,0 @@
-import { Fullpage } from "./fullpage.js";
-import { ResponsiveHelperTW } from "./responsiveHelper.js";
-export {
-  Fullpage,
-  ResponsiveHelperTW
-};
-//# sourceMappingURL=index.js.map

package/dist/tailwind/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/tailwind/responsiveHelper.d.ts

@@ -1,3 +0,0 @@
-import { FC } from 'react';
-export declare const ResponsiveHelperTW: FC<any>;
-//# sourceMappingURL=responsiveHelper.d.ts.map

package/dist/tailwind/responsiveHelper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"responsiveHelper.d.ts","sourceRoot":"","sources":["../../src/tailwind/responsiveHelper.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAElC,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,GAAG,CAWtC,CAAC"}

package/dist/tailwind/responsiveHelper.js

@@ -1,16 +0,0 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-const ResponsiveHelperTW = function ResponsiveHelperTW2() {
-  return /* @__PURE__ */ jsxs("span", { className: "fixed bottom-0 right-2 z-30 leading-none text-xs", children: [
-    /* @__PURE__ */ jsx("small", { className: "hidden xs:max-sm:block", children: "XS" }),
-    /* @__PURE__ */ jsx("small", { className: "hidden sm:max-md:block", children: "SM" }),
-    /* @__PURE__ */ jsx("small", { className: "hidden md:max-lg:block", children: "MD" }),
-    /* @__PURE__ */ jsx("small", { className: "hidden lg:max-xl:block", children: "LG" }),
-    /* @__PURE__ */ jsx("small", { className: "hidden xl:max-2xl:block", children: "XL" }),
-    /* @__PURE__ */ jsx("small", { className: "hidden 2xl:block", children: "XXL" })
-  ] });
-};
-export {
-  ResponsiveHelperTW
-};
-//# sourceMappingURL=responsiveHelper.js.map

package/dist/tailwind/responsiveHelper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"responsiveHelper.js","sources":["../../src/tailwind/responsiveHelper.tsx"],"sourcesContent":["'use client';\n\nimport React, { FC } from 'react';\n\nexport const ResponsiveHelperTW: FC<any> = function ResponsiveHelperTW() {\n    return (\n        <span className=\"fixed bottom-0 right-2 z-30 leading-none text-xs\">\n            <small className=\"hidden xs:max-sm:block\">XS</small>\n            <small className=\"hidden sm:max-md:block\">SM</small>\n            <small className=\"hidden md:max-lg:block\">MD</small>\n            <small className=\"hidden lg:max-xl:block\">LG</small>\n            <small className=\"hidden xl:max-2xl:block\">XL</small>\n            <small className=\"hidden 2xl:block\">XXL</small>\n        </span>\n    );\n};\n"],"names":["ResponsiveHelperTW"],"mappings":";;AAIa,MAAA,qBAA8B,SAASA,sBAAqB;AAEjE,SAAA,qBAAC,QAAK,EAAA,WAAU,oDACZ,UAAA;AAAA,IAAC,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,2BAA0B,UAAE,MAAA;AAAA,IAC5C,oBAAA,SAAA,EAAM,WAAU,oBAAmB,UAAG,MAAA,CAAA;AAAA,EAAA,GAC3C;AAER;"}

package/src/bootstrap/adaptiveContainer.tsx

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

package/src/bootstrap/controls.stories.tsx

@@ -1,62 +0,0 @@
-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: Meta<typeof Control> = {
-    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: any) =>
-                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>;
-    },
-};
-
-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

@@ -1,119 +0,0 @@
-import React, { HTMLInputTypeAttribute, memo, FC } from 'react';
-
-const lcFirst = (str: string) => str[0].toLowerCase() + str.substring(1, str.length);
-
-const toProperty = (str: string) => lcFirst(str).split(' ').join('');
-
-export 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;
-}
-
-export type LabelProps = Pick<ControlProps, 'name' | 'value' | 'defaultValue'> & { reset: () => void };
-
-export const Label: FC<LabelProps> = memo(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: FC<ControlProps> = memo(function Control({
-    value = null,
-    setValue,
-    defaultValue = null,
-    options = {},
-    setOptions,
-    defaultOptions = {},
-    name,
-    inputProps: { Tag = 'input', property = 'value', valueExtractor = (e: any) => 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: Event) => 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: FC<RangeProps> = memo(function Range({ min, max, step = 0.1, ...props }) {
-    return (
-        <Control
-            inputProps={{
-                type: 'range',
-                min,
-                max,
-                step,
-                className: 'form-control-range',
-                valueExtractor: (e: any) => parseFloat(e.target.value),
-            }}
-            {...props}
-        />
-    );
-});
-
-export const Checkbox: FC<ControlProps> = memo(function Checkbox(props) {
-    return (
-        <Control
-            inputProps={{ type: 'checkbox', property: 'checked', valueExtractor: (e: any) => e.target.checked }}
-            {...props}
-        />
-    );
-});
-
-export const Select: FC<ControlProps> = memo(function Select({ children, ...props }) {
-    return (
-        <Control inputProps={{ Tag: 'select', className: 'form-select' }} {...props} hideValue={true}>
-            {children}
-        </Control>
-    );
-});

package/src/bootstrap/error.stories.tsx

@@ -1,34 +0,0 @@
-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: Meta<typeof ErrorAlert> = {
-    title: 'Bootstrap / ErrorAlert',
-    component: ErrorAlert,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        // backgroundColor: { control: 'color' },
-        children: { control: 'text' },
-    },
-    args: { onRetry: fn() },
-};
-
-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') as any,
-    },
-};

package/src/bootstrap/error.tsx

@@ -1,37 +0,0 @@
-'use client';
-
-import React, { FC } from 'react';
-import { Alert, AlertProps, Button, ButtonProps } from 'react-bootstrap';
-
-export type ErrorAlertProps = {
-    children?: Error | string | any;
-    onRetry?: () => any;
-    buttonProps?: ButtonProps;
-};
-
-//TODO Create MUI-specific?
-export const ErrorAlert: FC<ErrorAlertProps> = function ErrorAlert({ onRetry, children, buttonProps, ...props }) {
-    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>
-    );
-};

package/src/bootstrap/field.stories.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { FieldGroup } from './field';
-import { FormControl } from 'react-bootstrap';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta: Meta<typeof FieldGroup> = {
-    title: 'Bootstrap / FieldGroup',
-    component: FieldGroup,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        text: { control: 'text' },
-        label: { control: 'text' },
-        horizontal: { control: 'check' },
-    },
-    args: { onClick: fn() },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Vertical: Story = {
-    args: {
-        label: 'Label',
-        children: <FormControl placeholder="Input" />,
-        text: 'Text',
-    },
-};
-
-export const Horizontal: Story = {
-    args: {
-        label: 'Label',
-        children: <FormControl placeholder="Input" />,
-        horizontal: true,
-    },
-};

package/src/bootstrap/field.tsx

@@ -1,37 +0,0 @@
-import React, { FC } from 'react';
-import { Form, FormGroupProps, FormLabelProps, FormTextProps } from 'react-bootstrap';
-
-export type FieldGroupProps = FormGroupProps & {
-    label?: any;
-    labelProps?: FormLabelProps;
-    text?: any;
-    textProps?: FormTextProps;
-    horizontal?: boolean;
-};
-
-export const FieldGroup: FC<FieldGroupProps> = function FieldGroup({
-    label,
-    labelProps = {},
-    text,
-    textProps = {},
-    horizontal,
-    children,
-    ...props
-}) {
-    if (horizontal) {
-        props.className = 'hstack gap-3 ' + (props.className || '');
-        labelProps.className = 'm-0 ' + (labelProps.className || '');
-    }
-
-    if (text && horizontal) {
-        throw new Error('Cannot use text and horizontal together');
-    }
-
-    return (
-        <Form.Group {...props}>
-            {label && <Form.Label {...labelProps}>{label}</Form.Label>}
-            {children}
-            {text && !horizontal && <Form.Text {...textProps}>{text}</Form.Text>}{' '}
-        </Form.Group>
-    );
-};

package/src/bootstrap/footer.tsx

@@ -1,61 +0,0 @@
-import React, { FC } from 'react';
-import { Nav, Navbar } from 'react-bootstrap';
-import { useBreakpoint } from './responsiveHelper';
-import { AdaptiveContainer } from './adaptiveContainer';
-
-export type FooterNavItemProps = {
-    href: any;
-    icon: any;
-    active?: boolean | undefined;
-    children?: string | undefined;
-};
-
-export const FooterNavItem: FC<FooterNavItemProps> = function FooterNavItem({
-    href,
-    icon,
-    active = false,
-    children = '',
-}) {
-    // const pathname = usePathname();
-
-    const isFilepath = icon.includes('.');
-    let iconElement;
-
-    if (isFilepath) {
-        iconElement = <img src={icon} alt="icon" className="me-lg-2" />;
-    } else {
-        iconElement = <span className={`lead me-lg-2 ${icon}`} />;
-    }
-
-    // const active = isActivePath(href, pathname);
-
-    const link = (
-        <Nav.Link
-            // as={Link}
-            href={href}
-            // active={active} // has no effect when not pills or tabs
-            className={`px-0 px-lg-3 d-flex align-items-center flex-column flex-lg-row ${active ? 'text-primary' : ''}`}
-        >
-            {iconElement}
-            {children}
-        </Nav.Link>
-    );
-
-    return <Nav.Item style={{ flex: 1 }}>{link}</Nav.Item>;
-};
-
-export const Footer: FC<any> = function Footer({ children }) {
-    const { isDesktop } = useBreakpoint();
-
-    return (
-        // border-bottom
-        <div className={isDesktop ? '' : 'border-top'}>
-            <Navbar className={isDesktop ? '' : 'py-0'}>
-                <AdaptiveContainer>
-                    {isDesktop && <Navbar.Brand href="/">Le Brand</Navbar.Brand>}
-                    <Nav className={isDesktop ? 'me-auto' : 'justify-content-center flex-nowrap w-100'}>{children}</Nav>
-                </AdaptiveContainer>
-            </Navbar>
-        </div>
-    );
-};

package/src/bootstrap/globalLoading.stories.tsx

@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { GlobalLoading } from './globalLoading';
-
-const meta: Meta<typeof GlobalLoading> = {
-    title: 'Bootstrap / GlobalLoading',
-    component: GlobalLoading,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        loading: { control: 'check' },
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        loading: true,
-    },
-};

package/src/bootstrap/globalLoading.tsx

@@ -1,19 +0,0 @@
-import React, { FC } from 'react';
-// import { useLoading, useLoadingTimeout } from '../redux/loadingSlice';
-import { Loading } from './loading';
-
-export type GlobalLoadingProps = { loading: boolean };
-
-export const GlobalLoading: FC<GlobalLoadingProps> = function GlobalLoading({ loading }) {
-    // const { loading } = useLoading();
-
-    // useLoadingTimeout(15000); // escape latch if something is stuck
-
-    if (!loading) return null;
-
-    return (
-        <div className="bg-white position-absolute top-0 start-0 w-100 h-100 z-3 d-flex align-items-center justify-content-center">
-            <Loading />
-        </div>
-    );
-};

package/src/bootstrap/loading.stories.tsx

@@ -1,35 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Loading } from './loading';
-
-const meta: Meta<typeof Loading> = {
-    title: 'Bootstrap / Loading',
-    component: Loading,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        children: { control: 'text' },
-        show: { control: 'check' },
-        size: { control: 'select', options: ['sm', 'md'] },
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Children: Story = {
-    args: {
-        children: 'Custom Loading...',
-    },
-};
-
-export const Size: Story = {
-    args: {
-        size: 'sm',
-    },
-};

package/src/bootstrap/loading.tsx

@@ -1,24 +0,0 @@
-import { Spinner, SpinnerProps, Stack } from 'react-bootstrap';
-import React, { FC, memo } from 'react';
-
-export type LoadingProps = {
-    children?: any;
-    show?: boolean;
-    className?: string;
-    size?: SpinnerProps['size'];
-};
-
-export const Loading: FC<LoadingProps> = memo(function Loading({
-    children = 'Loading...' as any,
-    show = true,
-    className = '',
-    size,
-}) {
-    if (!show) return null;
-    return (
-        <Stack direction="horizontal" gap={3} className={`align-self-auto ${className}`}>
-            <Spinner animation="border" role="status" size={size as any} />
-            <span>{children}</span>
-        </Stack>
-    );
-});

package/src/bootstrap/main.scss

@@ -1,86 +0,0 @@
-$primary: darken(#fd7e14, 6%) !default; // in order to accomodate MCR=3
-$secondary: #0d6efd !default;
-$danger: #dc3545 !default;
-$warning: #fd7e14 !default;
-$success: #198754 !default;
-
-$theme-colors: (
-  'primary': $primary,
-  'secondary': $secondary,
-  'success': $success,
-  // "info":       $info,
-  'warning': $warning,
-  'danger': $danger,
-  // non-bootstrap colors
-  'light': #dddddd,
-  'dark': #2c2414,
-);
-
-$min-contrast-ratio: 3 !default; // 4.5 produces black on orange @see https://stackoverflow.com/a/68303393/5125659
-
-@import 'bootstrap/scss/functions.scss';
-@import 'bootstrap/scss/variables.scss';
-@import 'bootstrap/scss/mixins.scss';
-@import 'bootstrap/scss/bootstrap.scss';
-
-// Nav
-
-.btn-nav {
-  @extend .btn-outline-primary; // just vars to control styling
-}
-
-.main-nav .btn-nav {
-  border-width: 0;
-
-  @include media-breakpoint-down(md) {
-    --bs-btn-active-color: var(--bs-primary);
-    --bs-btn-hover-color: var(--bs-primary);
-    background: none !important;
-    padding: 0;
-    text-decoration: none;
-    font-weight: 500;
-  }
-
-  &.disabled {
-    color: var(--bs-gray-600);
-  }
-}
-
-// Dropdowns
-
-.dropdown-toggle-no-arrow::after,
-.dropdown-toggle-no-arrow > .dropdown-toggle::after {
-  display: none !important;
-}
-
-.dropdown > button {
-  display: block; // fixes small padding on dropdowns
-}
-
-// Tables
-
-.table {
-  //fixes table borders & margins
-  margin-bottom: 0;
-
-  & > :not(caption) > * > * {
-    background: none;
-  }
-
-  & > :not(caption) > tr:last-of-type > * {
-    border-bottom: none;
-  }
-}
-
-// Badges
-
-.badge {
-  --bs-badge-font-weight: normal;
-}
-
-// Icons
-
-.icon-thick {
-  webkit-text-stroke: 1px;
-  text-stroke: 1px;
-}