element-book 26.12.0 → 26.12.1

package/src/ui/elements/entry-display/book-page/book-page-controls.element.ts

@@ -1,219 +0,0 @@
-import {check} from '@augment-vir/assert';
-import {type Values} from '@augment-vir/common';
-import {extractEventTarget} from '@augment-vir/web';
-import {css, defineElementEvent, html, listen, renderIf} from 'element-vir';
-import {Options24Icon, ViraIcon, ViraInput} from 'vira';
-import {
-    type BookPageControl,
-    type BookPageControlInit,
-    BookPageControlType,
-    type BookPageControlsValues,
-    isControlInitType,
-} from '../../../../data/book-entry/book-page/book-page-controls.js';
-import {type BookPage} from '../../../../data/book-entry/book-page/book-page.js';
-import {colorThemeCssVars} from '../../../color-theme/color-theme.js';
-import {defineBookElement} from '../../define-book-element.js';
-
-export const BookPageControls = defineBookElement<{
-    config: BookPage['controls'];
-    /**
-     * If an object (or Record) is given for this input, then each key of the object must correspond
-     * to one of the controls from the input config and the value for each key will be the
-     * breadcrumbs for that specific config.
-     */
-    fullUrlBreadcrumbs: ReadonlyArray<string> | Record<string, ReadonlyArray<string>>;
-    currentValues: Record<string, BookPageControl['initValue']>;
-}>()({
-    tagName: 'book-page-controls',
-    events: {
-        controlValueChange: defineElementEvent<{
-            fullUrlBreadcrumbs: ReadonlyArray<string>;
-            newValues: BookPageControlsValues;
-        }>(),
-    },
-    hostClasses: {
-        'book-page-controls-has-controls': ({inputs}) => !!Object.keys(inputs.config).length,
-    },
-    styles: ({hostClasses}) => css`
-        :host {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: flex-end;
-            padding-left: 36px;
-            align-content: flex-start;
-            gap: 16px;
-            row-gap: 10px;
-            color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
-        }
-
-        ${hostClasses['book-page-controls-has-controls'].selector} {
-            margin-top: 8px;
-        }
-
-        .control-wrapper {
-            position: relative;
-            display: flex;
-            gap: 4px;
-            flex-direction: column;
-        }
-
-        .error {
-            font-weight: bold;
-            color: red;
-        }
-
-        ${ViraInput} {
-            height: 24px;
-            max-width: 128px;
-        }
-
-        ${ViraIcon}.options-icon {
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            margin-left: -32px;
-        }
-    `,
-    render({inputs, dispatch, events}) {
-        if (!Object.entries(inputs.config).length) {
-            return '';
-        }
-
-        return Object.entries(inputs.config).map(
-            (
-                [
-                    controlName,
-                    controlInit,
-                ],
-                index,
-            ) => {
-                if (controlInit.controlType === BookPageControlType.Hidden) {
-                    return '';
-                }
-
-                const controlInputTemplate = createControlInput(
-                    inputs.currentValues[controlName],
-                    controlInit,
-                    (newValue) => {
-                        const fullUrlBreadcrumbs = check.isArray(inputs.fullUrlBreadcrumbs)
-                            ? inputs.fullUrlBreadcrumbs
-                            : inputs.fullUrlBreadcrumbs[controlName];
-
-                        if (!fullUrlBreadcrumbs) {
-                            throw new Error(
-                                `Failed to find breadcrumbs from given control name: '${controlName}'`,
-                            );
-                        }
-
-                        dispatch(
-                            new events.controlValueChange({
-                                fullUrlBreadcrumbs,
-                                newValues: {
-                                    ...inputs.currentValues,
-                                    [controlName]: newValue,
-                                },
-                            }),
-                        );
-                    },
-                );
-                return html`
-                    <div class="control-wrapper">
-                        ${renderIf(
-                            index === 0,
-                            html`
-                                <${ViraIcon.assign({icon: Options24Icon})}
-                                    class="options-icon"
-                                ></${ViraIcon}>
-                            `,
-                        )}
-                        <label class="control-wrapper">
-                            <span>${controlName}</span>
-                            ${controlInputTemplate}
-                        </label>
-                    </div>
-                `;
-            },
-        );
-    },
-});
-
-function createControlInput(
-    value: string,
-    controlInit: BookPageControlInit<any>,
-    valueChange: (newValue: Values<BookPageControlsValues>) => void,
-) {
-    if (isControlInitType(controlInit, BookPageControlType.Hidden)) {
-        return '';
-    } else if (isControlInitType(controlInit, BookPageControlType.Checkbox)) {
-        return html`
-            <input
-                type="checkbox"
-                ?checked=${value}
-                ${listen('input', (event) => {
-                    const inputElement = extractEventTarget(event, HTMLInputElement);
-
-                    valueChange(inputElement.checked);
-                })}
-            />
-        `;
-    } else if (isControlInitType(controlInit, BookPageControlType.Color)) {
-        return html`
-            <input
-                type="color"
-                .value=${value}
-                ${listen('input', (event) => {
-                    const inputElement = extractEventTarget(event, HTMLInputElement);
-
-                    valueChange(inputElement.value);
-                })}
-            />
-        `;
-    } else if (isControlInitType(controlInit, BookPageControlType.Text)) {
-        return html`
-            <${ViraInput.assign({
-                value,
-                showClearButton: true,
-                disableBrowserHelps: true,
-            })}
-                ${listen(ViraInput.events.valueChange, (event) => {
-                    valueChange(event.detail);
-                })}
-            ></${ViraInput}>
-        `;
-    } else if (isControlInitType(controlInit, BookPageControlType.Number)) {
-        return html`
-            <input
-                type="number"
-                .value=${value}
-                ${listen('input', (event) => {
-                    const inputElement = extractEventTarget(event, HTMLInputElement);
-
-                    valueChange(inputElement.value);
-                })}
-            />
-        `;
-    } else if (isControlInitType(controlInit, BookPageControlType.Dropdown)) {
-        return html`
-            <select
-                .value=${value}
-                ${listen('input', (event) => {
-                    const selectElement = extractEventTarget(event, HTMLSelectElement);
-
-                    valueChange(selectElement.value);
-                })}
-            >
-                ${controlInit.options.map((optionLabel) => {
-                    return html`
-                        <option ?selected=${optionLabel === value} value=${optionLabel}>
-                            ${optionLabel}
-                        </option>
-                    `;
-                })}
-            </select>
-        `;
-    } else {
-        return html`
-            <p class="error">${controlInit.controlType} controls are not implemented yet.</p>
-        `;
-    }
-}

