feat: new design

.circleci/config.yml

@@ -69,15 +69,18 @@ jobs:
     resource_class: large
     docker:
       - image: cimg/node:18.19
+        environment:
+          # This is required to run the tests
+          NODE_OPTIONS: --max_old_space_size=4096
       - image: docker.elastic.co/elasticsearch/elasticsearch:7.9.1
         environment:
-          - "ES_JAVA_OPTS=-Xms256m -Xmx256m"
-          - "discovery.type=single-node"
-          - "cluster.name=datashare"
+          ES_JAVA_OPTS: -Xms256m -Xmx256m
+          discovery.type: single-node
+          cluster.name: datashare
           # CORS
-          - "http.cors.enabled=true"
-          - "http.cors.allow-origin=*"
-          - "http.cors.allow-methods=OPTIONS, HEAD, GET, POST, PUT, DELETE"
+          http.cors.enabled: "true"
+          http.cors.allow-origin: "*"
+          http.cors.allow-methods: OPTIONS, HEAD, GET, POST, PUT, DELETE
         name: elasticsearch
     working_directory: ~/datashare-client
     steps:

.github/workflows/main.yml

@@ -0,0 +1,41 @@
+# Workflow name
+name: Build and Publish Storybook to GitHub Pages
+
+on:
+  push:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+
+  publish:
+    if: github.ref == 'refs/heads/feat/new-design'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+
+      - name: Install Node dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Build storybook artifacts
+        run: yarn build:storybook
+
+      - name: Upload storybook artifacts
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: storybook-static
+
+      - name: Deploy artifact to Github Pages
+        uses: actions/deploy-pages@v4
+
+

.gitignore

@@ -25,3 +25,5 @@ package-lock.json
 *.sln
 *.sw*
 *.iml
+
+*storybook.log

.storybook/decorators/murmur.js

@@ -0,0 +1,19 @@
+import Murmur from '@icij/murmur-next'
+import { getCurrentInstance } from 'vue'
+
+export const withMurmur = (config = {},
+                            useConfig = true,
+                            useI18n = false,
+                            useBootstrap = false,
+                            registerComponents = true) => {
+  return () => ({
+    setup () {
+        const { app } = getCurrentInstance()?.appContext
+        Murmur.config.merge(config)
+        app.use(Murmur, { useConfig, useI18n, useBootstrap, registerComponents })
+    },
+    template: '<story />'
+  })
+}
+
+export default { withMurmur }

.storybook/decorators/vuex.js

@@ -0,0 +1,30 @@
+import { createStore } from 'vuex'
+import { getCurrentInstance } from 'vue'
+import {identity} from "lodash";
+
+export const withVuex = (config = {}) => {
+  return () => ({
+    setup () {
+        const { app } = getCurrentInstance()?.appContext
+        app.use(createStore(config))
+    },
+    template: '<story />'
+  })
+}
+
+
+export const storeDecoratorPipelineChainByCategory = withVuex({
+  modules: {
+    pipelines: {
+      namespaced: true,
+      getters: {
+        applyPipelineChainByCategory() {
+          return () => {
+            return identity
+          }
+        }
+      }
+    }
+  }
+})
+export default { withVuex, storeDecoratorPipelineChainByCategory }

.storybook/main.js

@@ -0,0 +1,21 @@
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+const config = {
+  core: {
+    disableTelemetry: true
+  },
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    '@storybook/addon-themes',
+    'storybook-addon-vue-slots',
+    "storybook-addon-pseudo-states"
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+}
+
+export default config

.storybook/manager.js

@@ -0,0 +1,4 @@
+import { addons } from '@storybook/manager-api'
+import theme from './theme'
+
+addons.setConfig({ navSize: 300, theme })

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link
+  href="https://fonts.googleapis.com/css?family=Inter:400,700,800|Merriweather:300,400,400italic&display=swap"
+  rel="stylesheet">

.storybook/preview.js

