feat: color-coded tags and page types

ccontrols · Jun 21, 2020 · 67a8047 · 67a8047
1 parent 95303f8
commit 67a8047
Show file tree

Hide file tree

Showing 12 changed files with 134 additions and 15 deletions.
diff --git a/ui/blocks/src/ComponentDeps/Dependencies.tsx b/ui/blocks/src/ComponentDeps/Dependencies.tsx
@@ -90,6 +90,7 @@ export const Dependencies: FC<DependenciesProps> = ({ dependencies }) => {
                 <Tag
                   variant="tag.rightmargin"
                   key={`${v.name}`}
+                  borderSize={1}
                   color={
                     v.importedName === defaultExport ? 'green' : 'lightgrey'
                   }

diff --git a/ui/blocks/src/DocumentItem/DocumentItem.stories.tsx b/ui/blocks/src/DocumentItem/DocumentItem.stories.tsx
@@ -0,0 +1,28 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { DocumentItem } from '.';
+import { BlockContext } from '../context';
+import { MockContext } from '../test/MockContext';
+
+export default {
+  title: 'Blocks/DocumentItem',
+  component: DocumentItem,
+};
+
+export const overview = () => (
+  <MockContext storyId="id-of-story">
+    <BlockContext.Consumer>
+      {({ storeProvider, docId }) => {
+        const page = storeProvider.getStoryDoc(docId || 'id-of-story');
+        console.log(page, docId, storeProvider);
+        return page ? (
+          <DocumentItem
+            config={storeProvider.config}
+            link={storeProvider.getPagePath(page.type, page.title)}
+            page={page}
+          />
+        ) : null;
+      }}
+    </BlockContext.Consumer>
+  </MockContext>
+);
diff --git a/ui/blocks/src/DocumentItem/DocumentItem.tsx b/ui/blocks/src/DocumentItem/DocumentItem.tsx
@@ -8,8 +8,9 @@ import {
   RunConfiguration,
   dateToLocalString,
 } from '@component-controls/core';
-import { Subtitle, Markdown, Tag, Link } from '@component-controls/components';
+import { Subtitle, Markdown, Link } from '@component-controls/components';
 import { TagsList } from '../TagsList';
+import { PageTypeTag } from '../PageTypeTag';
 
 export interface PageListItemProps {
   /**
@@ -38,13 +39,7 @@ export const DocumentItem: FC<PageListItemProps> = ({ page, link, config }) => {
         <Link href={link}>
           <Subtitle>{page.title}</Subtitle>
         </Link>
-        {type && (
-          <Link href={`/${config?.pages?.[type].basePath}`}>
-            <Tag transparentAmount={0.3} color="#f49342">
-              {type}
-            </Tag>
-          </Link>
-        )}
+        <PageTypeTag type={type} />
       </Box>
       {page.description && <Markdown>{page.description}</Markdown>}
       <Box variant="documentitem.info.container">

diff --git a/ui/blocks/src/PageTypeTag/PageTypeTag.stories.tsx b/ui/blocks/src/PageTypeTag/PageTypeTag.stories.tsx
@@ -0,0 +1,15 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { PageTypeTag } from '.';
+import { MockContext } from '../test/MockContext';
+
+export default {
+  title: 'Blocks/PageTypeTag',
+  component: PageTypeTag,
+};
+
+export const overview = () => (
+  <MockContext storyId="id-of-story">
+    <PageTypeTag type="story" />
+  </MockContext>
+);
diff --git a/ui/blocks/src/PageTypeTag/PageTypeTag.tsx b/ui/blocks/src/PageTypeTag/PageTypeTag.tsx
@@ -0,0 +1,34 @@
+import React, { FC, useState, useEffect, useContext } from 'react';
+import { PageType } from '@component-controls/core';
+import {
+  Tag,
+  Link,
+  getAccentPaletteColor,
+} from '@component-controls/components';
+import { BlockContext } from '../context';
+
+export interface PageTypeTagProps {
+  type: PageType;
+}
+export const PageTypeTag: FC<PageTypeTagProps> = ({ type }) => {
+  const { storeProvider } = useContext(BlockContext);
+  const { config } = storeProvider;
+  const [colors, setColors] = useState<{ [key: string]: string }>({});
+  useEffect(() => {
+    const uniqueTypes = storeProvider.getUniquesByCategory('type');
+    setColors(
+      Object.keys(uniqueTypes).reduce(
+        (acc, key, index) => ({
+          ...acc,
+          [key]: getAccentPaletteColor(index),
+        }),
+        {},
+      ),
+    );
+  }, [storeProvider]);
+  return (
+    <Link href={`/${config?.pages?.[type].basePath}`}>
+      <Tag color={colors[type] || '#f49342'}>{type}</Tag>
+    </Link>
+  );
+};
diff --git a/ui/blocks/src/PageTypeTag/index.ts b/ui/blocks/src/PageTypeTag/index.ts
@@ -0,0 +1 @@
+export * from './PageTypeTag';
diff --git a/ui/blocks/src/PropsTable/BasePropsTable.tsx b/ui/blocks/src/PropsTable/BasePropsTable.tsx
@@ -161,7 +161,7 @@ export const BasePropsTable: FC<BasePropsTableProps> = ({
             </Text>
           );
           return required ? (
-            <Tag color="red" transparentAmount={0.95} sx={{ borderRadius: 4 }}>
+            <Tag color="red" transparentAmount={0.95} borderSize={1}>
               {text}
             </Tag>
           ) : (
@@ -206,6 +206,7 @@ export const BasePropsTable: FC<BasePropsTableProps> = ({
                           key={`${name}_${value || typeName}`}
                           color="grey"
                           transparentAmount={0.9}
+                          borderSize={1}
                           variant="tag.rightmargin"
                         >
                           {value || typeName}

diff --git a/ui/blocks/src/TagsList/TagsList.stories.tsx b/ui/blocks/src/TagsList/TagsList.stories.tsx
@@ -3,7 +3,7 @@ import { MockContext } from '@component-controls/blocks';
 import { TagsList } from './TagsList';
 
 export default {
-  title: 'Application/TagsList',
+  title: 'Blocks/TagsList',
   component: TagsList,
 };
 

diff --git a/ui/blocks/src/TagsList/TagsList.tsx b/ui/blocks/src/TagsList/TagsList.tsx
@@ -1,8 +1,8 @@
 /** @jsx jsx */
-import { FC, useContext } from 'react';
+import { FC, useContext, useState, useEffect } from 'react';
 import { jsx, Box } from 'theme-ui';
 import { getDocPath } from '@component-controls/core';
-import { Tag, Link } from '@component-controls/components';
+import { Tag, Link, getPaletteColor } from '@component-controls/components';
 import { BlockContext } from '../context';
 
 export interface TagsListProps {
@@ -17,6 +17,19 @@ export interface TagsListProps {
  */
 export const TagsList: FC<TagsListProps> = ({ tags }) => {
   const { storeProvider } = useContext(BlockContext);
+  const [tagColors, setTagColors] = useState<{ [tag: string]: string }>({});
+  useEffect(() => {
+    const uniqueTags = storeProvider.getUniquesByCategory('tags');
+    setTagColors(
+      Object.keys(uniqueTags).reduce(
+        (acc, key, index) => ({
+          ...acc,
+          [key]: getPaletteColor(index),
+        }),
+        {},
+      ),
+    );
+  }, [storeProvider]);
 
   return tags ? (
     <Box variant="taglist.container">
@@ -30,7 +43,7 @@ export const TagsList: FC<TagsListProps> = ({ tags }) => {
             tag,
           )}
         >
-          <Tag transparentAmount={0.5} color="#dddddd" variant="tag.leftmargin">
+          <Tag color={tagColors[tag] || '#dddddd'} variant="tag.leftmargin">
             {tag}
           </Tag>
         </Link>

diff --git a/ui/blocks/src/index.ts b/ui/blocks/src/index.ts
@@ -8,6 +8,7 @@ export * from './DocumentItem';
 export * from './EditPage';
 export * from './PackageVersion';
 export * from './PageContainer';
+export * from './PageTypeTag';
 export * from './Pagination';
 export * from './Playground';
 export * from './PropsTable';

diff --git a/ui/components/src/Tag/Tag.tsx b/ui/components/src/Tag/Tag.tsx
@@ -16,6 +16,11 @@ export interface TagProps {
    */
   transparentAmount?: number;
 
+  /**
+   * borderSize in pixels
+   */
+  borderSize?: number;
+
   /**
    * theme variant additional
    */
@@ -28,7 +33,8 @@ export interface TagProps {
 export const Tag: FC<TagProps & Omit<BoxProps, 'variant'>> = ({
   children,
   color,
-  transparentAmount = 0.8,
+  borderSize = 2,
+  transparentAmount = 0.85,
   variant,
   ...rest
 }) => {
@@ -40,7 +46,7 @@ export const Tag: FC<TagProps & Omit<BoxProps, 'variant'>> = ({
       {...rest}
       sx={{
         backgroundColor: transparentize(transparentAmount, color),
-        border: `1px solid ${color}`,
+        border: `${borderSize}px solid ${color}`,
         ...get(theme, variant as ReactText),
       }}
     >

diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -62,6 +62,19 @@ export const theme: ControlsTheme = {
     selected: '#027AC5',
     fadedText: '#69768C',
     shadow: 'rgba(0, 0, 0, 0.1)',
+    accentPalette0: '#8338ec',
+    accentPalette1: '#fb5607',
+    accentPalette2: '#ff006e',
+    accentPalette3: '#ffbe0b',
+    accentPalette4: '#3a86ff',
+    accentPalette5: '#4ecdc4',
+
+    palette0: '#4caf50',
+    palette1: '#2196f3',
+    palette2: '#ff9800',
+    palette3: '#f44336',
+    palette4: '#dc004e',
+    palette5: '#1976d2',
     modes: {
       dark: {
         primary: '#d5c0f1',
@@ -396,6 +409,7 @@ export const theme: ControlsTheme = {
     default: {
       display: 'inline-block',
       px: 1,
+      borderRadius: 5,
     },
     rightmargin: {
       mr: 1,
@@ -831,3 +845,13 @@ export const useTheme = (): Theme => {
   const { theme: currentTheme } = useThemeUI();
   return currentTheme || theme;
 };
+
+const paletteColorCount = 6;
+
+export const getPaletteColor = (index: number): string =>
+  //@ts-ignore
+  theme.colors[`palette${index % paletteColorCount}`];
+
+export const getAccentPaletteColor = (index: number): string =>
+  //@ts-ignore
+  theme.colors[`accentPalette${index % paletteColorCount}`];