docs: update starter example with api

examples/starter/.config/buildtime.js

@@ -4,7 +4,8 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
 
 module.exports = {
   siteRoot: '/root/',
-  stories: ['../src/docs/*.@(mdx|tsx)'],
+  stories: ['../src/docs/*.mdx', '../src/**/*.docs.@(tsx|jsx|ts|js)'],
+
   webpack: (config = {}, options = {}) => {
     return {
       ...config,

examples/starter/src/api/sum/index.ts

@@ -0,0 +1 @@
+export * from './sum';

examples/starter/src/api/sum/sum.docs.ts

@@ -0,0 +1,17 @@
+import { sum } from './sum';
+
+const doc = {
+  title: 'Library/api/sum',
+  order: 1,
+  component: sum,
+};
+
+export const overview = ({ a, b }: { a: number; b: number }) => {
+  return sum(a, b);
+};
+overview.controls = {
+  a: 1,
+  b: 2,
+};
+
+export default doc;

examples/starter/src/api/sum/sum.ts

@@ -0,0 +1,7 @@
+/**
+ * sum api function
+ * @param a first parameter to add
+ * @param b second parameter to add
+ * @returns the sum of the two parameters
+ */
+export const sum = (a: number, b: number): number => a + b;

examples/starter/src/components/Button/Button.docs.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Document, Example } from '@component-controls/core';
+import { useStore } from '@component-controls/store';
+import { Button, ButtonProps } from './Button';
+
+const doc: Document =  {
+  title: 'Library/Components/Button',
+  order: 1,
+  component: Button
+};
+
+export const overview: Example<ButtonProps> = (props) => {
+  const store = useStore();
+  return <Button {...props}>{store.config.title}</Button>;
+};
+
+export default doc;

examples/starter/src/components/Button/index.ts

@@ -0,0 +1 @@
+export * from './Button';

examples/starter/src/components/Spinner/Spinner.docs.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useStore } from '@component-controls/store';
+import { Spinner } from './Spinner';
+
+const doc = {
+  title: 'Library/Components/Spinner',
+  order: 1,
+  component: Spinner,
+};
+
+export const overview = props => {
+  const store = useStore();
+  return <Spinner {...props}>{store.config.title}</Spinner>;
+};
+
+export default doc;

examples/starter/src/components/Spinner/index.js

@@ -0,0 +1 @@
+export * from './Spinner';

examples/starter/src/docs/external-component.stories.tsx → examples/starter/src/components/external/external-component.docs.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button } from 'theme-ui';
 
 export default {
-  title: 'Library/Components/Button',
+  title: 'Library/Components/External',
   order: 2,
   component: Button,
 };

examples/starter/tsconfig.json

@@ -16,5 +16,10 @@
     "resolveJsonModule": true
   },
   "exclude": ["node_modules", "public", ".cache"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "src/components/Spinner/Spinner.docs.jsx"
+  ]
 }