@kirill.konshin/utils 0.0.19 → 0.0.21

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/index.ts

@@ -1,12 +0,0 @@
-export * from './adaptiveContainer';
-export * from './controls';
-export * from './error';
-export * from './field';
-export * from './footer';
-export * from './globalLoading';
-export * from './loading';
-export * from './responsiveHelper';
-export * from './screen';
-export * from './toaster';
-export * from './useModal';
-export * from './useWrappedForm';

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;
-}

package/src/bootstrap/responsiveHelper.tsx

@@ -1,55 +0,0 @@
-'use client';
-
-import React, { FC, useEffect, useState } from 'react';
-
-export function useBreakpoint(): {
-    breakpoint: string;
-    isMobile: boolean;
-    isDesktop: boolean;
-} {
-    const [breakpoint, setBreakpoint] = useState('xs');
-
-    useEffect(() => {
-        const updateBreakpoint = () => {
-            const width = window.innerWidth;
-            if (width < 576) {
-                setBreakpoint('xs');
-            } else if (width < 768) {
-                setBreakpoint('sm');
-            } else if (width < 992) {
-                setBreakpoint('md');
-            } else if (width < 1200) {
-                setBreakpoint('lg');
-            } else if (width < 1400) {
-                setBreakpoint('xl');
-            } else {
-                setBreakpoint('xxl');
-            }
-        };
-
-        updateBreakpoint();
-
-        window.addEventListener('resize', updateBreakpoint);
-
-        return () => {
-            window.removeEventListener('resize', updateBreakpoint);
-        };
-    }, []);
-
-    const isMobile = ['xs', 'sm', 'md'].includes(breakpoint);
-
-    return { breakpoint, isMobile, isDesktop: !isMobile };
-}
-
-export const ResponsiveHelperBS: FC = function ResponsiveHelperBS() {
-    return (
-        <span className="small position-fixed bottom-0 z-3" style={{ fontSize: '9px', right: 1, lineHeight: 1 }}>
-            <small className="d-block d-sm-none">XS</small>
-            <small className="d-none d-sm-block d-md-none">SM</small>
-            <small className="d-none d-md-block d-lg-none">MD</small>
-            <small className="d-none d-lg-block d-xl-none">LG</small>
-            <small className="d-none d-xl-block d-xxl-none">XL</small>
-            <small className="d-none d-xxl-block">XXL</small>
-        </span>
-    );
-};

package/src/bootstrap/screen.stories.tsx

