Added storybook

- fixed invalid type placeholder
- added stories-check
- added support for Provider type overriding

Author: AleksandarDev

.github/workflows/stories-check.yml

@@ -0,0 +1,55 @@
+name: Stories check
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  checkScreenshots:
+    name: Stories check
+
+    runs-on: windows-2022
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16.x"
+          cache: "yarn"
+
+      - name: Yarn install
+        run: yarn install --network-timeout 1000000
+
+      - name: Run stories-check
+        id: storiesCheck
+        continue-on-error: true
+        run: yarn stories-check
+
+      - name: Commit story changes
+        id: csc
+        if: steps.storiesCheck.outcome == 'failure'
+        uses: EndBug/add-and-commit@v8
+        with:
+          add: ".stories-approved"
+          message: "[skip ci] [stories-check] Automated story changes"
+          new_branch: ${{ github.head_ref }}
+          default_author: github_actions
+
+      - name: Run cypress-check
+        id: cypressCheck
+        continue-on-error: true
+        run: yarn cypress-check
+
+      - name: Commit cypress changes
+        id: ccc
+        if: steps.cypressCheck.outcome == 'failure'
+        uses: EndBug/add-and-commit@v8
+        with:
+          add: ".cypress-approved"
+          message: "[skip ci] [cypress-check] Automated cypress changes"
+          new_branch: ${{ github.head_ref }}
+          default_author: github_actions

.gitignore

@@ -10,6 +10,12 @@
 /cypress/screenshots
 /cypress/videos
 
+# storybook
+/storybook-static
+
+# storycap
+/.stories-pending
+
 # production
 /lib
 

.storybook/main.js

@@ -0,0 +1,17 @@
+const path = require('path');
+
+module.exports = {
+  stories: [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "storycap"
+  ],
+  framework: "@storybook/react",
+  core: {
+    "builder": "webpack5"
+  }
+}

.storybook/preview.js

@@ -0,0 +1,10 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  layout: 'centered'
+}

README.md

@@ -120,6 +120,18 @@ import { FormBuilderField } from '@enterwell/react-form-builder';
 </FormBuilder>
 ```
 
+#### Override components
+
+You can nest `FormBuilderProvider` inside other provider. The bottom provider will take all components from its parent and override matching with newly provided component types.
+
+```js
+<FormBuilderProvider components={formComponentsA}>
+    <FormBuilderProvider components={formComponentsB}>
+        <!-- Can use both types from A and B, if B contains same type as A, B type is resolved here -->
+    </FormBuilderProvider>
+</FormBuilderProvider>
+```
+
 ## Development
 
 For development:

helpers/ci/NodeHelpers.js

@@ -0,0 +1,50 @@
+// General import
+const fs = require('fs-extra');
+const path = require('path');
+const chalk = require('chalk');
+const { stdout } = require('process');
+
+/**
+ * Gets all the file paths from the selected directory recursively.
+ *
+ * @param {string} directory Path to the directory from which to read the files.
+ * @returns Array of file paths in the selected directory
+ */
+module.exports.getFilesRecursively = (directory) => {
+    const files = [];
+
+    const filesInDirectory = fs.readdirSync(directory);
+
+    filesInDirectory.forEach((file) => {
+        const absolute = path.join(directory, file);
+
+        if (fs.lstatSync(absolute).isDirectory()) {
+            files.push(...this.getFilesRecursively(absolute));
+        } else {
+            files.push(absolute);
+        }
+    });
+
+    return files;
+};
+
+/**
+ * Prints the information about starting the task and its completion to the console.
+ *
+ * @param {string} message Message to output before starting the process.
+ * @param {Function} taskToRun Function to invoke.
+ * @returns Value that the function returns
+ */
+module.exports.logProcess = (message, taskToRun) => {
+    try {
+        stdout.write(message);
+        const valueToReturn = taskToRun();
+        stdout.write(`${chalk.green(' DONE ✔')}\n`);
+
+        return valueToReturn;
+    } catch (error) {
+        stdout.write(`${chalk.red(' ERROR X')}\n`);
+
+        throw error;
+    }
+};

helpers/ci/ScreenshotsCompare.js

@@ -0,0 +1,76 @@
+// General imports
+const fs = require('fs-extra');
+const chalk = require('chalk');
+
+// Node helpers import
+const { getFilesRecursively, logProcess } = require('./NodeHelpers');
+
+/**
+ * Scripts main function.
+ *
+ * @param {string} approvedPath Path to the approved screenshots directory
+ * @param {string} pendingPath Path to the pending screenshots directory
+ * @param {string} approvedDirName Name of the approved screenshots directory
+ * @param {string} pendingDirName Name of the pending screenshots directory
+ */
+const compare = (approvedPath, pendingPath, approvedDirName, pendingDirName) => {
+    try {
+        let numberOfChanges = 0;
+
+        // Ensure the approved directory exists.
+        fs.ensureDirSync(approvedPath);
+
+        // Get all the approved files.
+        const approvedFiles = logProcess('Fetching approved files...', () => getFilesRecursively(approvedPath));
+
+        // Get all the pending files.
+        const pendingFiles = logProcess('Fetching pending files...', () => getFilesRecursively(pendingPath));
+
+        // Iterate all the approved files.
+        approvedFiles.forEach((approvedFile) => {
+            const approvedFileShort = approvedFile.substring(approvedFile.indexOf(approvedDirName) + approvedDirName.length + 1);
+            const possiblePending = approvedFile.replace(approvedDirName, pendingDirName);
+
+            // If the approved file is an old one (does not exist in the pending folder)
+            // delete it from the approved folder.
+            if (!pendingFiles.includes(possiblePending)) {
+                logProcess(`\t${chalk.red(`[-] ${approvedFileShort}`)}`, () => fs.removeSync(approvedFile));
+                numberOfChanges++;
+            }
+        });
+
+        // Iterate all the files that are pending for approval.
+        pendingFiles.forEach((pendingFile) => {
+            const possibleNew = pendingFile.replace(pendingDirName, approvedDirName);
+            const possibleNewShort = possibleNew.substring(possibleNew.indexOf(approvedDirName) + approvedDirName.length + 1);
+
+            // If the pending file is a new one (does not exist in the approved folder)
+            // move it to the approved folder.
+            if (!approvedFiles.includes(possibleNew)) {
+                logProcess(`\t${chalk.green(`[+] ${possibleNewShort}`)}`, () => fs.moveSync(pendingFile, possibleNew, { overwrite: true }));
+                numberOfChanges++;
+            } else {
+                const pendingFileBytes = fs.readFileSync(pendingFile);
+                const approvedFileBytes = fs.readFileSync(possibleNew);
+
+                // If the files are not the same, overwrite it.
+                if (!pendingFileBytes.equals(approvedFileBytes)) {
+                    logProcess(`\t${chalk.yellow(`[≠] ${possibleNewShort}`)}`, () => fs.moveSync(pendingFile, possibleNew, { overwrite: true }));
+                    numberOfChanges++;
+                } else {
+                    console.log(`\t${chalk.white(`[=] ${possibleNewShort}`)}`);
+                }
+            }
+        });
+
+        console.log(`Detected changes: ${numberOfChanges}`);
+
+        if (numberOfChanges) process.exit(1);
+    } catch (error) {
+        console.error(chalk.red('Error occurred while running the script:'));
+        console.error(chalk.red(error));
+        process.exit(2);
+    }
+};
+
+module.exports = { compare };

helpers/ci/StoriesCompare.js

@@ -0,0 +1,29 @@
+// General imports
+const path = require('path');
+
+// Compare script import
+const { compare } = require('./ScreenshotsCompare');
+
+// Directory paths
+const APPROVED_DIR_NAME = '.stories-approved';
+const PENDING_DIR_NAME = '.stories-pending';
+
+const APPROVED_STORIES = path.join(__dirname, `../../${APPROVED_DIR_NAME}`);
+const PENDING_STORIES = path.join(__dirname, `../../${PENDING_DIR_NAME}`);
+
+/**
+ * Running the script with the storybook stories parameters.
+ *
+ * @param {string} approvedStories Path to the approved stories directory
+ * @param {string} pendingStories Path to the pending stories directory
+ * @param {string} approvedDirName Name of the approved stories directory
+ * @param {string} pendingDirName Name of the pending stories directory
+ */
+const run = (
+    approvedStories = APPROVED_STORIES,
+    pendingStories = PENDING_STORIES,
+    approvedDirName = APPROVED_DIR_NAME,
+    pendingDirName = PENDING_DIR_NAME
+) => compare(approvedStories, pendingStories, approvedDirName, pendingDirName);
+
+module.exports = { run };

package.json

@@ -16,7 +16,10 @@
   "scripts": {
     "clean": "rimraf dist && rimraf lib",
     "dev": "npm run clean && rollup -c -w",
-    "build": "npm run clean && rollup -c"
+    "build": "npm run clean && rollup -c",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "stories-check": "rimraf ./.stories-pending && storycap --serverCmd \"start-storybook --ci -p 6007\" --serverTimeout 180000 -o .stories-pending http://localhost:6007 && kill-port 6007 && node -e \"require('./helpers/ci/StoriesCompare').run()\""
   },
   "engines": {
     "node": ">=14"
@@ -36,11 +39,21 @@
     "react-dom": "^17"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.8",
     "@enterwell/react-form-validation": "^1.1.9",
     "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-node-resolve": "^13.1.3",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-interactions": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/builder-webpack5": "^6.4.19",
+    "@storybook/manager-webpack5": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/testing-library": "^0.0.9",
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.2",
+    "babel-loader": "^8.2.4",
     "cross-env": "^7.0.3",
     "postcss": "^8.4.12",
     "react": "^17.0.2",
@@ -50,6 +63,9 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
-    "typescript": "^4.6.2"
-  }
-}
+    "storycap": "^4.0.0-alpha.1",
+    "typescript": "^4.6.2",
+    "webpack": "^5.70.0"
+  },
+  "dependencies": {}
+}

src/FormBuilder/FormBuilder.tsx

@@ -4,15 +4,7 @@ import FormBuilderContext from "./FormBuilderContext";
 import { submitForm } from '@enterwell/react-form-validation';
 import { FormBuilderProviderContext } from "../FormBuilderProvider/FormBuilderProviderContext";
 import { FormBuilderProps } from "./FormBuilder.types";
-
-function UndefinedField({ fieldName }: { fieldName: string }) {
-    return <div style={{
-        color: '#FF8080',
-        padding: '12px',
-        backgroundColor: '#290000',
-        borderRadius: 8
-    }}>{`Undefined form field "${fieldName}"`}</div>
-}
+import InvalidPlaceholder from "./InvalidPlaceholder";
 
 export default function FormBuilder(props: FormBuilderProps) {
     const {
@@ -42,7 +34,7 @@ export default function FormBuilder(props: FormBuilderProps) {
                     }
                     return (
                         <FieldWrapper key={fieldName}>
-                            <UndefinedField fieldName={fieldName} />
+                            <InvalidPlaceholder fieldName={`empty field ${fieldName}`} />
                         </FieldWrapper>
                     );
                 })}