@hubstr/kit 0.1.5 → 0.1.6

package/ui/src/Empty/Empty.tsx

@@ -1,110 +0,0 @@
-'use client';
-
-import { Empty as AntEmpty } from 'antd';
-import { cssVar, useThemeMode } from 'antd-style';
-import { type FC } from 'react';
-
-import Block from '../Block';
-import { Flexbox } from '../Flex';
-import FluentEmoji from '../FluentEmoji';
-import Icon from '../Icon';
-import Text from '../Text';
-
-import type { EmptyProps } from './type';
-
-const Empty: FC<EmptyProps> = ({
-  title,
-  description,
-  icon,
-  image,
-  emoji,
-  imageSize = 48,
-  iconColor,
-  action,
-  children,
-  imageProps,
-  align,
-  actionProps,
-  type = 'default',
-  titleProps,
-  descriptionProps,
-  ...rest
-}) => {
-  const { isDarkMode } = useThemeMode();
-  const isPage = type === 'page';
-  const alignValue = align || (isPage ? 'flex-start' : 'center');
-  const isCenter = alignValue === 'center';
-
-  const fallbackImage = AntEmpty.PRESENTED_IMAGE_SIMPLE;
-  const hasImage = image || emoji || icon;
-  const cover = hasImage ? (
-    image ? (
-      image
-    ) : (
-      <Block
-        align={'center'}
-        flex={'none'}
-        height={imageSize}
-        justify="center"
-        variant={'outlined'}
-        width={imageSize}
-        {...imageProps}
-        style={{
-          marginBottom: 4,
-          ...imageProps?.style,
-        }}
-      >
-        {icon && (
-          <Icon
-            icon={icon}
-            size={imageSize * 0.66}
-            color={
-              iconColor || (isDarkMode ? cssVar.colorTextQuaternary : cssVar.colorTextSecondary)
-            }
-          />
-        )}
-        {emoji && <FluentEmoji emoji={emoji} size={imageSize * 0.75} type={'anim'} />}
-      </Block>
-    )
-  ) : (
-    fallbackImage
-  );
-
-  return (
-    <Flexbox align={alignValue} gap={8} padding={16} {...rest}>
-      {cover}
-      <Flexbox align={alignValue} gap={isPage ? 4 : 1}>
-        {title && (
-          <Text
-            align={isCenter ? 'center' : undefined}
-            fontSize={isPage ? 24 : 16}
-            weight={'bold'}
-            {...titleProps}
-          >
-            {title}
-          </Text>
-        )}
-        {description && (
-          <Text
-            align={isCenter ? 'center' : undefined}
-            color={isPage ? cssVar.colorTextSecondary : cssVar.colorTextDescription}
-            fontSize={isPage ? 16 : 14}
-            {...descriptionProps}
-          >
-            {description}
-          </Text>
-        )}
-      </Flexbox>
-      {children}
-      {action && (
-        <Flexbox gap={4} {...actionProps}>
-          {action}
-        </Flexbox>
-      )}
-    </Flexbox>
-  );
-};
-
-Empty.displayName = 'Empty';
-
-export default Empty;

package/ui/src/Empty/demos/WithAction.tsx

@@ -1,9 +0,0 @@
-import { Button, Empty } from '@hubstr/kit/ui';
-
-export default () => (
-  <Empty
-    action={<Button type="primary">Create Item</Button>}
-    description="Create your first item to get started"
-    title="No Items"
-  />
-);

package/ui/src/Empty/demos/WithEmoji.tsx

@@ -1,3 +0,0 @@
-import { Empty } from '@hubstr/kit/ui';
-
-export default () => <Empty description="You have no messages yet" emoji="📭" />;

package/ui/src/Empty/demos/WithIcon.tsx

@@ -1,6 +0,0 @@
-import { Empty } from '@hubstr/kit/ui';
-import { Inbox } from 'lucide-react';
-
-export default () => (
-  <Empty description="There is no data to display" icon={Inbox} title="No Data" />
-);

package/ui/src/Empty/demos/index.tsx