package/src/ui/elements/entry-display/book-page/book-page-wrapper.element.ts

@@ -1,105 +0,0 @@
-import {combineErrors} from '@augment-vir/common';
-import {css, html} from 'element-vir';
-import {type BookEntryType} from '../../../../data/book-entry/book-entry-type.js';
-import {
-    type ControlsWrapper,
-    traverseControls,
-} from '../../../../data/book-entry/book-page/controls-wrapper.js';
-import {type BookTreeNode} from '../../../../data/book-tree/book-tree-node.js';
-import {type BookRouter} from '../../../../routing/book-router.js';
-import {BookMainRoute, type ValidBookPaths} from '../../../../routing/book-routing.js';
-import {BookError} from '../../common/book-error.element.js';
-import {BookRouteLink} from '../../common/book-route-link.element.js';
-import {defineBookElement} from '../../define-book-element.js';
-import {BookEntryDescription} from '../book-entry-description.element.js';
-import {BookPageControls} from './book-page-controls.element.js';
-
-export const BookPageWrapper = defineBookElement<{
-    isTopLevel: boolean;
-    pageNode: BookTreeNode<BookEntryType.Page>;
-    router: BookRouter | undefined;
-    controls: ControlsWrapper;
-}>()({
-    tagName: 'book-page-wrapper',
-    styles: css`
-        :host {
-            display: block;
-        }
-
-        h2,
-        h3 {
-            margin: 0;
-            padding: 0;
-            font-size: 1.5em;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .page-header .title-group {
-            align-items: flex-start;
-            display: flex;
-            flex-direction: column;
-        }
-
-        ${BookRouteLink} {
-            display: inline-block;
-        }
-    `,
-    render({inputs}) {
-        const titleTemplate = inputs.isTopLevel
-            ? html`
-                  <h2 class="header-with-icon">${inputs.pageNode.entry.title}</h2>
-              `
-            : html`
-                  <h3 class="header-with-icon">${inputs.pageNode.entry.title}</h3>
-              `;
-
-        const linkPaths: ValidBookPaths = [
-            BookMainRoute.Book,
-            ...inputs.pageNode.fullUrlBreadcrumbs,
-        ];
-
-        const error = inputs.pageNode.entry.errors.length
-            ? combineErrors(inputs.pageNode.entry.errors)
-            : undefined;
-        if (error) {
-            console.error(error);
-        }
-
-        return html`
-            <div class="page-header block-entry">
-                <div class="title-group">
-                    <${BookRouteLink.assign({
-                        route: {
-                            paths: linkPaths,
-                            hash: undefined,
-                            search: undefined,
-                        },
-                        router: inputs.router,
-                    })}>
-                        ${titleTemplate}
-                    </${BookRouteLink}>
-                    ${error
-                        ? html`
-                              <${BookError.assign({message: error.message})}></${BookError}>
-                          `
-                        : html`
-                              <${BookEntryDescription.assign({
-                                  descriptionParagraphs:
-                                      inputs.pageNode.entry.descriptionParagraphs,
-                              })}></${BookEntryDescription}>
-                              <${BookPageControls.assign({
-                                  config: inputs.pageNode.entry.controls,
-                                  currentValues: traverseControls(
-                                      inputs.controls,
-                                      inputs.pageNode.fullUrlBreadcrumbs,
-                                  ),
-                                  fullUrlBreadcrumbs: inputs.pageNode.fullUrlBreadcrumbs,
-                              })}></${BookPageControls}>
-                          `}
-                </div>
-            </div>
-        `;
-    },
-});

