chore: Add storybook components no history (#2021)

Co-authored-by: Sergey Roytman <sergeyro@monday.com>
Co-authored-by: ci <deploy@monday.com>
Co-authored-by: Tal Koren <talkor@gmail.com>
Co-authored-by: Kritik Jiyaviya <kritikjiyaviya07@gmail.com>
Co-authored-by: Balaji K <balaji6292@gmail.com>
Co-authored-by: Aldrin <53973174+Dhoni77@users.noreply.github.com>
Co-authored-by: Ryan Biondo <biondoryan.dev@gmail.com>
Co-authored-by: Aaron Pedwell <pedaar@aol.com>

.github/PULL_REQUEST_TEMPLATE.md

@@ -16,14 +16,14 @@ Please go over the checklist and make sure all conditions are met.
 - [ ] Styles are added to `NewComponent.modules.scss` file inside the `NewComponent` folder.
 - [ ] Component uses CSS Modules.
 - [ ] Design is compatible with [Monday Design System](https://design.monday.com/).
-- [ ] Styles are defined using [monday-ui-style](https://github.com/mondaycom/monday-ui-react-core/tree/monorepo-style/packages/monday-ui-style) tokens
+- [ ] Styles are defined using [monday-ui-style](https://github.com/mondaycom/monday-ui-react-core/tree/master/packages/style) tokens
 - [ ] Displays correctly in all the themes
 
 #### Storybook
 
 - [ ] Stories were added to `/src/components/NewComponent/__stories__/NewComponent.mdx` file.
 - [ ] Stories include all flows of using the component.
-- [ ] Stories implemented using [vibe-storybook-components](https://github.com/mondaycom/vibe-storybook-components) components and tokens.
+- [ ] Stories implemented using [vibe-storybook-components](https://github.com/mondaycom/monday-ui-react-core/tree/master/packages/storybook-blocks) components and tokens.
 
 #### Tests
 

.github/workflows/publish-storybook.yml

@@ -22,13 +22,24 @@ jobs:
         run: |
           yarn lerna run build --include-dependencies
           yarn lerna run --scope monday-ui-react-core build-storybook
+          yarn lerna run --scope vibe-storybook-components build-storybook
           cd packages/core/static_storybook
           echo "style.monday.com" > ./CNAME
         env:
           NODE_AUTH_TOKEN: ${{ secrets.npm_token }}
+      - name: Push storybook-blocks Storybook to Github Pages
+        if: success()
+        uses: JamesIves/github-pages-deploy-action@v4.5.0
+        with:
+          folder: packages/storybook-blocks/storybook-static
+          branch: gh-pages
+          target-folder: storybook-blocks
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Push core Storybook to Github Pages
         uses: JamesIves/github-pages-deploy-action@v4.5.0
         with:
+          clean-exclude: storybook-blocks/*
           folder: packages/core/static_storybook
           branch: gh-pages
         env:

packages/core/package.json

@@ -121,7 +121,7 @@
     "react-window": "^1.8.7",
     "react-windowed-select": "^2.0.4",
     "style-inject": "^0.3.0",
-    "vibe-storybook-components": "^0.16.1"
+    "vibe-storybook-components": "0.17.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",

packages/storybook-blocks/.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

packages/storybook-blocks/.eslintrc.js

@@ -0,0 +1,98 @@
+const commonRules = {
+  'react/display-name': 'off',
+  'object-curly-newline': 'off',
+  'no-debugger': 'error',
+  'global-require': 'off',
+  'no-unused-expressions': 'off',
+  'react/forbid-foreign-prop-types': 'off',
+  'no-console': 'off',
+  'consistent-return': 'off',
+  'no-use-before-define': 'off',
+  'one-var': 'off',
+  'default-case': 'off',
+  'func-names': 'off',
+  'react/sort-comp': 'off',
+  'class-methods-use-this': 'off',
+  radix: 'off',
+  'no-underscore-dangle': 'off',
+  'import/prefer-default-export': 'off',
+  'no-plusplus': 'off',
+  'react/react-in-jsx-scope': 0,
+  'react/no-danger': 'error',
+  'react/jsx-one-expression-per-line': 'off',
+  'react/prop-types': 0,
+  'react/forbid-prop-types': 'off',
+  'react/function-component-definition': 'off',
+  'default-param-last': 'off',
+  'react/require-default-props': ['error'],
+  'react/jsx-props-no-spreading': 0,
+  'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+  'react/default-props-match-prop-types': 'error',
+  'react/jsx-boolean-value': 'off',
+  'arrow-parens': 'off',
+  'implicit-arrow-linebreak': 'off',
+  'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+};
+const commonPlugins = ['import', 'react', 'json', 'markdown', 'jest'];
+const commonExtends = ['plugin:react/recommended', 'plugin:prettier/recommended', 'plugin:storybook/recommended'];
+
+module.exports = {
+  overrides: [
+    {
+      files: ['*.jest.js', 'jest.setup.js', 'jest.init.js'],
+      env: {
+        jest: true,
+        'jest/globals': true,
+      },
+    },
+    {
+      files: ['.eslintrc.js', 'scripts/**/*.js', '__mocks__/**/*.js', 'rollup.config.js'],
+      env: {
+        node: true,
+      },
+    },
+    {
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      extends: [
+        ...commonExtends,
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      plugins: [...commonPlugins, '@typescript-eslint'],
+      rules: {
+        ...commonRules,
+        '@typescript-eslint/ban-ts-comment': ['warn'],
+        'no-unused-vars': 'off',
+        'react/require-default-props': 'off',
+        '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+        '@typescript-eslint/no-empty-function': 'off',
+      },
+    },
+  ],
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  settings: {
+    jest: {
+      version: 27,
+    },
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: [...commonExtends, 'eslint:recommended'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 13,
+    sourceType: 'module',
+  },
+  plugins: [...commonPlugins],
+  rules: {
+    ...commonRules,
+    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+  },
+};

packages/storybook-blocks/.nvmrc

@@ -0,0 +1 @@
+18.12.1

packages/storybook-blocks/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}

packages/storybook-blocks/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.tsx', '../storybook/**/*.stories.mdx'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-themes',
+    '@storybook/preset-scss',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+  staticDirs: ['../public'],
+};
+export default config;

packages/storybook-blocks/.storybook/manager-head.html

@@ -0,0 +1,40 @@
+<link href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500&display=swap" rel="stylesheet" />
+<meta property="og:description" content="Vibe storybook components by monday.com" />
+<meta property="og:title" content="Vibe Storybook Components" />
+<meta property="og:image" content="https://irp.cdn-website.com/33477119/dms3rep/multi/og-banner.jpeg" />
+<title>Vibe Storybook Components</title>
+<style>
+  body {
+    font-family: 'Roboto', sans-serif;
+    background: #f0f3ff !important;
+    font-size: 14px;
+  }
+
+  #storybook-explorer-menu svg {
+    color: #5034ff;
+  }
+  #storybook-explorer-menu button[aria-expanded='true'],
+  #storybook-explorer-menu button:focus,
+  #storybook-explorer-menu a[data-selected]:hover {
+    background-color: rgba(80, 52, 255, 0.1);
+  }
+
+  #storybook-explorer-menu a[data-selected='true'],
+  #storybook-explorer-menu a[data-selected='true']:hover {
+    background-color: #5034ff;
+    color: #f0f3ff;
+  }
+
+  #storybook-explorer-menu a[data-selected='true'] svg {
+    color: #f0f3ff;
+  }
+
+  .os-content button:hover {
+    background-color: rgba(80, 52, 255, 0.1);
+    color: #5034ff;
+  }
+
+  .os-content button:hover svg {
+    color: #5034ff;
+  }
+</style>

