Manifest Debugger

No component file found for the "CSSValueInput" component.
   6 | import type { Meta, StoryObj } from '@storybook/react-vite';
   7 |
>  8 | const meta: Meta<typeof CSSValueInput> = {
     | ^
   9 |     component: CSSValueInput,
  10 |     parameters: {
  11 |         docs: {

./stories/CSSValueInput.stories.tsx:
import CSSValueInput from '../../css-value-input/src/CSSValueInput.js';

import './CSSValueInput.css';
import './InputText.css';

import type { Meta, StoryObj } from '@storybook/react-vite';

const meta: Meta<typeof CSSValueInput> = {
    component: CSSValueInput,
    parameters: {
        docs: {
            description: {
                component:
                    '`CSSValueInput` is a React component that renders a text input that can take and update a CSS value of a particular type with a default unit. The input’s behavior is similar to those in design applications such as Adobe Illustrator or XD.',
            },
        },
    },
    //https://storybook.js.org/docs/react/writing-docs/autodocs#setup-automated-documentation
    tags: ['autodocs'],
    title: 'UIKit/Controls/CSSValueInput',
};

export default meta;

type Story = StoryObj<typeof CSSValueInput>;

export const Length: Story = {
    args: {
        className: 'my-special-input',
        cssValueType: 'length',
        label: 'Font size',
        name: 'fontsize',
        placeholder: '1rem',
        tabIndex: 1,
        unit: 'rem',
        validator:
            /^(xx-small|x-small|small|medium|large|x-large|xx-large|xxx-large|inherit)$/,
        value: '24px',
    },
};

export const Time: Story = {
    args: {
        className: 'my-panel-input',
        cssValueType: 'time',
        label: 'Duration',
        max: 20,
        min: 0,
        name: 'duration',
        placeholder: '0.25s',
        step: 0.1,
        unit: 's',
    },
};

export const Angle: Story = {
    args: {
        className: 'flex-item-example',
        cssValueType: 'angle',
        icon: (
            <svg
                width="100px"
                height="100px"
                viewBox="0 0 100 100"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
            >
                <g stroke="none" strokeWidth="1" fill="none">
                    <g transform="translate(2, 2)" stroke="#222F3E" strokeWidth="4">
                        <path
                            d="M56.5106952,10.5464071 C60.8135865,11.5200327 64.8423906,13.2161538 68.4628809,15.5005439 L76.8618891,8.97963811 L87.0203619,19.1381109 L80.4994561,27.5371191 C82.7838462,31.1576094 84.4799673,35.1864135 85.4535929,39.4893048 L96,40.816875 L96,55.183125 L85.4535929,56.5106952 C84.4799673,60.8135865 82.7838462,64.8423906 80.4994561,68.4628809 L87.0203619,76.8618891 L76.8618891,87.0203619 L68.4628809,80.4994561 C64.8423906,82.7838462 60.8135865,84.4799673 56.5106952,85.4535929 L55.183125,96 L40.816875,96 L39.4893048,85.4535929 C35.1864135,84.4799673 31.1576094,82.7838462 27.5371191,80.4994561 L19.1381109,87.0203619 L8.97963811,76.8618891 L15.5005439,68.4628809 C13.2161538,64.8423906 11.5200327,60.8135865 10.5464071,56.5106952 L0,55.183125 L0,40.816875 L10.5464071,39.4893048 C11.5200327,35.1864135 13.2161538,31.1576094 15.5005439,27.5371191 L8.97963811,19.1381109 L19.1381109,8.97963811 L27.5371191,15.5005439 C31.1576094,13.2161538 35.1864135,11.5200327 39.4893048,10.5464071 L40.816875,0 L55.183125,0 L56.5106952,10.5464071 Z"
                            id="Layer-1"
                        ></path>
                        <circle cx="48" cy="48" r="14.4"></circle>
                    </g>
                </g>
            </svg>
        ),
        label: 'Rotate Z',
        name: 'rotatez',
        placeholder: '0deg',
        step: 45,
        unit: 'deg',
        value: '90deg',
    },
};

export const Percent: Story = {
    args: {
        cssValueType: 'percent',
        label: 'Width',
        min: 0,
        name: 'width',
        placeholder: '100%',
        step: 10,
        unit: '%',
        value: '30%',
    },
};

export const LabelLess: Story = {
    args: {
        className: 'my-special-input',
        cssValueType: 'length',
        name: 'labelless',
        placeholder: '1rem',
        title: 'No label',
        unit: 'rem',
        value: '24px',
    },
};

export const CustomGetValueAsNumber: Story = {
    args: {
        className: 'letter-spacing',
        getValueAsNumber: (value: number | string) => {
            if (typeof value === 'number') return value;
            // “normal” for letter-spacing is effectively equivalent to 0
            if (typeof value === 'string' && value.toLowerCase() === 'normal') {
                return 0;
            }
            return parseFloat(value);
        },
        label: 'Letter spacing',
        name: 'letterspacing',
        placeholder: 'normal',
        tabIndex: 2,
    },
};

export const BackgroundSize: Story = {
    args: {
        className: 'background-size',
        label: 'Background Size',
        name: 'backgroundsize',
        unit: '%',
        validator: /^(auto|contain|cover)$/,
        value: 'cover',
    },
};

export const ZIndex: Story = {
    args: {
        cssValueType: 'integer',
        label: 'z-index',
        name: 'zindex',
        value: '0',
    },
};

export const NumberValue: Story = {
    args: {
        cssValueType: 'integer',
        label: 'opacity',
        name: 'opacity',
        value: '0',
    },
};

export const LineHeight: Story = {
    args: {
        cssValueType: 'length',
        label: 'line height',
        name: 'line-height',
        step: 0.1,
        unit: '',
        value: '1.4',
    },
};

File: /Users/andrew/Projects/uikit/packages/date-picker/src/index.ts
Error:
No suitable component definition found.
You can debug your component file in this playground: https://react-docgen.dev/playground
Code:
export { default as DatePicker } from './DatePicker.js';
export { default as MonthCalendar } from './MonthCalendar.js';
export * from './utils.js';


File: /Users/andrew/Projects/uikit/packages/date-picker/src/utils.ts
Error:
No suitable component definition found.
You can debug your component file in this playground: https://react-docgen.dev/playground
Code:
// The following utils work on a “month” as a unique numerical value
// representing the number of months since the unix epoch (jan 1970)
const START_YEAR = 1970;
const MONTH_NAMES = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
];

const getYearFromDate = (date: Date, asUTC?: boolean) =>
    (asUTC ? date.getUTCFullYear() : date.getFullYear()) - START_YEAR;

export const getMonthFromDate = (date: Date, asUTC?: boolean) => {
    const yearAsMonths = getYearFromDate(date, asUTC) * 12;
    return yearAsMonths + (asUTC ? date.getUTCMonth() : date.getMonth());
};

export const getYearFromMonth = (month: number) => Math.floor(month / 12) + START_YEAR;

export const getMonthNameFromMonth = (month: number): string => {
    let index = month % 12;
    if (Number.isNaN(index)) return '';
    if (index < 0) index = 12 + index;
    return MONTH_NAMES[index];
};

export const getMonthAbbreviationFromMonth = (month: number) => {
    const monthName = getMonthNameFromMonth(month);
    if (monthName === 'September') return 'Sept';
    return monthName.substring(0, 3);
};

export const getDateFromMonthAndDay = (month: number, day: number, asUTC?: boolean) => {
    const monthIn12 = month < 0 ? (12 - Math.abs(month % 12)) % 12 : month % 12;
    const year = getYearFromMonth(month);
    return asUTC
        ? new Date(Date.UTC(year, monthIn12, day))
        : new Date(year, monthIn12, day);
};

export const getLastDateFromMonth = (month: number, asUTC?: boolean) => {
    // day 0 of the next month is the last day of the current month
    return getDateFromMonthAndDay(month + 1, 0, asUTC);
};

No component file found for the "Dropdown" component.
  35 | }
  36 |
> 37 | const meta: Meta<typeof Dropdown> = {
     | ^
  38 |     args: {
  39 |         onClick: fn(),
  40 |         onClose: fn(),

./stories/Dropdown.stories.tsx:
import { fn } from 'storybook/test';
import * as React from 'react';

import CSSValueInput from '../../css-value-input/src/CSSValueInput.js';
import Dropdown from '../../dropdown/src/Dropdown.js';

import './CSSValueInput.css';
import './Dropdown.css';
import './InputText.css';

import type { Meta, StoryObj } from '@storybook/react-vite';

const { Fragment } = React;

function ChevronDownIcon(props: React.SVGProps<SVGSVGElement>) {
    return (
        <svg
            aria-hidden="true"
            fill="none"
            focusable="false"
            height="12"
            viewBox="0 0 12 12"
            width="12"
            {...props}
        >
            <path
                d="M2.5 4.5 6 8l3.5-3.5"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="1.5"
            />
        </svg>
    );
}

const meta: Meta<typeof Dropdown> = {
    args: {
        onClick: fn(),
        onClose: fn(),
        onMouseDown: fn(),
        onMouseUp: fn(),
        onOpen: fn(),
        onSubmitItem: fn(),
    },
    component: Dropdown,
    parameters: {
        docs: {
            description: {
                component:
                    '`Dropdown` is a React component that renders a menu-like UI with a trigger that the user clicks to disclose a dropdown positioned below the trigger. The body of the dropdown can include any DOM, and many dropdowns can be combined to form a multi-item menu, like the system menu in the top toolbar of macOS.',
            },
        },
    },
    //https://storybook.js.org/docs/react/writing-docs/autodocs#setup-automated-documentation
    tags: ['autodocs'],
    title: 'UIKit/Controls/Dropdown',
};

export default meta;

type Story = StoryObj<typeof Dropdown>;

export const CSSLengthsDropdown: Story = {
    args: {
        children: (
            <ul>
                <li>0px</li>
                <li>4px</li>
                <li>9px</li>
                <li>18px</li>
                <li>36px</li>
                <li>54px</li>
                <li>72px</li>
                <li>144px</li>
                <li>167px</li>
                <li>198px</li>
            </ul>
        ),
        className: 'css-lengths no-trigger-text',
    },
};

export const StatesDropdown: Story = {
    args: {
        children: (
            <ul>
                <li>Alabama</li>
                <li>Alaska</li>
                <li>Arizona</li>
                <li>Arkansas</li>
                <li>California</li>
                <li>Colorado</li>
                <li>Connecticut</li>
                <li>Delaware</li>
                <li>Florida</li>
                <li>Georgia</li>
                <li>Hawaii</li>
                <li>Idaho</li>
                <li>Illinois</li>
                <li>Indiana</li>
                <li>Iowa</li>
                <li>Kansas</li>
                <li>Kentucky</li>
                <li>Louisiana</li>
                <li>Maine</li>
                <li>Maryland</li>
                <li>Massachusetts</li>
                <li>Michigan</li>
                <li>Minnesota</li>
                <li>Mississippi</li>
                <li>Missouri</li>
                <li>Montana</li>
                <li>Nebraska</li>
                <li>Nevada</li>
                <li>New Hampshire</li>
                <li>New Jersey</li>
                <li>New Mexico</li>
                <li>New York</li>
                <li>North Carolina</li>
                <li>North Dakota</li>
                <li>Ohio</li>
                <li>Oklahoma</li>
                <li>Oregon</li>
                <li>Pennsylvania</li>
                <li>Rhode Island</li>
                <li>South Carolina</li>
                <li>South Dakota</li>
                <li>Tennessee</li>
                <li>Texas</li>
                <li>Utah</li>
                <li>Vermont</li>
                <li>Virginia</li>
                <li>Washington</li>
                <li>West Virginia</li>
                <li>Wisconsin</li>
                <li>Wyoming</li>
            </ul>
        ),
        className: 'states-dropdown',
        isSearchable: true,
        placeholder: 'Choose a state…',
    },
};

export const FontWeightDropdown: Story = {
    args: {
        children: (
            <ul>
                <li data-ukt-value="100">
                    <span className="item-title">Font Weight - </span>
                    100
                </li>
                <li data-ukt-value="200">
                    <span className="item-title">Font Weight - </span>
                    200
                </li>
                <li data-ukt-value="300">
                    <span className="item-title">Font Weight - </span>
                    300
                </li>
                <li data-ukt-value="400">
                    <span className="item-title">Font Weight - </span>
                    400
                </li>
                <li data-ukt-value="500">
                    <span className="item-title">Font Weight - </span>
                    500
                </li>
                <li data-ukt-value="600">
                    <span className="item-title">Font Weight - </span>
                    600
                </li>
                <li data-ukt-value="700">
                    <span className="item-title">Font Weight - </span>
                    700
                </li>
            </ul>
        ),
        className: 'font-weight',
        isSearchable: true,
    },
};

export const ShowContextMenuOnMount: Story = {
    args: {
        children: [
            'View menu',
            <Fragment>
                <h4 className="heading">View</h4>
                <ul>
                    <li data-ukt-item>Open</li>
                    <li data-ukt-item>Preview</li>
                </ul>
                <h4 className="heading">Edit</h4>
                <ul>
                    <li data-ukt-value="save-item">Save</li>
                    <li data-ukt-value="edit-item">Edit</li>
                    <li data-ukt-value="delete-item">Delete</li>
                </ul>
            </Fragment>,
        ],
        className: 'open-on-mount-context-menu',
        isOpenOnMount: true,
    },
};

export const DropdownWithInteractiveContents: Story = {
    args: {
        children: [
            'Open',
            <div>
                <p>
                    Try interacting with the controls here. The dropdown should only close
                    when you click outside of the entire dropdown or if you hit the escape
                    key when focus isn’t in the input controls.
                </p>
                <CSSValueInput
                    cssValueType="length"
                    label="Width"
                    onSubmitValue={() => {}}
                    placeholder="100vw"
                    unit="vw"
                />
                <CSSValueInput
                    cssValueType="length"
                    label="Rotation"
                    onSubmitValue={() => {}}
                    placeholder="0deg"
                    step={5}
                    unit="deg"
                />
            </div>,
        ],
        className: 'dropdown-without-items',
        hasItems: false,
    },
};

export const SearchableWithLabel: Story = {
    args: {
        children: (
            <ul>
                <li>0px</li>
                <li>4px</li>
                <li>9px</li>
                <li>18px</li>
                <li>36px</li>
                <li>54px</li>
                <li>72px</li>
                <li>144px</li>
                <li>167px</li>
                <li>198px</li>
            </ul>
        ),
        className: 'searchable-with-label',
        isSearchable: true,
        label: (
            <span
                style={{
                    alignItems: 'center',
                    display: 'inline-flex',
                    gap: '0.25rem',
                }}
            >
                Font size
                <ChevronDownIcon />
            </span>
        ),
    },
};

export const SearchableAndAllowCreate: Story = {
    args: {
        allowCreate: true,
        children: (
            <ul>
                <li>0px</li>
                <li>4px</li>
                <li>9px</li>
                <li>18px</li>
                <li>36px</li>
                <li>54px</li>
                <li>72px</li>
                <li>144px</li>
                <li>167px</li>
                <li>198px</li>
            </ul>
        ),
        className: 'searchable-and-allow-create',
        isSearchable: true,
        label: 'Font size',
    },
};

export const CSSValueInputTrigger: Story = {
    args: {
        allowCreate: true,
        children: [
            <CSSValueInput
                name="cssinputbackgroundsize"
                onSubmitValue={() => {}}
                placeholder="cover"
                validator={/^(auto|contain|cover)$/}
            />,
            <ul>
                <li>cover</li>
                <li>contain</li>
                <li>auto</li>
                <li>50px</li>
                <li>100px</li>
                <li>200px</li>
                <li>50%</li>
            </ul>,
        ],
        className: 'css-value-input-trigger',
        hasItems: true,
        label: 'Background size',
    },
};

export const TextareaTrigger: Story = {
    args: {
        children: [
            <textarea></textarea>,
            <ul>
                <li>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
                    ullamcorper fringilla quam, vel tincidunt nisl mattis vel.
                </li>
                <li>
                    Aenean posuere erat sed enim luctus, et accumsan nisl elementum. Nulla
                    vel blandit urna, vel accumsan nulla. Nulla varius luctus ex, gravida
                    ultrices orci sagittis eu.
                </li>
                <li>
                    Quisque vitae magna euismod ligula molestie maximus id et nunc. Nam et
                    lacus euismod, porttitor massa vel, sollicitudin ex. Sed ut tellus
                    suscipit, faucibus tortor nec, fermentum mi.
                </li>
                <li>
                    Nulla sagittis justo non accumsan sagittis. Cras a eros et dolor
                    dapibus bibendum lobortis quis ante. Ut eget scelerisque massa.
                </li>
                <li>
                    Vestibulum quis dignissim nunc. Mauris fringilla at nulla non lacinia.
                    Etiam tristique elit non nisl finibus, fringilla hendrerit ligula
                    hendrerit. Fusce eget leo lacinia, eleifend diam non, suscipit purus.
                </li>
            </ul>,
        ],
        className: 'textarea-trigger',
        hasItems: true,
    },
};

export const CheckboxesDropdown: Story = {
    args: {
        children: [
            'Colors',
            <ul>
                <li>
                    <label>
                        <input type="checkbox" /> Red
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" /> Blue
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" /> Yellow
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" /> Cyan
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" /> Orchid
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" /> Slate
                    </label>
                </li>
            </ul>,
        ],
        className: 'checkboxes',
        keepOpenOnSubmit: true,
    },
};

const FIXED_HEADER_PROPS = {
    children: [
        <button
            aria-label="Open user menu"
            className="avatar-profile has-avatar"
            popoverTarget="avatar-menu-popover"
            style={{ backgroundImage: `url("https://picsum.photos/id/40/100/100")` }}
        >
            AP
        </button>,
        <ul className="menu-list avatar-dropdown">
            <div
                className="avatar-edit has-avatar"
                style={{
                    backgroundImage: `url("https://picsum.photos/id/40/100/100")`,
                }}
            >
                <div className="avatar-initials">AP</div>
            </div>
            <div className="profile-email-wrap">
                <p className="profile-email">andrew@example.com</p>
            </div>
            <form method="post" action="/logout" className="sign-out-wrap">
                <button className="btn-ghost" type="submit">
                    Sign Out
                </button>
            </form>
        </ul>,
    ] as const,
    className: 'avatar-menu',
};

export const FixedHeader: Story = {
    args: FIXED_HEADER_PROPS,
    render() {
        // const [dateStart, setDateStart] = useState(
        //     FIXED_HEADER_PROPS.dateStart,
        // );
        // const [dateEnd, setDateEnd] = useState(
        //     FIXED_HEADER_PROPS.dateEnd,
        // );

        return (
            <>
                <header className="mk-header">
                    <nav className="mk-nav a1">
                        <a className="logo" href="/"></a>
                        <a className="btn-text logo-text" href="/">
                            UIKit
                        </a>
                    </nav>
                    <div className="mk-nav center">
                        <h5 className="mk subtitle">
                            Welcome! Join our{' '}
                            <a
                                className="home-link"
                                rel="noreferrer"
                                href="https://discord.gg/dTpXZpQ9Rz"
                                target="_blank"
                            >
                                Discord.
                            </a>
                        </h5>
                    </div>
                    <nav className="mk-nav a2">
                        <a className="btn-text" href="/projects">
                            Projects
                        </a>
                        <Dropdown {...FIXED_HEADER_PROPS} />
                    </nav>
                </header>
                <h1>Lorem ipsum</h1>
            </>
        );
    },
};

export const DisabledDropdown: Story = {
    args: {
        children: (
            <ul>
                <li>0px</li>
                <li>4px</li>
                <li>9px</li>
                <li>18px</li>
                <li>36px</li>
                <li>54px</li>
                <li>72px</li>
                <li>144px</li>
                <li>167px</li>
                <li>198px</li>
            </ul>
        ),
        className: 'disabled-dropdown',
        disabled: true,
        isSearchable: true,
        label: 'Disabled',
        name: 'disabledexample',
        value: '167px',
    },
};

export const OverlappingDropdown: Story = {
    args: {
        children: (
            <ul>
                <li>the carbon in our apple pies</li>
                <li>sea of tranquility tesseract</li>
                <li>encyclopaedia galactica</li>
                <li>billions upon billions</li>
                <li>network of wormholes</li>
                <li>tingling of the spine</li>
                <li>corpus callosum</li>
                <li>finite but unbounded</li>
            </ul>
        ),
        className: 'overlapping-dropdown no-trigger-text',
    },
};

export const OutOfBoundsAtRight: Story = {
    args: {
        children: (
            <ul>
                <li>0px</li>
                <li>4px</li>
                <li>9px</li>
                <li>18px</li>
                <li>36px</li>
                <li>54px</li>
                <li>72px</li>
                <li>144px</li>
                <li>167px</li>
                <li>198px</li>
            </ul>
        ),
        className: 'out-of-bounds-example position-right',
        isSearchable: true,
        name: 'outofboundsatright',
        placeholder: 'Fill available space',
    },
};

export const OutOfBoundsWithNoDirectionChange: Story = {
    args: {
        children: (
            <ul>
                <li>Antarctica</li>
                <li>Arctic Circle</li>
                <li>North Pole</li>
            </ul>
        ),
        className: 'out-of-bounds-example no-direction-change',
        isSearchable: true,
        name: 'outofboundsatbottomnodirectionchange',
        placeholder: 'Show below even though it goes out of bounds',
    },
};

export const ConstrainHeightToAvoidClipping: Story = {
    args: {
        children: (
            <ul>
                <li>Antarctica</li>
                <li>Arctic Circle</li>
                <li>North Pole</li>
            </ul>
        ),
        className: 'out-of-bounds-example no-direction-change',
        constrainHeightToAvoidClipping: true,
        isSearchable: true,
        name: 'constrainheighttoavoidclipping',
        placeholder: 'Stay below, but scroll if clipping remains',
    },
};

No component file found for the "Dropdown" component.
   7 | import type { Meta, StoryObj } from '@storybook/react-vite';
   8 |
>  9 | const meta: Meta<typeof useIsOutOfBounds> = {
     | ^
  10 |     argTypes: {
  11 |         element: {
  12 |             description:

./stories/useIsOutOfBounds.stories.tsx:
import Dropdown from '../../dropdown/src/Dropdown.js';
import useIsOutOfBounds from '../../use-is-out-of-bounds/src/useIsOutOfBounds.js';

import './Dropdown.css';
import './useIsOutOfBounds.css';

import type { Meta, StoryObj } from '@storybook/react-vite';

const meta: Meta<typeof useIsOutOfBounds> = {
    argTypes: {
        element: {
            description:
                'The HTMLElement that will be checked to see if it is out of bounds and in what direction. Can be null or undefined.',
            table: {
                type: { summary: 'object' },
            },
        },
    },
    component: Dropdown,
    parameters: {
        controls: { exclude: /.*/g },
        docs: {
            description: {
                component: `\`useIsOutOfBounds\` is a React hook that returns an object indicating if the
current component is out of the bounds of its nearest ancestor that doesn’t have overflow: visible. In other words,
it provides collision detection between an element and its bounds. The return value is

\`\`\`
type OutOfBounds = {
    bottom: boolean;
    hasLayout: boolean;
    left: boolean;
    maxHeight: null | number;
    maxWidth: null | number;
    right: boolean;
    top: boolean;
};
\`\`\`

It is used in @acusti/dropdown to automatically position the dropdown in the direction
where there is room for it to render, so this story uses \`<Dropdown>\` to illustrate that behavior.`,
            },
        },
    },
    //https://storybook.js.org/docs/react/writing-docs/autodocs#setup-automated-documentation
    tags: ['autodocs'],
    title: 'UIKit/Hooks/useIsOutOfBounds',
};

export default meta;

type Story = StoryObj<typeof Dropdown>;

const list = (
    <ul>
        <li>Brunei Darussalam</li>
        <li>Cambodia</li>
        <li>Indonesia</li>
        <li>Laos</li>
        <li>Malaysia</li>
        <li>Myanmar (Burma)</li>
        <li>Philippines</li>
        <li>Singapore</li>
        <li>Thailand</li>
        <li>Timor-Leste (East Timor)</li>
        <li>Vietnam</li>
    </ul>
);

export const NotOutOfBounds: Story = {
    args: {
        children: list,
        className: 'not-out-of-bounds-example',
        isSearchable: true,
        name: 'notoutofbounds',
        placeholder: 'Default behavior',
    },
};

export const OutOfBoundsAtBottom: Story = {
    args: {
        children: list,
        className: 'out-of-bounds-example',
        isSearchable: true,
        name: 'outofboundsatbottom',
        placeholder: 'Show above',
    },
};

export const OutOfBoundsAtRight: Story = {
    args: {
        children: list,
        className: 'out-of-bounds-example position-right',
        isSearchable: true,
        name: 'outofboundsatright',
        placeholder: 'Show above & to the left',
    },
};

export const OutOfBoundsTopAndBottom: Story = {
    args: {
        children: (
            <ul>
                <li>Algeria</li>
                <li>Angola</li>
                <li>Benin</li>
                <li>Botswana</li>
                <li>Burkina Faso</li>
                <li>Burundi</li>
                <li>Cabo Verde</li>
                <li>Cameroon</li>
                <li>Central African Republic</li>
                <li>Chad</li>
                <li>Comoros</li>
                <li>Congo, Democratic Republic of the</li>
                <li>Congo, Republic of the</li>
                <li>Cote d’Ivoire</li>
                <li>Djibouti</li>
                <li>Egypt</li>
                <li>Equatorial Guinea</li>
                <li>Eritrea</li>
                <li>Eswatini</li>
                <li>Ethiopia</li>
                <li>Gabon</li>
                <li>Gambia</li>
                <li>Ghana</li>
                <li>Guinea</li>
                <li>Guinea-Bissau</li>
                <li>Kenya</li>
                <li>Lesotho</li>
                <li>Liberia</li>
                <li>Libya</li>
                <li>Madagascar</li>
                <li>Malawi</li>
                <li>Mali</li>
                <li>Mauritania</li>
                <li>Mauritius</li>
                <li>Morocco</li>
                <li>Mozambique</li>
                <li>Namibia</li>
                <li>Niger</li>
                <li>Nigeria</li>
                <li>Rwanda</li>
                <li>Sao Tome and Principe</li>
                <li>Senegal</li>
                <li>Seychelles</li>
                <li>Sierra Leone</li>
                <li>Somalia</li>
                <li>South Africa</li>
                <li>South Sudan</li>
                <li>Sudan</li>
                <li>Tanzania</li>
                <li>Togo</li>
                <li>Tunisia</li>
                <li>Uganda</li>
                <li>Zambia</li>
                <li>Zimbabwe</li>
            </ul>
        ),
        className: 'out-of-bounds-top-and-bottom-example',
        isSearchable: true,
        name: 'outofboundstopandbottom',
        placeholder: 'long list',
    },
};

No component file found for the "InputText" component.
   7 | import './InputText.css';
   8 |
>  9 | const meta: Meta<typeof InputText> = {
     | ^
  10 |     component: InputText,
  11 |     parameters: {
  12 |         docs: {

./stories/InputText.stories.tsx:
import type { Meta, StoryObj } from '@storybook/react-vite';
import { type FormEvent, useState } from 'react';
import { fn } from 'storybook/test';

import InputText from '../../input-text/src/InputText.js';

import './InputText.css';

const meta: Meta<typeof InputText> = {
    component: InputText,
    parameters: {
        docs: {
            description: {
                component:
                    '`InputText` is a React component that renders a textual input (`type: "text"|"email"|"number"|"password"|"search"|"tel"|"url"`) that is uncontrolled, but whose value is overwritten whenever `props.initialValue` changes. Also, if `props.selectTextOnFocus` is true, it selects the entire contents of the input whenever the input is focused. And it supports multiline inputs (rendered as a `<textarea>`) that automatically resize vertically to fit their content.',
            },
        },
    },
    //https://storybook.js.org/docs/react/writing-docs/autodocs#setup-automated-documentation
    tags: ['autodocs'],
    title: 'UIKit/Controls/InputText',
};

export default meta;

type Story = StoryObj<typeof InputText>;

export const EmptyInput: Story = {
    args: {
        className: 'input-text',
        name: 'empty',
        // NOTE spies are a workaround for a bug related to implicit arg detection
        onBlur: fn(),
        onChange: fn(),
        onChangeValue: fn(),
        onFocus: fn(),
        onKeyDown: fn(),
        onKeyUp: fn(),
        placeholder: 'enter text here…',
    },
};

export const InputWithInitialValue: Story = {
    args: {
        className: 'input-text',
        initialValue: 'Bolivia',
        placeholder: 'enter country name',
    },
};

export const InputWithInitialValueAndSelectTextOnFocus: Story = {
    args: {
        className: 'input-text',
        initialValue: 'Bolivia',
        name: 'country',
        placeholder: 'enter country name (selectTextOnFocus)',
        selectTextOnFocus: true,
    },
};

export const MultiLineInputWithInitialValueAndSelectTextOnFocus: Story = {
    args: {
        className: 'multi-line-input-text',
        initialValue:
            'The Black Hawk War, or, How to Demolish an Entire Civilization and Still Feel Good About Yourself in the Morning, or, We Apologize for the Inconvenience but You’re Going to Have to Leave Now, or, “I have fought the Big Knives and will continue to fight them until they are off our lands!”',
        maxHeight: 600,
        multiLine: true,
        name: 'multi-line-input',
        placeholder: 'enter text of any length',
        selectTextOnFocus: true,
    },
};

const SUBMIT_ON_ENTER_PROPS = {
    className: 'multi-line-input-text',
    maxHeight: 600,
    multiLine: true,
    name: 'multi-line-submit-on-enter-input',
    placeholder: 'enter text of any length',
    submitOnEnter: true,
};

const formatDate = new Intl.DateTimeFormat(undefined, {
    timeStyle: 'medium',
}).format;

export const MultiLineInputWithSubmitOnEnter: Story = {
    args: SUBMIT_ON_ENTER_PROPS,
    render() {
        const [lastSubmitDate, setLastSubmitDate] = useState<Date | null>(null);
        const lastSubmit = lastSubmitDate ? formatDate(lastSubmitDate) : 'never';

        return (
            <form
                onSubmit={(event: FormEvent<HTMLFormElement>) => {
                    event.preventDefault();
                    setLastSubmitDate(new Date());
                }}
            >
                <InputText {...SUBMIT_ON_ENTER_PROPS} />
                <pre>Last submitted: {lastSubmit}</pre>
            </form>
        );
    },
};

export const MultiLineInputWithSubmitOnEnterNoForm: Story = {
    args: {
        ...SUBMIT_ON_ENTER_PROPS,
        name: `${SUBMIT_ON_ENTER_PROPS.name}-no-form`,
    },
};

function ChatLikeInputDemo() {
    const [message, setMessage] = useState('');
    const [messages, setMessages] = useState<Array<string>>([]);

    return (
        <form
            onSubmit={(event) => {
                event.preventDefault();
                if (!message.trim()) return;
                setMessages((previousMessages) => [...previousMessages, message.trim()]);
                setMessage('');
            }}
        >
            <pre>{messages.join('\n') || 'No messages yet'}</pre>
            <InputText
                className="input-text"
                initialValue={message}
                keepFocusOnSubmit
                onChangeValue={setMessage}
                placeholder="Type then press Enter"
                submitOnEnter
            />
        </form>
    );
}

export const ChatLikeInputWithSubmitOnEnter: Story = {
    args: {
        className: 'input-text',
        keepFocusOnSubmit: true,
        placeholder: 'Type then press Enter',
        submitOnEnter: true,
    },
    render() {
        return <ChatLikeInputDemo />;
    },
};

const DOUBLE_CLICK_TO_EDIT_PROPS = {
    className: 'input-text-double-click-to-edit',
    doubleClickToEdit: true,
    initialValue: 'Lorem ipsum dolor sit amet',
    name: 'double-click-to-edit-input',
};

export const InputWithDoubleClickToEdit: Story = {
    args: DOUBLE_CLICK_TO_EDIT_PROPS,
};

const DISCARD_ON_ESCAPE_PROPS = {
    className: 'input-text',
    discardOnEscape: true,
    initialValue: 'Lorem ipsum',
    name: 'discard-on-escape-input',
};

export const InputWithDiscardOnEscape: Story = {
    args: DISCARD_ON_ESCAPE_PROPS,
};

export const InputWithDoubleClickToEditAndDiscardOnEscape: Story = {
    args: {
        ...DISCARD_ON_ESCAPE_PROPS,
        ...DOUBLE_CLICK_TO_EDIT_PROPS,
        name: 'double-click-to-edit-and-discard-on-escape-input',
    },
};

export const InputWithAutoFocus: Story = {
    args: {
        autoFocus: true,
        name: 'autofocus-input',
    },
};

export const MultiLineInputWithMinHeight: Story = {
    args: {
        className: 'multi-line-input-text',
        initialValue:
            'This textarea has a minHeight of 50px.\n\nTry deleting this text to see that the textarea does not shrink below the minimum height.',
        minHeight: 50,
        multiLine: true,
        name: 'multi-line-min-height-input',
        placeholder: 'enter text of any length',
    },
};

export const MultiLineInputWithMaxHeight: Story = {
    args: {
        className: 'multi-line-input-text',
        initialValue:
            'This textarea has a maxHeight of 150px.\n\nLine 3\nLine 4\nLine 5\nLine 6\nLine 7\nLine 8\nLine 9\nLine 10',
        maxHeight: 150,
        multiLine: true,
        name: 'multi-line-max-height-input',
        placeholder: 'enter text of any length',
    },
};

export const MultiLineInputWithMinHeightAndMaxHeight: Story = {
    args: {
        className: 'multi-line-input-text',
        initialValue: 'This textarea has minHeight of 100px and maxHeight of 200px.',
        maxHeight: 200,
        minHeight: 100,
        multiLine: true,
        name: 'multi-line-min-max-height-input',
        placeholder: 'enter text of any length',
    },
};

export const MultiLineInputWithCSSTransition: Story = {
    args: {
        className: 'multi-line-input-css-transition',
        multiLine: true,
        name: 'multi-line-input-css-transition',
        placeholder: 'Write a quick note here',
        rows: 4,
    },
};

const MULTI_LINE_INPUT_IN_POPOVER_PROPS = {
    className: 'multi-line-input-text',
    initialValue:
        'This multi-line input should resize to fit its contents when the popover opens even though it initializes with display: none as a result of being inside a hidden popover element so it doesn’t have any dimensions when the component initially renders.',
    multiLine: true,
    name: 'multi-line-input-in-popover',
    selectTextOnFocus: true,
};

export const MultiLineInputInPopover: Story = {
    args: MULTI_LINE_INPUT_IN_POPOVER_PROPS,
    render() {
        return (
            <>
                <button popoverTarget="multi-line-input-popover">Open Popover</button>
                <div id="multi-line-input-popover" popover="auto">
                    <InputText {...MULTI_LINE_INPUT_IN_POPOVER_PROPS} />
                </div>
            </>
        );
    },
};

const MULTI_LINE_INPUT_WITH_AUTO_FOCUS_PROPS = {
    autoFocus: true,
    initialValue: 'This multi-line input should be focused when the popover opens',
    multiLine: true,
    name: 'multi-line-input-with-autofocus-in-popover',
    selectTextOnFocus: true,
};

export const MultiLineInputWithAutoFocusInPopover: Story = {
    args: MULTI_LINE_INPUT_WITH_AUTO_FOCUS_PROPS,
    render() {
        return (
            <>
                <button popoverTarget="multi-line-input-with-autofocus-popover">
                    Open Popover
                </button>
                <div id="multi-line-input-with-autofocus-popover" popover="auto">
                    <InputText {...MULTI_LINE_INPUT_WITH_AUTO_FOCUS_PROPS} />
                </div>
            </>
        );
    },
};

File: /Users/andrew/Projects/uikit/packages/date-picker/src/index.ts
Error:
No suitable component definition found.
You can debug your component file in this playground: https://react-docgen.dev/playground
Code:
export { default as DatePicker } from './DatePicker.js';
export { default as MonthCalendar } from './MonthCalendar.js';
export * from './utils.js';


File: /Users/andrew/Projects/uikit/packages/date-picker/src/utils.ts
Error:
No suitable component definition found.
You can debug your component file in this playground: https://react-docgen.dev/playground
Code:
// The following utils work on a “month” as a unique numerical value
// representing the number of months since the unix epoch (jan 1970)
const START_YEAR = 1970;
const MONTH_NAMES = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
];

const getYearFromDate = (date: Date, asUTC?: boolean) =>
    (asUTC ? date.getUTCFullYear() : date.getFullYear()) - START_YEAR;

export const getMonthFromDate = (date: Date, asUTC?: boolean) => {
    const yearAsMonths = getYearFromDate(date, asUTC) * 12;
    return yearAsMonths + (asUTC ? date.getUTCMonth() : date.getMonth());
};

export const getYearFromMonth = (month: number) => Math.floor(month / 12) + START_YEAR;

export const getMonthNameFromMonth = (month: number): string => {
    let index = month % 12;
    if (Number.isNaN(index)) return '';
    if (index < 0) index = 12 + index;
    return MONTH_NAMES[index];
};

export const getMonthAbbreviationFromMonth = (month: number) => {
    const monthName = getMonthNameFromMonth(month);
    if (monthName === 'September') return 'Sept';
    return monthName.substring(0, 3);
};

export const getDateFromMonthAndDay = (month: number, day: number, asUTC?: boolean) => {
    const monthIn12 = month < 0 ? (12 - Math.abs(month % 12)) % 12 : month % 12;
    const year = getYearFromMonth(month);
    return asUTC
        ? new Date(Date.UTC(year, monthIn12, day))
        : new Date(year, monthIn12, day);
};

export const getLastDateFromMonth = (month: number, asUTC?: boolean) => {
    // day 0 of the next month is the last day of the current month
    return getDateFromMonthAndDay(month + 1, 0, asUTC);
};