@acusti/uikit-docs 0.1.0

package/.storybook/main.ts

@@ -0,0 +1,28 @@
+import { dirname, join } from 'path';
+
+import type { StorybookConfig } from '@storybook/react-vite';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+    return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+    addons: [getAbsolutePath('@storybook/addon-essentials')],
+    docs: { autodocs: 'tag' },
+    framework: {
+        name: getAbsolutePath('@storybook/react-vite'),
+        options: {},
+    },
+    stories: ['../stories/Introduction.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+    typescript: {
+        check: false,
+        reactDocgen: 'react-docgen',
+        skipBabel: true,
+    },
+};
+
+export default config;

package/.storybook/manager.ts

@@ -0,0 +1,8 @@
+import { addons } from '@storybook/manager-api';
+
+addons.setConfig({
+    enableShortcuts: false,
+    sidebar: {
+        collapsedRoots: ['example'],
+    },
+});

package/.storybook/preview.ts

@@ -0,0 +1,19 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: '^on[A-Z].*' },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+            },
+        },
+        previewTabs: {
+            'storybook/docs/panel': { index: -1 }, // move “Docs” tab before “Canvas”
+        },
+        viewMode: 'docs',
+    },
+};
+
+export default preview;

package/README.md

@@ -0,0 +1,6 @@
+# @acusti/uikit-docs
+
+#### [:blue_book: Storybook instance](https://acusti-uikit.netlify.app/)
+
+This is where the storybook-based documentation and examples live for
+test-driving the components and libraries in UIKit

package/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "@acusti/uikit-docs",
+    "version": "0.1.0",
+    "engines": {
+        "node": ">=14"
+    },
+    "scripts": {
+        "build": "storybook build -o dist",
+        "storybook": "storybook dev -p 6006"
+    },
+    "devDependencies": {
+        "@storybook/addon-essentials": "^8.4.7",
+        "@storybook/blocks": "^8.4.7",
+        "@storybook/manager-api": "^8.4.7",
+        "@storybook/react": "^8.4.7",
+        "@storybook/react-vite": "^8.4.7",
+        "@storybook/test": "^8.4.7",
+        "@types/react": "^19.0.2",
+        "core-js": "^3.38.1",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "storybook": "^8.4.7",
+        "typescript": "5.7.3",
+        "vite": "^5.4.1"
+    }
+}

package/stories/Button.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+    title: 'Example/Button',
+    component: Button,
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+    tags: ['autodocs'],
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+    args: {
+        primary: true,
+        label: 'Button',
+    },
+};
+
+export const Secondary: Story = {
+    args: {
+        label: 'Button',
+    },
+};
+
+export const Large: Story = {
+    args: {
+        size: 'large',
+        label: 'Button',
+    },
+};
+
+export const Small: Story = {
+    args: {
+        size: 'small',
+        label: 'Button',
+    },
+};

package/stories/Button.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+    /**
+     * Is this the principal call to action on the page?
+     */
+    primary?: boolean;
+    /**
+     * What background color to use
+     */
+    backgroundColor?: string;
+    /**
+     * How large should the button be?
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Button contents
+     */
+    label: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+    primary = false,
+    size = 'medium',
+    backgroundColor,
+    label,
+    ...props
+}: ButtonProps) => {
+    const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+    return (
+        <button
+            type="button"
+            className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+            style={{ backgroundColor }}
+            {...props}
+        >
+            {label}
+        </button>
+    );
+};

package/stories/CSSValueInput.css

@@ -0,0 +1,38 @@
+.cssvalueinput {
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    padding: 10px 14px;
+}
+
+.innerZoomElementWrapper .cssvalueinput {
+    background-color: rgb(30 167 253 / 25%);
+}
+
+.cssvalueinput-icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 8px;
+}
+
+.cssvalueinput-icon svg {
+    width: 100%;
+    height: 100%;
+}
+
+.cssvalueinput-label {
+    padding-right: 10px;
+}
+
+.cssvalueinput-label-text {
+    font-family: system-ui;
+    font-size: 14px;
+    margin: 0;
+}
+
+.cssvalueinput-value input {
+    width: 65px;
+    padding: 3px 6px;
+    font-size: 13px;
+    line-height: 13px;
+}

package/stories/CSSValueInput.stories.tsx

@@ -0,0 +1,171 @@
+import * as React from 'react';
+
+import CSSValueInput from '../../css-value-input/src/CSSValueInput.js';
+
+import './CSSValueInput.css';
+import './InputText.css';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+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) => {
+            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,
+    },
+};

package/stories/DatePicker.css

@@ -0,0 +1,3 @@
+.uktmonthcalendar {
+    font-family: system-ui, sans-serif;
+}

package/stories/DatePicker.stories.tsx

