@devseed-ui/theme-provider/src/story-theme-explorer.js

devseed UI Kit Theme

import React, { useState } from 'react';
import T from 'prop-types';
import styled from 'styled-components';

import { themeVal, createUITheme, glsp } from '.';

const PropertiesList = styled.ul`
  font-family: monospace;
  list-style: none;
  padding-left: ${glsp(1.5)};
`;

const PropKey = styled.span`
  font-weight: ${themeVal('type.base.bold')};
`;

const PropValue = styled.span`
  color: ${themeVal('color.primary')};
`;

const ExpandableButton = styled.a`
  display: flex;
  font-weight: ${themeVal('type.base.bold')};
  color: ${themeVal('color.link')};
  text-decoration: none;
`;

// Function to render the object tree.
// Will be recursively called if the value of a given key is an object.
const rowRenderer = (k, v, id) => {
  if (v !== null && typeof v === 'object') {
    return <CollapsibleRow key={k} label={k} value={v} id={id} />;
  }

  return (
    <li key={k}>
      <PropKey>{k}:</PropKey> <PropValue>{String(v)}</PropValue>
    </li>
  );
};

function CollapsibleRow(props) {
  const { id, label, value } = props;

  // First row is expanded automatically
  const [expanded, setExpanded] = useState(id === 'root');

  const onClick = (e) => {
    e.preventDefault();
    setExpanded(!expanded);
  };

  const keys = Object.keys(value);

  return (
    <li>
      <ExpandableButton href={`#${id}`} onClick={onClick}>
        {label}: {`{${keys.length}}`}
      </ExpandableButton>
      {expanded && (
        <PropertiesList id={id}>
          {keys.map((key) => rowRenderer(key, value[key], `${id}.label`))}
        </PropertiesList>
      )}
    </li>
  );
}

CollapsibleRow.propTypes = {
  id: T.string,
  label: T.string,
  value: T.any
};

const themeData = { main: createUITheme() };

export const ThemeExplorer = () => {
  const themeKeys = Object.keys(themeData);

  return (
    <PropertiesList>
      {themeKeys.map((key) => rowRenderer(key, themeData[key], 'root'))}
    </PropertiesList>
  );
};