Skip to content

Commit

Permalink
chore(docs): document schema editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@brianorwhatever
brianorwhatever committed Jan 30, 2025
1 parent 2ed972b commit 4bc93cb
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 118 deletions.
3 changes: 3 additions & 0 deletions src/docs/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { AccordionPage } from "./pages/components/AccordionPage";
import { CodeEditorPage } from "./pages/components/CodeEditorPage";
import { FeaturesPage } from "./pages/FeaturesPage";
import { Toaster } from 'react-hot-toast';
import { SchemaEditorPage } from "./pages/features/SchemaEditorPage";

export const App = () => {
const [currentPage, setCurrentPage] = React.useState(() => {
Expand Down Expand Up @@ -115,6 +116,8 @@ export const App = () => {
return <AccordionPage />;
case "code-editor":
return <CodeEditorPage />;
case "schema-editor":
return <SchemaEditorPage />;
default:
return <GettingStartedPage />;
}
Expand Down
54 changes: 34 additions & 20 deletions src/docs/components/Navigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@ export const Navigation: React.FC<NavigationProps> = ({ currentPage, onNavigate
{ id: "features", label: "Features" },
],
},
{
title: "Features",
items: [
{ id: "schema-editor", label: "Schema Editor" },
],
},
{
title: "Layout",
items: [
Expand All @@ -45,7 +51,7 @@ export const Navigation: React.FC<NavigationProps> = ({ currentPage, onNavigate
{ id: "table", label: "Table" },
{ id: "tooltip", label: "Tooltip" },
{ id: "accordion", label: "Accordion" },
{ id: "code-editor", label: "Code Editor" },
{ id: "code-editor", label: "Code Editor" }
],
},
{
Expand Down Expand Up @@ -76,11 +82,14 @@ export const Navigation: React.FC<NavigationProps> = ({ currentPage, onNavigate

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

const filterItems = (items: Array<{ id: string; label: string }>) => {
const filterItems = (items: Array<{ id: string; label: string } | { title: string; href: string }>) => {
if (!searchQuery) return items;
return items.filter(item =>
item.label.toLowerCase().includes(searchQuery.toLowerCase())
);
return items.filter(item => {
if ('label' in item) {
return item.label.toLowerCase().includes(searchQuery.toLowerCase());
}
return item.title.toLowerCase().includes(searchQuery.toLowerCase());
});
};

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

return (
<ul className="space-y-1 py-1">
{filteredItems.map((item) => (
<li key={item.id}>
<button
onClick={() => onNavigate(item.id)}
className={cn(
"text-sm w-full text-left px-3 py-1.5 rounded-md transition-all duration-200",
currentPage === item.id
? "bg-blue-500/10 text-blue-400 font-medium"
: "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
)}
>
{item.label}
</button>
</li>
))}
{filteredItems.map((item) => {
const id = 'id' in item ? item.id : item.href;
const label = 'label' in item ? item.label : item.title;

return (
<li key={id}>
<button
onClick={() => onNavigate(id)}
className={cn(
"text-sm w-full text-left px-3 py-1.5 rounded-md transition-all duration-200",
currentPage === id
? "bg-blue-500/10 text-blue-400 font-medium"
: "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
)}
>
{label}
</button>
</li>
);
})}
</ul>
);
};
Expand Down
141 changes: 43 additions & 98 deletions src/docs/pages/features/SchemaEditorPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,123 +1,68 @@
import * as React from "react";
import { ComponentDemo } from "../../components/ComponentDemo";
import { Title } from "../../../components/typography/Title";
import { Card } from "../../../components/card/Card";
import { Code } from "../../../components/typography/Code";
import { PropsTable } from "../../components/PropsTable";
import { SchemaEditor } from "../../../components/editor/SchemaEditor";

export const SchemaEditorPage = () => {
const schemaEditorProps = [
{
name: "initialData",
type: "FormData",
description: "Initial schema data to populate the editor",
},
{
name: "onSubmit",
type: "(schema: JsonSchema) => void",
description: "Callback when schema is submitted",
},
{
name: "onValidationChange",
type: "(isValid: boolean) => void",
description: "Callback when validation status changes",
},
];

return (
<div className="space-y-12">
<div>
<Title level={1}>Schema Editor</Title>
<p className="mt-2 text-gray-400">
A powerful visual editor for creating and managing Verifiable Credential schemas.
A visual editor for creating and managing JSON schemas.
</p>
</div>

<Card>
<Card.Header>
<Title level={2}>Overview</Title>
</Card.Header>
<Card.Content>
<p className="text-gray-400">
The Schema Editor provides both a form-based and JSON editor interface for creating
JSON-LD compatible credential templates. It includes real-time preview and validation
to ensure your schemas are compatible with Verifiable Credentials standards.
</p>
</Card.Content>
</Card>

<Card>
<Card.Header>
<Title level={2}>Installation</Title>
</Card.Header>
<Card.Content>
<div className="space-y-2">
<p className="text-gray-400 mb-2">
The Schema Editor is included in the main package:
</p>
<Code>
npm install av1-c
</Code>
</div>
</Card.Content>
</Card>

<Card>
<Card.Header>
<Title level={2}>Basic Usage</Title>
</Card.Header>
<Card.Content>
<section>
<Title level={3}>Usage</Title>
<div className="mt-4">
<ComponentDemo
code={`import { SchemaEditor } from 'av1-c';
function MySchemaBuilder() {
return (
<div className="container mx-auto">
<SchemaEditor />
</div>
<SchemaEditor
onSubmit={(schema) => {
console.log('Schema created:', schema);
}}
/>
);
}`}
/>
</Card.Content>
</Card>

<Card>
<Card.Header>
<Title level={2}>Features</Title>
</Card.Header>
<Card.Content>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-4">
<h3 className="text-lg font-semibold text-gray-200">Field Types</h3>
<ul className="list-disc list-inside text-gray-400 space-y-2">
<li>String</li>
<li>Number</li>
<li>Boolean</li>
<li>Object</li>
<li>Array</li>
</ul>
</div>
<div className="space-y-4">
<h3 className="text-lg font-semibold text-gray-200">Capabilities</h3>
<ul className="list-disc list-inside text-gray-400 space-y-2">
<li>Visual form builder</li>
<li>JSON-LD context management</li>
<li>Live preview with normalization</li>
<li>Dark mode support</li>
<li>TypeScript integration</li>
</ul>
>
<div className="w-full">
<SchemaEditor
onSubmit={(schema) => console.log('Schema created:', schema)}
/>
</div>
</div>
</Card.Content>
</Card>
</ComponentDemo>
</div>
</section>

<Card>
<Card.Header>
<Title level={2}>Advanced Features</Title>
</Card.Header>
<Card.Content>
<div className="space-y-4">
<h3 className="text-lg font-semibold text-gray-200">Field Properties</h3>
<ul className="list-disc list-inside text-gray-400 space-y-2">
<li>Nested objects and arrays</li>
<li>Field descriptions and comments</li>
<li>Required field validation</li>
<li>Example values</li>
<li>JSON-LD context mapping</li>
</ul>

<div className="mt-6 p-4 bg-blue-500/10 border border-blue-500/30 rounded">
<h4 className="text-blue-300 font-medium mb-2">Pro Tip</h4>
<p className="text-gray-400">
Use the JSON-LD normalization preview to ensure your credential template is compatible with
Verifiable Credentials standards. The preview will show a green indicator when your schema
is valid and can be properly normalized.
</p>
</div>
</div>
</Card.Content>
</Card>
<section>
<Title level={3}>Properties</Title>
<div className="mt-4">
<PropsTable props={schemaEditorProps} />
</div>
</section>
</div>
);
};

0 comments on commit 4bc93cb

Please sign in to comment.