@bbki.ng/ui 0.1.1

package/src/molecules/nav/Nav.types.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { PathObj } from '../breadcrumb';
+
+export interface NavProps {
+  paths: PathObj[];
+  loading?: boolean;
+  mini?: boolean;
+  className?: string;
+  customLogo?: ReactNode;
+}

package/src/molecules/nav/index.ts

@@ -0,0 +1,2 @@
+export { Nav } from './Nav';
+export type { NavProps } from './Nav.types';

package/src/molecules/panel/Panel.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Panel } from './Panel';
+
+const meta: Meta<typeof Panel> = {
+  title: 'Molecules/Panel',
+  component: Panel,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div className="p-4">
+        <h3 className="text-lg font-medium text-content-primary">面板标题</h3>
+        <p className="text-content-secondary mt-2">这是面板内容</p>
+      </div>
+    ),
+  },
+};
+
+export const WithContent: Story = {
+  args: {
+    children: (
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <span className="text-content-primary font-medium">项目</span>
+          <span className="text-content-secondary">12</span>
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-content-primary font-medium">任务</span>
+          <span className="text-content-secondary">48</span>
+        </div>
+      </div>
+    ),
+  },
+};

package/src/molecules/panel/Panel.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { PanelProps } from './Panel.types';
+
+export const Panel = (props: PanelProps) => {
+  const { className = '', children } = props;
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    setShow(true);
+  }, []);
+
+  return (
+    <div
+      className={twMerge(
+        'transition-all ease-in-out duration-500',
+        'p-4 rounded-sm',
+        show ? 'shadow-[var(--shadow-panel)]' : 'shadow-none',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+Panel.displayName = 'Panel';

package/src/molecules/panel/Panel.types.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export interface PanelProps {
+  children: ReactNode;
+  className?: string;
+}

package/src/molecules/panel/index.ts

@@ -0,0 +1,2 @@
+export { Panel } from './Panel';
+export type { PanelProps } from './Panel.types';

package/src/molecules/table/Table.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Table } from './Table';
+
+const meta: Meta<typeof Table> = {
+  title: 'Molecules/Table',
+  component: Table,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleData = [
+  { name: 'Item 1', value: 100, status: 'Active' },
+  { name: 'Item 2', value: 200, status: 'Inactive' },
+  { name: 'Item 3', value: 300, status: 'Active' },
+];
+
+export const Default: Story = {
+  args: {
+    rowCount: sampleData.length,
+    headerRenderer: () => (
+      <>
+        <Table.HCell className="text-left p-2 text-content-primary">Name</Table.HCell>
+        <Table.HCell className="text-left p-2 text-content-primary">Value</Table.HCell>
+        <Table.HCell className="text-left p-2 text-content-primary">Status</Table.HCell>
+      </>
+    ),
+    rowRenderer: (index: number) => (
+      <>
+        <Table.Cell className="p-2 text-content-primary">{sampleData[index].name}</Table.Cell>
+        <Table.Cell className="p-2 text-content-secondary">{sampleData[index].value}</Table.Cell>
+        <Table.Cell className="p-2 text-content-secondary">{sampleData[index].status}</Table.Cell>
+      </>
+    ),
+    className: 'w-full border-collapse',
+  },
+};
+
+export const WithoutHeader: Story = {
+  args: {
+    rowCount: sampleData.length,
+    rowRenderer: (index: number) => (
+      <>
+        <Table.Cell className="p-2 text-content-primary">{sampleData[index].name}</Table.Cell>
+        <Table.Cell className="p-2 text-content-secondary">{sampleData[index].value}</Table.Cell>
+      </>
+    ),
+    className: 'w-full',
+  },
+};

package/src/molecules/table/Table.tsx

@@ -0,0 +1,31 @@
+import { TableProps, TableHCellProps, TableCellProps } from './Table.types';
+
+export const Table = (props: TableProps) => {
+  const { rowCount, rowRenderer, headerRenderer, className } = props;
+  const rows = [];
+
+  for (let i = 0; i < rowCount; i++) {
+    rows.push(<tr key={i}>{rowRenderer(i)}</tr>);
+  }
+
+  return (
+    <table className={className}>
+      {headerRenderer && (
+        <thead>
+          <tr>{headerRenderer()}</tr>
+        </thead>
+      )}
+      <tbody>{rows}</tbody>
+    </table>
+  );
+};
+
+Table.displayName = 'Table';
+
+const HCell = (props: TableHCellProps) => <th {...props}>{props.children}</th>;
+HCell.displayName = 'Table.HCell';
+Table.HCell = HCell;
+
+const Cell = (props: TableCellProps) => <td {...props}>{props.children}</td>;
+Cell.displayName = 'Table.Cell';
+Table.Cell = Cell;

package/src/molecules/table/Table.types.ts

@@ -0,0 +1,20 @@
+import { CSSProperties, ReactNode } from 'react';
+
+export interface TableProps {
+  rowCount: number;
+  rowRenderer: (index: number) => ReactNode;
+  headerRenderer?: () => ReactNode;
+  className?: string;
+}
+
+export interface TableHCellProps {
+  children: ReactNode;
+  style?: CSSProperties;
+  className?: string;
+}
+
+export interface TableCellProps {
+  children: ReactNode;
+  style?: CSSProperties;
+  className?: string;
+}

package/src/molecules/table/index.ts

@@ -0,0 +1,2 @@
+export { Table } from './Table';
+export type { TableProps, TableHCellProps, TableCellProps } from './Table.types';

package/src/organisms/canvas/Canvas.tsx

@@ -0,0 +1,79 @@
+import { useEffect } from 'react';
+import { useRenderer } from './useRenderer';
+import { CanvasProps, UniformProps } from './Canvas.types';
+
+export const Canvas = (props: CanvasProps) => {
+  const { fragment, vertex, uniforms = {}, name, attributes = [], onRender, ...rest } = props;
+
+  const { canvasRef, renderer } = useRenderer(uniforms);
+  const instName = name ?? 'default';
+
+  useEffect(() => {
+    if (renderer == null || canvasRef.current == null) {
+      return;
+    }
+
+    const aCopy = attributes.map(attr => ({
+      ...attr,
+      data: (i: number, total: number) => attr.data?.(i, total),
+    }));
+
+    const uCopy = Object.keys(uniforms).reduce((acc: Record<string, UniformProps>, key) => {
+      acc[key] = {
+        ...uniforms[key],
+        value: [...uniforms[key].value],
+      };
+      return acc;
+    }, {});
+
+    const vertices: Array<{ x: number; y: number; z: number }> = [
+      { x: -100, y: 100, z: 0 },
+      { x: -100, y: -100, z: 0 },
+      { x: 100, y: 100, z: 0 },
+      { x: 100, y: -100, z: 0 },
+      { x: -100, y: -100, z: 0 },
+      { x: 100, y: 100, z: 0 },
+    ];
+
+    (renderer.add as (name: string, props: unknown) => void)(instName, {
+      uniforms: {
+        ...uCopy,
+        uProgress: {
+          type: 'float',
+          value: [0.0],
+        },
+      },
+      attributes: aCopy,
+      fragment,
+      vertex,
+      mode: 4,
+      geometry: { vertices: vertices as unknown as object[][] },
+      onRender: (inst: { uniforms: { uProgress?: { value: number[] } } }) => {
+        if (inst.uniforms.uProgress != undefined) {
+          inst.uniforms.uProgress.value[0] += 0.09;
+        }
+
+        if (onRender) {
+          onRender(inst);
+        }
+      },
+    });
+
+    return () => {
+      renderer.remove(instName);
+    };
+  }, [renderer]);
+
+  return (
+    <canvas
+      style={{
+        ...props.style,
+        imageRendering: 'pixelated',
+      }}
+      ref={canvasRef}
+      {...rest}
+    />
+  );
+};
+
+Canvas.displayName = 'Canvas';

package/src/organisms/canvas/Canvas.types.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+
+export interface AttributeProps {
+  name: string;
+  size: number;
+  data?: (index: number, total: number) => number;
+}
+
+export interface UniformProps {
+  type: string;
+  value: number[];
+  location?: WebGLUniformLocation;
+}
+
+export interface CanvasProps extends HTMLAttributes<HTMLCanvasElement> {
+  fragment: string;
+  vertex?: string;
+  uniforms?: {
+    [key: string]: UniformProps;
+  };
+  attributes?: Array<AttributeProps>;
+  onRender?: (r: unknown) => void;
+  onInstRender?: (r: UniformProps) => void;
+  name?: string;
+}

package/src/organisms/canvas/index.ts

@@ -0,0 +1,3 @@
+export { Canvas } from './Canvas';
+export type { CanvasProps, AttributeProps, UniformProps } from './Canvas.types';
+export { useRenderer } from './useRenderer';

package/src/organisms/canvas/useRenderer.ts

@@ -0,0 +1,44 @@
+import { useEffect, useRef, useState } from 'react';
+import Phenomenon from 'phenomenon';
+import { UniformProps } from './Canvas.types';
+
+type UniformType = {
+  [key: string]: UniformProps;
+};
+
+export const useRenderer = (uniform: UniformType) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [renderer, setRenderer] = useState<Phenomenon | null>(null);
+
+  useEffect(() => {
+    if (!canvasRef.current) {
+      return;
+    }
+
+    const phenomenon = new Phenomenon({
+      settings: {
+        uniforms: uniform,
+        devicePixelRatio: window.devicePixelRatio,
+        shouldRender: true,
+        canvas: canvasRef.current,
+        mode: 4,
+      },
+      context: {
+        antialias: true,
+        alpha: true,
+      },
+    });
+
+    setRenderer(phenomenon);
+
+    return () => {
+      phenomenon?.destroy();
+      window.removeEventListener('resize', phenomenon?.resize);
+    };
+  }, []);
+
+  return {
+    canvasRef,
+    renderer,
+  };
+};

package/src/organisms/drop-image/DropImage.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DropImage } from './DropImage';
+
+const meta: Meta<typeof DropImage> = {
+  title: 'Organisms/DropImage',
+  component: DropImage,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockUploader = async (file: File) => {
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  return { success: true, fileName: file.name };
+};
+
+export const Default: Story = {
+  args: {
+    uploader: mockUploader,
+    placeholder: <div className="text-content-secondary text-center">拖拽图片到此处</div>,
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    ghost: true,
+    uploader: mockUploader,
+    placeholder: (
+      <div className="text-content-secondary text-center">Ghost 模式 - 拖拽图片到页面任意位置</div>
+    ),
+  },
+};

package/src/organisms/drop-image/DropImage.tsx

@@ -0,0 +1,193 @@
+import { useCallback, useEffect, useState, FunctionComponent } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { wait } from './utils';
+import { useDropImage } from './useDropImage';
+import { ImagePreviewerProps, DropImageProps } from './DropImage.types';
+
+const ImagePreviewer = (props: ImagePreviewerProps) => {
+  const { visible: showImagePreviewer, imageRef, imageSize, imageSrc } = props;
+
+  return (
+    <img
+      className={twMerge(
+        'max-w-full h-auto duration-300 transition-opacity opacity-100',
+        !showImagePreviewer && 'opacity-0 m-0! p-0!'
+      )}
+      ref={imageRef}
+      src={imageSrc}
+      width={imageSize.width}
+      height={imageSize.height}
+      alt="Preview"
+    />
+  );
+};
+
+ImagePreviewer.displayName = 'ImagePreviewer';
+
+const GhostDropImage: FunctionComponent<DropImageProps<unknown>> = props => {
+  const {
+    onDrop = () => {},
+    onUploadFinish = () => {},
+    uploader,
+    waitTimeAfterFinish = 2000,
+    className = '',
+    children,
+    placeholder,
+  } = props;
+
+  const [coverVisible, setCoverVisible] = useState(false);
+  const [imageVisible, setImageVisible] = useState(false);
+
+  const handleDocDragEnter = useCallback(() => {
+    setCoverVisible(true);
+  }, []);
+
+  const { handleDragLeave, handleDragOver, handleDrop, imageRef, imageSize, imageSrc, reset } =
+    useDropImage({
+      onImageLoad: () => {
+        setImageVisible(true);
+      },
+      onDrop: async (e, file) => {
+        onDrop(e, file);
+        setCoverVisible(false);
+        const result = await uploader(file);
+        await wait(waitTimeAfterFinish);
+        onUploadFinish(result);
+        setImageVisible(false);
+        reset();
+      },
+    });
+
+  useEffect(() => {
+    document.addEventListener('dragenter', handleDocDragEnter);
+
+    return () => {
+      document.removeEventListener('dragenter', handleDocDragEnter);
+    };
+  }, [handleDocDragEnter]);
+
+  return (
+    <>
+      <div
+        className={twMerge(
+          'fixed top-0 left-0 h-full w-full transition-all duration-200',
+          coverVisible
+            ? 'backdrop-blur-sm bg-background/50 z-[999] opacity-100'
+            : 'z-[-1] opacity-0 pointer-events-none'
+        )}
+        onDragLeave={() => {
+          handleDragLeave();
+          setCoverVisible(false);
+        }}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+      />
+      {!imageVisible && placeholder}
+      {children ? (
+        children({
+          visible: imageVisible,
+          imageRef,
+          imageSize,
+          imageSrc,
+        })
+      ) : (
+        <ImagePreviewer
+          className={className}
+          visible={imageVisible}
+          imageRef={imageRef}
+          imageSrc={imageSrc}
+          imageSize={imageSize}
+        />
+      )}
+    </>
+  );
+};
+
+GhostDropImage.displayName = 'GhostDropImage';
+
+export const DropImage: FunctionComponent<DropImageProps<unknown>> = props => {
+  const {
+    uploader,
+    defaultBgColor = 'var(--color-muted)',
+    onDrop,
+    dragOverBgColor = 'var(--color-accent)',
+    waitTimeAfterFinish = 2000,
+    placeholder = '',
+    className = '',
+    onUploadFinish = () => {},
+    ghost,
+    children,
+    dropAreaStyle = {
+      width: 300,
+      height: 300,
+    },
+  } = props;
+
+  if (ghost) {
+    return <GhostDropImage {...props} />;
+  }
+
+  const [showImagePreviewer, setShowImagePreviewer] = useState(false);
+  const {
+    handleDragLeave,
+    handleDragOver,
+    handleDrop,
+    imageRef,
+    imageSize,
+    imageSrc,
+    isDragOver,
+    reset,
+  } = useDropImage({
+    onDrop,
+    onImageLoad: async (image, file) => {
+      await wait(500);
+      setShowImagePreviewer(true);
+      await onUploadFinish(await uploader(file, image));
+      await wait(waitTimeAfterFinish);
+      setShowImagePreviewer(false);
+      await wait(500);
+      reset();
+    },
+  });
+
+  const getDropAreaStyle = () => {
+    return Object.assign({}, dropAreaStyle, {
+      background: isDragOver ? dragOverBgColor : defaultBgColor,
+      width: imageSize.width || dropAreaStyle.width,
+      height: imageSize.height || dropAreaStyle.height,
+    });
+  };
+
+  return (
+    <div
+      className={twMerge(
+        'transition-all items-center justify-center flex duration-200 ease-in-out flex-col rounded-sm',
+        className,
+        imageSrc ? 'shadow-none' : 'shadow-[var(--shadow-input)]'
+      )}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      style={getDropAreaStyle()}
+    >
+      {children ? (
+        children({
+          visible: showImagePreviewer,
+          imageRef,
+          imageSize,
+          imageSrc,
+        })
+      ) : (
+        <ImagePreviewer
+          visible={showImagePreviewer}
+          imageRef={imageRef}
+          imageSrc={imageSrc}
+          imageSize={imageSize}
+        />
+      )}
+      {!imageSrc && placeholder}
+    </div>
+  );
+};
+
+DropImage.displayName = 'DropImage';

package/src/organisms/drop-image/DropImage.types.ts

@@ -0,0 +1,26 @@
+import { CSSProperties, ReactNode, Ref } from 'react';
+
+export interface ImagePreviewerProps {
+  className?: string;
+  visible: boolean;
+  imageRef: Ref<HTMLImageElement>;
+  imageSrc: string;
+  imageSize: {
+    width: number;
+    height: number;
+  };
+}
+
+export interface DropImageProps<T = unknown> {
+  uploader: (file: File, img?: HTMLImageElement) => Promise<T>;
+  onDrop?: (e: React.DragEvent<Element>, file: File) => void;
+  onUploadFinish?: (result: T) => void;
+  waitTimeAfterFinish?: number;
+  defaultBgColor?: string;
+  dragOverBgColor?: string;
+  dropAreaStyle?: CSSProperties;
+  placeholder?: ReactNode;
+  className?: string;
+  ghost?: boolean;
+  children?: (props: ImagePreviewerProps) => ReactNode;
+}

package/src/organisms/drop-image/index.ts

@@ -0,0 +1,3 @@
+export { DropImage } from './DropImage';
+export type { DropImageProps, ImagePreviewerProps } from './DropImage.types';
+export { useDropImage } from './useDropImage';