Fix storybook

CHANGELOG.md

@@ -19,6 +19,8 @@ For details about compatibility between different releases, see the **Commitment
 
 ### Fixed
 
+- Fix storybook errors.
+
 ### Security
 
 ## [3.37.0] - unreleased

config/storybook/preview-head.html

@@ -2,6 +2,14 @@
   window.__ttn_config__ = {
     APP_CONFIG: {
       documentation_base_url: 'https://thethingsstack.io',
+      stack_config: {
+        is: { enabled: true },
+        gs: { enabled: true },
+        ns: { enabled: true },
+        as: { enabled: true },
+        js: { enabled: true },
+        gcs: { enabled: true },
+      },
     },
   }
 </script>

config/storybook/preview.js

@@ -17,9 +17,18 @@
 import React from 'react'
 import { IntlProvider } from 'react-intl'
 import { MemoryRouter } from 'react-router-dom'
+import { Provider } from 'react-redux'
+import { configureStore } from '@reduxjs/toolkit'
 
 import messages from '@ttn-lw/locales/en.json'
 import backendMessages from '@ttn-lw/locales/.backend/en.json'
+import rootReducer from '@console/store/reducers'
+
+import { BreadcrumbsProvider } from '@ttn-lw/components/breadcrumbs/context'
+import { AlertBannerProvider } from '@ttn-lw/components/alert-banner/context'
+
+import { EventSplitFrameContextProvider } from '@console/containers/event-split-frame/context'
+import { SidebarContextProvider } from '@console/containers/sidebar/context'
 
 import '../../pkg/webui/styles/main.styl'
 import '../../pkg/webui/styles/utilities/general.styl'
@@ -28,12 +37,34 @@ import '../../pkg/webui/styles/utilities/tokens.styl'
 import 'focus-visible/dist/focus-visible'
 import Center from './center'
 
+document.documentElement.classList.add('light')
+
+const store = configureStore({
+  reducer: rootReducer,
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({ serializableCheck: false, immutableCheck: false }),
+})
+
 export const decorators = [
-  Story => (
-    <IntlProvider key="key" messages={{ ...messages, ...backendMessages }} locale="en-US">
-      <MemoryRouter>
-        <Center>{Story()}</Center>
-      </MemoryRouter>
-    </IntlProvider>
-  ),
+  (Story, { parameters }) => {
+    const Router = parameters.dataRouter ? React.Fragment : MemoryRouter
+
+    return (
+      <Provider store={store}>
+        <IntlProvider key="key" messages={{ ...messages, ...backendMessages }} locale="en-US">
+          <Router>
+            <BreadcrumbsProvider>
+              <EventSplitFrameContextProvider>
+                <AlertBannerProvider>
+                  <SidebarContextProvider>
+                    <Center>{Story()}</Center>
+                  </SidebarContextProvider>
+                </AlertBannerProvider>
+              </EventSplitFrameContextProvider>
+            </BreadcrumbsProvider>
+          </Router>
+        </IntlProvider>
+      </Provider>
+    )
+  },
 ]

pkg/webui/components/dropdown/story.js

@@ -14,7 +14,7 @@
 
 import React from 'react'
 
-import { IconUser, IconLogout, IconAdminShield } from '@ttn-lw/components/icon'
+import { IconUser, IconLogout, IconAdminPanel } from '@ttn-lw/components/icon'
 
 import Dropdown from '.'
 
