Feat/storybook integration (#3623)

* feat: initialize storybook

* feat: move all component to storybook

* feat: remove vue-book

* feat: add storybook logo and link to docs

---------

Co-authored-by: Yauheni Prakopchyk <yauheni.prakopchyk@epicmax.co>

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 dist
+storybook-static
 .nuxt
 packages/create-vuestic/vuestic-app
 

package.json

@@ -10,13 +10,13 @@
   },
   "private": true,
   "scripts": {
-    "serve": "yarn workspace vuestic-ui serve",
-    "serve:book": "yarn workspace vuestic-ui serve",
+    "serve:storybook": "yarn workspace vuestic-ui serve:storybook",
     "start:docs:ci": "yarn workspace docs start:ci",
     "serve:production": "yarn workspace vuestic-ui serve:production",
     "lint": "yarn workspace vuestic-ui lint",
     "build": "yarn workspace vuestic-ui build",
-    "build:book": "yarn workspace vuestic-ui build:book",
+    "build:storybook": "yarn workspace vuestic-ui build:storybook",
+    "start:storybook": "yarn workspace vuestic-ui start:storybook",
     "build:types": "yarn workspace vuestic-ui build:types",
     "test:unit": "yarn workspace vuestic-ui test:unit",
     "test:bundlers": "yarn workspace bundler-test test",

packages/docs/nuxt.config.ts

@@ -149,6 +149,12 @@ export default defineNuxtConfig({
     }
   },
 
+  runtimeConfig: {
+    public: {
+      VITE_STORYBOOK_HOSTNAME: process.env.STORYBOOK_HOSTNAME,
+    },
+  },
+
   sitemap: {
     hostname: process.env.HOSTNAME,
   }

packages/docs/page-config/contribution/guide/index.ts

@@ -66,7 +66,7 @@ export default definePageConfig({
       "We use [yarn](https://yarnpkg.com/lang/en/)[[target=_blank]] for package management.",
       "Be proactive. If you think something is wrong - create an issue or discuss.",
       "Recommended tools: [GitKraken](https://www.gitkraken.com/)[[target=_blank]], [WebStorm](https://www.jetbrains.com/webstorm/)[[target=_blank]], [ShareX](https://getsharex.com/)[[target=_blank]].",
-      "If you work on UI components - work in the book environment (`yarn serve:book`). We want to keep global stuff out of components."
+      `If you work on UI components - work in [storybook](${process.env.VITE_STORYBOOK_HOSTNAME})[[target=_blank]] environment (\`yarn serve:book\`). We want to keep global stuff out of components.`
     ]),
 
     block.subtitle("Credits"),

packages/ui/.npmignore

@@ -8,7 +8,6 @@ yarn-error.log
 babel.config.js
 jest.config.js
 postcss.config.js
-vue.config.js
 tsconfig.json
 build/
 rollup.config.js

packages/ui/.storybook/assets/icons/icons.scss

@@ -0,0 +1,16 @@
+@import "icon-fonts/icon-fonts";
+
+$ionicons-font-path: "ionicons/dist/fonts";
+
+@import "ionicons/dist/scss/ionicons.scss";
+
+// font-awesome 5
+$fa-font-path: "@fortawesome/fontawesome-free/webfonts";
+
+@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "@fortawesome/fontawesome-free/scss/solid.scss";
+@import "@fortawesome/fontawesome-free/scss/regular.scss";
+
+// material icons
+@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+@import url(https://fonts.googleapis.com/icon?family=Material+Icons+Outlined);

packages/ui/.storybook/components/VbCard.vue

@@ -0,0 +1,200 @@
+<template>
+  <div
+    class="VbCard"
+    :class="computedClass"
+    :style="computedStyle"
+  >
+    <template v-if="title || refresh">
+      <div class="VbCard__title">
+        <div class="VbCard__title__text" v-if="title">
+          {{ title }}
+        </div>
+        <div class="VbCard__title__spacer"/>
+        <div
+          v-if="focus"
+          class="VbCard__title__icon"
+          title="This card is focused. Not focused cards won't be displayed"
+          style="font-weight: 700; color: white; background-color: #d8365d; border-radius: 16px; width: 16px;"
+        >
+          <span>F</span>
+        </div>
+        <div
+          v-if="refresh"
+          class="VbCard__title__icon"
+          style="cursor: pointer;"
+          @click="doRefresh()"
+          title="Refresh"
+        >
+          🔄
+        </div>
+      </div>
+
+      <div class="VbCard__separator"/>
+    </template>
+
+    <slot
+      :state="stateComputed"
+      v-if="show"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+// @deprecated
+export default defineComponent({
+  name: 'VbCard',
+  props:{
+    focus: {type: Boolean}, // TODO Implement me (not implemented for vue 3 version)
+    dashed: {type: Boolean},
+    title: {type: String},
+    refresh: {type: Boolean},
+    dark: {type: Boolean},
+    width: {type: String},
+    height: {type: String},
+    color: {type: String},
+    state: {type: Object as Record<string, any>},
+    error: {type: Boolean},
+  },
+  data () {
+    return {
+      show: true,
+      cardStyleTemp: {} as {} | { width: string | null, height: string | null }
+    }
+  },
+  computed: {
+    stateComputed () {
+      // return reactive(this.state)
+      return this.state
+    },
+    computedStyle () {
+      if (this.cardStyleTemp) {
+        return {
+          ...this.cardStyleTemp,
+          backgroundColor: this.color,
+        }
+      }
+
+      return {
+        height: this.height,
+        width: this.width,
+        backgroundColor: this.color,
+      }
+    },
+    computedClass () {
+      return {
+        'VbCard--no-padding': this.noPadding,
+        'VbCard--dashed': this.dashed,
+        'VbCard--dark': this.dark,
+        'VbCard--error': this.error,
+      }
+    }
+  },
+  methods: {
+    doRefresh () {
+      const { width, height } = window.getComputedStyle(this.$el)
+      this.cardStyleTemp = { width, height }
+      this.show = false
+
+      setTimeout(() => {
+        this.cardStyleTemp = {}
+        this.show = true
+      })
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+
+$card-content-padding: 20px;
+
+@mixin flexCenter() {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.VbCard {
+  margin: 5px;
+  background-color: white;
+  padding: $card-content-padding;
+
+  &--error {
+    outline: 2px solid red;
+  }
+
+  &--dark {
+    background-color: #252525;
+
+    .VbCard__title {
+      color: #ededed;
+      background-color: #252525;
+    }
+
+    .VbCard__separator {
+      background-color: #9d9d9d;
+    }
+
+    &.VbCard--dashed {
+      border: dashed #d0daee 1px;
+    }
+  }
+
+  &__title {
+    background-color: white;
+    display: flex;
+    margin: (-$card-content-padding) (-$card-content-padding) 0;
+    padding: 3px 5px;
+    align-items: center;
+
+    @at-root {
+      .VbCard.VbCard--no-padding & {
+        margin: 0;
+      }
+    }
+
+    &__text {
+      font-weight: 700;
+    }
+
+    &__spacer {
+      flex: 1 0;
+    }
+
+    &__icon {
+      margin-left: 4px;
+      font-size: 14px;
+      padding: 2px;
+      user-select: none;
+
+      @include flexCenter();
+
+      &:hover {
+        color: gray;
+      }
+    }
+  }
+
+  &__separator {
+    height: 1px;
+    background-color: rgba(0, 0, 0, 0.2);
+    margin: 0 (-$card-content-padding) $card-content-padding;
+
+    @at-root {
+      .VbCard.VbCard--no-padding & {
+        margin: 0;
+      }
+    }
+  }
+
+  &--no-padding {
+    padding: 0;
+  }
+
+  &--dashed {
+    border: dashed #7c8391 1px;
+  }
+}
+</style>

packages/ui/.storybook/components/VbDemo.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="VbDemo"
+    :class="computedClass"
+  >
+    <slot/>
+  </div>
+</template>
+
+<script lang="ts">
+// @deprecated
+export default {
+  name: 'VbDemo',
+  computed: {
+    computedClass () {
+      return {}
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.VbDemo {
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  align-content: flex-start;
+  background-color: #eeeeee;
+}
+</style>

packages/ui/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook/vue3-vite";
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.ts"],
+  staticDirs: ['public'],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    'storybook-dark-mode',
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;