docs: fix demo

Author: wangdicoder

packages/react/src/grid/demo/AlignmentGrid.tsx

@@ -1,28 +1,72 @@
 import React from 'react';
-import { Button, Grid } from '@tiny-design/react';
+import { Grid, Radio } from '@tiny-design/react';
+import { DemoControlLabel, DemoControls, getDemoBlockStyle } from './shared';
+
+type AlignmentValue = 'start' | 'center' | 'end' | 'stretch';
 
 export default function AlignmentGridDemo() {
+  const [justify, setJustify] = React.useState<AlignmentValue>('stretch');
+  const [align, setAlign] = React.useState<AlignmentValue>('stretch');
+
   return (
-    <Grid
-      columns={3}
-      gap="sm"
-      align="center"
-      justify="center"
-      style={{
-        minHeight: 180,
-        padding: 16,
-        border: '1px dashed var(--ty-color-border)',
-        borderRadius: 12,
-        background:
-          'linear-gradient(180deg, color-mix(in srgb, var(--ty-color-primary) 6%, transparent), color-mix(in srgb, var(--ty-color-primary-bg) 45%, transparent))',
-      }}>
-      <Button variant="solid" color="primary">
-        Primary
-      </Button>
-      <Button>Default</Button>
-      <Button variant="outline" color="primary">
-        Outline
-      </Button>
-    </Grid>
+    <div>
+      <DemoControls>
+        <div>
+          <DemoControlLabel>Justify</DemoControlLabel>
+          <Radio.Group value={justify} onChange={(val) => setJustify(val as AlignmentValue)}>
+            <Radio value="start">start</Radio>
+            <Radio value="center">center</Radio>
+            <Radio value="end">end</Radio>
+            <Radio value="stretch">stretch</Radio>
+          </Radio.Group>
+        </div>
+        <div>
+          <DemoControlLabel>Align</DemoControlLabel>
+          <Radio.Group value={align} onChange={(val) => setAlign(val as AlignmentValue)}>
+            <Radio value="start">start</Radio>
+            <Radio value="center">center</Radio>
+            <Radio value="end">end</Radio>
+            <Radio value="stretch">stretch</Radio>
+          </Radio.Group>
+        </div>
+      </DemoControls>
+      <Grid
+        columns={3}
+        gap="sm"
+        align={align}
+        justify={justify}
+        style={{
+          minHeight: 180,
+          padding: 16,
+          border: '1px dashed var(--ty-color-border)',
+          borderRadius: 12,
+          background: 'color-mix(in srgb, var(--ty-color-primary) 4%, transparent)',
+        }}>
+        <div
+          style={getDemoBlockStyle('strong', 64, {
+            minHeight: 64,
+            width: justify === 'stretch' ? undefined : 92,
+            justifyContent: 'center',
+          })}>
+          {justify}
+        </div>
+        <div
+          style={getDemoBlockStyle('base', 64, {
+            minHeight: 64,
+            width: justify === 'stretch' ? undefined : 92,
+            justifyContent: 'center',
+          })}>
+          {align}
+        </div>
+        <div
+          style={getDemoBlockStyle('soft', 64, {
+            minHeight: 64,
+            width: justify === 'stretch' ? undefined : 92,
+            justifyContent: 'center',
+          })}>
+          items
+        </div>
+      </Grid>
+    </div>
   );
 }

packages/react/src/grid/demo/AutoFit.tsx

@@ -1,17 +1,72 @@
 import React from 'react';
-import { Card, Grid } from '@tiny-design/react';
+import { Checkbox, Grid, Slider } from '@tiny-design/react';
+import type { SliderValue } from '@tiny-design/react';
+import { DemoBlock, DemoControlLabel, DemoControls } from './shared';
 
 export default function AutoFitDemo() {
+  const [minColumnWidth, setMinColumnWidth] = React.useState(180);
+  const [autoFit, setAutoFit] = React.useState(true);
+  const [count, setCount] = React.useState(5);
+
   return (
-    <Grid minColumnWidth={180} gap="sm">
-      {['Analytics', 'Revenue', 'Orders', 'Retention', 'Conversion'].map((title) => (
-        <Card key={title}>
-          <Card.Content>
-            <strong>{title}</strong>
-            <div style={{ marginTop: 8, color: 'var(--ty-color-text-secondary)' }}>Auto-fit cards without manual breakpoints.</div>
-          </Card.Content>
-        </Card>
-      ))}
-    </Grid>
+    <div>
+      <DemoControls>
+        <div>
+          <DemoControlLabel>Min column width: {minColumnWidth}px</DemoControlLabel>
+          <Slider
+            min={140}
+            max={260}
+            step={20}
+            value={minColumnWidth}
+            onChange={(val: SliderValue) => {
+              if (typeof val === 'number') {
+                setMinColumnWidth(val);
+              }
+            }}
+          />
+        </div>
+        <div>
+          <DemoControlLabel>Item count: {count}</DemoControlLabel>
+          <Slider
+            min={4}
+            max={8}
+            step={1}
+            value={count}
+            onChange={(val: SliderValue) => {
+              if (typeof val === 'number') {
+                setCount(val);
+              }
+            }}
+          />
+        </div>
+        <div>
+          <Checkbox
+            checked={autoFit}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAutoFit(e.currentTarget.checked)}>
+            Use auto-fit
+          </Checkbox>
+        </div>
+      </DemoControls>
+      <Grid minColumnWidth={minColumnWidth} autoFit={autoFit} gap="sm">
+        {[
+          ['Analytics', `${autoFit ? 'auto-fit' : 'auto-fill'} / ${minColumnWidth}px`],
+          ['Revenue', 'responsive tracks'],
+          ['Orders', 'reflow'],
+          ['Retention', 'no breakpoints'],
+          ['Conversion', 'fluid blocks'],
+          ['Traffic', 'auto placement'],
+          ['Pipeline', 'repeat tracks'],
+          ['Forecast', 'adaptive cells'],
+        ].slice(0, count).map(([title, detail], index) => (
+          <DemoBlock
+            key={title}
+            title={title}
+            detail={detail}
+            tone={index % 2 === 0 ? 'strong' : 'soft'}
+            minHeight={96}
+          />
+        ))}
+      </Grid>
+    </div>
   );
 }