feat: init bifrostui

.dumi/global.less

@@ -0,0 +1,10 @@
+@import '@bifrostui/styles/index.less';
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  font-family: PingFangSC-Regular;
+}

.dumi/theme/builtins/API/index.tsx

@@ -0,0 +1,182 @@
+import { useAtomAssets, useIntl, useRouteMeta } from 'dumi';
+import type { AtomComponentAsset } from 'dumi-assets-types';
+import React, { useEffect, useState, type FC } from 'react';
+import Table from '../Table';
+
+type PropertySchema = NonNullable<
+  AtomComponentAsset['propsConfig']['properties']
+>[string];
+
+const HANDLERS = {
+  // entry method
+  toString(prop: PropertySchema): string {
+    if (typeof prop.type === 'string' && prop.type in this) {
+      // value from TypeMap
+      if ('enum' in prop) return this.enum(prop);
+
+      return (this as any)[prop.type](prop);
+    } else if (prop.type) {
+      // non-parsed type, such as ReactNode
+      return this.getValidClassName(prop) || prop.type;
+    } else if ('const' in prop) {
+      // const value
+      return `${prop.const}`;
+    } else if ('oneOf' in prop) {
+      // oneOf value
+      return this.oneOf(prop);
+    }
+
+    // unknown type
+    return `unknown`;
+  },
+
+  // type handlers
+  string(prop: PropertySchema) {
+    return prop.type;
+  },
+  number(prop: PropertySchema) {
+    return prop.type;
+  },
+  boolean(prop: PropertySchema) {
+    return prop.type;
+  },
+  any(prop: PropertySchema) {
+    return prop.type;
+  },
+  object(prop: Extract<PropertySchema, { type: 'object' }>) {
+    let props: string[] = [];
+
+    Object.entries(prop.properties || {}).forEach(([key, value]) => {
+      // skip nested object type
+      props.push(
+        `${key}${prop.required?.includes(key) ? '' : '?'}: ${
+          value.type === 'object' ? 'object' : this.toString(value)
+        }`,
+      );
+    });
+
+    return props.length ? `{ ${props.join('; ')} }` : '{}';
+  },
+  array(prop: Extract<PropertySchema, { type: 'array' }>) {
+    if (prop.items) {
+      const className = this.getValidClassName(prop.items);
+
+      return className ? `${className}[]` : `${this.toString(prop.items)}[]`;
+    }
+
+    return 'any[]';
+  },
+  // FIXME: extract real type
+  element(prop: any) {
+    return `<${prop.componentName} />`;
+  },
+  // FIXME: extract real type
+  function({ signature }: any) {
+    const signatures = 'oneOf' in signature ? signature.oneOf : [signature];
+
+    return signatures
+      .map(
+        (signature) =>
+          `${signature.isAsync ? 'async ' : ''}(${signature.arguments
+            .map((arg: any) => `${arg.key}: ${this.toString(arg)}`)
+            .join(', ')}) => ${this.toString(signature.returnType)}`,
+      )
+      .join(' | ');
+  },
+  // FIXME: extract real type
+  dom(prop: any) {
+    return prop.className || 'DOM';
+  },
+
+  // special handlers
+  enum(prop: PropertySchema) {
+    return prop.enum!.map((v) => JSON.stringify(v)).join(' | ');
+  },
+  oneOf(prop: PropertySchema): string {
+    return prop
+      .oneOf!.map((v) => this.getValidClassName(v) || this.toString(v))
+      .join(' | ');
+  },
+
+  // utils
+  getValidClassName(prop: PropertySchema) {
+    return 'className' in prop &&
+      typeof prop.className === 'string' &&
+      prop.className !== '__type'
+      ? prop.className
+      : null;
+  },
+};
+
+const APIType: FC<PropertySchema> = (prop) => {
+  const [type, setType] = useState(() => HANDLERS.toString(prop));
+
+  useEffect(() => {
+    setType(HANDLERS.toString(prop));
+  }, [prop]);
+
+  return <code>{type}</code>;
+};
+
+const API: FC<{ id?: string }> = (props) => {
+  const { frontmatter } = useRouteMeta();
+  const { components } = useAtomAssets();
+  const id = props.id || frontmatter.atomId;
+  const intl = useIntl();
+
+  if (!id) throw new Error('`id` properties if required for API component!');
+
+  const definition = components?.[id];
+
+  return (
+    <div className="markdown">
+      <Table>
+        <thead>
+          <tr>
+            <th>{intl.formatMessage({ id: 'api.component.name' })}</th>
+            <th>{intl.formatMessage({ id: 'api.component.description' })}</th>
+            <th>{intl.formatMessage({ id: 'api.component.type' })}</th>
+            <th>{intl.formatMessage({ id: 'api.component.default' })}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {definition && definition.propsConfig?.properties ? (
+            Object.entries(definition.propsConfig.properties).map(
+              ([name, prop]) => (
+                <tr key={name}>
+                  <td>{name}</td>
+                  <td>{prop.description || '--'}</td>
+                  <td>
+                    <APIType {...prop} />
+                  </td>
+                  <td>
+                    <code>
+                      {definition.propsConfig.required?.includes(name)
+                        ? intl.formatMessage({ id: 'api.component.required' })
+                        : JSON.stringify(prop.default) || '--'}
+                    </code>
+                  </td>
+                </tr>
+              ),
+            )
+          ) : (
+            <tr>
+              <td colSpan={4}>
+                {intl.formatMessage(
+                  {
+                    id: `api.component.${
+                      components ? 'not.found' : 'unavailable'
+                    }`,
+                  },
+                  { id },
+                )}
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </Table>
+    </div>
+  );
+};
+
+export default API;

.dumi/theme/builtins/Badge/index.less

@@ -0,0 +1,53 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-badge {
+  display: inline-block;
+  margin-inline-start: 2px;
+  padding: 1px 8px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  border-radius: 4px;
+  vertical-align: top;
+
+  &:not([type]),
+  &[type='info'] {
+    color: @c-primary;
+    background: lighten(@c-primary, 40%);
+
+    @{dark-selector} & {
+      color: @c-primary;
+      background: darken(@c-primary-dark, 20%);
+    }
+  }
+
+  &[type='warning'] {
+    color: @c-warning;
+    background: lighten(@c-warning, 48%);
+
+    @{dark-selector} & {
+      color: @c-warning;
+      background: darken(@c-warning-dark, 20%);
+    }
+  }
+
+  &[type='success'] {
+    color: @c-success;
+    background: lighten(@c-success, 54%);
+
+    @{dark-selector} & {
+      color: @c-success;
+      background: darken(@c-success-dark, 9%);
+    }
+  }
+
+  &[type='error'] {
+    color: @c-error;
+    background: lighten(@c-error, 47%);
+
+    @{dark-selector} & {
+      color: @c-error;
+      background: darken(@c-error-dark, 18%);
+    }
+  }
+}

.dumi/theme/builtins/Badge/index.tsx

@@ -0,0 +1,9 @@
+import React, { type FC, type ReactNode } from 'react';
+import './index.less';
+
+const Badge: FC<{
+  children: ReactNode;
+  type: 'info' | 'warning' | 'error' | 'success';
+}> = (props) => <span className="dumi-default-badge" {...props} />;
+
+export default Badge;

.dumi/theme/builtins/Container/index.less

@@ -0,0 +1,99 @@
+@import (reference) '../../styles/variables.less';
+
+.container-colors(@bg-color, @title-color, @text-color) {
+  background: @bg-color;
+
+  > h4,
+  > svg {
+    color: @title-color;
+  }
+
+  > section {
+    color: @text-color;
+  }
+}
+
+.@{prefix}-container.markdown {
+  padding: 18px 0;
+  padding-inline-start: 44px;
+  padding-inline-end: 16px;
+  border-radius: 4px;
+
+  &:not(:first-child) {
+    margin-bottom: 24px;
+  }
+
+  &:not(:last-child) {
+    margin-top: 32px;
+  }
+
+  > svg {
+    float: left;
+    fill: currentcolor;
+    margin-inline-start: -26px;
+    width: 18px;
+
+    [data-direction='rtl'] & {
+      float: right;
+    }
+  }
+
+  > h4 {
+    clear: none;
+    margin: 0 0 12px;
+    font-size: 15px;
+    line-height: 17px;
+  }
+
+  > section {
+    font-size: 15px;
+  }
+
+  &[data-type='info'] {
+    @color: darken(desaturate(@c-primary, 45%), 10%);
+
+    .container-colors(lighten(@c-primary, 42%), @color, desaturate(@color, 20%));
+
+    @{dark-selector} & {
+      @color: lighten(desaturate(@c-primary-dark, 45%), 20%);
+
+      .container-colors(darken(@c-primary-dark, 26%), @color, desaturate(@color, 20%));
+    }
+  }
+
+  &[data-type='warning'] {
+    @color: darken(desaturate(@c-warning, 20%), 2%);
+
+    .container-colors(lighten(@c-warning, 51%), @color, desaturate(@color, 24%));
+
+    @{dark-selector} & {
+      @color: lighten(desaturate(@c-warning, 20%), 3%);
+
+      .container-colors(darken(@c-warning-dark, 18%), @color, desaturate(@color, 20%));
+    }
+  }
+
+  &[data-type='success'] {
+    @color: darken(desaturate(@c-success, 5%), 1%);
+
+    .container-colors(lighten(@c-success, 59%), @color, desaturate(@color, 22%));
+
+    @{dark-selector} & {
+      @color: lighten(desaturate(@c-success, 5%), 5%);
+
+      .container-colors(darken(@c-success-dark, 10%), @color, desaturate(@color, 20%));
+    }
+  }
+
+  &[data-type='error'] {
+    @color: darken(desaturate(@c-error, 20%), 1%);
+
+    .container-colors(lighten(@c-error, 51%), @color, desaturate(@color, 25%));
+
+    @{dark-selector} & {
+      @color: lighten(desaturate(@c-error, 20%), 5%);
+
+      .container-colors(darken(@c-error-dark, 22%), @color, desaturate(@color, 20%));
+    }
+  }
+}

.dumi/theme/builtins/Container/index.tsx

@@ -0,0 +1,29 @@
+import { ReactComponent as IconSuccess } from '@ant-design/icons-svg/inline-svg/outlined/check-circle.svg';
+import { ReactComponent as IconError } from '@ant-design/icons-svg/inline-svg/outlined/close-circle.svg';
+import { ReactComponent as IconInfo } from '@ant-design/icons-svg/inline-svg/outlined/info-circle.svg';
+import { ReactComponent as IconWarning } from '@ant-design/icons-svg/inline-svg/outlined/warning.svg';
+import React, { useState, type FC, type ReactNode } from 'react';
+import './index.less';
+
+const ICONS = {
+  info: IconInfo,
+  warning: IconWarning,
+  success: IconSuccess,
+  error: IconError,
+};
+
+const Container: FC<{ type: string; title?: string; children: ReactNode }> = (
+  props,
+) => {
+  const [Icon] = useState(() => ICONS[props.type as keyof typeof ICONS]);
+
+  return (
+    <div className="dumi-default-container markdown" data-type={props.type}>
+      <Icon />
+      <h4>{props.title || props.type.toUpperCase()}</h4>
+      <section>{props.children}</section>
+    </div>
+  );
+};
+
+export default Container;