Docs poc with embedded stackblitz editor and component preview. Code …

…fragment has copy clip.

.github/workflows/docs.yml

@@ -4,7 +4,7 @@ name: Deploy static content to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches: ['main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -18,7 +18,7 @@ permissions:
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 
 jobs:

package.json

@@ -12,6 +12,7 @@
 	},
 	"dependencies": {
 		"@gem-mine/docsify-react-live": "^1.7.1",
+		"@stackblitz/sdk": "^1.11.0",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
 		"lucide-react": "^0.454.0",

src/docs/README.md

@@ -1 +1 @@
-# Bless UI Docs
+# Bless UI Docs

src/docs/components/examples/input.tsx

@@ -0,0 +1,17 @@
+import { Input } from '@/components/ui'
+
+const DemoInput = () => {
+	return (
+		/// [demo_input]
+		<Input placeholder="Email" type="email" />
+		/// [demo_input]
+	)
+}
+
+export function Demo() {
+	return (
+		<div className="flex w-[600px] h-[200px] p-4 my-4">
+			<DemoInput />
+		</div>
+	)
+}

src/docs/components/input.md

@@ -1,5 +1,14 @@
 # Input
 
+<!-- [input.tsx](examples/input.tsx ':include :type=code :fragment=demo_input') -->
 
+```tsx
+  <TextField id="outlined-basic" label="Outlined" variant="outlined" />
+  <TextField id="filled-basic" label="Filled" variant="filled" />
+  <TextField id="standard-basic" label="Standard" variant="standard" />
+```
+
+<iframe src="https://stackblitz.com/edit/react-ctfd93?embed=1&file=Demo.tsx&hideExplorer=1&hideNavigation=1&view=editor" style="width:100%; height: 400px; border:0; border-radius: 4px; overflow:hidden;"></iframe>
+
+<iframe src="https://react-ctfd93.stackblitz.io" style="width:100%; height: 400px; border:0; border-radius: 4px; overflow:hidden;"></iframe>
 
-<iframe src="https://stackblitz.com/edit/react-starter-eval-dwegeb?embed=1&file=src%2FApp.js" style="width:100%; height: 400px; border:0; border-radius: 4px; overflow:hidden;"></iframe>

src/docs/index.html

@@ -26,12 +26,18 @@
 					noData: 'No Results!',
 					depth: 6,
 					hideOtherSidebarContent: false // whether or not to hide other sidebar content
+				},
+				copyCode: {
+					buttonText: 'Copy',
+					errorText: 'Error',
+					successText: 'Copied'
 				}
 			}
 		</script>
 		<!-- Docsify v4 -->
 		<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
 		<script src="//cdn.jsdelivr.net/npm/[email protected]/components/prism-jsx.min.js"></script>
 		<script src="//cdn.jsdelivr.net/npm/[email protected]/components/prism-typescript.min.js"></script>
+		<script src="https://unpkg.com/docsify-copy-code@2"></script>
 	</body>
 </html>