New tags (codesandbox#3426)

* update zeit

* add new tags

* add open folder icon

* fix comment

* use grud for dfesign

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Zeit.tsx

@@ -26,7 +26,7 @@ export const Zeit = () => {
   const { deploySandboxClicked, setDeploymentToDelete } = deployment;
 
   return (
-    <Integration icon={ZeitIcon} title="ZEIT">
+    <Integration icon={ZeitIcon} title="ZEIT Now">
       {integrations.zeit ? (
         <>
           <Element marginX={2} marginBottom={sandboxDeploys.length ? 6 : 0}>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/GetIconURL.js

@@ -3,6 +3,7 @@ import imageSvg from '@codesandbox/common/lib/icons/image.svg';
 import codesandboxSvg from '@codesandbox/common/lib/icons/codesandbox.svg';
 import nowSvg from '@codesandbox/common/lib/icons/now.svg';
 import folderSvg from './folder.svg';
+import folderOpenSvg from './folderOpen.svg';
 
 function imageExists(url) {
   return new Promise((resolve, reject) => {
@@ -37,7 +38,7 @@ async function getIconURL(type) {
       break;
 
     case 'directory-open':
-      url = folderSvg;
+      url = folderOpenSvg;
       break;
 
     default:

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/folderOpen.svg

@@ -0,0 +1,40 @@
+import css from '@styled-system/css';
+import React from 'react';
+import TagsInput from 'react-tagsinput';
+import { Tag, Stack, Element, Input } from '@codesandbox/components';
+
+const TagComponent = props => (
+  <Element marginY={1}>
+    <Tag {...props} onRemove={() => props.onRemove(props.key)} />
+  </Element>
+);
+
+const InputComponent = ({ className, ...other }) => (
+  <Input
+    {...other}
+    placeholder="Add Tag"
+    css={css({
+      maxWidth: 11,
+      fontSize: 1,
+      paddingX: 1,
+      height: 5,
+      '::-webkit-input-placeholder': { fontSize: 1 },
+      '::-ms-input-placeholder': { fontSize: 1 },
+      '::placeholder': { fontSize: 1 },
+    })}
+  />
+);
+
+export const EditableTags = (props: any) => (
+  <TagsInput
+    {...props}
+    renderTag={TagComponent}
+    renderInput={InputComponent}
+    renderLayout={(tagComponents, inputComponent) => (
+      <Stack align="center" gap={1}>
+        {tagComponents}
+        {props.value.length !== 5 ? inputComponent : null}
+      </Stack>
+    )}
+  />
+);

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/EditableTags.tsx

@@ -0,0 +1,51 @@
+import React, { FunctionComponent } from 'react';
+import getTemplateDefinition from '@codesandbox/common/lib/templates';
+import { useOvermind } from 'app/overmind';
+import { json } from 'overmind';
+import { Tags } from '@codesandbox/components';
+import { EditableTags } from './EditableTags';
+
+type Props = {
+  editable?: boolean;
+};
+
+export const Keywords: FunctionComponent<Props> = ({ editable }) => {
+  const {
+    actions: {
+      workspace: { tagChanged, tagsChanged },
+    },
+    state: {
+      editor: {
+        currentSandbox: { template, tags },
+      },
+      workspace: {
+        tags: { tagName },
+      },
+    },
+  } = useOvermind();
+
+  if (tags.length === 0 && !editable) {
+    return null;
+  }
+
+  const changeTags = (newTags: string[], removedTags: string[]) =>
+    tagsChanged({ newTags, removedTags });
+
+  return (
+    <div>
+      {editable ? (
+        <EditableTags
+          inputValue={tagName}
+          maxTags={5}
+          onChange={changeTags}
+          onChangeInput={tagChanged}
+          onlyUnique
+          template={getTemplateDefinition(template)}
+          value={json(tags)}
+        />
+      ) : (
+        <Tags tags={tags} />
+      )}
+    </div>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Keywords.tsx

@@ -29,6 +29,7 @@ import { css } from '@styled-system/css';
 import { Title } from './Title';
 import { Description } from './Description';
 import { TemplateConfig } from './TemplateConfig';
+import { Keywords } from './Keywords';
 
 export const Summary = () => {
   const {
@@ -88,7 +89,12 @@ export const Summary = () => {
                 <Title editable={owned} />
               </>
             )}
-            <Description editable={owned} />
+            <Element marginTop={2}>
+              <Description editable={owned} />
+            </Element>
+            <Element marginTop={2}>
+              <Keywords editable={owned} />
+            </Element>
           </Element>
 
           <Element as="section" css={css({ paddingX: 2 })}>
@@ -104,6 +110,7 @@ export const Summary = () => {
 
           <List>
             {customTemplate && <TemplateConfig />}
+
             {owned && (
               <ListAction justify="space-between">
                 <Label htmlFor="frozen">Frozen</Label>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary.tsx

@@ -12,13 +12,15 @@ const theme = {
   // 2 - 8
   // 3 - 12
   // 4 - 16
-  // 5 - 24
-  // 6 - 28
-  // 7 - 32
-  // 8 - 36
-  // 9 - 40
-  space: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40],
-  sizes: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40],
+  // 5 - 20
+  // 6 - 24
+  // 7 - 28
+  // 8 - 32
+  // 9 - 36
+  // 10 - 40
+  // 11 - 44
+  space: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44],
+  sizes: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44],
 
   // transition speeds in ms
   speeds: [0, '75ms', '100ms', '150ms', '200ms', '300ms', '500ms'],

packages/common/src/design-language/theme.ts

@@ -1,15 +1,4 @@
-export const fontSizes = [
-  0,
-  9, // not used yet.
-  11,
-  13,
-  16,
-  19,
-  24,
-  28,
-  33,
-  40,
-];
+export const fontSizes = [0, 9, 11, 13, 16, 19, 24, 28, 33, 40];
 
 export const fontWeights = {
   // matches Inter weights

packages/common/src/design-language/typography.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+import css from '@styled-system/css';
+import CrossIcon from 'react-icons/lib/md/clear';
+import { Stack } from '../Stack';
+import { Element } from '../Element';
+import { Text } from '../Text';
+
+export type Props = {
+  tag: string;
+  onRemove?: (tag: string) => void;
+};
+
+export const DeleteIcon = styled(CrossIcon)(
+  css({
+    transition: 'all ease',
+    transitionDuration: theme => theme.speeds[3],
+    cursor: 'pointer',
+    color: 'tab.inactiveForeground',
+    width: '6px',
+    display: 'flex',
+    height: '6px',
+
+    ':hover': {
+      color: 'sideBarTitle.foreground',
+    },
+  })
+);
+
+export const TagElement = styled.div(
+  css({
+    backgroundColor: 'sideBar.border',
+    paddingX: 1,
+    paddingY: 1,
+    borderRadius: 'small',
+  })
+);
+
+export function Tag({ tag, onRemove }: Props) {
+  return (
+    <TagElement key={tag}>
+      <Stack align="center" justify="space-between">
+        <Text size={1}>{tag}</Text>
+        {onRemove && (
+          <Element marginLeft={2}>
+            <DeleteIcon onClick={() => onRemove(tag)} />
+          </Element>
+        )}
+      </Stack>
+    </TagElement>
+  );
+}

packages/components/src/components/Tags/Tag.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Tags } from '.';
+
+export default {
+  title: 'components/Tags',
+  component: Tags,
+};
+
+export const Basic = () => <Tags tags={['one']} />;
+export const ManyTags = () => (
+  <Tags tags={['one', 'two', 'three', 'four', 'five']} />
+);
+export const Removable = () => (
+  <Tags removeTag={() => {}} tags={['one', 'two', 'three', 'four', 'five']} />
+);