feat: onboarding-ui package (#463)

RocketChat · Jun 17, 2021 · ea0a6c2 · ea0a6c2
1 parent cc0d498
commit ea0a6c2
Show file tree

Hide file tree

Showing 38 changed files with 533 additions and 23 deletions.
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
@@ -37,6 +37,7 @@ jobs:
           path: |
             packages/fuselage/storybook-static
             packages/fuselage-ui-kit/storybook-static
+            packages/onboarding-ui/storybook-static
       - if: github.ref == 'refs/heads/master'
         uses: actions/upload-artifact@v2
         with:
@@ -111,9 +112,10 @@ jobs:
           name: docs
           path: .
       - run: |
-          rm -rf "fuselage/${{ needs.build-and-test.outputs.branch-name }}" "fuselage-ui-kit/${{ needs.build-and-test.outputs.branch-name }}"
+          rm -rf "fuselage/${{ needs.build-and-test.outputs.branch-name }}" "fuselage-ui-kit/${{ needs.build-and-test.outputs.branch-name }}" "onboarding-ui/${{ needs.build-and-test.outputs.branch-name }}"
           mv -v "packages/fuselage/storybook-static" "fuselage/${{ needs.build-and-test.outputs.branch-name }}"
           mv -v "packages/fuselage-ui-kit/storybook-static" "fuselage-ui-kit/${{ needs.build-and-test.outputs.branch-name }}"
+          mv -v "packages/onboarding-ui/storybook-static" "onboarding-ui/${{ needs.build-and-test.outputs.branch-name }}"
           rm -rf packages
       - uses: crazy-max/ghaction-github-pages@v2
         with:

diff --git a/.github/workflows/ci-pr-closed.yml b/.github/workflows/ci-pr-closed.yml
@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
         with:
           ref: gh-pages
-      - run: rm -rf "fuselage/${{ github.event.number }}" "fuselage-ui-kit/${{ github.event.number }}"
+      - run: rm -rf "fuselage/${{ github.event.number }}" "fuselage-ui-kit/${{ github.event.number }}" "onboarding-ui/${{ github.event.number }}"
       - uses: crazy-max/ghaction-github-pages@v2
         with:
           target_branch: gh-pages

diff --git a/.github/workflows/ci-pr-opened.yml b/.github/workflows/ci-pr-opened.yml
@@ -43,6 +43,7 @@ jobs:
           path: |
             fuselage/storybook-static
             fuselage-ui-kit/storybook-static
+            onboarding-ui/storybook-static
 
   publish-to-gh-pages:
     name: Publish to GitHub Pages
@@ -61,9 +62,10 @@ jobs:
           name: storybooks
           path: packages
       - run: |
-          rm -rf "fuselage/${{ needs.download-artifact.outputs.pr-number }}" "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}"
+          rm -rf "fuselage/${{ needs.download-artifact.outputs.pr-number }}" "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}" "onboarding-ui/${{ needs.download-artifact.outputs.pr-number }}"
           mv -v packages/fuselage/storybook-static "fuselage/${{ needs.download-artifact.outputs.pr-number }}"
           mv -v packages/fuselage-ui-kit/storybook-static "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}"
+          mv -v packages/onboarding-ui/storybook-static "onboarding-ui/${{ needs.download-artifact.outputs.pr-number }}"
           rm -rf packages
       - uses: crazy-max/ghaction-github-pages@v2
         with:

diff --git a/.github/workflows/ci-pr.yml b/.github/workflows/ci-pr.yml
@@ -35,6 +35,7 @@ jobs:
           path: |
             packages/fuselage/storybook-static
             packages/fuselage-ui-kit/storybook-static
+            packages/onboarding-ui/storybook-static
 
   test-with-loki:
     name: Test with Loki
@@ -63,11 +64,16 @@ jobs:
       - run: |
           cat packages/fuselage/package.json | sed s/\.docker/.app/ > packages/fuselage/package.json-new
           cat packages/fuselage-ui-kit/package.json | sed s/\.docker/.app/ > packages/fuselage-ui-kit/package.json-new
+          cat packages/onboarding-ui/package.json | sed s/\.docker/.app/ > packages/onboarding-ui/package.json-new
           mv packages/fuselage/package.json-new packages/fuselage/package.json
           mv packages/fuselage-ui-kit/package.json-new packages/fuselage-ui-kit/package.json
+          mv packages/onboarding-ui/package.json-new packages/onboarding-ui/package.json
       - uses: ./.github/actions/loki/test
         with:
           working_dir: ./packages/fuselage
       - uses: ./.github/actions/loki/test
         with:
           working_dir: ./packages/fuselage-ui-kit
+      - uses: ./.github/actions/loki/test
+        with:
+          working_dir: ./packages/onboarding-ui
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -40,6 +40,10 @@
       "directory": "packages/mp3-encoder",
       "changeProcessCWD": true
     },
