@acusti/uikit-docs 0.2.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acusti/uikit-docs",
-    "version": "0.2.0",
+    "version": "0.3.1",
     "engines": {
         "node": ">=14"
     },
@@ -9,18 +9,22 @@
         "storybook": "storybook dev -p 6006"
     },
     "devDependencies": {
-        "@storybook/addon-essentials": "^8.6",
-        "@storybook/blocks": "^8.6",
-        "@storybook/manager-api": "^8.6",
-        "@storybook/react": "^8.6",
-        "@storybook/react-vite": "^8.6",
-        "@storybook/test": "^8.6",
-        "@types/react": "^19.1.1",
-        "core-js": "^3.41.0",
+        "@storybook/addon-docs": "^9",
+        "@storybook/react-vite": "^9",
+        "@types/react": "^19.1.6",
+        "core-js": "^3.42.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "storybook": "^8.6",
+        "storybook": "^9",
         "typescript": "5.8.3",
         "vite": "^6"
+    },
+    "dependencies": {
+        "@acusti/css-value-input": "workspace:^",
+        "@acusti/date-picker": "workspace:^",
+        "@acusti/dropdown": "workspace:^",
+        "@acusti/input-text": "workspace:^",
+        "@acusti/use-is-out-of-bounds": "workspace:^",
+        "@acusti/use-keyboard-events": "workspace:^"
     }
 }

package/stories/CSSValueInput.stories.tsx

@@ -5,7 +5,7 @@ import CSSValueInput from '../../css-value-input/src/CSSValueInput.js';
 import './CSSValueInput.css';
 import './InputText.css';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta: Meta<typeof CSSValueInput> = {
     component: CSSValueInput,
@@ -155,7 +155,7 @@ export const NumberValue: Story = {
         cssValueType: 'integer',
         label: 'opacity',
         name: 'opacity',
-        value: 0,
+        value: '0',
     },
 };
 
@@ -166,6 +166,6 @@ export const LineHeight: Story = {
         name: 'line-height',
         step: 0.1,
         unit: '',
-        value: 1.4,
+        value: '1.4',
     },
 };

package/stories/DatePicker.stories.tsx

@@ -1,10 +1,10 @@
-import { DatePicker, getMonthFromDate } from '../../date-picker/src/index.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { DatePicker, getMonthFromDate } from '@acusti/date-picker';
 import * as React from 'react';
 
 import './DatePicker.css';
 
