@bbki.ng/ui 0.1.1

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

@@ -0,0 +1,124 @@
+import { useState, useCallback, useRef, DragEvent, DragEventHandler } from 'react';
+
+export const useDropImage = (params?: {
+  portraitImageWidth?: number;
+  landscapeImageWidth?: number;
+  onDrop?: (e: DragEvent<Element>, file: File) => void;
+  onImageLoad?: (img: HTMLImageElement, file: File) => void;
+}) => {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [imageSrc, setImageSrc] = useState('');
+  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
+  const imageFile = useRef<File | null>();
+
+  const {
+    portraitImageWidth = 384,
+    landscapeImageWidth = 500,
+    onDrop = () => {},
+    onImageLoad = () => {},
+  } = params || {};
+
+  const reset = () => {
+    setImageSrc('');
+    setImageSize({ width: 0, height: 0 });
+    setIsDragOver(false);
+    imageFile.current = null;
+  };
+
+  const calcDefaultImgSize = (
+    img: { width: number; height: number },
+    defaultWidth?: number
+  ): { width: number; height: number } => {
+    const { width, height } = img;
+    const whRatio = width / height;
+    const isHorizontal = width > height;
+
+    const finalWidth = defaultWidth || (isHorizontal ? landscapeImageWidth : portraitImageWidth);
+
+    return {
+      width: finalWidth,
+      height: finalWidth / whRatio,
+    };
+  };
+
+  const setPreviewImageSrcByFile = (file: File) => {
+    try {
+      setImageSrc(URL.createObjectURL(file));
+    } catch (e) {
+      setImageSrc('');
+    }
+  };
+
+  const handleDragOver: DragEventHandler = useCallback(ev => {
+    ev.preventDefault();
+    setIsDragOver(true);
+    if (!ev.dataTransfer) {
+      return;
+    }
+    ev.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const handleDragLeave = useCallback(() => {
+    setIsDragOver(false);
+  }, []);
+
+  const handleDrop: DragEventHandler = useCallback(
+    ev => {
+      ev.preventDefault();
+      setIsDragOver(false);
+      const file = ev.dataTransfer ? ev.dataTransfer.files[0] : undefined;
+      if (!file || !file.type.startsWith('image')) {
+        return;
+      }
+      imageFile.current = file;
+      setPreviewImageSrcByFile(file);
+      onDrop(ev, file);
+    },
+    [onDrop]
+  );
+
+  const handleImgLoad = (img: HTMLImageElement) => {
+    const updateFunc = async () => {
+      const p = 'decode' in img ? img.decode : Promise.resolve;
+      try {
+        await p();
+      } catch (e) {}
+      setImageSize(
+        calcDefaultImgSize({
+          width: img.naturalWidth,
+          height: img.naturalHeight,
+        })
+      );
+      if (!imageFile.current) {
+        return;
+      }
+      onImageLoad(img, imageFile.current);
+    };
+
+    if (img.complete) {
+      updateFunc().then();
+      return;
+    }
+
+    img.onload = updateFunc;
+  };
+
+  const imageRef = useCallback((input: HTMLImageElement) => {
+    if (!input) {
+      return;
+    }
+
+    handleImgLoad(input);
+  }, []);
+
+  return {
+    isDragOver,
+    imageSrc,
+    imageRef,
+    imageSize,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    reset,
+  };
+};

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

@@ -0,0 +1 @@
+export const wait = (d: number) => new Promise(r => setTimeout(r, d));

package/src/organisms/drop-zone/DropZone.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { DropZoneProps } from './DropZone.types';
+
+export const DropZone = (props: DropZoneProps) => {
+  const { onDrop, children, className, style, disabled } = props;
+  const [coverVisible, setCoverVisible] = useState(false);
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setCoverVisible(false);
+    const file = e.dataTransfer.files[0];
+    onDrop(file);
+  };
+
+  const handleDocDragEnter = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    setCoverVisible(true);
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('dragenter', handleDocDragEnter);
+
+    return () => {
+      document.removeEventListener('dragenter', handleDocDragEnter);
+    };
+  }, [handleDocDragEnter]);
+
+  if (disabled) {
+    return <>{children}</>;
+  }
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setCoverVisible(true);
+  };
+
+  return (
+    <>
+      <div
+        className={twMerge(
+          'fixed top-0 left-0 h-full w-full',
+          'transition-all duration-200',
+          'backdrop-blur-sm bg-background/50',
+          coverVisible ? 'z-[999] opacity-100' : 'z-[-1] opacity-0 pointer-events-none',
+          className
+        )}
+        style={style}
+        onDragLeave={() => setCoverVisible(false)}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+      />
+      {children}
+    </>
+  );
+};
+
+DropZone.displayName = 'DropZone';

package/src/organisms/drop-zone/DropZone.types.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, ReactNode } from 'react';
+
+export interface DropZoneProps {
+  onDrop: (file: File) => void;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+  disabled?: boolean;
+}

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

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

