✨ feat: Add Adobe / Firefly / FishAudio / Ai21 (#18)

Author: canisminor1990

README.md

@@ -77,15 +77,15 @@
   "devDependencies": {
     "@commitlint/cli": "^18.6.1",
     "@lobehub/lint": "latest",
-    "@lobehub/ui": "^1.138.0",
-    "@testing-library/react": "^14.3.0",
+    "@lobehub/ui": "^1.138.5",
+    "@testing-library/react": "^14.3.1",
     "@types/lodash-es": "^4.17.12",
     "@types/pangu": "^4.0.2",
     "@types/query-string": "^6.3.0",
-    "@types/react": "^18.2.75",
-    "@types/react-dom": "^18.2.24",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "@vitest/coverage-v8": "latest",
-    "antd": "^5.16.1",
+    "antd": "^5.16.2",
     "antd-style": "^3.6.2",
     "babel-plugin-antd-style": "latest",
     "commitlint": "^18.6.1",
@@ -95,13 +95,14 @@
     "dumi-theme-lobehub": "latest",
     "eslint": "^8.57.0",
     "father": "^4.4.0",
-    "front-matter": "^4.0.2",
     "glob": "^10.3.12",
+    "gray-matter": "^4.0.3",
     "husky": "^8.0.3",
     "jsdom": "^23.2.0",
     "lint-staged": "^15.2.2",
     "lodash-es": "^4.17.21",
     "lucide-react": "latest",
+    "markdown-table": "^3.0.3",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -111,7 +112,7 @@
     "stylelint": "^15.11.0",
     "svgo-browser": "^1.3.8",
     "tsx": "^4.7.2",
-    "typescript": "^5.4.4",
+    "typescript": "^5.4.5",
     "vitest": "latest"
   },
   "peerDependencies": {

package.json

@@ -1,6 +1,7 @@
-import fm from 'front-matter';
 import { globSync } from 'glob';
+import matter from 'gray-matter';
 import { kebabCase } from 'lodash-es';
+import { markdownTable } from 'markdown-table';
 import { readFileSync, writeFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 
@@ -13,30 +14,47 @@ const updateReadme = (split: string, md: string, content: string): string => {
   mds[1] = [' ', content, ' '].join('\n\n');
   return mds.join(split);
 };
+
+const genMd = (
+  data: {
+    group: string;
+    path: string;
+    title: string;
+  }[],
+  filter: 'model' | 'provider' | 'application',
+): string =>
+  data
+    .sort((a, b) => a.title.localeCompare(b.title))
+    .filter((meta) => meta.group === filter)
+    .map((meta) => `✅ [${meta.title}](${BASE_URL}${kebabCase(meta.path)})`)
+    .join('<br/>');
+
 const run = () => {
   const mds = globSync(resolve(ROOT_PATH, './src/**/index.md').replace('\\', '/'));
-  const metas = mds
+  const metas: any = mds
     .map((md) => {
-      const meta: any = fm(readFileSync(md, 'utf8')).attributes;
+      const { data } = matter(readFileSync(md, 'utf8'));
       const paths = md.split('/');
-      if (!['model', 'provider', 'application'].includes(String(meta.group).toLowerCase()))
-        return false;
+      const group = String(data.group).toLowerCase();
+      if (!['model', 'provider', 'application'].includes(group)) return false;
       return {
-        ...meta,
+        ...data,
+        group,
         path: paths.at(-2),
       };
     })
     .filter(Boolean);
 
-  const contents = metas
-    .sort((a, b) => a.title.localeCompare(b.title))
-    .map((meta) => `- [x] [${meta.title}](${BASE_URL}${kebabCase(meta.path)})`);
+  const contents = markdownTable([
+    ['Model', 'Provider', 'Application'],
+    [genMd(metas, 'model'), genMd(metas, 'provider'), genMd(metas, 'application')],
+  ]);
 
   const readmePath = resolve(ROOT_PATH, 'README.md');
 
   const readme = readFileSync(readmePath, 'utf8');
 
-  const newReadme = updateReadme('<!-- ICON LIST -->', readme, contents.join('\n'));
+  const newReadme = updateReadme('<!-- ICON LIST -->', readme, contents);
 
   writeFileSync(readmePath, newReadme, 'utf8');
 

scripts/genMdList.ts

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+
+import IconAvatar, { type IconAvatarProps } from '@/IconAvatar';
+
+import { COLOR_PRIMARY, TITLE } from '../style';
+import Mono from './Mono';
+
+export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
+
+const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+  return (
+    <IconAvatar
+      Icon={Mono}
+      aria-label={TITLE}
+      background={background || COLOR_PRIMARY}
+      color={'#fff'}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;

src/Adobe/components/Avatar.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
+    <svg
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <g fill="#EB1000" fillRule="nonzero">
+        <path d="M14.86 3H23v19zM9.14 3H1v19zM11.992 9.998L17.182 22h-3.394l-1.549-3.813h-3.79z"></path>
+      </g>
+    </svg>
+  );
+});
+
+export default Icon;

src/Adobe/components/Color.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react';
+
+import IconCombine, { type IconCombineProps } from '@/IconCombine';
+
+import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import Color from './Color';
+import Mono from './Mono';
+import Text from './Text';
+
+export interface CombineProps extends Omit<IconCombineProps, 'Icon' | 'Text'> {
+  type?: 'color' | 'mono';
+}
+const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
+  const Icon = type === 'color' ? Color : Mono;
+
+  return (
+    <IconCombine
+      Icon={Icon}
+      Text={Text}
+      aria-label={TITLE}
+      spaceMultiple={SPACE_MULTIPLE}
+      textMultiple={TEXT_MULTIPLE}
+      {...rest}
+    />
+  );
+});
+
+export default Combine;

