@workday/canvas-kit-docs/dist/es6/lib/Specifications.js

Documentation components of Canvas Kit components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/* eslint-disable no-param-reassign */
import { toId } from '@storybook/csf';
import React from 'react';
import { Hyperlink } from '@workday/canvas-kit-react/button';
import { Table } from '@workday/canvas-kit-react/table';
import { GithubBranch, GithubUrl, StorybookUrl } from './docs';
function useFetchSpecification({ file, initialSpecs }) {
    const [specs, setSpecs] = React.useState(initialSpecs);
    React.useEffect(() => {
        if (file && !initialSpecs) {
            import(/* @vite-ignore */ file).then(({ default: contents }) => {
                setSpecs(contents);
            });
        }
    }, [file, initialSpecs]);
    return specs;
}
function createTableRows(rows, item, index, children, context = { given: [], when: [], then: [], prefix: '' }) {
    if (item.type === 'describe') {
        if (/^given/i.test(item.name)) {
            context = {
                ...context,
                given: context.given.concat(context.prefix ? `${context.prefix} ${item.name}` : item.name),
            };
            context.prefix = '';
        }
        else if (/^[wt]hen/i.test(item.name)) {
            context = {
                ...context,
                when: context.when.concat(context.prefix ? `${context.prefix} ${item.name}` : item.name),
            };
            context.prefix = '';
        }
        else {
            context = { ...context, prefix: context.prefix ? `${context.prefix} ${item.name}` : item.name };
        }
        item.children.reduce((rows, item, index, children) => createTableRows(rows, item, index, children, context), rows);
    }
    else {
        context = {
            ...context,
            then: context.then.concat(context.prefix ? `${context.prefix} ${item.name}` : item.name),
        };
        rows.push(context);
    }
    return rows;
}
export const Specifications = ({ file, name, initialSpecs }) => {
    const storybookBaseUrl = React.useContext(StorybookUrl);
    const githubUrl = React.useContext(GithubUrl);
    const githubBranch = React.useContext(GithubBranch);
    const contents = useFetchSpecification({ file, initialSpecs });
    if (!contents) {
        return null;
    }
    const block = name ? contents.children.find(d => d.name === name) : contents.children[0];
    if (!block) {
        return null;
    }
    const renderGiven = (input) => {
        if (!input) {
            return `Could not find a "given". Check the spec file.`;
        }
        const matches = input.match(/(.*)(\[[A-Za-z/\s]+), ([A-Za-z\s]+)\](.*)/);
        if (matches == null) {
            return input;
        }
        const [, first, kind, name, last] = matches;
        return (_jsxs("div", { children: [first.replace(/given /i, ''), _jsx(Hyperlink, { href: `${storybookBaseUrl}?path=/story/${toId(kind, name.replace('DefaultStory', 'Default Story').replace(/([A-Z])/g, '-$1'))}`, children: name.replace('DefaultStory', 'Default') }), last] }));
    };
    return block.type === 'describe' ? (_jsxs("div", { className: "sb-unstyled", children: [_jsxs(Table, { children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.Header, { children: "Given" }), _jsx(Table.Header, { children: "When" }), _jsx(Table.Header, { children: "Then" })] }) }), _jsx(Table.Body, { children: block.children.reduce(createTableRows, []).map((row, index) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { children: renderGiven(row.given[0]) }), _jsx(Table.Cell, { children: _jsx("ul", { children: row.when.map((item, index) => (_jsx("li", { children: (index !== 0 ? 'AND THEN ' : '') + item.replace(/[tw]hen /i, '') }, index))) }) }), _jsx(Table.Cell, { children: _jsx("ul", { children: row.then.map((item, index) => (_jsx("li", { children: (item.indexOf('should') === 0 ? 'it ' : '') + item }, index))) }) })] }, index))) })] }), "Source: ", _jsx(Hyperlink, { href: `${githubUrl}blob/${githubBranch}/${file}`, children: file })] })) : null;
};