feat(rozier): add missing stories

lib/Rozier/app/utils/storybook/renderer/rzActionsMenu.ts

@@ -0,0 +1,56 @@
+import {
+    type RzButtonOptions,
+    rzButtonRenderer,
+} from '~/utils/component-renderer/rzButton'
+
+export type RzActionsMenuItemOptions = {
+    /** HTML of an element with `popover`, opened by the button (rz-popover wrapper). */
+    popoverContent?: string
+    button: RzButtonOptions
+}
+
+export type RzActionsMenuOptions = {
+    vertical?: boolean
+    class?: string
+    items: RzActionsMenuItemOptions[]
+}
+
+const COMPONENT_CLASS_NAME = 'rz-actions-menu'
+
+/** Mirrors macros/rz_actions_menu.html.twig. */
+export function rzActionsMenuRenderer(args: RzActionsMenuOptions) {
+    const element = document.createElement('rz-actions-menu')
+    element.classList.add(COMPONENT_CLASS_NAME)
+    if (args.vertical) {
+        element.classList.add(`${COMPONENT_CLASS_NAME}--vertical`)
+    }
+    if (args.class) {
+        element.classList.add(...args.class.split(' ').filter(Boolean))
+    }
+    element.setAttribute('data-axis', 'y')
+
+    args.items.forEach((item) => {
+        const button = rzButtonRenderer(item.button)
+
+        if (!item.popoverContent) {
+            element.appendChild(button)
+            return
+        }
+
+        const popover = document.createElement('rz-popover')
+        popover.setAttribute('data-popover-offset', '24px')
+        popover.setAttribute('data-popover-placement', 'top-start')
+        popover.innerHTML = item.popoverContent
+        popover.appendChild(button)
+        element.appendChild(popover)
+    })
+
+    const handle = document.createElement('button')
+    handle.classList.add(`${COMPONENT_CLASS_NAME}__handle`)
+    handle.type = 'button'
+    handle.setAttribute('aria-label', 'Drag actions menu')
+    handle.innerHTML = '<span class="rz-icon-rz--draggable-2"></span>'
+    element.appendChild(handle)
+
+    return element
+}

lib/Rozier/app/utils/storybook/renderer/rzAside.ts

@@ -0,0 +1,98 @@
+import { rzButtonRenderer } from '~/utils/component-renderer/rzButton'
+import {
+    type RzTreeOptions,
+    rzTreeRenderer,
+} from '~/utils/storybook/renderer/rzTree'
+
+export const TREE_TYPES = ['node', 'tag', 'folder'] as const
+
+export type RzAsideTreeWrapperOptions = {
+    treeType: (typeof TREE_TYPES)[number]
+    /** Without a tree, the wrapper shows the loading button, as rz-aside renders before its first fetch. */
+    tree?: RzTreeOptions
+}
+
+export type RzAsideOptions = RzAsideTreeWrapperOptions & {
+    defaultTranslationId?: string
+}
+
+const COMPONENT_CLASS_NAME = 'rz-aside'
+
+const TREE_LABELS = {
+    node: { title: 'Node tree', add: 'Add a node' },
+    tag: { title: 'Tag tree', add: 'Add a tag' },
+    folder: { title: 'Folder tree', add: 'Add a folder' },
+}
+
+/** Mirrors widgets/rz_tree_wrapper_auto.html.twig for a root tree, without the language switcher. */
+export function rzAsideTreeWrapperRenderer(args: RzAsideTreeWrapperOptions) {
+    const wrapper = document.createElement('div')
+    wrapper.classList.add(
+        'rz-tree-wrapper',
+        'tree-widget',
+        `${args.treeType}-tree-widget`,
+    )
+
+    if (!args.tree) {
+        wrapper.appendChild(
+            rzButtonRenderer({
+                tag: 'div',
+                label: 'Loading',
+                emphasis: 'secondary',
+                size: 'md',
+                iconClass: 'rz-spinner',
+                attributes: {
+                    class: `${COMPONENT_CLASS_NAME}__loading-button`,
+                    'aria-live': 'polite',
+                    role: 'status',
+                },
+            }),
+        )
+        return wrapper
+    }
+
+    const labels = TREE_LABELS[args.treeType]
+    const head = document.createElement('div')
+    head.classList.add(`${COMPONENT_CLASS_NAME}__head`)
+    head.innerHTML = `<span class="${COMPONENT_CLASS_NAME}__icon rz-icon-ri--node-tree"></span>
+<h2 class="${COMPONENT_CLASS_NAME}__title">${labels.title}</h2>`
+    head.appendChild(
+        rzButtonRenderer({
+            tag: 'a',
+            iconClass: 'rz-icon-ri--add-line',
+            size: 'sm',
+            label: labels.add,
+            attributes: { class: `${COMPONENT_CLASS_NAME}__button`, href: '#' },
+        }),
+    )
+    wrapper.appendChild(head)
+
+    const tree = rzTreeRenderer(args.tree)
+    tree.classList.add(`rz-tree--${args.treeType}`)
+    tree.id = `${args.treeType}-root`
+    tree.setAttribute('group', `${args.treeType}Tree`)
+    tree.setAttribute('data-entity-type', args.treeType)
+    wrapper.appendChild(tree)
+
+    return wrapper
+}
+
+/** Mirrors widgets/rz_aside.html.twig: the element then fetches its tree. */
+export function rzAsideRenderer(args: RzAsideOptions) {
+    const element = document.createElement('rz-aside')
+    element.classList.add(COMPONENT_CLASS_NAME)
+    element.id = COMPONENT_CLASS_NAME
+    if (args.defaultTranslationId) {
+        element.setAttribute(
+            'data-default-translation-id',
+            args.defaultTranslationId,
+        )
+    }
+
+    const body = document.createElement('div')
+    body.classList.add(`${COMPONENT_CLASS_NAME}__body`)
+    body.appendChild(rzAsideTreeWrapperRenderer({ treeType: args.treeType }))
+    element.appendChild(body)
+
+    return element
+}