src/Adobe/components/Combine.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <g>
+        <path d="M14.86 3H23v19zM9.14 3H1v19zM11.992 9.998L17.182 22h-3.394l-1.549-3.813h-3.79z"></path>
+      </g>
+    </svg>
+  );
+});
+
+export default Icon;

src/Adobe/components/Mono.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, width: 'fit-content', ...style }}
+      viewBox="0 0 78 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M13.541 17.383H7.113l-1.336 4.116c-.055.166-.166.222-.333.222H2.216c-.196 0-.251-.083-.196-.278l5.568-16.05c.11-.278.222-.612.25-1.67 0-.138.083-.194.194-.194h4.425c.139 0 .194.028.222.14l6.345 17.802c.057.167.029.25-.167.25H15.24c-.139 0-.222-.056-.305-.167l-1.392-4.173v.002zm-1.057-3.45c-.528-1.836-1.64-5.203-2.197-7.205h-.03c-.444 1.893-1.418 4.951-2.142 7.205h4.37zm6.687 1.028c0-4.005 2.978-7.314 8.071-7.314.222 0 .473 0 .89.027v-5.48c0-.138.083-.194.194-.194h3.535c.111 0 .139.056.139.167v16.438c0 .67.056 1.502.112 2.032 0 .166-.027.222-.167.278A14.056 14.056 0 0126.435 22c-4.119-.002-7.264-2.31-7.264-7.039zm8.961-3.977c-.278-.083-.64-.111-1.029-.111-2.116 0-3.951 1.28-3.951 3.894 0 2.753 1.585 3.95 3.673 3.95.473 0 .918-.056 1.307-.167v-7.566zm19.39 3.754c0 4.368-2.81 7.262-6.845 7.262-4.732 0-6.846-3.561-6.846-7.15 0-3.95 2.615-7.205 6.93-7.205 4.451.002 6.762 3.367 6.762 7.093zm-6.929-3.865c-1.64 0-2.865 1.418-2.865 3.922 0 2.42 1.14 3.977 3.032 3.977 1.615 0 2.839-1.363 2.839-3.922 0-2.197-.919-3.977-3.006-3.977zM52.914 2c.223 0 .278.056.278.25l.028 5.703c.695-.223 1.502-.306 2.338-.306 4.09 0 6.678 2.892 6.678 6.62 0 5.172-4.118 7.731-8.376 7.731-1.447 0-2.95-.166-4.342-.64a.268.268 0 01-.194-.25V2.223c0-.166.083-.222.222-.222h3.368zm5.37 12.628c0-2.531-1.474-3.727-3.45-3.727-.863 0-1.252.139-1.614.25v7.538c.334.055.669.083 1.03.083 2.087 0 4.035-1.28 4.035-4.144zm9.034 1.224c.14 1.585 1.28 2.892 3.978 2.892a9.04 9.04 0 003.424-.64c.111-.055.194-.027.194.112v2.643c0 .222-.055.278-.194.36-1.114.502-2.338.78-4.286.78-5.204 0-7.04-3.588-7.04-7.01 0-3.866 2.338-7.344 6.707-7.344 4.229 0 5.899 3.228 5.899 6.01 0 .834-.056 1.557-.139 1.835-.028.139-.083.194-.223.223-.39.084-1.447.14-2.866.14h-5.454zm3.617-2.725c.89 0 1.308-.03 1.391-.057.028-.028.028-.139.028-.167 0-.695-.555-2.226-2.393-2.226-1.753 0-2.477 1.309-2.644 2.448l3.618.002z"></path>
+    </svg>
+  );
+});
+
+export default Icon;

src/Adobe/components/Text.tsx

@@ -0,0 +1,72 @@
+---
+nav: Components
+group: Application
+title: Adobe
+atomId: Adobe
+description: https://adobe.com
+---
+
+## Icons
+
+```tsx
+import { Adobe } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Adobe size={64} />
+    <Adobe.Color size={64} />
+  </Flexbox>
+);
+```
+
+## Text
+
+```tsx
+import { Adobe } from '@lobehub/icons';
+
+export default () => <Adobe.Text size={48} />;
+```
+
+## Combine
+
+```tsx
+import { Adobe } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16}>
+    <Adobe.Combine size={64} />
+    <Adobe.Combine size={64} type={'color'} />
+  </Flexbox>
+);
+```
+
+## Avatars
+
+```tsx
+import { Adobe } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Adobe.Avatar size={64} />
+    <Adobe.Avatar size={64} shape={'square'} />
+  </Flexbox>
+);
+```
+
+## Colors
+
+```tsx
+import { Adobe } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+import ColorPreview from '../components/ColorPreview';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <ColorPreview color={Adobe.colorPrimary} />
+  </Flexbox>
+);
+```

src/Adobe/index.md

@@ -0,0 +1,24 @@
+import Avatar from './components/Avatar';
+import Color from './components/Color';
+import Combine from './components/Combine';
+import Mono from './components/Mono';
+import Text from './components/Text';
+import { COLOR_PRIMARY, TITLE } from './style';
+
+export type CompoundedIcon = typeof Mono & {
+  Avatar: typeof Avatar;
+  Color: typeof Color;
+  Combine: typeof Combine;
+  Text: typeof Text;
+  colorPrimary: string;
+  title: string;
+};
+
+const Icons = Mono as CompoundedIcon;
+Icons.Color = Color;
+Icons.Text = Text;
+Icons.Combine = Combine;
+Icons.Avatar = Avatar;
+Icons.colorPrimary = COLOR_PRIMARY;
+Icons.title = TITLE;
+export default Icons;