WIP Feature/smart form

.gitignore

@@ -27,3 +27,6 @@ coverage/
 coverage-unit/
 dist
 package-lock.json
+
+#vscode extension
+.vscode/snipsnap.code-snippets

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  stories: [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+    // specifying packages folder is important to avoid rebuilding on cache change
+    // @see https://github.com/storybookjs/storybook/issues/14342
+    "../packages/**/*.stories.mdx",
+    "../packages/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+};

.storybook/preview.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { IntlProvider } from "../packages/i18n";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const decorators = [
+  (Story) => (
+    <IntlProvider locale="fr">
+      <Story />
+    </IntlProvider>
+  ),
+];
+
+// Those events are triggered by the form when you activate
+// warn on unsaved changes
+// The end-user app should listen to those events to set route blocking
+window.addEventListener("blocktransition", console.log);
+window.addEventListener("unblocktransition", console.log);

.vscode/launch.json

@@ -2,6 +2,21 @@
   "version": "0.2.0",
   "nodeVersionHint": 10,
   "configurations": [
+    {
+                 "type": "chrome",
+            "request": "launch",
+            "name": "Storybook Debug",
+            "breakOnLoad": true,
+            "url": "http://localhost:6006",
+            "sourceMaps": true,
+            "webRoot": "${workspaceFolder}",
+            "sourceMapPathOverrides": {
+                "webpack:///*": "${webRoot}/*",
+                "webpack:///./*": "${webRoot}/*",
+                "webpack:///src/*": "${webRoot}/*",
+                "webpack:///./~/*": "${webRoot}/node_modules/*"
+            }
+        },
     {
       "type": "node",
       "request": "launch",

.vscode/ui-snippets.code-snippets

@@ -0,0 +1,49 @@
+{
+	// Place your vulcan-npm workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
+	// Placeholders with the same ids are connected.
+	// Example:
+	// 'Print to console': {
+	// 	'scope': 'javascript,typescript',
+	// 	'prefix': 'log',
+	// 	'body': [
+	// 		'console.log("$1");',
+	// 		'$2'
+	// 	],
+	// 	'description': 'Log output to console'
+	// }
+	"Storybook story": {
+		"scope": "typescriptreact",
+		"prefix": "story",
+		"body": [
+"import React from 'react'",
+"import { Story, Meta } from '@storybook/react'",
+"import { $1, $1Props } from '../$1'",
+"export default {",
+"  component: $1,",
+"  title: '$1',",
+"  decorators: [",
+"    (Story) => (",
+"      <div>",
+"          <Story />",
+"      </div>",
+"    ),",
+"  ],",
+"  args: {",
+"  },",
+"  parameters: { actions: { argTypesRegex: '^.*Callback$' } },",
+"} as Meta<$1Props>;",
+"",
+"const $1Template: Story<$1Props> = (args) => <$1 {...args} />",
+"export const Default$1 = $1Template.bind({});",
+		],
+		"description": "New storybook story",
+	}
+
+
+
+
+}

README.md

@@ -1,21 +1,50 @@
+# Vulcan NPM
+
 ## Contribute
 
 For faster development, you may instead want to contribute to [Vulcan Next Starter](https://github.com/VulcanJS/vulcan-next-starter/issues/1). NPM packages will be published in this repo when they reach sufficient maturity.
 
-### Install
+After you've read the README, also check `./docs/contribute.md` for more information about contributions.
 
-Install Lerna
+## Install Vulcan NPM and start coding
 
+Please use [Yarn](https://yarnpkg.com/)
+
+```sh
+yarn # will install + bootstrap learn
+yarn run build # build all packages
 ```
-npm i -g lerna
-```
 
-### Develop
+Now you can either run Storybook `yarn run storybook` or unit tests `yarn run test` and start working.
+
+## Plug to another local application
+
+If you want to connect your local Vulcan NPM install to an existing application, please check [Vulcan Next documentation](https://github.com/VulcanJS/vulcan-next/blob/devel/src/content/docs/contributing.md).
+
+It's a 2 step process:
+
+- you publish the packages locally using Yalc `yarn run local-publish` 
+- you install them, using Yalc, in your app.
+
+We use Yalc and not `yarn link` because linking is not sufficient, it raises a lot of issues with locally installed packages.
+
+Now `@vulcanjs/xxx` will be available in your own application.
+
+## Tips
+
+### Dependency from a local package to another local package
 
 Install packages using `lerna bootstrap`. 
 
-To use Vulcan NPM local install in Vulcan Next, see Vulcan Next contribution doc.
+To add a dependency between 2 local Vulcan packages: 
+
+```sh
+yarn lerna add @vulcanjs/<your-dependency> --scope=@vulcanjs/<the-parent-package>
+```
+
+You need this command because the package won't exist yet on NPMJS, so you need Lerna to manage the dependency.
+You can run it from anywhere, and the `--scope` part is mandatory (otherwise the package get added everywhere).
 
 ## Resources
 
-- [Babel monorepo](https://github.com/babel/babel), a great example of Lerna project
+- [Babel monorepo](https://github.com/babel/babel), a great example of Lerna project

docs/contribute.md

@@ -1,31 +1,10 @@
-## Lerna
-
-### Install
-
-```sh
-# Will install all NPM packages
-# It uses yarn workspaces to avoid redundancy
-lerna bootstrap
-```
-
-#### Use in another local package
-
-In `vulcan-npm`, link all your packages:
+# Contributing
 
-```sh
-# This is automatically done after an install
-yarn link
-```
+## Read the Readme
 
-In your app, link packages:
+Start by reading the Readme for basic install information.
 
-```sh
-# USE YARN, it won't work with npm
-yarn link @vulcanjs/model
-yarn link @vulcanjs/schema
-...
-# NOTE: we don't yet have a way to link everything
-```
+## Lerna
 
 ### Yarn workspaces
 
@@ -65,6 +44,8 @@ If you write a test for package "React Hooks", and discover and fix a bug in pac
 Define Peer Dependencies correctly. Many packages have side effects that are problematic if you duplicate them. Those packages should be
 peer-dependencies in the relevant `package.json`. You may add them at the root of the project too in development.
 
+Also, use Yalc to install local version of Vulcan NPM within another local app, see the README for more information.
+
 ##### Example with Mongoose
 
 ###### Make it a peer dependency
@@ -84,29 +65,4 @@ In `./package.json`:
 devDependencies: {
     "mongoose": "^5.10.16"
 }
-```
-
-###### Setup for local install
-
-This install `mongoose` as a global dev dependency so we can write unit tests for instance.
-
-And now enable local development:
-In `scripts/link-duplicates`:
-
-```
-cd ./node_modules/@apollo/client && yarn link && cd ../..
-```
-
-When you link the packages for local development, the `mongoose` from `vulcan-npm` will be used. This prevents potential conflicts.
-
-In your app:
-
-```
-yarn link mongoose
-```
-
-It forces your app to use the `mongoose` install from `vulcan-npm`.
-
-This guarantees that you use one and only one version of Mongoose.
-
-Note: we'd like to simplify this process in the future, maybe by detecting peer dependencies automatically.
+```

jest.config.js

@@ -113,7 +113,7 @@ module.exports = {
   // preset: undefined,
 
   // Run tests from one or more projects
-  projects: ["<rootDir>/packages/*"],
+  // projects: ["<rootDir>/packages/*"],
 
   // Use this configuration option to add custom reporters to Jest
   // reporters: undefined,
@@ -143,7 +143,7 @@ module.exports = {
   // runner: "jest-runner",
 
   // The paths to modules that run some code to configure or set up the testing environment before each test
-  // setupFiles: [],
+  setupFiles: ["./jest/setup.js"],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
   // setupFilesAfterEnv: [],

jest/setup.js

@@ -0,0 +1,6 @@
+// setupFile.js <-- this will run before the tests in jest.
+// STORYBOOK global decorators
+import { setGlobalConfig } from "@storybook/testing-react";
+import * as globalStorybookConfig from "../.storybook/preview"; // path of your preview.js file
+
+setGlobalConfig(globalStorybookConfig);

package.json

@@ -9,15 +9,25 @@
     "unlink-yarn-legacy": "lerna exec yarn unlink",
     "clean": "rm -Rf ./node_modules ./packages/*/dist ./packages/*/node_modules",
     "test": "jest",
-    "coverage": "jest --coverage"
+    "coverage": "jest --coverage",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "devDependencies": {
-    "@apollo/client": "3.2.5",
+    "@apollo/client": "^3.3.19",
     "@babel/core": "^7.11.6",
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
+    "@mdx-js/react": "^1.6.22",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-docs": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/react": "^6.2.9",
+    "@storybook/testing-react": "^0.0.17",
+    "@testing-library/react": "^11.2.7",
     "@types/jest": "^26.0.14",
     "@types/node": "^13.7.6",
     "@types/react": "^16.9.23",
@@ -28,6 +38,7 @@
     "jest": "^26.4.2",
     "lerna": "^3.22.1",
     "mongoose": "^5.10.16",
+    "operation-name-mock-link": "^0.0.6",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "typescript": "^3.8.2",
@@ -40,7 +51,16 @@
   "publishConfig": {
     "access": "public"
   },
-  "workspaces": [
-    "packages/*"
-  ]
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ],
+    "nohoist": [
+      "@storybook",
+      "@storybook/addon-docs",
+      "**/@storybook",
+      "**/@storybook/**"
+    ]
+  },
+  "dependencies": {}
 }