New Admin UI

.github/workflows/wac/utils/listPackagesWithJestTests.ts

@@ -266,6 +266,13 @@ const CUSTOM_HANDLERS: Record<string, () => Array<PackageWithTests>> = {
             }
         ];
     },
+    "admin-ui": () => {
+        return [
+            {
+                cmd: "packages/admin-ui"
+            }
+        ];
+    },
     migrations: () => {
         return [
             {

.gitignore

@@ -47,8 +47,7 @@ schema.graphql
 .pnp.*
 lerna.json
 .stormTests
-
-# TODO remove after moving traffic splitting config to WPC
-gateway.*.json
-
+*storybook.log
+.normalizedFigmaExport.json
+.normalizedPrimitivesFigmaExport.json
 packages/tasks/tpl/*

.prettierignore

@@ -9,6 +9,7 @@
 .webiny/**
 packages/ui/src/RichTextEditor/editorjs/**
 packages/cli-plugin-deploy-pulumi/src/commands/newWatch/handler/mqtt.js
+packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json
 packages/cli-plugin-scaffold-ci/src/githubActions/files/workflows/
 lerna.json
 coverage/**

apps/admin/src/App.scss

@@ -1,16 +1,2 @@
-// 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
 @import "~@webiny/app-serverless-cms/styles.scss";

apps/api/graphql/src/index.ts

@@ -107,7 +107,9 @@ export const handler = createHandler({
         createApwPageBuilderContext({
             storageOperations: createApwSaStorageOperations({ documentClient })
         }),
-        createAco(),
+        createAco({
+            documentClient
+        }),
         createAcoPageBuilderContext(),
         createAcoHcmsContext(),
         createHcmsTasks(),

apps/core/dynamoToElastic/src/index.ts

@@ -1,14 +1,12 @@
 import { createHandler } from "@webiny/handler-aws/raw";
 import elasticsearchClientContextPlugin from "@webiny/api-elasticsearch";
-import elasticsearchDataGzipCompression from "@webiny/api-elasticsearch/plugins/GzipCompression";
 import { createEventHandler as createDynamoDBEventHandler } from "@webiny/api-dynamodb-to-elasticsearch";
 
 export const handler = createHandler({
     plugins: [
         elasticsearchClientContextPlugin({
             endpoint: `https://${process.env.ELASTIC_SEARCH_ENDPOINT}`
         }),
-        elasticsearchDataGzipCompression(),
         createDynamoDBEventHandler()
     ]
 });

package.json

@@ -45,7 +45,7 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@babel/register": "^7.25.9",
-    "@babel/runtime": "7.26.7",
+    "@babel/runtime": "7.26.10",
     "@babel/template": "^7.25.9",
     "@babel/traverse": "7.26.7",
     "@babel/types": "7.26.7",
@@ -171,6 +171,7 @@
     "webiny-versions": "node ./scripts/webinyVersions.js",
     "trigger-release": "node ./scripts/release/triggerRelease.js",
     "dispatch-github-event": "node ./scripts/dispatchGitHubEvent.js",
+    "link-workspaces": "node ./scripts/linkWorkspaces.js",
     "lint-staged": "lint-staged",
     "postinstall": "yarn node ./scripts/linkWorkspaces.js",
     "prepublishOnly": "node scripts/prepublishOnly",
@@ -194,7 +195,10 @@
     "system:verify": "yarn eslint && yarn prettier:check && yarn adio && yarn check-ts-configs && yarn webiny verify-dependencies",
     "system:build": "yarn && yarn ghawac build && yarn webiny sync-dependencies && yarn build",
     "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-storybook-docs": "cd packages/admin-ui && yarn storybook-docs",
+    "webiny-admin-build-storybook": "cd packages/admin-ui && cross-env OUT=../../netlify-static yarn build-storybook",
+    "webiny-admin-import-from-figma": "node packages/admin-ui/scripts/importFromFigma.js"
   },
   "husky": {
     "hooks": {
@@ -246,7 +250,7 @@
     ]
   },
   "resolutions": {
-    "@babel/runtime": "^7.26.0",
+    "@babel/runtime": "7.26.10",
     "systeminformation": "^5.23.18",
     "@emotion/react": "11.10.8",
     "@octokit/rest": "^20.0.2",

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

@@ -0,0 +1,118 @@
+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/**/*.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,12 @@
+import type { Preview } from "@storybook/react";
+
+import "../src/theme.scss";
+
+const preview: Preview = {
+    parameters: {
+        layout: "centered",
+        docs: { toc: { headingSelector: "h2, h3, h4" } }
+    }
+};
+
+export default preview;

packages/admin-ui/DEVELOPMENT.md

@@ -0,0 +1,31 @@
+# Overview
+This document covers different aspects of the development process for the `@webiny/admin-ui` package.
+
+## Tailwind CSS
+Webiny's Admin app uses Tailwind CSS for styling.
+
+### Tailwind Configuration
+Tailwind CSS is configured as usual, via the [`tailwind.config.js`](./tailwind.config.js) file. Among other things, this file defines the default Webiny theme, which is based on Webiny's design system. More on this in the next section.
+
+### Default Theme
+One of the main things we define via the [`tailwind.config.js`](./tailwind.config.js) file is the default theme, which is based on Webiny's design system, and which can be found in this [Figma file](https://www.figma.com/file/f0QUDWX37Kt5X53eltTRiT/Webiny-Design-System?type=design&node-id=127-26352&mode=design&t=nhoOU7NamjWvImoW-0). 
+
+But, do note that all the default theme-values are not actually defined in the `tailwind.config.js` file, but rather in the `tailwind.config.theme.js` file, which is a file that is generated from a Figma export (more on this in the next section).
+
+### Figma To Code
+Since manually transferring values from the mentioned Figma file into code has shown to be a very cumbersome process, we've created a script that basically takes a Figma export and generates all the necessary Tailwind CSS configuration. 
+
+When we say "Figma export", we basically mean exports of (1) Primitives and (2) Alias tokens, which are created by this [Export/Import Variables](https://www.figma.com/community/plugin/1256972111705530093/export-import-variables) plugin.
+
+The exports need to be downloaded and place into the `packages/admin-ui/scripts/importFromFigma/exports` folder. Ultimately, we should end up with the following two:
+
+1. `packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json`
+2. `packages/admin-ui/scripts/importFromFigma/exports/Primitives.json`
+
+Finally, from project root, we run the following script:
+
+```bash
+yarn webiny-admin-import-from-figma
+```
+
+First, the script will regenerate the `tailwind.config.theme.js` file, which will contain all the necessary Tailwind CSS configuration. Second, it will also regenerate the `src/styles.scss` file, which contains actual values for CSS variables that are referenced in the `tailwind.config.theme.js` file.

packages/admin-ui/README.md

@@ -0,0 +1,6 @@
+# `@webiny/admin-ui`
+
+This package contains React components and styles for Webiny's Admin app.
+
+> [!NOTE]
+> This package is included in every Webiny project by default, and it's not meant to be used as a standalone package.

packages/admin-ui/docs/stories/00-getting-started/welcome.mdx

@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Getting Started/Welcome" />
+
+<style>
+    {`
+    .sbdocs-wrapper > div:has(div > .toc-wrapper) {
+      display: none;
+    }
+  `}
+</style>
+
+![Webiny Design System cover](/images/design-system-cover.png)
+
+# Welcome
+
+Welcome to the Webiny Design System, your go-to resource for creating consistent, user-friendly, and innovative interfaces across all Webiny applications.
+
+The Webiny Design System is a collection of UI components, guidelines, and best practices that help you build interfaces that are not only visually appealing but also highly functional and accessible. Whether you're a developer, designer, or product manager, this system provides the tools and resources you need to create exceptional user experiences.
+
+## What You'll Find Here
+
+In this documentation, you'll find the following:
+
+1. **Components**: A comprehensive list of UI components, each with its own documentation, usage examples, and code snippets. You'll learn how to use these components to build your interfaces, as well as how to customize them to fit your specific needs.
+
+2. **Guidelines**: A set of design and development guidelines that help you create consistent and accessible interfaces. These guidelines cover topics such as color, layout, and accessibility.
+
+3. **Best Practices**: A collection of best practices for building interfaces that are not only visually appealing but also highly functional and accessible. These best practices cover topics such as form design, button usage, and error handling.
+
+## How to Use This Documentation
+
+To get started, we recommend that you explore the different components and their documentation. Each component has its own page with usage examples, code snippets, and additional resources.
+
+If you're looking for something specific, you can use the search bar at the top of the page to find what you're looking for.
+
+## Feedback and Contributions
+
+We welcome feedback and contributions to the Webiny Design System. If you have questions, suggestions, or bug reports, feel free to reach out on our 👉 [community Slack](https://www.webiny.com/slack) or open an issue on our [GitHub repository](https://github.com/webiny/webiny-js).

packages/admin-ui/jest.setup.js

@@ -0,0 +1,5 @@
+const base = require("../../jest.config.base");
+
+module.exports = {
+    ...base({ path: __dirname })
+};