@@ -0,0 +1,99 @@
+import { DatePicker, getMonthFromDate } from '../../date-picker/src/index.js';
+import * as React from 'react';
+
+import './DatePicker.css';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const { useState } = React;
+
+const meta: Meta<typeof DatePicker> = {
+    argTypes: {
+        dateEnd: {
+            control: 'date',
+            description: '(optional) end date of current date range',
+        },
+        dateStart: {
+            control: 'date',
+            description: '(optional) start date of current date range',
+        },
+    },
+    component: DatePicker,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    '`DatePicker` is a React component that renders a calendar-based date picker UI with support for date ranges.',
+            },
+        },
+    },
+    //https://storybook.js.org/docs/react/writing-docs/autodocs#setup-automated-documentation
+    tags: ['autodocs'],
+    title: 'UIKit/Controls/DatePicker/DatePicker',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+export const DefaultDatePicker: Story = {
+    args: {
+        className: 'default-date-picker-story',
+    },
+};
+
+export const TwoUpDatePicker: Story = {
+    args: {
+        className: 'two-up-date-picker-story',
+        isTwoUp: true,
+    },
+};
+
+const DATE_RANGE_NAVIDAD_DIA_DE_LOS_REYES_PROPS = {
+    className: 'date-range-date-picker-story',
+    dateEnd: new Date(2024, 0, 6).toISOString(),
+    dateStart: new Date(2023, 11, 25).toISOString(),
+    isTwoUp: true,
+};
+
+export const DateRangeNavidadDiaDeLosReyesDatePicker: Story = {
+    args: DATE_RANGE_NAVIDAD_DIA_DE_LOS_REYES_PROPS,
+    render() {
+        const [dateStart, setDateStart] = useState(
+            DATE_RANGE_NAVIDAD_DIA_DE_LOS_REYES_PROPS.dateStart,
+        );
+        const [dateEnd, setDateEnd] = useState(
+            DATE_RANGE_NAVIDAD_DIA_DE_LOS_REYES_PROPS.dateEnd,
+        );
+
+        return (
+            <DatePicker
+                {...DATE_RANGE_NAVIDAD_DIA_DE_LOS_REYES_PROPS}
+                dateEnd={dateEnd}
+                dateStart={dateStart}
+                onChange={(update) => {
+                    if (update.dateEnd != null) setDateEnd(update.dateEnd);
+                    if (update.dateStart != null) setDateStart(update.dateStart);
+                }}
+            />
+        );
+    },
+};
+
+export const NoFutureTwoUpDatePicker: Story = {
+    args: {
+        className: 'no-future-two-up-date-picker-story',
+        isTwoUp: true,
+        monthLimitLast: getMonthFromDate(new Date()),
+    },
+};
+
+export const ShowEndInitiallyDatePicker: Story = {
+    args: {
+        className: 'no-future-two-up-date-picker-story',
+        dateEnd: new Date(1234, 0, 1).toISOString(),
+        dateStart: new Date(1233, 0, 1).toISOString(),
+        isTwoUp: true,
+        showEndInitially: true,
+    },
+};

package/stories/Dropdown.css

@@ -0,0 +1,149 @@
+.sb-story {
+    min-height: 180px;
+}
+.uktdropdown input {
+    box-sizing: border-box;
+    width: 110px;
+}
+.uktdropdown-body ul {
+    text-align: left;
+    list-style-type: none;
+    padding-left: 0px;
+    margin: 0px;
+}
+.uktdropdown-body li {
+    padding: 4px 8px;
+    margin: 4px 0;
+    white-space: nowrap;
+}
+
+.uktdropdown-body .heading {
+    color: #aaa;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 700;
+    margin: 0.75rem 0 0.5rem;
+}
+
+.uktdropdown-body .heading:first-child {
+    margin-top: 0.25rem;
+}
+
+.no-trigger-text .uktdropdown-trigger {
+    position: relative;
+    margin-left: 3px;
+    width: 27px;
+    height: 21px;
+    vertical-align: top;
+}
+.no-trigger-text .uktdropdown-trigger:before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 9px;
+    height: 2px;
+    top: 10px;
+    left: 4px;
+    border-radius: 2px 0 0 3px;
+    background-color: #666;
+    transform: rotateZ(38deg);
+}
+.no-trigger-text .uktdropdown-trigger:after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 9px;
+    height: 2px;
+    top: 10px;
+    right: 4px;
+    border-radius: 0 2px 2px 0;
+    background-color: #666;
+    transform: rotateZ(-38deg);
+}
+
+.font-weight {
+    font-size: 13px;
+}
+.font-weight .item-title {
+    color: #ababab;
+}
+.font-weight [data-ukt-active] .item-title {
+    color: #fff;
+}
+
+.searchable-with-label input,
+.searchable-with-label .uktdropdown-body {
+    min-width: 0px;
+    width: 85px;
+}
+
+.dropdown-without-items .uktdropdown-body {
+    width: 300px;
+}
+
+.css-value-input-trigger .uktdropdown-label-text {
+    display: flex;
+    align-self: center;
+}
+
+.textarea-trigger .uktdropdown-body {
+    width: 400px;
+    font-size: 13px;
+}
+
+.checkboxes .uktdropdown-body {
+    width: 150px;
+}
+
+.checkboxes input[type="checkbox"] {
+    width: auto;
+}
+
+.overlapping-dropdown .uktdropdown-body {
+    top: -5px;
+    left: -5px;
+    width: 250px;
+    min-height: 200px;
+}
+
+.out-of-bounds-example.uktdropdown {
+    position: absolute;
+    bottom: 50px;
+}
+.out-of-bounds-example input {
+    width: 150px;
+}
+
+.out-of-bounds-example .uktdropdown-body {
+    width: 250px;
+}
+
+.position-right.uktdropdown {
+    position: absolute;
+    right: 65px;
+}
+
+.out-of-bounds-example.no-direction-change.uktdropdown {
+    position: relative;
+    margin-top: 220px;
+}
+
+.out-of-bounds-example.no-direction-change .uktdropdown-trigger {
+    width: 255px;
+}
+
+.out-of-bounds-example.no-direction-change.uktdropdown .uktdropdown-body {
+    top: 100%;
+}
+
+#anchor--uikit-controls-dropdown--out-of-bounds-with-no-direction-change
+    .innerZoomElementWrapper
+    > * {
+    overflow: auto;
+    height: 200px;
+}
+
+#anchor--uikit-controls-dropdown--out-of-bounds-with-no-direction-change .sb-story {
+    height: 230px;
+}