@@ -28,7 +28,7 @@ export const Default = () => (
     <Dropdown open>
       <Dropdown.HeaderItem title="dropdown items" />
       <Dropdown.Item title="Profile Settings" path="profile/path" icon={IconUser} />
-      <Dropdown.Item title="Admin panel" path="admin/path" icon={IconAdminShield} />
+      <Dropdown.Item title="Admin panel" path="admin/path" icon={IconAdminPanel} />
       <hr />
       <Dropdown.Item title="Logout" path="logout/path" icon={IconLogout} />
     </Dropdown>

pkg/webui/components/header/story.js

@@ -19,7 +19,7 @@ import TtsLogo from '@assets/static/tts-logo.svg'
 import {
   IconUser,
   IconLogout,
-  IconAdminShield,
+  IconAdminPanel,
   IconCreditCard,
   IconChartBar,
   IconBook,
@@ -31,7 +31,6 @@ import {
 } from '@ttn-lw/components/icon'
 import Dropdown from '@ttn-lw/components/dropdown'
 import ExampleLogo from '@ttn-lw/components/logo/story-logo-new.svg'
-import Breadcrumb from '@ttn-lw/components/breadcrumbs/breadcrumb'
 
 import Header from '.'
 
@@ -59,7 +58,7 @@ const plusDropdownItems = (
   </>
 )
 
-const starDropdownItems = (
+const bookmarkDropdownItems = (
   <>
     <Dropdown.Item title="Parking Lot Occupancy" icon={IconApplication} path="/parking1" />
     <Dropdown.Item title="Parking Lot Occupancy" icon={IconApplication} path="/parking2" />
@@ -79,7 +78,7 @@ const profileDropdownItems = (
       path="/manage-cloud-subs"
     />
     <Dropdown.Item title="Network Operations Center" icon={IconChartBar} path="/network_ops" />
-    <Dropdown.Item title="Admin panel" icon={IconAdminShield} path="/admin-panel" />
+    <Dropdown.Item title="Admin panel" icon={IconAdminPanel} path="/admin-panel" />
     <hr />
     <Dropdown.Item title="Upgrade" icon={IconRocket} path="/upgrade" />
     <Dropdown.Item title="Get support" icon={IconSupport} path="/support" />
@@ -89,24 +88,21 @@ const profileDropdownItems = (
   </>
 )
 
-export const Default = () => {
-  const breadcrumbs = [
-    <Breadcrumb key="1" path="/applications" content="Applications" />,
-    <Breadcrumb key="2" path="/applications/test-app" content="test-app" />,
-    <Breadcrumb key="3" path="/applications/test-app/devices" content="Devices" />,
-  ]
+// eslint-disable-next-line react/prop-types
+const Logo = ({ className }) => <img src={TtsLogo} alt="Logo" className={className} />
 
-  return (
-    <div style={{ height: '25rem' }}>
-      <Header
-        user={user}
-        breadcrumbs={breadcrumbs}
-        profileDropdownItems={profileDropdownItems}
-        addDropdownItems={plusDropdownItems}
-        starDropdownItems={starDropdownItems}
-        brandLogo={{ src: ExampleLogo, alt: 'Secondary Logo' }}
-        logo={{ src: TtsLogo, alt: 'Logo' }}
-      />
-    </div>
-  )
-}
+export const Default = () => (
+  <div style={{ height: '25rem' }}>
+    <Header
+      user={user}
+      profileDropdownItems={profileDropdownItems}
+      addDropdownItems={plusDropdownItems}
+      bookmarkDropdownItems={bookmarkDropdownItems}
+      brandLogo={{ src: ExampleLogo, alt: 'Secondary Logo' }}
+      Logo={Logo}
+      isSidebarMinimized={false}
+      toggleSidebarMinimized={() => null}
+      expandSidebar={() => null}
+    />
+  </div>
+)

pkg/webui/components/icon/story.js

@@ -14,32 +14,46 @@
 
 import React from 'react'
 
-import Icon, { IconDevice } from '@ttn-lw/components/icon'
+import Icon, {
+  IconApplication,
+  IconLiveData,
+  IconDevice,
+  IconGateway,
+  IconGeneralSettings,
+  IconIntegration,
+  IconLock,
+  IconLockOpen,
+  IconMenu2,
+  IconOrganization,
+  IconOverview,
+  IconSort,
+  IconTransform,
+  IconX,
+} from '@ttn-lw/components/icon'
 
 import style from './story.styl'
 
-const icons = [
-  'device',
-  'integration',
-  'settings',
-  'lock',
-  'lock_open',
-  'close',
-  'menu',
-  'dashboard',
-  'transform',
-  'data',
-  'sort',
-  'overview',
-  'application',
-  'gateway',
-  'organization',
-]
+const icons = {
+  IconDevice,
+  IconIntegration,
+  IconGeneralSettings,
+  IconLock,
+  IconLockOpen,
+  IconX,
+  IconMenu2,
+  IconTransform,
+  IconLiveData,
+  IconSort,
+  IconOverview,
+  IconApplication,
+  IconGateway,
+  IconOrganization,
+}
 
-const iconElement = icons.map(icon => (
-  <div className={style.wrapper} key={icon}>
+const iconElement = Object.entries(icons).map(([name, icon]) => (
+  <div className={style.wrapper} key={name}>
     <Icon icon={icon} />
-    {icon}
+    {name}
   </div>
 ))
 

pkg/webui/components/profile-dropdown/story.js

@@ -17,7 +17,7 @@ import React from 'react'
 import {
   IconUser,
   IconLogout,
-  IconAdminShield,
+  IconAdminPanel,
   IconCreditCard,
   IconChartBar,
   IconBook,
@@ -49,7 +49,7 @@ export const Default = () => (
         path="/manage-cloud-subs"
       />
       <Dropdown.Item title="Network Operations Center" icon={IconChartBar} path="/network_ops" />
-      <Dropdown.Item title="Admin panel" icon={IconAdminShield} path="/admin-panel" />
+      <Dropdown.Item title="Admin panel" icon={IconAdminPanel} path="/admin-panel" />
       <hr />
       <Dropdown.Item title="Upgrade" icon={IconRocket} path="/upgrade" />
       <Dropdown.Item title="Get support" icon={IconSupport} path="/support" />

pkg/webui/components/progress-bar/index.js

@@ -17,7 +17,7 @@ import classnames from 'classnames'
 import { defineMessages } from 'react-intl'
 
 import Message from '@ttn-lw/lib/components/message'
-import RelativeDateTime from '@ttn-lw/lib/components/date-time/relative'
+import DateTime from '@ttn-lw/lib/components/date-time'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
@@ -67,11 +67,11 @@ const ProgressBar = props => {
     displayEstimation =
       !showEstimation ||
       estimations < 3 || // Avoid inaccurate early estimations.
-      estimatedDuration === Infinity ||
+      !Number.isFinite(estimatedDuration) ||
       !startTime ? null : (
         <div>
           <span>
-            Estimated completion <RelativeDateTime value={eta} />
+            Estimated completion <DateTime.Relative value={eta} />
           </span>
         </div>
       )
@@ -107,11 +107,7 @@ const ProgressBar = props => {
           )}
           {children}
           {props.percentage !== undefined && (
-            <Message
-              component="div"
-              content={m.percentage}
-              values={{ percentage: displayPercentage }}
-            />
+            <Message component="div" content={m.percentage} values={{ percentage: fraction }} />
           )}
           {displayEstimation}
         </div>

pkg/webui/components/prompt/story.js

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import React from 'react'
+import { createMemoryRouter, RouterProvider } from 'react-router-dom'
 import { action } from '@storybook/addon-actions'
 
 import Link from '@ttn-lw/components/link'
@@ -28,9 +29,11 @@ const linkContainerStyle = {
 export default {
   title: 'Prompt',
   component: Prompt,
+  // The `Prompt` component requires a data router.
+  parameters: { dataRouter: true },
 }
 
-export const Default = () => (
+const Content = () => (
   <div>
     Navigate using the links below to trigger the `Prompt` component to appear.
     <div style={linkContainerStyle}>
@@ -64,3 +67,7 @@ export const Default = () => (
     </Prompt>
   </div>
 )
+
+const router = createMemoryRouter([{ path: '*', element: <Content /> }])
+
+export const Default = () => <RouterProvider router={router} />

pkg/webui/components/stepper/step/index.js

@@ -15,7 +15,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import Icon, { IconCicleCheck, IconX } from '@ttn-lw/components/icon'
+import Icon, { IconCircleCheck, IconX } from '@ttn-lw/components/icon'
 
 import Message from '@ttn-lw/lib/components/message'
 
@@ -48,7 +48,7 @@ const Step = props => {
 
   let label
   if (isSuccess) {
-    label = <Icon icon={IconCicleCheck} nudgeDown />
+    label = <Icon icon={IconCircleCheck} nudgeDown />
   } else if (isFailure) {
     label = <Icon icon={IconX} nudgeDown />
   } else {

pkg/webui/components/submit-bar/story.js

@@ -14,7 +14,7 @@
 
 import React from 'react'
 
-import { IconCicleCheck, IconTrash } from '@ttn-lw/components/icon'
+import { IconCircleCheck, IconTrash } from '@ttn-lw/components/icon'
 import Button from '@ttn-lw/components/button'
 
 import SubmitBar from '.'
@@ -25,13 +25,13 @@ export default {
 
 export const OnlySubmit = () => (
   <SubmitBar>
-    <Button message="Save Changes" icon={IconCicleCheck} primary />
+    <Button message="Save Changes" icon={IconCircleCheck} primary />
   </SubmitBar>
 )
 
 export const SubmitAndReset = () => (
   <SubmitBar>
-    <Button message="Save Changes" icon={IconCicleCheck} primary />
+    <Button message="Save Changes" icon={IconCircleCheck} primary />
     <Button message="Delete" icon={IconTrash} naked danger />
   </SubmitBar>
 )
@@ -42,7 +42,7 @@ SubmitAndReset.story = {
 
 export const SubmitAndText = () => (
   <SubmitBar align="start">
-    <Button message="Save Changes" icon={IconCicleCheck} primary />
+    <Button message="Save Changes" icon={IconCircleCheck} primary />
     <SubmitBar.Message content="Note: End device level message payload formats take precedence over application level message payload formats" />
   </SubmitBar>
 )