[FRNT-142] generate snapshot pages (#16)

Author: ainursharaev

example/package.json

@@ -11,7 +11,8 @@
   "license": "MIT",
   "scripts": {
     "start": "gatsby develop",
-    "build": "gatsby build"
+    "build": "gatsby build",
+    "serve": "gatsby serve"
   },
   "dependencies": {
     "@types/react": "^17.0.1",

example/src/calendar/atoms/date-selector/usage.mdx

@@ -0,0 +1,9 @@
+### Props
+
+| Name    | Type                     | Default  | Description                                                |
+| ------- | ------------------------ | -------- | ---------------------------------------------------------- | ---------- | ----------------------- |
+| `text`  | `React.ReactNode`        |          | Text appeared on the button                                |
+| `left`  | `React.ReactNode`        | `null`   | Component to show on the left side of the text (ex.: Icon) |
+| `right` | `React.ReactNode`        | `null`   | Component on the right side of the text                    |
+| `type`  | `'button'                | 'submit' | 'reset'`                                                   | `'button'` | HTML type of the button |
+| `...`   | `HTMLButtonElementProps` | `{}`     | Other props is inherited from `HTMLButtonElement`          |

example/src/calendar/atoms/time-selector/usage.mdx

@@ -0,0 +1,9 @@
+### Props
+
+| Name    | Type                     | Default  | Description                                                |
+| ------- | ------------------------ | -------- | ---------------------------------------------------------- | ---------- | ----------------------- |
+| `text`  | `React.ReactNode`        |          | Text appeared on the button                                |
+| `left`  | `React.ReactNode`        | `null`   | Component to show on the left side of the text (ex.: Icon) |
+| `right` | `React.ReactNode`        | `null`   | Component on the right side of the text                    |
+| `type`  | `'button'                | 'submit' | 'reset'`                                                   | `'button'` | HTML type of the button |
+| `...`   | `HTMLButtonElementProps` | `{}`     | Other props is inherited from `HTMLButtonElement`          |

example/src/calendar/date-selector/usage.mdx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const ButtonStateMap = () => <button>Test button</button>;
+
+export default ButtonStateMap;

example/src/calendar/time-selector/usage.mdx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const ButtonMap = () => (
+  <>
+    <button>Button variant 1</button>
+    <button>Button variant 2</button>
+  </>
+);
+
+export default ButtonMap;

example/src/woly/atoms/button/__screenshot-test__/config.js

@@ -0,0 +1 @@
+### Спецификация

example/src/woly/atoms/button/__screenshot-test__/index.tsx

@@ -1,9 +1,3 @@
----
-name: button
-category: atoms
-package: 'woly'
----
-
 import * as button from './index';
 import { New } from './new';
 import { ButtonImage } from './example';

example/src/woly/atoms/button/map.tsx

@@ -1,9 +1,3 @@
----
-name: chips
-category: atoms
-package: 'woly'
----
-
 import { ChipImage } from './example';
 
 Hello! It is chips
@@ -12,10 +6,10 @@ Hello! It is chips
 
 ### Props
 
-| Name    | Type                            | Default    | Description                                                |
-| ------- | ------------------------------- | ---------- | ---------------------------------------------------------- |
-| `text`  | `React.ReactNode`               |            | Text appeared on the button                                |
-| `left`  | `React.ReactNode`               | `null`     | Component to show on the left side of the text (ex.: Icon) |
-| `right` | `React.ReactNode`               | `null`     | Component on the right side of the text                    |
-| `type`  | `'button' | 'submit' | 'reset'` | `'button'` | HTML type of the button                                    |
-| `...`   | `HTMLButtonElementProps`        | `{}`       | Other props is inherited from `HTMLButtonElement`          |
+| Name    | Type                     | Default  | Description                                                |
+| ------- | ------------------------ | -------- | ---------------------------------------------------------- | ---------- | ----------------------- |
+| `text`  | `React.ReactNode`        |          | Text appeared on the button                                |
+| `left`  | `React.ReactNode`        | `null`   | Component to show on the left side of the text (ex.: Icon) |
+| `right` | `React.ReactNode`        | `null`   | Component on the right side of the text                    |
+| `type`  | `'button'                | 'submit' | 'reset'`                                                   | `'button'` | HTML type of the button |
+| `...`   | `HTMLButtonElementProps` | `{}`     | Other props is inherited from `HTMLButtonElement`          |

example/src/woly/atoms/button/spec.mdx

@@ -1,15 +1,9 @@
----
-name: input
-category: atoms
-package: 'woly'
----
-
 ### Props
 
-| Name    | Type                            | Default    | Description                                                |
-| ------- | ------------------------------- | ---------- | ---------------------------------------------------------- |
-| `text`  | `React.ReactNode`               |            | Text appeared on the button                                |
-| `left`  | `React.ReactNode`               | `null`     | Component to show on the left side of the text (ex.: Icon) |
-| `right` | `React.ReactNode`               | `null`     | Component on the right side of the text                    |
-| `type`  | `'button' | 'submit' | 'reset'` | `'button'` | HTML type of the button                                    |
-| `...`   | `HTMLButtonElementProps`        | `{}`       | Other props is inherited from `HTMLButtonElement`          |
+| Name    | Type                     | Default  | Description                                                |
+| ------- | ------------------------ | -------- | ---------------------------------------------------------- | ---------- | ----------------------- |
+| `text`  | `React.ReactNode`        |          | Text appeared on the button                                |
+| `left`  | `React.ReactNode`        | `null`   | Component to show on the left side of the text (ex.: Icon) |
+| `right` | `React.ReactNode`        | `null`   | Component on the right side of the text                    |
+| `type`  | `'button'                | 'submit' | 'reset'`                                                   | `'button'` | HTML type of the button |
+| `...`   | `HTMLButtonElementProps` | `{}`     | Other props is inherited from `HTMLButtonElement`          |

example/src/woly/atoms/button/usage.mdx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const InpurPasswordStateMap = () => <input type="password" />;
+
+export default InpurPasswordStateMap;

example/src/woly/atoms/chips/usage.mdx

@@ -1,9 +1,3 @@
----
-name: input-password
-category: molecules
-package: 'woly'
----
-
 import { InputPassword } from './example';
 
 Hello! It is InputPassword

example/src/woly/atoms/input/usage.mdx

@@ -30,6 +30,13 @@ module.exports = (themeOptions) => {
           path: themeOptions.components,
         },
       },
+      {
+        resolve: `gatsby-plugin-page-creator`,
+        options: {
+          path: themeOptions.components,
+          ignore: ['**/!(__screenshot-test__)/*', '**/*.(js|ts|jsx)'],
+        },
+      },
     ],
   };
 };

