design-token-editor - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

lib/cjs/TokenEditor.js

@@ -44,3 +44,2 @@ "use strict";
 var Context_1 = __importDefault(require("./Context"));
-var TokenFilter_1 = __importDefault(require("./TokenFilter"));
 var TokensTable_1 = __importDefault(require("./TokensTable"));
@@ -50,3 +49,2 @@ var util_1 = require("./util");
     viewMode: 'tokens',
-    searchValue: '',
     values: {},
@@ -60,5 +58,2 @@ };
         }
-        case 'search': {
-            return __assign(__assign({}, state), { searchValue: action.payload });
-        }
         case 'changeValue': {
@@ -94,3 +89,3 @@ var _b = action.payload, token = _b.token, value = _b.value;
         }
-        else {
+        else if ((0, util_1.isContainer)(v)) {
             var nested = fromStyleDictValues(v);
@@ -136,3 +131,2 @@ Object.entries(nested).forEach(function (_a) {
             body = (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(TokenFilter_1.default, { text: state.searchValue, onChange: function (e) { return dispatch({ type: 'search', payload: e.target.value }); } }),
                 react_1.default.createElement(Context_1.default.Provider, { value: {
@@ -144,3 +138,3 @@ onValueChange: function (token, value) {
                     } },
-                    react_1.default.createElement(TokensTable_1.default, { container: tokens, limitTo: state.searchValue, autoExpand: true }))));
+                    react_1.default.createElement(TokensTable_1.default, { container: tokens, filterEnabled: true, autoExpand: true }))));
             break;
@@ -147,0 +141,0 @@ }

lib/cjs/TokenFilter.d.ts

@@ -1,7 +0,14 @@
-import { ChangeEvent } from 'react';
+import React, { ChangeEvent } from 'react';
+import { TopLevelContainer, DesignTokenContainer } from './types';
+type FILTER_MODE = 'all' | 'curated';
+export interface TokenFilterState {
+    mode: FILTER_MODE;
+    query: string;
+}
 interface TokenFilterProps {
-    text: string;
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    filters: TokenFilterState;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
 }
-declare const TokenFilter: ({ text, onChange }: TokenFilterProps) => JSX.Element;
+declare const TokenFilter: React.FC<TokenFilterProps>;
+export declare const applyFilters: (filterEnabled: boolean, filters: TokenFilterState, container: TopLevelContainer) => DesignTokenContainer;
 export default TokenFilter;

lib/cjs/TokenFilter.js

@@ -6,7 +6,70 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyFilters = void 0;
 var react_1 = __importDefault(require("react"));
+var util_1 = require("./util");
+var FilterModeInput = function (_a) {
+    var value = _a.value, onChange = _a.onChange;
+    return (react_1.default.createElement("div", { className: "dte-radio" },
+        react_1.default.createElement("label", null, "Tokens to show:"),
+        react_1.default.createElement("label", null,
+            react_1.default.createElement("input", { type: "radio", name: "mode", value: "all", checked: value === 'all', onChange: onChange }),
+            "All"),
+        react_1.default.createElement("label", null,
+            react_1.default.createElement("input", { type: "radio", name: "mode", value: "curated", checked: value === 'curated', onChange: onChange }),
+            "Pre-selected")));
+};
 var TokenFilter = function (_a) {
-    var text = _a.text, onChange = _a.onChange;
-    return (react_1.default.createElement("input", { className: "dte-token-filter", type: "search", name: "filter", value: text, onChange: onChange, placeholder: "Filter... e.g. 'of.button'" }));
+    var _b = _a.filters, filters = _b === void 0 ? {} : _b, onChange = _a.onChange;
+    var _c = filters.mode, mode = _c === void 0 ? 'curated' : _c, _d = filters.query, query = _d === void 0 ? '' : _d;
+    return (react_1.default.createElement("div", { className: "dte-token-filters" },
+        react_1.default.createElement("div", { className: "dte-token-filters__filter" },
+            react_1.default.createElement(FilterModeInput, { value: mode, onChange: onChange })),
+        react_1.default.createElement("div", { className: "dte-token-filters__filter dte-token-filters__filter--expand" },
+            react_1.default.createElement("input", { className: "dte-token-filters__query", type: "search", name: "query", value: query, onChange: onChange, placeholder: "Filter... e.g. 'color'" }))));
 };
