@bloom-housing/ui-components 12.7.7 → 13.0.1

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "12.7.7",
+  "version": "13.0.1",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/ui-components",
   "main": "index.js",
   "license": "Apache-2.0",
   "private": false,
+  "packageManager": "yarn@1.22.22",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
@@ -29,62 +30,60 @@
     "index.ts"
   ],
   "scripts": {
-    "build-storybook": "build-storybook -c .storybook -s ./public",
-    "start": "start-storybook -s ./public -p 40791",
+    "build-storybook": "storybook build -c .storybook ./public",
+    "start": "storybook dev ./public -p 40791",
     "build": "tsc",
     "test": "jest -w 1",
     "test:coverage": "jest -w 1 --coverage --watchAll=false",
     "prettier": "prettier --write \"**/*.tsx\"",
-    "test:a11y": "build-storybook -o ./storybook-static && jest storyshot --testRegex=storyshots.spec.ts"
+    "test:a11y": "storybook build -o ./storybook-static && jest storyshot --testRegex=storyshots.spec.ts"
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
     "@babel/preset-env": "^7.15.4",
+    "@chromatic-com/storybook": "^3",
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
-    "@geometricpanda/storybook-addon-badges": "^1.1.1",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-storyshots": "^6.3.8",
-    "@storybook/addon-storyshots-puppeteer": "^6.3.8",
-    "@storybook/addons": "^6.5.8",
-    "@storybook/api": "^6.5.8",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/components": "^6.5.8",
-    "@storybook/core-events": "^6.5.8",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/node-logger": "^6.5.16",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "^6.5.8",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "14.0.0",
+    "@geometricpanda/storybook-addon-badges": "^2.0.5",
+    "@storybook/addon-a11y": "8.6.14",
+    "@storybook/addon-actions": "8.6.14",
+    "@storybook/addon-essentials": "8.6.14",
+    "@storybook/addon-interactions": "8.6.14",
+    "@storybook/addon-links": "8.6.14",
+    "@storybook/addon-mdx-gfm": "8.6.14",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/components": "8.6.14",
+    "@storybook/core-events": "8.6.14",
+    "@storybook/node-logger": "8.6.14",
+    "@storybook/react": "8.6.14",
+    "@storybook/react-webpack5": "8.6.14",
+    "@storybook/test": "8.6.14",
+    "@storybook/theming": "8.6.14",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/react": "^16.3.0",
     "@types/dompurify": "^2.3.3",
-    "@types/jest": "^26.0.14",
+    "@types/jest": "^30.0.0",
     "@types/jwt-decode": "^2.2.1",
     "@types/mdx": "^2.0.1",
     "@types/node": "18.14.6",
     "@types/node-polyglot": "^2.4.1",
     "@types/pretty": "2.0.1",
-    "@types/react": "^18.0.32",
+    "@types/react": "^19.2.0",
     "@types/react-beautiful-dnd": "^13.1.1",
-    "@types/react-dom": "^18.0.11",
+    "@types/react-dom": "^19.2.0",
     "@types/react-map-gl": "^5.2.10",
     "@types/react-tabs": "^2.3.2",
     "@types/react-test-renderer": "^18.0.0",
     "@types/react-text-mask": "^5.4.14",
-    "@types/react-transition-group": "^4.4.0",
+    "@types/react-transition-group": "^4.4.12",
     "@types/webpack": "5.28.0",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "@typescript-eslint/parser": "^5.12.1",
     "autoprefixer": "^10.3.4",
     "babel-loader": "^8.2.2",
     "babel-plugin-require-context-hook": "^1.0.0",
+    "css-loader": "^7.1.2",
     "dotenv": "^8.2.0",
     "eslint": "^7.11.0",
     "eslint-config-prettier": "^6.11.0",
@@ -115,6 +114,7 @@
     "sass": "1.52.1",
     "sass-loader": "^10.0.3",
     "semantic-release": "19.0.5",
+    "storybook": "8.6.14",
     "style-loader": "^1.1.3",
     "ts-jest": "^26.4.1",
     "ts-loader": "^8.0.4",
@@ -135,17 +135,17 @@
     "markdown-to-jsx": "7.1.8",
     "nanoid": "^3.1.12",
     "node-polyglot": "^2.4.0",
-    "react": "18.2.0",
+    "react": "^19.1.1",
     "react-accessible-accordion": "5.0.0",
     "react-beautiful-dnd": "^13.1.1",
-    "react-dom": "18.2.0",
+    "react-dom": "^19.1.1",
     "react-dropzone": "^11.3.2",
     "react-focus-lock": "^2.9.4",
     "react-hook-form": "^6.15.5",
     "react-map-gl": "^6.1.16",
     "react-media": "^1.10.0",
     "react-remove-scroll": "2.5.4",
-    "react-tabs": "^3.2.2",
+    "react-tabs": "^6.0.0",
     "react-text-mask": "^5.5.0",
     "react-transition-group": "^4.4.1",
     "tailwindcss": "2.2.10",

package/src/actions/Button.docs.mdx

@@ -1,6 +1,9 @@
-import { Canvas, Story, Source, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { Swatch } from "../prototypes/Swatch"
 import { Button } from "./Button"
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
 
 # Button
 
@@ -14,15 +17,13 @@ The button component offers flexible usage with a variety of different appearanc
 
 There are several props which accept enums to adjust style type, border, and size. For example, to choose the "primary" style and a "small" size, you would pass the `AppearanceStyleType.primary` enum to `styleType` prop and `AppearanceSizeType.small` enum to `size` prop.
 
-<Canvas>
-  <Story id="actions-button--small-and-primary" />
-</Canvas>
+<Canvas of={ButtonStories.SmallAndPrimary} />
 
 Other variants include appearances which aren't button-like such as `unstyled` and `inline`.
 
 ## Component Properties
 
-<ArgsTable of={Button} />
+<ArgTypes of={Button} />
 
 ## Theming Variables
 

package/src/actions/Button.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { withKnobs, text, select } from "@storybook/addon-knobs"
+import { useArgs } from "@storybook/preview-api"
 import { BADGES } from "../../.storybook/constants"
 import { Button } from "../actions/Button"
 import {
@@ -7,18 +7,37 @@ import {
   AppearanceSizeType,
   AppearanceStyleType,
 } from "../global/AppearanceTypes"
-import ButtonDocumentation from "./Button.docs.mdx"
 import { faArrowsRotate, faCoffee, faTable } from "@fortawesome/free-solid-svg-icons"
 
 export default {
   title: "Actions/Button 🚩",
-  id: "actions-button",
-  decorators: [(storyFn: any) => <div>{storyFn()}</div>, withKnobs],
+  decorators: [(storyFn: any) => <div>{storyFn()}</div>],
   parameters: {
-    docs: {
-      page: ButtonDocumentation,
-    },
     badges: [BADGES.GEN2],
+    controls: {
+      disable: true,
+    },
+  },
+  argTypes: {
+    label: {
+      control: "text",
+    },
+    styleType: {
+      options: AppearanceStyleType,
+      control: "select",
+    },
+    border: {
+      options: AppearanceBorderType,
+      control: "select",
+    },
+    icon: {
+      options: { arrowBack: "arrowBack", arrowForward: "arrowForward", coffee: faCoffee, rotate: faArrowsRotate, table: faTable },
+      control: "select",
+    },
+    iconPlacement: {
+      options: { left: "left", right: "right" },
+      control: "select",
+    },
   },
 }
 
@@ -26,63 +45,55 @@ const handleClick = (e: React.MouseEvent) => {
   alert(`You clicked me! Event: ${e.type}`)
 }
 
-const StyleTypeStory = { ...AppearanceStyleType, default: undefined }
-const BorderTypeStory = { ...AppearanceBorderType, default: undefined }
-
-export const standard = () => {
-  const styleSelect = select("Appearance Style", StyleTypeStory, undefined)
-  const borderSelect = select("Appearance Border", BorderTypeStory, undefined)
-  const iconSelect = select(
-    "Icon",
-    { arrowBack: "arrowBack", arrowForward: "arrowForward", default: undefined },
-    undefined
-  )
-  const iconPlacementSelect = select(
-    "Icon Placement",
-    { left: "left", right: "right", default: undefined },
-    undefined
-  )
-
-  return (
-    <>
-      <Button
-        styleType={styleSelect}
-        border={borderSelect}
-        icon={iconSelect}
-        iconPlacement={iconPlacementSelect}
-        onClick={handleClick}
-      >
-        {text("Label", "Hello Storybook")}
-      </Button>
-
-      <p className="mt-10">Try out different styles with the Knobs below.</p>
-    </>
-  )
+export const standard = {
+  parameters: {
+    controls: {
+      disable: false,
+    },
+  },
+  args: {
+    label: "Hello Storybook",
+  },
+  render: (args: Record<string, any>) => {
+    return (
+      <>
+        <Button
+          styleType={args.styleType}
+          border={args.border}
+          icon={args.icon}
+          iconPlacement={args.iconPlacement}
+          onClick={handleClick}
+        >
+          {args.label}
+        </Button>
+
+        <p className="mt-10">Try out different styles with the controls below.</p>
+      </>
+    )
+  },
 }
 
-export const withFontAwesomeIcon = () => {
-  const iconSelect = select("Icon", ["coffee", "rotate", "table"], "rotate")
-
-  const iconsMap = {
-    coffee: faCoffee,
-    rotate: faArrowsRotate,
-    table: faTable,
-  }
-
-  return (
-    <>
-      <Button
-        icon={iconSelect ? iconsMap[iconSelect] : undefined}
-        iconSize="medium"
-        iconPlacement="left"
-        onClick={handleClick}
-      >
-        FontAwesome is awesome
-      </Button>
-
-      <p className="mt-10">Try out different icons with the Knobs below.</p>
-    </>
-  )
+export const withFontAwesomeIcon = {
+  parameters: {
+    controls: {
+      disable: false,
+      include: ["icon"]
+    },
+  },
+  args: {
+    icon: faArrowsRotate,
+  },
+  render: (args: Record<string, any>) => {
+    return (
+      <>
+        <Button icon={args.icon} iconSize="medium" iconPlacement="left" onClick={handleClick}>
+          FontAwesome is awesome
+        </Button>
+
+        <p className="mt-10">Try out different icons with the controls below.</p>
+      </>
+    )
+  },
 }
 
 export const small = () => (

package/src/actions/ButtonGroup.docs.mdx

@@ -1,21 +1,23 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta, Story } from "@storybook/blocks"
 import { Swatch } from "../prototypes/Swatch"
 import { ButtonGroup } from "./ButtonGroup"
+import * as ButtonGroupStories from './ButtonGroup.stories';
+
+<Meta of={ButtonGroupStories} />
 
 # ButtonGroup
 
 The button group component lets you place multiple buttons along a horizontal or vertical (mobile primarily) axis and group/space buttons according to some simple flex rules.
 
-<Canvas>
-  <Story id="actions-button-group--two-columns" />
-</Canvas>
+<Canvas of={ButtonGroupStories.twoColumns} />
 
 <br />
+
 <br />
 
 ## Component Properties
 
-<ArgsTable of={ButtonGroup} />
+<ArgTypes of={ButtonGroup} />
 
 ## Theming Variables
 

package/src/actions/ButtonGroup.stories.tsx

@@ -2,7 +2,6 @@ import * as React from "react"
 import { BADGES } from "../../.storybook/constants"
 import { AppearanceStyleType } from "../.."
 import Button from "./Button"
-import ButtonGroupDocumentation from "./ButtonGroup.docs.mdx"
 
 import { ButtonGroup, ButtonGroupSpacing } from "./ButtonGroup"
 
@@ -10,9 +9,6 @@ export default {
   title: "Actions/Button Group 🚩",
   id: "actions-button-group",
   parameters: {
-    docs: {
-      page: ButtonGroupDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/actions/ButtonGroup.tsx

@@ -8,7 +8,7 @@ export enum ButtonGroupSpacing {
 
 export interface ButtonGroupProps {
   /** Pass either Button components in, or fragments which can contain one or more buttons */
-  columns: React.ReactNodeArray
+  columns: React.ReactNode[]
   /** Between spacing pushes the columns far apart, even spacing keeps them closer together */
   spacing?: ButtonGroupSpacing
   /** When true, buttons will collapse to a single column on small screens and go full-width */

package/src/blocks/Card.docs.mdx

@@ -1,12 +1,13 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { Swatch } from "../prototypes/Swatch"
 import { Card } from "./Card"
+import * as CardStories from './Card.stories';
+
+<Meta of={CardStories} />
 
 # Card
 
-<Canvas>
-  <Story id="blocks-card--text-content" />
-</Canvas>
+<Canvas of={CardStories.TextContent} />
 
 The 2nd-generation Card component is intended to serve as a flexible content container with a header, optional content sections, and a footer. Over time our intention is to "port" some other card types and content blocks in the system to use Card as their underlying structure.
 
@@ -20,25 +21,23 @@ The `<Card.Header>` subcomponent will typically be paired with a child `<Heading
 
 You can browse through the various stories for different examples of how you'd pattern a card with various subcomponents. Many of the visual aspects of a Card can be customized using the CSS variables listed below. For example, this "Detroit style" example:
 
-<Canvas>
-  <Story id="blocks-card--detroit-style" />
-</Canvas>
+<Canvas of={CardStories.DetroitStyle} />
 
 ## Card Properties
 
-<ArgsTable of={Card} />
+<ArgTypes of={Card} />
 
 ## Card.Header Properties
 
-<ArgsTable of={Card.Header} />
+<ArgTypes of={Card.Header} />
 
 ## Card.Section Properties
 
-<ArgsTable of={Card.Section} />
+<ArgTypes of={Card.Section} />
 
 ## Card.Footer Properties
 
-<ArgsTable of={Card.Footer} />
+<ArgTypes of={Card.Footer} />
 
 ## Theming Variables
 

package/src/blocks/Card.stories.tsx

@@ -3,15 +3,11 @@ import { BADGES } from "../../.storybook/constants"
 import { AppearanceStyleType, Button, ButtonGroup, ButtonGroupSpacing, LinkButton } from "../.."
 import { HeadingGroup } from "../headers/HeadingGroup"
 import Card from "./Card"
-import CardDocumentation from "./Card.docs.mdx"
 
 export default {
   title: "Blocks/Card 🚩",
   id: "blocks/card",
   parameters: {
-    docs: {
-      page: CardDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/blocks/ImageCard.docs.mdx

@@ -1,21 +1,23 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { Swatch } from "../prototypes/Swatch"
 import { ImageCard, ImageItem } from "./ImageCard"
+import * as ImageCardStories from './ImageCard.stories';
+
+<Meta of={ImageCardStories} />
 
 # Image Card
 
-The image card component renders an image with optional tags at top and status bars below it. You can optionally pass multiple images in which will faciliate a popup gallery modal automatically.
+The image card component renders an image with optional tags at top and status bars below it. You can optionally pass multiple images in which will facilitate a popup gallery modal automatically.
 
-<Canvas>
-  <Story id="blocks-image-card--with-one-status-and-tag" />
-</Canvas>
+<Canvas of={ImageCardStories.withOneStatusAndTag} />
 
 <br />
+
 <br />
 
 ## Component Properties
 
-<ArgsTable of={ImageCard} />
+<ArgTypes of={ImageCard} />
 
 ## Theming Variables
 

package/src/blocks/ImageCard.stories.tsx

@@ -4,16 +4,12 @@ import { ImageCard } from "./ImageCard"
 import { t } from "../helpers/translator"
 import { ApplicationStatusType } from "../global/ApplicationStatusType"
 import { IconFillColors, UniversalIconType } from "../icons/Icon"
-import ImageCardDocumentation from "./ImageCard.docs.mdx"
 
 export default {
   title: "Blocks/Image Card 🚩",
   id: "blocks/image-card",
   decorators: [(storyFn: any) => <div style={{ maxWidth: "700px" }}>{storyFn()}</div>],
   parameters: {
-    docs: {
-      page: ImageCardDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/blocks/ImageCard.tsx

@@ -134,7 +134,9 @@ const ImageCard = (props: ImageCardProps) => {
                 props.strings?.defaultImageAltText ??
                 t("listings.buildingImageAltText")
               }
-              ref={(el) => (imgRefs.current[0] = el)}
+              ref={(el) => {
+                imgRefs.current[0] = el
+              }}
               onError={onError}
             />
           ) : props.images && displayedImages ? (
@@ -143,7 +145,9 @@ const ImageCard = (props: ImageCardProps) => {
                 key={index}
                 src={image.thumbnailUrl || image.mobileUrl || image.url}
                 alt={getAltText(index, displayedImages, image.description)}
-                ref={(el) => (imgRefs.current[index] = el)}
+                ref={(el) => {
+                  imgRefs.current[index] = el
+                }}
                 onError={onError}
               />
             ))

package/src/blocks/InfoCard.docs.mdx

@@ -1,21 +1,23 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { Swatch } from "../prototypes/Swatch"
 import { InfoCard } from "./InfoCard"
+import * as InfoCardStories from './InfoCard.stories';
+
+<Meta of={InfoCardStories} />
 
 # Info Card
 
 The Info Card component renders a box with a title, which can optionally be a hyperlink. Beneath the title is an optional subtitle. Beneath the subtitle can be a string, a component, or markdown.
 
-<Canvas>
-  <Story id="blocks-info-card" />
-</Canvas>
+<Canvas of={InfoCardStories.Default} />
 
 <br />
+
 <br />
 
 ## Component Properties
 
-<ArgsTable of={InfoCard} />
+<ArgTypes of={InfoCard} />
 
 ## Theming Variables
 
@@ -26,7 +28,7 @@ You can apply CSS variables to the `.info-card` selector to customize the appear
 | `--padding`                 | Size                                                | Padding around card                                                    | `--bloom-s6`                                              |
 | `--margin-bottom`           | Size                                                | Margin beneath card                                                    | `--bloom-s4`                                              |
 | `--border-color`            | <Swatch colorVar="--bloom-color-gray-450" />        | Color of border around card                                            | `--bloom-color-gray-450`                                  |
-| `--background-color`        | <Swatch colorVar="--bloom-color-primary-lighter"/>  | Background color of card                                               | `--bloom-color-primary-lighter`                           |
+| `--background-color`        | <Swatch colorVar="--bloom-color-primary-lighter" />  | Background color of card                                               | `--bloom-color-primary-lighter`                           |
 | `--title-color`             | <Swatch colorVar="--bloom-color-gray-800" />        | Color of title text                                                    | `--bloom-color-gray-800`                                  |
 | `--title-font-size`         | Size                                                | Size of title text                                                     | `--bloom-font-size-base`                                  |
 | `--title-font-family`       | Font                                                | Font family of title text                                              | `--bloom-font-sans`                                       |

package/src/blocks/InfoCard.stories.tsx

@@ -2,16 +2,12 @@ import React from "react"
 import { BADGES } from "../../.storybook/constants"
 import { InfoCard } from "../blocks/InfoCard"
 import { ExpandableText } from "../actions/ExpandableText"
-import InfoCardDocumentation from "./InfoCard.docs.mdx"
 
 export default {
   title: "blocks/Info Card  🚩",
   decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
   id: "blocks/info-card",
   parameters: {
-    docs: {
-      page: InfoCardDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/blocks/MediaCard.docs.mdx

@@ -1,23 +1,22 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { MediaCard } from "./MediaCard"
+import * as MediaCardStories from './MediaCard.stories';
+
+<Meta of={MediaCardStories} />
 
 # Media Card
 
 The media card component is used to describe the title and, optionally, subtitle of a corresponding piece of media. The header section and title of the media card is clickable and displays the media via the required handleClick prop.
 
-<Canvas>
-  <Story id="blocks-media-card--with-title-and-subtitle" />
-</Canvas>
-<Canvas>
-  <Story id="blocks-media-card--with-just-title" />
-</Canvas>
-<Canvas>
-  <Story id="blocks-media-card--with-custom-icon" />
-</Canvas>
+<Canvas of={MediaCardStories.withTitleAndSubtitle} />
+
+<Canvas of={MediaCardStories.withJustTitle} />
+
+<Canvas of={MediaCardStories.withCustomIcon} />
 
 ## Component Properties
 
-<ArgsTable of={MediaCard} />
+<ArgTypes of={MediaCard} />
 
 ## Theming Variables
 

package/src/blocks/MediaCard.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from "react"
 import { MediaCard } from "./MediaCard"
 import { faCirclePlay } from "@fortawesome/free-solid-svg-icons"
-import MediaCardDocumentation from "./MediaCard.docs.mdx"
 import { BADGES } from "../../.storybook/constants"
 
 export default {
@@ -9,9 +8,6 @@ export default {
   id: "blocks/media-card",
   decorators: [(storyFn: any) => <div style={{ maxWidth: "313px" }}>{storyFn()}</div>],
   parameters: {
-    docs: {
-      page: MediaCardDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }