first commit

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: 
+
+---
+
+**Describe the bug**
+<!-- A clear and concise description of what the bug is. -->
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+<!-- A clear and concise description of what you expected to happen. -->
+
+**Screenshots**
+<!-- If applicable, add screenshots to help explain your problem. -->
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: Enhancement
+assignees: 
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
+
+**Describe the solution you'd like**
+<!-- A clear and concise description of what you want to happen. -->
+
+**Describe alternatives you've considered**
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+**Additional context**
+<!-- Add any other context or screenshots about the feature request here. -->

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,10 @@
+---
+name: Question
+about: Ask a question about this project
+title: ''
+labels: bug
+assignees: 
+
+---
+
+<!-- _where applicable, please provide context and use case around your question._ -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,17 @@
+## **Is your Pull Request request related to a Jira ticket and/or another issue in this repository ?**      
+<!-- _If so please link to other issues and PRs as appropriate_ -->
+
+## **Describe what the PR does**    
+<!-- _A clear and concise description of what the PR does. Feel free to use bullet points and checkboxes if needed [...]_ -->
+
+
+## **State whether the PR is ready for review or whether it needs extra work**    
+<!-- _If you are still working on it and just setting it up for later review, or if it's ready to be reviewed for merging_ -->
+
+## **Additional context**    
+<!-- Add any other context or screenshots about the PR. -->
+
+## **For Reviewers**
+<!-- Provide a checklist for reviewers of what you'd expect them to do to review this PR -->
+
+💡 ?

.gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/**/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.eslintcache
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+
+storybook-static

.nvmrc

@@ -0,0 +1 @@
+14

.storybook/main.js

@@ -0,0 +1,60 @@
+const WepbackPluginJsDocToMdx = require("./webpack-plugin-jsdoc-to-mdx/index.js");
+const path = require("path")
+
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  staticDirs: ["../public"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-viewport",
+    "@storybook/addon-controls",
+    "@storybook/addon-outline",
+   "storybook-dark-mode",
+    // {
+    //   name: '@storybook/addon-storysource',
+    //   options: {
+    //     rule: {
+    //       // test: [/\.stories\.jsx?$/], This is default
+    //       include: [path.resolve(__dirname, '../src')], // You can specify directories
+    //     },
+    //     loaderOptions: {
+    //       prettierConfig: { printWidth: 80, singleQuote: false },
+    //       injectStoryParameters: false,
+    //     },
+    //     sourceLoaderOptions: {
+    //       injectStoryParameters: false,
+    //     },
+    //   },
+    // },
+  ],
+  framework: "@storybook/react",
+  stories: ["../src/**/*.stories.@(js|jsx|mdx)"],
+  core: {
+    builder: "@storybook/builder-webpack5",
+  },
+  features: {
+    interactionsDebugger: true,
+  },
+  "webpackFinal": async (config, { configType }) => {
+    config.plugins.push(new WepbackPluginJsDocToMdx({
+      files:[
+        {
+          metaTitle: "Components/useForm",
+          inputFilePath: "src/Form/useForm/index.jsx",
+          outpuFilePath: "src/Form/useForm/useForm.autogenerated.stories.mdx"
+        },
+        {
+          metaTitle: "Components/validation",
+          inputFilePath: "src/Form/useForm/validation/index.js",
+          outpuFilePath: "src/Form/useForm/validation/validation.autogenerated.stories.mdx"
+        },
+      ]
+    }))
+    return config;
+  }
+};
+
+

.storybook/preview.js

