chore: make it a monorepo with the design system

.github/workflows/if-nodejs-release.yml

@@ -17,7 +17,6 @@ on:
       - alpha
 
 jobs:
-
   test-nodejs:
     # We just check the message of first commit as there is always just one commit because we squash into one before merging
     # "commits" contains array of objects where one of the properties is commit "message"
@@ -77,15 +76,15 @@ jobs:
           git config --global core.autocrlf false
           git config --global core.eol lf
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Check if Node.js project and has package.json
         id: packagejson
         run: test -e ./package.json && echo "::set-output name=exists::true" || echo "::set-output name=exists::false"
       - if: steps.packagejson.outputs.exists == 'true'
         name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
       - if: steps.packagejson.outputs.exists == 'true'
         name: Install dependencies
         run: npm install
@@ -110,4 +109,4 @@ jobs:
           fields: repo,action,workflow
           text: 'Release workflow failed in release job'
         env:
-          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_CI_FAIL_NOTIFY }}
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_CI_FAIL_NOTIFY }}

.github/workflows/if-nodejs-version-bump.yml

@@ -4,9 +4,9 @@
 # It does magic only if there is package.json file in the root of the project
 name: Version bump - if Node.js project
 
-on: 
+on:
   release:
-    types: 
+    types:
       - published
 
 jobs:
@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           # target branch of release. More info https://docs.github.com/en/rest/reference/repos#releases
           # in case release is created from release branch then we need to checkout from given branch
@@ -26,18 +26,18 @@ jobs:
         run: test -e ./package.json && echo "::set-output name=exists::true" || echo "::set-output name=exists::false"
       - if: steps.packagejson.outputs.exists == 'true'
         name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
       - if: steps.packagejson.outputs.exists == 'true'
         name: Install dependencies
         run: npm install
       - if: steps.packagejson.outputs.exists == 'true'
         name: Assets generation
-        run: npm run generate:assets
-      - if: steps.packagejson.outputs.exists == 'true'  
+        run: npm run generate:assets --if-present
+      - if: steps.packagejson.outputs.exists == 'true'
         name: Bump version in package.json
         # There is no need to substract "v" from the tag as version script handles it
         # When adding "bump:version" script in package.json, make sure no tags are added by default (--no-git-tag-version) as they are already added by release workflow
@@ -62,4 +62,4 @@ jobs:
           fields: repo,action,workflow
           text: 'Unable to bump the version in package.json after the release'
         env:
-          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_CI_FAIL_NOTIFY }}
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_CI_FAIL_NOTIFY }}

.gitignore

@@ -1,5 +1,8 @@
 .DS_Store
-/node_modules
+node_modules
 .vscode/
 /lib
-/build
+build
+dist
+.turbo
+.env

.gitpod.yml

@@ -1,7 +1,7 @@
 # List the start up tasks. Learn more https://www.gitpod.io/docs/config-start-tasks/
 tasks:
   - init: npm install # runs during prebuild
-    command: npm start
+    command: npm start --workspace apps/studio
 
 # List the ports to expose. Learn more https://www.gitpod.io/docs/config-ports/
 ports:

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

README.md

@@ -1,117 +1,52 @@
-[![AsyncAPI Studio](./assets/logo.png)](https://studio.asyncapi.com)
+# Studio
 
-One place that allows you to develop an AsyncAPI document, validate it, convert it to the latest version, preview the documentation and visualize the events flow.
+This is a monorepo containing Studio source code, design system, and all their dependencies.
 
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors-)
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
+### Installing
 
----
+Clone this repo and run:
 
