@kirill.konshin/bootstrap 0.0.1

package/src/controls.tsx

@@ -0,0 +1,119 @@
+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/error.stories.tsx

@@ -0,0 +1,34 @@
+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/error.tsx

@@ -0,0 +1,37 @@
+'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/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: 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/field.tsx

@@ -0,0 +1,37 @@
+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/footer.tsx

@@ -0,0 +1,61 @@
+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/globalLoading.stories.tsx

@@ -0,0 +1,25 @@
+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/globalLoading.tsx

@@ -0,0 +1,19 @@
+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/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/loading.stories.tsx

@@ -0,0 +1,35 @@
+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/loading.tsx

@@ -0,0 +1,24 @@
+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/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/responsiveHelper.tsx

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