refactor(core): remove all MUI related components and utilities (#4941)

packages/frontend/component/src/ui/skeleton/index.css.ts

@@ -0,0 +1,94 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+import type { PickStringFromUnion, SkeletonProps } from './types';
+
+// variables
+const bg = 'var(--affine-placeholder-color)';
+const highlight = 'rgba(255, 255, 255, 0.4)';
+const defaultHeight = '32px';
+
+const pulseKeyframes = keyframes({
+  '0%': { opacity: 1 },
+  '50%': { opacity: 0.5 },
+  '100%': { opacity: 1 },
+});
+
+const waveKeyframes = keyframes({
+  '0%': { transform: 'translateX(-100%)' },
+  '50%': { transform: 'translateX(100%)' },
+  '100%': { transform: 'translateX(100%)' },
+});
+
+export const root = style({
+  display: 'block',
+  width: '100%',
+  height: defaultHeight,
+  flexShrink: 0,
+
+  /**
+   * paint background in ::before,
+   * so that we can use opacity to control the color
+   **/
+  position: 'relative',
+  '::before': {
+    content: '',
+    position: 'absolute',
+    borderRadius: 'inherit',
+    inset: 0,
+    opacity: 0.3,
+    backgroundColor: bg,
+  },
+});
+
+export const variant: Record<string, string> = {
+  circular: style({
+    width: defaultHeight,
+    borderRadius: '50%',
+  }),
+  rectangular: style({
+    borderRadius: '0px',
+  }),
+  rounded: style({
+    borderRadius: '8px',
+  }),
+  text: style({
+    borderRadius: '4px',
+    height: '1.2em',
+    marginTop: '0.2em',
+    marginBottom: '0.2em',
+  }),
+};
+
+export const animation: Record<
+  PickStringFromUnion<SkeletonProps['animation']>,
+  string
+> = {
+  pulse: style({
+    animation: `${pulseKeyframes} 2s ease-in-out 0.5s infinite`,
+  }),
+  wave: style({
+    position: 'relative',
+    overflow: 'hidden',
+
+    /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */
+    WebkitMaskImage: '-webkit-radial-gradient(white, black)',
+
+    '::after': {
+      animation: `${waveKeyframes} 2s linear 0.5s infinite`,
+      background: `linear-gradient(
+        90deg,
+        transparent,
+        ${highlight},
+        transparent
+      )`,
+      content: '',
+      position: 'absolute',
+      transform:
+        'translateX(-100%)' /* Avoid flash during server-side hydration */,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+    },
+  }),
+};

packages/frontend/component/src/ui/skeleton/index.ts

@@ -0,0 +1,2 @@
+export * from './skeleton';
+export * from './types';

packages/frontend/component/src/ui/skeleton/skeleton.tsx

@@ -0,0 +1,49 @@
+import clsx from 'clsx';
+
+import * as styles from './index.css';
+import type { SkeletonProps } from './types';
+
+function getSize(size: number | string) {
+  return typeof size === 'number' || /^\d+$/.test(size) ? `${size}px` : size;
+}
+
+/**
+ *
+ * @returns
+ */
+export const Skeleton = ({
+  animation = 'pulse',
+  variant = 'text',
+  children,
+
+  width: _width,
+  height: _height,
+  style: _style,
+  className: _className,
+
+  ...props
+}: SkeletonProps) => {
+  const width = _width !== undefined ? getSize(_width) : undefined;
+  const height = _height !== undefined ? getSize(_height) : undefined;
+
+  const style = {
+    width,
+    height,
+    ...(_style || {}),
+  };
+
+  return (
+    <div
+      className={clsx(
+        _className,
+        styles.root,
+        styles.variant[variant],
+        animation && styles.animation[animation]
+      )}
+      style={style}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};

packages/frontend/component/src/ui/skeleton/types.ts

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+export interface SkeletonProps
+  extends PropsWithChildren,
+    HTMLAttributes<HTMLElement> {
+  /**
+   * The animation. If `false` the animation effect is disabled.
+   */
+  animation?: 'pulse' | 'wave' | false;
+
+  /**
+   * The type of content that will be rendered.
+   * @default `'text'`
+   */
+  variant?: 'circular' | 'rectangular' | 'rounded' | 'text' | string;
+
+  /**
+   * Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
+   */
+  width?: number | string;
+
+  /**
+   * Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
+   */
+  height?: number | string;
+
+  /**
+   * Wrapper component. If not provided, the default element is a div.
+   */
+  wrapper?: string;
+}
+
+export type PickStringFromUnion<T> = T extends string ? T : never;