Docs

.gitignore

@@ -1,6 +1,7 @@
 # Project
 **/i18n/messages/
 toolkit/vocs/pages/
+library/metadata.json
 output/
 dist/
 gen/

.vscode/settings.json

@@ -5,6 +5,7 @@
     "guides": "content",
     "builder": "robot",
     "native": "target",
+    "platforms": "target",
     "output": "dist",
     "rive": "animation",
     "vocs": "vue",

design/components/layout/card/Card.docs.mdx

@@ -0,0 +1,31 @@
+:::import:::
+import {Button} from 'vocs/components';
+
+# :::name:::
+
+> :::desc:::
+
+:::example
+
+<Card
+  header="Test"
+  thumbnail={undefined}
+/>
+
+:::
+
+```tsx twoslash
+import React from 'react';
+// ---cut---
+// @log: ↓ Import the component
+:::import:::
+
+// @log: ↓ Try the example
+:::example:::
+```
+
+<Button href=":::storybook:::">Storybook</Button> 
+
+## Props
+
+:::props:::

design/components/layout/card/Card.tsx

@@ -0,0 +1,87 @@
+import {useStyles, createStyleSheet} from 'react-native-unistyles';
+import {View, Text} from 'react-native';
+
+export interface CardProps {
+  /** The card header */
+  header: string,
+  /** The card thumbnail */
+  thumbnail?: JSX.Element,
+  /** An identifier used for testing */
+  testID?: string,
+}
+
+/**
+ * A simple card block component
+ * */
+export function Card(props: CardProps) {
+  const {styles} = useStyles(stylesheet);
+
+  return (
+    <View style={styles.root} testID={props.testID ?? "2218:99"}>
+      {props.thumbnail}
+      <View style={styles.contents} testID="2218:101">
+        <Text style={styles.header} testID="2218:102">
+          {`Header`}
+        </Text>
+        <Text style={styles.body} testID="2218:103">
+          {`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...`}
+        </Text>
+        <Text style={styles.footer} testID="2218:116">
+          {`Footer`}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const stylesheet = createStyleSheet(theme => ({
+  root: {
+    flexDirection: 'row',
+    padding: 16,
+    alignItems: 'flex-start',
+    rowGap: 16,
+    columnGap: 16,
+    alignSelf: 'stretch',
+    borderRadius: 6,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.popover,
+  },
+  header: {
+    color: theme.colors.cardForeground,
+    fontFamily: 'Inter',
+    fontSize: 14,
+    fontStyle: 'normal',
+    fontWeight: '600',
+    lineHeight: 20,
+  },
+  body: {
+    alignSelf: 'stretch',
+    color: theme.colors.cardForeground,
+    fontFamily: 'Inter',
+    fontSize: 14,
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: 20,
+  },
+  footer: {
+    alignSelf: 'stretch',
+    color: theme.colors.mutedForeground,
+    fontFamily: 'Inter',
+    fontSize: 12,
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: 16,
+  },
+  contents: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    rowGap: 4,
+    columnGap: 4,
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 0,
+    alignSelf: 'stretch',
+  },
+}));

design/components/layout/card/index.ts

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

design/index.ts

@@ -1 +1 @@
-export {}
+export * from './components/layout/card';

design/package.json

@@ -14,7 +14,6 @@
     "@lingui/core": "^4.10.0",
     "@lingui/macro": "^4.10.0",
     "@lingui/react": "^4.10.0",
-    "design": "workspace:*",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
     "react-exo": "workspace:*",

library/.npmignore

@@ -2,4 +2,6 @@ src/
 plugins/
 node_modules/
 tsconfig.json
+typedoc.json
+metadata.json
 vite.config.mts

library/package.json

@@ -3,7 +3,8 @@
   "version": "0.12.0",
   "type": "module",
   "scripts": {
-    "build": "exo build"
+    "build": "exo build",
+    "typedoc": "typedoc"
   },
   "exports": {
     ".": {
@@ -227,6 +228,7 @@
     "react-native-web": "^0.19.10",
     "react-native-web-linear-gradient": "^1.1.2",
     "react-native-windows": "^0.73.11",
-    "rive-react-native": "^7.0.0"
+    "rive-react-native": "^7.0.0",
+    "typedoc": "^0.25.13"
   }
 }

library/src/assets/icon/Icon.docs.mdx

@@ -3,13 +3,15 @@ import {Button} from 'vocs/components';
 
 # Icon Asset
 
-> A component that can display over 200,000 icons via [Iconify](https://iconify.design)
+> :::summary:::
 
+:::example
 <Icon 
   name="ph:cat"
   color="#666"
   size={48}
 />
+:::
 
 ```tsx twoslash
 import React from 'react';
@@ -18,15 +20,15 @@ import React from 'react';
 import {Icon} from 'react-exo/icon';
 
 // @log: ↓ Try the example
-<Icon
-  name="ph:cat"
-  color="#666"
-  size={48}
-/>
+:::example:::
 ```
 
 {/* <Button href="https://exo.fig.run/?path=/docs/primitives-assets-icon">Storybook</Button> */}
 
+## Props
+
+:::props:::
+
 ## Platform Support
 
 :::info

library/src/widgets/slider/Slider.tsx

@@ -6,7 +6,9 @@ import * as S from '@radix-ui/react-slider';
 import type {SliderComponent, SliderProps} from './Slider.interface';
 import './Slider.css';
 
-/** A component that allows selection of a value within a range */
+/**
+ * A component that allows selection of a value within a range
+ */
 export const Slider: SliderComponent = (props: SliderProps) => {
   const value = [props.value || 0];
 

library/typedoc.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPoints": ["./src/index.ts"],
+  "json": "./metadata.json",
+  "emit": "docs",
+  "pretty": true,
+  "categorizeByGroup": false,
+  "skipErrorChecking": true,
+  "excludeProtected": true,
+  "excludePrivate": true,
+  "excludeInternal": true,
+  "excludeExternals": true,
+  "excludeReferences": false,
+  "excludeNotDocumented": false,
+}