+var shouldIncludeToken = function (filters, token) {
+    var _a, _b;
+    var mode = filters.mode, query = filters.query;
+    // check for curated tokens mode
+    var isCurated = (_b = (_a = token === null || token === void 0 ? void 0 : token.$extensions) === null || _a === void 0 ? void 0 : _a['dte.metadata']) === null || _b === void 0 ? void 0 : _b.isCurated;
+    if (mode === 'curated' && !isCurated) {
+        return false;
+    }
+    // check if there is a query and if it matches
+    if (query) {
+        var normalizedQuery = query.toLocaleLowerCase();
+        if (token.path.join('.').includes(normalizedQuery)) {
+            return true;
+        }
+        var normalizedComment = ((token === null || token === void 0 ? void 0 : token.comment) || '').toLocaleLowerCase();
+        return normalizedComment.includes(normalizedQuery);
+    }
+    return true;
+};
+var applyFilters = function (filterEnabled, filters, container) {
+    if (!filterEnabled)
+        return container;
+    var filteredContainer = {};
+    Object.entries(container).forEach(function (_a) {
+        var key = _a[0], nested = _a[1];
+        if (key === '$extensions') {
+            filteredContainer[key] = nested;
+            return;
+        }
+        if ((0, util_1.isDesignToken)(nested)) {
+            if (shouldIncludeToken(filters, nested)) {
+                filteredContainer[key] = nested;
+            }
+        }
+        else if ((0, util_1.isContainer)(nested)) {
+            var nestedFilteredContainer = (0, exports.applyFilters)(filterEnabled, filters, nested);
+            if (!Object.entries(nestedFilteredContainer).length) {
+                return;
+            }
+            filteredContainer[key] = nestedFilteredContainer;
+        }
+    });
+    return filteredContainer;
+};
+exports.applyFilters = applyFilters;
 exports.default = TokenFilter;

lib/cjs/TokenRow.d.ts

 /// <reference types="react" />
-export type DesignToken = {
-    name: string;
-    value: string;
-    original: {
-        value: string;
-    };
-    path: string[];
-    attributes: {
-        [key: string]: string;
-    };
-};
+import { DesignToken } from './types';
 export interface TokenRowProps {
@@ -14,0 +4,0 @@ designToken: DesignToken;

lib/cjs/TokenRow.js

@@ -52,3 +52,3 @@ "use strict";
     var _c = (0, react_1.useState)('documentation'), editorMode = _c[0], setEditorMode = _c[1];
-    var value = designToken.value, original = designToken.original, path = designToken.path;
+    var value = designToken.value, original = designToken.original, path = designToken.path, comment = designToken.comment;
     var tokenPath = path.join('.');
@@ -80,22 +80,25 @@ var currentValue = ((_b = context === null || context === void 0 ? void 0 : context.tokenValues) === null || _b === void 0 ? void 0 : _b[tokenPath]) || value;
     }
-    return (react_1.default.createElement("div", { className: "dte-token-row", id: getTokenHtmlID(tokenPath) },
-        react_1.default.createElement("div", { className: "dte-token-row__token-name" },
-            react_1.default.createElement("span", { className: "dte-code dte-code--inline" }, tokenPath)),
-        react_1.default.createElement("div", { className: "dte-kv dte-token-row__token-value-container" },
-            react_1.default.createElement("div", { className: "dte-kv__key" }, "Value:"),
-            react_1.default.createElement("div", { className: "dte-kv__value dte-token-row__token-value" },
-                context ? (react_1.default.createElement("button", { className: "dte-token-row__edit-icon", type: "button", onClick: function () {
-                        return setEditorMode(editorMode === 'documentation' ? 'edit' : 'documentation');
-                    }, title: "Edit", "aria-label": "Edit" },
-                    ' ',
-                    "\u270F\uFE0F",
-                    ' ')) : null,
-                editorMode === 'documentation' ? (react_1.default.createElement("span", { className: "dte-code dte-code--inline" }, currentValue)) : (react_1.default.createElement(TokenValueInput_1.default, __assign({ name: tokenPath, type: currentValueIsColor ? 'color' : 'text', defaultTokenValue: value }, inputProps))),
-                currentValueIsColor && react_1.default.createElement(ColorPreview_1.default, { color: currentValue }))),
-        react_1.default.createElement("div", { className: "dte-kv dte-token-row__token-source-container" },
-            react_1.default.createElement("div", { className: "dte-kv__key", title: "Source of (default) value" }, "Source:"),
-            react_1.default.createElement("div", { className: (0, clsx_1.default)('dte-kv__value', 'dte-token-row__token-source', {
-                    'dte-token-row__token-source--color': originalValueIsColor,
-                }) }, originalValueIsColor ? (react_1.default.createElement(ColorPreview_1.default, { color: original.value })) : (react_1.default.createElement("span", { className: "dte-code dte-code--inline" }, original.value))))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "dte-token-row", id: getTokenHtmlID(tokenPath) },
+            react_1.default.createElement("div", { className: "dte-token-row__token-name" },
+                react_1.default.createElement("span", { className: "dte-code dte-code--inline" }, tokenPath)),
+            comment ? (react_1.default.createElement("p", { className: "dte-token-docs dte-token-docs--inline" }, comment)) : null,
+            react_1.default.createElement("div", { className: "dte-kv dte-token-row__token-value-container" },
+                react_1.default.createElement("div", { className: "dte-kv__key" }, "Value:"),
+                react_1.default.createElement("div", { className: "dte-kv__value dte-token-row__token-value" },
+                    context ? (react_1.default.createElement("button", { className: "dte-token-row__edit-icon", type: "button", onClick: function () {
+                            return setEditorMode(editorMode === 'documentation' ? 'edit' : 'documentation');
+                        }, title: "Edit", "aria-label": "Edit" },
+                        ' ',
+                        "\u270F\uFE0F",
+                        ' ')) : null,
+                    editorMode === 'documentation' ? (react_1.default.createElement("span", { className: "dte-code dte-code--inline" }, currentValue)) : (react_1.default.createElement(TokenValueInput_1.default, __assign({ name: tokenPath, type: currentValueIsColor ? 'color' : 'text', defaultTokenValue: value }, inputProps))),
+                    currentValueIsColor && react_1.default.createElement(ColorPreview_1.default, { color: currentValue }))),
+            react_1.default.createElement("div", { className: "dte-kv dte-token-row__token-source-container" },
+                react_1.default.createElement("div", { className: "dte-kv__key", title: "Source of (default) value" }, "Source:"),
+                react_1.default.createElement("div", { className: (0, clsx_1.default)('dte-kv__value', 'dte-token-row__token-source', {
+                        'dte-token-row__token-source--color': originalValueIsColor,
+                    }) }, originalValueIsColor ? (react_1.default.createElement(ColorPreview_1.default, { color: original.value })) : (react_1.default.createElement("span", { className: "dte-code dte-code--inline" }, original.value))))),
+        comment ? (react_1.default.createElement("p", { className: "dte-token-docs dte-token-docs--bottom" }, comment)) : null));
 };
 exports.default = TokenRow;

