New Admin UI

.gitignore

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

.prettierignore

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

apps/admin/src/App.scss

@@ -1,16 +1,9 @@
-// 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 - Will probably be removed.
 @import "~@webiny/app-serverless-cms/styles.scss";
+
+// NEW
+// Base styles.
+@import "~@webiny/admin-ui/styles.scss";
+
+// The default theme. Learn more: https://webiny.link/admin-themes.
+@import "~@webiny/admin-ui/theme.scss";

package.json

@@ -176,7 +176,9 @@
     "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",
+    "webiny-admin-import-from-figma": "node packages/admin-ui/scripts/importFromFigma.js"
   },
   "husky": {
     "hooks": {

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/theme.scss";
+
+const preview: Preview = {
+    parameters: {
+        layout: "centered"
+    }
+};
+
+export default preview;

packages/admin-ui/DEVELOPMENT.md

@@ -0,0 +1,24 @@
+# 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. Note that when we say "Figma export", we basically mean an export of Alias tokens, created by this [Export/Import Variables](https://www.figma.com/community/plugin/1256972111705530093/export-import-variables) plugin.
+
+Once the export is downloaded, we place it in `packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json`, and then we run the following command from project root:
+
+```bash
+yarn webiny-admin-import-from-figma
+```
+
+This will generate a new `tailwind.config.theme.js` file, which will contain all the necessary Tailwind CSS configuration. On top of that, it will also generate a `src/styles.scss` file, which contains actual values for CSS variables that are referenced in the `tailwind.config.theme.js` file.

packages/admin-ui/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/admin-ui/README.md

@@ -0,0 +1,10 @@
+# `@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,9 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Getting Started/Welcome" />
+
+![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.

packages/admin-ui/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@webiny/admin-ui",
+  "version": "0.0.0",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webiny/webiny-js.git"
+  },
+  "description": "The UI component library for Webiny's Admin app.",
+  "license": "MIT",
+  "dependencies": {
+    "@material-design-icons/svg": "^0.14.3",
+    "@radix-ui/react-accessible-icon": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "@webiny/react-composition": "0.0.0",
+    "@webiny/react-router": "0.0.0",
+    "@webiny/utils": "0.0.0",
+    "ace-builds": "^1.37.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.4",
+    "mobx": "^6.9.0",
+    "react": "18.2.0",
+    "react-ace": "^13.0.0",
+    "tailwind-merge": "^2.4.0",
+    "tailwindcss": "^3.4.6",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "7.6.20",
+    "@storybook/addon-essentials": "7.6.20",
+    "@storybook/react": "7.6.20",
+    "@storybook/react-webpack5": "7.6.20",
+    "@storybook/theming": "7.6.20",
+    "@svgr/webpack": "^6.1.1",
+    "@types/react": "18.2.79",
+    "@webiny/cli": "0.0.0",
+    "@webiny/project-utils": "0.0.0",
+    "chalk": "^4.1.0",
+    "css-loader": "^6.10.0",
+    "file-loader": "6.2.0",
+    "postcss-loader": "^6.2.1",
+    "prettier": "^2.8.3",
+    "rimraf": "^5.0.5",
+    "sass": "1.44.0",
+    "storybook": "7.6.20",
+    "tailwindcss": "^3.4.6",
+    "ttypescript": "^1.5.12",
+    "typescript": "4.9.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "scripts": {
+    "build": "yarn webiny run build",
+    "watch": "yarn webiny run watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "adio": {
+    "ignore": {
+      "dependencies": [
+        "react-dom"
+      ]
+    }
+  }
+}

packages/admin-ui/scripts/importFromFigma.js

@@ -0,0 +1,53 @@
+const fs = require("fs");
+const { green } = require("chalk");
+const path = require("path");
+const aliasTokensExport = require("./importFromFigma/exports/Alias tokens.json");
+const { normalizeFigmaExport } = require("./importFromFigma/normalizeFigmaExport");
+const { createTailwindConfigTheme } = require("./importFromFigma/createTailwindConfigTheme");
+const { createThemeScss } = require("./importFromFigma/createThemeScss");
+const { formatCode } = require("./importFromFigma/formatCode");
+
+const saveFileAndFormat = async (filePath, content) => {
+    fs.writeFileSync(filePath, content);
+    await formatCode(filePath);
+};
+
+(async () => {
+    const normalizedFigmaExport = normalizeFigmaExport(aliasTokensExport);
+    const tailwindConfigTheme = createTailwindConfigTheme(normalizedFigmaExport);
+    const stylesScss = createThemeScss(normalizedFigmaExport, tailwindConfigTheme);
+
+    const paths = {
+        cwd: process.cwd(),
+        normalizedFigmaExport: path.join(__dirname, "../.normalizedFigmaExport.json"),
+        createTailwindConfigTheme: path.join(__dirname, "../tailwind.config.theme.js"),
+        stylesScss: path.join(__dirname, "../src/theme.scss")
+    };
+
+    console.log("Storing...");
+    console.log(
+        `‣ normalized Figma export (${green(
+            path.relative(paths.cwd, paths.normalizedFigmaExport)
+        )}).`
+    );
+    console.log(
+        `‣ Tailwind config theme (${green(
+            path.relative(paths.cwd, paths.createTailwindConfigTheme)
+        )}).`
+    );
+    console.log(`‣ styles.scss (${green(path.relative(paths.cwd, paths.stylesScss))}).`);
+
+    await saveFileAndFormat(
+        paths.normalizedFigmaExport,
+        JSON.stringify(normalizedFigmaExport, null, 2)
+    );
+
+    await saveFileAndFormat(
+        paths.createTailwindConfigTheme,
+        `module.exports = ${JSON.stringify(tailwindConfigTheme, null, 2)};`
+    );
+
+    await saveFileAndFormat(paths.stylesScss, stylesScss);
+
+    console.log("Done.");
+})();