Skip to content

Commit a8f55c5

Browse files
author
Jonathan Adeline
committed
Storybook
1 parent 52ee064 commit a8f55c5

File tree

8 files changed

+7944
-148
lines changed

8 files changed

+7944
-148
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -138,3 +138,7 @@ field-diagrams/
138138
# actually a node module and so we ignore it.
139139
premium/web-frontend/package.json
140140
.local/
141+
142+
# Storybook
143+
web-frontend/.nuxt-storybook/
144+
web-frontend/storybook-static

‎docker-compose.dev.yml

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
version: "3.4"
22

33
services:
4-
54
db:
65
ports:
76
- "${HOST_PUBLISH_IP:-127.0.0.1}:${POSTGRES_PORT:-5432}:5432"
@@ -61,6 +60,7 @@ services:
6160
GID: $GID
6261
ports:
6362
- "${HOST_PUBLISH_IP:-127.0.0.1}:3000:3000"
63+
- "${HOST_PUBLISH_IP:-127.0.0.1}:6006:6006" # Storybook
6464
volumes:
6565
- ./web-frontend:/baserow/web-frontend
6666
# Override the above mounts for node_modules so we use the node_modules built
@@ -166,7 +166,7 @@ services:
166166
mailhog:
167167
image: mailhog/mailhog
168168
logging:
169-
driver: 'none' # disable saving logs
169+
driver: "none" # disable saving logs
170170
ports:
171171
- "8025:8025" # web ui
172172
networks:
@@ -187,7 +187,7 @@ services:
187187

188188
otel-collector:
189189
image: otel/opentelemetry-collector
190-
command: [ "--config=/etc/otel-collector-config.yaml" ]
190+
command: ["--config=/etc/otel-collector-config.yaml"]
191191
environment:
192192
HONEYCOMB_API_KEY:
193193
HONEYCOMB_METRICS_DATASET: baserow-dev-metrics

‎web-frontend/.storybook/main.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const { nuxifyStorybook } = require('../.nuxt-storybook/storybook/main.js')
2+
3+
module.exports = nuxifyStorybook({
4+
webpackFinal(config, { configDir }) {
5+
config.node = { fs: 'empty' }
6+
return config
7+
},
8+
features: { buildStoriesJson: true },
9+
stories: ['../stories/*.stories.mdx'],
10+
addons: [
11+
'storybook-addon-pseudo-states',
12+
'storybook-addon-designs',
13+
'@storybook/addon-coverage',
14+
],
15+
})

‎web-frontend/.storybook/preview.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from '~~/.nuxt-storybook/storybook/preview.js'

‎web-frontend/README.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
## Storybook ![image](https://avatars.githubusercontent.com/u/22632046?s=20&v=4)
2+
3+
Storybook is a tool that lets you browse and play with all the baserow reusable UI components.
4+
5+
### Start storybook
6+
7+
Run the following command in the web-frontend container
8+
`yarn run storybook`
9+
10+
Storybook is available at `http://localhost:6006`

‎web-frontend/package.json

