LeanyLabs
diff --git a/Diff for: ‎.github/workflows/chromatic.yml
+26 b/Diff for: ‎.github/workflows/chromatic.yml
+26
diff --git a/Diff for: ‎.gitignore
+2 b/Diff for: ‎.gitignore
+2
diff --git a/Diff for: ‎.storybook/.babelrc
+2-1 b/Diff for: ‎.storybook/.babelrc
+2-1
diff --git a/Diff for: ‎.storybook/addons.js
+9-4 b/Diff for: ‎.storybook/addons.js
+9-4
diff --git a/Diff for: ‎.storybook/logo.png
6.53 KB b/Diff for: ‎.storybook/logo.png
6.53 KB
diff --git a/Diff for: ‎.storybook/main.js
+9-27 b/Diff for: ‎.storybook/main.js
+9-27
diff --git a/Diff for: ‎.storybook/manager-head.html
+32-4 b/Diff for: ‎.storybook/manager-head.html
+32-4
diff --git a/Diff for: ‎.storybook/preview-head.html
+62-8 b/Diff for: ‎.storybook/preview-head.html
+62-8
diff --git a/Diff for: ‎.storybook/preview.js
+83-14 b/Diff for: ‎.storybook/preview.js
+83-14
diff --git a/Diff for: ‎.stylelintrc.json
-1 b/Diff for: ‎.stylelintrc.json
-1
diff --git a/Diff for: ‎TESTING_README.md
+6-9 b/Diff for: ‎TESTING_README.md
+6-9
@@ -0,0 +1,26 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        run: yarn
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
@@ -3,7 +3,9 @@ node_modules
 .idea
 npm-debug.log
 build-storybook.log
+./build-storybook.log
 /storybook-static
 dist
 build
 coverage
+.scannerwork
@@ -21,6 +21,7 @@
       {
         "loose": true
       }
-    ]
+    ],
+    ["@babel/plugin-proposal-private-methods", { "loose": true }]
   ]
 }
@@ -1,15 +1,20 @@
 import "@storybook/addon-docs/register";
-import "@storybook/addon-knobs/register";
 import "@storybook/addon-actions/register";
 import "@storybook/addon-links/register";
 import { create } from "@storybook/theming/create";
 import { addons } from "@storybook/addons";
