TEMPLATES YAAAY (codesandbox#2003)

* start

* add styles

* move checkbox to common

* move template to common

* add hooooookd fam

* add actions

* add

* start modal

* start dashboard

* add color

* much progress on modal

* fix non logged in

* add empty state

* small fixes

* fix filtering

* update yarn lock

* final sandbnox modal fixes

* Update packages/common/src/components/Template/elements.ts

Co-Authored-By: Michaël De Boey <[email protected]>

* Small design tweaks

- Make the tabs animate on hover
- Remove main animation of screen, feels bit faster

* add edit and delete

* upadte state

* add hover

* ✨ Add Frozen/Editing Indicator, Apply Coding Conventions to Header (WIP)

Refactored a bunch of the Header components for better organization and to conform to coding conventions.

Added a new HazardButton primitive and used it to create a ToggleFrozenButton for the Sandbox Header. This button has the same effect as the Frozen toggle switch inside of the Project Info workspace and is used to give the user a visual indicator that they are viewing a frozen or editable sandbox.

TODO:
- Maybe move the HazardButton to common components and improve it's styling API. Could also use better types.
- Change the Fork button to show 'Use Template" when the current Sandbox is a Template. This would create a new Sandbox using the Template, but would sever the link to source GitHub repository, which the current Fork method preserves.
- Maybe rearrange the Header buttons?
- Continue refactoring remaining Header components to apply coding conventions.

* update state on start and edit

* 🔨 Refactor remaining Header components, Move onClick to Action container

Converted all Header sub-components to TypeScript using React Hooks.

As requested by @CompuIves, fixed the Action button behavior for onClick events, moving it from being triggered from clicks on the Icon to clicks on the container element.

* Update packages/app/src/app/pages/Sandbox/Editor/Header/Buttons/HazardButton/types.ts

Co-Authored-By: Michaël De Boey <[email protected]>

* add indicators

* add naming

* clean reload

* pr updates

* make components

* move to ts

* add gh check

* add warning modal

* remove header button0

* add store hooks

* Update packages/app/src/app/pages/Sandbox/Editor/Workspace/items/NotOwnedSandboxInfo/NotOwnedSandboxInfo.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/pages/Sandbox/Editor/Workspace/items/NotOwnedSandboxInfo/NotOwnedSandboxInfo.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* pr fixes

* Update packages/common/src/components/Tags/index.tsx

Co-Authored-By: Ives van Hoorne <[email protected]>

* Update packages/app/src/app/store/modules/workspace/sequences.js

Co-Authored-By: Ives van Hoorne <[email protected]>

* Update packages/app/src/app/store/modules/workspace/sequences.js

Co-Authored-By: Ives van Hoorne <[email protected]>

* pr fixers

* pr fixes

* revert deleted files

* fix now.json

* fix yarn

* fix icons

* fix ts

* Update packages/app/src/app/pages/Dashboard/Content/routes/PathedTemplates/index.js

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/pages/Dashboard/Content/routes/PathedTemplates/index.js

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/pages/Sandbox/Editor/Header/Buttons/Action/types.ts

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/pages/Dashboard/Content/routes/PathedTemplates/Folders.js

Co-Authored-By: Michaël De Boey <[email protected]>

* simplyfy types

* 🔨 Apply Coding Conventions to CreateNewSandboxModal

Applied our coding conventions, reorganized, and converted most of the CreateNewSandbox files to TypeScript.

Was unabled to refactor CreateNewSandbox/index.js as I wasn't quite sure about how it works. @CompuIves you may want to take a shot at this or otherwise I'll just have to come back to it later.

Tested locally, all the functionality appears to be the same as before.

* fix lint

* 🚧 WIP - Change file extensions on PathedTemplates/Navigation

* 🧹 Cleanup PathedTemplates/Navigation

Converted to TypeScript and applied coding conventions.

* 🧹 Cleanup PathedTemplates

Applied coding conventions and added types.

It's worth noting that I was unable to add types for react-router-dom without having to upgrade multiple dependencies, which quickly grew outside of the scope of this PR. So instead proper types will be added at a later date once the build process and project dependencies are overhauled.

* fx ts

* 📦 Update Apollo Dependencies to Latest

Verified to solve type checking errors in app

Ran lint, test, typecheck, and ran a cold start, all passed. Tested locally to verify graphql queries still worked

* Rename prop

* Capitalize titles

* Remove spaces from css rules

This should fix these rules not displaying properly

* Update packages/app/src/app/store/modules/workspace/sequences.js

Co-Authored-By: Ives van Hoorne <[email protected]>

* Update packages/app/src/app/store/modules/workspace/sequences.js

Co-Authored-By: Ives van Hoorne <[email protected]>

* Update packages/app/src/app/pages/Sandbox/Editor/Workspace/items/NotOwnedSandboxInfo/NotOwnedSandboxInfo.tsx

Co-Authored-By: Ives van Hoorne <[email protected]>

* Fix types

* Regenerate yarn.lock

* Reset yarn cache

* Refactor templates to remove path logic

* add converted; make width in before 56px

* Reset sidebar active style

* Add team templates, make the icon white on hover

* Put module.ts back from master, it's fixed with old yarn.lock

* move to common

* 🔨 Apply new design to ForkFrozenSandboxModal

* Fix typecheck

* 🔧 Fix common/Button children Type

Always use `React.ReactNode` for the `children` prop.

* add grid

* remove public checkbox

* fix lint

* 0fix descriptrion

* Support team templates

* 🔨 Apply new design to TempalteModal

Also applied padding changes to ForkFrozenSandboxModal and added a 8px border radius to all modal containers.

* fix minor card issues

* fix overflow

* Don't show modal asking for fork for custom templates

* Fix menu bar styling

* ⚡️ Swap Buttons on ForkFrozenSandboxModal, Add react-use

As requested by Bas, the Fork and Unlock buttons have been swapped and there is now an event listener on the Fork button to fork the sandbox on pressing "enter", which is handled by `useKeyPressEvent` from `react-use`.

* Changes based on our ideas yesterday

- Make the template title and description from the sandbox
- Hide templates from "My Sandboxes" and "Recent Sandboxes"
- Update header to not show folders for templates

* fix weird jumping behavior

* fix plus button on header

* fix description

* 📝 Fix Types on common/Button and app/TemplateModal, Upgrade TypeScript

Upgraded TypeScript to the latest version across all packages.

Fixed typechecck errors caused by missing/incorrect types.

* 📝 Fix Types on NewSandboxModal/MyTemplates

* fix header

* Dashboard sandbox improvements

* Add context menu item

* Fix context menu hover width

* design changes0

* Fix template xolor

* Fix type errors

* fix the title of the sandbox

* Fix the height of templates

* Fix

* Fix caching logic

* Fix a type

* Fix another type issue

* Show templates for deleted sandboxes

* Filter templates in client

* Fix template count

* Show team templates in modal

* some fixes

* Fix all templates

* Support template forking inside new sandbox modal

* 🔨 Refactor Sandbox Info, Add Template Config

WIP commit updating the Sandbox Info workspace to add template configuration controls according to Bas's design in Figma. Still requires testing and fine tuning.

* Allow exporting templates

* 🔧 Fix Sandbox Info, Add missing Peer Dependencies for react-use

Updated some react-use and react-spring to their latest in-range versions.

Added rebound and keyboardjs as recommended by this issue: streamich/react-use#187

Sandbox Info should all work now!

* 👕 Fix Linting Errors in Modals + Editor

* Fixes

* make notlogged in modal

* pr comments

* tweaks|

* add docs

* add tooltip to tenmplate in the header

* Tweaks

* Last fixes

* Fix lint

* Client

* More fixes

* Tweaks

* Patron fixes

* Style tweaks

* move template color to common

* add margin-top back on gh page

* 📚 (WIP) Add Documentation for Templates, Environment, Add Blog Post

Documentation for Templates still needs gifs. The blog post also needs the existing images replaced with gifs, and the Roadmap section needs to be completed as well, perhaps with additional closing thoughts.

Environment documentation is merely a draft and needs to be finished before it can be published.

* Remove mention of template from sidebar

* Fix types

* Improve types

* Move template filter to be environment filter

* Tweak styling of sandboxes in new sandbox modal

* Don't show templates in search results

* Make replaceHistory the default for name changes

* 📚 Update Roadmap section of Templates Blog Post

* Remove onMouseDown listener

* add gifs

* Update packages/homepage/content/articles/templates.md

Co-Authored-By: Ives van Hoorne <[email protected]>

* Update packages/homepage/content/articles/templates.md

Co-Authored-By: Ives van Hoorne <[email protected]>

* Update packages/homepage/content/articles/templates.md

Co-Authored-By: Ives van Hoorne <[email protected]>

* Update packages/homepage/content/articles/templates.md

Co-Authored-By: Ives van Hoorne <[email protected]>

* Update packages/homepage/content/articles/templates.md

Co-Authored-By: Ives van Hoorne <[email protected]>

* Update packages/homepage/content/docs/6-templates.md

Co-Authored-By: Ives van Hoorne <[email protected]>

* Apply suggestions from code review

Co-Authored-By: Ives van Hoorne <[email protected]>

* Update packages/homepage/content/docs/7-environment.md

Co-Authored-By: Ives van Hoorne <[email protected]>

* Apply suggestions from code review

Co-Authored-By: Ives van Hoorne <[email protected]>

* Apply suggestions from code review

Co-Authored-By: Ives van Hoorne <[email protected]>

* Add a bit of tracking

* 🎨 Crop Template Documentation Gifs

Removed browser address bar from all Templates gifs

* Fix modal showing in dashboard

* Style hovers

* 📚 Change wording on Client Environment configuration

* Sidebar fixes

* fix gifs in docs

* Update packages/homepage/content/docs/7-environment.md

Co-Authored-By: Ives van Hoorne <[email protected]>

* chnage to io

* 📚 Add Container Environment Explanation, Remove Bundlers

We'll add explanations for Bundlers at a later date.

* fix cards

* add environment link

* Apply suggestions from code review

Co-Authored-By: Ives van Hoorne <[email protected]>

* change cover image

* fix color picker

* remove alpha

* delete template modal

* 📚 Replace images in Templates Blog Post, Add More Details to Environment

* Remove template modal

* fix ts

* fix gatsby

Author: SaraVieira

.circleci/config.yml

@@ -6,21 +6,21 @@ version: 2.1
 
 aliases:
   - &restore_repo_cache
-    key: v18-repo-{{ .Environment.CIRCLE_SHA1 }}
+    key: v21-repo-{{ .Environment.CIRCLE_SHA1 }}
 
   - &save_repo_cache
-    key: v18-repo-{{ .Environment.CIRCLE_SHA1 }}
+    key: v21-repo-{{ .Environment.CIRCLE_SHA1 }}
     paths:
       - ~/codesandbox-client
 
   - &restore_deps_cache
     keys:
-      - v18-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
-      - v18-dependency-cache-{{ .Branch }}
-      - v18-dependency-cache
+      - v21-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+      - v21-dependency-cache-{{ .Branch }}
+      - v21-dependency-cache
 
   - &save_deps_cache
-    key: v18-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+    key: v21-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
     paths:
       - node_modules
       - packages/app/node_modules
@@ -39,29 +39,29 @@ aliases:
 
   - &restore_standalone_deps_cache
     keys:
-      - v18-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
-      - v18-standalone-dependency-cache-{{ .Branch }}
-      - v18-standalone-dependency-cache
+      - v21-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
+      - v21-standalone-dependency-cache-{{ .Branch }}
+      - v21-standalone-dependency-cache
 
   - &save_standalone_deps_cache
-    key: v18-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
+    key: v21-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
     paths:
       - standalone-packages/codesandbox-browserfs/node_modules
 
   - &restore_prod_build_cache
-    key: v18-prod-app-build-cache-master
+    key: v21-prod-app-build-cache-master
 
   - &restore_prod_cache
-    key: v18-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+    key: v21-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
 
   - &save_prod_app_cache
-    key: v18-prod-app-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+    key: v21-prod-app-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
     paths:
       - ./packages/app/www
       - ./packages/homepage/.cache
 
   - &save_prod_cache
-    key: v18-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+    key: v21-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
     paths:
       - ./www
 

.eslintrc

@@ -45,7 +45,10 @@
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "jsx-a11y/href-no-hash": "off",
-    "jsx-a11y/anchor-is-valid": ["warn", { "aspects": ["noHref", "invalidHref"] }],
+    "jsx-a11y/anchor-is-valid": [
+      "warn",
+      { "aspects": ["noHref", "invalidHref"] }
+    ],
     "jsx-a11y/label-has-for": "off"
   },
   "overrides": [

package.json

@@ -77,7 +77,7 @@
     "lerna": "^2.5.1",
     "prettier": "1.17.0",
     "pretty-quick": "^1.10.0",
-    "typescript": "3.4.5"
+    "typescript": "3.5.2"
   },
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^1.9.0",