@@ -1,57 +0,0 @@
-import { Button, Empty, type EmptyProps } from '@hubstr/kit/ui';
-import { StoryBook, useControls, useCreateStore } from '@hubstr/kit/ui/storybook';
-import { Inbox, Package } from 'lucide-react';
-
-export default () => {
-  const store = useCreateStore();
-  const control = useControls(
-    {
-      description: 'There is no data to display',
-      emoji: '📭',
-      icon: {
-        options: [Inbox, Package],
-        value: Inbox,
-      },
-      iconType: {
-        options: ['none', 'icon', 'emoji'],
-        value: 'icon',
-      },
-      imageSize: {
-        max: 128,
-        min: 24,
-        step: 4,
-        value: 48,
-      },
-      showAction: false,
-      title: 'Oh no! Nothing here',
-      type: {
-        options: ['default', 'page'],
-        value: 'default',
-      },
-    },
-    { store },
-  );
-
-  const emptyProps: EmptyProps = {
-    description: control.description,
-    imageSize: control.imageSize,
-    title: control.title,
-    type: control.type,
-  } as EmptyProps;
-
-  if (control.iconType === 'icon') {
-    emptyProps.icon = control.icon;
-  } else if (control.iconType === 'emoji') {
-    emptyProps.emoji = control.emoji;
-  }
-
-  if (control.showAction) {
-    emptyProps.action = <Button type="primary">Create Item</Button>;
-  }
-
-  return (
-    <StoryBook levaStore={store}>
-      <Empty {...emptyProps} />
-    </StoryBook>
-  );
-};

package/ui/src/Empty/index.md

