Update storybook to v8

.gitignore

@@ -14,3 +14,7 @@ coverage
 .storybook/static/storybook
 .storybook/static/.sass-cache
 .storybook/styles/.sass-cache
+
+.idea
+.yarn/
+.yarnrc.yml

.storybook/main.js

@@ -1,12 +1,28 @@
-module.exports = {
-  core: {
-    builder: 'webpack5',
+import { dirname, join } from "path";
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+
+const config = {
+  framework: {
+    name: getAbsolutePath("@storybook/react-webpack5"),
+    options: {},
   },
   stories: ['../**/*.story.js'],
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-a11y',
     '@storybook/addon-storysource',
-    '@storybook/addon-viewport'
+    '@storybook/addon-viewport',
+    '@storybook/addon-docs',
+    '@storybook/blocks',
+    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
   ],
-}
+  docs: {
+    defaultName: 'Documentation'
+  }
+};
+export default config;
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}

.storybook/preview.js

@@ -1 +1,26 @@
 import '../.storybook/styles/application.scss'
+import React from 'react'
+import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/addon-docs/blocks'
+
+const preview = {
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      story: {
+        height: '300px',
+      },
+      page: () => (
+        <>
+          <Title/>
+          <Subtitle/>
+          <Description/>
+          <Primary/>
+          <Controls/>
+          <Stories/>
+        </>
+      ),
+    }
+  }
+}
+
+export default preview;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "10.1.0",
+  "version": "10.1.1",
   "engines": {
     "node": "^18.12 || ^20.0"
   },
@@ -27,10 +27,10 @@
     "format": "prettier --write \"(src|test|stories|.storybook)/**/*.+(js|jsx|json|scss)\"",
     "lint": "eslint src --max-warnings=0",
     "prepare": "husky install && yarn run clean && yarn run build",
-    "storybook": "yarn && start-storybook -p 6006",
     "test": "jest --coverage",
     "size": "yarn build && size-limit",
