Merge pull request #7 from webzard-io/component-simple

implement alert & link

packages/arco-lib/src/components/Alert.tsx

@@ -0,0 +1,66 @@
+import { Alert as BaseAlert } from "@arco-design/web-react";
+import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
+import { css, cx } from "@emotion/css";
+import { Type, Static } from "@sinclair/typebox";
+import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
+import { AlertPropsSchema as BaseAlertPropsSchema } from "../generated/types/Alert";
+
+const AlertPropsSchema = Type.Object(BaseAlertPropsSchema);
+const AlertStateSchema = Type.Object({});
+
+const AlertImpl: ComponentImpl<Static<typeof AlertPropsSchema>> = (props) => {
+  const { visible, content, title, ...cProps } = getComponentProps(props);
+  const { customStyle, className, slotsElements } = props;
+
+  return visible ? (
+    <BaseAlert
+      action={slotsElements.action}
+      icon={slotsElements.icon}
+      content={
+        <>
+          {content}
+          {slotsElements.content}
+        </>
+      }
+      title={
+        <>
+          {title}
+          {slotsElements.title}
+        </>
+      }
+      className={cx(className, css(customStyle?.content))}
+      {...cProps}
+    />
+  ) : null;
+};
+
+const exampleProperties: Static<typeof AlertPropsSchema> = {
+  className: "",
+  disabled: false,
+  closable: true,
+  title: "info",
+  content: "Here is an example text",
+  visible: "true",
+};
+
+const options = {
+  version: "arco/v1",
+  metadata: {
+    ...FALLBACK_METADATA,
+    name: "Alert",
+    displayName: "Alert",
+    exampleProperties,
+  },
+  spec: {
+    properties: AlertPropsSchema,
+    state: AlertStateSchema,
+    methods: {},
+    slots: ["content", "action", "icon", "title"],
+    styleSlots: ["content"],
+    events: [],
+  },
+};
+
+export const Alert = implementRuntimeComponent(options)(
+  AlertImpl as any
+);

packages/arco-lib/src/components/Link.tsx

@@ -0,0 +1,54 @@
+import { Link as BaseLink } from "@arco-design/web-react";
+import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
+import { css, cx } from "@emotion/css";
+import { Type, Static } from "@sinclair/typebox";
+import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
+import { LinkPropsSchema as BaseLinkPropsSchema } from "../generated/types/Link";
+
+const LinkPropsSchema = Type.Object(BaseLinkPropsSchema);
+const LinkStateSchema = Type.Object({});
+
+const LinkImpl: ComponentImpl<Static<typeof LinkPropsSchema>> = (props) => {
+  const { content,status, ...cProps } = getComponentProps(props);
+  const { customStyle, className, slotsElements } = props;
+
+  return (
+    <BaseLink
+    status={status as any}
+    className={cx(className, css(customStyle?.content))} {...cProps}>
+      {content}
+      {slotsElements.content}
+    </BaseLink>
+  );
+};
+
+const exampleProperties: Static<typeof LinkPropsSchema> = {
+  className: "",
+  disabled: false,
+  hoverable: true,
+  status: "default",
+  href: "https://www.smartx.com/",
+  content: "Link",
+};
+
+const options = {
+  version: "arco/v1",
+  metadata: {
+    ...FALLBACK_METADATA,
+    name: "Link",
+    displayName: "Link",
+    exampleProperties,
+  },
+  spec: {
+    properties: LinkPropsSchema,
+    state: LinkStateSchema,
+    methods: {},
+    slots: ["content"],
+    styleSlots: ["content"],
+    events: [],
+  },
+};
+
+export const Link = implementRuntimeComponent(options)(
+  LinkImpl as typeof LinkImpl & undefined
+);

packages/arco-lib/src/generated/types/Alert.ts

@@ -0,0 +1,14 @@
+import { Type } from '@sinclair/typebox';
+import { StringUnion } from '../../sunmao-helper';
+
+export const AlertPropsSchema = {
+    className: Type.Optional(Type.String()),
+    disabled: Type.Optional(Type.Boolean()),
+    closable: Type.Optional(Type.Boolean()),
+    type: Type.Optional(StringUnion(['info', 'success', 'warning', 'error'])),
+    showIcon: Type.Optional(Type.Boolean()),
+    banner: Type.Optional(Type.Boolean()),
+    content:Type.Optional(Type.String()),
+    title:Type.Optional(Type.String()),
+    visible:Type.Optional(Type.String()),
+}

packages/arco-lib/src/generated/types/Link.ts

@@ -0,0 +1,11 @@
+import { Type } from '@sinclair/typebox';
+import { StringUnion } from '../../sunmao-helper';
+
+export const LinkPropsSchema = {
+    className: Type.Optional(Type.String()),
+    disabled: Type.Optional(Type.Boolean()),
+    hoverable: Type.Optional(Type.Boolean()),
+    status: Type.Optional(StringUnion(['default', 'success', 'warning', 'error'])),
+    href: Type.Optional(Type.String()),
+    content: Type.Optional(Type.String())
+}