lib/cjs/TokensBlock.d.ts

 import React from 'react';
-import { DesignToken } from './TokenRow';
+import { DesignToken, DesignTokenGroup } from './types';
 interface TokensBlockProps {
@@ -7,4 +7,5 @@ path: string[];
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    container: DesignTokenGroup;
 }
-declare const TokensBlock: ({ path, tokens, onClick }: TokensBlockProps) => JSX.Element;
+declare const TokensBlock: ({ path, tokens, onClick, container, }: TokensBlockProps) => JSX.Element;
 export default TokensBlock;

lib/cjs/TokensBlock.js

@@ -16,2 +16,10 @@ "use strict";
 };
+var TokensBlockExtensionsDisplay = function (_a) {
+    var _b;
+    var extensions = _a.extensions;
+    var description = (_b = extensions['dte.metadata']) === null || _b === void 0 ? void 0 : _b.groupDescription;
+    if (!description)
+        return null;
+    return react_1.default.createElement("div", { className: "dte-tokens-block__description" }, description);
+};
 var TokensBlockTokenList = function (_a) {
@@ -27,7 +35,9 @@ var tokens = _a.tokens;
 var TokensBlock = function (_a) {
-    var path = _a.path, tokens = _a.tokens, onClick = _a.onClick;
+    var path = _a.path, tokens = _a.tokens, onClick = _a.onClick, container = _a.container;
     return (react_1.default.createElement("section", { className: "dte-tokens-block" },
-        react_1.default.createElement(TokensBlockHeader, { onClick: onClick }, path.join(' ➡️ ')),
+        react_1.default.createElement(TokensBlockHeader, { container: container, onClick: onClick },
+            react_1.default.createElement("span", null, path.join(' ➡️ ')),
+            react_1.default.createElement(TokensBlockExtensionsDisplay, { extensions: (container === null || container === void 0 ? void 0 : container.$extensions) || {} })),
         tokens.length ? react_1.default.createElement(TokensBlockTokenList, { tokens: tokens }) : null));
 };
 exports.default = TokensBlock;

lib/cjs/TokensTable.d.ts

@@ -7,4 +7,5 @@ /// <reference types="react" />
     autoExpand?: boolean;
+    filterEnabled?: boolean;
 }
-declare const TokensTable: ({ container, limitTo, autoExpand, }: TokensTableProps) => JSX.Element;
+declare const TokensTable: ({ container, limitTo, autoExpand, filterEnabled, }: TokensTableProps) => JSX.Element;
 export default TokensTable;

lib/cjs/TokensTable.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
@@ -42,2 +53,3 @@ if (k2 === undefined) k2 = k;
 var util_1 = require("./util");
+var TokenFilter_1 = __importStar(require("./TokenFilter"));
 var TokensTableRows = function (_a) {
@@ -85,9 +97,27 @@ var container = _a.container, parentScopes = _a.parentScopes, _b = _a.limitTo, limitTo = _b === void 0 ? '' : _b, _c = _a.closedScopes, closedScopes = _c === void 0 ? [] : _c, onToggle = _a.onToggle;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(TokensBlock_1.default, { path: parentScopes, tokens: leafNodesToRender, onClick: function () { return onToggle(parentScopes); } }),
+        react_1.default.createElement(TokensBlock_1.default, { path: parentScopes, tokens: leafNodesToRender, onClick: function () { return onToggle(parentScopes); }, container: container }),
         branchNodesToRender));
 };
