🔨 Switch ConfigurationFiles to use useOvermind

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/ExistingConfigurations.tsx

@@ -0,0 +1,40 @@
+import { ConfigurationFile } from '@codesandbox/common/lib/templates/configuration/types';
+import { Module } from '@codesandbox/common/lib/types';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { WorkspaceSubtitle } from '../../elements';
+
+import { FileConfig } from './FileConfig';
+
+type Props = {
+  paths: {
+    [key: string]: {
+      config: ConfigurationFile;
+      module: Module;
+    };
+  };
+};
+export const ExistingConfigurations: FunctionComponent<Props> = ({ paths }) => {
+  const {
+    actions: {
+      editor: { moduleSelected },
+    },
+  } = useOvermind();
+
+  return (
+    <>
+      <WorkspaceSubtitle>Existing Configurations</WorkspaceSubtitle>
+
+      {Object.entries(paths).map(([path, info]) => (
+        <FileConfig
+          info={info}
+          key={path}
+          openModule={id => moduleSelected({ id })}
+          path={path}
+        />
+      ))}
+    </>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/FileConfig/elements.ts

@@ -0,0 +1,54 @@
+import styled, { css } from 'styled-components';
+
+export const File = styled.div<{ created: boolean }>`
+  ${({ created }) => css`
+    position: relative;
+    transition: 0.3s ease background-color;
+    padding: 0.75rem 1rem;
+
+    ${created &&
+      css`
+        cursor: pointer;
+      `};
+
+    ${!created &&
+      css`
+        opacity: 0.9;
+      `};
+  `};
+`;
+
+export const CreateButton = styled.button`
+  ${({ theme }) => css`
+    padding: 0.25rem 0.4rem;
+    background-color: ${theme.secondary};
+    border: none;
+    font-size: 0.75rem;
+    color: white;
+    border-radius: 2px;
+    font-weight: 600;
+    cursor: pointer;
+    margin-top: 0.75rem;
+  `};
+`;
+
+export const FileTitle = styled.div`
+  ${({ theme }) => css`
+    font-weight: 600;
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
+    font-size: 1rem;
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    vertical-align: middle;
+  `};
+`;
+
+export const FileDescription = styled.p`
+  ${({ theme }) => css`
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+    font-weight: 400;
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
+    margin-bottom: 0;
+  `};
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/FileConfig/index.tsx

@@ -0,0 +1,61 @@
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import getUI from '@codesandbox/common/lib/templates/configuration/ui';
+import { Module, Configuration } from '@codesandbox/common/lib/types';
+import React, { FunctionComponent } from 'react';
+import UIIcon from 'react-icons/lib/md/dvr';
+import BookIcon from 'react-icons/lib/md/library-books';
+
+import { CreateButton, File, FileDescription, FileTitle } from './elements';
+
+type Props = {
+  path: string;
+  info: {
+    module?: Module;
+    config: Configuration;
+  };
+  createModule?: (title: string) => void;
+  openModule?: (id: string) => void;
+};
+export const FileConfig: FunctionComponent<Props> = ({
+  info: { module, config },
+  path,
+  createModule,
+  openModule,
+}) => (
+  <File
+    created={Boolean(module)}
+    key={path}
+    onClick={openModule ? () => openModule(module.id) : undefined}
+  >
+    <FileTitle>
+      {config.title}{' '}
+      <Tooltip content="More Info">
+        <a
+          href={config.moreInfoUrl}
+          target="_blank"
+          rel="noreferrer noopener"
+          title="Documentation"
+          style={{ marginLeft: '.25rem' }}
+        >
+          <BookIcon />
+        </a>
+      </Tooltip>
+      {getUI(config.type) && (
+        <Tooltip content="Editable with UI">
+          <UIIcon style={{ marginLeft: '.5rem' }} />
+        </Tooltip>
+      )}
+    </FileTitle>
+
+    <FileDescription>{config.description}</FileDescription>
+
+    {!module && (
+      <CreateButton
+        // TODO make this support nested paths (create dir etc)
+        onClick={() => createModule(config.title)}
+      >
+        Create File
+      </CreateButton>
+    )}
+  </File>
+);

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/OtherConfigurations.tsx

@@ -0,0 +1,44 @@
+import { ConfigurationFile } from '@codesandbox/common/lib/templates/configuration/types';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { WorkspaceSubtitle } from '../../elements';
+
+import { FileConfig } from './FileConfig';
+
+type Props = {
+  paths: {
+    [key: string]: {
+      config: ConfigurationFile;
+    };
+  };
+};
+export const OtherConfigurations: FunctionComponent<Props> = ({ paths }) => {
+  const {
+    actions: {
+      files: { moduleCreated },
+    },
+  } = useOvermind();
+
+  if (Object.entries(paths).length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <WorkspaceSubtitle>Other Configurations</WorkspaceSubtitle>
+
+      {Object.entries(paths).map(([path, info]) => (
+        <FileConfig
+          createModule={title =>
+            moduleCreated({ directoryShortid: null, title })
+          }
+          info={info}
+          key={path}
+          path={path}
+        />
+      ))}
+    </>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/elements.ts

@@ -1,47 +1,5 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 export const FilesContainer = styled.div`
   margin-top: 1rem;
 `;
-
-export const File = styled.div<{ created: boolean }>`
-  ${({ created }) => css`
-    position: relative;
-    transition: 0.3s ease background-color;
-    padding: 0.75rem 1rem;
-
-    ${created && `cursor: pointer`};
-    ${!created && `opacity: 0.9`};
-  `}
-`;
-
-export const CreateButton = styled.button`
-  padding: 0.25rem 0.4rem;
-  background-color: ${props => props.theme.secondary};
-  border: none;
-  font-size: 0.75rem;
-  color: white;
-  border-radius: 2px;
-  font-weight: 600;
-  cursor: pointer;
-  margin-top: 0.75rem;
-`;
-
-export const FileTitle = styled.div`
-  font-weight: 600;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
-  font-size: 1rem;
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-  vertical-align: middle;
-`;
-
-export const FileDescription = styled.p`
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
-  font-weight: 400;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
-  margin-bottom: 0;
-`;