packages/storybook-blocks/.storybook/manager.js

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

packages/storybook-blocks/.storybook/preview-head.html

@@ -0,0 +1,106 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500" rel="stylesheet" />
+<link
+  href="https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
+  rel="stylesheet"
+/>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet" />
+<link
+  href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins: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"
+  rel="stylesheet"
+/>
+<link href="//fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;500;700&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700" rel="stylesheet" />
+<link href="https://fonts.cdnfonts.com/css/sofia-pro" rel="stylesheet" />
+<style>
+  body {
+    font-family: 'Figtree', sans-serif;
+    box-sizing: border-box;
+  }
+  body * {
+    box-sizing: border-box;
+  }
+  .width-35 {
+    width: 35%;
+  }
+  .main-story-title {
+    font-size: 32px;
+    color: #323338;
+  }
+  .story-title {
+    color: #323338;
+    font-size: 18px;
+    margin-bottom: 48px;
+  }
+  #tooltips-container {
+    position: relative;
+    white-space: pre-wrap;
+    z-index: 99999999;
+    max-width: 50%;
+  }
+  .light-app-theme {
+    background-color: var(--sb-primary-background-color);
+  }
+  .dark-app-theme {
+    background-color: var(--sb-primary-background-color);
+  }
+  .black-app-theme {
+    background-color: var(--sb-primary-background-color);
+  }
+  .sbdocs.sbdocs-wrapper,
+  .sbdocs.sbdocs-content {
+    background: var(--sb-primary-background-color);
+  }
+  .sbdocs.sbdocs-p {
+    color: var(--sb-primary-text-color);
+  }
+
+  .sbdocs .docs-story {
+    border: var(--sb-layout-border-color);
+  }
+  .sbdocs .docs-story > div {
+    background: var(--sb-secondary-background-color);
+  }
+
+  .sbdocs {
+    color: var(--sb-primary-text-color);
+  }
+
+  .sbdocs ul li a {
+    color: var(--sb-link-color);
+  }
+
+  #docs-root .docblock-argstable {
+    border: 1px solid var(--sb-layout-border-color);
+  }
+
+  #docs-root .docblock-argstable tr th {
+    color: var(--sb-primary-text-color);
+  }
+
+  #docs-root .docblock-argstable tr td {
+    color: var(--sb-primary-text-color);
+    background: var(--sb-secondary-background-color);
+  }
+  #docs-root .docblock-code-toggle {
+    cursor: pointer;
+    background-color: var(--sb-secondary-background-color);
+    border: 1px solid var(--sb-layout-border-color);
+    color: var(--sb-primary-text-color);
+  }
+  #docs-root .docblock-code-toggle.docblock-code-toggle--expanded {
+    background-color: var(--sb-primary-selected-color);
+  }
+  #docs-root .docblock-code-toggle:hover {
+    background-color: var(--sb-primary-background-hover-color);
+  }
+
+  .os-content button:hover {
+    background-color: rgba(80, 52, 255, 0.1);
+    color: #5034ff;
+  }
+
+  .os-content button:hover svg {
+    color: #5034ff;
+  }
+</style>

packages/storybook-blocks/.storybook/preview.scss

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  padding: 0 !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  height: 100vh;
+  overflow: auto;
+}
+
+#storybook-root {
+  height: 100%;
+  padding: 1rem;
+}