+var initialState = {
+    filters: {
+        mode: 'curated',
+        query: '',
+    },
+};
+var reducer = function (state, action) {
+    var _a;
+    switch (action.type) {
+        case 'updateFilter': {
+            var _b = action.payload.target, name_1 = _b.name, value = _b.value;
+            var filters = __assign(__assign({}, state.filters), (_a = {}, _a[name_1] = value, _a));
+            return __assign(__assign({}, state), { filters: filters });
+        }
+    }
+};
 var TokensTable = function (_a) {
-    var container = _a.container, _b = _a.limitTo, limitTo = _b === void 0 ? '' : _b, _c = _a.autoExpand, autoExpand = _c === void 0 ? false : _c;
+    var container = _a.container, _b = _a.limitTo, limitTo = _b === void 0 ? '' : _b, _c = _a.autoExpand, autoExpand = _c === void 0 ? false : _c, _d = _a.filterEnabled, filterEnabled = _d === void 0 ? false : _d;
     var namespaces = Object.keys(container).map(function (namespace) { return [namespace]; });
-    var _d = (0, react_1.useState)(autoExpand ? [] : namespaces), closedScopes = _d[0], setClosedScopes = _d[1];
+    var _e = (0, react_1.useState)(autoExpand ? [] : namespaces), closedScopes = _e[0], setClosedScopes = _e[1];
+    var _f = (0, react_1.useReducer)(reducer, initialState), state = _f[0], dispatch = _f[1];
+    var filteredContainer = (0, TokenFilter_1.applyFilters)(filterEnabled, state.filters, container);
     var onToggle = function (scope) {
@@ -118,3 +148,3 @@ var isClosed = closedScopes.some(function (_scope) { return (0, lodash_isequal_1.default)(_scope, scope); });
     };
-    var children = Object.entries(container)
+    var children = Object.entries(filteredContainer)
         .filter(function (_a) {
@@ -133,4 +163,6 @@ var key = _a[0];
     });
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        filterEnabled ? (react_1.default.createElement(TokenFilter_1.default, { filters: state.filters, onChange: function (event) { return dispatch({ type: 'updateFilter', payload: event }); } })) : null,
+        children));
 };
 exports.default = TokensTable;

lib/cjs/types.d.ts

