@webiny/mcp 6.0.0 → 6.1.0-beta.0

package/skills/admin-ui-extensions/SKILL.md

@@ -1,267 +0,0 @@
----
-name: webiny-admin-ui-extensions
-context: webiny-extensions
-description: >
-  Customizing the Webiny Admin UI -- white-labeling, custom data list columns, page-type forms,
-  and Lexical editor plugins. Use this skill when the developer wants to change branding (logo,
-  title, theme colors), add custom columns to content entry list views, create custom forms
-  for Website Builder page types, or extend the Lexical rich text editor. Covers AdminConfig,
-  ContentEntryListConfig, Browser.Table.Column, Bind, useForm, and form validation.
----
-
-# Admin UI Extensions
-
-## TL;DR
-
-Admin extensions customize the Webiny Admin application. There are three main categories: **white-labeling** (logos, titles, theme colors), **custom data list columns** (adding columns to content entry tables), and **custom page-type forms** (custom form fields for Website Builder page types). All are React components registered via `<Admin.Extension>` in `webiny.config.tsx`.
-
-## White-Labeling
-
-### Theme Colors
-
-```tsx
-// extensions/AdminBranding/AdminTheme.tsx
-import React from "react";
-import { AdminConfig } from "webiny/admin/configs";
-
-const { Theme } = AdminConfig;
-
-const AdminTheme = () => {
-    return (
-        <AdminConfig.Public>
-            <Theme.Color palette={"primary"} color={"purple"} />
-            <Theme.Color palette={"secondary"} color={"green"} />
-        </AdminConfig.Public>
-    );
-};
-
-export default AdminTheme;
-```
-
-- `palette` -- `"primary"`, `"secondary"`, `"neutral"`, etc.
-- `color` -- any CSS color value: named colors, hex (`"#6B46C1"`), or RGB.
-
-### Logo and Title
-
-```tsx
-// extensions/AdminBranding/AdminTitleLogo.tsx
-import React from "react";
-import { AdminConfig } from "webiny/admin/configs";
-import squareLogo from "./logo.png";
-import horizontalLogo from "./logo.png";
-
-const { Title, Logo } = AdminConfig;
-
-const AdminTitleLogo = () => {
-    return (
-        <AdminConfig.Public>
-            <Title value={"ACME Corp"} />
-            <Logo
-                squareLogo={<img src={squareLogo} alt={"ACME Corp"} />}
-                horizontalLogo={<img src={horizontalLogo} alt={"ACME Corp"} />}
-            />
-        </AdminConfig.Public>
-    );
-};
-
-export default AdminTitleLogo;
-```
-
-Register both:
-
-```tsx
-<Admin.Extension src={"/extensions/AdminBranding/AdminTheme.tsx"} />
-<Admin.Extension src={"/extensions/AdminBranding/AdminTitleLogo.tsx"} />
-```
-
-### Available AdminConfig Components
-
-| Component | Purpose |
-|---|---|
-| `<Theme.Color palette="..." color="..." />` | Set theme color palette |
-| `<Title value="..." />` | Set the Admin app title |
-| `<Logo squareLogo={...} horizontalLogo={...} />` | Set square and horizontal logos |
-
-All must be wrapped in `<AdminConfig.Public>`.
-
-## Custom Data List Columns
-
-Add custom columns to the content entry list view in the Admin UI. Columns can be restricted to specific content models.
-
-### Full Example: Email Columns for Contact Submissions
-
-```tsx
-// extensions/contactSubmission/EmailEntryListColumn.tsx
-import React from "react";
-import { ContentEntryListConfig } from "webiny/admin/cms/entry/list";
-
-const { Browser } = ContentEntryListConfig;
-
-// Custom cell component for the Email Type column
-interface ContactSubmissionTableRow {
-    values: {
-        emailType: "work" | "personal";
-    };
-}
-
-export const EmailTypeCell = () => {
-    const { useTableRow, isFolderRow } = ContentEntryListConfig.Browser.Table.Column;
-    const { row } = useTableRow<ContactSubmissionTableRow>();
-
-    if (isFolderRow(row)) {
-        return <>{"-"}</>;
-    }
-
-    const emailType = row.data.values.emailType;
-    return emailType === "work" ? <>{"Business"}</> : <>{"Personal"}</>;
-};
-
-// Main extension component
-const EmailEntryListColumn = () => {
-    return (
-        <ContentEntryListConfig>
-            {/* Simple column using path (no custom cell needed) */}
-            <Browser.Table.Column
-                name={"email"}
-                after={"name"}
-                path={"values.email"}
-                header={"Email"}
-                modelIds={["contactSubmission"]}
-            />
-            {/* Custom cell column */}
-            <Browser.Table.Column
-                name={"emailType"}
-                after={"email"}
-                header={"Email Type"}
-                modelIds={["contactSubmission"]}
-                cell={<EmailTypeCell />}
-            />
-        </ContentEntryListConfig>
-    );
-};
-
-export default EmailEntryListColumn;
-```
-
-Register:
-
-```tsx
-<Admin.Extension src={"/extensions/contactSubmission/EmailEntryListColumn.tsx"} />
-```
-
-### Column Props Reference
-
-| Prop | Type | Description |
-|---|---|---|
-| `name` | `string` | Unique column identifier |
-| `header` | `string` | Column header text |
-| `path` | `string` | Dot-path to the data field (e.g., `"values.email"`) -- for simple columns |
-| `cell` | `ReactElement` | Custom React component for complex rendering |
-| `modelIds` | `string[]` | Restrict column to specific content models |
-| `after` | `string` | Position this column after another column by name |
-
-### Custom Cell Hooks
-
-Inside a custom `cell` component:
-
-- `useTableRow<T>()` -- access the full row data, typed with your interface
-- `isFolderRow(row)` -- check if the current row is a folder (return placeholder content)
-
-## Custom Page-Type Forms
-
-Create custom forms for Website Builder page types using Webiny's form components:
-
-```tsx
-// extensions/customPageTypes/RetailPageForm.tsx
-import React from "react";
-import { Grid, Input, Select } from "webiny/admin/ui";
-import { pagePathFromTitle } from "webiny/admin/website-builder";
-import type { FormApi } from "webiny/admin/form";
-import { Bind, UnsetOnUnmount, useForm, validation } from "webiny/admin/form";
-
-const generatePath = (form: FormApi) => () => {
-    const title = form.getValue("properties.title");
-    const language = form.getValue("extensions.language");
-
-    const titlePath = pagePathFromTitle(title ?? "");
-    const parts = [language, titlePath].filter(Boolean);
-
-    form.setValue("properties.path", `/${parts.join("/")}`);
-};
-
-export const RetailPageForm = () => {
-    const form = useForm();
-
-    return (
-        <>
-            <Grid.Column span={12}>
-                <UnsetOnUnmount name={"properties.title"}>
-                    <Bind name={"properties.title"} validators={[validation.create("required")]}>
-                        <Input label={"Title"} onBlur={generatePath(form)} />
-                    </Bind>
-                </UnsetOnUnmount>
-            </Grid.Column>
-            <Grid.Column span={12}>
-                <UnsetOnUnmount name={"extensions.language"}>
-                    <Bind
-                        name={"extensions.language"}
-                        validators={[validation.create("required")]}
-                        afterChange={generatePath(form)}
-                    >
-                        <Select
-                            placeholder={"Select a language"}
-                            label={"Language"}
-                            options={[
-                                { label: "English", value: "en" },
-                                { label: "German", value: "de" },
-                                { label: "French", value: "fr" }
-                            ]}
-                        />
-                    </Bind>
-                </UnsetOnUnmount>
-            </Grid.Column>
-            <Grid.Column span={12}>
-                <UnsetOnUnmount name={"properties.path"}>
-                    <Bind name={"properties.path"} validators={[validation.create("required")]}>
-                        <Input label={"Path"} />
-                    </Bind>
-                </UnsetOnUnmount>
-            </Grid.Column>
-        </>
-    );
-};
-```
-
-### Form Components Reference
-
-| Component / Hook | Import | Purpose |
-|---|---|---|
-| `Bind` | `"webiny/admin/form"` | Bind a form field to a name path |
-| `useForm()` | `"webiny/admin/form"` | Access the form API (`getValue`, `setValue`) |
-| `validation` | `"webiny/admin/form"` | Create validators (`validation.create("required")`) |
-| `UnsetOnUnmount` | `"webiny/admin/form"` | Clear the field value when the component unmounts |
-| `Grid.Column` | `"webiny/admin/ui"` | Layout grid column (`span={12}` for full width) |
-| `Input` | `"webiny/admin/ui"` | Text input field |
-| `Select` | `"webiny/admin/ui"` | Dropdown select with options |
-| `FormApi` | `"webiny/admin/form"` | Type for the form API object |
-
-## Lexical Editor Plugins
-
-Admin extensions can also add custom plugins to the Lexical rich text editor used in both the Headless CMS and the Website Builder. These are registered as `<Admin.Extension>` and use imports from `"webiny/admin/lexical"`, `"webiny/admin/cms/lexical"`, and `"webiny/admin/website-builder/lexical"`.
-
-## Quick Reference
-
-```
-White-label import:  import { AdminConfig } from "webiny/admin/configs";
-Data list import:    import { ContentEntryListConfig } from "webiny/admin/cms/entry/list";
-Form imports:        import { Bind, useForm, validation } from "webiny/admin/form";
-UI imports:          import { Grid, Input, Select } from "webiny/admin/ui";
-Register:            <Admin.Extension src={"/extensions/MyAdminExtension.tsx"} />
-Develop:             yarn webiny watch admin
-Deploy:              yarn webiny deploy admin
-```
-
-## Related Skills
-
-- `project-structure` -- How to register Admin extensions
-- `content-models` -- Define models that your list columns target

