@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
81 lines (80 loc) • 3.95 kB
JavaScript
/* eslint-disable no-param-reassign */
import React from 'react';
import { toId } from '@storybook/csf';
import { Table } from '@workday/canvas-kit-react/table';
import { Hyperlink } from '@workday/canvas-kit-react/button';
import { specifications } from './specs';
import { GithubBranch, GithubUrl, StorybookUrl } from './docs';
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 }) => {
const storybookBaseUrl = React.useContext(StorybookUrl);
const githubUrl = React.useContext(GithubUrl);
const githubBranch = React.useContext(GithubBranch);
const specFile = specifications.find(f => f.name === file);
if (!specFile) {
return null;
}
const block = name ? specFile.children.find(d => d.name === name) : specFile.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 (React.createElement(React.Fragment, null,
first.replace(/given /i, ''),
React.createElement(Hyperlink, { href: `${storybookBaseUrl}?path=/story/${toId(kind, name.replace('DefaultStory', 'Default Story'))}` }, name.replace('DefaultStory', 'Default')),
last));
};
return block.type === 'describe' ? (React.createElement(React.Fragment, null,
React.createElement(Table, null,
React.createElement(Table.Head, null,
React.createElement(Table.Row, null,
React.createElement(Table.Header, null, "Given"),
React.createElement(Table.Header, null, "When"),
React.createElement(Table.Header, null, "Then"))),
React.createElement(Table.Body, null, block.children.reduce(createTableRows, []).map((row, index) => (React.createElement(Table.Row, { key: index },
React.createElement(Table.Cell, null, renderGiven(row.given[0])),
React.createElement(Table.Cell, null,
React.createElement("ul", null, row.when.map((item, index) => (React.createElement("li", { key: index }, (index !== 0 ? 'AND THEN ' : '') + item.replace(/[tw]hen /i, '')))))),
React.createElement(Table.Cell, null,
React.createElement("ul", null, row.then.map((item, index) => (React.createElement("li", { key: index }, (item.indexOf('should') === 0 ? 'it ' : '') + item)))))))))),
"Source:",
' ',
React.createElement(Hyperlink, { href: `${githubUrl}blob/${githubBranch}/cypress/integration/${file}` }, file))) : null;
};