@@ -0,4 +1,22 @@
+export type JSONType = string | boolean | number | null | JSONType[] | JSONObject;
+interface JSONObject {
+    [key: string]: JSONType;
+}
+interface DesignTokenExtensions {
+    'dte.metadata'?: {
+        isCurated?: boolean;
+        category?: 'color' | 'spacing' | 'component';
+        stateType?: 'userAction' | 'component' | 'appearance';
+    };
+}
+export interface GroupExtensions {
+    'dte.metadata'?: {
+        groupDescription?: string;
+    };
+}
 export interface DesignToken {
     name: string;
     value: string;
+    comment?: string;
+    $extensions?: DesignTokenExtensions;
     original: {
@@ -13,2 +31,7 @@ value: string;
 }
+export type DesignTokenGroup = {
+    [key: string]: DesignTokenContainer;
+} & {
+    $extensions?: GroupExtensions;
+};
 /**
@@ -18,7 +41,6 @@ * Key-value mapping, where the value may be a design token (leaf node) or another
  */
-export type DesignTokenContainer = DesignToken | {
-    [key: string]: DesignTokenContainer;
-};
+export type DesignTokenContainer = DesignToken | DesignTokenGroup;
 export type TopLevelContainer = {
     [key: string]: DesignTokenContainer;
 };
+export {};

lib/cjs/util.d.ts

@@ -1,6 +0,6 @@
-import { DesignTokenContainer } from './types';
-export declare const isDesignToken: (node: DesignTokenContainer) => boolean;
+import { JSONType } from './types';
+export declare const isDesignToken: (node: JSONType) => boolean | "" | 0 | null;
 /**
  * Check if the node is a container that has _some_ design token leaf node.
  */
-export declare const isContainer: (node: DesignTokenContainer) => boolean;
+export declare const isContainer: (node: JSONType) => boolean;

lib/cjs/util.js

@@ -5,3 +5,3 @@ "use strict";
 var isDesignToken = function (node) {
-    return typeof node === 'object' && 'value' in node;
+    return node && typeof node === 'object' && 'value' in node;
 };
@@ -13,3 +13,3 @@ exports.isDesignToken = isDesignToken;
 var isContainer = function (node) {
-    if (typeof node !== 'object')
+    if (!node || typeof node !== 'object')
         return false;
@@ -16,0 +16,0 @@ var children = Object.values(node);

lib/esm/TokenEditor.js

@@ -16,8 +16,6 @@ var __assign = (this && this.__assign) || function () {
 import TokenEditorContext from './Context';
-import TokenFilter from './TokenFilter';
 import TokensTable from './TokensTable';
-import { isDesignToken } from './util';
+import { isContainer, isDesignToken } from './util';
 var initialState = {
     viewMode: 'tokens',
-    searchValue: '',
     values: {},
@@ -31,5 +29,2 @@ };
         }
-        case 'search': {
-            return __assign(__assign({}, state), { searchValue: action.payload });
-        }
         case 'changeValue': {
@@ -65,3 +60,3 @@ var _b = action.payload, token = _b.token, value = _b.value;
         }
-        else {
+        else if (isContainer(v)) {
             var nested = fromStyleDictValues(v);
@@ -107,3 +102,2 @@ Object.entries(nested).forEach(function (_a) {
             body = (React.createElement(React.Fragment, null,
-                React.createElement(TokenFilter, { text: state.searchValue, onChange: function (e) { return dispatch({ type: 'search', payload: e.target.value }); } }),
                 React.createElement(TokenEditorContext.Provider, { value: {
@@ -115,3 +109,3 @@ onValueChange: function (token, value) {
                     } },
-                    React.createElement(TokensTable, { container: tokens, limitTo: state.searchValue, autoExpand: true }))));
+                    React.createElement(TokensTable, { container: tokens, filterEnabled: true, autoExpand: true }))));
             break;
@@ -118,0 +112,0 @@ }

lib/esm/TokenFilter.d.ts

@@ -1,7 +0,14 @@
-import { ChangeEvent } from 'react';
+import React, { ChangeEvent } from 'react';
+import { TopLevelContainer, DesignTokenContainer } from './types';
+type FILTER_MODE = 'all' | 'curated';
+export interface TokenFilterState {
+    mode: FILTER_MODE;
+    query: string;
+}
 interface TokenFilterProps {
-    text: string;
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    filters: TokenFilterState;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
 }
-declare const TokenFilter: ({ text, onChange }: TokenFilterProps) => JSX.Element;
+declare const TokenFilter: React.FC<TokenFilterProps>;
+export declare const applyFilters: (filterEnabled: boolean, filters: TokenFilterState, container: TopLevelContainer) => DesignTokenContainer;
 export default TokenFilter;

lib/esm/TokenFilter.js

 import React from 'react';
+import { isContainer, isDesignToken } from './util';
+var FilterModeInput = function (_a) {
+    var value = _a.value, onChange = _a.onChange;
+    return (React.createElement("div", { className: "dte-radio" },
+        React.createElement("label", null, "Tokens to show:"),
+        React.createElement("label", null,
+            React.createElement("input", { type: "radio", name: "mode", value: "all", checked: value === 'all', onChange: onChange }),
+            "All"),
+        React.createElement("label", null,
+            React.createElement("input", { type: "radio", name: "mode", value: "curated", checked: value === 'curated', onChange: onChange }),
+            "Pre-selected")));
+};
 var TokenFilter = function (_a) {
-    var text = _a.text, onChange = _a.onChange;
-    return (React.createElement("input", { className: "dte-token-filter", type: "search", name: "filter", value: text, onChange: onChange, placeholder: "Filter... e.g. 'of.button'" }));
+    var _b = _a.filters, filters = _b === void 0 ? {} : _b, onChange = _a.onChange;
+    var _c = filters.mode, mode = _c === void 0 ? 'curated' : _c, _d = filters.query, query = _d === void 0 ? '' : _d;
+    return (React.createElement("div", { className: "dte-token-filters" },
+        React.createElement("div", { className: "dte-token-filters__filter" },
+            React.createElement(FilterModeInput, { value: mode, onChange: onChange })),
+        React.createElement("div", { className: "dte-token-filters__filter dte-token-filters__filter--expand" },
+            React.createElement("input", { className: "dte-token-filters__query", type: "search", name: "query", value: query, onChange: onChange, placeholder: "Filter... e.g. 'color'" }))));
 };
+var shouldIncludeToken = function (filters, token) {
+    var _a, _b;
+    var mode = filters.mode, query = filters.query;
+    // check for curated tokens mode
+    var isCurated = (_b = (_a = token === null || token === void 0 ? void 0 : token.$extensions) === null || _a === void 0 ? void 0 : _a['dte.metadata']) === null || _b === void 0 ? void 0 : _b.isCurated;
+    if (mode === 'curated' && !isCurated) {
+        return false;
+    }
+    // check if there is a query and if it matches
+    if (query) {
+        var normalizedQuery = query.toLocaleLowerCase();
+        if (token.path.join('.').includes(normalizedQuery)) {
+            return true;
+        }
+        var normalizedComment = ((token === null || token === void 0 ? void 0 : token.comment) || '').toLocaleLowerCase();
+        return normalizedComment.includes(normalizedQuery);
+    }
+    return true;
+};
+export var applyFilters = function (filterEnabled, filters, container) {
+    if (!filterEnabled)
+        return container;
+    var filteredContainer = {};
+    Object.entries(container).forEach(function (_a) {
+        var key = _a[0], nested = _a[1];
+        if (key === '$extensions') {
+            filteredContainer[key] = nested;
+            return;
+        }
+        if (isDesignToken(nested)) {
+            if (shouldIncludeToken(filters, nested)) {
+                filteredContainer[key] = nested;
+            }
+        }
+        else if (isContainer(nested)) {
+            var nestedFilteredContainer = applyFilters(filterEnabled, filters, nested);
+            if (!Object.entries(nestedFilteredContainer).length) {
+                return;
+            }
+            filteredContainer[key] = nestedFilteredContainer;
+        }
+    });
+    return filteredContainer;
+};
 export default TokenFilter;

lib/esm/TokenRow.d.ts

 /// <reference types="react" />
-export type DesignToken = {
-    name: string;
-    value: string;
-    original: {
-        value: string;
-    };
-    path: string[];
-    attributes: {
-        [key: string]: string;
-    };
-};
+import { DesignToken } from './types';
 export interface TokenRowProps {
@@ -14,0 +4,0 @@ designToken: DesignToken;

lib/esm/TokenRow.js

@@ -24,3 +24,3 @@ var __assign = (this && this.__assign) || function () {
     var _c = useState('documentation'), editorMode = _c[0], setEditorMode = _c[1];
-    var value = designToken.value, original = designToken.original, path = designToken.path;
+    var value = designToken.value, original = designToken.original, path = designToken.path, comment = designToken.comment;
     var tokenPath = path.join('.');
@@ -52,22 +52,25 @@ var currentValue = ((_b = context === null || context === void 0 ? void 0 : context.tokenValues) === null || _b === void 0 ? void 0 : _b[tokenPath]) || value;
     }
-    return (React.createElement("div", { className: "dte-token-row", id: getTokenHtmlID(tokenPath) },
-        React.createElement("div", { className: "dte-token-row__token-name" },
-            React.createElement("span", { className: "dte-code dte-code--inline" }, tokenPath)),
-        React.createElement("div", { className: "dte-kv dte-token-row__token-value-container" },
-            React.createElement("div", { className: "dte-kv__key" }, "Value:"),
-            React.createElement("div", { className: "dte-kv__value dte-token-row__token-value" },
-                context ? (React.createElement("button", { className: "dte-token-row__edit-icon", type: "button", onClick: function () {
-                        return setEditorMode(editorMode === 'documentation' ? 'edit' : 'documentation');
-                    }, title: "Edit", "aria-label": "Edit" },
-                    ' ',
-                    "\u270F\uFE0F",
-                    ' ')) : null,
-                editorMode === 'documentation' ? (React.createElement("span", { className: "dte-code dte-code--inline" }, currentValue)) : (React.createElement(TokenValueInput, __assign({ name: tokenPath, type: currentValueIsColor ? 'color' : 'text', defaultTokenValue: value }, inputProps))),
-                currentValueIsColor && React.createElement(ColorPreview, { color: currentValue }))),
-        React.createElement("div", { className: "dte-kv dte-token-row__token-source-container" },
-            React.createElement("div", { className: "dte-kv__key", title: "Source of (default) value" }, "Source:"),
-            React.createElement("div", { className: clsx('dte-kv__value', 'dte-token-row__token-source', {
-                    'dte-token-row__token-source--color': originalValueIsColor,
-                }) }, originalValueIsColor ? (React.createElement(ColorPreview, { color: original.value })) : (React.createElement("span", { className: "dte-code dte-code--inline" }, original.value))))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "dte-token-row", id: getTokenHtmlID(tokenPath) },
+            React.createElement("div", { className: "dte-token-row__token-name" },
+                React.createElement("span", { className: "dte-code dte-code--inline" }, tokenPath)),
+            comment ? (React.createElement("p", { className: "dte-token-docs dte-token-docs--inline" }, comment)) : null,
+            React.createElement("div", { className: "dte-kv dte-token-row__token-value-container" },
+                React.createElement("div", { className: "dte-kv__key" }, "Value:"),
+                React.createElement("div", { className: "dte-kv__value dte-token-row__token-value" },
+                    context ? (React.createElement("button", { className: "dte-token-row__edit-icon", type: "button", onClick: function () {
+                            return setEditorMode(editorMode === 'documentation' ? 'edit' : 'documentation');
+                        }, title: "Edit", "aria-label": "Edit" },
+                        ' ',
+                        "\u270F\uFE0F",
+                        ' ')) : null,
+                    editorMode === 'documentation' ? (React.createElement("span", { className: "dte-code dte-code--inline" }, currentValue)) : (React.createElement(TokenValueInput, __assign({ name: tokenPath, type: currentValueIsColor ? 'color' : 'text', defaultTokenValue: value }, inputProps))),
+                    currentValueIsColor && React.createElement(ColorPreview, { color: currentValue }))),
+            React.createElement("div", { className: "dte-kv dte-token-row__token-source-container" },
+                React.createElement("div", { className: "dte-kv__key", title: "Source of (default) value" }, "Source:"),
+                React.createElement("div", { className: clsx('dte-kv__value', 'dte-token-row__token-source', {
+                        'dte-token-row__token-source--color': originalValueIsColor,
+                    }) }, originalValueIsColor ? (React.createElement(ColorPreview, { color: original.value })) : (React.createElement("span", { className: "dte-code dte-code--inline" }, original.value))))),
+        comment ? (React.createElement("p", { className: "dte-token-docs dte-token-docs--bottom" }, comment)) : null));
 };
 export default TokenRow;

lib/esm/TokensBlock.d.ts

 import React from 'react';
-import { DesignToken } from './TokenRow';
+import { DesignToken, DesignTokenGroup } from './types';
 interface TokensBlockProps {
@@ -7,4 +7,5 @@ path: string[];
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    container: DesignTokenGroup;
 }
-declare const TokensBlock: ({ path, tokens, onClick }: TokensBlockProps) => JSX.Element;
+declare const TokensBlock: ({ path, tokens, onClick, container, }: TokensBlockProps) => JSX.Element;
 export default TokensBlock;

lib/esm/TokensBlock.js

@@ -11,2 +11,10 @@ import React from 'react';
 };