packages/app/package.json

@@ -112,7 +112,7 @@
     "terser": "^3.17.0",
     "terser-webpack-plugin": "^1.2.3",
     "thread-loader": "^2.1.2",
-    "typescript": "3.3.4000",
+    "typescript": "3.5.2",
     "url-loader": "1.0.1",
     "webpack": "^4.35.0",
     "webpack-bundle-analyzer": "^2.13.1",
@@ -125,6 +125,7 @@
     "worker-loader": "2.0.0"
   },
   "dependencies": {
+    "@apollo/react-hooks": "^0.1.0-beta.2",
     "@babel/plugin-transform-destructuring": "^7.1.2",
     "@babel/preset-env": "^7.4.2",
     "@cerebral/http": "^4.0.0",
@@ -134,9 +135,9 @@
     "@svgr/core": "^2.4.1",
     "@vue/babel-preset-app": "^3.2.0",
     "airtable": "^0.5.8",
-    "apollo-boost": "^0.3.1",
-    "apollo-link-batch-http": "^1.2.2",
-    "apollo-link-context": "^1.0.8",
+    "apollo-boost": "^0.4.3",
+    "apollo-link-batch-http": "^1.2.12",
+    "apollo-link-context": "^1.0.18",
     "axios": "^0.19.0",
     "babel-code-frame": "^6.26.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.2",
@@ -198,6 +199,7 @@
     "jest-each": "^24.8.0",
     "jest-snapshot": "^22.1.2",
     "jszip": "^3.1.3",
+    "keyboardjs": "^2.5.1",
     "localforage": "^1.5.5",
     "lodash-es": "^4.17.2",
     "lru-cache": "^4.1.3",
@@ -230,7 +232,8 @@
     "rc-slider": "^8.2.0",
     "react": "^16.8.6",
     "react-addons-css-transition-group": "^15.6.0",
-    "react-apollo": "^2.5.4",
+    "react-apollo": "^2.5.6",
+    "react-color": "^2.17.3",
     "react-day-picker": "^7.2.4",
     "react-dnd": "^7.0.2",
     "react-dnd-html5-backend": "^2.4.1",
@@ -244,13 +247,16 @@
     "react-media": "^1.9.2",
     "react-modal": "^3.6.1",
     "react-motion": "^0.5.0",
+    "react-outside-click-handler": "^1.2.3",
     "react-router-dom": "^4.3.1",
     "react-show": "^3.0.4",
     "react-split-pane": "^0.1.85",
-    "react-spring": "^8.0.19",
+    "react-spring": "^8.0.25",
     "react-stripe-elements": "^1.2.0",
     "react-tagsinput": "^3.19.0",
+    "react-use": "^9.7.2",
     "react-virtualized": "^9.19.1",
+    "rebound": "^0.1.0",
     "resize-observer-polyfill": "^1.5.1",
     "sha1": "^1.1.1",
     "shelljs": "^0.7.8",

packages/app/src/app/components/ContextMenu/elements.js

@@ -35,6 +35,7 @@ export const Item = styled.button`
   border-left: 2px solid transparent;
   cursor: pointer;
 
+  width: 100%;
   min-width: 10rem;
 
   svg {

…app/components/DelayedAnimation/index.js …app/components/DelayedAnimation/index.tspackages/app/src/app/components/DelayedAnimation/index.js renamed to packages/app/src/app/components/DelayedAnimation/index.ts packages/app/src/app/components/DelayedAnimation/index.js renamed to packages/app/src/app/components/DelayedAnimation/index.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
 
-export default styled.div`
+export default styled.div<{ delay?: number }>`
   ${props => delayEffect(props.delay || 0)};
 `;

packages/app/src/app/components/Modal/elements.js

@@ -1,22 +1,30 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const CLOSE_TIMEOUT_MS = 300;
 
 export const BaseModal = styled.div`
-  background-color: ${props => props.theme.background3};
+  ${({ theme }) => css`
+    border-radius: 8px;
+    background-color: ${theme.background3};
+  `}
 `;
 
 export const ModalTitle = styled.h1`
-  background-color: ${props => props.theme.secondary};
-  color: white;
-  padding: 1rem;
-  margin: 0;
-  font-size: 1.25rem;
-  text-align: center;
-  background-image: linear-gradient(-225deg, #31b0ff 0%, #47a8e5 100%);
+  ${({ theme }) => css`
+    padding: 1rem;
+    margin: 0;
+    background-color: ${theme.secondary};
+    background-image: linear-gradient(-225deg, #31b0ff 0%, #47a8e5 100%);
+    color: white;
+    font-size: 1.25rem;
+    text-align: center;
+  `}
 `;
 
 export const ModalBody = styled.div`
-  background-color: ${props => props.theme.background2};
-  color: rgba(255, 255, 255, 0.8);
+  ${({ theme }) => css`
+    border-radius: 8px;
+    background-color: ${theme.background2};
+    color: rgba(255, 255, 255, 0.8);
+  `}
 `;

packages/app/src/app/components/Modal/index.js

@@ -73,7 +73,7 @@ class ModalComponent extends React.Component {
       right: 0,
       margin: `0 auto ${top}vh`,
       border: 'none',
-      borderRadius: '4px',
+      borderRadius: '8px',
     },
   });
 

packages/app/src/app/components/PrivacyStatus/index.js

@@ -3,7 +3,7 @@ import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 
 import { StyledUnlisted, StyledPrivate, Icon } from './elements';
 
-function PrivacyStatus({ privacy, asIcon }) {
+function PrivacyStatus({ privacy, asIcon = null }) {
   const PRIVACY_MESSAGES = {
     0: {
       title: 'Public',

packages/app/src/app/components/Title/index.js

@@ -4,7 +4,7 @@ import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
 export default styled.h1`
   ${props => props.delay != null && delayEffect(props.delay || 0)};
   color: white;
-  font-size: 2.5rem;
+  font-size: 2rem;
   font-weight: 300;
   background-color: transparent;
   margin-top: 0;