✨ feat: Add new components, modify existing components, and export components

canisminor1990 · canisminor1990 · commit a6addc24a6d2 · 2023-08-15T11:10:11.000+08:00
This commit introduces new components, modifies existing components, and exports components. It also includes changes to the styling algorithm, such as the addition of a new color variable and modifications to code blocks and lists. Additionally, it updates the demo and API documentation for each file.
diff --git a/src/ChatHeader/ChatHeaderTitle.tsx b/src/ChatHeader/ChatHeaderTitle.tsx
@@ -0,0 +1,76 @@
+import { createStyles } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    position: relative;
+    overflow: hidden;
+    flex: 1;
+    max-width: 100%;
+  `,
+  desc: css`
+    overflow: hidden;
+
+    width: 100%;
+
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+  tag: css`
+    flex: none;
+  `,
+  title: css`
+    overflow: hidden;
+
+    font-size: 16px;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+  titleContainer: css`
+    flex: 1;
+  `,
+  titleWithDesc: css`
+    overflow: hidden;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+}));
+
+export interface ChatHeaderTitleProps {
+  desc?: string | ReactNode;
+  tag?: ReactNode;
+  title: string | ReactNode;
+}
+
+const ChatHeaderTitle = memo<ChatHeaderTitleProps>(({ title, desc, tag }) => {
+  const { styles } = useStyles();
+  if (desc)
+    return (
+      <Flexbox className={styles.container}>
+        <Flexbox align={'center'} className={styles.titleContainer} gap={8} horizontal>
+          <div className={styles.titleWithDesc}>{title}</div>
+          <Flexbox className={styles.tag} horizontal>
+            {tag}
+          </Flexbox>
+        </Flexbox>
+        <Flexbox align={'center'} horizontal>
+          <div className={styles.desc}>{desc}</div>
+        </Flexbox>
+      </Flexbox>
+    );
+  return (
+    <Flexbox align={'center'} className={styles.container} gap={8} horizontal>
+      <div className={styles.title}>{title}</div>
+      <Flexbox className={styles.tag} horizontal>
+        {tag}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ChatHeaderTitle;
diff --git a/src/Form/components/FormTitle.tsx b/src/Form/components/FormTitle.tsx
@@ -1,7 +1,7 @@
-import { Tag } from 'antd';
 import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import Tag from '@/Tag';
 import { DivProps } from '@/types';
 
 import { useStyles } from './style';
diff --git a/src/Icon/icons/DiscordIcon.tsx b/src/Icon/icons/DiscordIcon.tsx
@@ -0,0 +1,15 @@
+import { type LucideIcon, createLucideIcon } from 'lucide-react';
+
+const Discord: LucideIcon = createLucideIcon('Discord', [
+  [
+    'path',
+    {
+      d: 'M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z',
+      key: '18tl5t',
+    },
+  ],
+]);
+
+const DiscordIcon = (props: LucideIcon) => <Discord style={{ overflow: 'visible' }} {...props} />;
+
+export default DiscordIcon as LucideIcon;
diff --git a/src/Icon/icons/index.ts b/src/Icon/icons/index.ts
@@ -0,0 +1 @@
+export { default as DiscordIcon } from './DiscordIcon';
diff --git a/src/Markdown/index.tsx b/src/Markdown/index.tsx
@@ -25,7 +25,7 @@ const Markdown = memo<MarkdownProps>(({ children, className, style, ...props })
     a: Typography.Link,
     code: Code,
     details: Collapse,
-    hr: Divider,
+    hr: () => <Divider style={{ marginBottom: '1em', marginTop: 0 }} />,
     pre: CodeBlock,
   };
 
diff --git a/src/SliderWithInput/demos/index.tsx b/src/SliderWithInput/demos/index.tsx
@@ -0,0 +1,5 @@
+import { SliderWithInput } from '@lobehub/ui';
+
+export default () => {
+  return <SliderWithInput />;
+};
diff --git a/src/SliderWithInput/index.md b/src/SliderWithInput/index.md
@@ -0,0 +1,13 @@
+---
+nav: Components
+group: Data Entry
+title: SliderWithInput
+---
+
+## Default
+
+<code src="./demos/index.tsx" center></code>
+
+## APIs
+
+<API></API>
diff --git a/src/SliderWithInput/index.tsx b/src/SliderWithInput/index.tsx
@@ -0,0 +1,69 @@
+import { InputNumber, type InputNumberProps, Slider } from 'antd';
+import { SliderSingleProps } from 'antd/es/slider';
+import { isNull } from 'lodash-es';
+import { memo, useCallback } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+export interface SliderWithInputProps extends SliderSingleProps {
+  controls?: InputNumberProps['controls'];
+  size?: InputNumberProps['size'];
+}
+
+const SliderWithInput = memo<SliderWithInputProps>(
+  ({
+    step,
+    value,
+    onChange,
+    max,
+    min,
+    defaultValue,
+    size,
+    controls,
+    style,
+    className,
+    disabled,
+    ...props
+  }) => {
+    const handleOnchange = useCallback((value: number | null) => {
+      if (Number.isNaN(value) || isNull(value)) return;
+      onChange?.(value);
+    }, []);
+
+    return (
+      <Flexbox
+        align={'center'}
+        className={className}
+        direction={'horizontal'}
+        gap={8}
+        style={style}
+      >
+        <Slider
+          defaultValue={defaultValue}
+          disabled={disabled}
+          max={max}
+          min={min}
+          onChange={handleOnchange}
+          step={step}
+          style={size === 'small' ? { flex: 1, margin: 0 } : { flex: 1 }}
+          tooltip={{ open: false }}
+          value={typeof value === 'number' ? value : 0}
+          {...props}
+        />
+        <InputNumber
+          controls={size !== 'small' || controls}
+          defaultValue={defaultValue}
+          disabled={disabled}
+          max={max}
+          min={min}
+          onChange={handleOnchange}
+          size={size}
+          step={Number.isNaN(step) || isNull(step) ? undefined : step}
+          style={{ flex: 1, maxWidth: size === 'small' ? 40 : 64 }}
+          value={typeof value === 'number' ? value : 0}
+        />
+      </Flexbox>
+    );
+  },
+);
+
+export default SliderWithInput;
diff --git a/src/Tag/demos/index.tsx b/src/Tag/demos/index.tsx
@@ -0,0 +1,5 @@
+import { DiscordIcon, Icon, Tag } from '@lobehub/ui';
+
+export default () => {
+  return <Tag icon={<Icon icon={DiscordIcon} />}>discord</Tag>;
+};
diff --git a/src/Tag/index.md b/src/Tag/index.md
@@ -0,0 +1,13 @@
+---
+nav: Components
+group: Data Display
+title: Tag
+---
+
+## Default
+
+<code src="./demos/index.tsx" center></code>
+
+## APIs
+
+<API></API>
diff --git a/src/Tag/index.tsx b/src/Tag/index.tsx
@@ -0,0 +1,49 @@
+import { Tag as AntTag, type TagProps as AntTagProps } from 'antd';
+import { createStyles } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ cx, css, token }) => ({
+  count: css`
+    display: flex;
+    align-items: center;
+
+    height: 20px;
+    padding: 0 8px;
+
+    font-size: 12px;
+    line-height: 1;
+
+    background: ${token.colorFillTertiary};
+    border: ${token.borderRadius}px;
+  `,
+  tag: cx(css`
+    color: ${token.colorTextSecondary} !important;
+    background: ${token.colorFillSecondary};
+    border: ${token.borderRadius}px;
+
+    &:hover {
+      color: ${token.colorText};
+      background: ${token.colorFill};
+    }
+  `),
+}));
+
+export interface TagProps extends AntTagProps {
+  icon?: ReactNode;
+}
+
+const Tag = memo<TagProps>(({ icon, children, ...props }) => {
+  const { styles } = useStyles();
+
+  return (
+    <AntTag bordered={false} className={styles.tag} {...props}>
+      <Flexbox align={'center'} gap={4} horizontal>
+        {icon}
+        {children}
+      </Flexbox>
+    </AntTag>
+  );
+});
+
+export default Tag;
diff --git a/src/index.ts b/src/index.ts
@@ -3,6 +3,10 @@ export { default as ActionIconGroup, type ActionIconGroupProps } from './ActionI
 export { default as Avatar, type AvatarProps } from './Avatar';
 export { default as Burger, type BurgerProps } from './Burger';
 export { default as ChatHeader, type ChatHeaderProps } from './ChatHeader';
