Merge pull request #14 from lightbasenl/next

v2

Author: rodymolenaar

.checks/component_has_story.js

@@ -0,0 +1,19 @@
+const fs = require("fs");
+const path = require("path");
+
+module.exports = fail => {
+  const componentsPath = path.join(__dirname, "./../src/components");
+
+  const files = fs.readdirSync(componentsPath);
+
+  const components = files.filter(file => !file.match(/.story.(tsx|mdx)$/));
+  const stories = files.filter(file => file.match(/.story.(tsx|mdx)$/));
+
+  components.forEach(component => {
+    const name = component.split(".")[0];
+
+    if (!stories.find(file => file.startsWith(name))) {
+      fail(`There is a story missing for ${name} in src/components`);
+    }
+  });
+};

.checks/helper_has_test.js

@@ -0,0 +1,17 @@
+const fs = require("fs");
+const path = require("path");
+
+module.exports = fail => {
+  const helpersPath = path.join(__dirname, "./../src/helpers");
+
+  const files = fs.readdirSync(helpersPath);
+
+  const tests = files.filter(file => file.match(/\.test\.(ts|tsx)$/));
+  const helpers = files.filter(file => !file.match(/\.test\.(ts|tsx)$/));
+
+  helpers.forEach(helper => {
+    if (!tests.find(test => test.match(/\.test\.(ts|tsx)$/))) {
+      fail(`There is a test missing for ${helper} in src/helpers`);
+    }
+  });
+};

.checks/hook_starts_with_use.js

@@ -0,0 +1,14 @@
+const fs = require("fs");
+const path = require("path");
+
+module.exports = fail => {
+  const hooksPath = path.join(__dirname, "./../src/hooks");
+
+  const files = fs.readdirSync(hooksPath);
+
+  files.forEach(file => {
+    if (!file.match(/^use/) && file.charAt(0) !== ".") {
+      fail(`There is a file that doesn't start with "use" in src/hooks: ${file}`);
+    }
+  });
+};

.checks/run.js

@@ -0,0 +1,25 @@
+const checks = [
+  require("./component_has_story"),
+  require("./helper_has_test"),
+  require("./hook_starts_with_use"),
+];
+
+let fails = 0;
+
+function fail(message) {
+  console.log(`\x1b[41m[ FAILED ]\x1b[0m - ${message}`);
+  fails++;
+}
+
+console.log("\nPerforming checks...\n");
+
+checks.forEach(check => {
+  check(fail);
+});
+
+if (fails > 0) {
+  console.error(`\x1b[31m${fails} check(s) failed\x1b[0m`);
+  process.exitCode = 1;
+} else {
+  console.log("\x1b[32mAll checks passed. 🎉");
+}

.github/workflows/cypress-test-storybook.yml

@@ -0,0 +1,27 @@
+name: Cypress storybook tests
+on: [push]
+jobs:
+  cypress-run:
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [14]
+    runs-on: ${{ matrix.os }}
+    name: Storybook on Chrome on Node v${{ matrix.node }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v1
+        with:
+          browser: chrome
+          config: pageLoadTimeout=100000,watchForFileChanges=false
+          start: yarn storybook
+          wait-on: http://localhost:6006
+          wait-on-timeout: 120
+          spec: cypress/integration/storybook/**/*

.github/workflows/cypress-test.yml

@@ -0,0 +1,29 @@
+name: End-to-end cypress app tests
+on: [push]
+
+jobs:
+  cypress-run:
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [14]
+    runs-on: ${{ matrix.os }}
+    name: E2E on Chrome on Node v${{ matrix.node }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v1
+        with:
+          browser: chrome
+          config: pageLoadTimeout=100000,watchForFileChanges=false
+          build: yarn build
+          start: yarn start
+          wait-on: http://localhost:3000
+          wait-on-timeout: 120
+          spec: cypress/integration/app/**/*

.github/workflows/lint-test.yml

@@ -0,0 +1,35 @@
+name: lint-test
+on: [push]
+
+jobs:
+  lint-build-test:
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [14]
+    runs-on: ${{ matrix.os }}
+    env:
+      CI: true
+    steps:
+      - uses: actions/checkout@v2
+      - name: Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+      - name: Cache node modules
+        uses: actions/cache@v1
+        with:
+          path: ~/.yarn
+          key: ${{ runner.os }}-${{ matrix.node }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ matrix.node }}-
+            ${{ runner.os }}-
+      - name: Install, Format, Check
+        run: |
+          yarn
+          yarn format
+          yarn checks:run
+      - name: Test, Build
+        run: |
+          yarn test
+          yarn build

.storybook/.babelrc

@@ -1,11 +1,21 @@
 {
-  "presets": ["next/babel"],
+  "presets": [
+    "next/babel"
+  ],
   "plugins": [
     [
       "module-resolver",
       {
-        "root": ["./../src"],
-        "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"]
+        "root": [
+          "./src"
+        ],
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx",
+          ".json"
+        ]
       }
     ]
   ]

.storybook/config.js

@@ -0,0 +1,22 @@
+const path = require("path");
+
+module.exports = {
+  addons: [
+    {
+      name: "@storybook/preset-typescript",
+      options: {
+        tsLoaderOptions: {
+          configFile: path.resolve(__dirname, "./tsconfig.json"),
+        },
+        forkTsCheckerWebpackPluginOptions: {
+          colors: false,
+        },
+        include: [path.resolve(__dirname, "../src")],
+        transpileManager: true,
+      },
+    },
+    "@storybook/addon-docs",
+    "@storybook/addon-knobs/register",
+    "@storybook/addon-a11y/register",
+  ],
+};