New Admin UI

.github/workflows/pullRequests.yml

@@ -207,6 +207,7 @@ jobs:
       - name: Run tests
         run: yarn test ${{ matrix.package.cmd }}
         working-directory: ${{ github.base_ref }}
+    if: github.base_ref != 'feat/new-admin-ui'
   jestTestsDdb:
     needs:
       - constants
@@ -268,6 +269,7 @@ jobs:
       - name: Run tests
         run: yarn test ${{ matrix.package.cmd }}
         working-directory: ${{ github.base_ref }}
+    if: github.base_ref != 'feat/new-admin-ui'
   jestTestsDdbEs:
     needs:
       - constants
@@ -338,7 +340,9 @@ jobs:
         working-directory: ${{ github.base_ref }}
     permissions:
       id-token: write
-    if: needs.constants.outputs.is-fork-pr != 'true'
+    if: >-
+      github.base_ref != 'feat/new-admin-ui' &&
+      needs.constants.outputs.is-fork-pr != 'true'
   jestTestsDdbOs:
     needs:
       - constants
@@ -409,7 +413,9 @@ jobs:
         working-directory: ${{ github.base_ref }}
     permissions:
       id-token: write
-    if: needs.constants.outputs.is-fork-pr != 'true'
+    if: >-
+      github.base_ref != 'feat/new-admin-ui' &&
+      needs.constants.outputs.is-fork-pr != 'true'
   verdaccioPublish:
     name: Publish to Verdaccio
     needs:

.github/workflows/wac/pullRequests.wac.ts

@@ -65,10 +65,12 @@ const createJestTestsJob = (storage: string | null) => {
         ]
     });
 
-    // We prevent running of Jest tests if a PR was created from a fork.
-    // This is because we don't want to expose our AWS credentials to forks.
+    // Temporary disabling Jest tests on PRs that target the "feat/new-admin-ui" branch.
+    // No need to run the for now. We'll re-enable them if needed in the future.
+    job.if = "github.base_ref != 'feat/new-admin-ui'";
+
     if (storage === "ddb-es" || storage === "ddb-os") {
-        job.if = "needs.constants.outputs.is-fork-pr != 'true'";
+        job.if += " && needs.constants.outputs.is-fork-pr != 'true'";
     }
 
     return job;

.gitignore

@@ -47,6 +47,7 @@ schema.graphql
 .pnp.*
 lerna.json
 .stormTests
+*storybook.log
 
 # TODO remove after moving traffic splitting config to WPC
 gateway.*.json

apps/admin/package.json

@@ -7,7 +7,7 @@
     "@editorjs/list": "^1.6.0",
     "@editorjs/quote": "^2.4.0",
     "@editorjs/underline": "^1.0.0",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.5",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-admin-users-cognito": "0.0.0",
     "@webiny/app-form-builder": "0.0.0",
@@ -22,8 +22,8 @@
     "core-js": "^3.0.1",
     "cross-fetch": "^3.0.4",
     "prop-types": "^15.7.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "regenerator-runtime": "^0.13.5",
     "theme": "^1.0.0",
     "tslib": "^2.4.0"

apps/admin/src/App.scss

@@ -1,16 +1,88 @@
-// Webiny theme variables
-// $webiny-theme-light-primary: #fa5723;
-// $webiny-theme-light-secondary: #00ccb0;
-// $webiny-theme-light-background: #f2f2f2;
-// $webiny-theme-light-surface: #fff;
-// $webiny-theme-light-on-primary: #ffffff;
-// $webiny-theme-light-on-secondary: #ffffff;
-// $webiny-theme-light-on-surface: #000000;
-// $webiny-theme-light-on-background: rgba(212, 212, 212, 0.5);
-// $webiny-theme-light-text-primary-on-background: rgba(0, 0, 0, 0.87);
-// $webiny-theme-light-text-secondary-on-background: rgba(0, 0, 0, 0.54);
-// $webiny-theme-light-text-hint-on-dark: rgba(255, 255, 255, 0.5);
-// $webiny-theme-typography-font-family: "Source Sans Pro";
-
-// Import main styles
+// OLD
 @import "~@webiny/app-serverless-cms/styles.scss";
+
+// NEW
+@import "~@webiny/admin-ui/styles.scss";
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --primary: 14.5 95.6% 55.9%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 8px;
+
+    --font-sans: "Inter", "Source Sans Pro", "Open Sans", sans-serif;
+  }
+
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 8px;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}

apps/website/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.10.6",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.5",
     "@webiny/app": "0.0.0",
     "@webiny/app-form-builder": "0.0.0",
     "@webiny/app-page-builder": "0.0.0",
@@ -20,8 +20,8 @@
     "cross-fetch": "^3.0.4",
     "graphql": "^15.7.2",
     "graphql-tag": "^2.12.6",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "regenerator-runtime": "^0.13.5",
     "theme": "^1.0.0"
   },