@@ -0,0 +1,62 @@
+// import { CodeOrSourceMdx } from "@storybook/addon-docs";
+// import { Mermaid } from "mdx-mermaid/Mermaid";
+import './theme/style.css';
+import { themes } from '@storybook/theming';
+import { Theme } from './theme/index.js';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+    viewMode: 'docs',
+  // https://github.com/storybookjs/storybook/issues/6867#issuecomment-1245057664
+  // docs: {
+  //   components: {
+  //     code: props =>
+  //       (props.className?.includes("mermaid")
+  //         ? <Mermaid chart={props.children} />
+  //         : <CodeOrSourceMdx {...props} />),
+  //   },
+  // },
+  options: {
+    showRoots: true,
+    storySort: {
+      order: [
+        "Introduction",
+        "Demo",
+        "README",
+        "Architecture",["Overview","CodeWalkThrough"],
+        "Components",["Form", "useForm","validation","FormFieldsList","FormFieldFactory","*"],
+        "*"
+      ]
+    },
+  },
+   backgrounds: {
+    default: 'transparent',
+    values: [
+      {
+        name: 'transparent',
+        value: 'transparent',
+      },
+      {
+        name: 'white',
+        value: 'white',
+      },
+      {
+        name: 'black',
+        value: 'black',
+      },
+    ],
+  },
+    darkMode:{
+    darkClass: 'darkClass',
+    lightClass: 'lightClass',
+    light: { ...themes.normal, ...Theme.light, ...Theme.common },
+    dark: { ...themes.dark, ...Theme.dark, ...Theme.common },
+    stylePreview: true,
+  }
+};

.storybook/theme/common.js

@@ -0,0 +1,8 @@
+import logo from'./logo/noun-json-5435866.png';
+
+export default {
+    brandTitle: 'Json Form Schema Design Pattern',
+    brandUrl: 'hhttps://github.com/pietrop/json-form-schema-design-pattern',
+    brandImage: logo,
+    brandTarget: '_self',
+};

.storybook/theme/dark.js

@@ -0,0 +1,37 @@
+import { create } from '@storybook/theming';
+
+const PRIMARY_NAV_BAR_COLOR = 'red';
+const PRIMARY_NAV_BAR_TEXT_COLOR = "white";
+const CENTER_BACKGROUND_COLOR = '#e5e5e5'; // rgba(51, 51, 51)
+const SIDEBAR_BACKGROUND_COLOR = '#faf9f9';
+
+export default {
+  base: 'dark',
+//   colorPrimary: PRIMARY_NAV_BAR_COLOR,
+//   colorSecondary: 'deepskyblue',
+
+//   // UI
+//   appBg: SIDEBAR_BACKGROUND_COLOR,
+//   appContentBg: CENTER_BACKGROUND_COLOR,
+//   appBorderColor: 'grey',
+  appBorderRadius: 4,
+
+//   // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: 'monospace',
+
+//   // Text colors
+//   textColor: 'black',
+//   textInverseColor: 'rgba(255,255,255,0.9)',
+
+//   // Toolbar default and active colors
+//   barTextColor: 'silver',
+//   barSelectedColor: PRIMARY_NAV_BAR_TEXT_COLOR,
+//   barBg: PRIMARY_NAV_BAR_COLOR,
+
+//   // Form colors
+//   inputBg: 'white',
+//   inputBorder: 'silver',
+//   inputTextColor: 'black',
+  inputBorderRadius: 4,
+};

.storybook/theme/index.js

@@ -0,0 +1,4 @@
+import ThemeLight from './light.js';
+import ThemeDark from './dark.js';
+import ThemeCommon from './common.js';
+export const Theme = { light: ThemeLight , dark: ThemeDark, common: ThemeCommon }

.storybook/theme/light.js

@@ -0,0 +1,33 @@
+import { create } from '@storybook/theming';
+
+const PRIMARY_NAV_BAR_COLOR = '#1d3557';
+const PRIMARY_NAV_BAR_TEXT_COLOR = "white";
+const CENTER_BACKGROUND_COLOR = '#e5e5e5';
+const SIDEBAR_BACKGROUND_COLOR = '#faf9f9';
+
+export default {
+  base: 'light',
+  colorPrimary: PRIMARY_NAV_BAR_COLOR,
+  colorSecondary: 'deepskyblue',
+
+  // UI
+  appBg: SIDEBAR_BACKGROUND_COLOR,
+  appContentBg: CENTER_BACKGROUND_COLOR,
+  appBorderColor: 'grey',
+  appBorderRadius: 4,
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: 'monospace',
+  // Text colors
+  textColor: 'black',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+  // Toolbar default and active colors
+  barTextColor: 'silver',
+  barSelectedColor: PRIMARY_NAV_BAR_TEXT_COLOR,
+  barBg: PRIMARY_NAV_BAR_COLOR,
+  // Form colors
+  inputBg: 'white',
+  inputBorder: 'silver',
+  inputTextColor: 'black',
+  inputBorderRadius: 4,
+};