kitchen-color-studio/es/ColorStudio/components/TokenView.js

an open-source color editor for designing color system

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
import { DumiSiteProvider, Highlighter } from 'dumi-theme-antd-style';
import { camelCase, kebabCase } from 'lodash-es';
import { memo } from 'react';
import { colorTypeFormat, getAlphaColor, usePrettier } from "../..";
import { CodeView } from "../../styles";
import { jsx as _jsx } from "react/jsx-runtime";
var TokenView = /*#__PURE__*/memo(function (_ref) {
  var data = _ref.data,
    config = _ref.config;
  var _usePrettier = usePrettier(),
    format = _usePrettier.format;
  var colorType = config.colorType,
    codeType = config.codeType,
    isolateDarkToken = config.isolateDarkToken;
  var tokenData = data.map(function (item) {
    return {
      name: item.name,
      light: item.scales.light.map(function (s) {
        return colorTypeFormat(s, colorType);
      }),
      lightA: item.scales.light.map(function (s) {
        return colorTypeFormat(getAlphaColor(s, '#fff'), colorType);
      }),
      dark: item.scales.dark.map(function (s) {
        return colorTypeFormat(s, colorType);
      }),
      darkA: item.scales.dark.map(function (s) {
        return colorTypeFormat(getAlphaColor(s, '#000'), colorType);
      })
    };
  });
  var content = null;
  if (codeType === 'js') {
    if (isolateDarkToken) {
      var objLight = {};
      var objDark = {};
      tokenData.forEach(function (item) {
        objLight[camelCase(item.name)] = {
          solid: item.light,
          alpha: item.lightA
        };
        objDark[camelCase(item.name)] = {
          solid: item.dark,
          alpha: item.darkA
        };
      });
      content = "\n        export interface ColorScaleItem {\n          solid: string[],\n          alpha: string[],\n        }\n\n        export interface ColorScales {\n          ".concat(Object.keys(objLight).map(function (key) {
        return "".concat(key, ": ColorScaleItem;");
      }).join('\n'), "\n        }\n\n        export const LightTheme:ColorScales = ").concat(JSON.stringify(objLight), "\n\n        export const DarkTheme:ColorScales = ").concat(JSON.stringify(objDark), "\n      ");
    } else {
      var obj = {};
      tokenData.forEach(function (item) {
        obj[camelCase(item.name)] = {
          light: item.light,
          lightA: item.lightA,
          dark: item.dark,
          darkA: item.darkA
        };
      });
      content = "\n        export interface ColorScaleItem {\n          light: string[],\n          lightA: string[],\n          dark: string[],\n          darkA: string[],\n        }\n\n        export interface ColorScales {\n          ".concat(Object.keys(obj).map(function (key) {
        return "".concat(key, ": ColorScaleItem;");
      }).join('\n'), "\n        }\n\n        export const Theme:ColorScales = ").concat(JSON.stringify(obj), "\n      ");
    }
    content = format(content);
  } else {
    var tokenLightList = isolateDarkToken ? ["/* light.".concat(codeType, " */")] : [];
    var tokenDarkList = isolateDarkToken ? ['\n', "/* dark.".concat(codeType, " */")] : [];
    tokenData.forEach(function (item) {
      var lightName = kebabCase(item.name);
      var darkName = kebabCase(item.name);
      if (!isolateDarkToken) {
        lightName = 'light-' + lightName;
        darkName = 'dark-' + darkName;
      }
      var prefix = '--';
      if (codeType === 'less') prefix = '@';
      if (codeType === 'scss') prefix = '$';
      var light = item.light.map(function (c, index) {
        return "".concat(prefix).concat(lightName, "-color-").concat(index + 1, ": ").concat(c, ";");
      });
      var lightA = item.lightA.map(function (c, index) {
        return "".concat(prefix).concat(lightName, "-color-").concat(index + 1, "-alpha: ").concat(c, ";");
      });
      var dark = item.dark.map(function (c, index) {
        return "".concat(prefix).concat(darkName, "-color-").concat(index + 1, ": ").concat(c, ";");
      });
      var darkA = item.darkA.map(function (c, index) {
        return "".concat(prefix).concat(darkName, "-color-").concat(index + 1, "-alpha: ").concat(c, ";");
      });
      tokenLightList = [].concat(_toConsumableArray(tokenLightList), _toConsumableArray(light), _toConsumableArray(lightA));
      tokenDarkList = [].concat(_toConsumableArray(tokenDarkList), _toConsumableArray(dark), _toConsumableArray(darkA));
    });
    content = [].concat(_toConsumableArray(tokenLightList), _toConsumableArray(tokenDarkList)).join('\n');
  }
  return /*#__PURE__*/_jsx(CodeView, {
    children: /*#__PURE__*/_jsx(DumiSiteProvider, {
      children: /*#__PURE__*/_jsx(Highlighter, {
        background: false,
        language: codeType,
        children: content
      })
    })
  });
});
export default TokenView;