package/src/organisms/loading-spiral/LoadingSpiral.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LoadingSpiral } from './LoadingSpiral';
+
+const meta = {
+  title: 'Organisms/LoadingSpiral',
+  component: LoadingSpiral,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof LoadingSpiral>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  args: {},
+} satisfies Story;
+
+export const Fast = {
+  args: {
+    step: 0.2,
+  },
+} satisfies Story;
+
+export const Slow = {
+  args: {
+    step: 0.03,
+  },
+} satisfies Story;

package/src/organisms/loading-spiral/LoadingSpiral.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'react';
+import Phenomenon from 'phenomenon';
+import { twMerge } from 'tailwind-merge';
+import { createSettings } from './createSettings';
+import { createOptions } from './createOptions';
+import { LoadingSpiralProps } from './LoadingSpiral.types';
+
+export const LoadingSpiral = (props?: LoadingSpiralProps) => {
+  const { className, step } = props || {};
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (!canvasRef.current) {
+      return;
+    }
+
+    const phenomenon = new Phenomenon({
+      settings: createSettings({ canvas: canvasRef.current, step }),
+      context: {
+        antialias: true,
+        alpha: true,
+      },
+    });
+
+    phenomenon.add('spiral', createOptions());
+  }, [step]);
+
+  return (
+    <canvas
+      style={{
+        maxWidth: 500,
+        maxHeight: 500,
+        imageRendering: 'pixelated',
+      }}
+      ref={canvasRef}
+      className={twMerge(
+        'h-full w-full overflow-hidden flex justify-center items-center aspect-square',
+        className
+      )}
+    />
+  );
+};
+
+LoadingSpiral.displayName = 'LoadingSpiral';

package/src/organisms/loading-spiral/LoadingSpiral.types.ts

@@ -0,0 +1,4 @@
+export interface LoadingSpiralProps {
+  className?: string;
+  step?: number;
+}

package/src/organisms/loading-spiral/constants.ts

@@ -0,0 +1,62 @@
+export enum ATTR {
+  PERCENT = 'aPercent',
+  POINT_SIZE = 'aPointSize',
+}
+
+export const VERTEX_SHADER = `
+  attribute float ${ATTR.PERCENT};
+  attribute float ${ATTR.POINT_SIZE};
+
+  uniform mat4 uProjectionMatrix;
+  uniform mat4 uModelMatrix;
+  uniform mat4 uViewMatrix;
+  uniform float uProgress;
+
+  varying vec3 vColor;
+
+  vec3 curve(float _percent) {
+    const float PI2 = 3.141592653589793 * 2.0;
+    const float _length = 0.3;
+    const float radius = 0.056;
+    float t = mod(_percent, 0.25) / 0.25;
+    t = mod(_percent, 0.25) - (2.0 * (1.0 - t) * t * -0.0185 + t * t * 0.25);
+    float x = _length * sin(PI2 * _percent);
+    float y = radius * cos(PI2 * 3.0 * _percent);
+
+    if (
+      floor(_percent / 0.25) == 0.0
+      || floor(_percent / 0.25) == 2.0
+    ) {
+      t = t * -1.0;
+    }
+    float z = radius * sin(PI2 * 2.0 * (_percent - t));
+    return vec3(x, y, z);
+  }
+
+  mat4 rotateX(float _angle){
+    return mat4(
+      1.0, 0.0, 0.0, 0.0,
+      0.0, cos(_angle), -sin(_angle), 0.0,
+      0.0, sin(_angle), cos(_angle), 0.0,
+      0.0, 0.0, 0.0, 1.0
+    );
+  }
+
+  void main(){
+    gl_Position = uProjectionMatrix
+     * uModelMatrix
+     * uViewMatrix
+     * rotateX(uProgress)
+     * vec4(curve(${ATTR.PERCENT}), 1.0);
+
+    gl_PointSize = ${ATTR.POINT_SIZE};
+  }
+`;
+
+export const FRAGMENT_SHADER = `
+  precision mediump float;
+  uniform float uProgress;
+  void main(){
+    gl_FragColor = vec4(0.81, 0.83, 0.85, 1.0);
+  }
+`;

package/src/organisms/loading-spiral/createOptions.ts

@@ -0,0 +1,31 @@
+import { ATTR, VERTEX_SHADER, FRAGMENT_SHADER } from './constants';
+
+export const createOptions = () => {
+  const attributes = [
+    {
+      name: ATTR.PERCENT,
+      data: (i: number, total: number) => [i / total],
+      size: 1,
+    },
+    {
+      name: ATTR.POINT_SIZE,
+      data: () => [window.devicePixelRatio * 1.3],
+      size: 1,
+    },
+  ];
+
+  const uniforms = {
+    uProgress: {
+      type: 'float',
+      value: [0.0],
+    },
+  };
+
+  return {
+    uniforms,
+    attributes,
+    multiplier: 4000,
+    vertex: VERTEX_SHADER,
+    fragment: FRAGMENT_SHADER,
+  };
+};

package/src/organisms/loading-spiral/createSettings.ts

