From 6e60a81e01d4d6834535db0736577d5294097545 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 8 Feb 2020 13:22:46 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Switch=20ConfigurationFiles=20to?= =?UTF-8?q?=20use=20useOvermind?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ExistingConfigurations.tsx | 40 +++++ .../ConfigurationFiles/FileConfig/elements.ts | 54 ++++++ .../ConfigurationFiles/FileConfig/index.tsx | 61 +++++++ .../OtherConfigurations.tsx | 44 +++++ .../items/ConfigurationFiles/elements.ts | 44 +---- .../items/ConfigurationFiles/index.tsx | 156 +++--------------- 6 files changed, 224 insertions(+), 175 deletions(-) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/ExistingConfigurations.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/FileConfig/elements.ts create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/FileConfig/index.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/OtherConfigurations.tsx diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/ExistingConfigurations.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/ExistingConfigurations.tsx new file mode 100644 index 00000000000..9db41055e06 --- /dev/null +++ b/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 = ({ paths }) => { + const { + actions: { + editor: { moduleSelected }, + }, + } = useOvermind(); + + return ( + <> + Existing Configurations + + {Object.entries(paths).map(([path, info]) => ( + moduleSelected({ id })} + path={path} + /> + ))} + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/FileConfig/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/FileConfig/elements.ts new file mode 100644 index 00000000000..d0f66f945cd --- /dev/null +++ b/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; + `}; +`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/FileConfig/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/FileConfig/index.tsx new file mode 100644 index 00000000000..c106bb20bee --- /dev/null +++ b/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 = ({ + info: { module, config }, + path, + createModule, + openModule, +}) => ( + openModule(module.id) : undefined} + > + + {config.title}{' '} + + + + + + {getUI(config.type) && ( + + + + )} + + + {config.description} + + {!module && ( + createModule(config.title)} + > + Create File + + )} + +); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/OtherConfigurations.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/OtherConfigurations.tsx new file mode 100644 index 00000000000..d4ab41fdb97 --- /dev/null +++ b/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 = ({ paths }) => { + const { + actions: { + files: { moduleCreated }, + }, + } = useOvermind(); + + if (Object.entries(paths).length === 0) { + return null; + } + + return ( + <> + Other Configurations + + {Object.entries(paths).map(([path, info]) => ( + + moduleCreated({ directoryShortid: null, title }) + } + info={info} + key={path} + path={path} + /> + ))} + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/elements.ts index 2a545719fc5..2c5798d3285 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/elements.ts +++ b/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; -`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/index.tsx index df1dbb99611..b5fb3c27534 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/index.tsx @@ -1,115 +1,36 @@ -import React from 'react'; -import getDefinition from '@codesandbox/common/lib/templates'; -import getUI from '@codesandbox/common/lib/templates/configuration/ui'; -import { Module, Configuration } from '@codesandbox/common/lib/types'; import { resolveModule } from '@codesandbox/common/lib/sandbox/modules'; +import getTemplateDefinition from '@codesandbox/common/lib/templates'; +import React, { ComponentProps, FunctionComponent } from 'react'; import { useOvermind } from 'app/overmind'; -import BookIcon from 'react-icons/lib/md/library-books'; -import UIIcon from 'react-icons/lib/md/dvr'; +import { Description } from '../../elements'; -import Tooltip from '@codesandbox/common/lib/components/Tooltip'; +import { FilesContainer } from './elements'; +import { ExistingConfigurations } from './ExistingConfigurations'; +import { OtherConfigurations } from './OtherConfigurations'; -import { Description, WorkspaceSubtitle } from '../../elements'; -import { - FilesContainer, - File, - FileTitle, - FileDescription, - CreateButton, -} from './elements'; - -type FileConfigProps = { - path: string; - info: { - module?: Module; - config: Configuration; - }; - createModule?: (title: string) => void; - openModule?: (id: string) => void; -}; - -const FileConfig = ({ - info, - path, - createModule, - openModule, -}: FileConfigProps) => { - const { module, config } = info; - return ( - { - openModule(module.id); - } - : undefined - } - > - - {config.title}{' '} - - - - - - {getUI(config.type) && ( - - - - )} - - {config.description} - {!module && ( - { - // TODO make this support nested paths (create dir etc) - createModule(info.config.title); - }} - > - Create File - - )} - - ); -}; - -export const ConfigurationFiles = () => { +type CreatedPaths = ComponentProps['paths']; +type RestPaths = ComponentProps['paths']; +export const ConfigurationFiles: FunctionComponent = () => { const { - state, - actions: { files, editor }, + state: { + editor: { currentSandbox: sandbox }, + }, } = useOvermind(); + const { configurationFiles } = getTemplateDefinition(sandbox.template); - const sandbox = state.editor.currentSandbox; - const { configurationFiles } = getDefinition(sandbox.template); - - const createdPaths = {}; - const restPaths = {}; - - Object.keys(configurationFiles) - .sort() - .forEach(p => { - const config = configurationFiles[p]; + const createdPaths: CreatedPaths = {}; + const restPaths: RestPaths = {}; + Object.entries(configurationFiles) + .sort(([keyA], [keyB]) => keyA.localeCompare(keyB)) + .forEach(([key, config]) => { try { - const module = resolveModule(p, sandbox.modules, sandbox.directories); - createdPaths[p] = { - config, - module, - }; - } catch (e) { - restPaths[p] = { - config, - }; + const module = resolveModule(key, sandbox.modules, sandbox.directories); + createdPaths[key] = { config, module }; + } catch { + restPaths[key] = { config }; } }); @@ -121,38 +42,9 @@ export const ConfigurationFiles = () => { - Existing Configurations - {Object.keys(createdPaths).map(path => { - const info = createdPaths[path]; - - return ( - { - editor.moduleSelected({ id }); - }} - path={path} - info={info} - /> - ); - })} - {!!Object.keys(restPaths).length && ( - Other Configurations - )} - {Object.keys(restPaths).map(path => { - const info = restPaths[path]; + - return ( - { - files.moduleCreated({ title, directoryShortid: null }); - }} - path={path} - info={info} - /> - ); - })} + );