✨ Follow Templates (codesandbox#2225)

* 🚧 Add MultiAction Button, Add Fonts and Breakpoints to Theme

This update adds a new MultiAction Button to be used for Following Templates, a prototype can be found here:

https://codesandbox.io/s/codesadbox-6vgjh

Additionally, this includes some refactoring and additions to common components. Button has been updated with a new Link component. Link can be used to both create an internal or external Link using a single API, intelligently using either a React Router link or an anchor tag with the appropriate attributes.

The MultiAction Button extends Button, sharing it's styles and base props, and uses Reakit under the hood to provide full keyboard accessibility.

Theme has been reorganized and extended with a set of fonts taken from the design system files in Figma. Additionally a set of breakpoint utilities was added, based on those found in the React documentation site.

A new `withoutProps` has been added that can be used to exclude props from being passed down to a component. This is useful for styled components, which sometimes pass down non-HTML attributes which cause console errors. Example usage can be observed in the MultiAction button elements.ts.

An error was fixed in Dependencies/VersionEntry for incorrect use of selected on an option element.

NotOwnedSandboxInfo now has a Follow Template button.

TODO:
- [ ]: Add interactivity to the Follow Template button
- [ ]: Test functionality
- [ ]: Incorporate requested changes

* ⚡️ Add Query, Graphql Tag Loader, React Display Name Babel Plugin

Added getSandboxInfo query to NotOwnedSandboxInfo component

Added graphql tag loader to webpack common config

Added babel plugin transform react display name to babel config

Fixed ref forwarding error with withoutProps HOC

TODO:
- Revert API proxy in start script
- Fix types for withoutProps HOC

* ⚡️ Add Mutation, Add --staging Build Flag,

You can now add `--staging` to `yarn start` or `yarn start:fast` to switch the API proxy from codesandbox.io to codesandbox.stream

* ⚡️ Use Template ID for Mutation

* Followed Templates Modal (codesandbox#2223)

* try

* fix netlify on static

* Fix: trim space (codesandbox#2232)

* Fix preview url

* [Followup] Convert all Medium blogposts to Markdown (codesandbox#2219)

* Cleanup articles

* Update all Gatsby dependencies to latest version

* Optimize images

* Resolve discussions

*  Use official gatsby-remark-embedder package

* add templates for team

* 🚧 Add MultiAction Button, Add Fonts and Breakpoints to Theme

This update adds a new MultiAction Button to be used for Following Templates, a prototype can be found here:

https://codesandbox.io/s/codesadbox-6vgjh

Additionally, this includes some refactoring and additions to common components. Button has been updated with a new Link component. Link can be used to both create an internal or external Link using a single API, intelligently using either a React Router link or an anchor tag with the appropriate attributes.

The MultiAction Button extends Button, sharing it's styles and base props, and uses Reakit under the hood to provide full keyboard accessibility.

Theme has been reorganized and extended with a set of fonts taken from the design system files in Figma. Additionally a set of breakpoint utilities was added, based on those found in the React documentation site.

A new `withoutProps` has been added that can be used to exclude props from being passed down to a component. This is useful for styled components, which sometimes pass down non-HTML attributes which cause console errors. Example usage can be observed in the MultiAction button elements.ts.

An error was fixed in Dependencies/VersionEntry for incorrect use of selected on an option element.

NotOwnedSandboxInfo now has a Follow Template button.

TODO:
- [ ]: Add interactivity to the Follow Template button
- [ ]: Test functionality
- [ ]: Incorporate requested changes

* ⚡️ Add Query, Graphql Tag Loader, React Display Name Babel Plugin

Added getSandboxInfo query to NotOwnedSandboxInfo component

Added graphql tag loader to webpack common config

Added babel plugin transform react display name to babel config

Fixed ref forwarding error with withoutProps HOC

TODO:
- Revert API proxy in start script
- Fix types for withoutProps HOC

* ⚡️ Add Mutation, Add --staging Build Flag,

You can now add `--staging` to `yarn start` or `yarn start:fast` to switch the API proxy from codesandbox.io to codesandbox.stream

* ⚡️ Use Template ID for Mutation

* Followed Templates Modal (codesandbox#2223)

* try

* fix netlify on static

* Fix: trim space (codesandbox#2232)

* Fix preview url

* [Followup] Convert all Medium blogposts to Markdown (codesandbox#2219)

* Cleanup articles

* Update all Gatsby dependencies to latest version

* Optimize images

* Resolve discussions

*  Use official gatsby-remark-embedder package

* add templates for team

* add most of dashboard stuff

* make toggle do toggle things

* unfollow on dashboard

* 🚚 Move FollowTemplateButton to it's own Component

* ⚡️ Add Follow/Unfollow Template Logic, Add GraphQL Codegen Config

* moved components

* fix tab

* its something

* hookup import table

* fix thingx

* finish import tab

* done

* fix some ts

* fix ts

* fix lint

* fix lint

* add my templates

* add more stuff

* add loading

* add select for categories

* add empty state

* remove tsignore

* fix eslint

* fix ts

* increase memeory

* fix category reset

* fix scrollbar

* ✨ Add Pagination component, clamp and range utilities to Common

* fix fonts

* fix header

* fix icon color

* fix all issues

* more fixes

* add contrast checker

* update icon package

* fix weird bug

* 🚧 Reorganize Create Sandbox Modal Files

Committing work in progress to sync with team.

* 🚧 Update modal for control via parent

* update queries and mutations

* update id

* add ability to bookmark

* fix some css

* rename followed to bokmarked

* add template banner

* 🚧 Add Pagination to Explore Tab, Remove @types/storybook Dependencies

* fix pagination

* fix page numbers

* add types

* fix common

* fix build

* 🚧 Explore Tab Polish

* Update package.json

* Update yarn.lock

* Update yarn.lock

* Greatly simplify yarn.lock

* Greatly deduplicate yarn.lock

* Undo the Button changes for now

There are some design inconsistencies and rendering artifacts with the new
button, I agree that we should change the buttons, but I'd rather do this
in a separate PR instead of in this huge PR.

* Alter outer styles modal

* Tweaks

* Fix create sandbox modal

* Extract template list

* Add introspection of graphql

* New types

* Redo TemplateUniverse

* Props

* Intermediate

* Intermediate

* Improve the loading in docker

* Change message of error

* Create separate sandbox fragment for templates

* Introduce new TemplateList

* Introduce new TemplateList

* Better filtering

* New Explore Templates

* Revert changes in browserfs

* Improve all tabs in the modal

* Add more typing and fix optimistic bookmarking

* More typing

* Remove unused code

* Handle TS errors

* Clean up typings from graphql

* Fix tests

* Try to find out what happened with jest

* fix type

* More types

* Fix typing issue

* Finally fix the clean script

* Don't install deps in parallel

* Fix ts issues with untyped client

* Fix arrow navigation for uneven rows

* Remove new users initializer

* Move Create Sandbox Modal

* More TS

* Redo the editor with the bookmark, fix git sandboxes

* Tweaks

* Add 3 column support

* Fix bugs

* Tweak styles

* Fix more arrow navigation

* Fix minor bugs

* Merge branch master in follow-templates

* Put actions back

* Fix

* Fix arrow navigation

* Dynamically resize columns in create sandbox modal

* So many improvements!

* Change icon and shortcuts

* wait for authenticating before showing right side of navigation

* Add first visit indication to welcome, and fix wrong isAuthenticating state usage

* Add git to template

* Theme tweaks

* Styling changes

Author: Saeris

.circleci/config.yml

@@ -25,12 +25,12 @@ aliases:
 
   - &restore_deps_cache
     keys:
-      - v29-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
-      - v29-dependency-cache-{{ .Branch }}
-      - v29-dependency-cache
+      - v30-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+      - v30-dependency-cache-{{ .Branch }}
+      - v30-dependency-cache
 
   - &save_deps_cache
-    key: v29-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+    key: v30-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
     paths:
       - node_modules
       - packages/app/node_modules
@@ -49,51 +49,51 @@ aliases:
 
   - &restore_standalone_deps_cache
     keys:
-      - v29-standalone-dependency-cache-{{ .Branch }}-{{ checksum
+      - v30-standalone-dependency-cache-{{ .Branch }}-{{ checksum
         "standalone-packages/codesandbox-browserfs/yarn.lock" }}
-      - v29-standalone-dependency-cache-{{ .Branch }}
-      - v29-standalone-dependency-cache
+      - v30-standalone-dependency-cache-{{ .Branch }}
+      - v30-standalone-dependency-cache
 
   - &save_standalone_deps_cache
     key:
-      v29-standalone-dependency-cache-{{ .Branch }}-{{ checksum
+      v30-standalone-dependency-cache-{{ .Branch }}-{{ checksum
       "standalone-packages/codesandbox-browserfs/yarn.lock" }}
     paths:
       - standalone-packages/codesandbox-browserfs/node_modules
 
   - &restore_prod_homepage_cache
-    key: v29-prod-homepage-build-cache-master
+    key: v30-prod-homepage-build-cache-master
 
   - &restore_prod_result
     key:
-      v29-prod-build-result-{{ .Environment.CIRCLE_BRANCH
+      v30-prod-build-result-{{ .Environment.CIRCLE_BRANCH
       }}-{{.Environment.CIRCLE_SHA1 }}
 
   - &save_prod_build_cache
     key:
-      v29-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
+      v30-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
       }}-{{.Environment.CIRCLE_SHA1 }}
     paths:
       - packages/app/node_modules/.cache
 
   - &restore_prod_build_cache
     keys:
-      - v29-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
+      - v30-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
         }}-{{.Environment.CIRCLE_SHA1 }}
-      - v29-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-
-      - v29-prod-build-cache-master-
+      - v30-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-
+      - v30-prod-build-cache-master-
 
   # To persist the images built by sharp
   - &save_prod_homepage_cache
     key:
-      v29-prod-homepage-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{
+      v30-prod-homepage-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{
       .Environment.CIRCLE_SHA1 }}
     paths:
       - ./packages/homepage/public
 
   - &save_prod_result
     key:
-      v29-prod-build-result-{{ .Environment.CIRCLE_BRANCH }}-{{
+      v30-prod-build-result-{{ .Environment.CIRCLE_BRANCH }}-{{
       .Environment.CIRCLE_SHA1 }}
     paths:
       - ./www
@@ -134,14 +134,14 @@ commands:
     steps:
       - restore_cache:
           keys:
-            - v29-source-cache-{{ .Branch }}-{{ .Revision }}
-            - v29-source-cache-{{ .Branch }}-
-            - v29-source-cache-
+            - v30-source-cache-{{ .Branch }}-{{ .Revision }}
+            - v30-source-cache-{{ .Branch }}-
+            - v30-source-cache-
 
       - checkout
 
       - save_cache:
-          key: v29-source-cache-{{ .Branch }}-{{ .Revision }}
+          key: v30-source-cache-{{ .Branch }}-{{ .Revision }}
           paths:
             - '.git'
   build_deps:
@@ -245,6 +245,9 @@ commands:
           command:
             '[ -n "<< parameters.user >>" ] && echo << parameters.password >> |
             docker login -u << parameters.user >> --password-stdin || true'
+      - run:
+          name: Create DockerIgnore
+          command: echo '**\n!www' > .dockerignore
       - run:
           name: Create Image
           command:

.dockerignore

@@ -1,2 +1,30 @@
-*
-!www
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+# we use yarn
+package-lock.json
+
+/integration-tests/**/__diff_output__
+
+# testing
+coverage
+
+# production
+build
+www
+.deliver
+
+# misc
+.DS_Store
+npm-debug.log
+yarn-error.log
+.idea
+jest
+
+lerna-debug.log
+
+standalone-packages/monaco-editor-core
+
+.next
+.cache-loader

.graphqlconfig.yml

@@ -0,0 +1,8 @@
+projects:
+  app:
+    schemaPath: packages/app/src/app/graphql/schema.graphql
+    extensions:
+      endpoints:
+        default: 'https://codesandbox.io/api/graphql'
+        staging: 'https://codesandbox.stream/api/graphql'
+        dev: 'http://localhost:4000/api/graphql'

.yarnclean

@@ -45,3 +45,10 @@ wercker.yml
 
 @types/react-native
 packages/app/node_modules/styled-components
+
+# Prevent duplicate graphql. This doesn't seem to break anything
+@divyenduz/ts-graphql-plugin/node_modules/**
+graphql-config/node_modules/**
+
+# Issue with jest conflicting with jest-styled-components
+jest-styled-components/typings/**

docker/Dockerfile

@@ -1,6 +1,7 @@
 FROM node:10
 LABEL maintainer "Ives van Hoorne"
 
-RUN mkdir /usr/src/app
+RUN mkdir /workspace
+COPY * /workspace/
 
-WORKDIR /usr/src/app
+WORKDIR /workspace

package.json

@@ -44,7 +44,7 @@
     "now-build": "yarn build:deps && lerna run build:storybook --scope @codesandbox/common",
     "start": "yarn build:deps && lerna run start --scope @codesandbox/common --scope app --parallel",
     "start:common": "lerna run start --scope @codesandbox/common --stream",
-    "start:dev_api": "lerna run start:dev_api --scope app --stream",
+    "start:dev_api": "concurrently --raw \"cd packages/app && yarn start:dev_api\" \"cd packages/common && yarn start\"",
     "start:dynamic": "lerna run dev --scope dynamic-pages --stream",
     "start:fast": "concurrently --raw \"cd packages/app && yarn start\" \"cd packages/common && yarn start\"",
     "start:home": "yarn build:deps && yarn start:home:fast",

packages/app/config/build.js

@@ -3,11 +3,11 @@ const { SANDBOX_ONLY } = process.env;
 const staticAssets = [
   !SANDBOX_ONLY && {
     from: 'standalone-packages/vscode-editor/release/min/vs',
-    to: 'public/vscode25/vs',
+    to: 'public/vscode26/vs',
   },
   !SANDBOX_ONLY && {
     from: 'standalone-packages/vscode-extensions/out',
-    to: 'public/vscode-extensions/v11',
+    to: 'public/vscode-extensions/v12',
   },
   !SANDBOX_ONLY && {
     from: 'node_modules/onigasm/lib/onigasm.wasm',

packages/app/config/webpack.common.js

@@ -162,6 +162,11 @@ module.exports = {
 
   module: {
     rules: [
+      {
+        test: /\.(graphql|gql)$/,
+        exclude: /node_modules/,
+        loader: `graphql-tag/loader`,
+      },
       {
         test: /\.wasm$/,
         loader: 'file-loader',

packages/app/config/webpack.prod.js

@@ -180,7 +180,7 @@ module.exports = merge(commonConfig, {
           },
         },
         {
-          urlPattern: /\/vscode25/,
+          urlPattern: /\/vscode26/,
           handler: 'cacheFirst',
           options: {
             cache: {

packages/app/package.json

@@ -12,6 +12,9 @@
     "build": "cross-env NODE_ENV=production NODE_OPTIONS=\"--max-old-space-size=4096\"   node scripts/build.js",
     "build:stats": "cross-env NODE_ENV=production NODE_OPTIONS=\"--max-old-space-size=4096\"   webpack --env production --config config/webpack.prod.js --json --profile --progress > stats.json && node scripts/stats",
     "build:clean": "rimraf www",
+    "graphql:replace-schema": "sed -i'' 's/RootQueryType/RootQuery/g' ./src/app/graphql/schema.graphql && sed -i'' 's/RootMutationType/RootMutation/g' ./src/app/graphql/schema.graphql",
+    "generate:graphql": "graphql get-schema --project app && yarn graphql:replace-schema && graphql-codegen --config ./scripts/codegen.js",
+    "generate:graphql:staging": "graphql get-schema -e staging --project app && yarn graphql:replace-schema && graphql-codegen --config ./scripts/codegen.js --staging",
     "build:embed": "cross-env NODE_ENV=production webpack --config config/webpack.embed.js",
     "build:sandbox": "cross-env NODE_ENV=production SANDBOX_ONLY=true node scripts/build.js && yarn copy-assets",
     "build:sandpack-sandbox": "cross-env NODE_ENV=production SANDPACK=true SANDBOX_ONLY=true node scripts/build.js && cross-env SANDBOX_ONLY=true yarn copy-assets",
@@ -67,11 +70,11 @@
     ]
   },
   "dependencies": {
-    "@apollo/react-hooks": "^0.1.0-beta.2",
+    "@apollo/react-hooks": "^3.0.1",
     "@babel/plugin-transform-destructuring": "^7.5.0",
     "@babel/preset-env": "^7.5.5",
     "@codesandbox/executors": "^0.1.0",
-    "@codesandbox/template-icons": "^1.0.1",
+    "@codesandbox/template-icons": "^1.0.2",
     "@emmetio/codemirror-plugin": "^0.3.5",
     "@sentry/webpack-plugin": "^1.8.0",
     "@styled-system/css": "^5.0.23",
@@ -117,7 +120,7 @@
     "fuse.js": "^3.2.1",
     "geniejs": "^0.5.1",
     "glamor": "^2.20.25",
-    "graphql": "^14.1.1",
+    "graphql": "^14.5.8",
     "graphql-tag": "^2.10.1",
     "gsap": "^1.20.3",
     "gulp": "^3.9.1",
@@ -143,7 +146,6 @@
     "lodash-es": "^4.17.2",
     "lru-cache": "^4.1.3",
     "match-sorter": "^1.8.1",
-    "memoize-one": "^4.0.0",
     "minimatch": "^3.0.4",
     "mobx": "^5.11.0",
     "mobx-react": "^6.1.1",
@@ -173,6 +175,7 @@
     "react-addons-css-transition-group": "^15.6.0",
     "react-apollo": "^2.5.6",
     "react-color": "^2.17.3",
+    "react-content-loader": "^4.2.2",
     "react-day-picker": "^7.2.4",
     "react-devtools-inline": "^4.0.0",
     "react-dnd": "^7.0.2",
@@ -183,13 +186,14 @@
     "react-icons": "^2.2.7",
     "react-input-autosize": "^2.2.1",
     "react-inspector": "^2.2.0",
-    "react-instantsearch": "^5.3.2",
+    "react-instantsearch": "^5.7.0",
     "react-loadable": "^3.3.1",
     "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-router-dom": "^5.0.1",
+    "react-scrollbars-custom": "^4.0.20",
     "react-show": "^3.0.4",
     "react-split-pane": "^0.1.87",
     "react-spring": "^8.0.25",
@@ -233,17 +237,25 @@
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
+    "@divyenduz/ts-graphql-plugin": "^0.1.0",
+    "@graphql-codegen/cli": "^1.8.2",
+    "@graphql-codegen/fragment-matcher": "^1.8.2",
+    "@graphql-codegen/typescript": "^1.8.2",
+    "@graphql-codegen/typescript-graphql-files-modules": "^1.8.2",
+    "@graphql-codegen/typescript-operations": "^1.8.2",
     "@sentry/cli": "^1.47.1",
     "@types/codemirror": "^0.0.72",
     "@types/debug": "^4.1.1",
     "@types/gsap": "^1.20.1",
+    "@types/jest": "24.0.13",
     "@types/lodash-es": "^4.17.2",
     "@types/phoenix": "^1.4.0",
     "@types/prop-types": "^15.7.0",
     "@types/react": "^16.8.12",
     "@types/react-dom": "^16.8.3",
     "@types/react-helmet": "^5.0.11",
     "@types/react-icons": "2.2.7",
+    "@types/react-instantsearch": "^5.2.3",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-stripe-elements": "^1.3.2",
     "@types/resolve": "^0.0.8",
@@ -262,6 +274,7 @@
     "buffer-loader": "^0.0.1",
     "case-sensitive-paths-webpack-plugin": "^2.0.0",
     "chalk": "1.1.3",
+    "codesandbox": "^2.1.10",
     "codesandbox-deps": "^0.1.1",
     "connect-history-api-fallback": "1.3.0",
     "copy-webpack-plugin": "^5.0.3",
@@ -274,16 +287,17 @@
     "file-loader": "^1.1.11",
     "filesize": "^3.5.6",
     "fs-extra": "^8.0.1",
+    "graphql-cli": "^3.0.14",
     "gulp-replace": "^0.5.4",
     "gzip-size": "3.0.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^4.0.0-beta.1",
     "http-proxy-middleware": "^0.17.3",
     "imagemin-webpack-plugin": "^2.4.2",
-    "jest": "^24.8.0",
+    "jest": "^24.9.0",
     "jest-image-snapshot": "^1.0.1",
     "jest-junit": "^3.4.1",
-    "jest-styled-components": "6.3.3",
+    "jest-styled-components": "6.3.4",
     "mini-css-extract-plugin": "^0.8.0",
     "object-assign": "^4.1.1",
     "opn": "4.0.2",