refactor: setup histoire and workspaces

.github/workflows/build.yml

@@ -35,11 +35,8 @@ jobs:
       - name: Install Dependencies
         run: pnpm install
 
-      - name: Run Code Lint
-        run: pnpm lint:quiet
-
-      - name: Run Test
-        run: pnpm test
+      - name: Install Cypress
+        run: pnpm cypress install
 
   build:
     strategy:

.npmrc

@@ -1,4 +1,4 @@
-node-linker=hoisted
+shamefully-hoist=true
 engine-strict=true
 strict-peer-dependencies=false
 prefer-symlinked-executables=false

CONTRIBUTING.md

@@ -22,10 +22,19 @@ Before you being:
 - Read up on our [tech stack](https://medium.com/kodadot/the-tech-stack-at-kodadot-8a83880f8624) to get a better picture of the infrastructure we rely on
 - Familiarise yourself with our [contributor culture](https://medium.com/kodadot/contributor-culture-at-kodadot-665243d3d6a6) to better understand the dynamics by which we operate
 
+Recommended VSCode Extensions:
+
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+- [Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets)
+- [Monorepo Workspace](https://marketplace.visualstudio.com/items?itemName=folke.vscode-monorepo-workspace)
+
 ### Which issue should you pick?
 
 We are working primarily on two metrics.
 Issues have
+
 - priorities by labels [p1-p5](https://github.com/kodadot/nft-gallery/labels), **p1 means urgent**, **p5 in research mode**.
 - bounty labels for issues in the range of **$ - $$$$$**. Check [Rewards](REWARDS.md)
 
@@ -45,7 +54,6 @@ If there is no such issue, our **best advice is to choose issues reflecting your
 - Getting unassigned, dropping out of the queue, or passing on the option to pick the issue forbids you from further participation in this particular issue.
 - **ignoring issue**: sometimes, you might work on an issue that doesn't need supervision / assigning from a bot or help from the team. As an example, consider a small issue, quick fix, something without a bounty label, etc. In this case, you can comment `ignore` to the issue to prevent KodaBot from reacting to this issue. This feature is available only to collaborators on nft-gallery.
 
-
 ### Opening Pull Requests
 
 Whenever you open PR against our repository, our best recommendation is to finish it quickly, i.e., **being merged under 72h since opening/last discussion**, if it's not a complex issue requiring more profound attention of more members. Otherwise, you will be raising the chance to face many merge conflicts.
@@ -56,7 +64,6 @@ Whenever you open PR against our repository, our best recommendation is to finis
 - After that, we may have questions; check back on your PR to keep up with the conversation.
 - Did you have an issue, like a merge conflict? Check out our [git tutorial](https://lab.github.com/githubtraining/managing-merge-conflicts) on **how to resolve merge conflicts and other issues.**
 
-
 ### Your PR is merged!
 
 Congratulations! The whole Metaprime & KodaDot community thanks you. ✨
@@ -179,14 +186,14 @@ You can identify these kinds of problems by seeing similar-looking test reports:
 TL;DR: If you're touching components which include HTML tags such as `data-cy="submit"`, and the tests fail, make sure the tests still use the correct selector.
 
 **Example:**
+
 ```html
 <button
   id="main"
   class="btn btn-large"
   name="submission"
   role="button"
-  data-cy="submit"
->
+  data-cy="submit">
   Submit
 </button>
 ```

components/common/WalletModal.vue

@@ -252,7 +252,7 @@ export default class WalletModal extends mixins(UseApiMixin, ChainMixin) {
     .wallet-chooser {
       display: block;
 
-      ::v-deep .dropdown-menu {
+      :deep(.dropdown-menu) {
         width: 100%;
         padding-top: 0px;
         display: block !important;

components/landing/FeaturedArticles.vue

@@ -4,23 +4,11 @@
 
     <div class="columns">
       <div v-for="article in articles" :key="article.title" class="column">
-        <a
-          class="article"
+        <CardArticle
           :href="article.link"
-          target="_blank"
-          rel="noopener noreferrer">
-          <div
-            class="article-image"
-            :style="{ 'background-image': `url(${article.image})` }"></div>
-          <div class="article-info">
-            <p class="article-title">
-              {{ article.title }}
-            </p>
-            <p class="is-size-7">
-              {{ article.description }}
-            </p>
-          </div>
-        </a>
+          :description="article.description"
+          :image="article.image"
+          :title="article.title" />
       </div>
     </div>
 
@@ -35,6 +23,8 @@
 </template>
 
 <script lang="ts" setup>
+import { CardArticle } from '@kodadot1/brick'
+
 interface Articles {
   title: string
   description: string

libs/README.md

@@ -0,0 +1,32 @@
+# shared packages for nft-gallery
+
+## @kodadot1/brick
+
+Reusable components based on neobrutalism style. This package is using [histoire](https://histoire.dev/) to manage the components. Some keys how to manage our component with histoire:
+
+- [Stories](https://histoire.dev/guide/vue2/stories.html)
+- [State & Controls](https://histoire.dev/guide/vue2/controls.html)
+- [Events](https://histoire.dev/guide/vue2/events.html)
+
+Development:
+
+```sh
+# run this command from root folder
+pnpm -F brick story:dev
+
+# or, run this command from libs/ui folder
+pnpm story:dev
+```
+
+Export Component:
+
+```ts
+// make sure to export the component in index.ts
+export { default as TheComponent } from './components/TheComponent/TheComponent.vue'
+```
+
+Usage
+
+```ts
+import { TheComponent } from '@kodadot1/brick'
+```

libs/ui/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['plugin:vue/recommended'],
+  rules: {
+    // override/add rules settings here, such as:
+    // 'vue/no-unused-vars': 'error'
+  },
+}

libs/ui/histoire.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'histoire'
+import { HstVue } from '@histoire/plugin-vue2'
+import vue from '@vitejs/plugin-vue2'
+import { resolve } from 'path'
+
+export default defineConfig({
+  sandboxDarkClass: 'dark-mode',
+  setupFile: '/src/histoire.setup.ts',
+  plugins: [HstVue()],
+  vite: {
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, '../../'),
+        '~': resolve(__dirname, '../../'),
+      },
+    },
+  },
+})

libs/ui/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@kodadot1/brick",
+  "version": "1.0.0",
+  "description": "design system for neobrutalism style",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "scripts": {
+    "story:build": "histoire build",
+    "story:dev": "histoire dev",
+    "story:preview": "histoire preview"
+  },
+  "devDependencies": {
+    "@histoire/plugin-vue2": "^0.11.5",
+    "@vitejs/plugin-vue2": "^2.0.0",
+    "eslint": "^8.26.0",
+    "eslint-plugin-vue": "^8.7.1",
+    "histoire": "^0.11.5",
+    "vite": "^3.1.8",
+    "vue": "^2.7.13"
+  },
+  "dependencies": {
+    "bulma": "0.9.4"
+  }
+}

styles/components/_article.scss → libs/ui/src/components/CardArticle/CardArticle.scss

@@ -4,6 +4,7 @@
   display: block;
   height: 100%;
   box-shadow: 4px 4px 0 0 rgba(255, 255, 255, 0);
+  text-decoration: none;
   transition-duration: 0.4s;
   transition-property: box-shadow;
 

libs/ui/src/components/CardArticle/CardArticle.story.vue

@@ -0,0 +1,21 @@
+<template>
+  <Story>
+    <CardArticle
+      :description="description"
+      :href="href"
+      :image="image"
+      :title="title" />
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import CardArticle from './CardArticle.vue'
+
+const description =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam soluta explicabo reprehenderit? Vero fugit officiis enim temporibus nihil, quibusdam ea?'
+const href = 'https://kodadot.substack.com/p/the-story-behind-our-t-shirt-waifu'
+const image =
+  'https://substackcdn.com/image/fetch/w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F17ba0b12-64b6-4fe0-a0a9-38d722e51755_2848x3340.jpeg'
+const title =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, dolore!'
+</script>

libs/ui/src/components/CardArticle/CardArticle.vue

@@ -0,0 +1,28 @@
+<template>
+  <a class="article" :href="href" target="_blank" rel="noopener noreferrer">
+    <div
+      class="article-image"
+      :style="{ 'background-image': `url(${image})` }" />
+    <div class="article-info">
+      <p class="article-title">
+        {{ title }}
+      </p>
+      <p class="is-size-7">
+        {{ description }}
+      </p>
+    </div>
+  </a>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  href: string
+  image: string
+  title: string
+  description: string
+}>()
+</script>
+
+<style lang="scss" scoped>
+@import './CardArticle.scss';
+</style>

libs/ui/src/components/TheButton/TheButton.vue

@@ -0,0 +1,3 @@
+<template>
+  <button>this is sample button</button>
+</template>

libs/ui/src/histoire.scss

@@ -0,0 +1,9 @@
+// @import '@/styles/index.scss'; TODO: how to import this file?
+@import 'bulma/bulma.sass';
+
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+html,
+body {
+  font-family: 'Work Sans', sans-serif;
+}

libs/ui/src/histoire.setup.ts

@@ -0,0 +1 @@
+import './histoire.scss'

libs/ui/src/index.ts

@@ -0,0 +1,3 @@
+export { default as CardArticle } from './components/CardArticle/CardArticle.vue'
+
+export { default as SampleButton } from './components/TheButton/TheButton.vue'

libs/ui/src/scss/variable.scss

@@ -0,0 +1,11 @@
+$k-accent: #ff7ac3;
+$k-accentlight: #ffe5f3;
+$k-accentlight2: #fff0f8;
+$k-green: #04af00;
+$k-red: #ff5757;
+$k-grey: #999999;
+$k-blue: #6188e7;
+$shade: #cccccc;
+$dark-accent: #1a1718;
+$primary-shadow: 4px 4px black;
+$primary-shadow-dark: 4px 4px white;

package.json

@@ -66,6 +66,7 @@
     "@fortawesome/vue-fontawesome": "^2.0.8",
     "@google/model-viewer": "^1.12.1",
     "@keeex/qrcodejs-kx": "^1.0.2",
+    "@kodadot1/brick": "workspace:*",
     "@kodadot1/minimark": "^0.0.1-rc.10",
     "@kodadot1/sub-api": "0.1.1-alpha.3",
     "@kodadot1/vuex-options": "0.0.3-rc.10",