feat(onboarding-ui): Administrator information form and Organization …

…information form (#489) * new: admin & org form * fix: components name * Mock ResizeObserver on tests * fix: Form component location * new: react-hook-form implementation * chore: loki * fix: review * fix: wrong export * Upgrade dependencies * Add more props to the form * Disable submit button until any field become dirty * Expose more props for OrganizationInfoForm * Use single translation for FormSteps * Use single translations for form actions * Move translation * Add AdminInfoPage and OrganizationInfoPage * Add minor refactorings Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com> Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
RocketChat · Jul 12, 2021 · b289f68 · b289f68
1 parent 6c360bd
commit b289f68
Show file tree

Hide file tree

Showing 73 changed files with 1,819 additions and 442 deletions.
diff --git a/.vscode/onboarding-ui.code-snippets b/.vscode/onboarding-ui.code-snippets
@@ -0,0 +1,48 @@
+{
+  "React component": {
+    "scope": "typescriptreact",
+    "prefix": "onboard-comp",
+    "body": [
+      "import { ReactElement } from 'react';",
+      "",
+      "type $1Props = {};",
+      "",
+      "const $1 = (props: $1Props): ReactElement => {",
+      "  props;",
+      "",
+      "  return <></>;",
+      "};",
+      "",
+      "export default $1;",
+      ""
+    ],
+    "description": "React component for onboarding-ui"
+  },
+  "Storybook story": {
+    "scope": "typescriptreact",
+    "prefix": "onboard-story",
+    "body": [
+      "import { Meta, Story } from '@storybook/react';",
+      "import { ComponentProps } from 'react';",
+      "",
+      "import $1 from './$1';",
+      "",
+      "type Args = ComponentProps<typeof $1>;",
+      "",
+      "export default {",
+      "  title: '$2/$1',",
+      "  component: $1,",
+      "  parameters: {",
+      "    layout: 'centered',",
+      "    actions: { argTypesRegex: '^on.*' },",
+      "  },",
+      "} as Meta<Args>;",
+      "",
+      "export const _$1: Story<Args> = (args) => (",
+      "  <$1 {...args} />",
+      ");",
+      "_$1.storyName = '$1';"
+    ],
+    "description": "Storybook story for onboarding-ui"
+  }
+}
diff --git a/packages/css-in-js/package.json b/packages/css-in-js/package.json
@@ -48,8 +48,8 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-typescript": "^8.2.1",
-    "@types/jest": "^26.0.23",
-    "@types/stylis": "^4.0.0",
+    "@types/jest": "^26.0.24",
+    "@types/stylis": "^4.0.1",
     "eslint": "^7.29.0",
     "jest": "^27.0.6",
     "lint-staged": "^11.0.0",

diff --git a/packages/emitter/package.json b/packages/emitter/package.json
@@ -48,7 +48,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-typescript": "^8.2.1",
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^26.0.24",
     "eslint": "^7.29.0",
     "jest": "^27.0.6",
     "lint-staged": "^11.0.0",

diff --git a/packages/eslint-config-alt/package.json b/packages/eslint-config-alt/package.json
@@ -45,8 +45,8 @@
   },
   "dependencies": {
     "@rocket.chat/eslint-config": "^0.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.28.1",
-    "@typescript-eslint/parser": "^4.28.1",
+    "@typescript-eslint/eslint-plugin": "^4.28.2",
+    "@typescript-eslint/parser": "^4.28.2",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-import": "^2.23.4",

diff --git a/packages/fuselage-hooks/package.json b/packages/fuselage-hooks/package.json
@@ -50,10 +50,10 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-typescript": "^8.2.1",
-    "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.8",
-    "@types/resize-observer-browser": "^0.1.5",
+    "@types/jest": "^26.0.24",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
+    "@types/resize-observer-browser": "^0.1.6",
     "@types/use-subscription": "^1.0.0",
     "eslint": "^7.29.0",
     "jest": "^27.0.6",

diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json
@@ -57,21 +57,21 @@
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
-    "@rocket.chat/apps-engine": "^1.27.0",
+    "@rocket.chat/apps-engine": "^1.27.1",
     "@rocket.chat/eslint-config-alt": "^0.27.0",
     "@rocket.chat/fuselage": "^0.27.0",
     "@rocket.chat/fuselage-hooks": "^0.27.0",
     "@rocket.chat/fuselage-polyfills": "^0.27.0",
     "@rocket.chat/icons": "^0.27.0",
     "@rocket.chat/prettier-config": "^0.27.0",
     "@rocket.chat/ui-kit": "^0.27.0",
-    "@storybook/addon-essentials": "^6.3.1",
-    "@storybook/addons": "^6.3.1",
-    "@storybook/builder-webpack5": "^6.3.1",
-    "@storybook/manager-webpack5": "^6.3.1",
-    "@storybook/react": "^6.3.1",
-    "@storybook/source-loader": "^6.3.1",
-    "@storybook/theming": "^6.3.1",
+    "@storybook/addon-essentials": "^6.3.4",
+    "@storybook/addons": "^6.3.4",
+    "@storybook/builder-webpack5": "^6.3.4",
+    "@storybook/manager-webpack5": "^6.3.4",
+    "@storybook/react": "^6.3.4",
+    "@storybook/source-loader": "^6.3.4",
+    "@storybook/theming": "^6.3.4",
     "babel-loader": "^8.2.2",
     "cross-env": "^7.0.3",
     "eslint": "^7.29.0",

diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json
@@ -79,20 +79,20 @@
     "@rocket.chat/fuselage-polyfills": "^0.27.0",
     "@rocket.chat/icons": "^0.27.0",
     "@rocket.chat/prettier-config": "^0.27.0",
-    "@storybook/addon-essentials": "^6.3.1",
-    "@storybook/addon-jest": "^6.3.1",
-    "@storybook/addon-links": "^6.3.1",
-    "@storybook/addons": "^6.3.1",
-    "@storybook/builder-webpack5": "^6.3.1",
-    "@storybook/manager-webpack5": "^6.3.1",
-    "@storybook/react": "^6.3.1",
-    "@storybook/source-loader": "^6.3.1",
-    "@storybook/theming": "^6.3.1",
+    "@storybook/addon-essentials": "^6.3.4",
+    "@storybook/addon-jest": "^6.3.4",
+    "@storybook/addon-links": "^6.3.4",
+    "@storybook/addons": "^6.3.4",
+    "@storybook/builder-webpack5": "^6.3.4",
+    "@storybook/manager-webpack5": "^6.3.4",
+    "@storybook/react": "^6.3.4",
+    "@storybook/source-loader": "^6.3.4",
+    "@storybook/theming": "^6.3.4",
     "@types/invariant": "^2.2.34",
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^26.0.24",
     "autoprefixer": "^10.2.6",
     "babel-loader": "^8.2.2",
-    "caniuse-lite": "^1.0.30001241",
+    "caniuse-lite": "^1.0.30001243",
     "copy-webpack-plugin": "^9.0.1",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.6",

diff --git a/packages/message-parser/package.json b/packages/message-parser/package.json
@@ -58,9 +58,9 @@
     "@rocket.chat/eslint-config-alt": "^0.27.0",
     "@rocket.chat/peggy-loader": "^0.27.0",
     "@rocket.chat/prettier-config": "^0.27.0",
-    "@types/jest": "^26.0.23",
-    "@types/node": "^15.12.5",
-    "@typescript-eslint/parser": "^4.28.1",
+    "@types/jest": "^26.0.24",
+    "@types/node": "^15.14.1",
+    "@typescript-eslint/parser": "^4.28.2",
     "babel-loader": "^8.2.2",
     "eslint": "^7.29.0",
     "jest": "^27.0.6",

diff --git a/packages/mp3-encoder/package.json b/packages/mp3-encoder/package.json
@@ -53,7 +53,7 @@
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-typescript": "^8.2.1",
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^26.0.24",
     "eslint": "^7.29.0",
     "jest": "^27.0.6",
     "lint-staged": "^11.0.0",

diff --git a/packages/onboarding-ui/.i18n/en.i18n.json b/packages/onboarding-ui/.i18n/en.i18n.json
@@ -1,5 +1,18 @@
 {
+  "component": {
+    "form": {
+      "steps": "Step {{currentStep}} of {{stepCount}}",
+      "action": {
+        "back": "Back",
+        "next": "Next"
+      },
+      "requiredField": "This field is required"
+    }
+  },
   "page": {
+    "form": {
+      "title": "Let's Launch Your Workspace"
+    },
     "awaitingConfirmation": {
       "title": "Awaiting confirmation",
       "subtitle": "We have sent you an email to {{emailAddress}} with a confirmation link. Please verify that the security code below matches the one in the email.",
@@ -12,5 +25,55 @@
     "confirmationProcess": {
       "title": "Confirmation in Process"
     }
+  },
+  "form": {
+    "adminInfoForm": {
+      "title": "Admin Info",
+      "subtitle": "We need this to create an admin profile inside your workspace",
+      "fields": {
+        "fullName": {
+          "label": "Full name",
+          "placeholder": "First and last name"
+        },
+        "username": {
+          "label": "Username",
+          "placeholder": "@username"
+        },
+        "companyEmail": {
+          "label": "Company email",
+          "placeholder": "Company email"
+        },
+        "password": {
+          "label": "Password",
+          "placeholder": "Create password"
+        }
+      }
+    },
+    "organizationInfoForm": {
+      "title": "Organization Info",
+      "subtitle": "Please, bear with us. This info will help us personalize your workspace",
+      "fields": {
+        "organizationName": {
+          "label": "Organization name",
+          "placeholder": "Organization name"
+        },
+        "organizationType": {
+          "label": "Organization type",
+          "placeholder": "Select"
+        },
+        "organizationIndustry": {
+          "label": "Organization industry",
+          "placeholder": "Select"
+        },
+        "organizationSize": {
+          "label": "Organization size",
+          "placeholder": "Select"
+        },
+        "country": {
+          "label": "Country",
+          "placeholder": "Select"
+        }
+      }
+    }
   }
 }