Introduce @webiny/admin and @webiny/website Packages

package.json

@@ -246,7 +246,7 @@
     ]
   },
   "resolutions": {
-    "@babel/runtime": "^7.26.0",
+    "@babel/runtime": "^7.26.7",
     "systeminformation": "^5.23.18",
     "@emotion/react": "11.10.8",
     "@octokit/rest": "^20.0.2",

packages/admin/.babelrc.js

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

packages/admin/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/README.md

@@ -0,0 +1,10 @@
+# @webiny/admin
+[![](https://img.shields.io/npm/dw/@webiny/admin.svg)](https://www.npmjs.com/package/@webiny/admin)
+[![](https://img.shields.io/npm/v/@webiny/admin.svg)](https://www.npmjs.com/package/@webiny/admin)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+This package contains utilities and components for building Webiny's Admin app extensions.
+
+> [!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/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@webiny/admin",
+  "version": "0.0.0",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webiny/webiny-js.git"
+  },
+  "author": "Webiny Ltd.",
+  "license": "MIT",
+  "dependencies": {
+    "@emotion/react": "11.10.8",
+    "@webiny/app": "0.0.0",
+    "@webiny/app-aco": "0.0.0",
+    "@webiny/app-admin": "0.0.0",
+    "@webiny/app-admin-rmwc": "0.0.0",
+    "@webiny/app-apw": "0.0.0",
+    "@webiny/app-audit-logs": "0.0.0",
+    "@webiny/app-dynamic-pages": "0.0.0",
+    "@webiny/app-file-manager": "0.0.0",
+    "@webiny/app-file-manager-s3": "0.0.0",
+    "@webiny/app-form-builder": "0.0.0",
+    "@webiny/app-graphql-playground": "0.0.0",
+    "@webiny/app-headless-cms": "0.0.0",
+    "@webiny/app-i18n": "0.0.0",
+    "@webiny/app-i18n-content": "0.0.0",
+    "@webiny/app-mailer": "0.0.0",
+    "@webiny/app-page-builder": "0.0.0",
+    "@webiny/app-record-locking": "0.0.0",
+    "@webiny/app-security": "0.0.0",
+    "@webiny/app-security-access-management": "0.0.0",
+    "@webiny/app-tenancy": "0.0.0",
+    "@webiny/app-tenant-manager": "0.0.0",
+    "@webiny/app-trash-bin": "0.0.0",
+    "@webiny/app-websockets": "0.0.0",
+    "@webiny/lexical-editor-actions": "0.0.0",
+    "@webiny/lexical-editor-pb-element": "0.0.0",
+    "@webiny/plugins": "0.0.0",
+    "apollo-cache": "^1.3.5",
+    "apollo-client": "^2.6.10",
+    "apollo-link": "^1.2.14",
+    "apollo-link-batch-http": "^1.2.14",
+    "apollo-utilities": "^1.3.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@emotion/babel-plugin": "^11.11.0",
+    "@webiny/project-utils": "0.0.0",
+    "babel-plugin-named-asset-import": "^1.0.0-next.3e165448",
+    "rimraf": "^6.0.1",
+    "typescript": "5.3.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "scripts": {
+    "build": "node ../cli/bin.js run build",
+    "watch": "node ../cli/bin.js run watch"
+  },
+  "svgo": {
+    "plugins": {
+      "removeViewBox": false
+    }
+  }
+}

packages/admin/src/Admin.tsx

@@ -0,0 +1,79 @@
+import React, { memo } from "react";
+import { plugins } from "@webiny/plugins";
+import {
+    Admin as BaseAdmin,
+    AdminProps as BaseAdminProps,
+    AppInstaller,
+    Provider
+} from "@webiny/app-admin";
+import { Tenancy } from "@webiny/app-tenancy";
+import { Security } from "@webiny/app-security";
+import { I18N } from "@webiny/app-i18n";
+import { I18NContent } from "@webiny/app-i18n-content";
+import { PageBuilder } from "@webiny/app-page-builder";
+import { FormBuilder } from "@webiny/app-form-builder";
+import { HeadlessCMS } from "@webiny/app-headless-cms";
+import { RMWC } from "@webiny/app-admin-rmwc";
+import { FileManager } from "@webiny/app-file-manager/app";
+import { GraphQLPlayground } from "@webiny/app-graphql-playground";
+import { AccessManagement } from "@webiny/app-security-access-management";
+import { imagePlugin } from "@webiny/app/plugins";
+import fileStorageS3Plugin from "@webiny/app-file-manager-s3";
+import { createApolloClient as defaultApolloClientFactory } from "./apolloClientFactory";
+import apolloLinks from "./apolloLinks";
+import { createViewCompositionProvider } from "@webiny/app-admin/base/providers/ViewCompositionProvider";
+import { AdvancedPublishingWorkflow } from "@webiny/app-apw";
+import { TenantManager } from "@webiny/app-tenant-manager";
+import { AuditLogs } from "@webiny/app-audit-logs";
+import { LexicalEditorPlugin } from "@webiny/lexical-editor-pb-element";
+import { LexicalEditorActions } from "@webiny/lexical-editor-actions";
+import { Module as MailerSettings } from "@webiny/app-mailer";
+import { Websockets } from "@webiny/app-websockets";
+import { RecordLocking } from "@webiny/app-record-locking";
+import { TrashBinConfigs } from "@webiny/app-trash-bin";
+import { DynamicPages } from "@webiny/app-dynamic-pages/admin";
+import { AdvancedContentOrganisation } from "@webiny/app-aco";
+
+export interface AdminProps extends Omit<BaseAdminProps, "createApolloClient"> {
+    createApolloClient?: BaseAdminProps["createApolloClient"];
+    children?: React.ReactNode;
+}
+
+const App = (props: AdminProps) => {
+    const createApolloClient = props.createApolloClient || defaultApolloClientFactory;
+    const ViewCompositionProvider = createViewCompositionProvider();
+
+    plugins.register(imagePlugin(), fileStorageS3Plugin(), apolloLinks);
+
+    return (
+        <BaseAdmin createApolloClient={createApolloClient}>
+            <RMWC />
+            <Tenancy />
+            <Security />
+            <AccessManagement />
+            <AppInstaller />
+            <FileManager />
+            <GraphQLPlayground createApolloClient={createApolloClient} />
+            <I18N />
+            <I18NContent />
+            <Provider hoc={ViewCompositionProvider} />
+            <Websockets />
+            <RecordLocking />
+            <PageBuilder />
+            <LexicalEditorPlugin />
+            <LexicalEditorActions />
+            <FormBuilder />
+            <HeadlessCMS createApolloClient={createApolloClient} />
+            <AdvancedPublishingWorkflow />
+            <TenantManager />
+            <AuditLogs />
+            <MailerSettings />
+            <TrashBinConfigs />
+            <DynamicPages />
+            <AdvancedContentOrganisation />
+            {props.children}
+        </BaseAdmin>
+    );
+};
+
+export const Admin = memo<AdminProps>(App);

packages/admin/src/apolloClientFactory.ts

@@ -0,0 +1,62 @@
+import ApolloClient from "apollo-client";
+import { ApolloLink } from "apollo-link";
+import { BatchHttpLink } from "apollo-link-batch-http";
+import { InMemoryCache } from "@webiny/app/apollo-client/InMemoryCache";
+import { plugins } from "@webiny/plugins";
+import { ApolloDynamicLink } from "@webiny/app/plugins/ApolloDynamicLink";
+import { ApolloCacheObjectIdPlugin } from "@webiny/app/plugins/ApolloCacheObjectIdPlugin";
+import { IntrospectionFragmentMatcher } from "@webiny/app/apollo-client/IntrospectionFragmentMatcher";
+
+export interface CreateApolloClientParams {
+    uri: string;
+    batching?: Pick<BatchHttpLink.Options, "batchMax" | "batchInterval" | "batchKey">;
+}
+
+export const createApolloClient = ({ uri, batching }: CreateApolloClientParams) => {
+    const fragmentMatcher = new IntrospectionFragmentMatcher({
+        introspectionQueryResultData: {
+            __schema: {
+                types: []
+            }
+        }
+    });
+
+    return new ApolloClient({
+        link: ApolloLink.from([
+            /**
+             * This will process links from plugins on every request.
+             */
+            new ApolloDynamicLink(),
+            /**
+             * This batches requests made to the API to pack multiple requests into a single HTTP request.
+             * `credentials: "include"` is necessary to attach cookies to requests.
+             */
+            new BatchHttpLink({ uri, credentials: "include", ...batching })
+        ]),
+        cache: new InMemoryCache({
+            addTypename: true,
+            fragmentMatcher,
+            dataIdFromObject: obj => {
+                /**
+                 * Since every data type coming from API can have a different data structure,
+                 * we cannot rely on having an `id` field.
+                 */
+                const getters = plugins.byType<ApolloCacheObjectIdPlugin>(
+                    ApolloCacheObjectIdPlugin.type
+                );
+
+                for (let i = 0; i < getters.length; i++) {
+                    const id = getters[i].getObjectId(obj);
+                    if (typeof id !== "undefined") {
+                        return id;
+                    }
+                }
+
+                /**
+                 * As a fallback, try getting object's `id`.
+                 */
+                return obj.id || null;
+            }
+        })
+    });
+};

packages/admin/src/apolloLinks.ts

@@ -0,0 +1,18 @@
+import { ConsoleLinkPlugin } from "@webiny/app/plugins/ConsoleLinkPlugin";
+import { NetworkErrorLinkPlugin } from "@webiny/app/plugins/NetworkErrorLinkPlugin";
+import { OmitTypenameLinkPlugin } from "@webiny/app/plugins/OmitTypenameLinkPlugin";
+
+export default [
+    /**
+     * This link removes `__typename` from the variables being sent to the API.
+     */
+    new OmitTypenameLinkPlugin(),
+    /**
+     * This link checks for presence of `extensions.console` in the response and logs all items to browser console.
+     */
+    new ConsoleLinkPlugin(),
+    /**
+     * This plugin creates an ApolloLink that checks for `NetworkError` and shows an ErrorOverlay in the browser.
+     */
+    new NetworkErrorLinkPlugin()
+];

packages/admin/src/index.tsx

@@ -0,0 +1,71 @@
+export { Admin } from "./Admin";
+export type { AdminProps } from "./Admin";
+export {
+    useApp,
+    useWcp,
+    useUserMenuItem,
+    useUserMenu,
+    useMenuItem,
+    useNavigation,
+    useTags,
+    AddLogo,
+    AddMenu,
+    AddRoute,
+    AddUserMenuItem,
+    Dashboard,
+    DashboardRenderer,
+    Layout,
+    LayoutRenderer,
+    LoginScreen,
+    LoginScreenRenderer,
+    LocaleSelector,
+    LocaleSelectorRenderer,
+    Brand,
+    BrandRenderer,
+    Provider,
+    Compose,
+    CompositionScope,
+    Plugins,
+    Plugin,
+    makeComposable,
+    makeDecoratable,
+    createComponentPlugin,
+    createProviderPlugin,
+    createDecorator,
+    createProvider,
+    MenuItem,
+    MenuItemRenderer,
+    MenuItems,
+    Navigation,
+    NavigationRenderer,
+    Tags,
+    UserMenu,
+    UserMenuHandle,
+    UserMenuHandleRenderer,
+    UserMenuItems,
+    UserMenuItem,
+    UserMenuItemRenderer,
+    AddGraphQLQuerySelection
+} from "@webiny/app-admin";
+export type {
+    ComposeProps,
+    HigherOrderComponent,
+    Decorator,
+    ProviderProps,
+    LayoutProps,
+    LoginScreenProps,
+    MenuContext,
+    MenuData,
+    MenuItemsProps,
+    MenuProps,
+    UserMenuItemsProps,
+    UserMenuItemProps,
+    UserMenuItemData
+} from "@webiny/app-admin";
+
+export { HasPermission, useSecurity, usePermission } from "@webiny/app-security";
+
+export { useTenancy } from "@webiny/app-tenancy";
+export type { Tenant } from "@webiny/app-tenancy";
+
+export * from "./apolloClientFactory";

packages/admin/src/styles.scss

@@ -0,0 +1,9 @@
+// Import admin app styles
+@import "~@webiny/app-admin/styles.scss";
+//
+// Import `RichTextEditor` styles
+@import "~@webiny/app-admin/components/RichTextEditor/styles.scss";
+@import "~@webiny/app-admin/components/RichTextEditor/tools/header/styles.scss";
+@import "~@webiny/app-admin/components/RichTextEditor/tools/paragraph/styles.scss";
+@import "~@webiny/app-admin/components/RichTextEditor/tools/textColor/styles.scss";
+@import "~@webiny/app-admin/components/RichTextEditor/tools/image/styles.scss";

packages/admin/tsconfig.build.json

@@ -0,0 +1,39 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "include": ["src"],
+  "references": [
+    { "path": "../app/tsconfig.build.json" },
+    { "path": "../app-aco/tsconfig.build.json" },
+    { "path": "../app-admin/tsconfig.build.json" },
+    { "path": "../app-admin-rmwc/tsconfig.build.json" },
+    { "path": "../app-apw/tsconfig.build.json" },
+    { "path": "../app-audit-logs/tsconfig.build.json" },
+    { "path": "../app-dynamic-pages/tsconfig.build.json" },
+    { "path": "../app-file-manager/tsconfig.build.json" },
+    { "path": "../app-file-manager-s3/tsconfig.build.json" },
+    { "path": "../app-form-builder/tsconfig.build.json" },
+    { "path": "../app-graphql-playground/tsconfig.build.json" },
+    { "path": "../app-headless-cms/tsconfig.build.json" },
+    { "path": "../app-i18n/tsconfig.build.json" },
+    { "path": "../app-i18n-content/tsconfig.build.json" },
+    { "path": "../app-mailer/tsconfig.build.json" },
+    { "path": "../app-page-builder/tsconfig.build.json" },
+    { "path": "../app-record-locking/tsconfig.build.json" },
+    { "path": "../app-security/tsconfig.build.json" },
+    { "path": "../app-security-access-management/tsconfig.build.json" },
+    { "path": "../app-tenancy/tsconfig.build.json" },
+    { "path": "../app-tenant-manager/tsconfig.build.json" },
+    { "path": "../app-trash-bin/tsconfig.build.json" },
+    { "path": "../app-websockets/tsconfig.build.json" },
+    { "path": "../lexical-editor-actions/tsconfig.build.json" },
+    { "path": "../lexical-editor-pb-element/tsconfig.build.json" },
+    { "path": "../plugins/tsconfig.build.json" }
+  ],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "declarationDir": "./dist",
+    "paths": { "~/*": ["./src/*"], "~tests/*": ["./__tests__/*"] },
+    "baseUrl": "."
+  }
+}