Skip to content

Commit c2fad6e

Browse files
PavelJankoskiPavelJankoski
committed
console: Fix storybook
1 parent 984c219 commit c2fad6e

17 files changed

Lines changed: 147 additions & 84 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ For details about compatibility between different releases, see the **Commitment
1919

2020
### Fixed
2121

22+
- Fix storybook errors.
23+
2224
### Security
2325

2426
## [3.37.0] - unreleased

‎config/storybook/preview-head.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22
window.__ttn_config__ = {
33
APP_CONFIG: {
44
documentation_base_url: 'https://thethingsstack.io',
5+
stack_config: {
6+
is: { enabled: true },
7+
gs: { enabled: true },
8+
ns: { enabled: true },
9+
as: { enabled: true },
10+
js: { enabled: true },
11+
gcs: { enabled: true },
12+
},
513
},
614
}
715
</script>

‎config/storybook/preview.js‎

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,18 @@
1717
import React from 'react'
1818
import { IntlProvider } from 'react-intl'
1919
import { MemoryRouter } from 'react-router-dom'
20+
import { Provider } from 'react-redux'
21+
import { configureStore } from '@reduxjs/toolkit'
2022

2123
import messages from '@ttn-lw/locales/en.json'
2224
import backendMessages from '@ttn-lw/locales/.backend/en.json'
25+
import rootReducer from '@console/store/reducers'
26+
27+
import { BreadcrumbsProvider } from '@ttn-lw/components/breadcrumbs/context'
28+
import { AlertBannerProvider } from '@ttn-lw/components/alert-banner/context'
29+
30+
import { EventSplitFrameContextProvider } from '@console/containers/event-split-frame/context'
31+
import { SidebarContextProvider } from '@console/containers/sidebar/context'
2332

2433
import '../../pkg/webui/styles/main.styl'
2534
import '../../pkg/webui/styles/utilities/general.styl'
@@ -28,12 +37,34 @@ import '../../pkg/webui/styles/utilities/tokens.styl'
2837
import 'focus-visible/dist/focus-visible'
2938
import Center from './center'
3039

40+
document.documentElement.classList.add('light')
41+
42+
const store = configureStore({
43+
reducer: rootReducer,
44+
middleware: getDefaultMiddleware =>
45+
getDefaultMiddleware({ serializableCheck: false, immutableCheck: false }),
46+
})
47+
3148
export const decorators = [
32-
Story => (
33-
<IntlProvider key="key" messages={{ ...messages, ...backendMessages }} locale="en-US">
34-
<MemoryRouter>
35-
<Center>{Story()}</Center>
36-
</MemoryRouter>
37-
</IntlProvider>
38-
),
49+
(Story, { parameters }) => {
50+
const Router = parameters.dataRouter ? React.Fragment : MemoryRouter
51+
52+
return (
53+
<Provider store={store}>
54+
<IntlProvider key="key" messages={{ ...messages, ...backendMessages }} locale="en-US">
55+
<Router>
56+
<BreadcrumbsProvider>
57+
<EventSplitFrameContextProvider>
58+
<AlertBannerProvider>
59+
<SidebarContextProvider>
60+
<Center>{Story()}</Center>
61+
</SidebarContextProvider>
62+
</AlertBannerProvider>
63+
</EventSplitFrameContextProvider>
64+
</BreadcrumbsProvider>
65+
</Router>
66+
</IntlProvider>
67+
</Provider>
68+
)
69+
},
3970
]

‎pkg/webui/components/dropdown/story.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
import React from 'react'
1616

17-
import { IconUser, IconLogout, IconAdminShield } from '@ttn-lw/components/icon'
17+
import { IconUser, IconLogout, IconAdminPanel } from '@ttn-lw/components/icon'
1818

1919
import Dropdown from '.'
2020

