dify

dify/web/app/components/base/skeleton/index.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import {
+  SkeletonContainer,
+  SkeletonPoint,
+  SkeletonRectangle,
+  SkeletonRow,
+} from '.'
+
+const SkeletonDemo = () => {
+  return (
+    <div className="flex w-full max-w-xl flex-col gap-6 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+      <div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Loading skeletons</div>
+      <div className="space-y-4 rounded-xl border border-divider-subtle bg-background-default-subtle p-4">
+        <SkeletonContainer>
+          <SkeletonRow>
+            <SkeletonRectangle className="h-4 w-32 rounded-md" />
+            <SkeletonPoint />
+            <SkeletonRectangle className="h-4 w-20 rounded-md" />
+          </SkeletonRow>
+          <SkeletonRow>
+            <SkeletonRectangle className="h-3 w-full" />
+          </SkeletonRow>
+          <SkeletonRow>
+            <SkeletonRectangle className="h-3 w-5/6" />
+          </SkeletonRow>
+        </SkeletonContainer>
+      </div>
+      <div className="space-y-3 rounded-xl border border-divider-subtle bg-background-default-subtle p-4">
+        <SkeletonRow className="items-start">
+          <SkeletonRectangle className="mr-4 h-10 w-10 rounded-full" />
+          <SkeletonContainer className="w-full">
+            <SkeletonRectangle className="h-3 w-1/3" />
+            <SkeletonRectangle className="h-3 w-full" />
+            <SkeletonRectangle className="h-3 w-3/4" />
+          </SkeletonContainer>
+        </SkeletonRow>
+      </div>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Feedback/Skeleton',
+  component: SkeletonDemo,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Composable skeleton primitives (container, row, rectangle, point) to sketch loading states for panels and lists.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof SkeletonDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}

dify/web/app/components/base/skeleton/index.tsx

@@ -0,0 +1,50 @@
+import type { ComponentProps, FC } from 'react'
+import classNames from '@/utils/classnames'
+
+type SkeletonProps = ComponentProps<'div'>
+
+export const SkeletonContainer: FC<SkeletonProps> = (props) => {
+  const { className, children, ...rest } = props
+  return (
+    <div className={classNames('flex flex-col gap-1', className)} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export const SkeletonRow: FC<SkeletonProps> = (props) => {
+  const { className, children, ...rest } = props
+  return (
+    <div className={classNames('flex items-center gap-2', className)} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export const SkeletonRectangle: FC<SkeletonProps> = (props) => {
+  const { className, children, ...rest } = props
+  return (
+    <div className={classNames('my-1 h-2 rounded-sm bg-text-quaternary opacity-20', className)} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export const SkeletonPoint: FC<SkeletonProps> = (props) => {
+  const { className, ...rest } = props
+  return (
+    <div className={classNames('text-xs font-medium text-text-quaternary', className)} {...rest}>·</div>
+  )
+}
+/** Usage
+ * <SkeletonContainer>
+ *  <SkeletonRow>
+ *    <SkeletonRectangle className="w-96" />
+ *    <SkeletonPoint />
+ *    <SkeletonRectangle className="w-96" />
+ *  </SkeletonRow>
+ *  <SkeletonRow>
+ *    <SkeletonRectangle className="w-96" />
+ *  </SkeletonRow>
+ * <SkeletonRow>
+ */