[pull] master from codesandbox:master

.circleci/config.yml

@@ -270,7 +270,7 @@ commands:
         default: '$DOCKER_PWD'
     steps:
       - setup_remote_docker:
-          version: 20.10.23
+          version: default
           docker_layer_caching: true
       - restore_cache: *restore_prod_result
       - run:
@@ -407,18 +407,18 @@ workflows:
           filters:
             branches:
               only:
-                - master
+                - main
       - deploy-staging-approval:
           type: approval
           filters:
             branches:
               ignore:
-                - master
+                - main
       - deploy-to-staging:
           requires:
             - deploy-staging-approval
             - create-docker-image
           filters:
             branches:
               ignore:
-                - master
+                - main

.codesandbox/tasks.json

@@ -35,7 +35,7 @@
     "app:fast:stream": {
       "name": "Application (fast + stream)",
       "command": "yarn start:fast:stream",
-      "runAtStart": true,
+      "runAtStart": false,
       "preview": {
         "port": 3000
       },
@@ -50,6 +50,18 @@
     "typecheck": {
       "name": "typecheck",
       "command": "yarn typecheck"
+    },
+    "lint": {
+      "name": "lint",
+      "command": "yarn lint"
+    },
+    "start:sandpack-sandbox": {
+      "name": "start:sandpack-sandbox",
+      "command": "cd packages/app && yarn start:sandpack-sandbox"
+    },
+    "start:sandpack-core": {
+      "name": "start:sandpack-core",
+      "command": "cd packages/sandpack-core && yarn start"
     }
   }
 }

.github/ISSUE_TEMPLATE/BUG.md

@@ -36,6 +36,6 @@ Your best chance of getting this bug looked at quickly is to provide an example.
 | Operating System |              |
 
 <!-- prettier-ignore-start -->
-[code_of_conduct]: https://github.com/codesandbox/codesandbox-client/blob/master/CODE_OF_CONDUCT.md
-[contributing]: https://github.com/codesandbox/codesandbox-client/blob/master/CONTRIBUTING.md
+[code_of_conduct]: https://github.com/codesandbox/codesandbox-client/blob/main/CODE_OF_CONDUCT.md
+[contributing]: https://github.com/codesandbox/codesandbox-client/blob/main/CONTRIBUTING.md
 <!-- prettier-ignore-end -->

CONTRIBUTING.md

