Merge pull request #6919 from TheThingsNetwork/feature/remove-storybo…

…ok-docs Remove @storybook/addon-info
TheThingsNetwork · Feb 7, 2024 · 24419cb · 24419cb
2 parents 630b4f8 + 0ddfe64
commit 24419cb
Show file tree

Hide file tree

Showing 35 changed files with 2,537 additions and 2,693 deletions.
diff --git a/config/storybook/main.js b/config/storybook/main.js
@@ -16,6 +16,15 @@
 
 module.exports = {
   stories: ['../../pkg/webui/**/story.js', '../../pkg/webui/**/*.stories.js'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-info'],
+  addons: ['@storybook/addon-actions'],
   staticDirs: ['../../public'],
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
 }
diff --git a/package.json b/package.json
@@ -21,8 +21,9 @@
     "@babel/runtime-corejs2": "^7.23.9",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@storybook/addon-actions": "^7.6.12",
-    "@storybook/addon-info": "6.0.0-alpha.2",
+    "@storybook/cli": "^7.6.12",
     "@storybook/react": "^7.6.12",
+    "@storybook/react-webpack5": "^7.6.12",
     "@testing-library/cypress": "^10.0.1",
     "add-asset-html-webpack-plugin": "^6.0.0",
     "babel-jest": "^29.7.0",
@@ -63,6 +64,7 @@
     "pg": "^8.11.3",
     "prettier": "^3.2.5",
     "react-refresh": "^0.14.0",
+    "storybook": "^7.6.12",
     "stylint": "^2.0.0",
     "stylus": "^0.62.0",
     "stylus-loader": "^8.1.0",

diff --git a/pkg/webui/components/breadcrumbs/story.js b/pkg/webui/components/breadcrumbs/story.js
@@ -13,22 +13,12 @@
 // limitations under the License.
 
 import React from 'react'
-import { withInfo } from '@storybook/addon-info'
 
 import Breadcrumb from './breadcrumb'
 import { Breadcrumbs } from './breadcrumbs'
 
 export default {
   title: 'Breadcrumbs',
-
-  decorators: [
-    withInfo({
-      inline: true,
-      header: false,
-      source: false,
-      propTables: [Breadcrumbs, Breadcrumb],
-    }),
-  ],
 }
 
 export const Default = () => {

diff --git a/pkg/webui/components/checkbox/story.js b/pkg/webui/components/checkbox/story.js
@@ -14,19 +14,11 @@
 
 import React from 'react'
 import bind from 'autobind-decorator'
-import { withInfo } from '@storybook/addon-info'
 
 import CheckboxGroup from './group'
 
 import Checkbox from '.'
 
-const info = {
-  inline: true,
-  header: false,
-  source: false,
-  propTables: [Checkbox],
-}
-
 class IndeterminateCheckboxExample extends React.Component {
   state = {
     allChecked: false,
@@ -90,7 +82,6 @@ class IndeterminateCheckboxExample extends React.Component {
 
 export default {
   title: 'Checkbox',
-  decorators: [withInfo(info)],
 }
 
 export const Default = () => <Checkbox label="Checkbox" name="checkbox" />

diff --git a/pkg/webui/components/data-sheet/story.js b/pkg/webui/components/data-sheet/story.js
@@ -27,7 +27,6 @@
 // limitations under the License.
 
 import React from 'react'
-import { withInfo } from '@storybook/addon-info'
 
 import DataSheet from '.'
 
@@ -73,15 +72,6 @@ const containerStyles = {
 
 export default {
   title: 'Data Sheet',
-
-  decorators: [
-    withInfo({
-      inline: true,
-      header: false,
-      source: true,
-      propTables: [DataSheet],
-    }),
-  ],
 }
 
 export const Default = () => (

diff --git a/pkg/webui/components/form/field/stories/bytes.stories.js b/pkg/webui/components/form/field/stories/bytes.stories.js
@@ -15,16 +15,14 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react'
-import { withInfo } from '@storybook/addon-info'
 
 import Input from '@ttn-lw/components/input'
 import Form from '@ttn-lw/components/form'
 
-import { FieldsWrapperExample, info } from './shared'
+import FieldsWrapperExample from './shared'
 
 export default {
   title: 'Fields/Byte',
-  decorators: [withInfo(info)],
 }
 
 export const Default = () => (

diff --git a/pkg/webui/components/form/field/stories/checkbox.stories.js b/pkg/webui/components/form/field/stories/checkbox.stories.js
@@ -15,16 +15,14 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react'
-import { withInfo } from '@storybook/addon-info'
 
 import Checkbox from '@ttn-lw/components/checkbox'
 import Form from '@ttn-lw/components/form'
 
-import { FieldsWrapperExample, info } from './shared'
+import FieldsWrapperExample from './shared'
 
 export default {
   title: 'Fields/Checkbox',
-  decorators: [withInfo(info)],
 }
 
 export const Default = () => (

diff --git a/pkg/webui/components/form/field/stories/file-input.stories.js b/pkg/webui/components/form/field/stories/file-input.stories.js
@@ -15,16 +15,14 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react'
-import { withInfo } from '@storybook/addon-info'
 
 import FileInput from '@ttn-lw/components/file-input'
 import Form from '@ttn-lw/components/form'
 
-import { FieldsWrapperExample, info } from './shared'
+import FieldsWrapperExample from './shared'
 
 export default {
   title: 'Fields/FileInput',
-  decorators: [withInfo(info)],
 }
 
 export const Default = () => (

diff --git a/pkg/webui/components/form/field/stories/input.stories.js b/pkg/webui/components/form/field/stories/input.stories.js
@@ -15,16 +15,14 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react'
-import { withInfo } from '@storybook/addon-info'
 
 import Input from '@ttn-lw/components/input'
 import Form from '@ttn-lw/components/form'
 
-import { FieldsWrapperExample, info } from './shared'
+import FieldsWrapperExample from './shared'
 
 export default {
   title: 'Fields/Input',
-  decorators: [withInfo(info)],
 }
 
 export const Default = () => (

diff --git a/pkg/webui/components/form/field/stories/radio.stories.js b/pkg/webui/components/form/field/stories/radio.stories.js
@@ -15,16 +15,14 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react'
-import { withInfo } from '@storybook/addon-info'
 
 import Radio from '@ttn-lw/components/radio-button'
 import Form from '@ttn-lw/components/form'
 
-import { FieldsWrapperExample, info } from './shared'
+import FieldsWrapperExample from './shared'
 
 export default {
   title: 'Fields/Radio',
-  decorators: [withInfo(info)],
 }
 
 export const Default = () => (

diff --git a/pkg/webui/components/form/field/stories/select.stories.js b/pkg/webui/components/form/field/stories/select.stories.js
@@ -15,16 +15,14 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react'
-import { withInfo } from '@storybook/addon-info'
 
 import Select from '@ttn-lw/components/select'
 import Form from '@ttn-lw/components/form'
 
-import { FieldsWrapperExample, info } from './shared'
+import FieldsWrapperExample from './shared'
 
 export default {
   title: 'Fields/Select',
-  decorators: [withInfo(info)],
 }
 
 export const Default = () => (

diff --git a/pkg/webui/components/form/field/stories/shared.js b/pkg/webui/components/form/field/stories/shared.js
@@ -25,13 +25,6 @@ const handleSubmit = (data, { resetForm }) => {
   setTimeout(() => resetForm({ values: data }), 1000)
 }
 
-const info = {
-  inline: true,
-  header: false,
-  source: false,
-  propTables: [Form.Field],
-}
-
 const errorSchema = Yup.string().test('error', 'Something went wrong.', () => false)
 const validationSchema = Yup.object().shape({
   error: errorSchema,
@@ -64,4 +57,4 @@ FieldsWrapperExample.propTypes = {
   initialValues: PropTypes.shape({}).isRequired,
 }
 
-export { info, FieldsWrapperExample }
+export default FieldsWrapperExample
diff --git a/pkg/webui/components/form/field/stories/text-area.stories.js b/pkg/webui/components/form/field/stories/text-area.stories.js
@@ -15,16 +15,14 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react'
-import { withInfo } from '@storybook/addon-info'
 
 import Input from '@ttn-lw/components/input'
 import Form from '@ttn-lw/components/form'
 
-import { FieldsWrapperExample, info } from './shared'
+import FieldsWrapperExample from './shared'
 
 export default {
   title: 'Fields/TextArea',
-  decorators: [withInfo(info)],
 }
 
 export const Default = () => (

diff --git a/pkg/webui/components/form/field/stories/unit-input.stories.js b/pkg/webui/components/form/field/stories/unit-input.stories.js
@@ -15,16 +15,14 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react'
-import { withInfo } from '@storybook/addon-info'
 
 import UnitInput from '@ttn-lw/components/unit-input'
 import Form from '@ttn-lw/components/form'
 
-import { FieldsWrapperExample, info } from './shared'
+import FieldsWrapperExample from './shared'
 
 export default {
   title: 'Fields/UnitInput',
-  decorators: [withInfo(info)],
 }
 
 export const Default = () => (

diff --git a/pkg/webui/components/form/story.js b/pkg/webui/components/form/story.js
@@ -14,7 +14,6 @@
 
 import React from 'react'
 import { action } from '@storybook/addon-actions'
-import { withInfo } from '@storybook/addon-info'
 
 import Button from '@ttn-lw/components/button'
 import SubmitBar from '@ttn-lw/components/submit-bar'
@@ -42,15 +41,6 @@ const containerDefaultStyles = {
 
 export default {
   title: 'Form',
-
-  decorators: [
-    withInfo({
-      inline: true,
-      header: false,
-      source: true,
-      propTables: [Form],
-    }),
-  ],
 }
 
 export const Login = () => (

diff --git a/pkg/webui/components/icon/story.js b/pkg/webui/components/icon/story.js
@@ -13,7 +13,6 @@
 // limitations under the License.
 
 import React from 'react'
-import { withInfo } from '@storybook/addon-info'
 
 import style from './story.styl'
 
@@ -37,12 +36,6 @@ const icons = [
   'organization',
 ]
 
-const doc = `Icons can be used using \`display: {flex|inline-block}\`.
-\`inline-block\` is used by default. To use \`flex\` instead, overwrite the
-display value of the wrapping \`<span />\`in your local scoped css. The
-positioning will differ slightly, so the nudge props can be used to fine-tune
-the appearance.`
-
 const iconElement = icons.map(icon => (
   <div className={style.wrapper} key={icon}>
     <Icon icon={icon} />
@@ -52,15 +45,6 @@ const iconElement = icons.map(icon => (
 
 export default {
   title: 'Icon',
-
-  decorators: [
-    withInfo({
-      inline: true,
-      header: false,
-      propTables: [Icon],
-      text: doc,
-    }),
-  ],
 }
 
 export const Icons = () => <div>{iconElement}</div>

diff --git a/pkg/webui/components/input/stories/byte.stories.js b/pkg/webui/components/input/stories/byte.stories.js
@@ -14,15 +14,15 @@
 
 /* eslint-disable react/prop-types */
 
-import crypto from 'crypto'
-
 import React from 'react'
 
 import Input from '..'
 
 import { Example } from './shared'
 
-const generateRandom16Bytes = () => crypto.randomBytes(16).toString('hex').toUpperCase()
+// Chosen by fair dice roll.
+// Guaranteed to be random.
+const generateRandom16Bytes = () => '1c3bca1a8f3df30f'
 
 export default {
   title: 'Input/Byte',

diff --git a/pkg/webui/components/input/stories/normal.stories.js b/pkg/webui/components/input/stories/normal.stories.js
@@ -14,15 +14,15 @@
 
 /* eslint-disable react/prop-types */
 
-import crypto from 'crypto'
-
 import React from 'react'
 
 import Input from '..'
 
 import { Example } from './shared'
 
-const generateRandom16Bytes = () => crypto.randomBytes(16).toString('hex').toUpperCase()
+// Chosen by fair dice roll.
+// Guaranteed to be random.
+const generateRandom16Bytes = () => '7d85de9e99c9a2be'
 
 export default {
   title: 'Input/Normal',

diff --git a/pkg/webui/components/modal/story.js b/pkg/webui/components/modal/story.js
@@ -13,7 +13,6 @@
 // limitations under the License.
 
 import React from 'react'
-import { withInfo } from '@storybook/addon-info'
 
 import Logo from '@assets/static/logo.svg'
 
@@ -36,15 +35,6 @@ const bottomLine = (
 
 export default {
   title: 'Modal',
-
-  decorators: [
-    withInfo({
-      inline: true,
-      header: false,
-      text: 'The modal can be displayed inline or portalled via `<PortalledModal />`',
-      propTables: [Modal],
-    }),
-  ],
 }
 
 export const BasicModal = () => (