+export {
+  default as ChatHeaderTitle,
+  type ChatHeaderTitleProps,
+} from './ChatHeader/ChatHeaderTitle';
 export { default as ChatInputArea, type ChatInputAreaProps } from './ChatInputArea';
 export { default as ChatItem, type ChatItemProps } from './ChatItem';
 export type {
@@ -63,6 +67,7 @@ export {
   type SyntaxHighlighterProps,
 } from './Highlighter';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
+export * from './Icon/icons';
 export { Input, type InputProps, TextArea, type TextAreaProps } from './Input';
 export {
   default as Layout,
@@ -88,6 +93,7 @@ export { default as MessageInput, type MessageInputProps } from './MessageInput'
 export { default as MessageModal, type MessageModalProps } from './MessageModal';
 export { default as SearchBar, type SearchBarProps } from './SearchBar';
 export { default as SideNav, type SideNavProps } from './SideNav';
+export { default as SliderWithInput, type SliderWithInputProps } from './SliderWithInput';
 export { default as Snippet, type SnippetProps } from './Snippet';
 export { default as Spotlight, type SpotlightProps } from './Spotlight';
 export {
@@ -99,6 +105,7 @@ export {
 export * from './styles';
 export { default as Swatches, type SwatchesProps } from './Swatches';
 export { default as TabsNav, type TabsNavProps } from './TabsNav';
+export { default as Tag, type TagProps } from './Tag';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as ThemeSwitch, type ThemeSwitchProps } from './ThemeSwitch';
 export { default as Toc, type TocProps } from './Toc';
diff --git a/src/styles/algorithms/generateCustomStylish.ts b/src/styles/algorithms/generateCustomStylish.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as DiscordIcon } from './DiscordIcon';`