+var TokensBlockExtensionsDisplay = function (_a) {
+    var _b;
+    var extensions = _a.extensions;
+    var description = (_b = extensions['dte.metadata']) === null || _b === void 0 ? void 0 : _b.groupDescription;
+    if (!description)
+        return null;
+    return React.createElement("div", { className: "dte-tokens-block__description" }, description);
+};
 var TokensBlockTokenList = function (_a) {
@@ -22,7 +30,9 @@ var tokens = _a.tokens;
 var TokensBlock = function (_a) {
-    var path = _a.path, tokens = _a.tokens, onClick = _a.onClick;
+    var path = _a.path, tokens = _a.tokens, onClick = _a.onClick, container = _a.container;
     return (React.createElement("section", { className: "dte-tokens-block" },
-        React.createElement(TokensBlockHeader, { onClick: onClick }, path.join(' ➡️ ')),
+        React.createElement(TokensBlockHeader, { container: container, onClick: onClick },
+            React.createElement("span", null, path.join(' ➡️ ')),
+            React.createElement(TokensBlockExtensionsDisplay, { extensions: (container === null || container === void 0 ? void 0 : container.$extensions) || {} })),
         tokens.length ? React.createElement(TokensBlockTokenList, { tokens: tokens }) : null));
 };
 export default TokensBlock;

lib/esm/TokensTable.d.ts

@@ -7,4 +7,5 @@ /// <reference types="react" />
     autoExpand?: boolean;
+    filterEnabled?: boolean;
 }
