@kirill.konshin/bootstrap 0.0.2 → 0.0.3

package/src/controls.tsx

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

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

@@ -1,37 +0,0 @@
-'use client';
-
-import React, { FC, memo } 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> = memo(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

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

@@ -1,37 +0,0 @@
-import React, { FC, memo } 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> = memo(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.stories.tsx

@@ -1,121 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Footer, FooterNavItem } from './footer';
-
-const meta: Meta<typeof Footer> = {
-    title: 'Bootstrap / Footer',
-    component: Footer,
-    parameters: {
-        layout: 'fullscreen',
-    },
-    tags: ['autodocs'],
-    argTypes: {},
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        children: (
-            <>
-                <FooterNavItem href="#" icon="bi-house">
-                    Home
-                </FooterNavItem>
-                <FooterNavItem href="#" icon="bi-search">
-                    Search
-                </FooterNavItem>
-                <FooterNavItem href="#" icon="bi-person">
-                    Profile
-                </FooterNavItem>
-            </>
-        ),
-    },
-};
-
-export const WithActiveItem: Story = {
-    args: {
-        children: (
-            <>
-                <FooterNavItem href="#" icon="bi-house" active>
-                    Home
-                </FooterNavItem>
-                <FooterNavItem href="#" icon="bi-search">
-                    Search
-                </FooterNavItem>
-                <FooterNavItem href="#" icon="bi-gear">
-                    Settings
-                </FooterNavItem>
-                <FooterNavItem href="#" icon="bi-person">
-                    Profile
-                </FooterNavItem>
-            </>
-        ),
-    },
-};
-
-export const ManyItems: Story = {
-    args: {
-        children: (
-            <>
-                <FooterNavItem href="#" icon="bi-house">
-                    Home
-                </FooterNavItem>
-                <FooterNavItem href="#" icon="bi-search">
-                    Search
-                </FooterNavItem>
-                <FooterNavItem href="#" icon="bi-bell">
-                    Notifications
-                </FooterNavItem>
-                <FooterNavItem href="#" icon="bi-chat">
-                    Messages
-                </FooterNavItem>
-                <FooterNavItem href="#" icon="bi-person">
-                    Profile
-                </FooterNavItem>
-            </>
-        ),
-    },
-};
-
-// FooterNavItem stories - rendered within Footer for proper context
-export const NavItemDefault: StoryObj<typeof FooterNavItem> = {
-    args: {
-        href: '#',
-        icon: 'bi-house',
-        children: 'Home',
-    },
-    render: (args) => (
-        <Footer>
-            <FooterNavItem {...args} />
-        </Footer>
-    ),
-};
-
-export const NavItemActive: StoryObj<typeof FooterNavItem> = {
-    args: {
-        href: '#',
-        icon: 'bi-house',
-        children: 'Home',
-        active: true,
-    },
-    render: (args) => (
-        <Footer>
-            <FooterNavItem {...args} />
-        </Footer>
-    ),
-};
-
-export const NavItemIconOnly: StoryObj<typeof FooterNavItem> = {
-    args: {
-        href: '#',
-        icon: 'bi-bell',
-    },
-    render: (args) => (
-        <Footer>
-            <FooterNavItem {...args} />
-        </Footer>
-    ),
-};

package/src/footer.tsx

@@ -1,65 +0,0 @@
-import React, { FC, memo } 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> = memo(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 type FooterProps = {
-    children: any;
-};
-
-export const Footer: FC<FooterProps> = memo(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

@@ -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/globalLoading.tsx

@@ -1,19 +0,0 @@
-import React, { FC, memo } from 'react';
-// import { useLoading, useLoadingTimeout } from '../redux/loadingSlice';
-import { Loading } from './loading';
-
-export type GlobalLoadingProps = { loading: boolean };
-
-export const GlobalLoading: FC<GlobalLoadingProps> = memo(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

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