✨ feat: Publish @lobehub/ui/color

lobehub · Jan 7, 2025 · 48fb8dc · 48fb8dc
1 parent 7e80b41
commit 48fb8dc
Show file tree

Hide file tree

Showing 60 changed files with 1,811 additions and 1,700 deletions.
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -17,7 +17,7 @@ const nav: INavItem[] = [
   { link: '/components/mdx/callout', title: 'Mdx' },
   { link: 'https://icons.lobehub.com', mode: 'override', title: 'Icons' },
   { link: 'https://charts.lobehub.com', mode: 'override', title: 'Charts' },
-  { link: '/colors', title: 'Colors' },
+  { link: '/components/color/color-scales', title: 'Colors' },
   { link: '/changelog', title: 'Changelog' },
 ];
 
@@ -79,6 +79,7 @@ export default defineConfig({
     '@lobehub/ui/awesome': resolve(__dirname, './src/awesome'),
     '@lobehub/ui/brand': resolve(__dirname, './src/brand'),
     '@lobehub/ui/chat': resolve(__dirname, './src/chat'),
+    '@lobehub/ui/color': resolve(__dirname, './src/color'),
     '@lobehub/ui/mdx': resolve(__dirname, './src/mdx'),
     '@lobehub/ui/mobile': resolve(__dirname, './src/mobile'),
     '@lobehub/ui/storybook': resolve(__dirname, './src/storybook'),
@@ -105,6 +106,7 @@ export default defineConfig({
       { dir: 'src/brand', subType: 'brand', type: 'component' },
       { dir: 'src/mdx', subType: 'mdx', type: 'component' },
       { dir: 'src/storybook', subType: 'storybook', type: 'component' },
+      { dir: 'src/color', subType: 'color', type: 'component' },
     ],
     entryFile: isProduction ? './src/index.ts' : undefined,
   },

diff --git a/color.d.ts b/color.d.ts
@@ -0,0 +1 @@
+export * from './es/color';
diff --git a/color.js b/color.js
@@ -0,0 +1 @@
+export * from './es/color';
diff --git a/docs/colors/index.md b/docs/colors/index.md
diff --git a/src/Avatar/index.tsx b/src/Avatar/index.tsx
@@ -76,25 +76,28 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
       ...rest,
     };
 
-    return isDefaultAntAvatar ? (
-      <AntAvatar
-        ref={ref}
-        src={
-          typeof avatar === 'string' ? (
-            <Img
-              alt={avatarProps.alt || title}
-              height={size}
-              loading={'lazy'}
-              src={avatar}
-              width={size}
-            />
-          ) : (
-            avatar
-          )
-        }
-        {...avatarProps}
-      />
-    ) : (
+    if (isDefaultAntAvatar)
+      return (
+        <AntAvatar
+          ref={ref}
+          src={
+            typeof avatar === 'string' ? (
+              <Img
+                alt={avatarProps.alt || title}
+                height={size}
+                loading={'lazy'}
+                src={avatar}
+                width={size}
+              />
+            ) : (
+              avatar
+            )
+          }
+          {...avatarProps}
+        />
+      );
+
+    return (
       <AntAvatar ref={ref} {...avatarProps}>
         {emoji ? (
           <FluentEmoji

diff --git a/src/ColorScales/index.md b/src/ColorScales/index.md
diff --git a/src/Highlighter/FullFeatured.tsx b/src/Highlighter/FullFeatured.tsx
@@ -1,13 +1,12 @@
 import { Select, type SelectProps } from 'antd';
 import { ChevronDown, ChevronRight } from 'lucide-react';
-import { memo, useState } from 'react';
+import { ReactNode, memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import ActionIcon from '@/ActionIcon';
 import CopyButton from '@/CopyButton';
 import { languageMap } from '@/hooks/useHighlight';
 
-import SyntaxHighlighter from './SyntaxHighlighter';
 import { useStyles } from './style';
 import { HighlighterProps } from './type';
 
@@ -16,17 +15,22 @@ const options: SelectProps['options'] = languageMap.map((item) => ({
   value: item.toLowerCase(),
 }));
 
-export const HighlighterFullFeatured = memo<HighlighterProps>(
+interface HighlighterFullFeaturedProps extends Omit<HighlighterProps, 'children'> {
+  children: ReactNode;
+  content: string;
+}
+
+export const HighlighterFullFeatured = memo<HighlighterFullFeaturedProps>(
   ({
     children,
+    content,
     language,
     showLanguage,
     className,
     style,
     allowChangeLanguage = true,
     fileName,
     icon,
-    bodyRender,
     actionsRender,
     copyable,
     type,
@@ -40,30 +44,18 @@ export const HighlighterFullFeatured = memo<HighlighterProps>(
     const size = { blockSize: 24, fontSize: 14, strokeWidth: 2 };
 
     const origianlActions = copyable && (
-      <CopyButton content={children} placement="left" size={size} />
+      <CopyButton content={content} placement="left" size={size} />
     );
 
     const actions = actionsRender
       ? actionsRender({
           actionIconSize: size,
-          content: children,
+          content,
           language,
           originalNode: origianlActions,
         })
       : origianlActions;
 
-    const originalBody = (
-      <SyntaxHighlighter
-        language={lang?.toLowerCase()}
-        style={expand ? {} : { height: 0, overflow: 'hidden' }}
-      >
-        {children}
-      </SyntaxHighlighter>
-    );
-    const body = bodyRender
-      ? bodyRender({ content: children, language, originalNode: originalBody })
-      : originalBody;
-
     return (
       <div
         className={cx(styles.container, className)}
@@ -105,12 +97,10 @@ export const HighlighterFullFeatured = memo<HighlighterProps>(
             {actions}
           </Flexbox>
         </Flexbox>
-        {body}
+        {children}
       </div>
     );
   },
 );
 
 export default HighlighterFullFeatured;
-
-export { default as SyntaxHighlighter, type SyntaxHighlighterProps } from './SyntaxHighlighter';