-declare const TokensTable: ({ container, limitTo, autoExpand, }: TokensTableProps) => JSX.Element;
+declare const TokensTable: ({ container, limitTo, autoExpand, filterEnabled, }: TokensTableProps) => JSX.Element;
 export default TokensTable;

lib/esm/TokensTable.js

@@ -0,1 +1,12 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
@@ -10,6 +21,7 @@ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
 };
-import React, { useState } from 'react';
+import React, { useState, useReducer } from 'react';
 import isEqual from 'lodash.isequal';
 import TokensBlock from './TokensBlock';
 import { isDesignToken, isContainer } from './util';
+import TokenFilter, { applyFilters } from './TokenFilter';
 var TokensTableRows = function (_a) {
@@ -57,9 +69,27 @@ var container = _a.container, parentScopes = _a.parentScopes, _b = _a.limitTo, limitTo = _b === void 0 ? '' : _b, _c = _a.closedScopes, closedScopes = _c === void 0 ? [] : _c, onToggle = _a.onToggle;
     return (React.createElement(React.Fragment, null,
-        React.createElement(TokensBlock, { path: parentScopes, tokens: leafNodesToRender, onClick: function () { return onToggle(parentScopes); } }),
+        React.createElement(TokensBlock, { path: parentScopes, tokens: leafNodesToRender, onClick: function () { return onToggle(parentScopes); }, container: container }),
         branchNodesToRender));
 };
