Add types to ApiView.tsx and its imports (#360)

Author: PavelVanecek

src/docs/api/AreaChart.ts

@@ -1,4 +1,6 @@
-export default {
+import { ApiDoc } from './types.ts';
+
+const AreaChartExample: ApiDoc = {
   name: 'AreaChart',
   desc: {
     'en-US': 'All svg elements can be added into the AreaChart component, such as defs, linearGradient, etc.',
@@ -185,3 +187,5 @@ export default {
     'validate svg elements...',
   ],
 };
+
+export default AreaChartExample;

src/docs/api/BarChart.ts

@@ -1,4 +1,6 @@
-export default {
+import { ApiDoc } from './types.ts';
+
+const BarChart: ApiDoc = {
   name: 'BarChart',
   props: [
     {
@@ -236,3 +238,4 @@ export default {
     'validate svg elements...',
   ],
 };
+export default BarChart;

src/docs/api/ComposedChart.ts

@@ -1,4 +1,6 @@
-export default {
+import { ApiDoc } from './types.ts';
+
+const ComposedChart: ApiDoc = {
   name: 'ComposedChart',
   desc: 'A chart composed of line, area, and bar charts. When you just want to draw a chart of a single type like line, then LineChart is recommended.',
   props: [
@@ -206,3 +208,4 @@ export default {
     'validate svg elements...',
   ],
 };
+export default ComposedChart;

src/docs/api/Line.ts

@@ -1,4 +1,6 @@
-export default {
+import { ApiDoc } from './types.ts';
+
+const Line: ApiDoc = {
   name: 'Line',
   props: [
     {
@@ -212,7 +214,7 @@ export default {
       type: 'String | Number',
       defaultVal: 'null',
       isOptional: true,
-      esc: {
+      desc: {
         'en-US': 'The unit of data. This option will be used in tooltip.',
         'zh-CN': '对应数据的单位，这个单位会展示在 Tooltip 的数值后面。',
       },
@@ -391,3 +393,4 @@ export default {
   parentComponents: ['LineChart', 'ComposedChart'],
   childrenComponents: ['LabelList', 'ErrorBar'],
 };
+export default Line;

src/docs/api/RadialBarChart.ts

@@ -1,4 +1,6 @@
-export default {
+import { ApiDoc } from './types.ts';
+
+const RadialBarChart: ApiDoc = {
   name: 'RadialBarChart',
   props: [
     {
@@ -200,3 +202,4 @@ export default {
     'validate svg elements...',
   ],
 };
+export default RadialBarChart;

src/docs/api/SankeyChart.ts

@@ -1,4 +1,6 @@
-export default {
+import { ApiDoc } from './types.ts';
+
+const SankeyChart: ApiDoc = {
   name: 'SankeyChart',
   props: [
     {
@@ -222,3 +224,4 @@ export default {
   ],
   childrenComponents: ['Tooltip'],
 };
+export default SankeyChart;

src/docs/api/Text.ts

@@ -1,4 +1,6 @@
-export default {
+import { ApiDoc } from './types.ts';
+
+const Text: ApiDoc = {
   name: 'Text',
   props: [
     {
@@ -46,3 +48,4 @@ export default {
     },
   ],
 };
+export default Text;

src/docs/api/Treemap.ts

@@ -1,4 +1,6 @@
-export default {
+import { ApiDoc } from './types.ts';
+
+const Treemap: ApiDoc = {
   name: 'Treemap',
   props: [
     {
@@ -112,3 +114,4 @@ export default {
   ],
   parentComponents: ['ResponsiveContainer'],
 };
+export default Treemap;

src/docs/api/index.ts

@@ -48,8 +48,9 @@ import Dot from './Dot';
 import Polygon from './Polygon';
 import Rectangle from './Rectangle';
 import Sector from './Sector';
+import { ApiDoc } from './types.ts';
 
-export default {
+const allExamples: Record<string, ApiDoc> = {
   AreaChart,
   BarChart,
   LineChart,
@@ -101,3 +102,5 @@ export default {
   Rectangle,
   Sector,
 };
+
+export default allExamples;

src/docs/api/types.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { SupportedLocale } from '../../locale';
+
+export type PropExample = {
+  name: string;
+  url: string;
+  isExternal?: boolean;
+};
+
+export type ApiProps = {
+  name: string;
+  type: string;
+  defaultVal?: string | number | null;
+  isOptional?: boolean;
+  desc?: string | Partial<Record<SupportedLocale, string>>;
+  format?: ReadonlyArray<string>;
+  examples?: ReadonlyArray<PropExample>;
+  deprecated?: boolean;
+};
+
+export type ApiDoc = {
+  name: string;
+  desc?: string | Record<SupportedLocale, string>;
+  props: ReadonlyArray<ApiProps>;
+  parentComponents?: ReadonlyArray<string>;
+  childrenComponents?: ReadonlyArray<string>;
+};
+
+export type ApiExample = {
+  demo: (locale: SupportedLocale) => ReactNode;
+  code: string;
+  dataCode?: string;
+};