📖 Create useIsOutOfBounds stories

acusti · Nov 19, 2023 · e2fb17c · e2fb17c
1 parent 8c04c68
commit e2fb17c
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 24 deletions.
diff --git a/packages/docs/stories/Dropdown.css b/packages/docs/stories/Dropdown.css
@@ -121,7 +121,7 @@
 
 .position-right.uktdropdown {
     position: absolute;
-    right: 70px;
+    right: 65px;
 }
 
 .out-of-bounds-example.no-direction-change.uktdropdown {

diff --git a/packages/docs/stories/Dropdown.stories.tsx b/packages/docs/stories/Dropdown.stories.tsx
@@ -397,29 +397,6 @@ export const OverlappingDropdown: Story = {
     },
 };
 
-export const OutOfBoundsAtBottom: 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',
-        isSearchable: true,
-        name: 'outofboundsatbottom',
-        placeholder: 'Show above',
-    },
-};
-
 export const OutOfBoundsAtRight: Story = {
     args: {
         children: (

diff --git a/packages/docs/stories/useIsOutOfBounds.css b/packages/docs/stories/useIsOutOfBounds.css
@@ -0,0 +1,16 @@
+.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: 70px;
+}
diff --git a/packages/docs/stories/useIsOutOfBounds.stories.tsx b/packages/docs/stories/useIsOutOfBounds.stories.tsx
@@ -0,0 +1,164 @@
+import * as React from 'react';
+
+import Dropdown from '../../dropdown/src/Dropdown.js';
+
+import './Dropdown.css';
+import './useIsOutOfBounds.css';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Dropdown> = {
+    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.
+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 by 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',
+    },
+};