Skip to content

Commit ac02f2a

Browse files
zackjones11Martí Malek
zackjones11
authored and
Martí Malek
committed
docs: migrate from docz to storybook (#312)
Docz is not supported anymore. We decided to migrate to a stable solution Co-authored-by: Zack Jones <[email protected]> Co-authored-by: Nikolai Lopin <[email protected]> docs: migrate components to storybook part 1 (#313) Components migrated: * Accordion * Banner * Box * Card WECH-23: Migrate components to storybook part 2 (#314) * Checkbox * Datepicker * Dimmer * Divider * Filepicker --------- Co-authored-by: Zack Jones <[email protected]> Co-authored-by: Cristian Sanchez <[email protected]> Co-authored-by: Nikolai Lopin <[email protected]> docs: migrate components to storybook * docs: add input story * docs: add label story * docs: add link story * docs: add modal story * docs: add offcanvas story * docs: define argTypes for Input and Label stories * docs(password): add Password to Storybook * docs(phoneinput): add PhoneInput to Storybook * fix(test): update snapshots * docs(pagination): add Pagination to Storybook * docs(radiobutton): add RadioButton to Storybook * docs(popover): add Popover to Storybook --------- Co-authored-by: Aleksandar Spasov <[email protected]> Co-authored-by: Ján Hamara <[email protected]> migrate to storybook v7 (#323) chore: fix failing storybook Update typescript to the lowest supported version docs: migrate component pages to storybook (#316) * Input * Label * Link * Modal * Offcanvas Co-authored-by: Aleksandar Spasov <[email protected]> Co-authored-by: Nikolai Lopin <[email protected]> docs: migrate components to storybook (#317) * table * tag * text * textarea * toggle * tooltip --------- Co-authored-by: Christian <[email protected]> Co-authored-by: Nikolai Lopin <[email protected]> docs: migrate components (#320) * Search * TabBar * Select * SelectList * Skeleton Co-authored-by: Inga Schünemann <[email protected]> docs: migrate essentials to storybook (#322) * essentials pages * Logo * Icons * remove IE 11 from the list of supported --------- Co-authored-by: lena <[email protected]> Co-authored-by: Vanessa Knibbe <[email protected]> Co-authored-by: Nikolai Lopin <[email protected]> docs: migrate Grid docs ci: install with legacy in docs pipeline docs: migrate Headline docs docs: migrate HelperText docs: migrate InlineSpinner docs: migrate Infobanner docs docs: remove unused code docs: move accordion stories to the accordion folder docs: move Box stories to the box folder docs: move Button stories to the button folder docs: moves Card stories to the card folder docs: moves Checkbox stories to the checkbox folder docs: moves Banner stories to the banner folder docs: moves Dimming stories to the dimming folder docs: moves Divider stories to the divider folder docs: moves datepicker stories to the datepicker folder docs: clean banner docs docs: use new imports docs: remove stories folder docs: migrate Table docs to csf3 docs: migrate Input docs to csf3 docs: migrate Popover docs to csf3 docs: migrate Label docs to csf3 docs: migrate Link docs to csf3 docs: migrate Tag docs to csf3 docs: migrate Modal docs to csf3 docs: migrate Tooltip docs to csf3 docs: migrate Toggle docs to csf3 docs: migrate Textarea docs to csf3 docs: migrate Text docs to csf3 docs: show Text default values docs: migrate Password docs to csf3 docs: migrate TabBar docs to csf3 docs: migrate RadioButton docs to csf3 docs: migrate PhoneInput docs to csf3 docs: migrate Offcanvas docs to csf3 docs: migrate FilePicker docs to csf3 docs: migrate Skeleton docs to csf3 docs: migrate Select docs to csf3 docs: align naming of doc pages docs: migrate SelectList docs to csf3 docs: migrate Pagination docs to csf3 docs: use ArgTypes for table ArgsTable is deprecated docs: use consistent stories import docs: polish docs
1 parent c3ed6c9 commit ac02f2a

File tree

277 files changed

+44975
-69539
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

277 files changed

+44975
-69539
lines changed

‎.babelrc.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"sourceType": "unambiguous",
3+
"presets": [
4+
[
5+
"@babel/preset-env",
6+
{
7+
"targets": {
8+
"chrome": 100
9+
}
10+
}
11+
],
12+
"@babel/preset-typescript",
13+
"@babel/preset-react"
14+
],
15+
"plugins": []
16+
}

‎.eslintignore

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
node_modules/
33

44
# generated files
5-
.docz/
5+
storybook-static/
66
lib/
77

88
# other
@@ -12,4 +12,3 @@ assets/
1212
fixtures/
1313

1414
src/icons/
15-
src/gatsby-theme-docz

‎.eslintrc.js

+13-7
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ module.exports = {
88
'plugin:jest/recommended',
99
'plugin:promise/recommended',
1010
'plugin:unicorn/recommended',
11-
'prettier'
11+
'prettier',
12+
'plugin:storybook/recommended',
13+
'plugin:storybook/recommended'
1214
],
1315
env: {
1416
node: true,
@@ -21,11 +23,8 @@ module.exports = {
2123
rules: {
2224
// conflicts with stylelint rule
2325
'unicorn/numeric-separators-style': 'off',
24-
2526
'unicorn/no-useless-undefined': 'off',
26-
2727
'@typescript-eslint/no-unsafe-return': 'off',
28-
2928
'@typescript-eslint/no-unsafe-assignment': 'off',
3029
'react/require-default-props': 'off',
3130
// Often used for this library
@@ -35,7 +34,7 @@ module.exports = {
3534
'no-prototype-builtins': 'off',
3635
// https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html
3736
'import/prefer-default-export': 'off',
38-
'import/no-default-export': 'error',
37+
'import/no-default-export': 'off',
3938
// Too restrictive: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md
4039
'react/destructuring-assignment': 'off',
4140
// No jsx extension: https://github.com/facebook/create-react-app/issues/87#issuecomment-234627904
@@ -47,14 +46,21 @@ module.exports = {
4746
'@typescript-eslint/explicit-function-return-type': 'off',
4847
'@typescript-eslint/no-use-before-define': [
4948
'error',
50-
{ functions: false, classes: true, variables: true, typedefs: true }
49+
{
50+
functions: false,
51+
classes: true,
52+
variables: true,
53+
typedefs: true
54+
}
5155
],
5256
// Common abbreviations are known and readable
5357
'unicorn/prevent-abbreviations': 'off',
5458
// Airbnb prefers forEach
5559
'unicorn/no-array-for-each': 'off',
5660
// It's not accurate in the monorepo style
57-
'import/no-extraneous-dependencies': 'off'
61+
'import/no-extraneous-dependencies': 'off',
62+
// Storybook Template.bind returns any type
63+
'@typescript-eslint/no-unsafe-member-access': 'off'
5864
},
5965
overrides: [
6066
{

‎.github/workflows/docs.yml

+5-3
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,14 @@ jobs:
1818
node-version: 18
1919
- name: Install dependencies
2020
uses: bahmutov/npm-install@v1
21+
with:
22+
install-command: npm i --legacy-peer-deps
2123
- name: Build docs
2224
run: npm run build:documentation
2325
- uses: actions/upload-artifact@v3
2426
with:
25-
name: docz-dist
26-
path: .docz/dist
27+
name: storybook-dist
28+
path: storybook-static
2729

2830
deploy:
2931
if: github.ref == 'refs/heads/main'
@@ -32,7 +34,7 @@ jobs:
3234
steps:
3335
- uses: actions/download-artifact@v3
3436
with:
35-
name: docz-dist
37+
name: storybook-dist
3638
path: public
3739
- name: Deploy
3840
uses: peaceiris/actions-gh-pages@v3

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ coverage/
88
junit.xml
99

1010
# project files
11-
.docz/
11+
storybook-static/
1212
*.tgz
1313
.npmrc
1414
node_modules/

‎.prettierignore

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
package-lock.json
2-
*.mdx
1+
package-lock.json

‎.storybook/main.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { StorybookConfig } from '@storybook/react-webpack5';
2+
3+
const config: StorybookConfig = {
4+
stories: ['../**/*.storybook.mdx', '../src/**/*.stories.@(ts|tsx)'],
5+
addons: [
6+
'@storybook/addon-links',
7+
'@storybook/addon-essentials',
8+
'@storybook/addon-interactions',
9+
'@storybook/addon-viewport'
10+
],
11+
framework: {
12+
name: '@storybook/react-webpack5',
13+
options: {}
14+
},
15+
docs: {
16+
autodocs: true
17+
},
18+
staticDirs: ['../public']
19+
};
20+
21+
export default config;

‎.storybook/preview.ts

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { Preview } from '@storybook/react';
2+
3+
export const preview: Preview = {
4+
parameters: {
5+
actions: { argTypesRegex: '^on[A-Z].*' },
6+
viewMode: 'docs',
7+
controls: {
8+
expanded: true,
9+
matchers: {
10+
color: /(background|color)$/i,
11+
date: /Date$/
12+
}
13+
},
14+
backgrounds: {
15+
default: 'light',
16+
values: [
17+
{ name: 'light', value: '#FFFFFF' },
18+
{ name: 'dark', value: '#001E3E' }
19+
]
20+
},
21+
viewport: {
22+
viewports: {
23+
mobile: {
24+
name: 'Mobile',
25+
styles: {
26+
height: '568px',
27+
width: '320px'
28+
},
29+
type: 'mobile'
30+
},
31+
mobile_landscape: {
32+
name: 'Mobile landscape',
33+
styles: {
34+
height: '320px',
35+
width: '568px'
36+
},
37+
type: 'mobile'
38+
},
39+
tablet: {
40+
name: 'Tablet',
41+
styles: {
42+
height: '1112px',
43+
width: '834px'
44+
},
45+
type: 'tablet'
46+
},
47+
tablet_landscape: {
48+
name: 'Tablet landscape',
49+
styles: {
50+
height: '834px',
51+
width: '1112px'
52+
},
53+
type: 'tablet'
54+
},
55+
desktop: {
56+
name: 'Desktop',
57+
styles: {
58+
height: '1080px',
59+
width: '1920px'
60+
},
61+
type: 'desktop'
62+
}
63+
}
64+
},
65+
options: {
66+
storySort: {
67+
method: 'alphabetical',
68+
order: ['Get Started', 'Essentials', 'Components', 'Form Elements']
69+
}
70+
}
71+
}
72+
};
73+
74+
export default preview;

‎CONTRIBUTING.md

+6-5
Original file line numberDiff line numberDiff line change
@@ -104,17 +104,18 @@ If an unreviewed ticket reports a bug, try and reproduce it. If you can reproduc
104104

105105
Our documentation is great but it can always be improved. Did you find a typo? Do you think that something should be clarified? Go ahead and suggest a documentation patch!
106106

107-
We use [Docz](https://www.docz.site) to run our documentation site at [wave.free-now.com](https://wave.free-now.com/).
107+
We use [Storybook](https://storybook.js.org) to run our documentation site at [wave.free-now.com](https://wave.free-now.com/).
108108

109109
To add a new component to our documentation site:
110110

111-
1. Create a new file with the `.md` extension for your component in `/components/[component]/docs`.
112-
2. Add the markdown header for the page name, route and parent menu
113-
3. Include a brief description, examples as well as the the `Playground` and `Props` components of [Docz].
111+
1. Create a new file with the `.stories.tsx` prefix for your component in `/src/stories`.
112+
2. Include a brief description and examples. Props should be configurable via Storybook
113+
114+
To learn more how to add stories go to [Storybook docs](https://storybook.js.org/docs/react/writing-stories/introduction)
114115

115116
### Reporting pains and use cases
116117

117-
Speak outloud for us to understand your pains is valuable, challenge current approaches and help us to understand how to do better. Make sure to verify that the topic hasn't being touched yet on the issues poll otherwise open a new one and let's start the conversation
118+
Speak out loud for us to understand your pains is valuable, challenge current approaches and help us to understand how to do better. Make sure to verify that the topic hasn't being touched yet on the issues poll otherwise open a new one and let's start the conversation
118119

119120
### Take from the backlog
120121

‎docs/accessibility.mdx

-33
This file was deleted.

‎docs/accessibility.storybook.mdx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Meta } from '@storybook/blocks';
2+
3+
<Meta title="Accessibility" />
4+
5+
# Accessibility (a11y)
6+
7+
Accessible design not only helps users with disabilities; it provides better user experiences for everyone.
8+
9+
## Overview
10+
11+
Our goal is to provide a consistent user experience for all users, whether they’re navigating with a mouse/touchscreen, keyboard, or screen reader.
12+
13+
An accessible product should:
14+
15+
- Give all users the same quality of experience
16+
- Adapt to users and situations
17+
18+
Individually accessible elements and components are part of building accessible products, but the accessibility efforts need for manual testing. When designing new UIs, rely as much as possible on Wave existing components and follow accessible patterns. If you're creating a new component or pattern (one that doesn't exist in Wave), keep in mind accessibility practices before your implementation.
19+
20+
## Mission
21+
22+
The Wave Design System team wants as many people as possible to be able to use Wave powered products. For example, that means you should be able to:
23+
24+
- **zoom** in up to 300% without the text spilling off the screen
25+
- navigate most of the website using just a **keyboard**
26+
- listen to most of the website using a **screen reader**
27+
28+
## Aid development process
29+
30+
- How to [audit Web a11y Video](https://www.youtube.com/watch?v=cOmehxAU_4s)
31+
- Use the [a11y project checklist](https://www.a11yproject.com/checklist/) and aim for at least A level compliance
32+
- Use [axe dev tools](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) for accessibility testing. Check more at [deque Axe](https://www.deque.com/axe/devtools/) and learn [how to use it with this Video](https://www.youtube.com/watch?v=dyU9yrRJ5Eg)
33+
- Use [Lighthouse Chrome extension](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en) for accessibility score. Check more at [Web.dev a11y](https://web.dev/accessibility-scoring/)
34+
- Use [accessible queries](https://testing-library.com/docs/queries/about#priority) when writing tests. This assume you are using [testing-library](https://testing-library.com/)

‎docs/browser-support.mdx renamed to ‎docs/browser-support.storybook.mdx

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
---
2-
name: Browser support
3-
route: /browser-support
4-
cardHeadline: Browser support
5-
cardSubHeadline: Creating a consistent experience across browsers and devices.
6-
---
1+
import { Meta } from '@storybook/blocks';
2+
3+
<Meta title="Browser support" />
4+
5+
# Browser support
6+
7+
Creating a consistent experience across browsers and devices.
78

89
## Supported Devices
910

1011
The design system should be universally accessible. Components might not look perfect in all scenarios, but everything
1112
should still be accessible to the user.
1213

13-
**Currently, we are supporting the latest 2 versions of Chrome, Firefox, Safari, Edge and Internet Explorer 11.**
14+
**Currently, we are supporting the latest 2 versions of Chrome, Firefox, Safari, and Edge.**

‎docs/contributing.mdx renamed to ‎docs/contributing.storybook.mdx

+12-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
---
2-
name: Contributing
3-
route: /contributing
4-
cardHeadline: Contributing
5-
cardSubHeadline: Everyone is welcome to make contributions to the design system. To make sure that everyone can contribute, we have decided to write out a few steps that help you add your contributions.
6-
---
7-
8-
import workflowImageUrl from './contributing-new-pattern-workflow.svg'
1+
import { Meta } from '@storybook/blocks';
2+
import workflowImageUrl from './contributing-new-pattern-workflow.svg';
93
import { ImageModal } from './components/ImageModal';
104

5+
<Meta title="Contributing" />
6+
7+
# Contributing
8+
9+
Everyone is welcome to make contributions to the design system. To make sure that everyone can contribute, we have decided to write out a few steps that help you add your contributions.
10+
1111
## Reporting Bugs
1212

1313
The design system is used in many places. We have a hard time keeping our eyes on all of them to keep up with the issues
@@ -27,13 +27,13 @@ should be added to the design system.
2727
This is the submission process for new components, essentials and improvements to existing components:
2828

2929
1. [Create a Github issue](https://github.com/freenowtech/wave/issues/new) with the basic information and gather
30-
feedback from the maintainers and your fellow developers
30+
feedback from the maintainers and your fellow developers
3131
2. Align with the maintainers and other developers on the API of the component
3232
3. After the development is done, open a pull request, keeping the
33-
[development guidelines](../CONTRIBUTING.md) in mind. You will get feedback here, but we recommend check-ins with
34-
designers and developers during the development
33+
[development guidelines](../CONTRIBUTING.md) in mind. You will get feedback here, but we recommend check-ins with
34+
designers and developers during the development
3535
4. With the required approvals, you can merge your branch to main and it will be released by the maintainers in the
36-
next version of `@freenow/wave`
36+
next version of `@freenow/wave`
3737

3838
If you need any help during the process, don't hesitate to reach out to one of the maintainers.
3939

@@ -51,7 +51,6 @@ Descriptions, FAQs and explanations are all valuable for us! Documentation PRs a
5151

5252
All the documentation pages are Markdown-based. You don't need to know how to write code to contribute.
5353

54-
5554
## Other Contributions
5655

5756
Not all contributions have to be made in design, code and pull requests. You can for example help your team adopt the

0 commit comments

Comments
 (0)