Prettify codebase (codesandbox#2968)

Author: MichaelDeBoey

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Keywords.tsx

@@ -8,10 +8,10 @@ import { useOvermind } from 'app/overmind';
 
 import { Item } from './elements';
 
-interface IKeywordsProps {
+type Props = {
   editable?: boolean;
 };
-export const Keywords: FunctionComponent<IKeywordsProps> = ({ editable }) => {
+export const Keywords: FunctionComponent<Props> = ({ editable }) => {
   const {
     actions: {
       workspace: { tagChanged, tagsChanged },

packages/app/src/app/pages/Sandbox/SignOutNoticeModal/index.tsx

@@ -43,4 +43,4 @@ export const SignOutNotice = () => {
       </Row>
     </Container>
   );
-}
+};

packages/app/src/app/pages/common/Modals/PRModal/index.tsx

@@ -33,4 +33,4 @@ const PRModal: FunctionComponent = () => {
   );
 };
 
-export default PRModal
+export default PRModal;

packages/app/src/app/pages/common/Modals/PreferencesModal/Badges/index.tsx

@@ -1,17 +1,18 @@
-import React, {FunctionComponent} from 'react';
-import { useOvermind } from 'app/overmind';
-
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import Badge from '@codesandbox/common/lib/utils/badges/Badge';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
 import { Title } from '../elements';
 
 export const Badges: FunctionComponent = () => {
   const {
     state: {
-      user: {badges},
+      user: { badges },
     },
     actions: {
-      preferences: {setBadgeVisibility},
+      preferences: { setBadgeVisibility },
     },
   } = useOvermind();
   const badgesCount = badges.length;
@@ -43,5 +44,4 @@ export const Badges: FunctionComponent = () => {
       </Margin>
     </div>
   );
-}
-
+};

packages/app/src/app/pages/common/Modals/SelectSandboxModal/index.tsx

@@ -7,19 +7,16 @@ import Sandbox from './Sandbox';
 export const SelectSandboxModal: FunctionComponent = () => {
   const {
     state: {
-      profile: {
-        isLoadingSandboxes,
-        showcasedSandbox,
-        userSandboxes
-      }
+      profile: { isLoadingSandboxes, showcasedSandbox, userSandboxes },
     },
     actions: {
-      profile: { newSandboxShowcaseSelected }
-    }
+      profile: { newSandboxShowcaseSelected },
+    },
   } = useOvermind();
 
-  if (isLoadingSandboxes)
+  if (isLoadingSandboxes) {
     return <Padding>Loading sandboxes...</Padding>;
+  }
 
   const currentShowcasedSandboxId = showcasedSandbox && showcasedSandbox.id;
 

packages/app/src/app/pages/common/Modals/StorageManagementModal/index.tsx

@@ -1,6 +1,8 @@
-import React from 'react';
 import filesize from 'filesize';
+import React, { FunctionComponent } from 'react';
+
 import { useOvermind } from 'app/overmind';
+
 import {
   Container,
   Title,
@@ -13,56 +15,48 @@ import {
 } from './elements';
 import FilesList from './FilesList';
 
-export const StorageManagementModal: React.FC = () => {
+export const StorageManagementModal: FunctionComponent = () => {
   const {
-    state: {
-      usedStorage,
-      maxStorage,
-      uploadedFiles
-    },
+    state: { usedStorage, maxStorage, uploadedFiles },
     actions: {
-      files: {
-        deletedUploadedFile,
-        addedFileToSandbox,
-
-       }
-    }
+      files: { deletedUploadedFile, addedFileToSandbox },
+    },
   } = useOvermind();
 
-    const isLoading = uploadedFiles === null;
-    const isEmpty = !isLoading && uploadedFiles.length === 0;
+  const isLoading = uploadedFiles === null;
+  const isEmpty = !isLoading && uploadedFiles.length === 0;
+
+  return (
+    <Container>
+      <JustifiedArea>
+        <Title>Storage Management</Title>
+
+        <SubTitle>
+          Used {filesize(usedStorage)}
+          {' / '}
+          Total {filesize(maxStorage)}
+        </SubTitle>
+      </JustifiedArea>
+
+      <Description>
+        This is where you can manage your uploaded files.
+      </Description>
+
+      <Rule />
+
+      {!isEmpty && !isLoading && (
+        <FilesList
+          files={uploadedFiles}
+          deleteFile={deletedUploadedFile}
+          deleteFiles={files => files.map(id => deletedUploadedFile({ id }))}
+          addFilesToSandbox={files => files.map(addedFileToSandbox)}
+          addFileToSandbox={addedFileToSandbox}
+        />
+      )}
+
+      {isEmpty && <SubDescription>You have no uploaded files.</SubDescription>}
 
-    return (
-      <Container>
-        <JustifiedArea>
-          <Title>Storage Management</Title>
-          <SubTitle>
-            Used {filesize(usedStorage)}
-            {' / '}
-            Total {filesize(maxStorage)}
-          </SubTitle>
-        </JustifiedArea>
-        <Description>
-          This is where you can manage your uploaded files.
-        </Description>
-        <Rule />
-        {!isEmpty && !isLoading && (
-          <FilesList
-            files={uploadedFiles}
-            deleteFile={deletedUploadedFile}
-            deleteFiles={files =>
-              files.map(id => deletedUploadedFile({ id }))
-            }
-            addFilesToSandbox={files =>
-              files.map(addedFileToSandbox)
-            }
-            addFileToSandbox={addedFileToSandbox}
-          />
-        )}
-        {isEmpty && (
-          <SubDescription>You have no uploaded files.</SubDescription>
-        )}
-        {isLoading && <LoadingAnimationContainer />}
-      </Container>
-    );
-}
+      {isLoading && <LoadingAnimationContainer />}
+    </Container>
+  );
+};

packages/homepage/content/docs/2-importing.md

@@ -177,16 +177,17 @@ example sandbox of that is here:
 You can export a local component to CodeSandbox by using our other
 [CLI](https://github.com/codesandbox/codesandboxer/tree/master/packages/codesandboxer-fs).
 
-You can install our CLI by running `npm install -g codesandboxer-fs`. Then you can
-export a project by running `codesandboxer {filePath}`.
+You can install our CLI by running `npm install -g codesandboxer-fs`. Then you
+can export a project by running `codesandboxer {filePath}`.
 
 ```
 $ npm install -g codesandboxer-fs
 $ codesandboxer docs/examples/my-single-component.js
 ```
 
-This will print out the id of a sandbox that does nothing but render the targeted component, along with a link to that sandbox. This will also bundle in other local files used by the component to ensure render.
-
+This will print out the id of a sandbox that does nothing but render the
+targeted component, along with a link to that sandbox. This will also bundle in
+other local files used by the component to ensure render.
 
 ## Import Using React-Codesandboxer
 

packages/homepage/content/docs/3-deployment.md

@@ -33,9 +33,8 @@ With [Netlify](https://netlify.com) you don't even need to connect to your
 account. This means you can create deployments to share and use even if you
 don't have a [Netlify](https://netlify.com) account.
 
-Some templates are better than others, but as of now, we
-have a number of templates that support [Netlify](https://netlify.com)
-deployments:
+Some templates are better than others, but as of now, we have a number of
+templates that support [Netlify](https://netlify.com) deployments:
 
 - React
 - Vue

packages/homepage/src/css/global.css

@@ -51,12 +51,10 @@ twitter-widget {
   margin-right: auto;
 }
 
-@media screen and
-  (prefers-reduced-motion: reduce), 
-  (update: slow) {
+@media screen and (prefers-reduced-motion: reduce), (update: slow) {
   * {
     animation-duration: 0.001ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.001ms !important;
   }
-}
+}