+var initialState = {
+    filters: {
+        mode: 'curated',
+        query: '',
+    },
+};
+var reducer = function (state, action) {
+    var _a;
+    switch (action.type) {
+        case 'updateFilter': {
+            var _b = action.payload.target, name_1 = _b.name, value = _b.value;
+            var filters = __assign(__assign({}, state.filters), (_a = {}, _a[name_1] = value, _a));
+            return __assign(__assign({}, state), { filters: filters });
+        }
+    }
+};
 var TokensTable = function (_a) {
-    var container = _a.container, _b = _a.limitTo, limitTo = _b === void 0 ? '' : _b, _c = _a.autoExpand, autoExpand = _c === void 0 ? false : _c;
+    var container = _a.container, _b = _a.limitTo, limitTo = _b === void 0 ? '' : _b, _c = _a.autoExpand, autoExpand = _c === void 0 ? false : _c, _d = _a.filterEnabled, filterEnabled = _d === void 0 ? false : _d;
     var namespaces = Object.keys(container).map(function (namespace) { return [namespace]; });
-    var _d = useState(autoExpand ? [] : namespaces), closedScopes = _d[0], setClosedScopes = _d[1];
+    var _e = useState(autoExpand ? [] : namespaces), closedScopes = _e[0], setClosedScopes = _e[1];
+    var _f = useReducer(reducer, initialState), state = _f[0], dispatch = _f[1];
+    var filteredContainer = applyFilters(filterEnabled, state.filters, container);
     var onToggle = function (scope) {
@@ -90,3 +120,3 @@ var isClosed = closedScopes.some(function (_scope) { return isEqual(_scope, scope); });
     };
-    var children = Object.entries(container)
+    var children = Object.entries(filteredContainer)
         .filter(function (_a) {
@@ -105,4 +135,6 @@ var key = _a[0];
     });
-    return React.createElement(React.Fragment, null, children);
+    return (React.createElement(React.Fragment, null,
+        filterEnabled ? (React.createElement(TokenFilter, { filters: state.filters, onChange: function (event) { return dispatch({ type: 'updateFilter', payload: event }); } })) : null,
+        children));
 };
 export default TokensTable;

lib/esm/types.d.ts

@@ -0,4 +1,22 @@
+export type JSONType = string | boolean | number | null | JSONType[] | JSONObject;
+interface JSONObject {
+    [key: string]: JSONType;
+}
+interface DesignTokenExtensions {
+    'dte.metadata'?: {
+        isCurated?: boolean;
+        category?: 'color' | 'spacing' | 'component';
+        stateType?: 'userAction' | 'component' | 'appearance';
+    };
+}
+export interface GroupExtensions {
+    'dte.metadata'?: {
+        groupDescription?: string;
+    };
+}
 export interface DesignToken {
     name: string;
     value: string;
+    comment?: string;
+    $extensions?: DesignTokenExtensions;
     original: {
@@ -13,2 +31,7 @@ value: string;
 }
+export type DesignTokenGroup = {
+    [key: string]: DesignTokenContainer;
+} & {
+    $extensions?: GroupExtensions;
+};
 /**
@@ -18,7 +41,6 @@ * Key-value mapping, where the value may be a design token (leaf node) or another
  */
-export type DesignTokenContainer = DesignToken | {
-    [key: string]: DesignTokenContainer;
-};
+export type DesignTokenContainer = DesignToken | DesignTokenGroup;
 export type TopLevelContainer = {
     [key: string]: DesignTokenContainer;
 };
+export {};

lib/esm/util.d.ts

@@ -1,6 +0,6 @@
-import { DesignTokenContainer } from './types';
-export declare const isDesignToken: (node: DesignTokenContainer) => boolean;
+import { JSONType } from './types';
+export declare const isDesignToken: (node: JSONType) => boolean | "" | 0 | null;
 /**
  * Check if the node is a container that has _some_ design token leaf node.
  */
-export declare const isContainer: (node: DesignTokenContainer) => boolean;
+export declare const isContainer: (node: JSONType) => boolean;

lib/esm/util.js

 export var isDesignToken = function (node) {
-    return typeof node === 'object' && 'value' in node;
+    return node && typeof node === 'object' && 'value' in node;
 };
@@ -8,3 +8,3 @@ /**
 export var isContainer = function (node) {
-    if (typeof node !== 'object')
+    if (!node || typeof node !== 'object')
         return false;
@@ -11,0 +11,0 @@ var children = Object.values(node);

lib/tokens/index.js

 /**
  * Do not edit directly
- * Generated on Sun, 05 Mar 2023 20:54:31 GMT
+ * Generated on Wed, 05 Apr 2023 15:38:19 GMT
  */
@@ -5,0 +5,0 @@

lib/tokens/tokens.js

 /**
  * Do not edit directly
- * Generated on Sun, 05 Mar 2023 20:54:31 GMT
+ * Generated on Wed, 05 Apr 2023 15:38:19 GMT
  */
@@ -5,0 +5,0 @@

package.json

 {
   "name": "design-token-editor",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "A react component to view/edit design token values",
@@ -5,0 +5,0 @@ "main": "./lib/cjs/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

110467

increased by16.04%

Lines of code

2248

increased by15.76%

No dependency changes