@@ -0,0 +1,26 @@
+export interface LoadingSpiralSettings {
+  canvas?: HTMLCanvasElement;
+  step?: number;
+}
+
+export const createSettings = (settings: LoadingSpiralSettings) => {
+  const { canvas, step = 0.09 } = settings;
+
+  const uniforms = {
+    uProgress: {
+      type: 'float',
+      value: [0.0],
+    },
+  };
+
+  return {
+    uniforms,
+    devicePixelRatio: window.devicePixelRatio,
+    shouldRender: true,
+    canvas,
+    onRender: (r: { uniforms: { uProgress: { value: number[] } } }) => {
+      const { uProgress } = r.uniforms;
+      uProgress.value[0] += step;
+    },
+  };
+};

package/src/organisms/loading-spiral/index.ts

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

package/src/organisms/loading-spiral/useCanvasRef.ts

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+
+export const useResizedCanvasRef = (maxSize: number) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+    const { width, height } = container.getBoundingClientRect();
+    const canvasSize = Math.min(width, height);
+    const size = Math.min(canvasSize, maxSize);
+
+    canvas.setAttribute('width', `${size}`);
+    canvas.setAttribute('height', `${size}`);
+  }, [maxSize]);
+
+  return {
+    canvasRef,
+    containerRef,
+  };
+};

package/src/organisms/loading-spiral/utils.ts

@@ -0,0 +1,5 @@
+export const rgba = (val: number[]) => {
+  const [r, g, b, a] = val;
+
+  return [r / 255, g / 255, b / 255, a];
+};

package/src/organisms/page/Page.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Page, NotFound, Error as PageError, ErrorBoundary } from './Page';
+import { MemoryRouter } from 'react-router-dom';
+import { Nav } from '../../molecules/nav';
+
+const meta: Meta<typeof Page> = {
+  title: 'Organisms/Page',
+  component: Page,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    Story => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Page
+      nav={<Nav paths={[{ path: '/', name: '~' }]} />}
+      main={<div>Main content placeholder</div>}
+    />
+  ),
+};
+
+export const NotFoundDefault: Story = {
+  render: () => <NotFound />,
+};
+
+export const NotFoundWithMessage: Story = {
+  render: () => <NotFound>Custom page not found message</NotFound>,
+};
+
+export const ErrorDefault: Story = {
+  render: () => <PageError error={new Error('Something went wrong')} />,
+};
+
+// Helper component to trigger ErrorBoundary
+const ThrowError = () => {
+  throw new Error('Render error!');
+};
+
+export const ErrorBoundaryDefault: Story = {
+  render: () => (
+    <ErrorBoundary>
+      <div>Normal child content</div>
+    </ErrorBoundary>
+  ),
+};
+
+export const ErrorBoundaryWithError: Story = {
+  render: () => (
+    <ErrorBoundary>
+      <ThrowError />
+    </ErrorBoundary>
+  ),
+};

package/src/organisms/page/Page.tsx

@@ -0,0 +1,71 @@
+import React, { ReactElement } from 'react';
+import { Article } from '../../molecules/article';
+import {
+  PageProps,
+  ErrorProps,
+  NotFoundProps,
+  ErrorBoundaryProps,
+  ErrorBoundaryState,
+} from './Page.types';
+
+export const Page = (props: PageProps) => {
+  const { nav, main } = props;
+
+  return (
+    <main className="flex flex-col h-full">
+      <div className="flex-grow-0 w-full fixed top-0 z-50">{nav}</div>
+      {/* secctio padding top 192px */}
+      <section className="grow shrink-0 px-4 pt-32">{main}</section>
+    </main>
+  );
+};
+
+Page.displayName = 'Page';
+
+export const NotFound = (props: NotFoundProps) => {
+  const { children } = props;
+  return <Error error={{ name: '404', message: children || 'Not Found' } as Error} />;
+};
+
+NotFound.displayName = 'NotFound';
+
+export const Error = (props: ErrorProps) => {
+  const { error } = props;
+
+  return (
+    <div className="prose">
+      <pre>
+        <code className="language-javascript text-content-danger">
+          {error.name}: {error.message}
+        </code>
+      </pre>
+    </div>
+  );
+};
+
+Error.displayName = 'Error';
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  render(): ReactElement | null {
+    if (this.state.error && this.state.hasError) {
+      return (
+        <Article title="出错">
+          <div className="relative h-64">
+            <Error error={this.state.error} />
+          </div>
+        </Article>
+      );
+    }
+
+    return this.props.children as ReactElement;
+  }
+}

package/src/organisms/page/Page.types.ts

@@ -0,0 +1,23 @@
+import { ReactElement, ReactNode } from 'react';
+
+export interface PageProps {
+  nav: ReactElement;
+  main: ReactElement;
+}
+
+export interface ErrorProps {
+  error: Error;
+}
+
+export interface NotFoundProps {
+  children?: ReactNode;
+}
+
+export interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+export interface ErrorBoundaryState {
+  error?: Error;
+  hasError: boolean;
+}

package/src/organisms/page/index.ts

@@ -0,0 +1,8 @@
+export { Page, NotFound, Error, ErrorBoundary } from './Page';
+export type {
+  PageProps,
+  NotFoundProps,
+  ErrorProps,
+  ErrorBoundaryProps,
+  ErrorBoundaryState,
+} from './Page.types';