@etchteam/storybook-addon-design-token-tables/dist/Tokens/Tokens.js

Storybook addon for design token tables

import { DocsContext } from '@storybook/blocks';
import cx from 'classnames';
import React from 'react';
import styles from './Tokens.module.css';
function getTokens(rawTokens, collection) {
    var match;
    var rootRegex = /^:root\s*\{([\s\S]*?)\}[\s\n]*$/gm;
    var root = [];
    while ((match = rootRegex.exec(rawTokens)) !== null) {
        root.push(match[0]);
    }
    var allTokens = root.join('\n');
    var regex = new RegExp("--".concat(collection, "[a-z0-9-^:]*: [^;]+;"), 'gs');
    var tokens = [];
    while ((match = regex.exec(allTokens !== null && allTokens !== void 0 ? allTokens : '')) !== null) {
        var _a = match[0].replace(';', '').split(': '), key = _a[0], value = _a[1];
        tokens.push({
            key: key,
            value: value,
        });
    }
    return tokens;
}
function getPreviewType(token, collection, collections) {
    // Tirst try to get the collection by value
    for (var collectionKey in collections) {
        if (token.value.includes(collectionKey)) {
            return collections[collectionKey];
        }
    }
    // If not found, try to get the collection by key
    for (var collectionKey in collections) {
        if (token.key.includes(collectionKey)) {
            return collections[collectionKey];
        }
    }
    if (token.value.includes('#') ||
        token.value.includes('rgb') ||
        token.value.includes('transparent')) {
        return 'color';
    }
    if (token.value.includes('px')) {
        return 'spacing';
    }
    return collections[collection] || '';
}
function getContent(previewType, hasText) {
    if (!previewType) {
        return 'N/A';
    }
    return hasText ? 'Lorem ipsum' : '';
}
export default function Tokens(_a) {
    var _b;
    var collection = _a.collection;
    var docsContext = React.useContext(DocsContext);
    var addonParameters = ((_b = docsContext.projectAnnotations.parameters) === null || _b === void 0 ? void 0 : _b.designTokenTables) || {
        tokens: [],
        collections: {},
    };
    var collections = addonParameters.collections || {};
    var rawTokens = addonParameters.tokens.join('\n');
    var tokens = getTokens(rawTokens, collection);
    return (React.createElement("table", { className: styles.tokens },
        React.createElement("thead", null,
            React.createElement("tr", null,
                React.createElement("th", null, "Name"),
                React.createElement("th", null, "Value"),
                React.createElement("th", null, "Preview"))),
        React.createElement("tbody", null, tokens === null || tokens === void 0 ? void 0 : tokens.map(function (token) {
            var previewType = getPreviewType(token, collection, collections);
            var hasText = [
                'font-family',
                'font-size',
                'line-height',
                'font-weight',
            ].includes(previewType);
            return (React.createElement("tr", { key: token.key },
                React.createElement("td", null, token.key),
                React.createElement("td", null, token.value),
                React.createElement("td", { className: cx([
                        styles['tokens__preview-cell'],
                        styles["tokens__preview-cell--".concat(previewType)],
                    ]), style: { '--token-preview': token.value } },
                    React.createElement("div", { className: cx([
                            styles['tokens__preview'],
                            styles["tokens__preview--".concat(previewType)],
                        ]) }, getContent(previewType, hasText)))));
        }))));
}
//# sourceMappingURL=Tokens.js.map