package/src/ui/elements/entry-display/element-example/book-element-example-controls.element.ts

@@ -1,42 +0,0 @@
-import {css, html} from 'element-vir';
-import {type BookEntryType} from '../../../../data/book-entry/book-entry-type.js';
-import {type BookTreeNode} from '../../../../data/book-tree/book-tree-node.js';
-import {type BookRouter} from '../../../../routing/book-router.js';
-import {BookMainRoute, type ValidBookPaths} from '../../../../routing/book-routing.js';
-import {colorThemeCssVars} from '../../../color-theme/color-theme.js';
-import {BookRouteLink} from '../../common/book-route-link.element.js';
-import {defineBookElement} from '../../define-book-element.js';
-
-export const BookElementExampleControls = defineBookElement<{
-    elementExampleNode: BookTreeNode<BookEntryType.ElementExample>;
-    router: BookRouter | undefined;
-}>()({
-    tagName: 'book-element-example-controls',
-    styles: css`
-        :host {
-            display: flex;
-            color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
-            border-bottom: 1px solid currentColor;
-            padding: 0 8px 4px;
-        }
-    `,
-    render({inputs}) {
-        const linkPaths: ValidBookPaths = [
-            BookMainRoute.Book,
-            ...inputs.elementExampleNode.fullUrlBreadcrumbs,
-        ];
-
-        return html`
-            <${BookRouteLink.assign({
-                route: {
-                    paths: linkPaths,
-                    hash: undefined,
-                    search: undefined,
-                },
-                router: inputs.router,
-            })}>
-                ${inputs.elementExampleNode.entry.title}
-            </${BookRouteLink}>
-        `;
-    },
-});

package/src/ui/elements/entry-display/element-example/book-element-example-viewer.element.ts

@@ -1,79 +0,0 @@
-import {combineErrors, extractErrorMessage} from '@augment-vir/common';
-import {html, renderIf} from 'element-vir';
-import {type BookEntryType} from '../../../../data/book-entry/book-entry-type.js';
-import {type BookPageControlsValues} from '../../../../data/book-entry/book-page/book-page-controls.js';
-import {type BookTreeNode} from '../../../../data/book-tree/book-tree-node.js';
-import {unsetInternalState} from '../../../../data/unset.js';
-import {BookError} from '../../common/book-error.element.js';
-import {defineBookElement} from '../../define-book-element.js';
-
-export const BookElementExampleViewer = defineBookElement<{
-    elementExampleNode: BookTreeNode<BookEntryType.ElementExample>;
-    currentPageControls: BookPageControlsValues;
-}>()({
-    tagName: 'book-element-example-viewer',
-    state() {
-        return {
-            isUnset: unsetInternalState,
-        } as any;
-    },
-    render({state, inputs, updateState}) {
-        try {
-            if (inputs.elementExampleNode.entry.errors.length) {
-                throw combineErrors(inputs.elementExampleNode.entry.errors);
-            }
-
-            if (
-                /** This is a check to make sure the input entry _does_ match the expected type. */
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                !inputs.elementExampleNode.entry.render ||
-                typeof inputs.elementExampleNode.entry.render === 'string'
-            ) {
-                throw new Error(
-                    `Failed to render example '${inputs.elementExampleNode.entry.title}': render is not a function`,
-                );
-            }
-
-            if (state.isUnset === unsetInternalState) {
-                updateState({
-                    isUnset: undefined,
-                    ...inputs.elementExampleNode.entry.state?.(),
-                });
-            }
-
-            const output = inputs.elementExampleNode.entry.render({
-                state,
-                updateState,
-                controls: inputs.currentPageControls,
-            });
-            if (output instanceof Promise) {
-                throw new TypeError('render output cannot be a promise');
-            }
-
-            return html`
-                ${renderIf(
-                    !!inputs.elementExampleNode.entry.styles,
-                    html`
-                        <style>
-                            ${inputs.elementExampleNode.entry.styles}
-                        </style>
-                    `,
-                )}
-                ${output}
-            `;
-        } catch (error) {
-            console.error('ERROR HERE', extractErrorMessage(error));
-            console.error(error);
-            return html`
-                <${BookError.assign({
-                    message: `${
-                        inputs.elementExampleNode.entry.title
-                    } failed: ${extractErrorMessage(error)}`,
-                })}></${BookError}>
-            `;
-        }
-    },
-    options: {
-        allowPolymorphicState: true,
-    },
-});

