wip: docs for custom ui

docs/guide/customize-style.md

@@ -1,5 +1,5 @@
 ---
-title: 定制样式
+title: 定制图表样式
 nav: { title: '指南', order: 0 }
 toc: content
 order: 3

docs/guide/demos/WeatherCard/index.tsx

@@ -0,0 +1,47 @@
+import type { CodeBlockComponent } from '@antv/gpt-vis';
+import React from 'react';
+import StyledComponent from './style';
+
+const WeatherCard: CodeBlockComponent = (props) => {
+  const content = String(props.children).trim();
+  const { locationName, temperature, humidity, wind, cloudiness, uv } = JSON.parse(content);
+
+  return (
+    <StyledComponent>
+      <div className="locationSection">
+        <div className="temperatureWrapper">
+          <div className="temperatureDetails">
+            <img
+              src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1w1nS6N5McoAAAAAAAAAAAAADmJ7AQ/original"
+              className="imageIcon"
+            />
+            <span className="currentTemperature">{temperature}°</span>
+          </div>
+          <span className="locationName">{locationName}</span>
+        </div>
+        <div className="weatherDetails">
+          <div className="humiditySection">
+            <span className="attributeLabel">Humidity</span>
+            <span className="uvIndexValue">{humidity}%</span>
+          </div>
+          <div className="windSection">
+            <span className="windSpeedLabel">Wind</span>
+            <span className="windSpeedValue">{wind}kph</span>
+          </div>
+          <div className="additionalInfo">
+            <div className="cloudinessSection">
+              <span className="cloudinessLabel">Cloudiness</span>
+              <span className="cloudinessValue">{cloudiness}%</span>
+            </div>
+            <div className="uvIndexSection">
+              <span className="uvIndexLabel">UV Index</span>
+              <span className="uvIndexValue">{uv}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </StyledComponent>
+  );
+};
+
+export default WeatherCard;

docs/guide/demos/WeatherCard/style.ts

@@ -0,0 +1,139 @@
+import { styled } from 'styled-components';
+
+const StyledComponent = styled.div`
+  width: 424px;
+  padding: 2px;
+  background-color: #60a5fa;
+
+  .locationSection {
+    display: flex;
+    flex-direction: column;
+    padding: 18px 18px 14px 10px;
+    border-radius: 10px;
+  }
+
+  .temperatureWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-left: 12px;
+  }
+
+  .temperatureDetails {
+    display: flex;
+    align-items: center;
+    gap: 22px;
+  }
+
+  .imageIcon {
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+  }
+
+  .currentTemperature {
+    color: #feffff;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .locationName {
+    color: #60a5fa;
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .weatherDetails {
+    display: flex;
+    align-items: center;
+    margin-top: 16px;
+    padding-right: 2px;
+    padding-left: 2px;
+  }
+
+  .humiditySection {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 82px;
+    padding-right: 8px;
+    padding-left: 2px;
+  }
+
+  .attributeLabel {
+    min-width: 56px;
+    margin-right: 2px;
+    margin-left: 2px;
+    background-color: #7fb6fb;
+    color: #dbeafe;
+    font-size: 12px;
+  }
+
+  .uvIndexValue {
+    color: #fff;
+    font-size: 12px;
+  }
+
+  .windSection {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 20px;
+    padding-right: 10px;
+    padding-left: 4px;
+  }
+
+  .windSpeedLabel {
+    color: #dbeafe;
+    font-size: 14px;
+  }
+
+  .windSpeedValue {
+    color: #feffff;
+    font-size: 14px;
+  }
+
+  .additionalInfo {
+    display: flex;
+    margin-left: 2px;
+    gap: 26px;
+  }
+
+  .cloudinessSection {
+    display: flex;
+    flex-direction: column;
+    padding-right: 2px;
+    padding-left: 2px;
+  }
+
+  .cloudinessLabel {
+    color: #dbeafe;
+    font-size: 12px;
+  }
+
+  .cloudinessValue {
+    align-self: flex-start;
+    color: #fff;
+    font-size: 12px;
+  }
+
+  .uvIndexSection {
+    display: flex;
+    flex-direction: column;
+    padding-right: 2px;
+  }
+
+  .uvIndexLabel {
+    margin-left: 2px;
+    color: #dbeafe;
+    font-size: 12px;
+  }
+
+  .uvIndexValue {
+    color: #fff;
+    font-size: 12px;
+  }
+`;
+
+export default StyledComponent;

docs/guide/demos/custom-ui.tsx

@@ -0,0 +1,44 @@
+import { ChartType, GPTVisLite, Pie, withChartCode } from '@antv/gpt-vis';
+import React from 'react';
+import WeatherCard from './WeatherCard';
+
+const markdownContent = `
+\`\`\`weather
+{
+  "locationName": "Hngzhou",
+  "temperature": 11.4,
+  "humidity": 82,
+  "wind": 6.8,
+  "cloudiness": 75,
+  "uv": "0.2 of 11"
+}
+\`\`\`
+
+\`\`\`vis-chart
+{
+  "type": "pie",
+  "data": [
+    { "category": "分类一", "value": 27 },
+    { "category": "分类二", "value": 25 },
+    { "category": "分类三", "value": 18 },
+    { "category": "其他", "value": 5 }
+  ]
+}
+\`\`\`
+`;
+
+const customRenderers = {
+  weather: WeatherCard,
+};
+const components = {
+  code: withChartCode({
+    // register custom block renderer
+    languageRenderers: customRenderers,
+    // register a pie chart
+    components: { [ChartType.Pie]: Pie },
+  }),
+};
+
+export default () => {
+  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
+};

docs/guide/quick-start.md

@@ -87,3 +87,5 @@ export default () => {
   return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
 };
 ```
+
+<code src="./demos/custom-ui.tsx"></code>

mako.config.json

@@ -5,5 +5,8 @@
   },
   "codeSplitting": {
     "strategy": "auto"
+  },
+  "watch": {
+    "ignorePaths": ["bindings"]
   }
 }

tsconfig.json

@@ -14,6 +14,6 @@
       "@antv/gpt-vis": ["./src/index.ts"]
     }
   },
-  "include": ["./*.?*.ts", "src", "__tests__"],
+  "include": ["./*.?*.ts", "src", "__tests__", "docs"],
   "exclude": ["node_modules", "dist"]
 }