@kirill.konshin/bootstrap 0.0.1

package/src/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: 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/screen.tsx

@@ -0,0 +1,146 @@
+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>
+    );
+});

package/src/toaster.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Toaster } from './toaster';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Toaster> = {
+    title: 'Bootstrap / Toaster',
+    component: Toaster,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+    args: { onClick: fn() },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        toast: 'Hello, World!',
+    },
+};
+
+export const Object: Story = {
+    args: {
+        toast: { message: 'Toast', variant: 'dark' },
+    },
+};

package/src/toaster.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import React, { useState, FC } from 'react';
+import { Toast, ToastProps } from 'react-bootstrap';
+// import { useToaster } from '../redux/toasterSlice';
+
+export type ToasterProps = {
+    toast: string | { message: string; title?: string; variant?: 'dark' | 'success' | 'danger' };
+} & ToastProps;
+
+export const Toaster: FC<ToasterProps> = function Toaster({ toast }) {
+    //const { toast, setToast } = useToaster();
+    const [dismissed, setDismissed] = useState(false);
+
+    const msg = typeof toast === 'string' ? toast : toast?.message;
+    // const title = typeof toast === 'string' ? 'Notification' : toast?.title;
+    const variant = typeof toast === 'string' ? '' : toast?.variant;
+
+    return (
+        <Toast
+            onClose={() => setDismissed(true)}
+            show={!dismissed}
+            delay={10000}
+            autohide
+            bg={variant?.toLowerCase()}
+            className="position-fixed top-50 right-50 min-w-200px z-3"
+        >
+            <Toast.Header>
+                <strong className="me-auto">Notification</strong>
+            </Toast.Header>
+            <Toast.Body
+                className={
+                    ['dark', 'success', 'danger'].includes((variant as string)?.toLowerCase()) ? 'text-white' : ''
+                }
+            >
+                {msg}
+            </Toast.Body>
+        </Toast>
+    );
+};

package/src/useModal.stories.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useModal, UseModalProps } from './useModal';
+import { Button } from 'react-bootstrap';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<FC<UseModalProps>> = {
+    title: 'Bootstrap / useModal',
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        children: { control: 'text' },
+        title: { control: 'text' },
+        cancelButton: { control: 'text' },
+        submitButton: { control: 'text' },
+        offcanvas: { control: 'check' },
+    },
+    args: {
+        children: 'Modal Content',
+        title: 'Modal Title',
+    },
+    render: function Demo(args) {
+        const { open, show, close, ModalDialog } = useModal();
+        return (
+            <>
+                <Button onClick={open}>Open Modal</Button>
+                <ModalDialog {...args} show={show}>
+                    {args.children}
+                    <Button onClick={close}>Close Modal</Button>
+                </ModalDialog>
+            </>
+        );
+    },
+    // args: { onSubmit: (e) => e.preventDefault() },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};
+
+export const Offcanvas: Story = {
+    args: {
+        offcanvas: true,
+    },
+};

package/src/useModal.tsx

