@kirill.konshin/utils 0.0.8 → 0.0.10

package/src/bootstrap/field.stories.tsx

@@ -0,0 +1,42 @@
+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 = {
+    title: 'Bootstrap / FieldGroup',
+    component: FieldGroup,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: { control: 'text' },
+        label: { control: 'text' },
+        horizontal: { control: 'check' },
+    },
+    args: { onClick: fn() },
+} satisfies Meta<typeof FieldGroup>;
+
+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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Form, FormGroupProps, FormLabelProps, FormTextProps } from 'react-bootstrap';
+
+export function FieldGroup({
+    label,
+    labelProps = {},
+    text,
+    textProps = {},
+    horizontal,
+    children,
+    ...props
+}: FormGroupProps & {
+    label?: any;
+    labelProps?: FormLabelProps;
+    text?: any;
+    textProps?: FormTextProps;
+    horizontal?: boolean;
+}) {
+    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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Nav, Navbar } from 'react-bootstrap';
+import { useBreakpoint } from './responsiveHelper';
+import { AdaptiveContainer } from './adaptiveContainer';
+
+export 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 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

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

package/src/bootstrap/globalLoading.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+// import { useLoading, useLoadingTimeout } from '../redux/loadingSlice';
+import { Loading } from './loading';
+
+export function GlobalLoading({ loading }: { loading: boolean }) {
+    // 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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Loading } from './loading';
+
+const meta = {
+    title: 'Bootstrap / Loading',
+    component: Loading,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        children: { control: 'text' },
+        show: { control: 'check' },
+        size: { control: 'select', options: ['sm', 'md'] },
+    },
+} satisfies Meta<typeof Loading>;
+
+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

@@ -0,0 +1,22 @@
+import { Spinner, SpinnerProps, Stack } from 'react-bootstrap';
+import React from 'react';
+
+export function Loading({
+    children = 'Loading...' as any,
+    show = true,
+    className = '',
+    size,
+}: {
+    children?: any;
+    show?: boolean;
+    className?: string;
+    size?: SpinnerProps['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

@@ -0,0 +1,86 @@
+$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

@@ -0,0 +1,50 @@
+'use client';
+
+import React from 'react';
+
+export function useBreakpoint() {
+    const [breakpoint, setBreakpoint] = React.useState('xs');
+
+    React.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 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

@@ -0,0 +1,160 @@
+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 = {
+    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(),
+    },
+} satisfies Meta<typeof Screen>;
+
+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

@@ -0,0 +1,144 @@
+import React from 'react';
+import { Button, Navbar, Nav, Stack } from 'react-bootstrap';
+import { useBreakpoint } from './responsiveHelper';
+import { AdaptiveContainer } from './adaptiveContainer';
+
+//TODO Footer -> menu
+export 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,
+}: {
+    backBtn?;
+    backCb?;
+    backIcon?;
+    forwardBtn?;
+    forwardIcon?;
+    forwardCb?;
+    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;
+}) {
+    // 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>
+    );
+}