lib/Rozier/app/utils/storybook/renderer/rzBulkActions.ts

@@ -0,0 +1,129 @@
+import {
+    type RzButtonOptions,
+    rzButtonRenderer,
+} from '~/utils/component-renderer/rzButton'
+
+export type RzBulkActionsItemOptions = {
+    button: RzButtonOptions
+    /** HTML of the panel the button toggles (nodes/bulkActions.html.twig `panels` block). */
+    panel?: string
+}
+
+export type RzBulkActionsOptions = {
+    title?: string
+    /** Shown by rz-bulk-section once an item is selected. */
+    visible?: boolean
+    actions?: RzBulkActionsItemOptions[]
+    deleteFormAction?: string
+    /** Name of the hidden input rz-bulk-section fills with the selection (JSON). */
+    deleteFormInputName?: string
+}
+
+const COMPONENT_CLASS_NAME = 'rz-bulk-actions'
+
+/** Same buttons as nodes/bulkActions.html.twig: tags and status toggle a panel. */
+export const DEFAULT_BULK_ACTIONS: RzBulkActionsOptions = {
+    title: 'Bulk actions',
+    deleteFormAction: '#',
+    deleteFormInputName: 'nodes',
+    actions: [
+        {
+            button: {
+                emphasis: 'primary',
+                iconClass: 'rz-icon-ri--price-tag-3-line',
+                attributes: { type: 'button', title: 'Link tags' },
+            },
+            panel: '<p>Tags form</p>',
+        },
+        {
+            button: {
+                emphasis: 'primary',
+                iconClass: 'rz-icon-ri--flag-line',
+                attributes: { type: 'button', title: 'Nodes status' },
+            },
+            panel: '<p>Status form</p>',
+        },
+    ],
+}
+
+let instanceCounter = 0
+
+/** Mirrors widgets/rz_bulk_actions.html.twig. */
+export function rzBulkActionsRenderer(args: RzBulkActionsOptions) {
+    const prefix = `${COMPONENT_CLASS_NAME}-${++instanceCounter}`
+    const element = document.createElement('rz-bulk-actions')
+    element.classList.add(COMPONENT_CLASS_NAME)
+    element.setAttribute('visibility-class', `${COMPONENT_CLASS_NAME}--visible`)
+    if (args.visible) {
+        element.classList.add(`${COMPONENT_CLASS_NAME}--visible`)
+    }
+
+    const title = document.createElement('h3')
+    title.classList.add(`${COMPONENT_CLASS_NAME}__title`)
+    title.textContent = args.title || 'Bulk actions'
+    element.appendChild(title)
+
+    const buttons = document.createElement('div')
+    buttons.classList.add(`${COMPONENT_CLASS_NAME}__buttons`)
+    element.appendChild(buttons)
+
+    buttons.appendChild(
+        rzButtonRenderer({
+            emphasis: 'primary',
+            iconClass: 'rz-icon-ri--checkbox-blank-line',
+            attributes: {
+                type: 'button',
+                title: 'Deselect all',
+                'data-bulk-deselect-all-button': '',
+            },
+        }),
+    )
+
+    const panels: HTMLElement[] = []
+    args.actions?.forEach((action, index) => {
+        const attributes = { ...action.button.attributes }
+        if (action.panel) {
+            const panel = document.createElement('div')
+            panel.id = `${prefix}-panel-${index}`
+            panel.classList.add(`${COMPONENT_CLASS_NAME}__group`)
+            panel.innerHTML = action.panel
+            panels.push(panel)
+
+            Object.assign(attributes, {
+                'data-tab-controls': panel.id,
+                'data-tab-panel-active-class': `${COMPONENT_CLASS_NAME}__group--visible`,
+                'data-tab-active-class': 'rz-button--selected',
+            })
+        }
+        buttons.appendChild(rzButtonRenderer({ ...action.button, attributes }))
+    })
+
+    if (args.deleteFormAction) {
+        const form = document.createElement('form')
+        form.classList.add(`${COMPONENT_CLASS_NAME}__form-button`)
+        form.action = args.deleteFormAction
+        form.method = 'POST'
+
+        if (args.deleteFormInputName) {
+            const input = document.createElement('input')
+            input.type = 'hidden'
+            input.classList.add('bulk-form-value')
+            input.name = args.deleteFormInputName
+            form.appendChild(input)
+        }
+
+        form.appendChild(
+            rzButtonRenderer({
+                color: 'danger',
+                emphasis: 'primary',
+                iconClass: 'rz-icon-ri--delete-bin-7-line',
+                attributes: { type: 'submit', title: 'Delete' },
+            }),
+        )
+        buttons.appendChild(form)
+    }
+
+    panels.forEach((panel) => element.appendChild(panel))
+
+    return element
+}

