@plasmicpkgs/antd5 0.0.4

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/registerConfigProvider.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { Registerable } from "./utils";
+export interface ThemeOpts {
+    fontFamily?: string;
+    fontSize?: number;
+    lineHeight?: number;
+    colorTextBase?: string;
+    colorPrimary?: string;
+    colorSuccess?: string;
+    colorWarning?: string;
+    colorInfo?: string;
+    lineWidth?: number;
+    borderRadius?: number;
+    controlHeight?: number;
+    sizeUnit?: number;
+    sizeStep?: number;
+    wireframe?: boolean;
+    spacing?: "small" | "middle" | "large";
+}
+export declare function themeToAntdConfig(opts: ThemeOpts): {
+    theme: {
+        token: {
+            [k: string]: string | number | boolean | undefined;
+        };
+    };
+    size?: "small" | "large" | "middle" | undefined;
+};
+export declare function AntdConfigProvider(props: Omit<ThemeOpts, "fontFamily" | "fontSize" | "lineWidth"> & {
+    children?: React.ReactNode;
+    themeStyles: Record<string, string>;
+}): JSX.Element;
+export declare function registerTokens(loader?: Registerable): void;
+export declare const registerConfigProvider: (loader?: Registerable | undefined) => void;

package/dist/registerSelect.d.ts

@@ -0,0 +1,10 @@
+import Select from "antd/es/select";
+import { ComponentProps } from "react";
+import { Registerable } from "./utils";
+export declare const AntdOption: import("rc-select/lib/Option").OptionFC;
+export declare function AntdSelect(props: ComponentProps<typeof Select> & {
+    popupScopeClassName?: string;
+    popupClassName?: string;
+    defaultStylesClassName?: string;
+}): JSX.Element;
+export declare function registerSelect(loader?: Registerable): void;

package/dist/registerTable.d.ts

@@ -0,0 +1,14 @@
+import Table from "antd/es/table";
+import React from "react";
+import { Registerable } from "./utils";
+export declare function AntdTable(props: React.ComponentProps<typeof Table> & {
+    data: any;
+    rowKey?: string;
+    isSelectable?: undefined | "single" | "multiple";
+    selectedRowKeys?: string[];
+    onSelectionChange?: (keys: React.Key[], rows: any[]) => void;
+    setControlContextData?: (ctx: any) => void;
+}): JSX.Element;
+export declare const AntdColumnGroup: typeof import("antd/es/table/ColumnGroup").default;
+export declare const AntdColumn: typeof import("antd/es/table/Column").default;
+export declare function registerTable(loader?: Registerable): void;

package/dist/utils.d.ts

