Storybook

.gitignore

@@ -138,3 +138,7 @@ field-diagrams/
 # actually a node module and so we ignore it.
 premium/web-frontend/package.json
 .local/
+
+# Storybook
+web-frontend/.nuxt-storybook/
+web-frontend/storybook-static

docker-compose.dev.yml

@@ -1,7 +1,6 @@
 version: "3.4"
 
 services:
-
   db:
     ports:
       - "${HOST_PUBLISH_IP:-127.0.0.1}:${POSTGRES_PORT:-5432}:5432"
@@ -61,6 +60,7 @@ services:
         GID: $GID
     ports:
       - "${HOST_PUBLISH_IP:-127.0.0.1}:3000:3000"
+      - "${HOST_PUBLISH_IP:-127.0.0.1}:6006:6006" # Storybook
     volumes:
       - ./web-frontend:/baserow/web-frontend
       # Override the above mounts for node_modules so we use the node_modules built
@@ -166,7 +166,7 @@ services:
   mailhog:
     image: mailhog/mailhog
     logging:
-      driver: 'none' # disable saving logs
+      driver: "none" # disable saving logs
     ports:
       - "8025:8025" # web ui
     networks:
@@ -187,7 +187,7 @@ services:
 
   otel-collector:
     image: otel/opentelemetry-collector
-    command: [ "--config=/etc/otel-collector-config.yaml" ]
+    command: ["--config=/etc/otel-collector-config.yaml"]
     environment:
       HONEYCOMB_API_KEY:
       HONEYCOMB_METRICS_DATASET: baserow-dev-metrics

web-frontend/.storybook/main.js

@@ -0,0 +1,15 @@
+const { nuxifyStorybook } = require('../.nuxt-storybook/storybook/main.js')
+
+module.exports = nuxifyStorybook({
+  webpackFinal(config, { configDir }) {
+    config.node = { fs: 'empty' }
+    return config
+  },
+  features: { buildStoriesJson: true },
+  stories: ['../stories/*.stories.mdx'],
+  addons: [
+    'storybook-addon-pseudo-states',
+    'storybook-addon-designs',
+    '@storybook/addon-coverage',
+  ],
+})

web-frontend/.storybook/preview.js

@@ -0,0 +1 @@
+export * from '~~/.nuxt-storybook/storybook/preview.js'

web-frontend/README.md

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

web-frontend/package.json

@@ -23,10 +23,13 @@
     "test-core-coverage": "JEST_JUNIT_OUTPUT_DIR=../reports/ jest --config jest.config.js -i --verbose --ci --forceExit --collectCoverage --coverageDirectory=\"./reports/coverage/\"",
     "test-premium-coverage": "jest --config ../premium/web-frontend/jest.config.js -i --verbose --ci --forceExit --collectCoverage --coverageDirectory=\"./reports/coverage/\"",
     "test-enterprise-coverage": "jest --config ../enterprise/web-frontend/jest.config.js -i --verbose --ci --forceExit --collectCoverage --coverageDirectory=\"./reports/coverage/\"",
-    "test-coverage": "yarn test-core-coverage && yarn test-premium-coverage && yarn test-enterprise-coverage"
+    "test-coverage": "yarn test-core-coverage && yarn test-premium-coverage && yarn test-enterprise-coverage",
+    "storybook": "nuxt storybook -s modules/core/static -p 6006",
+    "test-storybook": "test-storybook"
   },
   "dependencies": {
     "@nuxtjs/i18n": "7.3.1",
+    "@storybook/core-client": "6.5.9",
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-document": "^2.0.3",
     "@tiptap/extension-hard-break": "^2.0.3",
@@ -72,10 +75,14 @@
     "@babel/eslint-parser": "7.21.3",
     "@babel/preset-env": "^7.21.4",
     "@nuxtjs/eslint-config": "12.0.0",
+    "@nuxtjs/storybook": "^4.3.2",
+    "@storybook/addon-coverage": "^0.0.8",
+    "@storybook/test-runner": "^0.11.0",
     "@vue/test-utils": "1.3.4",
     "@vue/vue2-jest": "29.2.3",
     "axios-mock-adapter": "1.21.4",
     "babel-jest": "29.5.0",
+    "css-loader": "5.2.0",
     "eslint": "8.37.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-config-standard": "17.0.0",
@@ -96,7 +103,10 @@
     "jsdom-global": "^3.0.2",
     "node-mocks-http": "1.12.2",
     "nodemon": "2.0.22",
+    "postcss": "8",
     "prettier": "2.8.7",
+    "storybook-addon-designs": "^6.3.1",
+    "storybook-addon-pseudo-states": "1.15.5",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard": "^22.0.0",

web-frontend/stories/Tabs.stories.mdx

@@ -0,0 +1,79 @@
+import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
+import { config, withDesign } from 'storybook-addon-designs'
+import { action } from '@storybook/addon-actions'
+import { useArgs } from '@storybook/client-api'
+
+import Tabs from '@baserow/modules/core/components/Tabs'
+import Tab from '@baserow/modules/core/components/Tab'
+
+<Meta
+    title="Baserow/Tabs"
+    component={Tabs}
+    parameters={{
+        backgrounds: {
+            default: 'white',
+            values: [
+                { name: 'white', value: '#ffffff' },
+                { name: 'light', value: '#eeeeee' },
+                { name: 'dark', value: '#222222' },
+            ],
+        },
+    }}
+    decorators={[withDesign]}
+    argTypes={{
+        default: {
+            defaultValue: 'Label',
+        },
+    }}
+/>
+
+# Tabs
+
+export const Template = (args, { argTypes, updateArgs }) => ({
+    methods: {
+        action,
+    },
+    components: { Tabs, Tab },
+    props: Object.keys(argTypes),
+    template: `
+    <Tabs v-bind="$props">
+        <Tab title="Tab 1">
+            This is a tab content
+        </Tab>
+        <Tab title="Tab 2">
+            This is another tab content
+        </Tab>
+         <Tab title="Tab 3">
+           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
+        </Tab>
+        <Tab title="Tab 4">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </Tab>
+    </Tabs>`,
+})
+
+export const designConfig = {
+    type: 'figma',
+    url: 'https://www.figma.com/file/W7R2rQW7ohsZMeHRfEcPFW/Design-Library?mode=dev',
+}
+
+<Canvas>
+    <Story
+        name="Default"
+        parameters={{
+            design: config(designConfig),
+        }}
+    >
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+## Example
+
+```javascript
+<Tabs></Tabs>
+```
+
+## Props
+
+<Props of={Tabs} />