example/src/woly/molecules/input-password/__screenshot-test__/config.js

@@ -6,6 +6,7 @@
 
 const pathsPath = require.resolve('./src/paths.js');
 const { paths } = require(pathsPath);
+const fs = require('fs');
 
 try {
   require.resolve(`babel-plugin-extract-react-types`);
@@ -32,12 +33,6 @@ async function createUsagePages({ actions, graphql, reporter }) {
       usages: allMdx {
         nodes {
           id
-          frontmatter {
-            category
-            name
-            package
-          }
-          tableOfContents
           fileAbsolutePath
         }
       }
@@ -51,13 +46,61 @@ async function createUsagePages({ actions, graphql, reporter }) {
 
   const component = require.resolve('./src/templates/usage.js');
 
-  result.data.usages.nodes.forEach(({ frontmatter, id }) => {
+  result.data.usages.nodes.forEach(({ id, fileAbsolutePath }) => {
+    const [_, name, category, packageName] = fileAbsolutePath
+      .split('/')
+      .reverse();
+
     actions.createPage({
-      path: paths.componentUsage(frontmatter),
+      id,
+      path: paths.componentPage({ package: packageName, category, name }),
       component,
       context: {
         pageID: id,
+        name,
+        category,
+        package: packageName,
       },
     });
   });
 }
+
+exports.onPostBuild = async (gatsby) => {
+  await findScreenshotTestingConfigs(gatsby);
+};
+
+async function findScreenshotTestingConfigs({ graphql, reporter }) {
+  const result = await graphql(`
+    {
+      configs: allFile(filter: { name: { eq: "config" } }) {
+        nodes {
+          relativePath
+        }
+      }
+    }
+  `);
+
+  if (result.errors) {
+    reporter.panicOnBuild(`Error while running GraphQL query`);
+    throw result.errors;
+  }
+
+  const configPaths = result.data.configs.nodes.map(({ relativePath }) => {
+    const [name, category, packageName] = relativePath
+      .replace('/__screenshot-test__/config.js', '')
+      .split('/')
+      .reverse();
+
+    return {
+      path: relativePath,
+      name,
+      category,
+      package: packageName,
+    };
+  });
+
+  fs.writeFileSync(
+    `./public/screenshot-test-configs.json`,
+    JSON.stringify(configPaths, null, 2),
+  );
+}

example/src/woly/molecules/input-password/__screenshot-test__/index.tsx

@@ -34,6 +34,7 @@
     "babel-preset-gatsby": "^1.1.0",
     "change-case": "^4.1.2",
     "gatsby-plugin-mdx": "^1.10.0",
+    "gatsby-plugin-page-creator": "^3.7.1",
     "gatsby-plugin-react-helmet": "^3.10.0",
     "gatsby-plugin-sharp": "^3.1.2",
     "gatsby-plugin-sitemap": "^2.12.0",

example/src/woly/molecules/input-password/usage.mdx

@@ -35,6 +35,7 @@ const Group = ({ group, activeMenu }) => (
     <MenuItems>
       {Object.keys(group.components).map((key) => (
         <GroupItems
+          key={key}
           name={key}
           groupItems={group.components[key]}
           activeMenu={activeMenu}

gatsby-theme-woly/gatsby-config.js

@@ -5,17 +5,17 @@ import styled from 'styled-components';
 
 import { ComponentsMenu } from './components-menu';
 import { paths } from '../paths';
-import { isHiddenCategory } from '../lib/guards';
 
 export const Layout = ({ children }) => {
   const data = useStaticQuery(graphql`
     {
-      mdx: allMdx(
-        sort: { fields: [frontmatter___category, frontmatter___name] }
+      pages: allSitePage(
+        sort: { fields: [context___category, context___name] }
+        filter: { component: { regex: "/usage.js$/g" } }
       ) {
         components: nodes {
           id
-          meta: frontmatter {
+          meta: context {
             category
             name
             package
@@ -47,25 +47,30 @@ export const Layout = ({ children }) => {
 
 function createMapping(data) {
   const packages = {};
-  for (const component of data.mdx.components) {
-    if (!packages[component.meta.package]) {
-      packages[component.meta.package] = {};
+
+  for (const component of data.pages.components) {
+    const {
+      package: packageName,
+      name: componentName,
+      category,
+    } = component.meta;
+
+    if (!packages[packageName]) {
+      packages[packageName] = {};
     }
 
-    if (!packages[component.meta.package][component.meta.category]) {
-      packages[component.meta.package][component.meta.category] = [];
+    if (!packages[packageName][category]) {
+      packages[packageName][category] = [];
     }
 
     const prefix = data.pathPrefix || '';
 
-    if (!isHiddenCategory(component.meta.category)) {
-      packages[component.meta.package][component.meta.category].push({
-        ...component.meta,
-        path: prefix + paths.componentUsage(component.meta),
-        id: component.id,
-        title: camelCase(component.meta.name),
-      });
-    }
+    packages[packageName][category].push({
+      ...component.meta,
+      path: prefix + paths.componentPage(component.meta),
+      id: component.id,
+      title: camelCase(componentName),
+    });
   }
 
   return Object.keys(packages).reduce((list, name) => {

gatsby-theme-woly/gatsby-node.js

@@ -1,4 +1,5 @@
 const paths = {
-  componentUsage: ({ package: p, name }) => `/package/${p}/component/${name}`,
+  componentPage: ({ package: p, category, name }) =>
+    `/${p}/${category}/${name}`,
 };
 module.exports = { paths };