@kirill.konshin/bootstrap 0.0.1 → 0.0.3

package/src/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/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>
-    );
-});

package/src/toaster.stories.tsx

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

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

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

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

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

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

package/turbo.json

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

package/vite.config.ts

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