lib/Rozier/app/utils/storybook/renderer/rzBulkSection.ts

@@ -0,0 +1,99 @@
+import { rzButtonRenderer } from '~/utils/component-renderer/rzButton'
+import {
+    type RzBulkActionsOptions,
+    rzBulkActionsRenderer,
+} from '~/utils/storybook/renderer/rzBulkActions'
+
+export type RzBulkSectionItemOptions = {
+    value: string
+    label: string
+}
+
+export type RzBulkSectionOptions = {
+    items: RzBulkSectionItemOptions[]
+    bulkActions: RzBulkActionsOptions
+    /** Select-all button of widgets/rz_filters_bar.html.twig (`display_select_all_button`). */
+    selectAllButton?: boolean
+}
+
+/** Mirrors rz_bulk.select_all_input and rz_bulk.select_input (macros/rz_bulk.html.twig). */
+function selectInputRenderer(name: string, label: string, value?: string) {
+    const input = document.createElement('input', { is: 'rz-input' })
+    input.setAttribute('is', 'rz-input')
+    input.type = 'checkbox'
+    input.name = name
+    input.setAttribute('aria-label', label)
+    if (value) input.value = value
+
+    return input
+}
+
+function cellRenderer(tag: 'td' | 'th', content: HTMLElement | string) {
+    const cell = document.createElement(tag)
+    cell.append(content)
+    return cell
+}
+
+/** Mirrors <rz-bulk-section> in users/list.html.twig: filters bar, bulk actions and rz_table.html.twig. */
+export function rzBulkSectionRenderer(args: RzBulkSectionOptions) {
+    const element = document.createElement('rz-bulk-section')
+
+    if (args.selectAllButton) {
+        const filtersBar = document.createElement('div')
+        filtersBar.classList.add('rz-filters-bar')
+        filtersBar.appendChild(
+            rzButtonRenderer({
+                emphasis: 'secondary',
+                label: 'Select all',
+                iconClass: 'rz-icon-ri--checkbox-line',
+                attributes: {
+                    type: 'button',
+                    'aria-selected': 'false',
+                    'data-bulk-select-all-button': '',
+                    'selected-class': 'rz-button--selected',
+                },
+            }),
+        )
+        element.appendChild(filtersBar)
+    }
+
+    element.appendChild(rzBulkActionsRenderer(args.bulkActions))
+
+    const container = document.createElement('div')
+    container.classList.add('rz-table-container')
+    const table = document.createElement('table', { is: 'rz-table' })
+    table.setAttribute('is', 'rz-table')
+    table.classList.add('rz-table', 'rz-table--default')
+    container.appendChild(table)
+
+    const headRow = document.createElement('tr')
+    headRow.append(
+        cellRenderer(
+            'th',
+            selectInputRenderer('bulk-selection-all', 'Select all'),
+        ),
+        cellRenderer('th', 'Name'),
+    )
+    table.createTHead().appendChild(headRow)
+
+    const body = table.createTBody()
+    args.items.forEach((item) => {
+        const row = document.createElement('tr')
+        row.append(
+            cellRenderer(
+                'td',
+                selectInputRenderer(
+                    'bulk-selection[]',
+                    'Select row',
+                    item.value,
+                ),
+            ),
+            cellRenderer('td', item.label),
+        )
+        body.appendChild(row)
+    })
+
+    element.appendChild(container)
+
+    return element
+}