-import type { Meta, StoryObj } from '@storybook/react';
-
 const { useState } = React;
 
 const meta: Meta<typeof DatePicker> = {

package/stories/Dropdown.css

@@ -1,65 +1,106 @@
-.sb-story {
-    min-height: 180px;
-}
-.uktdropdown input {
-    box-sizing: border-box;
-    width: 110px;
+#storybook-root,
+.sb-story > div {
+    display: flex;
+    flex-direction: column;
 }
-.uktdropdown-body ul {
-    text-align: left;
-    list-style-type: none;
-    padding-left: 0px;
-    margin: 0px;
+
+#storybook-root {
+    &:has(.position-right.uktdropdown) {
+        align-items: center;
+        justify-content: center;
+        height: calc(200vh - 110px);
+        width: calc(200vw - 270px);
+    }
 }
-.uktdropdown-body li {
-    padding: 4px 8px;
-    margin: 4px 0;
-    white-space: nowrap;
+
+.sb-story {
+    &:has(.position-right.uktdropdown) {
+        height: 350px;
+        width: 100%;
+        overflow: auto;
+    }
+
+    > div {
+        &:has(.position-right.uktdropdown) {
+            align-items: center;
+            justify-content: center;
+            height: 670px;
+            width: calc(200% - 190px);
+        }
+    }
 }
 
-.uktdropdown-body .heading {
-    color: #aaa;
-    font-size: 12px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-weight: 700;
-    margin: 0.75rem 0 0.5rem;
+.sb-story {
+    min-height: 180px;
 }
 
-.uktdropdown-body .heading:first-child {
-    margin-top: 0.25rem;
+.uktdropdown input {
+    box-sizing: border-box;
+    width: 110px;
 }
 
-.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);
+.uktdropdown-body {
+    ul {
+        text-align: left;
+        list-style-type: none;
+        padding-left: 0px;
+        margin: 0px;
+    }
+
+    li {
+        padding: 4px 8px;
+        margin: 4px 0;
+        white-space: nowrap;
+    }
+
+    .heading {
+        color: #aaa;
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-weight: 700;
+        margin: 0.75rem 0 0.5rem;
+    }
+
+    &:first-child {
+        margin-top: 0.25rem;
+    }
+}
+
+.no-trigger-text {
+    .uktdropdown-trigger {
+        position: relative;
+        margin-left: 3px;
+        width: 27px;
+        height: 21px;
+        vertical-align: top;
+
+        &: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);
+        }
+
+        &: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 {
@@ -72,19 +113,30 @@
     color: #fff;
 }
 
-.searchable-with-label input,
-.searchable-with-label .uktdropdown-body {
-    min-width: 0px;
-    width: 85px;
+.searchable-with-label,
+.searchable-and-allow-create {
+    input,
+    .uktdropdown-body {
+        width: 85px;
+    }
+
+    .uktdropdown-body {
+        left: revert;
+        right: anchor(right);
+    }
 }
 
-.dropdown-without-items .uktdropdown-body {
-    width: 300px;
+.css-value-input-trigger {
+    .uktdropdown-body {
+        width: 110px;
+        left: revert;
+        right: anchor(right);
+        margin-right: 14px;
+    }
 }
 
-.css-value-input-trigger .uktdropdown-label-text {
-    display: flex;
-    align-self: center;
+.dropdown-without-items .uktdropdown-body {
+    width: 300px;
 }
 
 .textarea-trigger .uktdropdown-body {
@@ -101,16 +153,12 @@
 }
 
 .overlapping-dropdown .uktdropdown-body {
-    top: -5px;
-    left: -5px;
+    margin-top: -22px;
+    margin-left: -10px;
     width: 250px;
     min-height: 200px;
 }
 
-.out-of-bounds-example.uktdropdown {
-    position: absolute;
-    bottom: 50px;
-}
 .out-of-bounds-example input {
     width: 150px;
 }
@@ -120,8 +168,8 @@
 }
 
 .position-right.uktdropdown {
-    position: absolute;
-    right: 65px;
+    /* position: absolute;
+    right: 65px; */
 }
 
 .out-of-bounds-example.no-direction-change.uktdropdown {

package/stories/Dropdown.stories.tsx

@@ -1,4 +1,4 @@
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 import * as React from 'react';
 
 import CSSValueInput from '../../css-value-input/src/CSSValueInput.js';
@@ -8,7 +8,7 @@ import './CSSValueInput.css';
 import './Dropdown.css';
 import './InputText.css';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const { Fragment } = React;
 
@@ -425,7 +425,7 @@ export const OutOfBoundsAtRight: Story = {
         className: 'out-of-bounds-example position-right',
         isSearchable: true,
         name: 'outofboundsatright',
-        placeholder: 'Show above & to the left',
+        placeholder: 'Fill available space',
     },
 };
 

package/stories/InputText.css

@@ -1,4 +1,4 @@
-input.input-text {
+.input-text {
     width: 160px;
     padding: 3px 6px;
     font-family: system-ui, sans-serif;
@@ -13,3 +13,14 @@ input.input-text {
         cursor: pointer;
     }
 }
+
+.multi-line-input-text {
+    width: 240px;
+}
+
+[popover] {
+    border: 0;
+    box-shadow: 0px 3px 16px 1px rgba(0, 0, 0, 0.5);
+    padding: 25px 30px;
+    border-radius: 5px;
+}

package/stories/InputText.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
 import * as React from 'react';
 
 import InputText from '../../input-text/src/InputText.js';
@@ -87,7 +87,7 @@ const formatDate = new Intl.DateTimeFormat(undefined, {
 export const MultiLineInputWithSubmitOnEnter: Story = {
     args: SUBMIT_ON_ENTER_PROPS,
     render() {
-        const [lastSubmitDate, setLastSubmitDate] = React.useState(null);
+        const [lastSubmitDate, setLastSubmitDate] = React.useState<Date | null>(null);
         const lastSubmit = lastSubmitDate ? formatDate(lastSubmitDate) : 'never';
 
         return (
@@ -127,11 +127,34 @@ export const InputWithAutoFocus: Story = {
     },
 };
 
+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: 'autofocus-multi-line-input',
+    name: 'multi-line-input-with-autofocus-in-popover',
     selectTextOnFocus: true,
 };
 
@@ -140,10 +163,10 @@ export const MultiLineInputWithAutoFocusInPopover: Story = {
     render() {
         return (
             <>
-                <button popoverTarget="multi-line-input-with-autofocus-in-popover">
+                <button popoverTarget="multi-line-input-with-autofocus-popover">
                     Open Popover
                 </button>
-                <div id="multi-line-input-with-autofocus-in-popover" popover="auto">
+                <div id="multi-line-input-with-autofocus-popover" popover="auto">
                     <InputText {...MULTI_LINE_INPUT_WITH_AUTO_FOCUS_PROPS} />
                 </div>
             </>

package/stories/Introduction.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import Github from './assets/github.svg';
 import Discord from './assets/discord.svg';

package/stories/MonthCalendar.stories.ts

@@ -2,7 +2,7 @@ import { getMonthFromDate, MonthCalendar } from '../../date-picker/src/index.js'
 
 import './MonthCalendar.css';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta: Meta<typeof MonthCalendar> = {
     argTypes: {

package/stories/useIsOutOfBounds.css

@@ -12,5 +12,5 @@
 
 .position-right.uktdropdown {
     position: absolute;
-    right: 70px;
+    right: 65px;
 }

package/stories/useIsOutOfBounds.stories.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 
 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';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
-const meta: Meta<typeof Dropdown> = {
+const meta: Meta<typeof useIsOutOfBounds> = {
     argTypes: {
         element: {
             description:
@@ -25,7 +26,8 @@ const meta: Meta<typeof Dropdown> = {
                 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;
@@ -35,8 +37,9 @@ type OutOfBounds = {
     right: boolean;
     top: boolean;
 };
-\`
-It is used by in @acusti/dropdown to automatically position the dropdown in the direction
+\`\`\`
+
+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.`,
             },
         },

package/stories/useKeyboardEvents.stories.tsx

@@ -4,7 +4,7 @@ import useKeyboardEvents from '../../use-keyboard-events/src/useKeyboardEvents.j
 
 import './useKeyboardEvents.css';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const { Fragment, useState } = React;
 

package/tsconfig.json

@@ -1,3 +1,15 @@
 {
-    "extends": "../../tsconfig.json"
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "noEmit": true
+    },
+    "references": [
+        { "path": "../css-value-input" },
+        { "path": "../date-picker" },
+        { "path": "../dropdown" },
+        { "path": "../input-text" },
+        { "path": "../styling" },
+        { "path": "../use-is-out-of-bounds" },
+        { "path": "../use-keyboard-events" }
+    ]
 }