+import logo from "./logo.png";
 
 const theme = create({
   base: "light",
-  brandImage:
-    "https://dapulse-res.cloudinary.com/image/upload/f_auto,q_auto/remote_mondaycom_static/img/monday-logo-x2.png",
-  brandUrl: "https://monday.com"
+  brandImage: logo,
+  brandUrl: "https://monday.com",
+  barSelectedColor: '#5034ff',
+  brandTitle: 'Vibe Design',
+  background: {
+    hoverable: "rgba(80, 52, 255, 0.1)"
+  },
+  hoverable: "rgba(80, 52, 255, 0.1)"
 });
 
 addons.setConfig({
 
@@ -14,31 +14,7 @@ const getProjectConfigRules = () => {
   return projectConfig.module.rules;
 };
 const getDocsConfigRules = () => {
-  return [
-    {
-      test: /\.(stories|story)\.mdx$/,
-      use: [
-        {
-          loader: "babel-loader",
-          options: {
-            plugins: ["@babel/plugin-transform-react-jsx"]
-          }
-        },
-        {
-          loader: "@mdx-js/loader",
-          options: {
-            compilers: [createCompiler({})]
-          }
-        }
-      ]
-    },
-    {
-      test: /\.(stories|story)\.[tj]sx?$/,
-      loader: require.resolve("@storybook/source-loader"),
-      exclude: [/node_modules/],
-      enforce: "pre"
-    }
-  ];
+  return [];
 };
 
 const buildConfig = config => {
@@ -49,9 +25,15 @@ const buildConfig = config => {
 };
 
 module.exports = {
-  stories: ["../src/**/*.stories.(js|mdx)"],
+  stories: ["../src/**/*.stories.mdx"],
   webpackFinal: async config => {
     return buildConfig(config);
   },
-  addons: ["storybook-addon-themes", "@storybook/addon-a11y", "storybook-addon-performance/register"]
+  addons: [
+    "@storybook/addon-controls",
+    "storybook-addon-themes",
+    "@storybook/addon-a11y",
+    "storybook-addon-performance/register",
+    "@storybook/addon-docs"
+  ]
 };
@@ -1,10 +1,38 @@
-<link
-  href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
-  rel="stylesheet"
-/>
+<link href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500&display=swap" rel="stylesheet" />
+<title>Vibe Design System</title>
 <script src="https://use.fontawesome.com/660238b999.js"></script>
 <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>
@@ -1,7 +1,5 @@
-<link
-  href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500"
-  rel="stylesheet"
-/>
+<link href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500" rel="stylesheet" />
+<link href="http://fonts.cdnfonts.com/css/sofia-pro" rel="stylesheet" />
 <script src="https://use.fontawesome.com/660238b999.js"></script>
 <style>
   body {
@@ -30,15 +28,71 @@
     max-width: 50%;
   }
   .light-app-theme {
-      background-color: var(--primary-background-color);
+    background-color: var(--primary-background-color);
   }
   .dark-app-theme {
-      background-color: var(--primary-background-color);
+    background-color: var(--primary-background-color);
   }
   .black-app-theme {
-      background-color: var(--primary-background-color);
+    background-color: var(--primary-background-color);
   }
   .hacker_theme-app-theme {
-      background-color: var(--primary-background-color);
+    background-color: var(--primary-background-color);
+  }
+  .sbdocs.sbdocs-wrapper,
+  .sbdocs.sbdocs-content {
+    background: var(--primary-background-color);
+  }
+  .sbdocs.sbdocs-p {
+    color: var(--primary-text-color);
+  }
+
+  .sbdocs .docs-story {
+    border: var(--layout-border-color);
+  }
+  .sbdocs .docs-story > div {
+    background: var(--secondary-background-color);
+  }
+
+  .sbdocs {
+    color: var(--primary-text-color);
+  }
+
+  .sbdocs ul li a {
+    color: var(--link-color);
+  }
+
+  #docs-root .docblock-argstable {
+    border: 1px solid var(--layout-border-color);
+  }
+
+  #docs-root .docblock-argstable tr th {
+    color: var(--primary-text-color);
+  }
+
+  #docs-root .docblock-argstable tr td {
+    color: var(--primary-text-color);
+    background: var(--secondary-background-color);
+  }
+  #docs-root .docblock-code-toggle {
+    cursor: pointer;
+    background-color: var(--secondary-background-color);
+    border: 1px solid var(--layout-border-color);
+    color: var(--primary-text-color);
+  }
+  #docs-root .docblock-code-toggle.docblock-code-toggle--expanded {
+    background-color: var(--primary-selected-color);
+  }
+  #docs-root .docblock-code-toggle:hover {
+    background-color: var(--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>
@@ -1,21 +1,90 @@
-import { addParameters, configure } from "@storybook/react";
+import { parameters } from "@storybook/addon-docs/dist/esm/frameworks/react/config";
+import { addParameters } from "@storybook/react";
 import { DocsPage, DocsContainer } from "@storybook/addon-docs/blocks";
-
-import { loadFoundationsStories } from "../src/general-stories/foundations-stories";
+import {
+  SectionName,
+  Title,
+  Tip,
+  AnchorListItem,
+  ComponentRules,
+  ComponentName,
+  UsageGuidelines,
+  FunctionArguments,
+  FunctionArgument,
+  RelatedComponents,
+  DocFooter,
+  MultipleStoryElementsWrapper,
+  Paragraph,
+  LinkComponent
+} from "../src/storybook/components";
 
 addParameters({
   docs: {
-    container: DocsContainer,
-    page: DocsPage
+    ...parameters.docs,
+    inlineStories: true,
+    container: ({ children, context }) => (
+      <DocsContainer context={context}>
+        {children}
+        {<DocFooter />}
+      </DocsContainer>
+    ),
+    page: DocsPage,
+    components: {
+      h1: ComponentName,
+      h2: SectionName,
+      h3: Title,
+      li: AnchorListItem,
+      a: LinkComponent,
+      p: Paragraph,
+      Tip,
+      ComponentRules,
+      UsageGuidelines,
+      FunctionArguments,
+      FunctionArgument,
+      RelatedComponents
+    }
+  },
+  viewMode: "docs",
+  previewTabs: {
+    "storybook/docs/panel": {
+      index: -1
+    },
+    canvas: { title: "Sandbox" }
   },
-  themes: [
-    { name: "Light", class: "light-app-them", color: "#ffffff", default: true },
-    { name: "Dark", class: "dark-app-theme", color: "#1C1F3B" },
-    { name: "Black", class: "black-app-theme", color: "#111111" },
-    { name: "Hacker", class: "hacker_theme-app-theme", color: "#282a36" }
-  ]
+  themes: {
+    default: "Light",
+    list: [
+      { name: "Light", class: "light-app-them", color: "#ffffff" },
+      { name: "Dark", class: "dark-app-theme", color: "#1C1F3B" },
+      { name: "Black", class: "black-app-theme", color: "#111111" },
+      { name: "Hacker", class: "hacker_theme-app-theme", color: "#282a36" }
+    ]
+  },
+  options: {
+    storySort: {
+      order: [
+        "Welcome",
+        "Foundations",
+        "Buttons",
+        "Inputs",
+        "Data display",
+        "Media",
+        "Popover",
+        "Pickers",
+        "*",
+        "Accessibility",
+        "Hooks"
+      ]
+    }
+  }
 });
 
-const storiesLoaderFunction = () => [...loadFoundationsStories()];
-
-configure(storiesLoaderFunction, module);
+export const decorators = [
+  (Story, { className }) => {
+    return (
+      <MultipleStoryElementsWrapper className={className}>
+        <Story />
+      </MultipleStoryElementsWrapper>
+    );
+  }
+];
@@ -24,7 +24,6 @@
     "max-line-length": [140, {"severity": "error"}],
     "function-calc-no-unspaced-operator": null,
     "no-duplicate-selectors": [true, {"severity": "warning"}],
-
     "scss/dollar-variable-empty-line-before": null,
     "no-missing-end-of-source-newline": null,
     "comment-empty-line-before": null,
 
@@ -6,22 +6,13 @@ We are using two approaches when regarding testing the first is the standard jes
 1. Jest as of our test runner and framework
 2. [React testing library](https://testing-library.com/docs/react-testing-library/intro) as our components testing library
 
-The second approach is for special use cases which require a browser (positing, observer callbacks ...)
- 1. Karna as our test runner
- 2. Mocha as our framework library
- 3. Sinon as our mocks/stubs library
- 4. [React testing library](https://testing-library.com/docs/react-testing-library/intro) as our components testing library
-
 ## React testing library
 This library forces us to test according to user behaviour and not implementation details (state keys for example) for example the library allows you to target elements according to text, aria labels, placeholders text and more. This approach ensure us that we test the component in the right way and allows us easier refactoring when needed.
 
 #### Test File
 #### Jest
 Use our plop which automatically generates the proper folder structure, each file should end with .test.js
 
-#### Karma
-The file should end with `-test.js` and should be located in a `__tests__` folder.
-
 ### React testing 101
 #### Mounting components
 In react testing library we "mount" the entire components and the tests are running against a fully rendered tree in order to simulate the most accurate user environment.
@@ -85,3 +76,9 @@ In this example we are looking for an element which has a placeholder with the t
 -   [`ByRole`](https://testing-library.com/docs/dom-testing-library/api-queries#byrole)
 -   [`ByTestId`](https://testing-library.com/docs/dom-testing-library/api-queries#bytestid)
 
+
+#### Component tests file structure
+Each component in the library will contain a __tests__ folder that should contain two files:
+- Snapshot tests file, which will include all the component snapshot tests.
+  This file will contain a snapshot test for the component with empty props and a snapshot test for each prop that allows a significant state of the component.
+- Tests file for all the tests which are not snapshot tests. This file should contain a test for each possible interaction of the user with the component. Any other tests for the component which are not snapshot tests also should be here.
Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@`
`21`	`21`	`{`
`22`	`22`	`"loose": true`
`23`	`23`	`}`
`24`		`- ]`
	`24`	`+ ],`
	`25`	`+ ["@babel/plugin-proposal-private-methods", { "loose": true }]`
`25`	`26`	`]`
`26`	`27`	`}`