@@ -28,7 +28,7 @@ share dependencies between these parts.
   backends. Forked from
   [https://github.com/jvilk/BrowserFS](https://github.com/jvilk/BrowserFS), with
   an additional
-  [CodeSandbox backend](https://github.com/codesandbox/codesandbox-client/blob/master/standalone-packages/codesandbox-browserfs/src/backend/CodeSandboxFS.ts).
+  [CodeSandbox backend](https://github.com/codesandbox/codesandbox-client/blob/main/standalone-packages/codesandbox-browserfs/src/backend/CodeSandboxFS.ts).
 
 This version of CodeSandbox is using the production server as source of truth,
 this is specified by the environment variable `LOCAL_SERVER`. If you're working
@@ -71,22 +71,24 @@ To install the project you need to have `yarn` and `node`
     - on subsequent runs you can also bypass dependencies building and use
       `yarn start:fast`
 
-> Tip: Keep your `master` branch pointing at the original repository and make
-> pull requests from branches on your fork. To do this, run:
+> Tip: Keep your `main` branch pointing at the original repository and make pull
+> requests from branches on your fork. To do this, run:
 >
 > ```sh
 > git remote add upstream https://github.com/codesandbox/codesandbox-client.git
 > git fetch upstream
-> git branch --set-upstream-to=upstream/master master
+> git branch --set-upstream-to=upstream/main main
 > ```
 >
 > This will add the original repository as a "remote" called "upstream," then
-> fetch the git information from that remote, then set your local `master`
-> branch to use the upstream master branch whenever you run `git pull`. Then you
-> can make all of your pull request branches based on this `master` branch.
-> Whenever you want to update your version of `master`, do a regular `git pull`.
-
-5. If you want to debug the state of the app, use `npx overmind-devtools` and make sure that the app is running. Learn more [here](https://overmindjs.org/core/devtools).
+> fetch the git information from that remote, then set your local `main` branch
+> to use the upstream main branch whenever you run `git pull`. Then you can make
+> all of your pull request branches based on this `main` branch. Whenever you
+> want to update your version of `main`, do a regular `git pull`.
+
+5. If you want to debug the state of the app, use `npx overmind-devtools` and
+   make sure that the app is running. Learn more
+   [here](https://overmindjs.org/core/devtools).
 
 ## Submitting a Pull Request
 

contributor-docs/adding-template.md

@@ -87,12 +87,12 @@ add (**sandbox** vs. **container**).
 
 To get started, you should first follow the steps in our contribution guidelines
 in order to
-[set up CodeSandbox locally](https://github.com/codesandbox/codesandbox-client/blob/master/CONTRIBUTING.md#setting-up-the-project-locally).
+[set up CodeSandbox locally](https://github.com/codesandbox/codesandbox-client/blob/main/CONTRIBUTING.md#setting-up-the-project-locally).
 
 ### 1. Add template logo
 
 Add the logo for your template in the
-[templates repo](https://github.com/codesandbox/codesandbox-client/tree/master/packages/template-icons/src)
+[templates repo](https://github.com/codesandbox/codesandbox-client/tree/main/packages/template-icons/src)
 (`codesandbox-templates/packages/template-icons/src`).
 
 #### SVG logos
@@ -102,24 +102,24 @@ content. If your template's name is "Banana", name your logo file "BananaIcon".
 
 Examples:
 
-- [Vue logo](https://github.com/codesandbox/codesandbox-client/tree/master/packages/template-icons/src/VueIcon.tsx)
-- [React logo](https://github.com/codesandbox/codesandbox-client/tree/master/packages/template-icons/src/ReactIcon.tsx)
+- [Vue logo](https://github.com/codesandbox/codesandbox-client/tree/main/packages/template-icons/src/VueIcon.tsx)
+- [React logo](https://github.com/codesandbox/codesandbox-client/tree/main/packages/template-icons/src/ReactIcon.tsx)
 
 ### 2. Add template definition
 
 In order for CodeSandbox to recognise your template, you need to add a new
 definition of it in the `codesandbox-client/packages/common/src/templates`
-[directory](https://github.com/codesandbox/codesandbox-client/tree/master/packages/common/src/templates).
+[directory](https://github.com/codesandbox/codesandbox-client/tree/main/packages/common/src/templates).
 You do this by creating a new `.ts` file with the name of your template.
 
 Examples:
 
-- [Parcel](https://github.com/codesandbox/codesandbox-client/blob/master/packages/common/src/templates/parcel.ts)
-- [Gatsby](https://github.com/codesandbox/codesandbox-client/blob/master/packages/common/src/templates/gatsby.ts)
+- [Parcel](https://github.com/codesandbox/codesandbox-client/blob/main/packages/common/src/templates/parcel.ts)
+- [Gatsby](https://github.com/codesandbox/codesandbox-client/blob/main/packages/common/src/templates/gatsby.ts)
 
 The template definition can have various options, which you can find more
 information about in
-[template.ts](https://github.com/codesandbox/codesandbox-client/blob/master/packages/common/src/templates/template.ts).
+[template.ts](https://github.com/codesandbox/codesandbox-client/blob/main/packages/common/src/templates/template.ts).
 
 We encourage you to improve the user experience of your templates by taking
 advantage of the options you have available while writing your template
@@ -133,7 +133,7 @@ Examples:
 <!-- TODO: Add more examples -->
 
 After writing your template definition, you also need to add it to the
-[index.js](https://github.com/codesandbox/codesandbox-client/blob/master/packages/common/src/templates/index.ts)
+[index.js](https://github.com/codesandbox/codesandbox-client/blob/main/packages/common/src/templates/index.ts)
 file in the same directory (`codesandbox-client/packages/common/src/templates`)
 in order for CodeSandbox to be able to retrieve your template.
 
@@ -148,18 +148,18 @@ preset.
 
 We call a template configuration for the bundler in CodeSandbox a 'Preset'. All
 currently installed presets are defined in the
-[index.ts](https://github.com/codesandbox/codesandbox-client/blob/master/packages/app/src/sandbox/eval/index.ts)
+[index.ts](https://github.com/codesandbox/codesandbox-client/blob/main/packages/app/src/sandbox/eval/index.ts)
 file under `codesandbox-client/packages/app/src/sandbox/eval/presets`.
 
 In order to understand how this configuration works, we recommend you to take a
 look at templates that have already been implemented and their presets.
 
 Examples:
 
-- [create-react-app-typescript](https://github.com/codesandbox/codesandbox-client/blob/master/packages/app/src/sandbox/eval/presets/create-react-app-typescript/index.js)
+- [create-react-app-typescript](https://github.com/codesandbox/codesandbox-client/blob/main/packages/app/src/sandbox/eval/presets/create-react-app-typescript/index.js)
   (most basic one)
-- [CxJS](https://github.com/codesandbox/codesandbox-client/blob/master/packages/app/src/sandbox/eval/presets/cxjs/index.js)
-- [vue-cli](https://github.com/codesandbox/codesandbox-client/blob/master/packages/app/src/sandbox/eval/presets/vue-cli/index.js)
+- [CxJS](https://github.com/codesandbox/codesandbox-client/blob/main/packages/app/src/sandbox/eval/presets/cxjs/index.js)
+- [vue-cli](https://github.com/codesandbox/codesandbox-client/blob/main/packages/app/src/sandbox/eval/presets/vue-cli/index.js)
 
 ### 4. Add the importer
 
@@ -169,7 +169,7 @@ template for every template. This logic is **not** found in `codesanbox-client`.
 
 This means you that you also have to add your template in another file in the
 `codesandbox-importers` repository called
-[templates.ts](https://github.com/codesandbox/codesandbox-importers/blob/master/packages/import-utils/src/create-sandbox/templates.ts).
+[templates.ts](https://github.com/codesandbox/codesandbox-importers/blob/main/packages/import-utils/src/create-sandbox/templates.ts).
 
 When you create your Pull Request in `codesanbox-client`, you also need to
 create a Pull Request in `codesandbox-importer` and reference it in your Pull
@@ -190,7 +190,7 @@ functionality of templates using containers.
 
 To test your new template, you need to create a mock response from the API and
 force the new template specification. To do this, you uncomment
-[this line](https://github.com/codesandbox/codesandbox-client/blob/master/packages/app/src/app/store/actions.js#L17)
+[this line](https://github.com/codesandbox/codesandbox-client/blob/main/packages/app/src/app/store/actions.js#L17)
 and change `'custom'` to the id/name of your template:
 
 ```diff

packages/app/config/webpack.common.js

@@ -159,6 +159,10 @@ module.exports = {
           new RegExp(`${sepRe}node_modules${sepRe}.*babel-plugin-macros`),
           new RegExp(`sandbox-hooks`),
           new RegExp(`template-icons`),
+          new RegExp(`${sepRe}node_modules${sepRe}.*react-devtools-inline`),
+          new RegExp(
+            `${sepRe}node_modules${sepRe}.*@codesandbox${sepRe}sandpack-react`
+          ),
           new RegExp(
             `${sepRe}node_modules${sepRe}vue-template-es2015-compiler`
           ),
@@ -189,6 +193,9 @@ module.exports = {
             '@babel/plugin-proposal-object-rest-spread',
             '@babel/plugin-proposal-class-properties',
             '@babel/plugin-transform-runtime',
+            '@babel/plugin-proposal-optional-chaining',
+            '@babel/plugin-proposal-numeric-separator',
+            '@babel/plugin-proposal-nullish-coalescing-operator',
           ],
         },
       },

packages/app/package.json

@@ -175,6 +175,7 @@
     "normalizr": "^3.2.3",
     "onigasm": "^2.2.1",
     "ot": "^0.0.15",
+    "outvariant": "^1.4.2",
     "overmind": "^27.0.0-1624124645626",
     "overmind-graphql": "^8.0.0-1615750082257",
     "overmind-react": "^28.0.0-1624124645626",
@@ -198,7 +199,7 @@
     "react-color": "^2.17.3",
     "react-content-loader": "^4.2.2",
     "react-day-picker": "^7.2.4",
-    "react-devtools-inline": "^4.22.0",
+    "react-devtools-inline": "^6.0.1",
     "react-devtools-inline_legacy": "npm:react-devtools-inline@4.4.0",
     "react-dnd": "^9.4.0",
     "react-dnd-html5-backend": "^9.4.0",
@@ -328,7 +329,7 @@
     "gzip-size": "3.0.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^4.0.0-beta.1",
-    "http-proxy-middleware": "^1.1.2",
+    "http-proxy-middleware": "^2.0.7",
     "isomorphic-untar-gzip": "^1.0.5",
     "jest": "^29.7.0",
     "jest-image-snapshot": "^6.0.0",
@@ -342,6 +343,7 @@
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "3.0.0",
+    "postcss-url": "^10.1.3",
     "postcss-normalize": "^8.0.1",
     "postcss-preset-env": "^6.7.0",
     "preval.macro": "^1.0.1",

packages/app/scripts/deploy.js

@@ -1,21 +1,19 @@
 const fetch = require('cross-fetch');
 
 fetch(
-  `https://backstage.csbops.io/api/deploy/gitops/codesandbox/codesandbox-gitops/codesandbox-core/codesandbox/${process.env.ENVIRONMENT}/helm-chart-values/values.yaml`,
+  `https://deployer.csbops.io/apps/codesandbox-editor-v1`,
   {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
-      'CF-Access-Client-Id': process.env.CF_ZERO_TRUST_BACKSTAGE_DEPLOY_ID,
+      'CF-Access-Client-Id': process.env.CF_ZERO_TRUST_DEPLOYER_CLIENT_ID,
       'CF-Access-Client-Secret':
-        process.env.CF_ZERO_TRUST_BACKSTAGE_DEPLOY_TOKEN,
+        process.env.CF_ZERO_TRUST_DEPLOYER_CLIENT_SECRET,
+      'Authorization': `Bearer ${process.env.DEPLOYER_API_TOKEN}`
     },
     body: JSON.stringify({
-      key: 'client.image.tag',
-      commitMessage: `Client V1: deploy to ${
-        process.env.ENVIRONMENT
-      } with ${process.env.CIRCLE_SHA1.substr(0, 7)}`,
-      value: process.env.CIRCLE_SHA1.substr(0, 7),
+      environment: process.env.ENVIRONMENT,
+      tag: process.env.CIRCLE_SHA1.substr(0, 7),
     }),
   }
 )

packages/app/src/app/components/CodeEditor/Configuration/index.tsx

@@ -3,7 +3,7 @@ import { TextOperation } from 'ot';
 import { Module } from '@codesandbox/common/lib/types';
 import getUI from '@codesandbox/common/lib/templates/configuration/ui';
 import { getType } from 'app/utils/get-type';
-import { EntryIcons } from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
+import { EntryIcons } from 'app/components/EntryIcons';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 import { ConfigurationFile } from '@codesandbox/common/lib/templates/configuration/types';
 

packages/app/src/app/components/CodeEditor/FilePath/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
+import EntryIcons from 'app/components/EntryIcons';
 import { getType } from 'app/utils/get-type';
 
 import { Container, Chevron, FileName, StyledExitZen } from './elements';

packages/app/src/app/components/CodeEditor/FuzzySearch/index.js

@@ -4,7 +4,7 @@ import Downshift from 'downshift';
 import matchSorter from 'match-sorter';
 import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
 import Input from '@codesandbox/common/lib/components/Input';
-import { EntryIcons } from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
+import { EntryIcons } from 'app/components/EntryIcons';
 // eslint-disable-next-line import/extensions
 import { getType } from 'app/utils/get-type.ts';
 import { ESC } from '@codesandbox/common/lib/utils/keycodes';