@@ -0,0 +1,24 @@
+import { ComponentMeta, default as registerComponent } from "@plasmicapp/host/registerComponent";
+import { default as registerGlobalContext, GlobalContextMeta } from "@plasmicapp/host/registerGlobalContext";
+import { default as registerToken } from "@plasmicapp/host/registerToken";
+import React from "react";
+export type Registerable = {
+    registerComponent: typeof registerComponent;
+    registerGlobalContext: typeof registerGlobalContext;
+    registerToken: typeof registerToken;
+};
+export declare function makeRegisterComponent<T extends React.ComponentType<any>>(component: T, meta: ComponentMeta<React.ComponentProps<T>>): (loader?: Registerable) => void;
+export declare function makeRegisterGlobalContext<T extends React.ComponentType<any>>(component: T, meta: GlobalContextMeta<React.ComponentProps<T>>): (loader?: Registerable) => void;
+export declare function registerComponentHelper<T extends React.ComponentType<any>>(loader: Registerable | undefined, component: T, meta: ComponentMeta<React.ComponentProps<T>>): void;
+type ReactElt = {
+    children: ReactElt | ReactElt[];
+    props: {
+        children: ReactElt | ReactElt[];
+        [prop: string]: any;
+    } | null;
+    type: React.ComponentType<any> | null;
+    key: string | null;
+} | null;
+export declare function traverseReactEltTree(children: React.ReactNode, callback: (elt: ReactElt) => void): void;
+export declare function asArray<T>(x: T[] | T | undefined | null): T[];
+export {};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@plasmicpkgs/antd5",
+  "version": "0.0.4",
+  "description": "Plasmic registration calls for antd components",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/antd.esm.js",
+  "files": [
+    "dist",
+    "skinny"
+  ],
+  "size-limit": [
+    {
+      "path": "dist/index.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/antd.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "scripts": {
+    "build": "rollup -c rollup.config.mjs && ./node_modules/.bin/tsc --emitDeclarationOnly --declaration src/index.ts --incremental --tsBuildInfoFile ./dist/.tsbuildinfo  --skipLibCheck --jsx react --esModuleInterop --strict --outDir ./dist/ && cp ./dist/*.d.ts skinny/ && rm skinny/index.d.ts",
+    "prepare": "if-env PREPARE_NO_BUILD=true || yarn build"
+  },
+  "devDependencies": {
+    "@plasmicapp/host": "1.0.103",
+    "@plasmicapp/query": "0.1.61",
+    "@types/node": "^14.0.26",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "antd": "^5.1.6",
+    "glob": "^8.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^3.10.1",
+    "rollup-plugin-dts": "^5.0.0",
+    "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-replace-imports": "^1.0.0",
+    "typescript": "^4.6.4"
+  },
+  "peerDependencies": {
+    "@plasmicapp/host": "1.0.103",
+    "@plasmicapp/query": "0.1.61",
+    "antd": ">=5.1.0",
+    "react": ">=16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "2badf5ec47566e84eb4ef8c27b2a48524516edc9"
+}

package/skinny/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/skinny/registerConfigProvider.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { Registerable } from "./utils";
+export interface ThemeOpts {
+    fontFamily?: string;
+    fontSize?: number;
+    lineHeight?: number;
+    colorTextBase?: string;
+    colorPrimary?: string;
+    colorSuccess?: string;
+    colorWarning?: string;
+    colorInfo?: string;
+    lineWidth?: number;
+    borderRadius?: number;
+    controlHeight?: number;
+    sizeUnit?: number;
+    sizeStep?: number;
+    wireframe?: boolean;
+    spacing?: "small" | "middle" | "large";
+}
+export declare function themeToAntdConfig(opts: ThemeOpts): {
+    theme: {
+        token: {
+            [k: string]: string | number | boolean | undefined;
+        };
+    };
+    size?: "small" | "large" | "middle" | undefined;
+};
+export declare function AntdConfigProvider(props: Omit<ThemeOpts, "fontFamily" | "fontSize" | "lineWidth"> & {
+    children?: React.ReactNode;
+    themeStyles: Record<string, string>;
+}): JSX.Element;
+export declare function registerTokens(loader?: Registerable): void;
+export declare const registerConfigProvider: (loader?: Registerable | undefined) => void;

package/skinny/registerConfigProvider.js

@@ -0,0 +1,446 @@
+import { GlobalActionsProvider } from '@plasmicapp/host';
+import registerToken from '@plasmicapp/host/registerToken';
+import { addLoadingStateListener } from '@plasmicapp/query';
+import App from 'antd/es/app';
+import ConfigProvider from 'antd/es/config-provider';
+import theme from 'antd/es/theme';
+import React from 'react';
+import { m as makeRegisterGlobalContext } from './utils-04cd07f6.js';
+import '@plasmicapp/host/registerComponent';
+import '@plasmicapp/host/registerGlobalContext';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function themeToAntdConfig(opts) {
+  const {
+    colorTextBase,
+    colorPrimary,
+    colorSuccess,
+    colorWarning,
+    colorInfo,
+    fontFamily,
+    fontSize,
+    lineWidth,
+    borderRadius,
+    controlHeight,
+    sizeUnit,
+    sizeStep,
+    wireframe,
+    spacing
+  } = opts;
+  return __spreadProps(__spreadValues({}, spacing && { size: spacing }), {
+    theme: {
+      token: Object.fromEntries(Object.entries({
+        colorTextBase,
+        colorPrimary,
+        colorSuccess,
+        colorWarning,
+        colorInfo,
+        fontFamily,
+        fontSize,
+        lineWidth,
+        borderRadius,
+        controlHeight,
+        sizeUnit,
+        sizeStep,
+        wireframe
+      }).filter(([key, val]) => !!val))
+    }
+  });
+}
+function AntdConfigProvider(props) {
+  const _a = props, { children, themeStyles } = _a, rest = __objRest(_a, ["children", "themeStyles"]);
+  return /* @__PURE__ */ React.createElement(ConfigProvider, __spreadValues({}, themeToAntdConfig(__spreadProps(__spreadValues({}, rest), {
+    fontFamily: themeStyles.fontFamily,
+    fontSize: themeStyles.fontSize ? parseInt(themeStyles.fontSize) : void 0,
+    lineHeight: themeStyles.lineHeight ? parseInt(themeStyles.lineHeight) : void 0,
+    colorTextBase: themeStyles.color
+  }))), /* @__PURE__ */ React.createElement(App, null, /* @__PURE__ */ React.createElement(InnerConfigProvider, null, children)));
+}
+function InnerConfigProvider(props) {
+  const { children } = props;
+  const { token } = theme.useToken();
+  const makeVarName = (name) => `--antd-${name}`;
+  const cssStyles = React.useMemo(() => `
+:root {
+  ${Object.entries(token).map(([key, val]) => `${makeVarName(key)}:${typeof val === "string" ? val.trim() : val};`).join("\n")}
+}
+  `, [token]);
+  const app = App.useApp();
+  const actions = React.useMemo(() => ({
+    showNotification: (opts) => {
+      var _b;
+      const _a = opts, rest = __objRest(_a, ["type"]);
+      app.notification[(_b = opts.type) != null ? _b : "info"](__spreadValues({}, rest));
+    },
+    hideNotifications: () => {
+      app.notification.destroy();
+    }
+  }), [app]);
+  if (!GlobalActionsProvider) {
+    warnOutdatedDeps();
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", null, cssStyles), GlobalActionsProvider && /* @__PURE__ */ React.createElement(GlobalActionsProvider, {
+    contextName: "plasmic-antd5-config-provider",
+    actions
+  }, children), /* @__PURE__ */ React.createElement(GlobalLoadingIndicator, null));
+}
+let warned = false;
+function warnOutdatedDeps() {
+  if (!warned) {
+    console.log(`You are using a version of @plasmicapp/* that is too old. Please upgrade to the latest version.`);
+    warned = true;
+  }
+}
+function GlobalLoadingIndicator() {
+  const app = App.useApp();
+  React.useEffect(() => {
+    if (addLoadingStateListener) {
+      return addLoadingStateListener((isLoading) => {
+        if (isLoading) {
+          app.message.open({
+            content: "Loading...",
+            duration: 0,
+            key: `plasmic-antd5-global-loading-indicator`
+          });
+        } else {
+          app.message.destroy(`plasmic-antd5-global-loading-indicator`);
+        }
+      }, { immediate: true });
+    } else {
+      warnOutdatedDeps();
+      return () => {
+      };
+    }
+  }, [app]);
+  return null;
+}
+function registerTokens(loader) {
+  const regs = [];
+  const makeColorToken = (name) => {
+    const colorIndex = name.indexOf("color");
+    const humanName = makeNiceName(colorIndex >= 0 ? name.substring(name.indexOf("color") + "color".length) : name);
+    return {
+      name: `Sys: ${humanName}`,
+      value: `var(--antd-${name})`,
+      type: "color"
+    };
+  };
+  function makeNiceName(name) {
+    name = name[0].toUpperCase() + name.substring(1);
+    return name.replace(/([a-z])([A-Z])/g, "$1 $2");
+  }
+  const colorTokens = [
+    "colorPrimary",
+    "colorSuccess",
+    "colorWarning",
+    "colorError",
+    "colorInfo",
+    "colorText",
+    "colorTextSecondary",
+    "colorTextTertiary",
+    "colorTextQuaternary",
+    "colorBorder",
+    "colorBorderSecondary",
+    "colorFill",
+    "colorFillSecondary",
+    "colorFillTertiary",
+    "colorFillQuaternary",
+    "colorBgLayout",
+    "colorBgContainer",
+    "colorBgElevated",
+    "colorBgSpotlight",
+    "colorPrimaryBg",
+    "colorPrimaryBgHover",
+    "colorPrimaryBorder",
+    "colorPrimaryBorderHover",
+    "colorPrimaryHover",
+    "colorPrimaryActive",
+    "colorPrimaryTextHover",
+    "colorPrimaryText",
+    "colorPrimaryTextActive",
+    "colorSuccessBg",
+    "colorSuccessBgHover",
+    "colorSuccessBorder",
+    "colorSuccessBorderHover",
+    "colorSuccessHover",
+    "colorSuccessActive",
+    "colorSuccessTextHover",
+    "colorSuccessText",
+    "colorSuccessTextActive",
+    "colorWarningBg",
+    "colorWarningBgHover",
+    "colorWarningBorder",
+    "colorWarningBorderHover",
+    "colorWarningHover",
+    "colorWarningActive",
+    "colorWarningTextHover",
+    "colorWarningText",
+    "colorWarningTextActive",
+    "colorInfoBg",
+    "colorInfoBgHover",
+    "colorInfoBorder",
+    "colorInfoBorderHover",
+    "colorInfoHover",
+    "colorInfoActive",
+    "colorInfoTextHover",
+    "colorInfoText",
+    "colorInfoTextActive",
+    "colorErrorBg",
+    "colorErrorBgHover",
+    "colorErrorBorder",
+    "colorErrorBorderHover",
+    "colorErrorHover",
+    "colorErrorActive",
+    "colorErrorTextHover",
+    "colorErrorText",
+    "colorErrorTextActive",
+    "colorWhite",
+    "colorBgMask",
+    "colorFillContentHover",
+    "colorFillAlter",
+    "colorFillContent",
+    "colorBgContainerDisabled",
+    "colorBgTextHover",
+    "colorBgTextActive",
+    "colorBorderBg",
+    "colorSplit",
+    "colorTextPlaceholder",
+    "colorTextDisabled",
+    "colorTextHeading",
+    "colorTextLabel",
+    "colorTextDescription",
+    "colorTextLightSolid",
+    "colorIcon",
+    "colorIconHover",
+    "colorLink",
+    "colorLinkHover",
+    "colorLinkActive",
+    "colorLinkHighlight",
+    "controlOutline",
+    "controlWarningOutline",
+    "controlErrorOutline",
+    "controlItemBgHover",
+    "controlItemBgActive",
+    "controlItemBgActiveHover",
+    "controlItemBgActiveDisabled"
+  ];
+  colorTokens.forEach((name) => regs.push(makeColorToken(name)));
+  const makeGenericToken = (name, type) => {
+    return {
+      name: `Sys: ${makeNiceName(name)}`,
+      value: `var(--antd-${name})`,
+      type
+    };
+  };
+  const spacingTokens = [
+    "lineWidth",
+    "borderRadius",
+    "controlHeight",
+    "sizeXXL",
+    "sizeXL",
+    "sizeLG",
+    "sizeMD",
+    "sizeMS",
+    "size",
+    "sizeSM",
+    "sizeXS",
+    "sizeXXS",
+    "controlHeightXS",
+    "controlHeightSM",
+    "controlHeightLG",
+    "lineWidthBold",
+    "borderRadiusXS",
+    "borderRadiusSM",
+    "borderRadiusLG",
+    "borderRadiusOuter",
+    "controlOutlineWidth",
+    "controlInteractiveSize",
+    "paddingXXS",
+    "paddingXS",
+    "paddingSM",
+    "padding",
+    "paddingMD",
+    "paddingLG",
+    "paddingXL",
+    "paddingContentHorizontalLG",
+    "paddingContentHorizontal",
+    "paddingContentHorizontalSM",
+    "paddingContentVerticalLG",
+    "paddingContentVertical",
+    "paddingContentVerticalSM",
+    "marginXXS",
+    "marginXS",
+    "marginSM",
+    "margin",
+    "marginMD",
+    "marginLG",
+    "marginXL",
+    "marginXXL",
+    "controlPaddingHorizontal",
+    "controlPaddingHorizontalSM"
+  ];
+  spacingTokens.forEach((token) => regs.push(makeGenericToken(token, "spacing")));
+  const fontSizeTokens = [
+    "fontSizeSM",
+    "fontSizeLG",
+    "fontSizeXL",
+    "fontSizeHeading1",
+    "fontSizeHeading2",
+    "fontSizeHeading3",
+    "fontSizeHeading4",
+    "fontSizeHeading5"
+  ];
+  fontSizeTokens.forEach((token) => regs.push(makeGenericToken(token, "font-size")));
+  const lineHeightTokens = [
+    "lineHeightLG",
+    "lineHeightSM",
+    "lineHeightHeading1",
+    "lineHeightHeading2",
+    "lineHeightHeading3",
+    "lineHeightHeading4",
+    "lineHeightHeading5"
+  ];
+  lineHeightTokens.forEach((token) => regs.push(makeGenericToken(token, "line-height")));
+  if (loader) {
+    regs.forEach((t) => loader.registerToken(t));
+  } else {
+    regs.forEach((t) => registerToken(t));
+  }
+}
+const registerConfigProvider = makeRegisterGlobalContext(AntdConfigProvider, __spreadProps(__spreadValues({
+  name: "plasmic-antd5-config-provider",
+  displayName: "Ant Design System Settings",
+  props: {
+    colorPrimary: {
+      type: "color",
+      defaultValue: "#1677ff"
+    },
+    colorSuccess: {
+      type: "color",
+      defaultValue: "#52c41a"
+    },
+    colorWarning: {
+      type: "color",
+      defaultValue: "#faad14"
+    },
+    colorError: {
+      type: "color",
+      defaultValue: "#ff4d4f"
+    },
+    colorInfo: {
+      type: "color",
+      defaultValue: "#1677ff"
+    },
+    colorBgBase: {
+      type: "color",
+      defaultValue: "#ffffff"
+    },
+    lineWidth: {
+      type: "number",
+      defaultValue: 1
+    },
+    borderRadius: {
+      type: "number",
+      defaultValue: 6
+    },
+    controlHeight: {
+      type: "number",
+      defaultValue: 32
+    },
+    sizeUnit: {
+      type: "number",
+      defaultValue: 4
+    },
+    sizeStep: {
+      type: "number",
+      defaultValue: 4
+    },
+    wireframe: {
+      type: "boolean",
+      defaultValue: false
+    },
+    spacing: {
+      type: "choice",
+      options: ["small", "middle", "large"]
+    },
+    themeStyles: {
+      type: "themeStyles"
+    }
+  }
+}, {
+  unstable__globalActions: {
+    showNotification: {
+      displayName: "Show notification",
+      parameters: {
+        type: {
+          type: "choice",
+          options: ["success", "error", "info", "warning"],
+          defaultValue: "info"
+        },
+        message: {
+          type: "string",
+          defaultValue: "A message for you!"
+        },
+        description: {
+          type: "string",
+          defaultValue: "Would you like to learn more?"
+        },
+        duration: {
+          type: "number",
+          defaultValueHint: 5
+        },
+        placement: {
+          type: "choice",
+          options: [
+            "top",
+            "topLeft",
+            "topRight",
+            "bottom",
+            "bottomLeft",
+            "bottomRight"
+          ],
+          defaultValueHint: "topRight"
+        }
+      }
+    },
+    hideNotifications: {
+      displayName: "Hide notifications"
+    }
+  }
+}), {
+  importPath: "@plasmicpkgs/antd5/skinny/registerConfigProvider",
+  importName: "AntdConfigProvider"
+}));
+
+export { AntdConfigProvider, registerConfigProvider, registerTokens, themeToAntdConfig };
+//# sourceMappingURL=registerConfigProvider.js.map