+11-1
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,13 @@
2323
"test-core-coverage": "JEST_JUNIT_OUTPUT_DIR=../reports/ jest --config jest.config.js -i --verbose --ci --forceExit --collectCoverage --coverageDirectory=\"./reports/coverage/\"",
2424
"test-premium-coverage": "jest --config ../premium/web-frontend/jest.config.js -i --verbose --ci --forceExit --collectCoverage --coverageDirectory=\"./reports/coverage/\"",
2525
"test-enterprise-coverage": "jest --config ../enterprise/web-frontend/jest.config.js -i --verbose --ci --forceExit --collectCoverage --coverageDirectory=\"./reports/coverage/\"",
26-
"test-coverage": "yarn test-core-coverage && yarn test-premium-coverage && yarn test-enterprise-coverage"
26+
"test-coverage": "yarn test-core-coverage && yarn test-premium-coverage && yarn test-enterprise-coverage",
27+
"storybook": "nuxt storybook -s modules/core/static -p 6006",
28+
"test-storybook": "test-storybook"
2729
},
2830
"dependencies": {
2931
"@nuxtjs/i18n": "7.3.1",
32+
"@storybook/core-client": "6.5.9",
3033
"@tiptap/core": "^2.0.3",
3134
"@tiptap/extension-document": "^2.0.3",
3235
"@tiptap/extension-hard-break": "^2.0.3",
@@ -72,10 +75,14 @@
7275
"@babel/eslint-parser": "7.21.3",
7376
"@babel/preset-env": "^7.21.4",
7477
"@nuxtjs/eslint-config": "12.0.0",
78+
"@nuxtjs/storybook": "^4.3.2",
79+
"@storybook/addon-coverage": "^0.0.8",
80+
"@storybook/test-runner": "^0.11.0",
7581
"@vue/test-utils": "1.3.4",
7682
"@vue/vue2-jest": "29.2.3",
7783
"axios-mock-adapter": "1.21.4",
7884
"babel-jest": "29.5.0",
85+
"css-loader": "5.2.0",
7986
"eslint": "8.37.0",
8087
"eslint-config-prettier": "8.8.0",
8188
"eslint-config-standard": "17.0.0",
@@ -96,7 +103,10 @@
96103
"jsdom-global": "^3.0.2",
97104
"node-mocks-http": "1.12.2",
98105
"nodemon": "2.0.22",
106+
"postcss": "8",
99107
"prettier": "2.8.7",
108+
"storybook-addon-designs": "^6.3.1",
109+
"storybook-addon-pseudo-states": "1.15.5",
100110
"stylelint": "^13.13.1",
101111
"stylelint-config-prettier": "^9.0.5",
102112
"stylelint-config-standard": "^22.0.0",

‎web-frontend/stories/Tabs.stories.mdx

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
2+
import { config, withDesign } from 'storybook-addon-designs'
3+
import { action } from '@storybook/addon-actions'
4+
import { useArgs } from '@storybook/client-api'
5+
6+
import Tabs from '@baserow/modules/core/components/Tabs'
7+
import Tab from '@baserow/modules/core/components/Tab'
8+
9+
<Meta
10+
title="Baserow/Tabs"
11+
component={Tabs}
12+
parameters={{
13+
backgrounds: {
14+
default: 'white',
15+
values: [
16+
{ name: 'white', value: '#ffffff' },
17+
{ name: 'light', value: '#eeeeee' },
18+
{ name: 'dark', value: '#222222' },
19+
],
20+
},
21+
}}
22+
decorators={[withDesign]}
23+
argTypes={{
24+
default: {
25+
defaultValue: 'Label',
26+
},
27+
}}
28+
/>
29+
30+
# Tabs
31+
32+
export const Template = (args, { argTypes, updateArgs }) => ({
33+
methods: {
34+
action,
35+
},
36+
components: { Tabs, Tab },
37+
props: Object.keys(argTypes),
38+
template: `
39+
<Tabs v-bind="$props">
40+
<Tab title="Tab 1">
41+
This is a tab content
42+
</Tab>
43+
<Tab title="Tab 2">
44+
This is another tab content
45+
</Tab>
46+
<Tab title="Tab 3">
47+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
48+
</Tab>
49+
<Tab title="Tab 4">
50+
Lorem ipsum dolor sit amet, consectetur adipiscing elit
51+
</Tab>
52+
</Tabs>`,
53+
})
54+
55+
export const designConfig = {
56+
type: 'figma',
57+
url: 'https://www.figma.com/file/W7R2rQW7ohsZMeHRfEcPFW/Design-Library?mode=dev',
58+
}
59+
60+
<Canvas>
61+
<Story
62+
name="Default"
63+
parameters={{
64+
design: config(designConfig),
65+
}}
66+
>
67+
{Template.bind({})}
68+
</Story>
69+
</Canvas>
70+
71+
## Example
72+
73+
```javascript
74+
<Tabs></Tabs>
75+
```
76+
77+
## Props
78+
79+
<Props of={Tabs} />

0 commit comments

Comments
 (0)