refactor(major): Upgrade to Vite, add demo, remove optional libs

- Migrate from Create-React-App to Vite
- Add demo playground with examples
- Add prettier for code formatting
- Remove dev-dependencies: styled-components and AntD

Author: booleanhunter

.env.development

@@ -0,0 +1 @@
+VITE_ENV=development

.github/workflows/docs.yml

@@ -1,43 +1,46 @@
-name: Generate Documentation
+name: Deploy Demo and Documentation
 
 on:
-  push:
-    branches:
-      - main  # Run on pushes to the main branch
-  pull_request:
-    branches:
-      - main
+    push:
+        branches:
+            - main # Run on pushes to the main branch
+    pull_request:
+        branches:
+            - main
 
 jobs:
-  generate-docs:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 'latest'
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm install @microsoft/tsdoc typedoc
-
-      - name: Generate documentation
-        run: npm run docs
-
-      - name: Upload documentation to GitHub Pages
-        uses: actions/upload-pages-artifact@v1
-        with:
-          path: ./public/docs  # Path where docs are generated
-
-  deploy:
-    needs: generate-docs
-    runs-on: ubuntu-latest
-    permissions:
-      pages: write
-      id-token: write
-    steps:
-      - name: Deploy to GitHub Pages
-        uses: actions/deploy-pages@v1
+    build-website:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Set up Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 'latest'
+                  cache: 'npm'
+
+            - name: Install dependencies
+              run: npm install
+
+            - name: Generate demo and documentation
+              run: npm run build-demo && npm run docs
+
+            - name: Setup Pages
+              uses: actions/configure-pages@v4
+
+            - name: Upload demo and documentation to GitHub Pages
+              uses: actions/upload-pages-artifact@v3
+              with:
+                  path: './dist' # Path where docs are generated
+
+    deploy:
+        needs: build-website
+        runs-on: ubuntu-latest
+        permissions:
+            pages: write
+            id-token: write
+        steps:
+            - name: Deploy to GitHub Pages
+              uses: actions/deploy-pages@v4

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*storybook.log

.gitlab-ci.yml

@@ -5,14 +5,14 @@ image: node:latest
 # This folder is cached between builds
 # http://docs.gitlab.com/ee/ci/yaml/README.html#cache
 cache:
-  paths:
-    - node_modules/
+    paths:
+        - node_modules/
 
 # Instructions to GitLab Runner for generating API documentation on Gitlab Pages
 pages:
-  script:
-    - npm install @microsoft/tsdoc typedoc
-    - npm run docs
-  artifacts:
-    paths:
-      - public/docs
+    script:
+        - npm install @microsoft/tsdoc typedoc
+        - npm run docs
+    artifacts:
+        paths:
+            - public/docs

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "all",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
+}

.storybook/main.js

@@ -1,2 +1,22 @@
 {
-}
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#fa1b49",
+        "activityBar.background": "#fa1b49",
+        "activityBar.foreground": "#e7e7e7",
+        "activityBar.inactiveForeground": "#e7e7e799",
+        "activityBarBadge.background": "#155e02",
+        "activityBarBadge.foreground": "#e7e7e7",
+        "commandCenter.border": "#e7e7e799",
+        "sash.hoverBorder": "#fa1b49",
+        "statusBar.background": "#dd0531",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#fa1b49",
+        "statusBarItem.remoteBackground": "#dd0531",
+        "statusBarItem.remoteForeground": "#e7e7e7",
+        "titleBar.activeBackground": "#dd0531",
+        "titleBar.activeForeground": "#e7e7e7",
+        "titleBar.inactiveBackground": "#dd053199",
+        "titleBar.inactiveForeground": "#e7e7e799"
+    },
+    "peacock.color": "#dd0531"
+}