Skip to content

Commit 4bc93cb

Browse files
brianorwhateverbrianorwhatever
committed
chore(docs): document schema editor
1 parent 2ed972b commit 4bc93cb

File tree

3 files changed

+80
-118
lines changed

3 files changed

+80
-118
lines changed

‎src/docs/App.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { AccordionPage } from "./pages/components/AccordionPage";
3131
import { CodeEditorPage } from "./pages/components/CodeEditorPage";
3232
import { FeaturesPage } from "./pages/FeaturesPage";
3333
import { Toaster } from 'react-hot-toast';
34+
import { SchemaEditorPage } from "./pages/features/SchemaEditorPage";
3435

3536
export const App = () => {
3637
const [currentPage, setCurrentPage] = React.useState(() => {
@@ -115,6 +116,8 @@ export const App = () => {
115116
return <AccordionPage />;
116117
case "code-editor":
117118
return <CodeEditorPage />;
119+
case "schema-editor":
120+
return <SchemaEditorPage />;
118121
default:
119122
return <GettingStartedPage />;
120123
}

‎src/docs/components/Navigation.tsx‎

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@ export const Navigation: React.FC<NavigationProps> = ({ currentPage, onNavigate
2020
{ id: "features", label: "Features" },
2121
],
2222
},
23+
{
24+
title: "Features",
25+
items: [
26+
{ id: "schema-editor", label: "Schema Editor" },
27+
],
28+
},
2329
{
2430
title: "Layout",
2531
items: [
@@ -45,7 +51,7 @@ export const Navigation: React.FC<NavigationProps> = ({ currentPage, onNavigate
4551
{ id: "table", label: "Table" },
4652
{ id: "tooltip", label: "Tooltip" },
4753
{ id: "accordion", label: "Accordion" },
48-
{ id: "code-editor", label: "Code Editor" },
54+
{ id: "code-editor", label: "Code Editor" }
4955
],
5056
},
5157
{
@@ -76,11 +82,14 @@ export const Navigation: React.FC<NavigationProps> = ({ currentPage, onNavigate
7682

7783
const [searchQuery, setSearchQuery] = React.useState("");
7884

79-
const filterItems = (items: Array<{ id: string; label: string }>) => {
85+
const filterItems = (items: Array<{ id: string; label: string } | { title: string; href: string }>) => {
8086
if (!searchQuery) return items;
81-
return items.filter(item =>
82-
item.label.toLowerCase().includes(searchQuery.toLowerCase())
83-
);
87+
return items.filter(item => {
88+
if ('label' in item) {
89+
return item.label.toLowerCase().includes(searchQuery.toLowerCase());
90+
}
91+
return item.title.toLowerCase().includes(searchQuery.toLowerCase());
92+
});
8493
};
8594

8695
const renderSection = (section: typeof sections[0]) => {
@@ -89,21 +98,26 @@ export const Navigation: React.FC<NavigationProps> = ({ currentPage, onNavigate
8998

9099
return (
91100
<ul className="space-y-1 py-1">
92-
{filteredItems.map((item) => (
93-
<li key={item.id}>
94-
<button
95-
onClick={() => onNavigate(item.id)}
96-
className={cn(
97-
"text-sm w-full text-left px-3 py-1.5 rounded-md transition-all duration-200",
98-
currentPage === item.id
99-
? "bg-blue-500/10 text-blue-400 font-medium"
100-
: "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
101-
)}
102-
>
103-
{item.label}
104-
</button>
105-
</li>
106-
))}
101+
{filteredItems.map((item) => {
102+
const id = 'id' in item ? item.id : item.href;
103+
const label = 'label' in item ? item.label : item.title;
104+
105+
return (
106+
<li key={id}>
107+
<button
108+
onClick={() => onNavigate(id)}
109+
className={cn(
110+
"text-sm w-full text-left px-3 py-1.5 rounded-md transition-all duration-200",
111+
currentPage === id
112+
? "bg-blue-500/10 text-blue-400 font-medium"
113+
: "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
114+
)}
115+
>
116+
{label}
117+
</button>
118+
</li>
119+
);
120+
})}
107121
</ul>
108122
);
109123
};

‎src/docs/pages/features/SchemaEditorPage.tsx‎

Lines changed: 43 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,68 @@
11
import * as React from "react";
22
import { ComponentDemo } from "../../components/ComponentDemo";
33
import { Title } from "../../../components/typography/Title";
4-
import { Card } from "../../../components/card/Card";
5-
import { Code } from "../../../components/typography/Code";
4+
import { PropsTable } from "../../components/PropsTable";
5+
import { SchemaEditor } from "../../../components/editor/SchemaEditor";
66

77
export const SchemaEditorPage = () => {
8+
const schemaEditorProps = [
9+
{
10+
name: "initialData",
11+
type: "FormData",
12+
description: "Initial schema data to populate the editor",
13+
},
14+
{
15+
name: "onSubmit",
16+
type: "(schema: JsonSchema) => void",
17+
description: "Callback when schema is submitted",
18+
},
19+
{
20+
name: "onValidationChange",
21+
type: "(isValid: boolean) => void",
22+
description: "Callback when validation status changes",
23+
},
24+
];
25+
826
return (
927
<div className="space-y-12">
1028
<div>
1129
<Title level={1}>Schema Editor</Title>
1230
<p className="mt-2 text-gray-400">
13-
A powerful visual editor for creating and managing Verifiable Credential schemas.
31+
A visual editor for creating and managing JSON schemas.
1432
</p>
1533
</div>
1634

17-
<Card>
18-
<Card.Header>
19-
<Title level={2}>Overview</Title>
20-
</Card.Header>
21-
<Card.Content>
22-
<p className="text-gray-400">
23-
The Schema Editor provides both a form-based and JSON editor interface for creating
24-
JSON-LD compatible credential templates. It includes real-time preview and validation
25-
to ensure your schemas are compatible with Verifiable Credentials standards.
26-
</p>
27-
</Card.Content>
28-
</Card>
29-
30-
<Card>
31-
<Card.Header>
32-
<Title level={2}>Installation</Title>
33-
</Card.Header>
34-
<Card.Content>
35-
<div className="space-y-2">
36-
<p className="text-gray-400 mb-2">
37-
The Schema Editor is included in the main package:
38-
</p>
39-
<Code>
40-
npm install av1-c
41-
</Code>
42-
</div>
43-
</Card.Content>
44-
</Card>
45-
46-
<Card>
47-
<Card.Header>
48-
<Title level={2}>Basic Usage</Title>
49-
</Card.Header>
50-
<Card.Content>
35+
<section>
36+
<Title level={3}>Usage</Title>
37+
<div className="mt-4">
5138
<ComponentDemo
5239
code={`import { SchemaEditor } from 'av1-c';
5340
5441
function MySchemaBuilder() {
5542
return (
56-
<div className="container mx-auto">
57-
<SchemaEditor />
58-
</div>
43+
<SchemaEditor
44+
onSubmit={(schema) => {
45+
console.log('Schema created:', schema);
46+
}}
47+
/>
5948
);
6049
}`}
61-
/>
62-
</Card.Content>
63-
</Card>
64-
65-
<Card>
66-
<Card.Header>
67-
<Title level={2}>Features</Title>
68-
</Card.Header>
69-
<Card.Content>
70-
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
71-
<div className="space-y-4">
72-
<h3 className="text-lg font-semibold text-gray-200">Field Types</h3>
73-
<ul className="list-disc list-inside text-gray-400 space-y-2">
74-
<li>String</li>
75-
<li>Number</li>
76-
<li>Boolean</li>
77-
<li>Object</li>
78-
<li>Array</li>
79-
</ul>
80-
</div>
81-
<div className="space-y-4">
82-
<h3 className="text-lg font-semibold text-gray-200">Capabilities</h3>
83-
<ul className="list-disc list-inside text-gray-400 space-y-2">
84-
<li>Visual form builder</li>
85-
<li>JSON-LD context management</li>
86-
<li>Live preview with normalization</li>
87-
<li>Dark mode support</li>
88-
<li>TypeScript integration</li>
89-
</ul>
50+
>
51+
<div className="w-full">
52+
<SchemaEditor
53+
onSubmit={(schema) => console.log('Schema created:', schema)}
54+
/>
9055
</div>
91-
</div>
92-
</Card.Content>
93-
</Card>
56+
</ComponentDemo>
57+
</div>
58+
</section>
9459

95-
<Card>
96-
<Card.Header>
97-
<Title level={2}>Advanced Features</Title>
98-
</Card.Header>
99-
<Card.Content>
100-
<div className="space-y-4">
101-
<h3 className="text-lg font-semibold text-gray-200">Field Properties</h3>
102-
<ul className="list-disc list-inside text-gray-400 space-y-2">
103-
<li>Nested objects and arrays</li>
104-
<li>Field descriptions and comments</li>
105-
<li>Required field validation</li>
106-
<li>Example values</li>
107-
<li>JSON-LD context mapping</li>
108-
</ul>
109-
110-
<div className="mt-6 p-4 bg-blue-500/10 border border-blue-500/30 rounded">
111-
<h4 className="text-blue-300 font-medium mb-2">Pro Tip</h4>
112-
<p className="text-gray-400">
113-
Use the JSON-LD normalization preview to ensure your credential template is compatible with
114-
Verifiable Credentials standards. The preview will show a green indicator when your schema
115-
is valid and can be properly normalized.
116-
</p>
117-
</div>
118-
</div>
119-
</Card.Content>
120-
</Card>
60+
<section>
61+
<Title level={3}>Properties</Title>
62+
<div className="mt-4">
63+
<PropsTable props={schemaEditorProps} />
64+
</div>
65+
</section>
12166
</div>
12267
);
12368
};

0 commit comments

Comments
 (0)