@@ -28,7 +28,7 @@ export const Default = () => (
2828
<Dropdown open>
2929
<Dropdown.HeaderItem title="dropdown items" />
3030
<Dropdown.Item title="Profile Settings" path="profile/path" icon={IconUser} />
31-
<Dropdown.Item title="Admin panel" path="admin/path" icon={IconAdminShield} />
31+
<Dropdown.Item title="Admin panel" path="admin/path" icon={IconAdminPanel} />
3232
<hr />
3333
<Dropdown.Item title="Logout" path="logout/path" icon={IconLogout} />
3434
</Dropdown>

‎pkg/webui/components/header/story.js‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import TtsLogo from '@assets/static/tts-logo.svg'
1919
import {
2020
IconUser,
2121
IconLogout,
22-
IconAdminShield,
22+
IconAdminPanel,
2323
IconCreditCard,
2424
IconChartBar,
2525
IconBook,
@@ -31,7 +31,6 @@ import {
3131
} from '@ttn-lw/components/icon'
3232
import Dropdown from '@ttn-lw/components/dropdown'
3333
import ExampleLogo from '@ttn-lw/components/logo/story-logo-new.svg'
34-
import Breadcrumb from '@ttn-lw/components/breadcrumbs/breadcrumb'
3534

3635
import Header from '.'
3736

@@ -59,7 +58,7 @@ const plusDropdownItems = (
5958
</>
6059
)
6160

62-
const starDropdownItems = (
61+
const bookmarkDropdownItems = (
6362
<>
6463
<Dropdown.Item title="Parking Lot Occupancy" icon={IconApplication} path="/parking1" />
6564
<Dropdown.Item title="Parking Lot Occupancy" icon={IconApplication} path="/parking2" />
@@ -79,7 +78,7 @@ const profileDropdownItems = (
7978
path="/manage-cloud-subs"
8079
/>
8180
<Dropdown.Item title="Network Operations Center" icon={IconChartBar} path="/network_ops" />
82-
<Dropdown.Item title="Admin panel" icon={IconAdminShield} path="/admin-panel" />
81+
<Dropdown.Item title="Admin panel" icon={IconAdminPanel} path="/admin-panel" />
8382
<hr />
8483
<Dropdown.Item title="Upgrade" icon={IconRocket} path="/upgrade" />
8584
<Dropdown.Item title="Get support" icon={IconSupport} path="/support" />
@@ -89,24 +88,21 @@ const profileDropdownItems = (
8988
</>
9089
)
9190

92-
export const Default = () => {
93-
const breadcrumbs = [
94-
<Breadcrumb key="1" path="/applications" content="Applications" />,
95-
<Breadcrumb key="2" path="/applications/test-app" content="test-app" />,
96-
<Breadcrumb key="3" path="/applications/test-app/devices" content="Devices" />,
97-
]
91+
// eslint-disable-next-line react/prop-types
92+
const Logo = ({ className }) => <img src={TtsLogo} alt="Logo" className={className} />
9893

99-
return (
100-
<div style={{ height: '25rem' }}>
101-
<Header
102-
user={user}
103-
breadcrumbs={breadcrumbs}
104-
profileDropdownItems={profileDropdownItems}
105-
addDropdownItems={plusDropdownItems}
106-
starDropdownItems={starDropdownItems}
107-
brandLogo={{ src: ExampleLogo, alt: 'Secondary Logo' }}
108-
logo={{ src: TtsLogo, alt: 'Logo' }}
109-
/>
110-
</div>
111-
)
112-
}
94+
export const Default = () => (
95+
<div style={{ height: '25rem' }}>
96+
<Header
97+
user={user}
98+
profileDropdownItems={profileDropdownItems}
99+
addDropdownItems={plusDropdownItems}
100+
bookmarkDropdownItems={bookmarkDropdownItems}
101+
brandLogo={{ src: ExampleLogo, alt: 'Secondary Logo' }}
102+
Logo={Logo}
103+
isSidebarMinimized={false}
104+
toggleSidebarMinimized={() => null}
105+
expandSidebar={() => null}
106+
/>
107+
</div>
108+
)

‎pkg/webui/components/icon/story.js‎

Lines changed: 35 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -14,32 +14,46 @@
1414

1515
import React from 'react'
1616

17-
import Icon, { IconDevice } from '@ttn-lw/components/icon'
17+
import Icon, {
18+
IconApplication,
19+
IconLiveData,
20+
IconDevice,
21+
IconGateway,
22+
IconGeneralSettings,
23+
IconIntegration,
24+
IconLock,
25+
IconLockOpen,
26+
IconMenu2,
27+
IconOrganization,
28+
IconOverview,
29+
IconSort,
30+
IconTransform,
31+
IconX,
32+
} from '@ttn-lw/components/icon'
1833

1934
import style from './story.styl'
2035

21-
const icons = [
22-
'device',
23-
'integration',
24-
'settings',
25-
'lock',
26-
'lock_open',
27-
'close',
28-
'menu',
29-
'dashboard',
30-
'transform',
31-
'data',
32-
'sort',
33-
'overview',
34-
'application',
35-
'gateway',
36-
'organization',
37-
]
36+
const icons = {
37+
IconDevice,
38+
IconIntegration,
39+
IconGeneralSettings,
40+
IconLock,
41+
IconLockOpen,
42+
IconX,
43+
IconMenu2,
44+
IconTransform,
45+
IconLiveData,
46+
IconSort,
47+
IconOverview,
48+
IconApplication,
49+
IconGateway,
50+
IconOrganization,
51+
}
3852

39-
const iconElement = icons.map(icon => (
40-
<div className={style.wrapper} key={icon}>
53+
const iconElement = Object.entries(icons).map(([name, icon]) => (
54+
<div className={style.wrapper} key={name}>
4155
<Icon icon={icon} />
42-
{icon}
56+
{name}
4357
</div>
4458
))
4559

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import React from 'react'
1717
import {
1818
IconUser,
1919
IconLogout,
20-
IconAdminShield,
20+
IconAdminPanel,
2121
IconCreditCard,
2222
IconChartBar,
2323
IconBook,
@@ -49,7 +49,7 @@ export const Default = () => (
4949
path="/manage-cloud-subs"
5050
/>
5151
<Dropdown.Item title="Network Operations Center" icon={IconChartBar} path="/network_ops" />
52-
<Dropdown.Item title="Admin panel" icon={IconAdminShield} path="/admin-panel" />
52+
<Dropdown.Item title="Admin panel" icon={IconAdminPanel} path="/admin-panel" />
5353
<hr />
5454
<Dropdown.Item title="Upgrade" icon={IconRocket} path="/upgrade" />
5555
<Dropdown.Item title="Get support" icon={IconSupport} path="/support" />

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import classnames from 'classnames'
1717
import { defineMessages } from 'react-intl'
1818

1919
import Message from '@ttn-lw/lib/components/message'
20-
import RelativeDateTime from '@ttn-lw/lib/components/date-time/relative'
20+
import DateTime from '@ttn-lw/lib/components/date-time'
2121

2222
import PropTypes from '@ttn-lw/lib/prop-types'
2323

@@ -67,11 +67,11 @@ const ProgressBar = props => {
6767
displayEstimation =
6868
!showEstimation ||
6969
estimations < 3 || // Avoid inaccurate early estimations.
70-
estimatedDuration === Infinity ||
70+
!Number.isFinite(estimatedDuration) ||
7171
!startTime ? null : (
7272
<div>
7373
<span>
74-
Estimated completion <RelativeDateTime value={eta} />
74+
Estimated completion <DateTime.Relative value={eta} />
7575
</span>
7676
</div>
7777
)
@@ -107,11 +107,7 @@ const ProgressBar = props => {
107107
)}
108108
{children}
109109
{props.percentage !== undefined && (
110-
<Message
111-
component="div"
112-
content={m.percentage}
113-
values={{ percentage: displayPercentage }}
114-
/>
110+
<Message component="div" content={m.percentage} values={{ percentage: fraction }} />
115111
)}
116112
{displayEstimation}
117113
</div>

‎pkg/webui/components/prompt/story.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
// limitations under the License.
1414

1515
import React from 'react'
16+
import { createMemoryRouter, RouterProvider } from 'react-router-dom'
1617
import { action } from '@storybook/addon-actions'
1718

1819
import Link from '@ttn-lw/components/link'
@@ -28,9 +29,11 @@ const linkContainerStyle = {
2829
export default {
2930
title: 'Prompt',
3031
component: Prompt,
32+
// The `Prompt` component requires a data router.
33+
parameters: { dataRouter: true },
3134
}
3235

33-
export const Default = () => (
36+
const Content = () => (
3437
<div>
3538
Navigate using the links below to trigger the `Prompt` component to appear.
3639
<div style={linkContainerStyle}>
@@ -64,3 +67,7 @@ export const Default = () => (
6467
</Prompt>
6568
</div>
6669
)
70+
71+
const router = createMemoryRouter([{ path: '*', element: <Content /> }])
72+
73+
export const Default = () => <RouterProvider router={router} />

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
import React from 'react'
1616
import classnames from 'classnames'
1717

18-
import Icon, { IconCicleCheck, IconX } from '@ttn-lw/components/icon'
18+
import Icon, { IconCircleCheck, IconX } from '@ttn-lw/components/icon'
1919

2020
import Message from '@ttn-lw/lib/components/message'
2121

@@ -48,7 +48,7 @@ const Step = props => {
4848

4949
let label
5050
if (isSuccess) {
51-
label = <Icon icon={IconCicleCheck} nudgeDown />
51+
label = <Icon icon={IconCircleCheck} nudgeDown />
5252
} else if (isFailure) {
5353
label = <Icon icon={IconX} nudgeDown />
5454
} else {

0 commit comments

Comments
 (0)