Add support for JDD components
parent
8f04523a7a
commit
f3da755843
@ -0,0 +1,16 @@
|
||||
// DO NOT EDIT! This file is generated automaticaly with 'npm run generate-components'
|
||||
import { Registry } from "@sealcode/jdd";
|
||||
|
||||
export const registry = new Registry();
|
||||
|
||||
import { BeigeBox } from "./beige-box/beige-box.jdd.js";
|
||||
registry.add("beige-box", BeigeBox);
|
||||
|
||||
import { NiceBox } from "./nice-box/nice-box.jdd.js";
|
||||
registry.add("nice-box", NiceBox);
|
||||
|
||||
import { NicerBox } from "./nicer-box/nicer-box.jdd.js";
|
||||
registry.add("nicer-box", NicerBox);
|
||||
|
||||
import { SomeExampleForYouAll } from "./some-example-for-you-all/some-example-for-you-all.jdd.js";
|
||||
registry.add("some-example-for-you-all", SomeExampleForYouAll);
|
||||
@ -0,0 +1,33 @@
|
||||
import { FlatTemplatable, TempstreamJSX } from "tempstream";
|
||||
import {
|
||||
Component,
|
||||
ComponentArguments,
|
||||
ExtractStructuredComponentArgumentsValues,
|
||||
JDDContext,
|
||||
} from "@sealcode/jdd";
|
||||
|
||||
const component_arguments = {
|
||||
title: new ComponentArguments.ShortText(),
|
||||
content: new ComponentArguments.Markdown(),
|
||||
} as const;
|
||||
|
||||
export class NiceBox extends Component<typeof component_arguments> {
|
||||
getArguments() {
|
||||
return component_arguments;
|
||||
}
|
||||
|
||||
toHTML(
|
||||
{
|
||||
title,
|
||||
content,
|
||||
}: ExtractStructuredComponentArgumentsValues<typeof component_arguments>,
|
||||
{ render_markdown }: JDDContext
|
||||
): FlatTemplatable {
|
||||
return (
|
||||
<div class="nice-box">
|
||||
<h2>{title}</h2>
|
||||
<div>{render_markdown(content)}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,89 @@
|
||||
import { TempstreamJSX, Templatable } from "tempstream";
|
||||
import { BaseContext } from "koa";
|
||||
import { StatefulPage } from "@sealcode/sealgen";
|
||||
import html from "../html.js";
|
||||
import { registry } from "../jdd-components/components.js";
|
||||
import { render, simpleJDDContext } from "@sealcode/jdd";
|
||||
|
||||
export const actionName = "Components";
|
||||
|
||||
const actions = {
|
||||
add: (state: State, inputs: Record<string, string>) => {
|
||||
console.log({ inputs });
|
||||
return {
|
||||
...state,
|
||||
elements: [...state.elements, inputs.element_to_add || "new element"],
|
||||
};
|
||||
},
|
||||
remove: (state: State, _: unknown, index_to_remove: number) => {
|
||||
return {
|
||||
...state,
|
||||
elements: state.elements.filter((_, index) => index != index_to_remove),
|
||||
};
|
||||
},
|
||||
} as const;
|
||||
|
||||
type State = {
|
||||
component: string;
|
||||
args: Record<string, unknown>;
|
||||
};
|
||||
|
||||
export default new (class ComponentsPage extends StatefulPage<State, typeof actions> {
|
||||
actions = actions;
|
||||
|
||||
getInitialState() {
|
||||
return { component: "", args: {} };
|
||||
}
|
||||
|
||||
wrapInLayout(ctx: BaseContext, content: Templatable): Templatable {
|
||||
return html(ctx, "Components", content);
|
||||
}
|
||||
|
||||
render(ctx: BaseContext, state: State, inputs: Record<string, string>) {
|
||||
const all_components = registry.getAll();
|
||||
const component =
|
||||
registry.get(state.component) || Object.values(all_components)[0];
|
||||
return (
|
||||
<div>
|
||||
<div>{JSON.stringify(state)}</div>
|
||||
<select name="$.component" onchange="this.closest('form').submit()">
|
||||
{Object.entries(all_components).map(([name]) => (
|
||||
<option value={name} selected={name == state.component}>
|
||||
{name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<fieldset>
|
||||
<legend>Parameters</legend>
|
||||
{Object.entries(component.getArguments()).map(([arg_name, arg]) => (
|
||||
<div>
|
||||
<label>
|
||||
{arg_name}
|
||||
{arg.getTypeName() == "markdown" ? (
|
||||
<textarea name={`$.args[${arg_name}]`}>
|
||||
{state.args[arg_name] as string}
|
||||
</textarea>
|
||||
) : (
|
||||
<input
|
||||
type="text"
|
||||
name={`$.args[${arg_name}]`}
|
||||
value={state.args[arg_name] as string}
|
||||
/>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
<input type="submit" value="Preview" />
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Preview</legend>
|
||||
{render(
|
||||
registry,
|
||||
[{ component_name: state.component, args: state.args }],
|
||||
simpleJDDContext
|
||||
)}
|
||||
</fieldset>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})();
|
||||
@ -1,5 +1,6 @@
|
||||
// DO NOT EDIT! This file is generated automaticaly with npx sealgen generate-scss-includes
|
||||
|
||||
@import "../node_modules/@sealcode/sealgen/src/forms/forms.scss";
|
||||
@import "back/jdd-components/some-example-for-you-all/some-example-for-you-all.scss";
|
||||
@import "back/routes/common/ui/input.scss";
|
||||
@import "tables.scss";
|
||||
|
||||
Loading…
Reference in New Issue