@@ -1,160 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { Screen } from './screen';
-import { Loading } from './loading';
-import { Dropdown, DropdownButton, Form, Nav, Navbar } from 'react-bootstrap';
-import { Footer, FooterNavItem } from './footer';
-import { AdaptiveContainer } from './adaptiveContainer';
-
-const lorem = (
-    <>
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-            anim id est laborum.
-        </p>
-        <h2>Section 1.10.32 of &quot;de Finibus Bonorum et Malorum&quot;, written by Cicero in 45 BC</h2>
-        <p>
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
-            aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
-            dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
-            sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
-            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
-            suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
-            ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
-            nulla pariatur?
-        </p>
-        <h2>1914 translation by H. Rackham</h2>
-        <p>
-            But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I
-            will give you a complete account of the system, and expound the actual teachings of the great explorer of
-            the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself,
-            because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter
-            consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain
-            pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can
-            procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical
-            exercise, except to obtain some advantage from it? But who has any right to find fault with a man who
-            chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no
-            resultant pleasure?
-        </p>
-    </>
-);
-
-const meta: Meta<typeof Screen> = {
-    title: 'Bootstrap / Screen',
-    component: Screen,
-    parameters: {
-        layout: 'fullscreen',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        children: { control: 'text' },
-        title: { control: 'text' },
-        footer: { control: 'text' },
-    },
-    args: {
-        children: lorem,
-        title: 'Title',
-        menu: (
-            <Footer>
-                <FooterNavItem href="/application/process" icon="bi-cup-hot-fill" active>
-                    Coffee
-                </FooterNavItem>
-                <FooterNavItem href="/application/transcribe" icon="bi-pen-fill">
-                    Assistant
-                </FooterNavItem>
-                <FooterNavItem href="/application/documents" icon="bi-star-fill">
-                    Docs
-                </FooterNavItem>
-            </Footer>
-        ),
-        backCb: fn(),
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const LongContent: Story = {
-    args: {
-        header: <AdaptiveContainer>Header</AdaptiveContainer>,
-        footer: <div>Footer</div>,
-    },
-};
-
-export const Loader: Story = {
-    parameters: {
-        docs: {
-            description: {
-                story: 'Centered content with hidden header and footer',
-            },
-        },
-    },
-    args: {
-        children: <Loading />,
-        centerContent: true,
-        noHeader: true,
-        noFooter: true,
-    },
-};
-
-export const Centered: Story = {
-    args: {
-        children: 'Nothing to see here',
-        centerContent: true,
-    },
-};
-
-export const ForwardCb: Story = {
-    args: {
-        forwardCb: fn(),
-    },
-};
-
-export const ForwardIcon: Story = {
-    args: {
-        forwardCb: fn(),
-        forwardIcon: 'bi-trash',
-    },
-};
-
-export const ForwardBtn: Story = {
-    args: {
-        forwardBtn: (
-            <DropdownButton
-                title={<span className="bi-three-dots" />}
-                // size="sm"
-                align="end"
-                variant="nav"
-                className={`dropdown-toggle-no-arrow`}
-            >
-                <Dropdown.Item>Preview</Dropdown.Item>
-                <Dropdown.Divider />
-                <Dropdown.Item className="text-danger">Remove</Dropdown.Item>
-            </DropdownButton>
-        ),
-    },
-};
-
-export const HeaderForm: Story = {
-    args: {
-        header: (
-            <Navbar className="pt-0 py-lg-3">
-                <AdaptiveContainer>
-                    <div className="position-relative w-100">
-                        <span className="bi-search position-absolute" style={{ right: '8px', top: '3px' }} />
-                        <Form.Control placeholder="Search" size="sm" />
-                    </div>
-                </AdaptiveContainer>
-            </Navbar>
-        ),
-    },
-};

package/src/bootstrap/screen.tsx

@@ -1,146 +0,0 @@
-import React, { FC, memo } from 'react';
-import { Button, Navbar, Nav, Stack } from 'react-bootstrap';
-import { useBreakpoint } from './responsiveHelper';
-import { AdaptiveContainer } from './adaptiveContainer';
-
-export type ScreenProps = {
-    backBtn?: any;
-    backCb?: any;
-    backIcon?: any;
-    forwardBtn?: any;
-    forwardIcon?: any;
-    forwardCb?: any;
-    children: any;
-    contentClassName?: string;
-    noContentPadding?: boolean;
-    header?: any; // resides on top panel in mobile, does not scroll, before content on desktop
-    footer?: any; // resides on bottom menu panel in mobile, does not scroll, or after content on desktop
-    menu?: any;
-    title?: any;
-    centerContent?: boolean;
-    noHeader?: boolean;
-    noFooter?: boolean;
-    noMenu?: boolean;
-    // noFolders?: boolean;
-};
-
-//TODO Footer -> menu
-export const Screen: FC<ScreenProps> = memo(function Screen({
-    backBtn,
-    backCb,
-    backIcon,
-    forwardBtn,
-    forwardIcon,
-    forwardCb,
-    footer,
-    menu,
-    header,
-    children,
-    noContentPadding = false,
-    contentClassName = '',
-    title = '',
-    centerContent = false,
-    noHeader = false,
-    noFooter = false,
-    noMenu = false,
-    // noFolders = false,
-}) {
-    // const router = useRouter();
-
-    backBtn =
-        backBtn ||
-        (backCb ? (
-            // backCb === true ? () => router.back() : backCb
-            <Button onClick={backCb} variant="nav">
-                {
-                    <>
-                        <span className={backIcon || 'bi-chevron-left icon-thick'} />
-                        <span className="d-none d-lg-inline ms-2">Back</span>
-                    </>
-                }
-            </Button>
-        ) : null);
-
-    forwardBtn =
-        forwardBtn ||
-        (forwardCb ? (
-            <Button onClick={forwardCb}>{forwardIcon ? <span className={forwardIcon}></span> : 'Next'}</Button>
-        ) : null);
-
-    const { isMobile, isDesktop } = useBreakpoint();
-
-    // useLoadingTimeout(1000); // less jerky UI
-
-    return (
-        <div className={`d-flex flex-column flex-grow-1 flex-lg-grow-0 ${isMobile ? 'vh-100' : ''}`} data-id="screen">
-            {/* HEADER */}
-
-            {/* FIXME postition fixed does not assign z-index automatically https://getbootstrap.com/docs/4.0/layout/overview/#z-index*/}
-            {!noHeader && (
-                <header className={isDesktop ? '' : 'shadow-sm border-bottom'} data-id="header">
-                    {/* {!noFolders && <FolderBar />} */}
-
-                    {/* {isDesktop && !noFooter && <Footer />} */}
-                    {isDesktop && !noMenu && menu}
-
-                    {title && (
-                        // (isDesktop ? 'border-bottom' : '')
-                        <Navbar expand className="main-nav">
-                            <AdaptiveContainer className="gap-2">
-                                {backBtn && <Nav className="hstack gap-3">{backBtn}</Nav>}
-                                <Navbar.Brand className="me-auto">{title}</Navbar.Brand>
-                                {forwardBtn && <Nav className="hstack gap-3">{forwardBtn}</Nav>}
-                            </AdaptiveContainer>
-                        </Navbar>
-                    )}
-
-                    {header}
-                </header>
-            )}
-
-            {/* CONTENT */}
-
-            <AdaptiveContainer
-                as="main"
-                className={[
-                    isMobile ? 'overflow-y-auto overflow-x-hidden' : 'gap-3',
-                    `flex-grow-1 d-flex flex-column`,
-                    centerContent ? 'align-items-center justify-content-center' : 'justify-content-start',
-                    contentClassName,
-                    noContentPadding ? 'p-0' : 'py-3',
-                ]
-                    .filter(Boolean)
-                    .join(' ')}
-                data-id="content"
-            >
-                {children}
-
-                {/* Repeat screen buttons at the bottom on desktop */}
-                {isDesktop && !noFooter && (
-                    <>
-                        {footer}
-
-                        {/* TODO Possibly introduce a prop desktopFooterBeforeButtons */}
-                        {(forwardBtn || backBtn) && (
-                            // Navbar screws up the popper
-                            <Stack gap={3} direction="horizontal">
-                                {/* No container since already in container */}
-                                {backBtn && <Nav className="hstack gap-3">{backBtn}</Nav>}
-                                {forwardBtn && <Nav className="hstack gap-3 flex-grow-1">{forwardBtn}</Nav>}
-                            </Stack>
-                        )}
-                    </>
-                )}
-            </AdaptiveContainer>
-
-            {/* FOOTER */}
-
-            {!noMenu && !noFooter && (
-                <footer className="shadow-lg border-top d-block d-lg-none" data-id="footer">
-                    {!noFooter && footer}
-                    {!noMenu && menu}
-                </footer>
-            )}
-        </div>
-    );
-});