-## :loudspeaker: ATTENTION:
-
-This project is still under development and has not reached version 1.0.0 yet. This means that its API/styling/features may contain breaking changes until we're able to deploy the first stable version and begin semantic versioning.
-
----
-
-<!-- toc is generated with GitHub Actions do not remove toc markers -->
-
-<!-- toc -->
-
-- [Requirements](#requirements)
-- [Using it locally](#using-it-locally)
-- [Using it via Docker](#using-it-via-docker)
-- [Development](#development)
-  * [Spin up Gitpod](#spin-up-gitpod)
-- [Contribution](#contribution)
-- [Contributors ✨](#contributors-%E2%9C%A8)
-
-<!-- tocstop -->
-
-## Requirements
+```
+npm install
+```
 
-- [NodeJS](https://nodejs.org/en/) >= 14
+> **Note:** NPM v7+ is required.
 
-## Using it locally
+## Development
 
-Run:
+#### Run Studio locally
 
-```bash
-npm install
-npm start
+```
+npm run studio
 ```
 
-and then go to [http://localhost:3000](http://localhost:3000).
+#### Run the Design System locally
 
-## Using it via Docker
+```
+npm run ds
+```
 
-Run:
+#### Run Studio and the Design System locally at the same time
 
-```bash
-docker run -it -p 8000:80 asyncapi/studio
+```
+npm run dev
 ```
 
-and then go to [http://localhost:8000](http://localhost:8000).
+#### Build Studio for production
 
-The `asyncapi/studio` image is based on the official `nginx` image.
-Please refer to the [Nginx documentation](https://registry.hub.docker.com/_/nginx/) to learn how to e.g. pass a custom `nginx` configuration or plug in additional volumes.
+```
+npm run build:studio
+```
 
-In some hosting scenarios (e.g. Docker Compose, Kubernetes) the container might not be exposed at the root path of the host.
-Set the environment variable `BASE_URL` to let AsyncAPI Studio know from where to resolve static assets:
+#### Build the Design System for production
 
-```bash
-docker run -it -p 8000:80 -e BASE_URL=/a/custom/path asyncapi/studio
+```
+npm run build:ds
 ```
 
-Studio is also available as a Docker Desktop Extension. For more information, check [the related repository](https://github.com/thiyagu06/asyncapi-studio-docker-extension).
+#### Build Studio and the Design System for production
 
-## Development
+```
+npm run build
+```
 
-1. Setup project by installing dependencies `npm install`
-2. Write code and tests.
-3. Make sure all tests pass `npm test`
-
-### Spin up Gitpod 
-In order to prepare and spin up a Gitpod dev environment for our project, we configured our workspace through a [.gitpod.yml](/.gitpod.yml) file.
-
-To spin up a Gitpod, go to http://gitpod.io/#https://github.com/asyncapi/studio.
-
-## Contribution
-
-Read [CONTRIBUTING](https://github.com/asyncapi/.github/blob/master/CONTRIBUTING.md) guide.
-
-## Contributors ✨
-
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tbody>
-    <tr>
-      <td align="center"><a href="https://github.com/magicmatatjahu"><img src="https://avatars.githubusercontent.com/u/20404945?v=4?s=100" width="100px;" alt="Maciej Urbańczyk"/><br /><sub><b>Maciej Urbańczyk</b></sub></a><br /><a href="#maintenance-magicmatatjahu" title="Maintenance">🚧</a> <a href="https://github.com/asyncapi/studio/commits?author=magicmatatjahu" title="Code">💻</a> <a href="https://github.com/asyncapi/studio/commits?author=magicmatatjahu" title="Documentation">📖</a> <a href="https://github.com/asyncapi/studio/issues?q=author%3Amagicmatatjahu" title="Bug reports">🐛</a> <a href="#ideas-magicmatatjahu" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/asyncapi/studio/pulls?q=is%3Apr+reviewed-by%3Amagicmatatjahu" title="Reviewed Pull Requests">👀</a> <a href="#design-magicmatatjahu" title="Design">🎨</a> <a href="https://github.com/asyncapi/studio/commits?author=magicmatatjahu" title="Tests">⚠️</a> <a href="#infra-magicmatatjahu" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#mentoring-magicmatatjahu" title="Mentoring">🧑‍🏫</a></td>
-      <td align="center"><a href="http://www.fmvilas.com/"><img src="https://avatars.githubusercontent.com/u/242119?v=4?s=100" width="100px;" alt="Fran Méndez"/><br /><sub><b>Fran Méndez</b></sub></a><br /><a href="#maintenance-fmvilas" title="Maintenance">🚧</a> <a href="https://github.com/asyncapi/studio/commits?author=fmvilas" title="Code">💻</a> <a href="https://github.com/asyncapi/studio/commits?author=fmvilas" title="Documentation">📖</a> <a href="https://github.com/asyncapi/studio/issues?q=author%3Afmvilas" title="Bug reports">🐛</a> <a href="#ideas-fmvilas" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/asyncapi/studio/pulls?q=is%3Apr+reviewed-by%3Afmvilas" title="Reviewed Pull Requests">👀</a> <a href="#design-fmvilas" title="Design">🎨</a> <a href="https://github.com/asyncapi/studio/commits?author=fmvilas" title="Tests">⚠️</a> <a href="#infra-fmvilas" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#mentoring-fmvilas" title="Mentoring">🧑‍🏫</a></td>
-      <td align="center"><a href="https://boyney.io/"><img src="https://avatars.githubusercontent.com/u/3268013?v=4?s=100" width="100px;" alt="David Boyne"/><br /><sub><b>David Boyne</b></sub></a><br /><a href="#maintenance-boyney123" title="Maintenance">🚧</a> <a href="https://github.com/asyncapi/studio/commits?author=boyney123" title="Code">💻</a> <a href="https://github.com/asyncapi/studio/commits?author=boyney123" title="Documentation">📖</a> <a href="https://github.com/asyncapi/studio/issues?q=author%3Aboyney123" title="Bug reports">🐛</a> <a href="#ideas-boyney123" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/asyncapi/studio/pulls?q=is%3Apr+reviewed-by%3Aboyney123" title="Reviewed Pull Requests">👀</a> <a href="#design-boyney123" title="Design">🎨</a> <a href="https://github.com/asyncapi/studio/commits?author=boyney123" title="Tests">⚠️</a> <a href="#mentoring-boyney123" title="Mentoring">🧑‍🏫</a></td>
-      <td align="center"><a href="https://missyturco.com/"><img src="https://avatars.githubusercontent.com/u/60163079?v=4?s=100" width="100px;" alt="Missy Turco"/><br /><sub><b>Missy Turco</b></sub></a><br /><a href="#maintenance-mcturco" title="Maintenance">🚧</a> <a href="https://github.com/asyncapi/studio/commits?author=mcturco" title="Code">💻</a> <a href="#ideas-mcturco" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/asyncapi/studio/pulls?q=is%3Apr+reviewed-by%3Amcturco" title="Reviewed Pull Requests">👀</a> <a href="#design-mcturco" title="Design">🎨</a> <a href="#mentoring-mcturco" title="Mentoring">🧑‍🏫</a></td>
-      <td align="center"><a href="https://florian.greinacher.de/"><img src="https://avatars.githubusercontent.com/u/1540469?v=4?s=100" width="100px;" alt="Florian Greinacher"/><br /><sub><b>Florian Greinacher</b></sub></a><br /><a href="https://github.com/asyncapi/studio/commits?author=fgreinacher" title="Code">💻</a> <a href="#infra-fgreinacher" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/asyncapi/studio/issues?q=author%3Afgreinacher" title="Bug reports">🐛</a> <a href="https://github.com/asyncapi/studio/commits?author=fgreinacher" title="Documentation">📖</a></td>
-      <td align="center"><a href="https://ritik307.github.io/portfolio/"><img src="https://avatars.githubusercontent.com/u/22374829?v=4?s=100" width="100px;" alt="Ritik Rawal"/><br /><sub><b>Ritik Rawal</b></sub></a><br /><a href="https://github.com/asyncapi/studio/commits?author=ritik307" title="Code">💻</a></td>
-      <td align="center"><a href="https://samridhi-98.github.io/Portfolio"><img src="https://avatars.githubusercontent.com/u/54466041?v=4?s=100" width="100px;" alt="Samriddhi"/><br /><sub><b>Samriddhi</b></sub></a><br /><a href="https://github.com/asyncapi/studio/commits?author=Samridhi-98" title="Code">💻</a></td>
-    </tr>
-    <tr>
-      <td align="center"><a href="https://paulinenarvas.com/"><img src="https://avatars.githubusercontent.com/u/17087373?v=4?s=100" width="100px;" alt="Pauline P. Narvas"/><br /><sub><b>Pauline P. Narvas</b></sub></a><br /><a href="https://github.com/asyncapi/studio/commits?author=pawlean" title="Code">💻</a> <a href="#infra-pawlean" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/asyncapi/studio/commits?author=pawlean" title="Documentation">📖</a></td>
-      <td align="center"><a href="https://linkedin.com/in/jonaslagoni/"><img src="https://avatars.githubusercontent.com/u/13396189?v=4?s=100" width="100px;" alt="Jonas Lagoni"/><br /><sub><b>Jonas Lagoni</b></sub></a><br /><a href="#ideas-jonaslagoni" title="Ideas, Planning, & Feedback">🤔</a> <a href="#question-jonaslagoni" title="Answering Questions">💬</a> <a href="https://github.com/asyncapi/studio/pulls?q=is%3Apr+reviewed-by%3Ajonaslagoni" title="Reviewed Pull Requests">👀</a></td>
-      <td align="center"><a href="https://github.com/smoya"><img src="https://avatars.githubusercontent.com/u/1083296?v=4?s=100" width="100px;" alt="Sergio Moya"/><br /><sub><b>Sergio Moya</b></sub></a><br /><a href="#ideas-smoya" title="Ideas, Planning, & Feedback">🤔</a> <a href="#question-smoya" title="Answering Questions">💬</a></td>
-      <td align="center"><a href="https://bolt04.github.io/react-ultimate-resume/"><img src="https://avatars.githubusercontent.com/u/18630253?v=4?s=100" width="100px;" alt="David Pereira"/><br /><sub><b>David Pereira</b></sub></a><br /><a href="#ideas-BOLT04" title="Ideas, Planning, & Feedback">🤔</a> <a href="#question-BOLT04" title="Answering Questions">💬</a></td>
-      <td align="center"><a href="https://nawedali.tech"><img src="https://avatars.githubusercontent.com/u/83456083?v=4?s=100" width="100px;" alt="Nawed Ali"/><br /><sub><b>Nawed Ali</b></sub></a><br /><a href="https://github.com/asyncapi/studio/commits?author=nawed2611" title="Code">💻</a> <a href="https://github.com/asyncapi/studio/issues?q=author%3Anawed2611" title="Bug reports">🐛</a></td>
-      <td align="center"><a href="https://github.com/aeworxet"><img src="https://avatars.githubusercontent.com/u/16149591?v=4?s=100" width="100px;" alt="Viacheslav Turovskyi"/><br /><sub><b>Viacheslav Turovskyi</b></sub></a><br /><a href="https://github.com/asyncapi/studio/commits?author=aeworxet" title="Code">💻</a></td>
-    </tr>
-  </tbody>
-</table>
-
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

apps/design-system/.babelrc.json

@@ -0,0 +1,15 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

apps/design-system/.gitignore

@@ -0,0 +1,29 @@
+node_modules
+build
+npm-debug.log
+.env
+.DS_Store# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+.turbo
+storybook-static
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

apps/design-system/.storybook/main.js

@@ -0,0 +1,21 @@
+export default {
+  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-docs",
+    "@storybook/addon-mdx-gfm",
+    "@storybook/preset-typescript"
+  ],
+  "framework": {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+  typescript: {
+    reactDocgen: "react-docgen-typescript-plugin"
+  },
+  docs: {
+    autodocs: true
+  }
+};

apps/design-system/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import storybookTheme from './storybook-theme';
+
+addons.setConfig({
+  theme: storybookTheme,
+});

apps/design-system/.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<style>
+  html, body, #storybook-root {
+    height: 100%;
+  }
+</style>

apps/design-system/.storybook/preview.js

@@ -0,0 +1,14 @@
+import 'ui/styles.css'
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  storySort: {
+    method: 'alphabetical'
+  },
+}

apps/design-system/.storybook/storybook-theme.js

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming';
+
+import brandImage from './logo.png';
+
+export default create({
+  brandTitle: 'AsyncAPI Studio Design System',
+  brandUrl: 'https://studio.asyncapi.com/',
+  brandImage,
+});

apps/design-system/README.md

@@ -0,0 +1,19 @@
+[![AsyncAPI Design System](/assets/github-repobanner-atom.png)](https://www.asyncapi.com)
+
+# :deciduous_tree: Environment Setup
+
+### :joystick: How to setup storybook locally
+
+- Install all essential prerequisites before launching the Storybook environment locally. To install the dependencies, run the command below:
+
+  ```cmd
+  npm install
+  ```
+
+- Now that you've installed all of the `node modules` in your project, you can launch the Storybook environment. To get started, type the command below:
+
+  ```cmd
+  npm run storybook
+  ```
+
+- By default, this will launch your local Storybook environment on port `6006`.

apps/design-system/netlify.toml

@@ -0,0 +1,4 @@
+[build]
+  command = "npm run build-storybook"
+  functions = "netlify/functions"
+  publish = "storybook-static"