🔨 Switch Project to use useOvermind

packages/app/package.json

@@ -252,6 +252,7 @@
     "@types/phoenix": "^1.4.0",
     "@types/prop-types": "^15.7.0",
     "@types/react": "^16.8.12",
+    "@types/react-color": "^2.17.2",
     "@types/react-dom": "^16.8.3",
     "@types/react-helmet": "^5.0.11",
     "@types/react-icons": "2.2.7",

packages/app/src/app/overmind/namespaces/workspace/actions.ts

@@ -188,9 +188,10 @@ export const sandboxDeleted: AsyncAction = async ({
   effects.router.redirectToSandboxWizard();
 };
 
-export const sandboxPrivacyChanged: AsyncAction<{
-  privacy: 0 | 1 | 2;
-}> = async ({ state, effects, actions }, { privacy }) => {
+export const sandboxPrivacyChanged: AsyncAction<0 | 1 | 2> = async (
+  { actions, effects, state },
+  privacy
+) => {
   const oldPrivacy = state.editor.currentSandbox.privacy;
   const sandbox = await effects.api.updatePrivacy(
     state.editor.currentSandbox.id,

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/elements.ts

@@ -3,9 +3,7 @@ import styled, { css } from 'styled-components';
 export const SandboxAlias = styled.div`
   ${({ theme }) => css`
     margin-top: 0.5rem;
-    color: ${theme.light
-      ? css`rgba(0, 0, 0, 0.8)`
-      : css`rgba(255, 255, 255, 0.8)`};
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
     font-size: 0.875rem;
   `}
 `;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/index.tsx

@@ -0,0 +1,69 @@
+import { ESC } from '@codesandbox/common/lib/utils/keycodes';
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  KeyboardEvent,
+  useState,
+} from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { WorkspaceInputContainer } from '../../elements';
+
+import { EditPenIcon } from '../elements';
+
+import { SandboxAlias } from './elements';
+
+type Props = {
+  editable: boolean;
+};
+export const Alias: FunctionComponent<Props> = ({ editable }) => {
+  const {
+    actions: {
+      workspace: { sandboxInfoUpdated, valueChanged },
+    },
+    state: {
+      editor: { currentSandbox },
+      workspace: { project },
+    },
+  } = useOvermind();
+  const [editing, setEditing] = useState(false);
+
+  const alias = project.alias || currentSandbox.alias;
+
+  return editing ? (
+    <WorkspaceInputContainer>
+      <input
+        onBlur={() => {
+          sandboxInfoUpdated();
+
+          setEditing(false);
+        }}
+        onChange={({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+          valueChanged({ field: 'alias', value });
+        }}
+        onKeyUp={({ keyCode }: KeyboardEvent<HTMLInputElement>) => {
+          if (keyCode === ESC) {
+            sandboxInfoUpdated();
+
+            setEditing(false);
+          }
+        }}
+        placeholder="Alias"
+        type="text"
+        value={alias}
+        ref={el => {
+          if (el) {
+            el.focus();
+          }
+        }}
+      />
+    </WorkspaceInputContainer>
+  ) : (
+    <SandboxAlias>
+      {alias}
+
+      {editable && <EditPenIcon onClick={() => setEditing(true)} />}
+    </SandboxAlias>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author/elements.ts

@@ -0,0 +1,11 @@
+import { Link } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+
+export const UserLink = styled(Link)`
+  ${({ theme }) => css`
+    display: block;
+    color: ${theme[`editor.foreground`] || css`rgba(255, 255, 255, 0.8)`};
+    font-size: 0.875rem;
+    text-decoration: none;
+  `}
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author/index.tsx

@@ -0,0 +1,33 @@
+import { UserWithAvatar } from '@codesandbox/common/lib/components/UserWithAvatar';
+import { profileUrl } from '@codesandbox/common/lib/utils/url-generator';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { Item } from '../elements';
+
+import { UserLink } from './elements';
+
+export const Author: FunctionComponent = () => {
+  const {
+    state: {
+      editor: {
+        currentSandbox: {
+          author: { username, avatarUrl, subscriptionSince },
+        },
+      },
+    },
+  } = useOvermind();
+
+  return (
+    <Item>
+      <UserLink title={username} to={profileUrl(username)}>
+        <UserWithAvatar
+          avatarUrl={avatarUrl}
+          subscriptionSince={subscriptionSince}
+          username={username}
+        />
+      </UserLink>
+    </Item>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/elements.ts

@@ -1,5 +1,7 @@
 import styled, { css } from 'styled-components';
 
+import { WorkspaceInputContainer as WorkspaceInputContainerBase } from '../../elements';
+
 export const SandboxDescription = styled.div<{ empty: boolean }>`
   ${({ empty, theme }) => css`
     margin-top: 0.5rem;
@@ -10,3 +12,7 @@ export const SandboxDescription = styled.div<{ empty: boolean }>`
     font-style: ${empty ? 'normal' : 'italic'};
   `}
 `;
+
+export const WorkspaceInputContainer = styled(WorkspaceInputContainerBase)`
+  margin: 0 -0.25rem;
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/Description.tsx → packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/index.tsx

@@ -1,13 +1,16 @@
 import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
-import React, { FunctionComponent, useState } from 'react';
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  KeyboardEvent,
+  useState,
+} from 'react';
 
 import { useOvermind } from 'app/overmind';
 
-import { WorkspaceInputContainer } from '../../elements';
+import { EditPenIcon } from '../elements';
 
-import { EditPen } from '../elements';
-
-import { SandboxDescription } from './elements';
+import { SandboxDescription, WorkspaceInputContainer } from './elements';
 
 type Props = {
   editable: boolean;
@@ -25,44 +28,44 @@ export const Description: FunctionComponent<Props> = ({ editable }) => {
   } = useOvermind();
   const [editing, setEditing] = useState(false);
 
-  const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (event.keyCode === ENTER && !event.shiftKey) {
       event.preventDefault();
       event.stopPropagation();
+
       sandboxInfoUpdated();
+
       setEditing(false);
     }
   };
 
   return editing ? (
-    <WorkspaceInputContainer style={{ margin: '0 -0.25rem' }}>
+    <WorkspaceInputContainer>
       <textarea
-        rows={2}
+        onBlur={() => {
+          sandboxInfoUpdated();
+
+          setEditing(false);
+        }}
+        onChange={({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) => {
+          valueChanged({ field: 'description', value });
+        }}
+        onKeyDown={onKeyDown}
         placeholder="Description"
-        value={description}
         ref={el => {
           if (el) {
             el.focus();
           }
         }}
-        onKeyDown={onKeyDown}
-        onChange={event => {
-          valueChanged({
-            field: 'description',
-            value: event.target.value,
-          });
-        }}
-        onBlur={() => {
-          sandboxInfoUpdated();
-          setEditing(false);
-        }}
+        rows={2}
+        value={description}
       />
     </WorkspaceInputContainer>
   ) : (
     <SandboxDescription empty={Boolean(description)}>
       {description || (editable ? 'No description, create one!' : '')}
 
-      {editable && <EditPen onClick={() => setEditing(true)} />}
+      {editable && <EditPenIcon onClick={() => setEditing(true)} />}
     </SandboxDescription>
   );
 };

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/elements.ts

@@ -0,0 +1,10 @@
+import styled, { css } from 'styled-components';
+
+export const BundlerLink = styled.a.attrs({
+  target: '_blank',
+  rel: 'noreferrer noopener',
+})`
+  ${({ theme }) => css`
+    color: ${theme.templateColor} !important;
+  `}
+`;