-    "storybook:build": "build-storybook -o .storybook/static/storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o .storybook/static/storybook",
     "heroku-postbuild": "yarn run storybook:build"
   },
   "files": [
@@ -56,19 +56,24 @@
   "devDependencies": {
     "@babel/cli": "^7.17.6",
     "@babel/core": "^7.17.9",
+    "@chromatic-com/storybook": "^1",
     "@launchpadlab/babel-preset": "^2.1.1",
     "@launchpadlab/eslint-config": "^3.0.1",
     "@launchpadlab/prettier-config": "^1.0.0",
     "@size-limit/preset-small-lib": "^8.2.6",
-    "@storybook/addon-a11y": "^6.4.22",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/addon-storysource": "^6.4.22",
-    "@storybook/addon-viewport": "^6.4.22",
-    "@storybook/addons": "^6.4.22",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.14",
-    "@storybook/react": "^6.4.22",
+    "@storybook/addon-a11y": "^8.2.0-alpha.6",
+    "@storybook/addon-actions": "^8.2.0-alpha.6",
+    "@storybook/addon-docs": "^8.1.6",
+    "@storybook/addon-links": "^8.2.0-alpha.6",
+    "@storybook/addon-storysource": "^8.2.0-alpha.6",
+    "@storybook/addon-viewport": "^8.2.0-alpha.6",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.3",
+    "@storybook/blocks": "^8.1.6",
+    "@storybook/cli": "^8.2.0-alpha.6",
+    "@storybook/global": "^5.0.0",
+    "@storybook/manager-api": "^8.2.0-alpha.6",
+    "@storybook/react-webpack5": "^8.2.0-alpha.6",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
@@ -85,13 +90,14 @@
     "jest-environment-jsdom": "^29.6.2",
     "lint-staged": "^14.0.1",
     "prettier": "^3.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "redux": "^4.1.2",
     "regenerator-runtime": "^0.14.0",
     "sass": "^1.56.1",
     "sass-loader": "^13.2.0",
     "size-limit": "^8.2.6",
+    "storybook": "^8.2.0-alpha.6",
     "style-loader": "^3.3.1",
     "webpack": "^5.75.0"
   },

src/controls/index.js

@@ -1,3 +1,5 @@
-export ColorPicker from './color-picker'
-export Paginator from './paginator'
-export TabBar from './tab-bar'
+import ColorPicker from './color-picker'
+import Paginator from './paginator'
+import TabBar from './tab-bar'
+
+export { ColorPicker, Paginator, TabBar }

src/forms/buttons/index.js

@@ -1,3 +1,5 @@
-export Button from './button'
-export ButtonArea from './button-area'
-export SubmitButton from './submit-button'
+import Button from './button'
+import ButtonArea from './button-area'
+import SubmitButton from './submit-button'
+
+export { Button, ButtonArea, SubmitButton }

src/forms/helpers/index.js

@@ -1,12 +1,27 @@
-export blurDirty from './blur-dirty'
-export castFormValueToArray from './cast-form-value-to-array'
-export convertNameToLabel from './convert-name-to-label'
-export DropdownSelect from './dropdown-select'
-export fromHex from './from-hex'
-export * from './field-prop-types'
-export isImageType from './is-image-type'
-export omitLabelProps from './omit-label-props'
-export replaceEmptyStringValue from './replace-empty-string-value'
-export toHex from './to-hex'
-export hasInputError from './has-input-error'
-export readFilesAsDataUrls from './read-files-as-data-urls'
+import blurDirty from './blur-dirty'
+import castFormValueToArray from './cast-form-value-to-array'
+import convertNameToLabel from './convert-name-to-label'
+import DropdownSelect from './dropdown-select'
+import fromHex from './from-hex'
+import * as fieldPropTypes from './field-prop-types'
+import isImageType from './is-image-type'
+import omitLabelProps from './omit-label-props'
+import replaceEmptyStringValue from './replace-empty-string-value'
+import toHex from './to-hex'
+import hasInputError from './has-input-error'
+import readFilesAsDataUrls from './read-files-as-data-urls'
+
+export {
+  blurDirty,
+  castFormValueToArray,
+  convertNameToLabel,
+  DropdownSelect,
+  fromHex,
+  fieldPropTypes,
+  isImageType,
+  omitLabelProps,
+  replaceEmptyStringValue,
+  toHex,
+  hasInputError,
+  readFilesAsDataUrls,
+}

src/forms/inputs/checkbox-group.js

@@ -1,9 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Checkbox from './checkbox'
+
 import {
   checkboxGroupPropTypes,
   fieldOptionsType,
+} from '../helpers/field-prop-types'
+import {
   omitLabelProps,
   replaceEmptyStringValue,
   DropdownSelect,

src/forms/inputs/checkbox.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+
+import { fieldPropTypesWithValue } from '../helpers/field-prop-types'
 import {
   blurDirty,
   hasInputError,
-  fieldPropTypesWithValue,
   omitLabelProps,
   replaceEmptyStringValue,
 } from '../helpers'

src/forms/inputs/cloudinary-file-input/cloudinary-file-input.js

@@ -2,7 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import DefaultFileInput from '../file-input'
 import cloudinaryUploader from './cloudinary-uploader'
-import { fileInputPropTypes, readFilesAsDataUrls } from '../../helpers'
+import { fileInputPropTypes } from '../../helpers/field-prop-types'
+import { readFilesAsDataUrls } from '../../helpers'
 import { compose, first, noop, set } from '../../../utils'
 import classnames from 'classnames'
 

src/forms/inputs/date-input.js

@@ -1,7 +1,8 @@
 import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
 import DatePicker from 'react-datepicker'
-import { blurDirty, fieldPropTypesWithValue, omitLabelProps } from '../helpers'
+import { fieldPropTypesWithValue } from '../helpers/field-prop-types'
+import { blurDirty, omitLabelProps } from '../helpers'
 import { LabeledField } from '../labels'
 import { compose } from '../../utils'
 import { parseISO } from 'date-fns'

src/forms/inputs/file-input/file-input.js

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react'
 import PropTypes from 'prop-types'
+import { fileInputPropTypes } from '../../helpers/field-prop-types'
 import {
   castFormValueToArray,
-  fileInputPropTypes,
   hasInputError,
   isImageType,
   omitLabelProps,

src/forms/inputs/index.js

@@ -1,15 +1,33 @@
-export Checkbox from './checkbox'
-export CheckboxGroup from './checkbox-group'
-export CloudinaryFileInput from './cloudinary-file-input'
-export ColorInput from './color-input'
-export DateInput from './date-input'
-export FileInput from './file-input'
-export HiddenInput from './hidden-input'
-export Input from './input'
-export IconInput from './icon-input'
-export MaskedInput from './masked-input'
-export RangeInput from './range-input'
-export RadioGroup from './radio-group'
-export Select from './select'
-export Switch from './switch'
-export Textarea from './textarea'
+import Checkbox from './checkbox'
+import CheckboxGroup from './checkbox-group'
+import CloudinaryFileInput from './cloudinary-file-input'
+import ColorInput from './color-input'
+import DateInput from './date-input'
+import FileInput from './file-input'
+import HiddenInput from './hidden-input'
+import Input from './input'
+import IconInput from './icon-input'
+import MaskedInput from './masked-input'
+import RangeInput from './range-input'
+import RadioGroup from './radio-group'
+import Select from './select'
+import Switch from './switch'
+import Textarea from './textarea'
+
+export {
+  Checkbox,
+  CheckboxGroup,
+  CloudinaryFileInput,
+  ColorInput,
+  DateInput,
+  FileInput,
+  HiddenInput,
+  Input,
+  IconInput,
+  MaskedInput,
+  RangeInput,
+  RadioGroup,
+  Select,
+  Switch,
+  Textarea,
+}

src/forms/inputs/radio-group.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 import {
   radioGroupPropTypes,
   fieldOptionsType,
-  omitLabelProps,
-} from '../helpers'
+} from '../helpers/field-prop-types'
+import { omitLabelProps } from '../helpers'
 import { LabeledField, FieldsetLegend } from '../labels'
 import { serializeOptions, filterInvalidDOMProps } from '../../utils'
 

src/forms/inputs/select.js

@@ -2,10 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {
-  blurDirty,
-  fieldPropTypes,
   fieldOptionGroupsType,
   fieldOptionsType,
+} from '../helpers/field-prop-types'
+import {
+  blurDirty,
+  fieldPropTypes,
   hasInputError,
   omitLabelProps,
 } from '../helpers'

src/forms/inputs/switch.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { default as BaseSwitch } from 'react-switch'
+import { fieldPropTypesWithValue } from '../helpers/field-prop-types'
 import {
   blurDirty,
   hasInputError,
-  fieldPropTypesWithValue,
   omitLabelProps,
   replaceEmptyStringValue,
 } from '../helpers'

src/forms/labels/index.js

@@ -1,5 +1,7 @@
-export ErrorLabel from './error-label'
-export InputError from './input-error'
-export InputLabel from './input-label'
-export LabeledField from './labeled-field'
-export FieldsetLegend from './fieldset-legend'
+import ErrorLabel from './error-label'
+import InputError from './input-error'
+import InputLabel from './input-label'
+import LabeledField from './labeled-field'
+import FieldsetLegend from './fieldset-legend'
+
+export { ErrorLabel, InputError, InputLabel, LabeledField, FieldsetLegend }

src/index.js

@@ -3,4 +3,5 @@ export * from './forms'
 export * from './tables'
 export * from './indicators'
 export * from './utils/local'
-export Modal from './modal'
+import Modal from './modal'
+export { Modal }

src/indicators/index.js

@@ -1,4 +1,6 @@
-export FlashMessage from './flash-message'
-export FlashMessageContainer from './flash-message-container'
-export Spinner from './spinner'
-export LoadingContainer from './loading-container'
+import FlashMessage from './flash-message'
+import FlashMessageContainer from './flash-message-container'
+import Spinner from './spinner'
+import LoadingContainer from './loading-container'
+
+export { FlashMessage, FlashMessageContainer, Spinner, LoadingContainer }

src/tables/components/index.js

@@ -1,2 +1,4 @@
-export TableHeader from './table-header'
-export TableRow from './table-row'
+import TableHeader from './table-header'
+import TableRow from './table-row'
+
+export { TableHeader, TableRow }

src/tables/helpers/index.js

@@ -1,2 +1,4 @@
-export { columnPropTypes, Types } from './column-prop-types'
-export getColumnData from './get-column-data'
+import { columnPropTypes, Types } from './column-prop-types'
+import getColumnData from './get-column-data'
+
+export { columnPropTypes, Types, getColumnData }

src/tables/index.js

@@ -1,3 +1,5 @@
-export Table from './table'
-export SortableTable from './sortable-table'
-export TableColumn from './table-column'
+import Table from './table'
+import SortableTable from './sortable-table'
+import TableColumn from './table-column'
+
+export { Table, SortableTable, TableColumn }