@@ -1,42 +0,0 @@
----
-nav: Components
-group: Data Display
-title: Empty
-description: Empty component displays an empty state with customizable icon, emoji, image, title, description, and action buttons. It's commonly used to indicate that there's no data or content to display.
----
-
-## Default
-
-<code src="./demos/index.tsx" nopadding></code>
-
-## With Icon
-
-<code src="./demos/WithIcon.tsx" nopadding></code>
-
-## With Emoji
-
-<code src="./demos/WithEmoji.tsx" nopadding></code>
-
-## With Action Button
-
-<code src="./demos/WithAction.tsx" nopadding></code>
-
-## APIs
-
-### Empty
-
-| Property         | Description                              | Type                           | Default |
-| ---------------- | ---------------------------------------- | ------------------------------ | ------- |
-| action           | Action button or element to display      | `ReactNode`                    | -       |
-| children         | Additional content to display            | `ReactNode`                    | -       |
-| description      | Description text below the title         | `ReactNode`                    | -       |
-| descriptionProps | Props for the description Text component | `Omit<TextProps, 'children'>`  | -       |
-| emoji            | Emoji to display in the image area       | `string`                       | -       |
-| icon             | Icon to display in the image area        | `IconProps['icon']`            | -       |
-| image            | Custom image or element to display       | `ReactNode`                    | -       |
-| imageProps       | Props for the image Block component      | `Omit<BlockProps, 'children'>` | -       |
-| imageSize        | Size of the image/icon/emoji area        | `number`                       | `48`    |
-| title            | Title text to display                    | `ReactNode`                    | -       |
-| titleProps       | Props for the title Text component       | `Omit<TextProps, 'children'>`  | -       |
-
-> Empty component inherits all properties from [Flexbox](https://github.com/ant-design/react-layout-kit)

package/ui/src/Empty/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Empty';
-export type * from './type';

package/ui/src/Empty/type.ts

@@ -1,22 +0,0 @@
-import type { ReactNode } from 'react';
-
-import type { BlockProps } from '../Block';
-import type { FlexboxProps } from '../Flex';
-import type { IconProps } from '../Icon';
-import type { TextProps } from '../Text';
-
-export interface EmptyProps extends Omit<FlexboxProps, 'title'> {
-  action?: ReactNode;
-  actionProps?: Omit<FlexboxProps, 'children'>;
-  description?: ReactNode;
-  descriptionProps?: Omit<TextProps, 'children'>;
-  emoji?: string;
-  icon?: IconProps['icon'];
-  iconColor?: IconProps['color'];
-  image?: ReactNode;
-  imageProps?: Omit<BlockProps, 'children'>;
-  imageSize?: number;
-  title?: ReactNode;
-  titleProps?: Omit<TextProps, 'children'>;
-  type?: 'default' | 'page';
-}

package/ui/src/FileTypeIcon/FileTypeIcon.tsx

@@ -1,97 +0,0 @@
-'use client';
-
-import { cssVar, cx, useThemeMode } from 'antd-style';
-import { type FC, useMemo } from 'react';
-
-import { Center } from '../Flex';
-
-import FileIcon from './components/FileIcon';
-import FolderIcon from './components/FolderIcon';
-import { styles } from './style';
-import type { FileTypeIconProps } from './type';
-
-const FileTypeIcon: FC<FileTypeIconProps> = ({
-  icon,
-  color,
-  filetype,
-  type = 'file',
-  size = 48,
-  style,
-  variant,
-  className,
-  ref,
-  ...rest
-}) => {
-  const { isDarkMode } = useThemeMode();
-  const isMono = variant === 'mono';
-
-  const filetypeShort = useMemo(
-    () => (filetype && filetype.length > 4 ? filetype.slice(0, 4) : filetype),
-    [filetype],
-  );
-
-  const fontSize = useMemo(() => {
-    if (filetypeShort && filetypeShort.length > 3) {
-      return 24 / (4 + (filetypeShort.length - 3));
-    }
-    return 6;
-  }, [filetypeShort]);
-
-  const iconColor = useMemo(
-    () =>
-      isMono ? (isDarkMode ? cssVar.colorFill : cssVar.colorBgContainer) : color || cssVar.geekblue,
-    [isMono, isDarkMode, color],
-  );
-
-  const content =
-    type === 'file' ? (
-      <FileIcon
-        filetypeShort={filetypeShort}
-        fontSize={fontSize}
-        hasIcon={!!icon}
-        iconColor={iconColor}
-        isMono={isMono}
-        size={size}
-        {...rest}
-      />
-    ) : (
-      <FolderIcon
-        filetype={filetype}
-        fontSize={fontSize}
-        hasIcon={!!icon}
-        iconColor={iconColor}
-        isMono={isMono}
-        size={size}
-        {...rest}
-      />
-    );
-
-  if (!icon) return content;
-
-  return (
-    <Center
-      className={cx(styles.container, className)}
-      flex={'none'}
-      height={size}
-      ref={ref}
-      style={style}
-      width={size}
-      {...rest}
-    >
-      <div
-        className={styles.inner}
-        style={{
-          fontSize: size / 2.4,
-          top: type === 'file' ? '20%' : '16%',
-        }}
-      >
-        {icon}
-      </div>
-      {content}
-    </Center>
-  );
-};
-
-FileTypeIcon.displayName = 'FileTypeIcon';
-
-export default FileTypeIcon;

package/ui/src/FileTypeIcon/components/FileIcon.tsx

@@ -1,66 +0,0 @@
-import { cssVar, cx } from 'antd-style';
-import { type FC } from 'react';
-
-import type { SvgProps } from '../../types';
-
-import { styles } from '../style';
-
-interface FileIconProps extends SvgProps {
-  filetypeShort?: string;
-  fontSize?: number;
-  hasIcon?: boolean;
-  iconColor?: string;
-  isMono?: boolean;
-  size?: number;
-}
-
-const FileIcon: FC<FileIconProps> = ({
-  size,
-  isMono,
-  hasIcon,
-  iconColor,
-  filetypeShort,
-  className,
-  fontSize,
-  style,
-  ...rest
-}) => {
-  return (
-    <svg
-      className={cx(styles.icon, !hasIcon && className)}
-      height={size}
-      style={hasIcon ? undefined : style}
-      viewBox="0 0 24 24"
-      width={size}
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <path d="M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z" fill={iconColor} />
-      <path
-        d="M14 2l6 6h-4a2 2 0 01-2-2V2z"
-        fill={isMono ? cssVar.colorFill : '#fff'}
-        fillOpacity=".5"
-      />
-      {filetypeShort && (
-        <text
-          fill={isMono ? cssVar.colorTextSecondary : '#fff'}
-          fontSize={fontSize}
-          fontWeight="bold"
-          textAnchor="middle"
-          x="50%"
-          y="70%"
-        >
-          {filetypeShort.toUpperCase()}
-        </text>
-      )}
-      <path
-        d="M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z"
-        fill={'transparent'}
-        stroke={cssVar.colorFillSecondary}
-        strokeWidth={0.5}
-      />
-    </svg>
-  );
-};
-
-export default FileIcon;

package/ui/src/FileTypeIcon/components/FolderIcon.tsx

@@ -1,60 +0,0 @@
-import { cssVar, cx } from 'antd-style';
-import { type FC } from 'react';
-
-import type { SvgProps } from '../../types';
-
-import { styles } from '../style';
-
-interface FolderIconProps extends SvgProps {
-  filetype?: string;
-  fontSize?: number;
-  hasIcon?: boolean;
-  iconColor?: string;
-  isMono?: boolean;
-  size?: number;
-}
-
-const FolderIcon: FC<FolderIconProps> = ({
-  size,
-  isMono,
-  hasIcon,
-  iconColor,
-  filetype,
-  className,
-  fontSize,
-  style,
-  ...rest
-}) => {
-  return (
-    <svg
-      className={cx(styles.icon, !hasIcon && className)}
-      height={size}
-      style={hasIcon ? undefined : style}
-      viewBox="0 0 24 24"
-      width={size}
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <path
-        d="M10.46 5.076l-.92-.752A1.446 1.446 0 008.626 4H3.429c-.38 0-.743.147-1.01.41A1.386 1.386 0 002 5.4v13.2c0 .371.15.727.418.99.268.262.632.41 1.01.41h17.143c.38 0 .743-.148 1.01-.41.268-.263.419-.619.419-.99V6.8c0-.371-.15-.727-.418-.99a1.444 1.444 0 00-1.01-.41h-9.198c-.334 0-.657-.115-.914-.324z"
-        fill={iconColor}
-        stroke={cssVar.colorFillSecondary}
-        strokeWidth={0.5}
-      />
-      {!hasIcon && filetype && (
-        <text
-          fill={isMono ? cssVar.colorTextSecondary : '#fff'}
-          fontSize={fontSize}
-          fontWeight="bold"
-          textAnchor="middle"
-          x="50%"
-          y="70%"
-        >
-          {filetype.toUpperCase()}
-        </text>
-      )}
-    </svg>
-  );
-};
-
-export default FolderIcon;

package/ui/src/FileTypeIcon/demos/Icon.tsx

@@ -1,83 +0,0 @@
-import { FileTypeIcon, Icon } from '@hubstr/kit/ui';
-import { createStaticStyles, cssVar } from 'antd-style';
-import { ArrowUpIcon, PlusIcon } from 'lucide-react';
-
-import { Center, Flexbox } from '../../Flex';
-
-const styles = createStaticStyles(({ css, cssVar }) => {
-  return {
-    card: css`
-      position: relative;
-
-      overflow: hidden;
-
-      width: 150px;
-      height: 100px;
-      border-radius: ${cssVar.borderRadiusLG};
-
-      font-weight: 500;
-      text-align: center;
-
-      background: ${cssVar.colorFillTertiary};
-      box-shadow: 0 0 0 1px ${cssVar.colorFillTertiary} inset;
-    `,
-    glow: css`
-      position: absolute;
-      inset-block-end: -12px;
-      inset-inline-end: 0;
-
-      width: 48px;
-      height: 48px;
-
-      opacity: 0.5;
-      filter: blur(24px);
-    `,
-    icon: css`
-      position: absolute;
-      z-index: 1;
-      inset-block-end: -12px;
-      inset-inline-end: 16px;
-
-      flex: none;
-    `,
-  };
-});
-
-export default () => {
-  return (
-    <Center horizontal gap={8}>
-      <Flexbox className={styles.card} padding={16}>
-        <span>New Folder</span>
-        <div className={styles.glow} style={{ background: cssVar.geekblue }} />
-        <FileTypeIcon
-          className={styles.icon}
-          color={cssVar.geekblue}
-          icon={<Icon color={'#fff'} icon={PlusIcon} />}
-          size={56}
-          type={'folder'}
-        />
-      </Flexbox>
-      <Flexbox className={styles.card} padding={16}>
-        <span>Upload File</span>
-        <div className={styles.glow} style={{ background: cssVar.gold }} />
-        <FileTypeIcon
-          className={styles.icon}
-          color={cssVar.gold}
-          icon={<Icon color={'#fff'} icon={ArrowUpIcon} />}
-          size={56}
-        />
-      </Flexbox>
-      <Flexbox className={styles.card} padding={16}>
-        <span>Upload Folder</span>
-        <div className={styles.glow} style={{ background: cssVar.purple }} />
-        <FileTypeIcon
-          className={styles.icon}
-          color={cssVar.purple}
-          icon={<Icon color={'#fff'} icon={ArrowUpIcon} />}
-          size={56}
-          type={'folder'}
-        />
-      </Flexbox>
-    </Center>
-  );
-};

package/ui/src/FileTypeIcon/demos/index.tsx

@@ -1,31 +0,0 @@
-import { FileTypeIcon, type FileTypeIconProps } from '@hubstr/kit/ui';
-import { StoryBook, useControls, useCreateStore } from '@hubstr/kit/ui/storybook';
-
-export default () => {
-  const store = useCreateStore();
-  const control = useControls(
-    {
-      color: '#F54838',
-      filetype: 'pdf',
-      size: {
-        step: 1,
-        value: 48,
-      },
-      type: {
-        options: ['file', 'directory'],
-        value: 'file',
-      },
-      variant: {
-        options: ['color', 'mono'],
-        value: 'color',
-      },
-    },
-    { store },
-  ) as FileTypeIconProps;
-
-  return (
-    <StoryBook levaStore={store}>
-      <FileTypeIcon {...control} />
-    </StoryBook>
-  );
-};

package/ui/src/FileTypeIcon/index.md

@@ -1,25 +0,0 @@
----
-nav: Components
-title: FileTypeIcon
-group: Data Display
-description: FileTypeIcon is a component that displays icons based on file types. It supports different file and folder types, color schemes, custom icons, and sizing options for visual representation of files and folders.
----
-
-## Default
-
-<code src="./demos/index.tsx" nopadding></code>
-
-## Custom Icon
-
-<code src="./demos/Icon.tsx" center></code>
-
-## APIs
-
-| Property | Description                              | Type                 | Default   |
-| -------- | ---------------------------------------- | -------------------- | --------- |
-| filetype | The type of file to display an icon for  | `string`             | -         |
-| type     | Whether to display a file or folder icon | `'file' \| 'folder'` | `'file'`  |
-| variant  | Color variant of the icon                | `'color' \| 'mono'`  | `'color'` |
-| color    | Custom color for the icon                | `string`             | -         |
-| size     | Size of the icon in pixels               | `number`             | `16`      |
-| icon     | Custom icon to display                   | `ReactNode`          | -         |

package/ui/src/FileTypeIcon/index.ts

@@ -1,2 +0,0 @@
-export { default } from './FileTypeIcon';
-export type * from './type';

package/ui/src/FileTypeIcon/style.ts

@@ -1,18 +0,0 @@
-import { createStaticStyles } from 'antd-style';
-
-export const styles = createStaticStyles(({ css }) => {
-  return {
-    container: css`
-      position: relative;
-    `,
-    icon: css`
-      position: relative;
-      flex: none;
-      line-height: 1;
-    `,
-    inner: css`
-      position: absolute;
-      z-index: 1;
-    `,
-  };
-});

package/ui/src/FileTypeIcon/type.ts

@@ -1,15 +0,0 @@
-import type { ReactNode, Ref } from 'react';
-
-import type { DivProps, SvgProps } from '../types';
-
-type IconProps = SvgProps & DivProps;
-
-export interface FileTypeIconProps extends IconProps {
-  color?: string;
-  filetype?: string;
-  icon?: ReactNode;
-  ref?: Ref<HTMLDivElement>;
-  size?: number;
-  type?: 'file' | 'folder';
-  variant?: 'color' | 'mono';
-}

package/ui/src/Flex/Center.tsx

@@ -1,12 +0,0 @@
-import { type FC } from 'react';
-
-import FlexBasic from './FlexBasic';
-import type { CenterProps } from './type';
-
-const Center: FC<CenterProps> = ({ children, ref, ...props }) => (
-  <FlexBasic {...props} align="center" justify="center" ref={ref}>
-    {children}
-  </FlexBasic>
-);
-
-export default Center;