extensions/theme/package.json

@@ -17,7 +17,7 @@
     "@webiny/utils": "0.0.0",
     "@webiny/validation": "0.0.0",
     "graphql": "^15.7.2",
-    "react": "18.2.0",
+    "react": "18.3.1",
     "react-hamburger-menu": "^1.1.1"
   },
   "devDependencies": {

package.json

@@ -39,8 +39,8 @@
     "@types/jest": "^29.5.11",
     "@types/node": "^18.0.0",
     "@types/prettier": "^2.7.3",
-    "@types/react": "18.2.79",
-    "@types/react-dom": "18.2.25",
+    "@types/react": "18.3.5",
+    "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "^5.5.0",
     "@typescript-eslint/parser": "^5.5.0",
     "adio": "^1.0.1",
@@ -153,7 +153,8 @@
     "verdaccio:start:detached": "yarn pm2 start \"yarn verdaccio:start\"",
     "webiny": "./node_modules/.bin/webiny",
     "wby": "./node_modules/.bin/wby",
-    "webiny-ui-build-storybook": "cd packages/ui && cross-env OUT=../../netlify-static yarn build-storybook"
+    "webiny-admin-storybook": "cd packages/admin-ui && yarn storybook",
+    "webiny-admin-build-storybook": "cd packages/admin-ui && cross-env OUT=../../netlify-static yarn build-storybook"
   },
   "husky": {
     "hooks": {
@@ -209,11 +210,11 @@
     "@types/webpack": "^5.28.0",
     "browserify-sign": "^4.2.2",
     "@babel/traverse": "^7.24.0",
-    "@types/react": "18.2.79",
-    "@types/react-dom": "18.2.25",
+    "@types/react": "18.3.5",
+    "@types/react-dom": "18.3.0",
     "jsdom": "24.0.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "follow-redirects": "^1.15.6",
     "crypto-js": "^4.2.0",
     "ip": "^2.0.1",

packages/admin-ui/.babelrc.js

@@ -0,0 +1 @@
+module.exports = require("@webiny/project-utils").createBabelConfigForReact({ path: __dirname });

packages/admin-ui/.storybook/main.ts

@@ -0,0 +1,114 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+import path from "path";
+import tailwindcss from "tailwindcss";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+    return path.dirname(require.resolve(path.join(value, "package.json")));
+}
+
+const config: StorybookConfig = {
+    stories: ["../docs/stories/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    staticDirs: ["../assets"],
+    addons: [
+        getAbsolutePath("@storybook/addon-a11y"),
+        {
+            name: "@storybook/addon-essentials",
+            options: {
+                controls: true,
+                code: true
+            }
+        }
+    ],
+    framework: {
+        name: getAbsolutePath("@storybook/react-webpack5"),
+        options: {}
+    },
+    core: {
+        disableTelemetry: true,
+        disableWhatsNewNotifications: true
+    },
+    webpackFinal: async config => {
+        config.resolve = config.resolve || {};
+        config.resolve.alias = {
+            ...config.resolve.alias,
+            "~": path.resolve(__dirname, "../src")
+        };
+
+        // Add custom style handling
+        config.module?.rules?.push({
+            test: /\.s[ac]ss$/i,
+            use: [
+                "style-loader",
+                {
+                    loader: "css-loader",
+                    options: {
+                        importLoaders: 1
+                    }
+                },
+                {
+                    loader: "postcss-loader",
+                    options: {
+                        postcssOptions: {
+                            plugins: [
+                                tailwindcss({
+                                    config: path.join(__dirname, "../tailwind.config.js")
+                                })
+                            ]
+                        }
+                    }
+                },
+                {
+                    loader: "sass-loader",
+                    options: { implementation: require.resolve("sass") }
+                }
+            ]
+        });
+
+        // Add SVG handling
+        const svgRule = config.module?.rules?.find(rule => {
+            const test = (rule as { test: RegExp }).test;
+            return test ? test.test(".svg") : false;
+        }) as { [key: string]: any };
+
+        if (svgRule) {
+            svgRule.exclude = /\.svg$/;
+        }
+
+        config.module?.rules?.push({
+            test: /\.svg$/i,
+            use: [
+                {
+                    loader: "@svgr/webpack",
+                    options: {
+                        svgoConfig: {
+                            plugins: [
+                                {
+                                    name: "preset-default",
+                                    params: {
+                                        overrides: {
+                                            removeViewBox: false
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                },
+                {
+                    loader: "file-loader",
+                    options: {
+                        name: "[name].[hash].[ext]"
+                    }
+                }
+            ]
+        });
+
+        return config;
+    }
+};
+
+export default config;

packages/admin-ui/.storybook/preview.ts

@@ -0,0 +1,11 @@
+import type { Preview } from "@storybook/react";
+
+import "../src/styles.scss";
+
+const preview: Preview = {
+    parameters: {
+        layout: "centered"
+    }
+};
+
+export default preview;