package/skills/api-custom-feature/SKILL.md

@@ -1,195 +0,0 @@
----
-name: webiny-api-custom-feature
-context: webiny-extensions
-description: >
-  Creating custom API features with createFeature and createAbstraction.
-  Use this skill when the developer wants to define a new backend service,
-  register an abstraction in the DI container, create a reusable API module,
-  or wire up custom business logic as a Webiny feature. Covers the full pattern:
-  define an interface, create an abstraction token, implement and register
-  via createFeature, and register the extension in webiny.config.tsx.
----
-
-# Custom API Features
-
-## TL;DR
-
-Use `createFeature` and `createAbstraction` from `"webiny/api"` to define reusable backend services. An abstraction is a DI token typed to an interface. A feature registers concrete implementations into the DI container. Other extensions (GraphQL schemas, lifecycle hooks, etc.) can then declare the abstraction as a dependency and receive the implementation automatically.
-
-## Pattern
-
-```typescript
-// extensions/myFeature/MyFeature.ts
-import { createFeature, createAbstraction } from "webiny/api";
-
-// 1. Define the interface
-export interface IMyService {
-    doSomething(): string;
-}
-
-// 2. Create the abstraction (DI token)
-export const MyService = createAbstraction<IMyService>("MyService");
-
-// 3. Export the interface via namespace (convention for consumers)
-export namespace MyService {
-    export type Interface = IMyService;
-}
-
-// 4. Register the feature (default export)
-export default createFeature({
-    name: "MyApp/MyFeature",
-    register(container) {
-        // Register a plain object instance
-        container.registerInstance(MyService, {
-            doSomething() {
-                return "Hello!";
-            }
-        });
-    }
-});
-```
-
-## Core APIs
-
-### `createAbstraction<T>(name: string)`
-
-Creates a typed DI token (an `Abstraction<T>` instance). The generic `T` is the interface that implementations must satisfy. The `name` string is used for debugging and error messages.
-
-| Import | `import { createAbstraction } from "webiny/api"` |
-|---|---|
-| Returns | `Abstraction<T>` |
-| Usage | Pass to `container.registerInstance()`, `container.register()`, or as a dependency in other extensions |
-
-### `createFeature(def)`
-
-Creates a feature definition that the framework loads as an API extension. Must be the **default export** of the file.
-
-| Import | `import { createFeature } from "webiny/api"` |
-|---|---|
-| `def.name` | Unique feature name (convention: `"AppName/FeatureName"`) |
-| `def.register(container)` | Called at startup with the DI `Container` instance |
-
-### Container Registration Methods
-
-| Method | When to Use |
-|---|---|
-| `container.registerInstance(abstraction, instance)` | Register a plain object that satisfies the interface |
-| `container.register(Implementation)` | Register a class (created via `Abstraction.createImplementation`) |
-| `container.registerFactory(abstraction, () => instance)` | Register a lazy factory |
-
-## Extension Registration
-
-Register the feature file using `<Api.Extension>` in your extension's React entry point:
-
-```tsx
-// extensions/myFeature/Extension.tsx
-import React from "react";
-import { Api } from "webiny/extensions";
-
-export const MyFeature = () => {
-    return <Api.Extension src={"@/extensions/myFeature/MyFeature.ts"} />;
-};
-```
-
-Then mount it in `webiny.config.tsx` or your app's extension composition.
-
-## Examples
-
-### Simple Service with Instance Registration
-
-```typescript
-// extensions/pricing/PricingFeature.ts
-import { createFeature, createAbstraction } from "webiny/api";
-
-export interface IPricingService {
-    calculatePrice(basePrice: number, quantity: number): number;
-    getDiscount(customerId: string): Promise<number>;
-}
-
-export const PricingService = createAbstraction<IPricingService>("PricingService");
-
-export namespace PricingService {
-    export type Interface = IPricingService;
-}
-
-export default createFeature({
-    name: "MyApp/Pricing",
-    register(container) {
-        container.registerInstance(PricingService, {
-            calculatePrice(basePrice, quantity) {
-                return basePrice * quantity;
-            },
-            async getDiscount(_customerId) {
-                return 0.1; // 10% default discount
-            }
-        });
-    }
-});
-```
-
-### Service with Class Registration and Dependencies
-
-When your service itself needs dependencies, use `createImplementation` on the abstraction and `container.register()`:
-
-```typescript
-// extensions/notifications/NotificationFeature.ts
-import { createFeature, createAbstraction } from "webiny/api";
-import { Logger } from "webiny/api/logger";
-
-export interface INotificationService {
-    notify(userId: string, message: string): Promise<void>;
-}
-
-export const NotificationService = createAbstraction<INotificationService>("NotificationService");
-
-export namespace NotificationService {
-    export type Interface = INotificationService;
-}
-
-// Class implementation with injected dependencies
-class NotificationServiceImpl implements INotificationService {
-    constructor(private logger: Logger.Interface) {}
-
-    async notify(userId: string, message: string) {
-        this.logger.info(`Notifying ${userId}: ${message}`);
-    }
-}
-
-// Attach DI metadata to the class
-const NotificationServiceRegistration = NotificationService.createImplementation({
-    implementation: NotificationServiceImpl,
-    dependencies: [Logger]
-});
-
-export default createFeature({
-    name: "MyApp/Notifications",
-    register(container) {
-        container.register(NotificationServiceRegistration);
-    }
-});
-```
-
-## Key Rules
-
-1. **Default export** -- `createFeature()` result must be the default export of the file.
-2. **One feature per file** -- each `.ts` file loaded via `<Api.Extension>` should export one feature.
-3. **Namespace convention** -- export `namespace MyService { export type Interface = IMyService; }` so consumers can type dependencies as `MyService.Interface`.
-4. **Name uniqueness** -- feature names must be globally unique; use `"AppName/FeatureName"` convention.
-5. **Constructor param order** -- when using class registration, the `dependencies` array must match constructor parameter order exactly.
-
-## Quick Reference
-
-| What | How |
-|---|---|
-| Import | `import { createFeature, createAbstraction } from "webiny/api"` |
-| Create token | `const MyService = createAbstraction<IMyService>("MyService")` |
-| Register instance | `container.registerInstance(MyService, { ... })` |
-| Register class | `container.register(MyService.createImplementation({ implementation, dependencies }))` |
-| Extension entry | `<Api.Extension src={"@/extensions/myFeature/MyFeature.ts"} />` |
-| Deploy | `yarn webiny deploy api --env=dev` |
-
-## Related Skills
-
-- **webiny-dependency-injection** -- Full DI pattern details, all injectable services, decorator and composite patterns
-- **webiny-custom-graphql-api** -- How to consume your custom feature's abstraction in a GraphQL schema
-- **webiny-project-structure** -- Extension file layout and `webiny.config.tsx` registration