+    {
+      "directory": "packages/onboarding-ui",
+      "changeProcessCWD": true
+    },
     {
       "directory": "packages/peggy-loader",
       "changeProcessCWD": true

diff --git a/README.md b/README.md
@@ -14,21 +14,22 @@
 ![Pull requests](https://img.shields.io/github/issues-pr/RocketChat/Rocket.Chat.Fuselage?style=flat-square)
 ![GitHub commit activity](https://img.shields.io/github/commit-activity/m/RocketChat/Rocket.Chat.Fuselage?style=flat-square)
 
-| Package                                                                           | Description                                                            | Version                                                                                | Dependencies                                                                                                               |
-| --------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
-| 📦 [`@rocket.chat/css-in-js`](/packages/@rocket.chat/css-in-js)                   | Toolset to transpile and use CSS on runtime                            | ![npm](https://img.shields.io/npm/v/@rocket.chat/css-in-js?style=flat-square)          | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fcss-in-js&style=flat-square)          |
-| 📦 [`@rocket.chat/emitter`](/packages/@rocket.chat/emitter)                       | Event Emitter by Rocket.Chat                                           | ![npm](https://img.shields.io/npm/v/@rocket.chat/emitter?style=flat-square)            | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Femitter&style=flat-square)            |
-| 📦 [`@rocket.chat/eslint-config-alt`](/packages/@rocket.chat/eslint-config-alt)   | ESLint configuration for Rocket.Chat repositories                      | ![npm](https://img.shields.io/npm/v/@rocket.chat/eslint-config-alt?style=flat-square)  | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Feslint-config-alt&style=flat-square)  |
-| 📦 [`@rocket.chat/fuselage`](/packages/@rocket.chat/fuselage)                     |                                                                        | ![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage?style=flat-square)           | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage&style=flat-square)           |
-| 📦 [`@rocket.chat/fuselage-hooks`](/packages/@rocket.chat/fuselage-hooks)         | React hooks for Fuselage, Rocket.Chat's design system and UI toolkit   | ![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-hooks?style=flat-square)     | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-hooks&style=flat-square)     |
-| 📦 [`@rocket.chat/fuselage-polyfills`](/packages/@rocket.chat/fuselage-polyfills) | A bundle of useful poly/ponyfills used by fuselage                     | ![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-polyfills?style=flat-square) | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-polyfills&style=flat-square) |
-| 📦 [`@rocket.chat/fuselage-tokens`](/packages/@rocket.chat/fuselage-tokens)       | Design tokens for Fuselage, Rocket.Chat's design system                | ![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-tokens?style=flat-square)    | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-tokens&style=flat-square)    |
-| 📦 [`@rocket.chat/fuselage-ui-kit`](/packages/@rocket.chat/fuselage-ui-kit)       | UiKit elements for Rocket.Chat Apps built under Fuselage design system | ![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-ui-kit?style=flat-square)    | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-ui-kit&style=flat-square)    |
-| 📦 [`@rocket.chat/icons`](/packages/@rocket.chat/icons)                           |                                                                        | ![npm](https://img.shields.io/npm/v/@rocket.chat/icons?style=flat-square)              | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ficons&style=flat-square)              |
-| 📦 [`@rocket.chat/memo`](/packages/@rocket.chat/memo)                             | Memoization utilities                                                  | ![npm](https://img.shields.io/npm/v/@rocket.chat/memo?style=flat-square)               | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fmemo&style=flat-square)               |
-| 📦 [`@rocket.chat/message-parser`](/packages/@rocket.chat/message-parser)         | Rocket.Chat parser for messages                                        | ![npm](https://img.shields.io/npm/v/@rocket.chat/message-parser?style=flat-square)     | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fmessage-parser&style=flat-square)     |
-| 📦 [`@rocket.chat/mp3-encoder`](/packages/@rocket.chat/mp3-encoder)               | A LAME encoder to be used in web workers                               | ![npm](https://img.shields.io/npm/v/@rocket.chat/mp3-encoder?style=flat-square)        | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fmp3-encoder&style=flat-square)        |
-| 📦 [`@rocket.chat/peggy-loader`](/packages/@rocket.chat/peggy-loader)             | Peggy loader for webpack                                               | ![npm](https://img.shields.io/npm/v/@rocket.chat/peggy-loader?style=flat-square)       | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fpeggy-loader&style=flat-square)       |
-| 📦 [`@rocket.chat/prettier-config`](/packages/@rocket.chat/prettier-config)       | Prettier configuration for Rocket.Chat repositories                    | ![npm](https://img.shields.io/npm/v/@rocket.chat/prettier-config?style=flat-square)    | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fprettier-config&style=flat-square)    |
-| 📦 [`@rocket.chat/string-helpers`](/packages/@rocket.chat/string-helpers)         | Helper functions for string manipulation                               | ![npm](https://img.shields.io/npm/v/@rocket.chat/string-helpers?style=flat-square)     | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fstring-helpers&style=flat-square)     |
-| 📦 [`@rocket.chat/ui-kit`](/packages/@rocket.chat/ui-kit)                         | Interactive UI elements for Rocket.Chat Apps                           | ![npm](https://img.shields.io/npm/v/@rocket.chat/ui-kit?style=flat-square)             | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fui-kit&style=flat-square)             |
+| Package                                                                           | Description                                                                  | Version                                                                                | Dependencies                                                                                                               |
+| --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| 📦 [`@rocket.chat/css-in-js`](/packages/@rocket.chat/css-in-js)                   | Toolset to transpile and use CSS on runtime                                  | ![npm](https://img.shields.io/npm/v/@rocket.chat/css-in-js?style=flat-square)          | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fcss-in-js&style=flat-square)          |
+| 📦 [`@rocket.chat/emitter`](/packages/@rocket.chat/emitter)                       | Event Emitter by Rocket.Chat                                                 | ![npm](https://img.shields.io/npm/v/@rocket.chat/emitter?style=flat-square)            | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Femitter&style=flat-square)            |
+| 📦 [`@rocket.chat/eslint-config-alt`](/packages/@rocket.chat/eslint-config-alt)   | ESLint configuration for Rocket.Chat repositories                            | ![npm](https://img.shields.io/npm/v/@rocket.chat/eslint-config-alt?style=flat-square)  | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Feslint-config-alt&style=flat-square)  |
+| 📦 [`@rocket.chat/fuselage`](/packages/@rocket.chat/fuselage)                     |                                                                              | ![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage?style=flat-square)           | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage&style=flat-square)           |
+| 📦 [`@rocket.chat/fuselage-hooks`](/packages/@rocket.chat/fuselage-hooks)         | React hooks for Fuselage, Rocket.Chat's design system and UI toolkit         | ![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-hooks?style=flat-square)     | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-hooks&style=flat-square)     |
+| 📦 [`@rocket.chat/fuselage-polyfills`](/packages/@rocket.chat/fuselage-polyfills) | A bundle of useful poly/ponyfills used by fuselage                           | ![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-polyfills?style=flat-square) | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-polyfills&style=flat-square) |
+| 📦 [`@rocket.chat/fuselage-tokens`](/packages/@rocket.chat/fuselage-tokens)       | Design tokens for Fuselage, Rocket.Chat's design system                      | ![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-tokens?style=flat-square)    | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-tokens&style=flat-square)    |
+| 📦 [`@rocket.chat/fuselage-ui-kit`](/packages/@rocket.chat/fuselage-ui-kit)       | UiKit elements for Rocket.Chat Apps built under Fuselage design system       | ![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-ui-kit?style=flat-square)    | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-ui-kit&style=flat-square)    |
+| 📦 [`@rocket.chat/icons`](/packages/@rocket.chat/icons)                           |                                                                              | ![npm](https://img.shields.io/npm/v/@rocket.chat/icons?style=flat-square)              | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ficons&style=flat-square)              |
+| 📦 [`@rocket.chat/memo`](/packages/@rocket.chat/memo)                             | Memoization utilities                                                        | ![npm](https://img.shields.io/npm/v/@rocket.chat/memo?style=flat-square)               | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fmemo&style=flat-square)               |
+| 📦 [`@rocket.chat/message-parser`](/packages/@rocket.chat/message-parser)         | Rocket.Chat parser for messages                                              | ![npm](https://img.shields.io/npm/v/@rocket.chat/message-parser?style=flat-square)     | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fmessage-parser&style=flat-square)     |
+| 📦 [`@rocket.chat/mp3-encoder`](/packages/@rocket.chat/mp3-encoder)               | A LAME encoder to be used in web workers                                     | ![npm](https://img.shields.io/npm/v/@rocket.chat/mp3-encoder?style=flat-square)        | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fmp3-encoder&style=flat-square)        |
+| 📦 [`@rocket.chat/onboarding-ui`](/packages/@rocket.chat/onboarding-ui)           | Set of components and functions for the onboarding experience on Rocket.Chat | ![npm](https://img.shields.io/npm/v/@rocket.chat/onboarding-ui?style=flat-square)      | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fonboarding-ui&style=flat-square)      |
+| 📦 [`@rocket.chat/peggy-loader`](/packages/@rocket.chat/peggy-loader)             | Peggy loader for webpack                                                     | ![npm](https://img.shields.io/npm/v/@rocket.chat/peggy-loader?style=flat-square)       | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fpeggy-loader&style=flat-square)       |
+| 📦 [`@rocket.chat/prettier-config`](/packages/@rocket.chat/prettier-config)       | Prettier configuration for Rocket.Chat repositories                          | ![npm](https://img.shields.io/npm/v/@rocket.chat/prettier-config?style=flat-square)    | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fprettier-config&style=flat-square)    |
+| 📦 [`@rocket.chat/string-helpers`](/packages/@rocket.chat/string-helpers)         | Helper functions for string manipulation                                     | ![npm](https://img.shields.io/npm/v/@rocket.chat/string-helpers?style=flat-square)     | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fstring-helpers&style=flat-square)     |
+| 📦 [`@rocket.chat/ui-kit`](/packages/@rocket.chat/ui-kit)                         | Interactive UI elements for Rocket.Chat Apps                                 | ![npm](https://img.shields.io/npm/v/@rocket.chat/ui-kit?style=flat-square)             | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fui-kit&style=flat-square)             |
diff --git a/packages/fuselage/README.md b/packages/fuselage/README.md
@@ -23,11 +23,11 @@
 Firstly, install the peer dependencies (prerequisites):
 
 ```sh
-npm i @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom
+npm i @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom react-virtuoso
 
 # or, if you are using yarn:
 
-yarn add @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom
+yarn add @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom react-virtuoso
 ```
 
 Add `@rocket.chat/fuselage` as a dependency:

diff --git a/packages/onboarding-ui/.eslintignore b/packages/onboarding-ui/.eslintignore
@@ -0,0 +1,3 @@
+/node_modules
+/dist
+!/.storybook
diff --git a/packages/onboarding-ui/.eslintrc.js b/packages/onboarding-ui/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  extends: '@rocket.chat/eslint-config-alt/typescript',
+  env: {
+    jest: true,
+  },
+};
diff --git a/packages/onboarding-ui/.gitignore b/packages/onboarding-ui/.gitignore
@@ -0,0 +1,2 @@
+/.storybook/jest-results.json
+/dist
diff --git a/packages/onboarding-ui/.loki/reference/chrome_iphone7_MyComponent_My_Component.png b/packages/onboarding-ui/.loki/reference/chrome_iphone7_MyComponent_My_Component.png
diff --git a/packages/onboarding-ui/.loki/reference/chrome_laptop_MyComponent_My_Component.png b/packages/onboarding-ui/.loki/reference/chrome_laptop_MyComponent_My_Component.png
diff --git a/packages/onboarding-ui/.prettierignore b/packages/onboarding-ui/.prettierignore
@@ -0,0 +1,2 @@
+/node_modules
+/dist
diff --git a/packages/onboarding-ui/.prettierrc.js b/packages/onboarding-ui/.prettierrc.js
@@ -0,0 +1 @@
+module.exports = require('@rocket.chat/prettier-config/fuselage');
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = require('@rocket.chat/prettier-config/fuselage');