@@ -0,0 +1,93 @@
+import React, { useCallback, useMemo, useState, JSX, FC, memo } from 'react';
+import { Button, Modal, ModalProps, Offcanvas, OffcanvasProps, Stack } from 'react-bootstrap';
+
+export type UseModalArgs = { onClose?: any; showOnMount?: boolean };
+
+export type UseModalProps = {
+    children?: any;
+    show?: boolean;
+    onSubmit?: (e: any) => void;
+    submitButton?: string | any;
+    cancelButton?: string | any;
+    offcanvas?: boolean;
+    title?: string | any;
+    containerProps?: ModalProps | OffcanvasProps;
+};
+
+export function useModal({ onClose, showOnMount }: UseModalArgs = {}): {
+    show: boolean | undefined;
+    close: () => void;
+    open: () => void;
+    ModalDialog: FC<ModalProps>;
+} {
+    const [show, setShow] = useState(showOnMount);
+
+    const close = useCallback((): void => {
+        setShow(false);
+        onClose?.();
+    }, [onClose]);
+
+    const open = useCallback((): void => setShow(true), []);
+
+    const defaultOnSubmit = useCallback(
+        (e: any) => {
+            e.preventDefault();
+            close();
+        },
+        [close],
+    );
+
+    const ModalDialog = useMemo(
+        () =>
+            memo(function ModalDialog({
+                children,
+                show,
+                onSubmit = defaultOnSubmit,
+                submitButton = 'Done',
+                cancelButton = 'Cancel',
+                offcanvas = false,
+                title = null as any,
+                containerProps = {},
+            }: ModalProps) {
+                const Container = offcanvas ? Offcanvas : Modal;
+                const containerDefaultProps = offcanvas ? { style: { maxWidth: '85%' } } : {};
+                const Body = offcanvas ? Offcanvas.Body : Modal.Body;
+                const Header = offcanvas ? Offcanvas.Header : Modal.Header;
+                const Title = offcanvas ? Offcanvas.Title : Modal.Title;
+
+                return (
+                    <Container {...{ ...containerDefaultProps, ...containerProps }} show={show} onHide={close}>
+                        <form onSubmit={onSubmit}>
+                            {title && (
+                                <Header closeButton>
+                                    <Title>{title}</Title>
+                                </Header>
+                            )}
+
+                            <Body as={Stack} gap={3}>
+                                {show && children}
+                            </Body>
+
+                            {!offcanvas && (submitButton || cancelButton) && (
+                                <Modal.Footer>
+                                    {cancelButton && (
+                                        <Button variant="outline-secondary" onClick={close}>
+                                            {cancelButton}
+                                        </Button>
+                                    )}
+                                    {submitButton && (
+                                        <Button variant="secondary" type="submit">
+                                            {submitButton}
+                                        </Button>
+                                    )}
+                                </Modal.Footer>
+                            )}
+                        </form>
+                    </Container>
+                );
+            }),
+        [close, defaultOnSubmit],
+    );
+
+    return { show, close, open, ModalDialog };
+}

package/src/useWrappedForm.ts

@@ -0,0 +1,42 @@
+import { useForm, FormState } from 'react-hook-form';
+import { useCallback } from 'react';
+
+export const isFormLoading = (formState: FormState<any>): boolean => formState.isLoading || formState.isSubmitting;
+
+export const useWrappedForm: typeof useForm = (options) => {
+    const form = useForm(options);
+
+    const handleSubmit: typeof form.handleSubmit = useCallback(
+        (onSubmit, onError) => {
+            const wrappedSubmit: typeof onSubmit = async (data) => {
+                try {
+                    await onSubmit(data);
+                } catch (e) {
+                    form.setError('root', { type: 'server', message: (e as Error).message });
+                    console.error('Error submitting form', e);
+                }
+            };
+            return form.handleSubmit(wrappedSubmit, onError);
+        },
+        [form],
+    );
+
+    return { ...form, handleSubmit };
+};
+
+/**
+ * Issue #3: Submit event still propagates to parent when using portal
+ * https://reactjs.org/docs/portals.html#event-bubbling-through-portals
+ * Event bubbling goes through React DOM instead of HTML DOM
+ * Portals don't have an effect on this one, we need to stop event propagation
+ * This should be our default form handling method
+ * https://codesandbox.io/s/react-hook-form-nested-portal-6x3fvy?file=/src/App.tsx:1905-2261
+ * https://github.com/react-hook-form/react-hook-form/issues/1005#issuecomment-988380981
+ */
+export const stopPropagation =
+    (callback: any) =>
+    (e: Event): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        callback(e);
+    };

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../utils-private/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "declarationDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": []
+}

package/turbo.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": ["src/**/*/index.ts", "package.json", "dist/**/*"]
+    }
+  }
+}

package/vite.config.ts

@@ -0,0 +1,2 @@
+import config from '../utils-private/vite.config';
+export default config;