package/src/ui/elements/entry-display/element-example/book-element-example-wrapper.element.ts

@@ -1,61 +0,0 @@
-import {omitObjectKeys} from '@augment-vir/common';
-import {css, html} from 'element-vir';
-import {type BookEntryType} from '../../../../data/book-entry/book-entry-type.js';
-import {type BookPageControlsValues} from '../../../../data/book-entry/book-page/book-page-controls.js';
-import {type BookTreeNode} from '../../../../data/book-tree/book-tree-node.js';
-import {type BookRouter} from '../../../../routing/book-router.js';
-import {colorThemeCssVars} from '../../../color-theme/color-theme.js';
-import {defineBookElement} from '../../define-book-element.js';
-import {BookElementExampleControls} from './book-element-example-controls.element.js';
-import {BookElementExampleViewer} from './book-element-example-viewer.element.js';
-
-export const BookElementExampleWrapper = defineBookElement<{
-    elementExampleNode: BookTreeNode<BookEntryType.ElementExample>;
-    currentPageControls: BookPageControlsValues;
-    router: BookRouter | undefined;
-}>()({
-    tagName: 'book-element-example-wrapper',
-    styles: css`
-        :host {
-            display: inline-block;
-            max-width: 100%;
-        }
-
-        .examples-wrapper {
-            display: flex;
-            gap: 32px;
-            flex-wrap: wrap;
-        }
-
-        .error {
-            color: red;
-            font-weight: bold;
-        }
-
-        .individual-example-wrapper {
-            display: flex;
-            flex-direction: column;
-            gap: 24px;
-            max-width: 100%;
-            align-items: flex-start;
-        }
-
-        ${BookElementExampleControls} {
-            color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
-        }
-
-        :host(:hover) ${BookElementExampleControls} {
-            color: ${colorThemeCssVars['element-book-accent-icon-color'].value};
-        }
-    `,
-    render({inputs}) {
-        return html`
-            <div class="individual-example-wrapper">
-                <${BookElementExampleControls.assign(
-                    omitObjectKeys(inputs, ['currentPageControls']),
-                )}></${BookElementExampleControls}>
-                <${BookElementExampleViewer.assign(inputs)}></${BookElementExampleViewer}>
-            </div>
-        `;
-    },
-});

package/src/ui/elements/entry-display/entry-display/create-node-templates.ts