@@ -0,0 +1,137 @@
+/** @type { import('@storybook/vue3').Preview } */
+import { setup } from '@storybook/vue3'
+import { useArgs } from '@storybook/preview-api'
+import { styled } from '@storybook/theming'
+import { withThemeByDataAttribute } from '@storybook/addon-themes'
+import { createBootstrap } from 'bootstrap-vue-next'
+import { createI18n } from 'vue-i18n'
+import { createVueWait } from 'vue-wait'
+import Vue3Toastify from 'vue3-toastify'
+
+import messages from '@/lang/en'
+import settings from '@/utils/settings'
+
+import './preview.scss'
+
+setup((app) => {
+  const vueWait = createVueWait({ useVuex: false })
+  const bootstrap = createBootstrap({
+    directives: true,
+    components: {
+      BPopover: {
+        offset: '16px'
+      },
+      BTooltip: {
+        offset: '6px',
+        delay: {
+          show: 500,
+          hide: 0
+        }
+      }
+    }
+  })
+  const i18n = createI18n({
+    warnHtmlInMessage: 'off',
+    warnHtmlMessage: 'off',
+    globalInjection: true,
+    allowComposition: true,
+    legacy: true,
+    locale: settings.defaultLocale,
+    fallbackLocale: settings.defaultLocale,
+    messages: {
+      [settings.defaultLocale]: messages
+    }
+  })
+  app.use(vueWait)
+  app.use(bootstrap)
+  app.use(i18n)
+  app.use(Vue3Toastify)
+})
+
+const decorators = [
+  withThemeByDataAttribute({
+    themes: {
+      light: 'light',
+      dark: 'dark'
+    },
+    defaultTheme: 'light',
+    attributeName: 'data-bs-theme'
+  }),
+  /**
+   * Support `v-model` for vue
+   * @see {@link https://craigbaldwin.com/blog/updating-args-storybook-vue/}
+   */
+  (story, context) => {
+    const [args, updateArgs] = useArgs()
+    if ('modelValue' in args) {
+      const update = args['onUpdate:model-value'] || args['onUpdate:modelValue']
+      args['onUpdate:model-value'] = undefined
+      args['onUpdate:modelValue'] = (...vals) => {
+        update?.(...vals)
+        /**
+         * Arg with `undefined` will be deleted by `deleteUndefined()`, then loss of reactive
+         * @see {@link https://github.com/storybookjs/storybook/blob/next/code/lib/preview-api/src/modules/store/ArgsStore.ts#L63}
+         */
+        const modelValue = vals[0] === undefined ? null : vals[0]
+        updateArgs({ modelValue })
+      }
+    }
+    return story({ ...context, updateArgs })
+  }
+]
+
+
+const style = {
+  fontFamily: 'var(--bs-font-sans-serif) !important',
+  fontSize: '1rem',
+}
+
+const headingsStyle = {
+  fontFamily: 'var(--bs-font-sans-serif) !important',
+  fontWeight: 'var(--bs-headings-weight-bold)'
+}
+
+const h1Style = {
+  ...headingsStyle,
+  fontSize: '2.5rem'
+}
+
+const aStyle = {
+  ...style,
+  color: 'rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));',
+  '&:hover': {
+    textDecoration: 'underline'
+  }
+}
+
+const preview = {
+  decorators,
+  parameters: {
+    docs: {
+      components: {
+        h1: styled.h1(() => h1Style),
+        h2: styled.h2(() => headingsStyle),
+        h3: styled.h3(() => headingsStyle),
+        h4: styled.h4(() => headingsStyle),
+        h5: styled.h5(() => headingsStyle),
+        h6: styled.h6(() => headingsStyle),
+        a: styled.a(() => aStyle),
+        section: styled.section(() => style),
+        p: styled.p(() => style),
+        li: styled.li(() => style),
+        div: styled.div(() => style),
+        pre: styled.div(() => ({ })),
+        span: styled.span(() => style),
+        input: styled.input(() => style)
+      },
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview

.storybook/preview.scss

@@ -0,0 +1,65 @@
+@import '@/main.scss';
+
+.bg-striped {
+  background: repeating-linear-gradient(
+    45deg,
+    #dfdddd,
+    #dfdddd 10px,
+    #cfcccc 10px,
+    #cfcccc 20px
+  );
+  width: 500px;
+}
+
+@include color-mode(dark) {
+  .bg-striped {
+    background: repeating-linear-gradient(
+      45deg,
+      #222,
+      #333 10px,
+      #444 10px,
+      #444 20px
+    );
+  }
+}
+
+h1 {
+  font-family: var(--bs-font-sans-serif) !important;
+  font-weight: var(--bs-body-font-weight);
+  font-size: 2.5rem;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--bs-font-sans-serif);
+  font-weight: var(--bs-body-font-weight);
+}
+
+pre.prismjs {
+  padding: 0.75rem;
+  font-size: 0.90rem;
+}
+
+.docs-story {
+  background: var(--bs-body-bg)
+}
+
+.btn.pseudo-focus {
+  box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow);
+}
+
+.btn.pseudo-hover {
+  color: var(--bs-btn-hover-color);
+  background-color: var(--bs-btn-hover-bg);
+  border-color: var(--bs-btn-hover-border-color);
+}
+
+.btn.pseudo-active {
+  color: var(--bs-btn-active-color);
+  background-color: var(--bs-btn-active-bg);
+  border-color: var(--bs-btn-active-border-color);
+  box-shadow: var(--bs-btn-active-shadow);
+}