@@ -1,183 +0,0 @@
-import {check} from '@augment-vir/assert';
-import {mapObjectValues} from '@augment-vir/common';
-import {
-    type HTMLTemplateResult,
-    type HtmlInterpolation,
-    classMap,
-    html,
-    nothing,
-    repeat,
-} from 'element-vir';
-import {BookEntryType} from '../../../../data/book-entry/book-entry-type.js';
-import {
-    type BookPageControlsInitBase,
-    type BookPageControlsValues,
-} from '../../../../data/book-entry/book-page/book-page-controls.js';
-import {
-    type ControlsWrapper,
-    traverseControls,
-} from '../../../../data/book-entry/book-page/controls-wrapper.js';
-import {type BookTreeNode} from '../../../../data/book-tree/book-tree-node.js';
-import {isBookTreeNode, traverseToImmediateParent} from '../../../../data/book-tree/book-tree.js';
-import {type BookRouter} from '../../../../routing/book-router.js';
-import {BookError} from '../../common/book-error.element.js';
-import {BookPageControls} from '../book-page/book-page-controls.element.js';
-import {BookPageWrapper} from '../book-page/book-page-wrapper.element.js';
-import {BookElementExampleWrapper} from '../element-example/book-element-example-wrapper.element.js';
-
-type FlattenedControls = {
-    config: BookPageControlsInitBase;
-    current: BookPageControlsValues;
-    breadcrumbs: Record<string, ReadonlyArray<string>>;
-};
-
-function getFlattenedControlsFromHiddenParents(
-    currentNodes: ReadonlyArray<BookTreeNode>,
-    currentControls: ControlsWrapper,
-    currentNode: BookTreeNode,
-    originalTree: Readonly<BookTreeNode<BookEntryType.Root>>,
-): FlattenedControls | undefined {
-    const parent = traverseToImmediateParent(currentNode, originalTree);
-    const allControls: FlattenedControls[] = [];
-
-    if (parent) {
-        const parentControls = getFlattenedControlsFromHiddenParents(
-            currentNodes,
-            currentControls,
-            parent,
-            originalTree,
-        );
-        if (parentControls) {
-            allControls.push(parentControls);
-        }
-    }
-    if (isBookTreeNode(currentNode, BookEntryType.Page) && !currentNodes.includes(currentNode)) {
-        const currentEntryControls = traverseControls(
-            currentControls,
-            currentNode.fullUrlBreadcrumbs,
-        );
-        allControls.push({
-            config: currentNode.entry.controls,
-            current: currentEntryControls,
-            breadcrumbs: mapObjectValues(currentEntryControls, () => {
-                return currentNode.fullUrlBreadcrumbs;
-            }),
-        });
-    }
-    return allControls.reduce(
-        (accum, currentControls) => {
-            return {
-                config: {
-                    ...accum.config,
-                    ...currentControls.config,
-                },
-                current: {
-                    ...accum.current,
-                    ...currentControls.current,
-                },
-                breadcrumbs: {
-                    ...accum.breadcrumbs,
-                    ...currentControls.breadcrumbs,
-                },
-            };
-        },
-        {config: {}, current: {}, breadcrumbs: {}},
-    );
-}
-
-export function createNodeTemplates({
-    currentNodes,
-    isTopLevel,
-    router,
-    isSearching,
-    controls,
-    originalTree,
-}: {
-    currentNodes: ReadonlyArray<BookTreeNode>;
-    isTopLevel: boolean;
-    router: BookRouter | undefined;
-    isSearching: boolean;
-    controls: ControlsWrapper;
-    originalTree: Readonly<BookTreeNode<BookEntryType.Root>>;
-}): HtmlInterpolation[] {
-    if (!currentNodes.length && isSearching) {
-        return [
-            html`
-                No results
-            `,
-        ];
-    }
-
-    const hiddenAncestorControls = check.isLengthAtLeast(currentNodes, 1)
-        ? getFlattenedControlsFromHiddenParents(
-              currentNodes,
-              controls,
-              currentNodes[0],
-              originalTree,
-          )
-        : undefined;
-
-    const hiddenAncestorControlsTemplate =
-        hiddenAncestorControls &&
-        Object.values(hiddenAncestorControls.config).length &&
-        check.isLengthAtLeast(currentNodes, 1)
-            ? html`
-                  <${BookPageControls.assign({
-                      config: hiddenAncestorControls.config,
-                      currentValues: hiddenAncestorControls.current,
-                      fullUrlBreadcrumbs: hiddenAncestorControls.breadcrumbs,
-                  })}></${BookPageControls}>
-              `
-            : nothing;
-
-    const templates = repeat(
-        currentNodes,
-        (node) => node.fullUrlBreadcrumbs.join('>'),
-        (currentNode): HTMLTemplateResult | typeof nothing => {
-            if (isBookTreeNode(currentNode, BookEntryType.Page)) {
-                return html`
-                    <${BookPageWrapper.assign({
-                        isTopLevel,
-                        pageNode: currentNode,
-                        controls,
-                        router,
-                    })}
-                        class="block-entry"
-                    ></${BookPageWrapper}>
-                `;
-            } else if (isBookTreeNode(currentNode, BookEntryType.ElementExample)) {
-                const controlsForElementExample = traverseControls(
-                    controls,
-                    currentNode.fullUrlBreadcrumbs.slice(0, -1),
-                );
-
-                return html`
-                    <${BookElementExampleWrapper.assign({
-                        elementExampleNode: currentNode,
-                        currentPageControls: controlsForElementExample,
-                        router,
-                    })}
-                        class="inline-entry ${classMap({
-                            'block-entry': currentNode.entry.isVertical,
-                        })}"
-                    ></${BookElementExampleWrapper}>
-                `;
-            } else if (isBookTreeNode(currentNode, BookEntryType.Root)) {
-                return nothing;
-            } else {
-                return html`
-                    <${BookError.assign({
-                        message: `Unknown entry type for rendering: '${currentNode.entry.entryType}'`,
-                    })}
-                        class="block-entry"
-                    ></${BookError}>
-                `;
-            }
-        },
-    );
-
-    return [
-        hiddenAncestorControlsTemplate,
-        templates,
-    ];
-}