├── .prettierignore ├── flow-typed └── npm │ ├── debug_v2.x.x.js │ ├── flow-bin_v0.x.x.js │ ├── strip-ansi_v3.x.x.js │ ├── object-assign_v4.x.x.js │ ├── path-exists_v3.x.x.js │ ├── normalize.css_vx.x.x.js │ ├── react-dnd-html5-backend_v2.1.x.js │ ├── opn_vx.x.x.js │ ├── color_vx.x.x.js │ ├── react-modal_v1.x.x.js │ ├── gulp-rev_vx.x.x.js │ ├── gzip-size_vx.x.x.js │ ├── whatwg-fetch_vx.x.x.js │ ├── babel-jest_vx.x.x.js │ ├── raw-loader_vx.x.x.js │ ├── url-loader_vx.x.x.js │ ├── file-loader_vx.x.x.js │ ├── gulp-filter_vx.x.x.js │ ├── json-loader_vx.x.x.js │ ├── gulp-replace_vx.x.x.js │ ├── run-sequence_vx.x.x.js │ ├── base64-loader_vx.x.x.js │ ├── eslint-loader_vx.x.x.js │ ├── babel-preset-react_vx.x.x.js │ ├── babel-preset-latest_vx.x.x.js │ ├── babel-preset-stage-0_vx.x.x.js │ ├── babili-webpack-plugin_vx.x.x.js │ ├── babel-plugin-system-import_vx.x.x.js │ ├── rimraf_vx.x.x.js │ ├── humps_vx.x.x.js │ ├── babel-plugin-syntax-dynamic-import_vx.x.x.js │ ├── babel-plugin-transform-regenerator_vx.x.x.js │ ├── babel-plugin-transform-class-properties_vx.x.x.js │ ├── case-sensitive-paths-webpack-plugin_vx.x.x.js │ ├── react-addons-css-transition-group_v15.x.x.js │ ├── babel-plugin-transform-decorators-legacy_vx.x.x.js │ ├── babel-plugin-transform-remove-strict-mode_vx.x.x.js │ ├── gulp-postcss_vx.x.x.js │ ├── babel-plugin-transform-async-to-generator_vx.x.x.js │ ├── babel-plugin-transform-object-rest-spread_vx.x.x.js │ ├── filesize_vx.x.x.js │ ├── detect-port_vx.x.x.js │ ├── postcss-loader_vx.x.x.js │ ├── babel-plugin-transform-react-constant-elements_vx.x.x.js │ └── html-loader_vx.x.x.js ├── config ├── flow │ ├── css.js.flow │ └── file.js.flow ├── polyfills.js ├── webpack.dev.js ├── env.js └── babel.dev.js ├── public ├── robots.txt ├── favicon.ico ├── sitemap.xml └── manifest.json ├── .gitattributes ├── src ├── __mocks__ │ └── styleMock.js ├── node_modules │ └── codesandbox-api │ │ ├── .nodemonignore │ │ ├── .gitignore │ │ ├── tslint.json │ │ ├── src │ │ ├── dispatcher │ │ │ ├── host.ts │ │ │ └── index.ts │ │ ├── actions │ │ │ ├── source │ │ │ │ ├── index.ts │ │ │ │ ├── dependencies.ts │ │ │ │ └── modules.ts │ │ │ ├── editor.ts │ │ │ ├── index.ts │ │ │ ├── notifications.ts │ │ │ └── error.ts │ │ ├── codesandbox.ts │ │ ├── typings │ │ │ └── codesandbox.d.ts │ │ └── errors │ │ │ └── index.ts │ │ ├── .editorconfig │ │ ├── test │ │ └── codesandbox.test.ts │ │ ├── .travis.yml │ │ ├── tsconfig.json │ │ ├── tools │ │ └── gh-pages-publish.ts │ │ ├── LICENSE │ │ └── rollup.config.js ├── app │ ├── store │ │ ├── modal │ │ │ ├── selectors.js │ │ │ ├── actions.js │ │ │ └── reducer.js │ │ ├── entities │ │ │ ├── selectors.js │ │ │ ├── users │ │ │ │ ├── selectors.js │ │ │ │ ├── entity.js │ │ │ │ └── reducer.js │ │ │ ├── sandboxes │ │ │ │ ├── directories │ │ │ │ │ ├── entity.js │ │ │ │ │ ├── actions.js │ │ │ │ │ ├── __snapshots__ │ │ │ │ │ │ └── reducer.test.js.snap │ │ │ │ │ ├── selectors.js │ │ │ │ │ ├── reducer.test.js │ │ │ │ │ └── reducer.js │ │ │ │ ├── utils │ │ │ │ │ └── create-zip │ │ │ │ │ │ ├── svelte │ │ │ │ │ │ └── files.zip │ │ │ │ │ │ ├── vue-cli │ │ │ │ │ │ └── files.zip │ │ │ │ │ │ ├── preact-cli │ │ │ │ │ │ └── files.zip │ │ │ │ │ │ ├── create-react-app │ │ │ │ │ │ └── files.zip │ │ │ │ │ │ └── create-react-app-typescript │ │ │ │ │ │ └── files.zip │ │ │ │ ├── selectors.js │ │ │ │ ├── modules │ │ │ │ │ ├── validator.js │ │ │ │ │ ├── entity.js │ │ │ │ │ └── utils │ │ │ │ │ │ └── get-type.js │ │ │ │ ├── boilerplates │ │ │ │ │ └── default-boilerplates.js │ │ │ │ └── entity.js │ │ │ ├── index.js │ │ │ └── actions.js │ │ ├── preferences │ │ │ ├── selectors.js │ │ │ ├── actions.js │ │ │ └── keys.js │ │ ├── services │ │ │ ├── delay.js │ │ │ └── middleware │ │ │ │ └── thunk-middleware.js │ │ ├── user │ │ │ ├── utils │ │ │ │ ├── jwt.js │ │ │ │ └── popup.js │ │ │ └── selectors.js │ │ ├── connection │ │ │ ├── reducer.js │ │ │ └── actions.js │ │ ├── context-menu │ │ │ ├── actions.js │ │ │ └── reducer.js │ │ ├── notifications │ │ │ ├── actions.js │ │ │ └── reducer.js │ │ ├── root-reducer.js │ │ └── index.js │ ├── favicon.ico │ ├── components │ │ ├── Relative.js │ │ ├── flex │ │ │ ├── Fullscreen.js │ │ │ ├── Column.js │ │ │ ├── Row.js │ │ │ ├── Centered.js │ │ │ └── MaxWidth.js │ │ ├── Stat │ │ │ ├── format-number.js │ │ │ ├── format-number.test.js │ │ │ ├── __snapshots__ │ │ │ │ └── format-number.test.js.snap │ │ │ └── index.js │ │ ├── spacing │ │ │ ├── Margin.js │ │ │ ├── Padding.js │ │ │ └── get-spacing.js │ │ ├── animation │ │ │ └── DelayedAnimation.js │ │ ├── Tooltip.js │ │ ├── buttons │ │ │ ├── LinkButton.js │ │ │ ├── LinkButton.test.js │ │ │ ├── __snapshots__ │ │ │ │ └── LinkButton.test.js.snap │ │ │ └── Button.test.js │ │ ├── text │ │ │ ├── Title.js │ │ │ └── SubTitle.js │ │ ├── Input.js │ │ ├── Select.js │ │ ├── Loading.js │ │ ├── user │ │ │ ├── PatronStar.js │ │ │ ├── SubscribeForm │ │ │ │ └── index.js │ │ │ └── UserWithAvatar.js │ │ ├── Preference │ │ │ ├── PreferenceSwitch.js │ │ │ ├── PreferenceDropdown.js │ │ │ ├── PreferenceText.js │ │ │ └── PreferenceNumber.js │ │ ├── sandbox │ │ │ ├── Stats │ │ │ │ ├── Stat.js │ │ │ │ └── index.js │ │ │ ├── CodeEditor │ │ │ │ └── index.js │ │ │ ├── Tags │ │ │ │ └── index.js │ │ │ └── DeleteSandboxButton.js │ │ ├── ConfirmLink.js │ │ ├── ZeitLogo.js │ │ ├── Portal.js │ │ ├── logos │ │ │ ├── Vue.js │ │ │ └── Svelte.js │ │ └── TypeScriptIcon.js │ ├── utils │ │ ├── find-type.js │ │ ├── history.js │ │ ├── error.js │ │ ├── badges │ │ │ ├── PatronBadge.js │ │ │ ├── index.js │ │ │ └── patron-info.js │ │ ├── animation │ │ │ ├── fade-in.js │ │ │ ├── delay-effect.js │ │ │ └── delay-out-effect.js │ │ ├── config.js │ │ ├── test │ │ │ └── render.js │ │ ├── url-generator.test.js │ │ ├── analytics.js │ │ ├── debug.js │ │ └── codemirror │ │ │ └── prettify.js │ ├── pages │ │ ├── Profile │ │ │ ├── Showcase │ │ │ │ └── PlayButton.js │ │ │ └── Header │ │ │ │ └── UserInfo │ │ │ │ └── index.js │ │ ├── Patron │ │ │ └── PricingModal │ │ │ │ ├── Title.js │ │ │ │ ├── PricingChoice │ │ │ │ ├── Range.js │ │ │ │ └── ThankYou.js │ │ │ │ └── PricingInfo │ │ │ │ └── Feature.js │ │ ├── Sandbox │ │ │ └── Editor │ │ │ │ ├── Workspace │ │ │ │ ├── WorkspaceSubtitle.js │ │ │ │ ├── Files │ │ │ │ │ └── DirectoryEntry │ │ │ │ │ │ └── Entry │ │ │ │ │ │ └── EntryTitle.js │ │ │ │ ├── Icon.js │ │ │ │ ├── Advertisement │ │ │ │ │ └── index.js │ │ │ │ ├── ConnectionNotice │ │ │ │ │ └── index.js │ │ │ │ └── WorkspaceInputContainer.js │ │ │ │ └── Content │ │ │ │ └── Skeleton.js │ │ ├── Search │ │ │ ├── ResultInfo.js │ │ │ ├── Filters │ │ │ │ ├── index.js │ │ │ │ └── Filter.js │ │ │ └── Results.js │ │ └── NotFound.js │ ├── containers │ │ ├── Preferences │ │ │ ├── Integrations │ │ │ │ ├── Integrations.js │ │ │ │ └── index.js │ │ │ ├── Badges │ │ │ │ └── index.js │ │ │ ├── MenuTitle.js │ │ │ ├── EditorPageSettings │ │ │ │ ├── EditorSettings │ │ │ │ │ └── index.js │ │ │ │ └── PreviewSettings │ │ │ │ │ └── index.js │ │ │ ├── CodeFormatting │ │ │ │ └── index.js │ │ │ ├── PaymentInfo │ │ │ │ └── Card.js │ │ │ └── styles.js │ │ ├── SignInButton.js │ │ └── LikeHeart │ │ │ └── index.js │ ├── hoc │ │ ├── show-alternative-component.js │ │ └── __snapshots__ │ │ │ └── show-alternative-component.test.js.snap │ └── split-pane.css ├── homepage │ └── static │ │ └── img │ │ ├── logo.png │ │ └── banner.png ├── sandbox │ ├── utils │ │ ├── delay.js │ │ └── host.js │ ├── npm │ │ ├── __snapshots__ │ │ │ └── dependencies-to-query.test.js.snap │ │ ├── dependencies-to-query.js │ │ └── dependencies-to-query.test.js │ ├── errors │ │ ├── transformers │ │ │ └── index.js │ │ ├── no-dom-change-error.js │ │ ├── __snapshots__ │ │ │ └── dependency-not-found-error.test.js.snap │ │ ├── sandbox-error.js │ │ ├── dependency-not-found-error.test.js │ │ └── dependency-not-found-error.js │ ├── eval │ │ ├── transpilers │ │ │ ├── vue │ │ │ │ ├── style-compiler │ │ │ │ │ ├── plugins │ │ │ │ │ │ └── trim.js │ │ │ │ │ └── index.js │ │ │ │ ├── utils │ │ │ │ │ └── gen-id.js │ │ │ │ ├── template-compiler │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ ├── noop │ │ │ │ └── index.js │ │ │ ├── raw │ │ │ │ └── index.js │ │ │ ├── json │ │ │ │ └── index.js │ │ │ ├── css │ │ │ │ ├── get-modules.js │ │ │ │ └── utils │ │ │ │ │ └── insert-css.js │ │ │ ├── utils │ │ │ │ ├── worker-warning-handler.js │ │ │ │ └── worker-error-handler.js │ │ │ ├── binary │ │ │ │ └── index.js │ │ │ ├── stylus │ │ │ │ ├── stylus-worker.js │ │ │ │ └── index.js │ │ │ ├── svelte │ │ │ │ └── index.js │ │ │ ├── typescript │ │ │ │ └── index.js │ │ │ ├── less │ │ │ │ └── file-manager.js │ │ │ ├── base64 │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── errors │ │ │ ├── module-error.js │ │ │ └── module-warning.js │ │ ├── loaders │ │ │ └── eval.js │ │ ├── presets │ │ │ ├── preact-cli │ │ │ │ └── transpilers │ │ │ │ │ └── async.js │ │ │ ├── svelte │ │ │ │ └── index.js │ │ │ ├── create-react-app │ │ │ │ └── index.js │ │ │ └── create-react-app-typescript │ │ │ │ └── index.js │ │ └── index.js │ ├── react-error-overlay │ │ └── utils │ │ │ ├── dom │ │ │ ├── consumeEvent.js │ │ │ └── enableTabClick.js │ │ │ ├── isInternalFile.js │ │ │ └── getLinesAround.js │ └── boilerplates │ │ └── default-boilerplates.js ├── embed │ ├── components │ │ ├── EditorLink.test.js │ │ ├── File.test.js │ │ └── EditorLink.js │ └── index.js └── common │ ├── theme.test.js │ ├── __snapshots__ │ └── theme.test.js.snap │ ├── connection-manager.js │ └── sandbox │ └── get-module-path.js ├── .eslintignore ├── scripts ├── run-docker.sh └── utils │ ├── WatchMissingNodeModulesPlugin.js │ ├── chrome.applescript │ └── prompt.js ├── .prettierrc ├── .travis.yml ├── favicon.ico ├── .dockerignore ├── Dockerfile ├── typings.json ├── .editorconfig ├── .gitignore ├── Dockerfile.prod ├── jsconfig.json ├── .babelrc ├── deploy.sh ├── .eslintrc ├── LICENSE └── .flowconfig /.prettierignore: -------------------------------------------------------------------------------- 1 | static/ 2 | -------------------------------------------------------------------------------- /flow-typed/npm/debug_v2.x.x.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config/flow/css.js.flow: -------------------------------------------------------------------------------- 1 | // @flow 2 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | *.js text eol=lf 3 | -------------------------------------------------------------------------------- /src/__mocks__/styleMock.js: -------------------------------------------------------------------------------- 1 | module.exports = {}; 2 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/cra-files/*.* 2 | **/eslint-lint.js 3 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/.nodemonignore: -------------------------------------------------------------------------------- 1 | dist 2 | -------------------------------------------------------------------------------- /config/flow/file.js.flow: -------------------------------------------------------------------------------- 1 | // @flow 2 | declare export default string; 3 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /scripts/run-docker.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | yarn 4 | yarn run start:dev_api 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | 5 | cache: yarn 6 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkh44/codesandbox-client/master/favicon.ico -------------------------------------------------------------------------------- /src/app/store/modal/selectors.js: -------------------------------------------------------------------------------- 1 | export const modalSelector = state => state.modal; 2 | -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | deploy.sh 4 | Dockerfile 5 | Dockerfile.prod 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkh44/codesandbox-client/master/public/favicon.ico -------------------------------------------------------------------------------- /src/app/store/entities/selectors.js: -------------------------------------------------------------------------------- 1 | export const entitiesSelector = state => state.entities; 2 | -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkh44/codesandbox-client/master/src/app/favicon.ico -------------------------------------------------------------------------------- /src/app/store/entities/users/selectors.js: -------------------------------------------------------------------------------- 1 | export const usersSelector = state => state.entities.users; 2 | -------------------------------------------------------------------------------- /src/app/store/preferences/selectors.js: -------------------------------------------------------------------------------- 1 | export const preferencesSelector = state => state.preferences; 2 | -------------------------------------------------------------------------------- /src/homepage/static/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkh44/codesandbox-client/master/src/homepage/static/img/logo.png -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:8.2.1 2 | LABEL maintainer "Ives van Hoorne" 3 | 4 | RUN mkdir /usr/src/app 5 | 6 | WORKDIR /usr/src/app 7 | -------------------------------------------------------------------------------- /src/homepage/static/img/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkh44/codesandbox-client/master/src/homepage/static/img/banner.png -------------------------------------------------------------------------------- /src/app/components/Relative.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.div` 4 | position: relative; 5 | `; 6 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "tslint-config-standard", 4 | "tslint-config-prettier" 5 | ] 6 | } -------------------------------------------------------------------------------- /src/app/store/services/delay.js: -------------------------------------------------------------------------------- 1 | export default function delay(timeout = 1000) { 2 | return new Promise(resolve => setTimeout(resolve, timeout)); 3 | } 4 | -------------------------------------------------------------------------------- /src/app/utils/find-type.js: -------------------------------------------------------------------------------- 1 | export default (code: string) => { 2 | if (code.includes("from 'react'")) return 'react'; 3 | return 'function'; 4 | }; 5 | -------------------------------------------------------------------------------- /src/app/utils/history.js: -------------------------------------------------------------------------------- 1 | import createHistory from 'history/createBrowserHistory'; 2 | 3 | const history = createHistory(); 4 | 5 | export default history; 6 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/src/dispatcher/host.ts: -------------------------------------------------------------------------------- 1 | const host = process.env.CODESANDBOX_HOST; 2 | 3 | export default host || 'https://codesandbox.io'; 4 | -------------------------------------------------------------------------------- /src/sandbox/utils/delay.js: -------------------------------------------------------------------------------- 1 | export default function(delay = 1000) { 2 | return new Promise(resolve => { 3 | setTimeout(resolve, delay); 4 | }); 5 | } 6 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/directories/entity.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import { schema } from 'normalizr'; 3 | 4 | export default new schema.Entity('directories'); 5 | -------------------------------------------------------------------------------- /src/app/pages/Profile/Showcase/PlayButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import SvgButton from './play-button.svg'; 4 | 5 | export default () => edit; 6 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/utils/create-zip/svelte/files.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkh44/codesandbox-client/master/src/app/store/entities/sandboxes/utils/create-zip/svelte/files.zip -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/utils/create-zip/vue-cli/files.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkh44/codesandbox-client/master/src/app/store/entities/sandboxes/utils/create-zip/vue-cli/files.zip -------------------------------------------------------------------------------- /src/app/components/flex/Fullscreen.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.div` 4 | display: flex; 5 | flex: auto; 6 | width: 100%; 7 | height: 100%; 8 | `; 9 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/utils/create-zip/preact-cli/files.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkh44/codesandbox-client/master/src/app/store/entities/sandboxes/utils/create-zip/preact-cli/files.zip -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/src/actions/source/index.ts: -------------------------------------------------------------------------------- 1 | import * as d from './dependencies'; 2 | import * as m from './modules'; 3 | 4 | export const dependencies = d; 5 | export const modules = m; 6 | -------------------------------------------------------------------------------- /src/app/components/Stat/format-number.js: -------------------------------------------------------------------------------- 1 | export default function(count: number): string { 2 | if (count >= 1000) { 3 | return `${(count / 1000).toFixed(1)}k`; 4 | } 5 | 6 | return `${count}`; 7 | } 8 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/utils/create-zip/create-react-app/files.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkh44/codesandbox-client/master/src/app/store/entities/sandboxes/utils/create-zip/create-react-app/files.zip -------------------------------------------------------------------------------- /src/sandbox/npm/__snapshots__/dependencies-to-query.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`creates a right query 1`] = `"%40angular%2Fcore%4014.0.0+react%40latest+react-dom%4015.5.3"`; 4 | -------------------------------------------------------------------------------- /src/app/components/spacing/Margin.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import getSpacing from './get-spacing'; 3 | 4 | export default styled.div` 5 | margin: ${getSpacing}; 6 | box-sizing: border-box; 7 | `; 8 | -------------------------------------------------------------------------------- /src/app/components/spacing/Padding.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import getSpacing from './get-spacing'; 3 | 4 | export default styled.div` 5 | padding: ${getSpacing}; 6 | box-sizing: border-box; 7 | `; 8 | -------------------------------------------------------------------------------- /src/sandbox/npm/dependencies-to-query.js: -------------------------------------------------------------------------------- 1 | export default (dependencies: Object) => 2 | Object.keys(dependencies) 3 | .sort() 4 | .map(name => encodeURIComponent(`${name}@${dependencies[name]}`)) 5 | .join('+'); 6 | -------------------------------------------------------------------------------- /src/app/store/entities/users/entity.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import { schema } from 'normalizr'; 3 | 4 | export default new schema.Entity( 5 | 'users', 6 | {}, 7 | { 8 | idAttribute: u => u.username, 9 | } 10 | ); 11 | -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "react-dom": "registry:npm/react-dom#15.0.1+20160826174104" 4 | }, 5 | "globalDependencies": { 6 | "react-dom": "registry:dt/react-dom#0.14.0+20160412154040" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_size = 2 8 | indent_style = space 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/utils/create-zip/create-react-app-typescript/files.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkh44/codesandbox-client/master/src/app/store/entities/sandboxes/utils/create-zip/create-react-app-typescript/files.zip -------------------------------------------------------------------------------- /flow-typed/npm/flow-bin_v0.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 6a5610678d4b01e13bbfbbc62bdaf583 2 | // flow-typed version: 3817bc6980/flow-bin_v0.x.x/flow_>=v0.25.x 3 | 4 | declare module "flow-bin" { 5 | declare module.exports: string; 6 | } 7 | -------------------------------------------------------------------------------- /src/app/components/animation/DelayedAnimation.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import delayEffect from '../../utils/animation/delay-effect'; 3 | 4 | export default styled.div` 5 | ${props => delayEffect(props.delay || 0)}; 6 | `; 7 | -------------------------------------------------------------------------------- /src/app/containers/Preferences/Integrations/Integrations.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import ZeitIntegration from 'app/containers/integrations/Zeit'; 4 | 5 | export default () => ( 6 |
7 | 8 |
9 | ); 10 | -------------------------------------------------------------------------------- /flow-typed/npm/strip-ansi_v3.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 8b05dd8048f5193e21269eab58859283 2 | // flow-typed version: 94e9f7e0a4/strip-ansi_v3.x.x/flow_>=v0.28.x 3 | 4 | declare module 'strip-ansi' { 5 | declare module.exports: (input: string) => string; 6 | } 7 | -------------------------------------------------------------------------------- /src/app/pages/Patron/PricingModal/Title.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.h3` 4 | font-weight: 300; 5 | margin-bottom: 2rem; 6 | color: white; 7 | font-size: 1.5rem; 8 | text-align: center; 9 | margin-top: 0; 10 | `; 11 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/src/codesandbox.ts: -------------------------------------------------------------------------------- 1 | // Errors 2 | export { 3 | transformError, 4 | clearErrorTransformers, 5 | registerErrorTransformer, 6 | } from './errors'; 7 | 8 | // Actions 9 | export * from './actions'; 10 | export * from './dispatcher'; 11 | -------------------------------------------------------------------------------- /public/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | https://codesandbox.io/ 5 | daily 6 | 1.0 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/app/components/flex/Column.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | 7 | justify-content: ${props => props.justifyContent}; 8 | align-items: ${props => props.alignItems}; 9 | `; 10 | -------------------------------------------------------------------------------- /src/app/components/flex/Row.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.div` 4 | display: flex; 5 | flex-direction: row; 6 | 7 | justify-content: ${props => props.justifyContent}; 8 | align-items: ${props => props.alignItems || 'center'}; 9 | `; 10 | -------------------------------------------------------------------------------- /src/sandbox/utils/host.js: -------------------------------------------------------------------------------- 1 | function getHost() { 2 | if (process.env.LOCAL_SERVER) { 3 | return 'http://localhost:3000'; 4 | } 5 | 6 | return process.env.NODE_ENV === 'development' 7 | ? '*' 8 | : 'https://codesandbox.io'; 9 | } 10 | 11 | export default getHost(); 12 | -------------------------------------------------------------------------------- /flow-typed/npm/object-assign_v4.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 76d95a386c86330da36edcec08a0de27 2 | // flow-typed version: 94e9f7e0a4/object-assign_v4.x.x/flow_>=v0.28.x 3 | 4 | declare module 'object-assign' { 5 | declare function exports(target: any, ...sources: Array): Object; 6 | } 7 | -------------------------------------------------------------------------------- /src/app/containers/Preferences/Badges/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import BadgesContent from './BadgesContent'; 4 | import Title from '../MenuTitle'; 5 | 6 | export default () => ( 7 |
8 | Badges 9 | 10 |
11 | ); 12 | -------------------------------------------------------------------------------- /src/app/utils/error.js: -------------------------------------------------------------------------------- 1 | export default function logError(err, { level = 'error', service = '' } = {}) { 2 | Raven.captureException(err, { 3 | level, 4 | extra: { 5 | service, 6 | }, 7 | }); 8 | 9 | if (window.console && console.error) console.error(err); 10 | } 11 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/src/actions/source/dependencies.ts: -------------------------------------------------------------------------------- 1 | import { Action } from '../'; 2 | 3 | export function add(dependencyName: string) { 4 | return { 5 | type: 'action', 6 | action: 'source.dependencies.add', 7 | dependency: dependencyName, 8 | }; 9 | } 10 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/src/actions/source/modules.ts: -------------------------------------------------------------------------------- 1 | import { Action } from '../'; 2 | 3 | export function rename(moduleId: string, title: string) { 4 | return { 5 | type: 'action', 6 | action: 'source.module.rename', 7 | moduleId, 8 | title, 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /src/embed/components/EditorLink.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import testRender from 'app/utils/test/render'; 3 | import EditorLink from './EditorLink'; 4 | 5 | describe('EditorLink', () => { 6 | it('renders', () => { 7 | testRender(); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /src/app/pages/Sandbox/Editor/Workspace/WorkspaceSubtitle.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.h4` 4 | font-size: 0.875rem; 5 | margin: 0.5rem 0; 6 | font-weight: 400; 7 | color: ${props => props.theme.background3.lighten(0.5)}; 8 | padding: 0 1rem; 9 | `; 10 | -------------------------------------------------------------------------------- /src/app/containers/Preferences/Integrations/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Title from '../MenuTitle'; 4 | 5 | import Integrations from './Integrations'; 6 | 7 | export default () => ( 8 |
9 | Integrations 10 | 11 | 12 |
13 | ); 14 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/.editorconfig: -------------------------------------------------------------------------------- 1 | #root = true 2 | 3 | [*] 4 | indent_style = space 5 | end_of_line = lf 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | max_line_length = 100 10 | indent_size = 2 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /src/app/containers/Preferences/MenuTitle.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.h2` 4 | font-weight: 500; 5 | font-size: 1.125rem; 6 | color: rgba(255, 255, 255, 0.9); 7 | margin-top: 0 !important; 8 | margin-bottom: 2rem; 9 | 10 | text-transform: uppercase; 11 | `; 12 | -------------------------------------------------------------------------------- /src/app/containers/Preferences/EditorPageSettings/EditorSettings/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Preferences from './Preferences'; 4 | import Title from '../../MenuTitle'; 5 | 6 | export default () => ( 7 |
8 | Editor 9 | 10 | 11 |
12 | ); 13 | -------------------------------------------------------------------------------- /src/app/containers/Preferences/EditorPageSettings/PreviewSettings/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Preferences from './Preferences'; 4 | import Title from '../../MenuTitle'; 5 | 6 | export default () => ( 7 |
8 | Preview 9 | 10 | 11 |
12 | ); 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | coverage 8 | 9 | # production 10 | build 11 | www 12 | .deliver 13 | 14 | # misc 15 | .DS_Store 16 | npm-debug.log 17 | yarn-error.log 18 | .vscode 19 | .idea 20 | jest 21 | -------------------------------------------------------------------------------- /src/app/store/entities/index.js: -------------------------------------------------------------------------------- 1 | import modules from './sandboxes/modules/entity'; 2 | import directories from './sandboxes/directories/entity'; 3 | import sandboxes from './sandboxes/entity'; 4 | import users from './users/entity'; 5 | 6 | export default { 7 | sandboxes, 8 | modules, 9 | directories, 10 | users, 11 | }; 12 | -------------------------------------------------------------------------------- /src/app/components/flex/Centered.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.div` 4 | position: relative; 5 | display: flex; 6 | ${props => props.vertical && 'justify-content: center;'} ${props => 7 | props.horizontal && 'align-items: center;'} flex-direction: column; 8 | width: 100%; 9 | `; 10 | -------------------------------------------------------------------------------- /Dockerfile.prod: -------------------------------------------------------------------------------- 1 | FROM node:8.2.1 2 | LABEL maintainer "Ives van Hoorne" 3 | 4 | COPY package.json /app/package.json 5 | COPY yarn.lock /app/yarn.lock 6 | 7 | WORKDIR /app 8 | RUN yarn install 9 | 10 | # After yarn install, so dev deps are also installed (for building) 11 | ENV NODE_ENV production 12 | 13 | ADD . /app 14 | RUN npm run build 15 | -------------------------------------------------------------------------------- /flow-typed/npm/path-exists_v3.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 33a3a3bf2de571b296cf5905aea164bf 2 | // flow-typed version: 94e9f7e0a4/path-exists_v3.x.x/flow_>=v0.28.x 3 | 4 | declare module 'path-exists' { 5 | declare module.exports: { 6 | (filePath: string): Promise, 7 | sync(filePath: string): boolean, 8 | }; 9 | } 10 | -------------------------------------------------------------------------------- /src/app/utils/badges/PatronBadge.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Badge from './Badge'; 3 | 4 | const DEFAULT_BADGE = { 5 | id: 'patron_1', 6 | name: 'Patron I', 7 | visible: true, 8 | }; 9 | 10 | export default ({ size, ...props }: { size: number }) => ( 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /src/sandbox/npm/dependencies-to-query.test.js: -------------------------------------------------------------------------------- 1 | import dependenciesToQuery from './dependencies-to-query'; 2 | 3 | it('creates a right query', () => { 4 | const packages = { 5 | react: 'latest', 6 | 'react-dom': '15.5.3', 7 | '@angular/core': '14.0.0', 8 | }; 9 | 10 | expect(dependenciesToQuery(packages)).toMatchSnapshot(); 11 | }); 12 | -------------------------------------------------------------------------------- /src/app/components/Tooltip.js: -------------------------------------------------------------------------------- 1 | import { injectGlobal } from 'styled-components'; 2 | import 'react-tippy/dist/tippy.css'; 3 | import { Tooltip } from 'react-tippy'; 4 | 5 | // eslint-disable-next-line 6 | injectGlobal` 7 | .tippy-tooltip [x-circle] { 8 | background-color: rgb(21, 24, 25) !important; 9 | } 10 | `; 11 | 12 | export default Tooltip; 13 | -------------------------------------------------------------------------------- /src/app/utils/animation/fade-in.js: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | const animation = keyframes` 4 | 0% { opacity: 0; } 5 | 100% { opacity: 1; } 6 | `; 7 | 8 | export default delay => 9 | ` 10 | animation: ${animation} 0.3s; 11 | animation-delay: ${delay}s; 12 | animation-fill-mode: forwards; 13 | opacity: 0; 14 | `; 15 | -------------------------------------------------------------------------------- /src/sandbox/errors/transformers/index.js: -------------------------------------------------------------------------------- 1 | import { registerErrorTransformer } from 'codesandbox-api'; 2 | 3 | import rawReactErrorTransformer from './raw-react-component-error'; 4 | 5 | const transformers = [rawReactErrorTransformer]; 6 | 7 | export default function registerErrorTransformers() { 8 | transformers.forEach(t => registerErrorTransformer(t)); 9 | } 10 | -------------------------------------------------------------------------------- /src/app/components/buttons/LinkButton.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import theme from 'common/theme'; 3 | 4 | export default styled.button` 5 | display: inline-block; 6 | background-color: transparent; 7 | color: ${() => theme.secondary()}; 8 | border: none; 9 | outline: none; 10 | cursor: pointer; 11 | text-decoration: underline; 12 | `; 13 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "ES6", 5 | "paths": { 6 | "sandbox/*": "src/sandbox/*", 7 | "app/*": "src/app/*", 8 | "common/*": "src/common/*", 9 | "codesandbox/*": "src/codesandbox/*" 10 | } 11 | }, 12 | "files": ["src/**/*.js"], 13 | "exclude": ["node_modules/**/*.*"] 14 | } 15 | -------------------------------------------------------------------------------- /src/app/store/services/middleware/thunk-middleware.js: -------------------------------------------------------------------------------- 1 | function createThunkMiddleware() { 2 | return ({ dispatch, getState }) => next => action => { 3 | if (typeof action === 'function') { 4 | return action(dispatch, getState); 5 | } 6 | 7 | return next(action); 8 | }; 9 | } 10 | 11 | const thunk = createThunkMiddleware(); 12 | 13 | export default thunk; 14 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/vue/style-compiler/plugins/trim.js: -------------------------------------------------------------------------------- 1 | var postcss = require('postcss'); 2 | 3 | export default postcss.plugin('trim', function(opts) { 4 | return function(css) { 5 | css.walk(function(node) { 6 | if (node.type === 'rule' || node.type === 'atrule') { 7 | node.raws.before = node.raws.after = '\n'; 8 | } 9 | }); 10 | }; 11 | }); 12 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/test/codesandbox.test.ts: -------------------------------------------------------------------------------- 1 | import DummyClass from "../src/codesandbox" 2 | 3 | /** 4 | * Dummy test 5 | */ 6 | describe("Dummy test", () => { 7 | it("works if true is truthy", () => { 8 | expect(true).toBeTruthy() 9 | }) 10 | 11 | it("DummyClass is instantiable", () => { 12 | expect(new DummyClass()).toBeInstanceOf(DummyClass) 13 | }) 14 | }) 15 | -------------------------------------------------------------------------------- /src/sandbox/errors/no-dom-change-error.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import SandboxError from './sandbox-error'; 3 | 4 | export default class NoDomChangeError extends SandboxError { 5 | constructor(react: boolean, name: string) { 6 | super(); 7 | 8 | this.payload = { 9 | react, 10 | name, 11 | }; 12 | } 13 | 14 | type = 'no-dom-change'; 15 | severity = 'warning'; 16 | hideLine: true; 17 | } 18 | -------------------------------------------------------------------------------- /src/app/components/buttons/LinkButton.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import testRender from 'app/utils/test/render'; 3 | import LinkButton from './LinkButton'; 4 | 5 | describe('LinkButton', () => { 6 | it('renders', () => { 7 | testRender(Test); 8 | }); 9 | 10 | it('renders onClick', () => { 11 | testRender( {}}>Test); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/app/utils/config.js: -------------------------------------------------------------------------------- 1 | export const ALGOLIA_API_KEY = '7675b9e87ed7dd5bbf18f3e5310f92d6'; 2 | export const ALGOLIA_APPLICATION_ID = 'ZACZHDBO7S'; 3 | export const ALGOLIA_DEFAULT_INDEX = 4 | process.env.NODE_ENV === 'production' ? 'prod_sandboxes' : 'dev_sandboxes'; 5 | 6 | export const STRIPE_API_KEY = 7 | process.env.NODE_ENV === 'production' 8 | ? 'pk_live_KeUgofl1VrjTtbrhhN7gGI9W' 9 | : 'pk_test_0HgnQIkQJCECIFCQkafGQ5gA'; 10 | -------------------------------------------------------------------------------- /src/app/utils/test/render.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | import 'jest-styled-components'; 4 | 5 | import { ThemeProvider } from 'styled-components'; 6 | import theme from 'common/theme'; 7 | 8 | export default Component => { 9 | const tree = renderer 10 | .create({Component}) 11 | .toJSON(); 12 | expect(tree).toMatchSnapshot(); 13 | }; 14 | -------------------------------------------------------------------------------- /src/common/theme.test.js: -------------------------------------------------------------------------------- 1 | import theme from './theme'; 2 | 3 | describe('theme', () => { 4 | it('has a theme', () => { 5 | expect(theme).toMatchSnapshot(); 6 | }); 7 | 8 | it('can adjust colors', () => { 9 | expect(theme.background.darken(0.5)()).toMatchSnapshot(); 10 | }); 11 | 12 | it('can chain color adjustments', () => { 13 | expect(theme.background.darken(0.5).lighten(0.2)()).toMatchSnapshot(); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /src/app/components/text/Title.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import delayEffect from '../../utils/animation/delay-effect'; 3 | 4 | export default styled.h1` 5 | ${props => props.delay != null && delayEffect(props.delay || 0)}; 6 | color: white; 7 | font-size: 2.5rem; 8 | font-weight: 300; 9 | background-color: transparent; 10 | margin-top: 0; 11 | border: none; 12 | outline: none; 13 | text-align: center; 14 | `; 15 | -------------------------------------------------------------------------------- /src/app/pages/Search/ResultInfo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import { Stats, ClearAll } from 'react-instantsearch/dom'; 4 | 5 | const ClearAllContainer = styled.div`float: right;`; 6 | 7 | export default () => ( 8 |
9 | 10 | 11 | 12 | 13 |
14 | ); 15 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "CodeSandbox", 3 | "name": "CodeSandbox", 4 | "description": "An online editor tailored for web applications", 5 | "icons": [ 6 | { 7 | "src": "favicon.ico", 8 | "sizes": "192x192", 9 | "type": "image/png" 10 | } 11 | ], 12 | "start_url": "/s/new?utm_source=homescreen", 13 | "display": "standalone", 14 | "theme_color": "#6CAEDD", 15 | "background_color": "#1C2022" 16 | } 17 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/noop/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import Transpiler from '../'; 3 | 4 | class NoopTranspiler extends Transpiler { 5 | constructor() { 6 | super('noop-loader'); 7 | } 8 | 9 | doTranspilation(code: string) { 10 | return Promise.resolve({ 11 | transpiledCode: code || '', 12 | }); 13 | } 14 | } 15 | 16 | const transpiler = new NoopTranspiler(); 17 | 18 | export { NoopTranspiler }; 19 | 20 | export default transpiler; 21 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/selectors.js: -------------------------------------------------------------------------------- 1 | import { createSelector } from 'reselect'; 2 | 3 | export const sandboxesSelector = state => state.entities.sandboxes; 4 | 5 | export const singleSandboxSelector = createSelector( 6 | sandboxesSelector, 7 | (_, { id }) => id, 8 | (sandboxes, id) => sandboxes[id] 9 | ); 10 | 11 | const PRIVACY_NAMES = ['Public', 'Unlisted', 'Private']; 12 | 13 | export const privacyNameSelector = privacy => PRIVACY_NAMES[+privacy]; 14 | -------------------------------------------------------------------------------- /src/app/pages/Search/Filters/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Filter from './Filter'; 4 | 5 | export default () => ( 6 |
7 | 8 | 13 | 14 |
15 | ); 16 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/directories/actions.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | export const RENAME_DIRECTORY = 'RENAME_DIRECTORY'; 4 | export const MOVE_DIRECTORY = 'MOVE_DIRECTORY'; 5 | 6 | export default { 7 | renameDirectory: (id: string, title: string) => ({ 8 | type: RENAME_DIRECTORY, 9 | id, 10 | title, 11 | }), 12 | moveDirectory: (id: string, directoryShortid: string) => ({ 13 | type: MOVE_DIRECTORY, 14 | id, 15 | directoryShortid, 16 | }), 17 | }; 18 | -------------------------------------------------------------------------------- /src/app/components/text/SubTitle.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import delayEffect from '../../utils/animation/delay-effect'; 3 | 4 | export default styled.h2` 5 | ${props => 6 | props.delay != null && delayEffect(props.delay || 0)} text-align: center; 7 | width: 100%; 8 | font-size: 1.75rem; 9 | color: ${props => props.theme.background2.lighten(2)}; 10 | font-weight: 300; 11 | margin-top: 0; 12 | margin-bottom: 1.5rem; 13 | line-height: 1.4; 14 | `; 15 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | branches: 3 | only: 4 | - master 5 | - /^greenkeeper/.*$/ 6 | cache: 7 | yarn: true 8 | directories: 9 | - node_modules 10 | notifications: 11 | email: false 12 | node_js: 13 | - '7.5' 14 | before_script: 15 | - npm prune && npm cache clean 16 | script: 17 | - npm run test:prod && npm run build 18 | after_success: 19 | - npm run report-coverage 20 | - npm run deploy-docs 21 | - npm run semantic-release 22 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/raw/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import Transpiler from '../'; 3 | 4 | class RawTranspiler extends Transpiler { 5 | constructor() { 6 | super('raw-loader'); 7 | } 8 | 9 | doTranspilation(code: string) { 10 | return Promise.resolve({ 11 | transpiledCode: ` 12 | exports = ${JSON.stringify(code)};`, 13 | }); 14 | } 15 | } 16 | 17 | const transpiler = new RawTranspiler(); 18 | 19 | export { RawTranspiler }; 20 | 21 | export default transpiler; 22 | -------------------------------------------------------------------------------- /src/app/store/entities/actions.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import { schema, normalize } from 'normalizr'; 4 | import { camelizeKeys } from 'humps'; 5 | 6 | export const ADD_ENTITIES = 'ADD_ENTITIES'; 7 | 8 | export function normalizeResult(entity: schema.Entity, result: Object) { 9 | return async (dispatch: Function) => { 10 | const normalizedResult = normalize(camelizeKeys(result), entity); 11 | 12 | dispatch({ 13 | type: ADD_ENTITIES, 14 | ...normalizedResult, 15 | }); 16 | }; 17 | } 18 | -------------------------------------------------------------------------------- /src/app/components/spacing/get-spacing.js: -------------------------------------------------------------------------------- 1 | export default function({ 2 | margin, 3 | top, 4 | right, 5 | left, 6 | bottom, 7 | horizontal, 8 | vertical, 9 | }) { 10 | const topMargin = top || vertical || margin || 0; 11 | const rightMargin = right || horizontal || margin || 0; 12 | const bottomMargin = bottom || vertical || margin || 0; 13 | const leftMargin = left || horizontal || margin || 0; 14 | 15 | return `${topMargin}rem ${rightMargin}rem ${bottomMargin}rem ${leftMargin}rem`; 16 | } 17 | -------------------------------------------------------------------------------- /src/app/store/user/utils/jwt.js: -------------------------------------------------------------------------------- 1 | import store from 'store/dist/store.modern'; 2 | 3 | export default function getJwt() { 4 | // TODO remove cookie 5 | return ( 6 | store.get('jwt') || (document.cookie.match(/[; ]?jwt=([^\s;]*)/) || [])[1] 7 | ); 8 | } 9 | 10 | export function resetJwt() { 11 | document.cookie = `jwt=; Path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;`; 12 | return store.set('jwt', null); 13 | } 14 | 15 | export function setJwt(jwt: string) { 16 | return store.set('jwt', jwt); 17 | } 18 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/json/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import Transpiler from '../'; 3 | 4 | class JSONTranspiler extends Transpiler { 5 | doTranspilation(code: string) { 6 | const result = ` 7 | exports = JSON.parse(${JSON.stringify(code || '')}) 8 | `; 9 | 10 | return Promise.resolve({ 11 | transpiledCode: result, 12 | }); 13 | } 14 | } 15 | 16 | const transpiler = new JSONTranspiler('json-loader'); 17 | 18 | export { JSONTranspiler }; 19 | 20 | export default transpiler; 21 | -------------------------------------------------------------------------------- /src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitle.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from 'react'; 3 | import styled from 'styled-components'; 4 | 5 | const TitleContainer = styled.span` 6 | display: inline-block; 7 | margin-left: 0.5rem; 8 | text-overflow: ellipsis; 9 | white-space: nowrap; 10 | overflow: hidden; 11 | vertical-align: middle; 12 | `; 13 | 14 | export default ({ title }: { title: string }) => ( 15 | {title} 16 | ); 17 | -------------------------------------------------------------------------------- /src/app/store/modal/actions.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from 'react'; 3 | 4 | export const OPEN_MODAL = 'OPEN_MODAL'; 5 | export const CLOSE_MODAL = 'CLOSE_MODAL'; 6 | 7 | const openModal = ({ 8 | Body, 9 | title, 10 | width, 11 | }: { 12 | Body: React.Element, 13 | title: ?string, 14 | width?: number, 15 | }) => ({ 16 | type: OPEN_MODAL, 17 | title, 18 | width, 19 | Body, 20 | }); 21 | 22 | export default { 23 | openModal, 24 | closeModal: () => ({ type: CLOSE_MODAL }), 25 | }; 26 | -------------------------------------------------------------------------------- /src/app/utils/badges/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | import Patron4 from './svg/patron-4.svg'; 3 | import Patron3 from './svg/patron-3.svg'; 4 | import Patron2 from './svg/patron-2.svg'; 5 | import Patron1 from './svg/patron-1.svg'; 6 | 7 | export default function getBadge(badgeId: string): string { 8 | if (badgeId === 'patron_4') return Patron4; 9 | if (badgeId === 'patron_3') return Patron3; 10 | if (badgeId === 'patron_2') return Patron2; 11 | if (badgeId === 'patron_1') return Patron1; 12 | 13 | return ''; 14 | } 15 | -------------------------------------------------------------------------------- /src/sandbox/eval/errors/module-error.js: -------------------------------------------------------------------------------- 1 | /* 2 | MIT License http://www.opensource.org/licenses/mit-license.php 3 | Author Tobias Koppers @sokra 4 | */ 5 | export default class ModuleError extends Error { 6 | constructor(module, err) { 7 | super(); 8 | 9 | this.name = 'ModuleError'; 10 | this.module = module; 11 | this.message = 12 | err && typeof err === 'object' && err.message ? err.message : err; 13 | this.error = err; 14 | 15 | Error.captureStackTrace(this, this.constructor); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/src/actions/editor.ts: -------------------------------------------------------------------------------- 1 | import { Action } from './'; 2 | 3 | export interface OpenModuleAction extends Action { 4 | moduleId: string; 5 | lineNumber: number; 6 | } 7 | 8 | export function openModule( 9 | id: string, 10 | lineNumber: number = 1, 11 | ): OpenModuleAction { 12 | // TODO automatically add type: 'action', maybe do this after conversion to TS 13 | return { 14 | type: 'action', 15 | action: 'editor.open-module', 16 | moduleId: id, 17 | lineNumber, 18 | }; 19 | } 20 | -------------------------------------------------------------------------------- /src/app/store/connection/reducer.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as actions from './actions'; 3 | 4 | type State = { 5 | connected: boolean, 6 | }; 7 | 8 | const initialState = { 9 | connected: false, 10 | }; 11 | 12 | export default function reducer( 13 | state: State = initialState, 14 | action: Object 15 | ): State { 16 | switch (action.type) { 17 | case actions.SET_CONNECTION_STATUS: 18 | return { 19 | ...state, 20 | connected: action.connected, 21 | }; 22 | default: 23 | return state; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/app/store/context-menu/actions.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import type { ContextMenuItem } from './reducer'; 3 | 4 | export const CLOSE_CONTEXT_MENU = 'CLOSE_CONTEXT_MENU'; 5 | export const OPEN_CONTEXT_MENU = 'OPEN_CONTEXT_MENU'; 6 | 7 | const openMenu = ( 8 | items: Array, 9 | x: number, 10 | y: number, 11 | onClose: ?() => void 12 | ) => ({ 13 | type: OPEN_CONTEXT_MENU, 14 | items, 15 | x, 16 | y, 17 | onClose, 18 | }); 19 | 20 | export default { 21 | openMenu, 22 | closeMenu: () => ({ type: CLOSE_CONTEXT_MENU }), 23 | }; 24 | -------------------------------------------------------------------------------- /src/app/utils/url-generator.test.js: -------------------------------------------------------------------------------- 1 | import { gitHubToSandboxUrl } from './url-generator'; 2 | 3 | describe('url-generator', () => { 4 | describe('gitHubToSandboxUrl', () => { 5 | [ 6 | 'http://github.com/user/repo', 7 | 'http://www.github.com/user/repo', 8 | 'https://github.com/user/repo', 9 | 'https://www.github.com/user/repo', 10 | ].forEach(inputUrl => { 11 | test(`handles ${inputUrl} urls`, () => { 12 | expect(gitHubToSandboxUrl(inputUrl)).toBe('/s/github/user/repo'); 13 | }); 14 | }); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /src/app/pages/Sandbox/Editor/Workspace/Icon.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import fadeIn from 'app/utils/animation/fade-in'; 3 | 4 | export const Icon = styled.div` 5 | position: relative; 6 | display: inline-block; 7 | transition: 0.3s ease color; 8 | color: ${props => props.theme.background2.lighten(3)}; 9 | padding-left: 0.25rem; 10 | &:hover { 11 | color: white; 12 | } 13 | `; 14 | 15 | export const IconArea = styled.div` 16 | position: absolute; 17 | right: 1rem; 18 | opacity: 0; 19 | line-height: 1; 20 | ${fadeIn(0)}; 21 | `; 22 | -------------------------------------------------------------------------------- /src/app/store/user/selectors.js: -------------------------------------------------------------------------------- 1 | import { createSelector } from 'reselect'; 2 | 3 | export const currentUserSelector = state => state.user; 4 | export const jwtSelector = state => state.user.jwt; 5 | export const userIdSelector = state => state.user.id; 6 | export const loggedInSelector = state => !!jwtSelector(state); 7 | export const isPatronSelector = createSelector( 8 | currentUserSelector, 9 | user => user.subscription && user.subscription.since 10 | ); 11 | export const badgesSelector = createSelector( 12 | currentUserSelector, 13 | user => user.badges 14 | ); 15 | -------------------------------------------------------------------------------- /flow-typed/npm/normalize.css_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: ad2f642979e322af03eb7d536e357210 2 | // flow-typed version: <>/normalize.css_v^5.0.0/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'normalize.css' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'normalize.css' { 17 | declare module.exports: any; 18 | } 19 | -------------------------------------------------------------------------------- /src/app/components/Input.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.input` 4 | transition: 0.3s ease border-color; 5 | background-color: rgba(0, 0, 0, 0.3); 6 | border: none; 7 | outline: none; 8 | border-radius: 4px; 9 | color: white; 10 | padding: 0.25em; 11 | width: inherit; 12 | box-sizing: border-box; 13 | 14 | border: 1px solid 15 | ${props => 16 | props.error ? props.theme.red.clearer(0.5) : 'rgba(0, 0, 0, 0.1)'}; 17 | 18 | &:focus { 19 | border-color: ${props => props.theme.secondary.clearer(0.6)}; 20 | } 21 | `; 22 | -------------------------------------------------------------------------------- /src/app/store/connection/actions.js: -------------------------------------------------------------------------------- 1 | import addListener from 'common/connection-manager'; 2 | 3 | export const SET_CONNECTION_STATUS = 'SET_CONNECTION_STATUS'; 4 | 5 | const createConnectionAction = connected => ({ 6 | type: SET_CONNECTION_STATUS, 7 | connected, 8 | }); 9 | 10 | const initializeConnectionListener = () => dispatch => { 11 | const listener = (connected: boolean) => { 12 | dispatch(createConnectionAction(connected)); 13 | }; 14 | 15 | const unlisten = addListener(listener); 16 | return unlisten; 17 | }; 18 | 19 | export default initializeConnectionListener; 20 | -------------------------------------------------------------------------------- /src/app/utils/analytics.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import _debug from 'app/utils/debug'; 3 | import type { CurrentUser } from 'common/types'; 4 | 5 | const debug = _debug('cs:analytics'); 6 | 7 | const sentryAvailable = () => typeof window.Raven === 'object'; 8 | 9 | function identifySentry(user: CurrentUser) { 10 | if (!sentryAvailable()) return; 11 | 12 | window.Raven.setUserContext({ 13 | id: user.id, 14 | username: user.username, 15 | }); 16 | } 17 | 18 | export function identify(user: CurrentUser) { 19 | debug(`Identified ${user.username}`); 20 | identifySentry(user); 21 | } 22 | -------------------------------------------------------------------------------- /src/app/components/flex/MaxWidth.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | const Container = styled.div` 5 | display: flex; 6 | 7 | width: 100%; 8 | justify-content: center; 9 | `; 10 | 11 | const InnerContainer = styled.div` 12 | width: 100%; 13 | max-width: ${props => props.width}px; 14 | `; 15 | 16 | export default ({ 17 | children, 18 | width = 1280, 19 | }: { 20 | children: React.CElement, 21 | width: number, 22 | }) => ( 23 | 24 | {children} 25 | 26 | ); 27 | -------------------------------------------------------------------------------- /src/sandbox/react-error-overlay/utils/dom/consumeEvent.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | /* @flow */ 11 | function consumeEvent(e: Event) { 12 | e.preventDefault(); 13 | if (typeof e.target.blur === 'function') { 14 | e.target.blur(); 15 | } 16 | } 17 | 18 | export { consumeEvent }; 19 | -------------------------------------------------------------------------------- /src/app/components/Select.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.select` 4 | transition: 0.3s ease border-color; 5 | background-color: rgba(0, 0, 0, 0.3); 6 | border: none; 7 | outline: none; 8 | border-radius: 4px; 9 | color: white; 10 | width: inherit; 11 | box-sizing: border-box; 12 | font-weight: 300; 13 | height: 1.75em; 14 | 15 | border: 1px solid 16 | ${props => 17 | props.error ? props.theme.red.clearer(0.5) : 'rgba(0, 0, 0, 0.1)'}; 18 | 19 | &:focus { 20 | border-color: ${props => props.theme.secondary.clearer(0.6)}; 21 | } 22 | `; 23 | -------------------------------------------------------------------------------- /src/app/containers/Preferences/CodeFormatting/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Question from 'react-icons/lib/go/question'; 4 | 5 | import Prettier from './Prettier'; 6 | import Title from '../MenuTitle'; 7 | 8 | export default () => ( 9 |
10 | 11 | Prettier Settings{' '} 12 | <a 13 | href="https://github.com/prettier/prettier#options" 14 | target="_blank" 15 | rel="noopener noreferrer" 16 | > 17 | <Question style={{ marginBottom: '3px' }} /> 18 | </a> 19 | 20 | 21 | 22 |
23 | ); 24 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/vue/style-compiler/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import Transpiler from '../../'; 3 | import { type LoaderContext } from '../../../transpiled-module'; 4 | 5 | class VueStyleCompiler extends Transpiler { 6 | constructor() { 7 | super('vue-style-compiler'); 8 | } 9 | 10 | doTranspilation(code: string, loaderContext: LoaderContext) { 11 | return import('./loader').then(loader => 12 | loader.default(code, loaderContext) 13 | ); 14 | } 15 | } 16 | 17 | const transpiler = new VueStyleCompiler(); 18 | 19 | export { VueStyleCompiler }; 20 | 21 | export default transpiler; 22 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/modules/validator.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import type { Module, Directory } from 'common/types'; 3 | 4 | export const validateTitle = ( 5 | id: string, 6 | title: string, 7 | siblings: Array // eslint-disable-line 8 | ) => { 9 | if (title.length === 0) return 'Title cannot be empty'; 10 | if (/^[09azAZ_.]+$/.test(title)) { 11 | // It has whitespaces 12 | return 'Title cannot have whitespaces or special characters'; 13 | } 14 | 15 | if (title.length > 32) { 16 | return "The title can't be more than 32 characters long"; 17 | } 18 | 19 | return null; 20 | }; 21 | -------------------------------------------------------------------------------- /src/app/hoc/show-alternative-component.js: -------------------------------------------------------------------------------- 1 | import { createElement } from 'react'; 2 | 3 | /** 4 | * Shows a loading component if any of the props provided by `fields` does 5 | * not exist 6 | */ 7 | export default (LoadingComponent, fields = []) => Component => props => { 8 | const componentLoaded = fields.every( 9 | field => typeof props[field] !== 'undefined' && props[field] !== null 10 | ); 11 | 12 | if (componentLoaded) { 13 | return createElement(Component, props); 14 | } 15 | 16 | return createElement(LoadingComponent, props); 17 | }; 18 | 19 | // AlternativeComponent(LoadingComponent, ['field'])(Component) 20 | -------------------------------------------------------------------------------- /src/app/components/Loading.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled, { keyframes } from 'styled-components'; 3 | import Logo from './Logo'; 4 | import Centered from './flex/Centered'; 5 | 6 | const animation = keyframes` 7 | 0%, 10% { transform: rotateZ(0deg); } 8 | 90%, 100% { transform: rotateZ(360deg); } 9 | `; 10 | 11 | const LogoContainer = styled.div` 12 | animation-name: ${animation}; 13 | animation-duration: 800ms; 14 | `; 15 | 16 | export default () => ( 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/embed/components/File.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import testRender from 'app/utils/test/render'; 3 | import File from './File'; 4 | 5 | describe('File', () => { 6 | it('renders', () => { 7 | testRender(); 8 | }); 9 | 10 | it('renders as active', () => { 11 | testRender(); 12 | }); 13 | 14 | it('renders directory', () => { 15 | testRender(); 16 | }); 17 | 18 | it('renders alternative', () => { 19 | testRender(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/sandbox/eval/loaders/eval.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | /* eslint-disable no-unused-vars */ 4 | export default function(code: string, require: Function) { 5 | const module = { exports: {} }; 6 | const exports = {}; 7 | const global = window; 8 | const process = { env: { NODE_ENV: 'development' } }; 9 | 10 | try { 11 | eval(code); // eslint-disable-line no-eval 12 | 13 | // Choose either the export of __esModule or node 14 | return Object.keys(exports || {}).length > 0 ? exports : module.exports; 15 | } catch (e) { 16 | e.isEvalError = true; 17 | 18 | throw e; 19 | } 20 | } 21 | /* eslint-enable no-unused-vars */ 22 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/directories/__snapshots__/reducer.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`directoriesReducer can move a directory 1`] = ` 4 | Object { 5 | "longid-dir0": Object { 6 | "directoryShortid": "218hj", 7 | "id": "longid-dir0", 8 | "shortid": "shortid-dir0", 9 | "title": "test-dir0", 10 | }, 11 | } 12 | `; 13 | 14 | exports[`directoriesReducer can rename a directory 1`] = ` 15 | Object { 16 | "longid-dir0": Object { 17 | "directoryShortid": null, 18 | "id": "longid-dir0", 19 | "shortid": "shortid-dir0", 20 | "title": "ttest2", 21 | }, 22 | } 23 | `; 24 | -------------------------------------------------------------------------------- /src/app/components/user/PatronStar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import moment from 'moment'; 4 | import Tooltip from 'app/components/Tooltip'; 5 | import StarIcon from 'react-icons/lib/go/star'; 6 | 7 | const Container = styled(Tooltip)` 8 | margin-left: 0.25rem; 9 | color: ${props => props.theme.primary()}; 10 | `; 11 | 12 | export default ({ 13 | subscriptionSince, 14 | ...props 15 | }: { 16 | subscriptionSince: string, 17 | }) => ( 18 | 21 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/app/utils/animation/delay-effect.js: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | const animation = keyframes` 4 | 0% { opacity: 0; transform: translateY(10px); } 5 | 100% { opacity: 1; transform: translateY(0px); } 6 | `; 7 | 8 | const reverseAnimation = keyframes` 9 | 0% { opacity: 0; transform: translateY(0px); } 10 | 100% { opacity: 1; transform: translateY(10px); } 11 | `; 12 | 13 | export default (delay: number = 0, reverse: boolean = true) => 14 | ` 15 | animation: ${reverse ? reverseAnimation : animation} 0.3s; 16 | animation-delay: ${delay}s; 17 | animation-fill-mode: forwards; 18 | opacity: 0; 19 | `; 20 | -------------------------------------------------------------------------------- /src/app/utils/animation/delay-out-effect.js: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | const animation = keyframes` 4 | 0% { opacity: 1; transform: translateY(10px); } 5 | 100% { opacity: 0; transform: translateY(0px); } 6 | `; 7 | 8 | const reverseAnimation = keyframes` 9 | 0% { opacity: 1; transform: translateY(0px); } 10 | 100% { opacity: 0; transform: translateY(10px); } 11 | `; 12 | 13 | export default (delay: number = 0, reverse: boolean = true) => 14 | ` 15 | animation: ${reverse ? reverseAnimation : animation} 0.3s; 16 | animation-delay: ${delay}s; 17 | animation-fill-mode: forwards; 18 | opacity: 1; 19 | `; 20 | -------------------------------------------------------------------------------- /src/common/__snapshots__/theme.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`theme can adjust colors 1`] = `"rgb(19, 21, 22)"`; 4 | 5 | exports[`theme can chain color adjustments 1`] = `"rgb(24, 26, 27)"`; 6 | 7 | exports[`theme has a theme 1`] = ` 8 | Object { 9 | "background": [Function], 10 | "background2": [Function], 11 | "background3": [Function], 12 | "black": [Function], 13 | "gray": [Function], 14 | "green": [Function], 15 | "primary": [Function], 16 | "primaryText": [Function], 17 | "red": [Function], 18 | "redBackground": [Function], 19 | "secondary": [Function], 20 | "white": [Function], 21 | } 22 | `; 23 | -------------------------------------------------------------------------------- /src/sandbox/eval/presets/preact-cli/transpilers/async.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import { NoopTranspiler } from '../../../transpilers/noop'; 3 | 4 | /** 5 | * This transpiler actually does nothing but return the code that was given, 6 | * this happens since our code is already in the browser, we don't need to 7 | * dynamically load it 8 | * 9 | * @class AsyncTranspiler 10 | * @extends {NoopTranspiler} 11 | */ 12 | class AsyncTranspiler extends NoopTranspiler { 13 | constructor() { 14 | super(); 15 | 16 | this.name = 'async'; 17 | } 18 | } 19 | 20 | const transpiler = new AsyncTranspiler(); 21 | 22 | export { AsyncTranspiler }; 23 | 24 | export default transpiler; 25 | -------------------------------------------------------------------------------- /config/polyfills.js: -------------------------------------------------------------------------------- 1 | if (typeof Promise === 'undefined') { 2 | // Rejection tracking prevents a common issue where React gets into an 3 | // inconsistent state due to an error, but it gets swallowed by a Promise, 4 | // and the user has no idea what causes React's erratic future behavior. 5 | require('promise/lib/rejection-tracking').enable(); 6 | window.Promise = require('promise/lib/es6-extensions.js'); 7 | } 8 | 9 | // fetch() polyfill for making API calls. 10 | require('whatwg-fetch'); 11 | 12 | // Object.assign() is commonly used with React. 13 | // It will use the native implementation if it's present and isn't buggy. 14 | Object.assign = require('object-assign'); 15 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "moduleResolution": "node", 4 | "target": "es5", 5 | "module":"es2015", 6 | "lib": ["es2015", "es2016", "es2017", "dom"], 7 | "strict": true, 8 | "sourceMap": true, 9 | "declaration": true, 10 | "allowSyntheticDefaultImports": true, 11 | "experimentalDecorators": true, 12 | "emitDecoratorMetadata": true, 13 | "declarationDir": "dist/types", 14 | "outDir": "compiled", 15 | "typeRoots": [ 16 | "node_modules/@types" 17 | ] 18 | }, 19 | "include": [ 20 | "src" 21 | ] 22 | } -------------------------------------------------------------------------------- /src/sandbox/boilerplates/default-boilerplates.js: -------------------------------------------------------------------------------- 1 | export const JS = { 2 | id: 'js', 3 | extension: '.js', 4 | condition: '.jsx?$', 5 | code: ` 6 | import React from 'react'; 7 | import { render } from 'react-dom'; 8 | export default function(module) { 9 | const node = document.createElement('div'); 10 | document.body.appendChild(node); 11 | render(React.createElement(module.default), node); 12 | } 13 | `, 14 | }; 15 | 16 | export const HTML = { 17 | id: 'html', 18 | extension: '.html', 19 | condition: '.html$', 20 | code: ` 21 | export default function(module) { 22 | document.body.innerHTML = module 23 | } 24 | `, 25 | }; 26 | 27 | export default [JS, HTML]; 28 | -------------------------------------------------------------------------------- /src/app/store/preferences/actions.js: -------------------------------------------------------------------------------- 1 | import store from 'store/dist/store.modern'; 2 | 3 | import * as keys from './keys'; 4 | 5 | export const SET_PREFERENCES = 'SET_PREFERENCES'; 6 | 7 | const setOption = (key, val) => { 8 | try { 9 | store.set(key, val); 10 | return true; 11 | } catch (e) { 12 | console.error(e); 13 | return false; 14 | } 15 | }; 16 | 17 | export default { 18 | setPreference: (preferences: Object) => (dispatch: Function) => { 19 | Object.keys(preferences).forEach(key => 20 | setOption(keys[key], preferences[key]) 21 | ); 22 | dispatch({ 23 | type: SET_PREFERENCES, 24 | preferences, 25 | }); 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/css/get-modules.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import Core from 'css-modules-loader-core'; 3 | import { type LoaderContext } from '../../transpiled-module'; 4 | 5 | const core = new Core(); 6 | 7 | export default (code: string, loaderContext: LoaderContext) => 8 | core 9 | .load(code, loaderContext.path, (dependencyPath: string) => { 10 | console.log(dependencyPath); 11 | const tModule = loaderContext.addDependency(dependencyPath); 12 | 13 | return tModule.source ? tModule.source.compiledCode : tModule.module.code; 14 | }) 15 | .then(({ injectableSource, exportTokens }) => ({ 16 | css: injectableSource, 17 | exportTokens, 18 | })); 19 | -------------------------------------------------------------------------------- /src/app/components/Preference/PreferenceSwitch.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Switch from 'app/components/Switch'; 3 | 4 | type Props = { 5 | value: boolean, 6 | setValue: boolean => any, 7 | }; 8 | 9 | export default class PreferenceSwitch extends React.PureComponent { 10 | props: Props; 11 | handleClick = () => { 12 | this.props.setValue(!this.props.value); 13 | }; 14 | 15 | render() { 16 | const { value } = this.props; 17 | return ( 18 | 26 | ); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/boilerplates/default-boilerplates.js: -------------------------------------------------------------------------------- 1 | export const JS = { 2 | id: 'js', 3 | extension: '.js', 4 | condition: '.jsx?$', 5 | code: ` 6 | import React from 'react'; 7 | import { render } from 'react-dom'; 8 | export default function(module) { 9 | const node = document.createElement('div'); 10 | document.body.appendChild(node); 11 | render(React.createElement(module.default), node); 12 | } 13 | `, 14 | }; 15 | 16 | export const HTML = { 17 | id: 'html', 18 | extension: '.html', 19 | condition: '.html$', 20 | code: ` 21 | export default function(module) { 22 | document.body.innerHTML = module 23 | } 24 | `, 25 | }; 26 | 27 | export default [JS, HTML]; 28 | -------------------------------------------------------------------------------- /src/app/utils/debug.js: -------------------------------------------------------------------------------- 1 | const getDebugger = () => { 2 | if (process.env.NODE_ENV === 'production') { 3 | // Return a debugger that will log to sentry 4 | return (key: string) => (message: string) => { 5 | if (typeof window.Raven === 'object') { 6 | try { 7 | Raven.captureBreadcrumb({ 8 | message: `${key} - ${message}`, 9 | category: 'logging', 10 | }); 11 | } catch (e) { 12 | console.error(e); 13 | } 14 | } 15 | }; 16 | } 17 | 18 | const debug = require('debug'); // eslint-disable-line global-require 19 | debug.enable('cs:*'); 20 | return debug; 21 | }; 22 | 23 | export default getDebugger(); 24 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/vue/utils/gen-id.js: -------------------------------------------------------------------------------- 1 | // utility for generating a uid for each component file 2 | // used in scoped CSS rewriting 3 | import path from 'path'; 4 | import hash from 'hash-sum'; 5 | 6 | const cache = Object.create(null); 7 | const sepRE = new RegExp(path.sep.replace('\\', '\\\\'), 'g'); 8 | 9 | export default function genId(file, context, key) { 10 | const contextPath = context.split(path.sep); 11 | const rootId = contextPath[contextPath.length - 1]; 12 | 13 | /* eslint-disable */ 14 | file = 15 | rootId + 16 | '/' + 17 | path.relative(context, file).replace(sepRE, '/') + 18 | (key || ''); 19 | return cache[file] || (cache[file] = hash(file)); 20 | } 21 | -------------------------------------------------------------------------------- /src/common/connection-manager.js: -------------------------------------------------------------------------------- 1 | let isOnline = navigator.onLine; 2 | const listeners = {}; 3 | 4 | function updateOnlineStatus(event) { 5 | isOnline = navigator.onLine; 6 | 7 | Object.keys(listeners).forEach(listener => { 8 | listeners[listener](isOnline); 9 | }); 10 | } 11 | 12 | window.addEventListener('online', updateOnlineStatus); 13 | window.addEventListener('offline', updateOnlineStatus); 14 | 15 | let id = 0; 16 | export default function addListener(listener) { 17 | const listenerId = id; 18 | listeners[id++] = listener; 19 | 20 | // Already let listener know what the status is 21 | listener(isOnline); 22 | 23 | return () => { 24 | listeners[listenerId] = null; 25 | }; 26 | } 27 | -------------------------------------------------------------------------------- /src/embed/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import { ThemeProvider } from 'styled-components'; 4 | import 'normalize.css'; 5 | 6 | import theme from '../common/theme'; 7 | import '../common/global.css'; 8 | 9 | import App from './App'; 10 | 11 | function renderApp(Component) { 12 | render( 13 | 14 | 15 | , 16 | document.getElementById('root') 17 | ); 18 | } 19 | 20 | if (module.hot) { 21 | module.hot.accept('./App', () => { 22 | const NextApp = require('./App').default; // eslint-disable-line global-require 23 | renderApp(NextApp); 24 | }); 25 | } 26 | 27 | renderApp(App); 28 | -------------------------------------------------------------------------------- /src/app/components/sandbox/Stats/Stat.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | const CenteredText = styled.div` 5 | display: inline-flex; 6 | width: 33%; 7 | justify-content: center; 8 | align-items: center; 9 | flex-direction: row; 10 | 11 | svg { 12 | opacity: 0.8; 13 | } 14 | `; 15 | 16 | type Props = { 17 | Icon: React.CElement, 18 | count: number, 19 | }; 20 | 21 | export default ({ Icon, count }: Props) => ( 22 | 23 | {Icon} 24 | 30 | {count.toLocaleString()} 31 | 32 | 33 | ); 34 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/vue/template-compiler/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import Transpiler from '../../'; 3 | import { type LoaderContext } from '../../../transpiled-module'; 4 | 5 | class VueTemplateTranspiler extends Transpiler { 6 | constructor() { 7 | super('vue-template-compiler'); 8 | } 9 | 10 | doTranspilation(code: string, loaderContext: LoaderContext) { 11 | return import('./loader').then(loader => { 12 | const transpiledCode = loader.default(code, loaderContext); 13 | 14 | return Promise.resolve({ transpiledCode }); 15 | }); 16 | } 17 | } 18 | 19 | const transpiler = new VueTemplateTranspiler(); 20 | 21 | export { VueTemplateTranspiler }; 22 | 23 | export default transpiler; 24 | -------------------------------------------------------------------------------- /src/app/components/Preference/PreferenceDropdown.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Select from 'app/components/Select'; 4 | 5 | type Props = { 6 | value: boolean, 7 | setValue: boolean => any, 8 | options: Array, 9 | }; 10 | 11 | export default class PreferenceInput extends React.PureComponent { 12 | props: Props; 13 | 14 | handleChange = e => { 15 | const value = e.target.value; 16 | 17 | this.props.setValue(value); 18 | }; 19 | 20 | render() { 21 | const { value, options } = this.props; 22 | return ( 23 | 26 | ); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/src/actions/index.ts: -------------------------------------------------------------------------------- 1 | // All actions of the editor are defined here. The sandbox can send messages 2 | // like `source.files.rename` which the editor will see as an action to rename 3 | // a module. This will allow plugins to alter project content in the future 4 | 5 | import * as notifications from './notifications'; 6 | import * as editor from './editor'; 7 | import * as source from './source'; 8 | import * as error from './error'; 9 | import * as correction from './correction'; 10 | 11 | export interface Action { 12 | type: 'action'; 13 | action: string; 14 | } 15 | 16 | export const actions = { 17 | notifications, 18 | editor, 19 | source, 20 | error, 21 | correction, 22 | }; 23 | -------------------------------------------------------------------------------- /src/app/store/preferences/keys.js: -------------------------------------------------------------------------------- 1 | export const autoCompleteEnabled = 'settings.autocomplete'; 2 | export const vimMode = 'settings.vimmode'; 3 | export const livePreviewEnabled = 'settings.livepreview'; 4 | export const instantPreviewEnabled = 'settings.instantpreview'; 5 | export const prettifyOnSaveEnabled = 'settings.prettifyonsave'; 6 | export const prettierConfig = 'settings.prettierconfig'; 7 | export const lintEnabled = 'settings.lintenabled'; 8 | export const fontSize = 'settings.fontsize'; 9 | export const fontFamily = 'settings.fontfamily'; 10 | export const clearConsoleEnabled = 'settings.clearconsole'; 11 | export const codeMirror = 'settings.codemirror'; 12 | export const autoDownloadTypes = 'settings.autoDownloadTypes'; 13 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/utils/worker-warning-handler.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | export type WarningStructure = { 4 | name: ?string, 5 | message: string, 6 | fileName: ?string, 7 | lineNumber: number, 8 | columnNumber: number, 9 | source: ?string, 10 | }; 11 | 12 | type Params = { 13 | message: string, 14 | columnNumber: number, 15 | lineNumber: number, 16 | fileName: ?string, 17 | name: ?string, 18 | }; 19 | 20 | export function buildWorkerWarning( 21 | { message, columnNumber, lineNumber, fileName, name }: Params, 22 | source: ?string 23 | ): WarningStructure { 24 | return { 25 | message, 26 | columnNumber, 27 | lineNumber, 28 | fileName, 29 | name, 30 | source, 31 | }; 32 | } 33 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "test": { 4 | "presets": [ 5 | "es2015", 6 | "react" 7 | ], 8 | "plugins": [ 9 | "babel-plugin-transform-async-to-generator", 10 | "babel-plugin-transform-object-rest-spread", 11 | "babel-plugin-transform-class-properties", 12 | "babel-plugin-transform-runtime", 13 | "babel-plugin-syntax-dynamic-import", 14 | "babel-plugin-lodash", 15 | [ 16 | "react-loadable/babel", 17 | { 18 | "server": true, 19 | "webpack": true 20 | } 21 | ], 22 | "babel-plugin-lodash", 23 | "babel-plugin-system-import-transformer" 24 | ] 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/src/dispatcher/index.ts: -------------------------------------------------------------------------------- 1 | // import * as debug from 'debug'; 2 | import host from './host'; 3 | 4 | // Whether the tab has a connection with the editor 5 | export const isStandalone = 6 | typeof window === 'undefined' || (!window.opener && window.parent === window); 7 | 8 | /** 9 | * Send a message to the editor, this is most probably an action you generated 10 | * 11 | * @export 12 | * @param {*} message 13 | * @returns 14 | */ 15 | export function dispatch(message: any) { 16 | if (!message) return; 17 | if (isStandalone) return; 18 | 19 | if (window.opener) { 20 | window.opener.postMessage(message, host); 21 | } else { 22 | window.parent.postMessage(message, host); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | docker build -t codesandbox/prod/client --file Dockerfile.prod . && \ 4 | id=$(docker create codesandbox/prod/client) && \ 5 | rm -rf .deliver && \ 6 | mkdir .deliver && \ 7 | mkdir .deliver/www && \ 8 | docker cp $id:/app/www/ ./.deliver/ && \ 9 | docker rm -v $id && \ 10 | echo "Tarring build files" && \ 11 | tar -C .deliver -zcvf .deliver/code_sandbox_client.tar.gz www && \ 12 | echo "Cleaning remote tar" && \ 13 | ssh nginx@ssh.codesandbox.io "rm -f code_sandbox_client.tar.gz" && \ 14 | echo "Moving tar to server" && \ 15 | scp .deliver/code_sandbox_client.tar.gz nginx@ssh.codesandbox.io:./ && \ 16 | echo "Untarring www files" && \ 17 | ssh nginx@ssh.codesandbox.io "tar -xzf ./code_sandbox_client.tar.gz" 18 | 19 | -------------------------------------------------------------------------------- /src/app/components/ConfirmLink.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from 'react'; 3 | import { Link } from 'react-router-dom'; 4 | 5 | type Props = { 6 | enabled: boolean, 7 | message: string, 8 | }; 9 | 10 | export default class ConfirmLink extends React.PureComponent { 11 | confirm = (e: Event) => { 12 | const { enabled, message } = this.props; 13 | 14 | if (enabled) { 15 | const yes = confirm(message); // eslint-disable-line no-alert 16 | 17 | if (!yes) { 18 | e.preventDefault(); 19 | e.stopPropagation(); 20 | } 21 | } 22 | }; 23 | 24 | render() { 25 | const { enabled, message, ...props } = this.props; 26 | return ; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/app/components/Preference/PreferenceText.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Input from 'app/components/Input'; 4 | 5 | type Props = { 6 | value: boolean, 7 | setValue: boolean => any, 8 | placeholder: string, 9 | }; 10 | 11 | export default class PreferenceText extends React.PureComponent { 12 | props: Props; 13 | 14 | handleChange = e => { 15 | const value = e.target.value; 16 | 17 | this.props.setValue(value); 18 | }; 19 | 20 | render() { 21 | const { value, placeholder } = this.props; 22 | return ( 23 | 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/app/containers/Preferences/PaymentInfo/Card.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | const Highlight = styled.strong`color: rgba(255, 255, 255, 0.8);`; 5 | 6 | const Container = styled.div` 7 | background-color: rgba(0, 0, 0, 0.3); 8 | padding: 1rem; 9 | line-height: 1.25; 10 | border-radius: 2px; 11 | `; 12 | 13 | type Props = { 14 | brand: string, 15 | last4: string, 16 | name: string, 17 | }; 18 | 19 | export default ({ brand, last4, name }: Props) => ( 20 | 21 |
22 | {brand} ending in ****{last4} 23 |
24 |
25 | {name} 26 |
27 | 28 | ); 29 | -------------------------------------------------------------------------------- /src/app/pages/Patron/PricingModal/PricingChoice/Range.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Slider from 'rc-slider/lib/Slider'; 3 | import 'rc-slider/assets/index.css'; 4 | 5 | type Props = { 6 | color: string, 7 | }; 8 | 9 | export default (props: Props) => ( 10 | 27 | ); 28 | -------------------------------------------------------------------------------- /src/app/pages/Search/Results.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import { Hits, Pagination } from 'react-instantsearch/dom'; 5 | import Centered from 'app/components/flex/Centered'; 6 | 7 | import ResultInfo from './ResultInfo'; 8 | import SandboxCard from './SandboxCard'; 9 | 10 | const Container = styled.div` 11 | flex: 2; 12 | border-top: 1px solid rgba(255, 255, 255, 0.1); 13 | margin-right: 2rem; 14 | padding-top: 1rem; 15 | 16 | color: rgba(255, 255, 255, 0.6); 17 | `; 18 | 19 | export default () => ( 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | ); 28 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/binary/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import Transpiler from '../'; 3 | import { type LoaderContext } from '../../transpiled-module'; 4 | 5 | /** 6 | * Just fetches a file from the interwebs and converts it to a blob 7 | * 8 | * @class BinaryTranspiler 9 | * @extends {Transpiler} 10 | */ 11 | class BinaryTranspiler extends Transpiler { 12 | constructor() { 13 | super('binary-loader'); 14 | } 15 | 16 | doTranspilation(code: string, loaderContext: LoaderContext) { 17 | return fetch(code) 18 | .then(res => res.blob()) 19 | .then(blob => ({ transpiledCode: blob })); 20 | } 21 | } 22 | 23 | const transpiler = new BinaryTranspiler(); 24 | 25 | export { BinaryTranspiler }; 26 | 27 | export default transpiler; 28 | -------------------------------------------------------------------------------- /src/app/pages/Sandbox/Editor/Workspace/Advertisement/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default class Advertisement extends React.PureComponent { 4 | componentDidMount() { 5 | requestAnimationFrame(() => { 6 | const script = document.createElement('script'); 7 | script.setAttribute( 8 | 'src', 9 | 'https://app.codesponsor.io/scripts/o81cdkzTVQe3UbTW0J2EQw?theme=dark&height=120&image=hide' 10 | ); 11 | script.async = true; 12 | document.head.appendChild(script); 13 | }); 14 | } 15 | 16 | render() { 17 | return ( 18 |
19 |
20 |
21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/app/pages/Profile/Header/UserInfo/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from 'react'; 3 | import type { User } from 'common/types'; 4 | 5 | import Row from 'app/components/flex/Row'; 6 | 7 | import ProfileInfo from './ProfileInfo'; 8 | import Stats from './Stats'; 9 | 10 | type Props = { 11 | user: User, 12 | }; 13 | 14 | export default ({ user }: Props) => ( 15 | 16 | 22 | 28 | 29 | ); 30 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/directories/selectors.js: -------------------------------------------------------------------------------- 1 | import { createSelector } from 'reselect'; 2 | import { values } from 'lodash'; 3 | 4 | export const directoriesSelector = state => state.entities.directories; 5 | 6 | export const directoriesFromSandboxSelector = createSelector( 7 | directoriesSelector, 8 | (_, props) => props.sandbox.directories, 9 | (directories, ids) => ids.map(id => directories[id]) 10 | ); 11 | 12 | export const singleDirectorySelector = createSelector( 13 | directoriesSelector, 14 | (_, { sourceId, shortid, id }) => ({ id, sourceId, shortid }), 15 | (directories, { sourceId, id, shortid }) => 16 | values(directories).find( 17 | d => d.id === id || (d.sourceId === sourceId && d.shortid === shortid) 18 | ) 19 | ); 20 | -------------------------------------------------------------------------------- /src/sandbox/errors/__snapshots__/dependency-not-found-error.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`it handles normal deps correctly 1`] = ` 4 | Object { 5 | "dependency": "redux-form", 6 | "path": "redux-form", 7 | } 8 | `; 9 | 10 | exports[`it parses dependency names with multiple slashes correctly 1`] = ` 11 | Object { 12 | "dependency": "redux-form", 13 | "path": "redux-form/immutable/koekjes", 14 | } 15 | `; 16 | 17 | exports[`it parses dependency names with slashes correctly 1`] = ` 18 | Object { 19 | "dependency": "redux-form", 20 | "path": "redux-form/immutable", 21 | } 22 | `; 23 | 24 | exports[`it parses scoped packages 1`] = ` 25 | Object { 26 | "dependency": "@vx/group", 27 | "path": "@vx/group", 28 | } 29 | `; 30 | -------------------------------------------------------------------------------- /src/sandbox/errors/sandbox-error.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import type { Module } from 'common/types'; 3 | 4 | type Suggestion = { 5 | title: string, 6 | action: Function, 7 | }; 8 | 9 | export default class SandboxError extends Error { 10 | severity: 'error' | 'warning'; 11 | type: string; 12 | module: Module; 13 | payload: ?Object; 14 | suggestions: Array; 15 | 16 | suggestions = []; 17 | 18 | constructor(error: ?Error) { 19 | super(error ? error.message : null); 20 | 21 | if (error) { 22 | this.fileName = error.fileName; 23 | this.description = error.description; 24 | this.message = error.message; 25 | this.name = error.name; 26 | this.stack = error.stack; 27 | this.number = error.number; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["airbnb", "prettier", "prettier/react", "prettier/flowtype"], 3 | "parser": "babel-eslint", 4 | "env": { 5 | "browser": true, 6 | "node": true, 7 | "jest": true, 8 | "es6": true 9 | }, 10 | "globals": { 11 | "Raven": true, 12 | "VERSION": true 13 | }, 14 | "rules": { 15 | "react/jsx-filename-extension": 0, 16 | "react/sort-comp": 0, 17 | "import/no-extraneous-dependencies": 0, 18 | "arrow-parens": 0, 19 | "import/prefer-default-export": 0, 20 | "class-methods-use-this": 0, 21 | "no-console": ["error", { "allow": ["error"] } ] 22 | }, 23 | "settings": { 24 | "import/resolver": { 25 | "webpack": { 26 | "config": "config/webpack.common.js" 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/app/components/sandbox/CodeEditor/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Loadable from 'react-loadable'; 3 | import Loading from 'app/components/Loading'; 4 | import { Preferences } from 'common/types'; 5 | 6 | import Monaco from './Monaco'; 7 | 8 | type Props = { 9 | preferences: Preferences, 10 | }; 11 | 12 | const CodeMirror = Loadable({ 13 | loader: () => import('./CodeMirror'), 14 | LoadingComponent: Loading, 15 | }); 16 | 17 | export default (props: Props) => { 18 | // We are phasing towards Monaco, the only thing missing is vim mode. So use 19 | // CodeMirror until we have proper support 20 | if (props.preferences.vimMode || props.preferences.codeMirror) { 21 | return ; 22 | } 23 | 24 | return ; 25 | }; 26 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/vue/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import Transpiler from '../'; 3 | import { type LoaderContext } from '../../transpiled-module'; 4 | 5 | // This is the most advanced compiler, I wanted to get it working in sync first, 6 | // but will eventually move to async. 7 | 8 | class VueTranspiler extends Transpiler { 9 | constructor() { 10 | super('vue-loader'); 11 | } 12 | doTranspilation(code: string, loaderContext: LoaderContext) { 13 | return import('./loader').then(loader => { 14 | const transpiledCode = loader.default(code, loaderContext); 15 | 16 | return Promise.resolve({ transpiledCode }); 17 | }); 18 | } 19 | } 20 | 21 | const transpiler = new VueTranspiler(); 22 | 23 | export { VueTranspiler }; 24 | 25 | export default transpiler; 26 | -------------------------------------------------------------------------------- /config/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge'); 2 | const webpack = require('webpack'); 3 | const commonConfig = require('./webpack.common'); 4 | 5 | const devEntries = [ 6 | 'react-hot-loader/patch', 7 | 'webpack-dev-server/client?/', 8 | 'webpack/hot/only-dev-server', 9 | ]; 10 | 11 | module.exports = merge( 12 | // these go first, because "react-hot-loader/patch" has to be the first entry 13 | { 14 | entry: { 15 | app: devEntries, 16 | embed: devEntries, 17 | }, 18 | }, 19 | commonConfig, 20 | { 21 | devtool: 'eval', 22 | output: { 23 | filename: 'static/js/[name].js', 24 | }, 25 | plugins: [ 26 | new webpack.HotModuleReplacementPlugin(), 27 | new webpack.NoEmitOnErrorsPlugin(), 28 | ], 29 | } 30 | ); 31 | -------------------------------------------------------------------------------- /src/app/components/Stat/format-number.test.js: -------------------------------------------------------------------------------- 1 | import formatNumber from './format-number'; 2 | 3 | describe('formatNumber', () => { 4 | it('handles all numbers under 1000', () => { 5 | expect(formatNumber(42)).toMatchSnapshot(); 6 | expect(formatNumber(142)).toMatchSnapshot(); 7 | expect(formatNumber(999)).toMatchSnapshot(); 8 | expect(formatNumber(1)).toMatchSnapshot(); 9 | expect(formatNumber(0)).toMatchSnapshot(); 10 | }); 11 | 12 | it('handles all numbers over 1000', () => { 13 | expect(formatNumber(1042)).toMatchSnapshot(); 14 | expect(formatNumber(1142)).toMatchSnapshot(); 15 | expect(formatNumber(1000)).toMatchSnapshot(); 16 | expect(formatNumber(2099)).toMatchSnapshot(); 17 | expect(formatNumber(20299)).toMatchSnapshot(); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /src/app/components/buttons/__snapshots__/LinkButton.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`LinkButton renders 1`] = ` 4 | .c0 { 5 | display: inline-block; 6 | background-color: transparent; 7 | color: #6CAEDD; 8 | border: none; 9 | outline: none; 10 | cursor: pointer; 11 | text-decoration: underline; 12 | } 13 | 14 | 19 | `; 20 | 21 | exports[`LinkButton renders onClick 1`] = ` 22 | .c0 { 23 | display: inline-block; 24 | background-color: transparent; 25 | color: #6CAEDD; 26 | border: none; 27 | outline: none; 28 | cursor: pointer; 29 | text-decoration: underline; 30 | } 31 | 32 | 38 | `; 39 | -------------------------------------------------------------------------------- /src/app/hoc/__snapshots__/show-alternative-component.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`hoc show-alternative-component only renders app if all prop exists and is falsy 1`] = ` 4 |
5 | Loading 6 |
7 | `; 8 | 9 | exports[`hoc show-alternative-component only renders app if all prop exists and is falsy 2`] = ` 10 |
11 | App 12 |
13 | `; 14 | 15 | exports[`hoc show-alternative-component renders app if prop exists 1`] = ` 16 |
17 | App 18 |
19 | `; 20 | 21 | exports[`hoc show-alternative-component renders app if prop exists and is falsy 1`] = ` 22 |
23 | App 24 |
25 | `; 26 | 27 | exports[`hoc show-alternative-component renders loading component if prop doesn't exist 1`] = ` 28 |
29 | Loading 30 |
31 | `; 32 | -------------------------------------------------------------------------------- /src/app/store/notifications/actions.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import type { NotificationButton } from './reducer'; 3 | 4 | export const ADD_NOTIFICATION = 'ADD_NOTIFICATION'; 5 | export const REMOVE_NOTIFICATION = 'REMOVE_NOTIFICATION'; 6 | 7 | let lastId = 0; 8 | 9 | export default { 10 | addNotification: ( 11 | title: string, 12 | notificationType: 'notice' | 'warning' | 'error' | 'success' = 'notice', 13 | timeAlive: number = 2, 14 | buttons: Array = [] 15 | ) => { 16 | lastId += 1; 17 | return { 18 | id: lastId, 19 | type: ADD_NOTIFICATION, 20 | title, 21 | notificationType, 22 | buttons, 23 | endTime: Date.now() + timeAlive * 1000, 24 | }; 25 | }, 26 | removeNotification: (id: number) => ({ type: REMOVE_NOTIFICATION, id }), 27 | }; 28 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/src/typings/codesandbox.d.ts: -------------------------------------------------------------------------------- 1 | export interface Module { 2 | id: string; 3 | title: string; 4 | code: string; 5 | shortid: string; 6 | directoryShortid: string | undefined; 7 | isNotSynced: boolean; 8 | sourceId: string; 9 | } 10 | 11 | export interface TranspiledModule { 12 | initiators: Set; 13 | dependencies: Set; 14 | transpilationDependencies: Set; 15 | transpilationInitiators: Set; 16 | childModules: Array; 17 | 18 | source: { 19 | compiledCode: string; 20 | }; 21 | module: Module; 22 | } 23 | 24 | export interface Directory { 25 | id: string; 26 | title: string; 27 | directoryShortid: string | undefined; 28 | shortid: string; 29 | sourceId: string; 30 | } 31 | -------------------------------------------------------------------------------- /src/sandbox/eval/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import { react, vue, svelte, preact } from 'common/templates'; 3 | 4 | import reactPreset from './presets/create-react-app'; 5 | import reactTsPreset from './presets/create-react-app-typescript'; 6 | import vuePreset from './presets/vue-cli'; 7 | import preactPreset from './presets/preact-cli'; 8 | import sveltePreset from './presets/svelte'; 9 | 10 | export default function getPreset(template: string) { 11 | switch (template) { 12 | case react.name: 13 | return reactPreset; 14 | case reactTsPreset.name: 15 | return reactTsPreset; 16 | case vue.name: 17 | return vuePreset; 18 | case preact.name: 19 | return preactPreset; 20 | case svelte.name: 21 | return sveltePreset; 22 | default: 23 | return reactPreset; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/sandbox/react-error-overlay/utils/isInternalFile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | /* @flow */ 11 | function isInternalFile(sourceFileName: ?string, fileName: ?string) { 12 | return ( 13 | sourceFileName == null || 14 | sourceFileName === '' || 15 | sourceFileName.indexOf('/~/') !== -1 || 16 | sourceFileName.indexOf('/node_modules/') !== -1 || 17 | sourceFileName.trim().indexOf(' ') !== -1 || 18 | fileName == null || 19 | fileName === '' 20 | ); 21 | } 22 | 23 | export { isInternalFile }; 24 | -------------------------------------------------------------------------------- /src/app/components/ZeitLogo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import IconBase from 'react-icons/IconBase'; 3 | 4 | export default ({ className }: { className: string }) => ( 5 | 6 | 7 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ); 25 | -------------------------------------------------------------------------------- /src/sandbox/eval/errors/module-warning.js: -------------------------------------------------------------------------------- 1 | import TranspiledModule from '../transpiled-module'; 2 | 3 | export default class ModuleWarning extends Error { 4 | constructor(module, warning) { 5 | super(); 6 | 7 | this.name = 'ModuleWarning'; 8 | this.module = module; 9 | this.message = warning.message; 10 | this.warning = warning.message; 11 | this.lineNumber = warning.lineNumber; 12 | this.columnNumber = warning.columnNumber; 13 | this.severity = warning.severity; 14 | this.source = warning.source; 15 | 16 | Error.captureStackTrace(this, this.constructor); 17 | } 18 | 19 | module: TranspiledModule; 20 | message: string; 21 | warning: string; 22 | message: string; 23 | severity: 'notice' | 'warning'; 24 | source: ?string; 25 | lineNumber: ?number; 26 | columnNumber: ?number; 27 | } 28 | -------------------------------------------------------------------------------- /src/app/store/modal/reducer.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import type { Modal } from 'common/types'; 3 | import { OPEN_MODAL, CLOSE_MODAL } from './actions'; 4 | 5 | const initialState: Modal = { 6 | open: false, 7 | title: null, 8 | Body: null, 9 | width: null, 10 | }; 11 | 12 | export default function( 13 | state: Modal = initialState, 14 | action: { type: string, [key: string]: any } 15 | ) { 16 | switch (action.type) { 17 | case OPEN_MODAL: 18 | return { 19 | open: true, 20 | title: action.title, 21 | Body: action.Body, 22 | width: action.width, 23 | }; 24 | case CLOSE_MODAL: 25 | return { 26 | ...state, 27 | title: null, 28 | Body: null, 29 | width: null, 30 | open: false, 31 | }; 32 | default: 33 | return state; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/app/components/Portal.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | 5 | type Props = { 6 | children: React.Element, 7 | }; 8 | 9 | export default class Portal extends React.Component { 10 | popup: Element; 11 | 12 | componentDidMount() { 13 | this.popup = document.createElement('div'); 14 | document.body.appendChild(this.popup); 15 | this.renderLayer(); 16 | } 17 | 18 | componentDidUpdate() { 19 | this.renderLayer(); 20 | } 21 | 22 | componentWillUnmount() { 23 | ReactDOM.unmountComponentAtNode(this.popup); 24 | document.body.removeChild(this.popup); 25 | } 26 | 27 | renderLayer() { 28 | ReactDOM.render(this.props.children, this.popup); 29 | } 30 | 31 | render() { 32 | // Render a placeholder 33 | return null; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/app/components/logos/Vue.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default ({ 4 | width = 35, 5 | height = 35, 6 | className, 7 | }: { 8 | width: number, 9 | height: number, 10 | className: ?string, 11 | }) => ( 12 | 18 | 19 | 23 | 27 | 31 | 32 | 33 | ); 34 | -------------------------------------------------------------------------------- /src/app/store/root-reducer.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | 3 | import { routerReducer } from 'react-router-redux'; 4 | 5 | import entityReducer from './entities/reducer'; 6 | import contextMenuReducer from './context-menu/reducer'; 7 | import modalReducer from './modal/reducer'; 8 | import notificationsReducer from './notifications/reducer'; 9 | import preferencesReducer from './preferences/reducer'; 10 | import userReducer from './user/reducer'; 11 | import connectionStatusReducer from './connection/reducer'; 12 | 13 | export default combineReducers({ 14 | entities: entityReducer, 15 | contextMenu: contextMenuReducer, 16 | connectionStatus: connectionStatusReducer, 17 | modal: modalReducer, 18 | notifications: notificationsReducer, 19 | preferences: preferencesReducer, 20 | router: routerReducer, 21 | user: userReducer, 22 | }); 23 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/stylus/stylus-worker.js: -------------------------------------------------------------------------------- 1 | import { buildWorkerError } from '../utils/worker-error-handler'; 2 | 3 | self.importScripts(['/static/js/stylus.min.js']); 4 | 5 | self.postMessage('ready'); 6 | 7 | declare var stylus: { 8 | render: ( 9 | code: string, 10 | { filename: string }, 11 | (err, css: string) => void 12 | ) => void, 13 | }; 14 | 15 | self.addEventListener('message', event => { 16 | const { code, path } = event.data; 17 | 18 | // register a custom importer callback 19 | stylus.render(code, { filename: path }, (err, css) => { 20 | if (err) { 21 | return self.postMessage({ 22 | type: 'error', 23 | error: buildWorkerError(err), 24 | }); 25 | } 26 | 27 | return self.postMessage({ 28 | type: 'compiled', 29 | transpiledCode: css, 30 | }); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /flow-typed/npm/react-dnd-html5-backend_v2.1.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 69840cdb1b6ba8fec51c8a1080ce2397 2 | // flow-typed version: 08ca61021e/react-dnd-html5-backend_v2.1.x/flow_>=v0.23.x 3 | 4 | 5 | declare type $npm$reactDnd$NativeTypes$FILE = '__NATIVE_FILE__'; 6 | declare type $npm$reactDnd$NativeTypes$URL = '__NATIVE_URL__'; 7 | declare type $npm$reactDnd$NativeTypes$TEXT = '__NATIVE_TEXT__'; 8 | declare type $npm$reactDnd$NativeTypes = 9 | $npm$reactDnd$NativeTypes$FILE 10 | | $npm$reactDnd$NativeTypes$URL 11 | | $npm$reactDnd$NativeTypes$TEXT 12 | 13 | declare module 'react-dnd-html5-backend' { 14 | declare var exports: { 15 | getEmptyImage(): Image, 16 | NativeTypes: { 17 | FILE: $npm$reactDnd$NativeTypes$FILE, 18 | URL: $npm$reactDnd$NativeTypes$URL, 19 | TEXT: $npm$reactDnd$NativeTypes$TEXT, 20 | } 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /src/sandbox/errors/dependency-not-found-error.test.js: -------------------------------------------------------------------------------- 1 | import DependencyError from './dependency-not-found-error'; 2 | 3 | test('it handles normal deps correctly', () => { 4 | const error = new DependencyError('redux-form'); 5 | 6 | expect(error.payload).toMatchSnapshot(); 7 | }); 8 | 9 | test('it parses dependency names with slashes correctly', () => { 10 | const error = new DependencyError('redux-form/immutable'); 11 | 12 | expect(error.payload).toMatchSnapshot(); 13 | }); 14 | 15 | test('it parses dependency names with multiple slashes correctly', () => { 16 | const error = new DependencyError('redux-form/immutable/koekjes'); 17 | 18 | expect(error.payload).toMatchSnapshot(); 19 | }); 20 | 21 | test('it parses scoped packages', () => { 22 | const error = new DependencyError('@vx/group'); 23 | 24 | expect(error.payload).toMatchSnapshot(); 25 | }); 26 | -------------------------------------------------------------------------------- /src/sandbox/react-error-overlay/utils/dom/enableTabClick.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | /* @flow */ 11 | function enableTabClick(node: Element) { 12 | node.setAttribute('tabindex', '0'); 13 | node.addEventListener('keydown', function(e: KeyboardEvent) { 14 | const { key, which, keyCode } = e; 15 | if (key === 'Enter' || which === 13 || keyCode === 13) { 16 | e.preventDefault(); 17 | if (typeof e.target.click === 'function') { 18 | e.target.click(); 19 | } 20 | } 21 | }); 22 | } 23 | 24 | export { enableTabClick }; 25 | -------------------------------------------------------------------------------- /src/app/components/Stat/__snapshots__/format-number.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`formatNumber handles all numbers over 1000 1`] = `"1.0k"`; 4 | 5 | exports[`formatNumber handles all numbers over 1000 2`] = `"1.1k"`; 6 | 7 | exports[`formatNumber handles all numbers over 1000 3`] = `"1.0k"`; 8 | 9 | exports[`formatNumber handles all numbers over 1000 4`] = `"2.1k"`; 10 | 11 | exports[`formatNumber handles all numbers over 1000 5`] = `"20.3k"`; 12 | 13 | exports[`formatNumber handles all numbers under 1000 1`] = `"42"`; 14 | 15 | exports[`formatNumber handles all numbers under 1000 2`] = `"142"`; 16 | 17 | exports[`formatNumber handles all numbers under 1000 3`] = `"999"`; 18 | 19 | exports[`formatNumber handles all numbers under 1000 4`] = `"1"`; 20 | 21 | exports[`formatNumber handles all numbers under 1000 5`] = `"0"`; 22 | -------------------------------------------------------------------------------- /src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import { connect } from 'react-redux'; 4 | 5 | const Container = styled.div` 6 | color: ${props => props.theme.red}; 7 | background-color: ${props => props.theme.redBackground}; 8 | padding: 1rem; 9 | font-size: 0.75rem; 10 | `; 11 | 12 | const mapStateToProps = state => ({ 13 | connected: state.connectionStatus.connected, 14 | }); 15 | const ConnectionNotice = ({ connected }: { connected: boolean }) => 16 | !connected && ( 17 | 18 | You{"'"}re not connected to the internet. You can still edit, but you 19 | cannot save. We recommend using the {"'"}Download{"'"} function to keep 20 | your changes. 21 | 22 | ); 23 | 24 | export default connect(mapStateToProps)(ConnectionNotice); 25 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/directories/reducer.test.js: -------------------------------------------------------------------------------- 1 | import { createDirectory } from 'common/test/mocks'; 2 | import reducer from './reducer'; 3 | import actions from './actions'; 4 | 5 | describe('directoriesReducer', () => { 6 | it('can move a directory', () => { 7 | const directory = createDirectory(); 8 | const state = { [directory.id]: directory }; 9 | 10 | const newState = reducer( 11 | state, 12 | actions.moveDirectory(directory.id, '218hj') 13 | ); 14 | 15 | expect(newState).toMatchSnapshot(); 16 | }); 17 | 18 | it('can rename a directory', () => { 19 | const directory = createDirectory(); 20 | const state = { [directory.id]: directory }; 21 | 22 | const newState = reducer( 23 | state, 24 | actions.renameDirectory(directory.id, 'ttest2') 25 | ); 26 | 27 | expect(newState).toMatchSnapshot(); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/utils/worker-error-handler.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | type WorkerError = { 4 | name: string, 5 | message: string, 6 | fileName: ?string, 7 | lineNumber: ?number, 8 | columnNumber: ?number, 9 | }; 10 | 11 | export function buildWorkerError(error: Error): WorkerError { 12 | return { 13 | name: error.name, 14 | message: error.message, 15 | fileName: error.fileName, 16 | lineNumber: error.lineNumber, 17 | columnNumber: error.columnNumber, 18 | }; 19 | } 20 | 21 | export function parseWorkerError(error: WorkerError): Error { 22 | const reconstructedError = new Error(error.message); 23 | reconstructedError.name = error.name; 24 | reconstructedError.columnNumber = error.columnNumber; 25 | reconstructedError.fileName = error.columnNumber; 26 | reconstructedError.lineNumber = error.lineNumber; 27 | 28 | return reconstructedError; 29 | } 30 | -------------------------------------------------------------------------------- /src/common/sandbox/get-module-path.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import type { Module, Directory } from 'common/types'; 3 | 4 | function findById(entities: Array, id: string) { 5 | return entities.find(e => e.id === id); 6 | } 7 | 8 | function findByShortid(entities: Array, shortid: ?string) { 9 | return entities.find(e => e.shortid === shortid); 10 | } 11 | 12 | export default ( 13 | modules: Array, 14 | directories: Array, 15 | id: string 16 | ) => { 17 | const module = findById(modules, id); 18 | 19 | if (!module) return ''; 20 | 21 | let directory = findByShortid(directories, module.directoryShortid); 22 | let path = '/'; 23 | while (directory != null) { 24 | path = `/${directory.title}${path}`; 25 | directory = findByShortid(directories, directory.directoryShortid); 26 | } 27 | return `${path}${module.title}`; 28 | }; 29 | -------------------------------------------------------------------------------- /src/app/utils/badges/patron-info.js: -------------------------------------------------------------------------------- 1 | import Patron1 from './svg/patron-1.svg'; 2 | import Patron2 from './svg/patron-2.svg'; 3 | import Patron3 from './svg/patron-3.svg'; 4 | import Patron4 from './svg/patron-4.svg'; 5 | 6 | const info = { 7 | 'patron-1': { 8 | Badge: Patron1, 9 | particleCount: 10, 10 | colors: ['#1BB978'], 11 | }, 12 | 'patron-2': { 13 | Badge: Patron2, 14 | particleCount: 20, 15 | colors: ['#B53D3D', '#1BB978'], 16 | }, 17 | 'patron-3': { 18 | Badge: Patron3, 19 | particleCount: 35, 20 | colors: ['#609AC3', '#1BB978', '#B53D3D'], 21 | }, 22 | 'patron-4': { 23 | Badge: Patron4, 24 | particleCount: 100, 25 | colors: ['#D0AF72', '#1BB978', '#B53D3D', '#609AC3'], 26 | }, 27 | }; 28 | 29 | // Preload the images 30 | Object.keys(info).forEach(badge => { 31 | new Image().src = info[badge].Badge; 32 | }); 33 | 34 | export default info; 35 | -------------------------------------------------------------------------------- /src/app/pages/Patron/PricingModal/PricingChoice/ThankYou.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import Margin from 'app/components/spacing/Margin'; 5 | import delay from 'app/utils/animation/delay-effect'; 6 | 7 | const Title = styled.div` 8 | ${delay(0)} transition: 0.3s ease all; 9 | text-align: center; 10 | font-size: 2rem; 11 | font-weight: 300; 12 | color: ${props => props.color}; 13 | `; 14 | 15 | const SubTitle = styled.div` 16 | ${delay(0.1)} font-size: 1.25rem; 17 | font-weight: 300; 18 | margin: 1rem; 19 | margin-bottom: 0rem; 20 | text-align: center; 21 | `; 22 | 23 | export default ({ color, price }: { color: string, price: number }) => ( 24 | 25 | Awesome! 26 | 27 | Thank you so much for your support of ${price}! 28 | 29 | 30 | ); 31 | -------------------------------------------------------------------------------- /src/app/pages/Sandbox/Editor/Content/Skeleton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import Fullscreen from 'app/components/flex/Fullscreen'; 5 | import Title from 'app/components/text/Title'; 6 | import SubTitle from 'app/components/text/SubTitle'; 7 | import Centered from 'app/components/flex/Centered'; 8 | 9 | const Header = styled.div` 10 | position: absolute; 11 | top: 0; 12 | height: 3rem; 13 | left: 0; 14 | right: 0; 15 | background-color: ${props => props.theme.background2}; 16 | z-index: 40; 17 | border-bottom: 1px solid ${props => props.theme.background2.darken(0.3)}; 18 | `; 19 | 20 | export default () => ( 21 | 22 |
23 | 24 | Loading Sandbox... 25 | Fetching git repository... 26 | 27 | 28 | ); 29 | -------------------------------------------------------------------------------- /src/sandbox/eval/presets/svelte/index.js: -------------------------------------------------------------------------------- 1 | import babelTranspiler from '../../transpilers/babel'; 2 | import jsonTranspiler from '../../transpilers/json'; 3 | import rawTranspiler from '../../transpilers/raw'; 4 | import svelteTranspiler from '../../transpilers/svelte'; 5 | 6 | import Preset from '../'; 7 | 8 | const sveltePreset = new Preset('svelte', ['js', 'jsx'], {}); 9 | 10 | sveltePreset.registerTranspiler(module => /\.jsx?$/.test(module.title), [ 11 | { transpiler: babelTranspiler }, 12 | ]); 13 | 14 | sveltePreset.registerTranspiler(module => /\.html$/.test(module.title), [ 15 | { transpiler: svelteTranspiler }, 16 | { transpiler: babelTranspiler }, 17 | ]); 18 | 19 | sveltePreset.registerTranspiler(module => /\.json/.test(module.title), [ 20 | { transpiler: jsonTranspiler }, 21 | ]); 22 | 23 | sveltePreset.registerTranspiler(() => true, [{ transpiler: rawTranspiler }]); 24 | 25 | export default sveltePreset; 26 | -------------------------------------------------------------------------------- /src/app/components/sandbox/Tags/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | import * as React from 'react'; 3 | import styled from 'styled-components'; 4 | 5 | import Margin from 'app/components/spacing/Margin'; 6 | 7 | import Tag from './Tag'; 8 | 9 | const TagContainer = styled.div` 10 | margin: 0.75em; 11 | display: flex; 12 | flex-direction: row; 13 | flex-wrap: wrap; 14 | ${props => props.align === 'right' && `justify-content: flex-end;`}; 15 | `; 16 | 17 | type Props = { 18 | align: 'right' | 'left', 19 | tags: Array, 20 | removeTag: ?(id: string, tag: string) => void, 21 | }; 22 | 23 | export default ({ tags, removeTag, align, ...props }: Props) => ( 24 | 25 | {tags.sort().map(tag => ( 26 | 27 | 28 | 29 | ))} 30 | 31 | ); 32 | -------------------------------------------------------------------------------- /src/sandbox/eval/presets/create-react-app/index.js: -------------------------------------------------------------------------------- 1 | import Preset from '../'; 2 | 3 | import stylesTranspiler from '../../transpilers/css'; 4 | import babelTranspiler from '../../transpilers/babel'; 5 | import jsonTranspiler from '../../transpilers/json'; 6 | import rawTranspiler from '../../transpilers/raw'; 7 | 8 | const preset = new Preset('create-react-app', [ 9 | 'web.js', 10 | 'js', 11 | 'json', 12 | 'web.jsx', 13 | 'jsx', 14 | ]); 15 | 16 | preset.registerTranspiler(module => /\.css$/.test(module.title), [ 17 | { transpiler: stylesTranspiler }, 18 | ]); 19 | 20 | preset.registerTranspiler(module => /\.jsx?$/.test(module.title), [ 21 | { transpiler: babelTranspiler }, 22 | ]); 23 | 24 | preset.registerTranspiler(module => /\.json$/.test(module.title), [ 25 | { transpiler: jsonTranspiler }, 26 | ]); 27 | 28 | preset.registerTranspiler(() => true, [{ transpiler: rawTranspiler }]); 29 | 30 | export default preset; 31 | -------------------------------------------------------------------------------- /src/app/containers/SignInButton.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from 'react'; 3 | import { bindActionCreators } from 'redux'; 4 | import { connect } from 'react-redux'; 5 | 6 | import GithubIcon from 'react-icons/lib/go/mark-github'; 7 | 8 | import userActionCreators from 'app/store/user/actions'; 9 | import Button from 'app/components/buttons/Button'; 10 | import Row from 'app/components/flex/Row'; 11 | 12 | type Props = { 13 | userActions: typeof userActionCreators, 14 | }; 15 | 16 | const mapDispatchToProps = dispatch => ({ 17 | userActions: bindActionCreators(userActionCreators, dispatch), 18 | }); 19 | const SignInButton = ({ userActions, ...props }: Props) => ( 20 | 25 | ); 26 | 27 | export default connect(null, mapDispatchToProps)(SignInButton); 28 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/modules/entity.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import { schema } from 'normalizr'; 3 | 4 | const getDefaultCode = module => { 5 | if (module.title.endsWith('.vue')) { 6 | return ` 9 | 10 | 15 | 16 | 19 | `; 20 | } 21 | 22 | return ''; 23 | }; 24 | 25 | export default new schema.Entity( 26 | 'modules', 27 | {}, 28 | { 29 | processStrategy: module => { 30 | const defaultCode = getDefaultCode(module); 31 | const shouldUpdate = module.code == null; 32 | const code = shouldUpdate ? defaultCode : module.code; 33 | 34 | const isNotSynced = shouldUpdate && defaultCode !== module.code; 35 | return { 36 | ...module, 37 | errors: [], 38 | corrections: [], 39 | code, 40 | isNotSynced, 41 | }; 42 | }, 43 | } 44 | ); 45 | -------------------------------------------------------------------------------- /src/app/store/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import { createStore, applyMiddleware, compose } from 'redux'; 3 | import { routerMiddleware } from 'react-router-redux'; 4 | 5 | import thunk from './services/middleware/thunk-middleware'; 6 | import rootReducer from './root-reducer'; 7 | 8 | function getComposeEnhancers() { 9 | if ( 10 | process.env.NODE_ENV !== 'production' && 11 | window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ // eslint-disable-line 12 | ) { 13 | return window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__; // eslint-disable-line 14 | } 15 | return compose; 16 | } 17 | 18 | export default history => { 19 | const composeEnhancers = getComposeEnhancers(); 20 | const store = createStore( 21 | rootReducer, 22 | composeEnhancers(applyMiddleware(thunk, routerMiddleware(history))) 23 | ); 24 | 25 | if (process.env.NODE_ENV === 'development') { 26 | window.store = store; 27 | } 28 | 29 | return store; 30 | }; 31 | -------------------------------------------------------------------------------- /src/app/components/Preference/PreferenceNumber.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import Input from 'app/components/Input'; 5 | 6 | const StyledInput = styled(Input)`text-align: center;`; 7 | 8 | type Props = { 9 | value: boolean, 10 | setValue: boolean => any, 11 | style: Object, 12 | step: number, 13 | }; 14 | 15 | export default class PreferenceInput extends React.PureComponent { 16 | props: Props; 17 | 18 | handleChange = e => { 19 | const value = e.target.value; 20 | 21 | if (!Number.isNaN(+value)) { 22 | this.props.setValue(+value); 23 | } 24 | }; 25 | 26 | render() { 27 | const { value, style, step } = this.props; 28 | return ( 29 | 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/app/components/Stat/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import formatNumber from './format-number'; 5 | 6 | const Stat = styled.div` 7 | display: inline-flex; 8 | flex-direction: column; 9 | align-items: center; 10 | padding: 0; 11 | margin: 1em 0; 12 | flex: 1; 13 | border-right: 1px solid rgba(255, 255, 255, 0.15); 14 | 15 | &:last-child { 16 | border-right: none; 17 | } 18 | `; 19 | 20 | const Number = styled.div` 21 | font-weight: 400; 22 | font-size: 1.125em; 23 | `; 24 | 25 | const Property = styled.div` 26 | font-weight: 400; 27 | font-size: 0.875em; 28 | color: rgba(255, 255, 255, 0.5); 29 | text-transform: uppercase; 30 | margin-bottom: 0.4rem; 31 | `; 32 | 33 | export default ({ count, name }: { count: number, name: string }) => ( 34 | 35 | {name} 36 | {formatNumber(count)} 37 | 38 | ); 39 | -------------------------------------------------------------------------------- /src/embed/components/EditorLink.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled, { css } from 'styled-components'; 3 | import Logo from 'app/components/Logo'; 4 | 5 | import { sandboxUrl } from 'app/utils/url-generator'; 6 | 7 | type Props = { 8 | sandbox: string, 9 | small: boolean, 10 | }; 11 | 12 | const Text = styled.span` 13 | color: white; 14 | ${({ small }) => small && css`@media (max-width: 620px) {display: none;}`}; 15 | `; 16 | 17 | const EditText = styled.a` 18 | text-decoration: none; 19 | display: flex; 20 | align-items: center; 21 | color: white; 22 | 23 | svg { 24 | margin-left: 0.5rem; 25 | } 26 | `; 27 | 28 | export default ({ sandbox, small }: Props) => ( 29 | 35 | Edit on CodeSandbox 36 | 37 | 38 | ); 39 | -------------------------------------------------------------------------------- /flow-typed/npm/opn_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 125bf1a1749b111ec4fe6346e8667385 2 | // flow-typed version: <>/opn_v4.0.2/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'opn' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'opn' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'opn/index' { 29 | declare module.exports: $Exports<'opn'>; 30 | } 31 | declare module 'opn/index.js' { 32 | declare module.exports: $Exports<'opn'>; 33 | } 34 | -------------------------------------------------------------------------------- /src/app/components/sandbox/Stats/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import EyeIcon from 'react-icons/lib/fa/eye'; 5 | import ForkIcon from 'react-icons/lib/go/repo-forked'; 6 | 7 | import Stat from './Stat'; 8 | import LikeHeart from '../../../containers/LikeHeart/index'; 9 | 10 | const Stats = styled.div` 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | flex-direction: row; 15 | `; 16 | 17 | type Props = { 18 | viewCount: number, 19 | forkCount: number, 20 | likeCount: number, 21 | sandboxId: string, 22 | }; 23 | 24 | export default ({ viewCount, forkCount, likeCount, sandboxId }: Props) => ( 25 | 26 | } count={viewCount} /> 27 | } 29 | count={likeCount} 30 | /> 31 | } count={forkCount} /> 32 | 33 | ); 34 | -------------------------------------------------------------------------------- /src/app/store/notifications/reducer.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import type { Notification } from 'common/types'; 3 | import { ADD_NOTIFICATION, REMOVE_NOTIFICATION } from './actions'; 4 | 5 | type State = Array; 6 | 7 | const initialState: State = []; 8 | 9 | export default function reducer(state: State = initialState, action: Object) { 10 | switch (action.type) { 11 | case ADD_NOTIFICATION: 12 | return [ 13 | ...state, 14 | { 15 | id: action.id, 16 | title: action.title, 17 | type: action.notificationType, 18 | endTime: action.endTime, 19 | buttons: action.buttons, 20 | }, 21 | ]; 22 | case REMOVE_NOTIFICATION: { 23 | const newState = [...state]; 24 | const pos = newState.findIndex(n => n.id === action.id); 25 | delete newState[pos]; 26 | return newState.filter(x => x); 27 | } 28 | default: 29 | return state; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/sandbox/eval/presets/create-react-app-typescript/index.js: -------------------------------------------------------------------------------- 1 | import Preset from '../'; 2 | 3 | import stylesTranspiler from '../../transpilers/css'; 4 | import typescriptTranspiler from '../../transpilers/typescript'; 5 | import jsonTranspiler from '../../transpilers/json'; 6 | import rawTranspiler from '../../transpilers/raw'; 7 | 8 | const preset = new Preset('create-react-app-typescript', [ 9 | 'web.ts', 10 | 'ts', 11 | 'json', 12 | 'web.tsx', 13 | 'tsx', 14 | ]); 15 | 16 | preset.registerTranspiler(module => /\.css$/.test(module.title), [ 17 | { transpiler: stylesTranspiler }, 18 | ]); 19 | 20 | preset.registerTranspiler(module => /\.tsx?$/.test(module.title), [ 21 | { transpiler: typescriptTranspiler }, 22 | ]); 23 | 24 | preset.registerTranspiler(module => /\.json$/.test(module.title), [ 25 | { transpiler: jsonTranspiler }, 26 | ]); 27 | 28 | preset.registerTranspiler(() => true, [{ transpiler: rawTranspiler }]); 29 | 30 | export default preset; 31 | -------------------------------------------------------------------------------- /src/app/store/user/utils/popup.js: -------------------------------------------------------------------------------- 1 | const settings = 2 | 'scrollbars=no,toolbar=no,location=no,titlebar=no,directories=no,status=no,menubar=no'; 3 | 4 | function getPopupOffset({ width, height }) { 5 | const wLeft = window.screenLeft ? window.screenLeft : window.screenX; 6 | const wTop = window.screenTop ? window.screenTop : window.screenY; 7 | 8 | const left = wLeft + window.innerWidth / 2 - width / 2; 9 | const top = wTop + window.innerHeight / 2 - height / 2; 10 | 11 | return { top, left }; 12 | } 13 | 14 | function getPopupSize() { 15 | return { width: 1020, height: 618 }; 16 | } 17 | 18 | function getPopupDimensions() { 19 | const { width, height } = getPopupSize(); 20 | const { top, left } = getPopupOffset({ width, height }); 21 | 22 | return `width=${width},height=${height},top=${top},left=${left}`; 23 | } 24 | 25 | export default function openPopup(url, name) { 26 | return window.open(url, name, `${settings}, ${getPopupDimensions()}`); 27 | } 28 | -------------------------------------------------------------------------------- /flow-typed/npm/color_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 399dab0f2f78b067768947bf1845abcf 2 | // flow-typed version: <>/color_v^0.11.4/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'color' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'color' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'color/index' { 29 | declare module.exports: $Exports<'color'>; 30 | } 31 | declare module 'color/index.js' { 32 | declare module.exports: $Exports<'color'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/react-modal_v1.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 79b0d9e0a2b9916a7ee8fd46cc9fe92b 2 | // flow-typed version: 898a5a203f/react-modal_v1.x.x/flow_>=v0.26.x 3 | 4 | declare module 'react-modal' { 5 | declare type DefaultProps = { 6 | isOpen: bool, 7 | ariaHideApp: bool, 8 | closeTimeoutMS: number, 9 | shouldCloseOnOverlayClick: bool, 10 | } 11 | declare type Props = { 12 | isOpen: bool, 13 | style?: { 14 | content?: Object, 15 | overlay?: Object, 16 | }, 17 | appElement?: HTMLElement, 18 | ariaHideApp: bool, 19 | closeTimeoutMS: number, 20 | onAfterOpen?: () => mixed, 21 | onRequestClose?: (event: Event) => mixed, 22 | shouldCloseOnOverlayClick: bool, 23 | } 24 | declare class Modal extends React$Component { 25 | static setAppElement(element: HTMLElement | string): void; 26 | static defaultProps: DefaultProps; 27 | props: Props; 28 | } 29 | declare var exports: typeof Modal; 30 | } 31 | -------------------------------------------------------------------------------- /src/app/components/logos/Svelte.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default ({ 4 | width = 35, 5 | height = 35, 6 | className, 7 | }: { 8 | width: number, 9 | height: number, 10 | className: ?string, 11 | }) => ( 12 | 18 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/sandbox/errors/dependency-not-found-error.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import { actions, dispatch } from 'codesandbox-api'; 3 | import SandboxError from './sandbox-error'; 4 | 5 | export default class DependencyNotFoundError extends SandboxError { 6 | constructor(dependencyName: string) { 7 | super(); 8 | const [root, second] = dependencyName.split('/'); 9 | 10 | // If the package starts with a @ it's scoped, we should add the second 11 | // part of the name in that case 12 | const parsedName = root.startsWith('@') ? `${root}/${second}` : root; 13 | this.suggestions = [ 14 | { 15 | title: `Add ${parsedName} as dependency`, 16 | action: () => { 17 | dispatch(actions.source.dependencies.add(parsedName)); 18 | }, 19 | }, 20 | ]; 21 | 22 | this.name = 'DependencyNotFoundError'; 23 | this.message = `Could not find dependency: '${parsedName}'`; 24 | } 25 | type = 'dependency-not-found'; 26 | severity = 'error'; 27 | } 28 | -------------------------------------------------------------------------------- /flow-typed/npm/gulp-rev_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 1ee869a6593e9e90e3d1e0b31419eb0f 2 | // flow-typed version: <>/gulp-rev_v^7.1.2/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'gulp-rev' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'gulp-rev' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'gulp-rev/index' { 29 | declare module.exports: $Exports<'gulp-rev'>; 30 | } 31 | declare module 'gulp-rev/index.js' { 32 | declare module.exports: $Exports<'gulp-rev'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/gzip-size_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: caee90e2cbc021fdc8226242e1977c27 2 | // flow-typed version: <>/gzip-size_v3.0.0/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'gzip-size' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'gzip-size' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'gzip-size/index' { 29 | declare module.exports: $Exports<'gzip-size'>; 30 | } 31 | declare module 'gzip-size/index.js' { 32 | declare module.exports: $Exports<'gzip-size'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/whatwg-fetch_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 52d649ad4cb1e5a0e53fa566617e261f 2 | // flow-typed version: <>/whatwg-fetch_v^2.0.3/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'whatwg-fetch' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'whatwg-fetch' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'whatwg-fetch/fetch' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'whatwg-fetch/fetch.js' { 31 | declare module.exports: $Exports<'whatwg-fetch/fetch'>; 32 | } 33 | -------------------------------------------------------------------------------- /config/env.js: -------------------------------------------------------------------------------- 1 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be 2 | // injected into the application via DefinePlugin in Webpack configuration. 3 | 4 | const REACT_APP = /^REACT_APP_/i; 5 | const NODE_ENV = JSON.stringify(process.env.NODE_ENV || 'development'); 6 | const LOCAL_SERVER = !!JSON.stringify(process.env.LOCAL_SERVER); 7 | 8 | const getHost = () => { 9 | if (LOCAL_SERVER) { 10 | return 'http://localhost:3000'; 11 | } 12 | 13 | return process.env.NODE_ENV === 'development' 14 | ? '*' 15 | : 'https://codesandbox.io'; 16 | }; 17 | 18 | module.exports = Object.keys(process.env) 19 | .filter(key => REACT_APP.test(key)) 20 | .reduce( 21 | (env, key) => { 22 | env['process.env.' + key] = JSON.stringify(process.env[key]); 23 | return env; 24 | }, 25 | { 26 | 'process.env.NODE_ENV': NODE_ENV, 27 | 'process.env.CODESANDBOX_HOST': JSON.stringify(getHost()), 28 | 'process.env.LOCAL_SERVER': !!LOCAL_SERVER, 29 | } 30 | ); 31 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-jest_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: c5f56507f22abc799fee64c0abfe30c0 2 | // flow-typed version: <>/babel-jest_v^20.0.3/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-jest' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-jest' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-jest/build/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-jest/build/index.js' { 31 | declare module.exports: $Exports<'babel-jest/build/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/raw-loader_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 3789084c1a2c75f1691c75bbd20467c9 2 | // flow-typed version: <>/raw-loader_v^0.5.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'raw-loader' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'raw-loader' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'raw-loader/index' { 29 | declare module.exports: $Exports<'raw-loader'>; 30 | } 31 | declare module 'raw-loader/index.js' { 32 | declare module.exports: $Exports<'raw-loader'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/url-loader_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 857350b03318edaf89cf38d47dd3d1d9 2 | // flow-typed version: <>/url-loader_v^0.5.8/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'url-loader' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'url-loader' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'url-loader/index' { 29 | declare module.exports: $Exports<'url-loader'>; 30 | } 31 | declare module 'url-loader/index.js' { 32 | declare module.exports: $Exports<'url-loader'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/file-loader_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 71523bd1172bb141483de5e1251823ba 2 | // flow-typed version: <>/file-loader_v^0.11.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'file-loader' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'file-loader' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'file-loader/index' { 29 | declare module.exports: $Exports<'file-loader'>; 30 | } 31 | declare module 'file-loader/index.js' { 32 | declare module.exports: $Exports<'file-loader'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/gulp-filter_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 8800ba7ad0cc3698bffc3940312308b5 2 | // flow-typed version: <>/gulp-filter_v^5.0.0/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'gulp-filter' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'gulp-filter' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'gulp-filter/index' { 29 | declare module.exports: $Exports<'gulp-filter'>; 30 | } 31 | declare module 'gulp-filter/index.js' { 32 | declare module.exports: $Exports<'gulp-filter'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/json-loader_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 42bb251492cc82c211b4f31457c592a8 2 | // flow-typed version: <>/json-loader_v0.5.4/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'json-loader' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'json-loader' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'json-loader/index' { 29 | declare module.exports: $Exports<'json-loader'>; 30 | } 31 | declare module 'json-loader/index.js' { 32 | declare module.exports: $Exports<'json-loader'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/gulp-replace_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: fc207ed093189878b309a980299aaa99 2 | // flow-typed version: <>/gulp-replace_v^0.5.4/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'gulp-replace' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'gulp-replace' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'gulp-replace/index' { 29 | declare module.exports: $Exports<'gulp-replace'>; 30 | } 31 | declare module 'gulp-replace/index.js' { 32 | declare module.exports: $Exports<'gulp-replace'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/run-sequence_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: ebd04248731a912943d8018d7db77b91 2 | // flow-typed version: <>/run-sequence_v^1.2.2/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'run-sequence' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'run-sequence' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'run-sequence/index' { 29 | declare module.exports: $Exports<'run-sequence'>; 30 | } 31 | declare module 'run-sequence/index.js' { 32 | declare module.exports: $Exports<'run-sequence'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/base64-loader_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: ef67fdee722fe671e4c50b7616df7b35 2 | // flow-typed version: <>/base64-loader_v^1.0.0/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'base64-loader' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'base64-loader' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'base64-loader/index' { 29 | declare module.exports: $Exports<'base64-loader'>; 30 | } 31 | declare module 'base64-loader/index.js' { 32 | declare module.exports: $Exports<'base64-loader'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/eslint-loader_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 2ad658b1337e37a061d22bc043b50af7 2 | // flow-typed version: <>/eslint-loader_v^1.7.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'eslint-loader' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'eslint-loader' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'eslint-loader/index' { 29 | declare module.exports: $Exports<'eslint-loader'>; 30 | } 31 | declare module 'eslint-loader/index.js' { 32 | declare module.exports: $Exports<'eslint-loader'>; 33 | } 34 | -------------------------------------------------------------------------------- /scripts/utils/WatchMissingNodeModulesPlugin.js: -------------------------------------------------------------------------------- 1 | // This Webpack plugin ensures `npm install ` forces a project rebuild. 2 | // We’re not sure why this isn't Webpack's default behavior. 3 | // See https://github.com/facebookincubator/create-react-app/issues/186. 4 | 5 | function WatchMissingNodeModulesPlugin(nodeModulesPath) { 6 | this.nodeModulesPath = nodeModulesPath; 7 | } 8 | 9 | WatchMissingNodeModulesPlugin.prototype.apply = function(compiler) { 10 | compiler.plugin('emit', (compilation, callback) => { 11 | var missingDeps = compilation.missingDependencies; 12 | var nodeModulesPath = this.nodeModulesPath; 13 | 14 | // If any missing files are expected to appear in node_modules... 15 | if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) { 16 | // ...tell webpack to watch node_modules recursively until they appear. 17 | compilation.contextDependencies.push(nodeModulesPath); 18 | } 19 | 20 | callback(); 21 | }); 22 | }; 23 | 24 | module.exports = WatchMissingNodeModulesPlugin; 25 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/src/actions/notifications.ts: -------------------------------------------------------------------------------- 1 | import { Action } from './'; 2 | 3 | export interface NotificationAction extends Action { 4 | title: string; 5 | notificationType: 'notice' | 'warning' | 'error' | 'success'; 6 | timeAlive: number; 7 | } 8 | 9 | /** 10 | * Returns an action that describes to open a notification in the editor 11 | * 12 | * @export 13 | * @param {string} title 14 | * @param {('notice' | 'warning' | 'error' | 'success')} [notificationType='notice'] 15 | * @param {number} [timeAlive=2] How long the notification should show in seconds 16 | * @returns {NotificationAction} 17 | */ 18 | export function show( 19 | title: string, 20 | notificationType: 'notice' | 'warning' | 'error' | 'success' = 'notice', 21 | timeAlive: number = 2, 22 | ): NotificationAction { 23 | // TODO automatically add type: 'action', maybe do this after conversion to TS 24 | return { 25 | type: 'action', 26 | action: 'notification', 27 | title, 28 | notificationType, 29 | timeAlive, 30 | }; 31 | } 32 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/css/utils/insert-css.js: -------------------------------------------------------------------------------- 1 | const wrapper = (id, css) => ` 2 | function createStyleNode(id, content) { 3 | var styleNode = 4 | document.getElementById(id) || document.createElement('style'); 5 | 6 | styleNode.setAttribute('id', id); 7 | styleNode.type = 'text/css'; 8 | if (styleNode.styleSheet) { 9 | styleNode.styleSheet.cssText = content; 10 | } else { 11 | styleNode.innerHTML = ''; 12 | styleNode.appendChild(document.createTextNode(content)); 13 | } 14 | document.head.appendChild(styleNode); 15 | } 16 | 17 | // var classNameRegex = /\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)/g; 18 | // var classNames = css.match(classNameRegex); 19 | 20 | // const alteredClassNames = getGeneratedClassNames(module.id, classNames); 21 | // const newCode = getGeneratedClassNameCode(module.code, alteredClassNames); 22 | createStyleNode( 23 | ${JSON.stringify(id)}, 24 | ${JSON.stringify(css)} 25 | ); 26 | `; 27 | 28 | export default function(id, css) { 29 | const result = wrapper(id, css || ''); 30 | return result; 31 | } 32 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-preset-react_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 751f0876db59dedb43ce42d65c6d65c2 2 | // flow-typed version: <>/babel-preset-react_v^6.24.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-preset-react' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-preset-react' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-preset-react/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-preset-react/lib/index.js' { 31 | declare module.exports: $Exports<'babel-preset-react/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /src/app/containers/LikeHeart/index.js: -------------------------------------------------------------------------------- 1 | import { bindActionCreators } from 'redux'; 2 | import { connect } from 'react-redux'; 3 | import { createSelector } from 'reselect'; 4 | 5 | import sandboxActionCreators from 'app/store/entities/sandboxes/actions'; 6 | import { loggedInSelector } from 'app/store/user/selectors'; 7 | import { singleSandboxSelector } from 'app/store/entities/sandboxes/selectors'; 8 | 9 | import LikeHeart from './LikeHeart'; 10 | 11 | const mapStateToProps = createSelector( 12 | loggedInSelector, 13 | (state, props) => singleSandboxSelector(state, { id: props.sandboxId }), 14 | (loggedIn, sandbox) => ({ 15 | loggedIn, 16 | sandboxId: sandbox.id, 17 | isLiked: sandbox.userLiked, 18 | }) 19 | ); 20 | const mapDispatchToProps = dispatch => ({ 21 | likeSandbox: bindActionCreators(sandboxActionCreators.likeSandbox, dispatch), 22 | unLikeSandbox: bindActionCreators( 23 | sandboxActionCreators.unLikeSandbox, 24 | dispatch 25 | ), 26 | }); 27 | 28 | export default connect(mapStateToProps, mapDispatchToProps)(LikeHeart); 29 | -------------------------------------------------------------------------------- /src/app/pages/Patron/PricingModal/PricingInfo/Feature.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled, { css } from 'styled-components'; 3 | 4 | const Container = styled.tr` 5 | margin: 1rem 0; 6 | font-size: 1.125rem; 7 | font-weight: 400; 8 | color: rgba(255, 255, 255, 0.8); 9 | 10 | ${props => props.disabled && css`opacity: 0.5;`}; 11 | `; 12 | 13 | const Feature = styled.td` 14 | text-align: right; 15 | padding: 1rem 0; 16 | padding-right: 2rem; 17 | `; 18 | 19 | const Value = styled.td` 20 | text-align: center; 21 | padding: 0 2rem; 22 | font-weight: 300; 23 | 24 | ${props => props.supporter && css`background-color: rgba(0, 0, 0, 0.3);`}; 25 | `; 26 | 27 | type Props = { 28 | feature: string, 29 | free: string, 30 | supporter: string, 31 | disabled: boolean, 32 | }; 33 | 34 | export default ({ disabled, feature, free, supporter }: Props) => ( 35 | 36 | {feature} 37 | {free} 38 | {supporter} 39 | 40 | ); 41 | -------------------------------------------------------------------------------- /scripts/utils/chrome.applescript: -------------------------------------------------------------------------------- 1 | on run argv 2 | set theURL to item 1 of argv 3 | 4 | tell application "Chrome" 5 | 6 | if (count every window) = 0 then 7 | make new window 8 | end if 9 | 10 | -- Find a tab currently running the debugger 11 | set found to false 12 | set theTabIndex to -1 13 | repeat with theWindow in every window 14 | set theTabIndex to 0 15 | repeat with theTab in every tab of theWindow 16 | set theTabIndex to theTabIndex + 1 17 | if theTab's URL is theURL then 18 | set found to true 19 | exit repeat 20 | end if 21 | end repeat 22 | 23 | if found then 24 | exit repeat 25 | end if 26 | end repeat 27 | 28 | if found then 29 | tell theTab to reload 30 | set index of theWindow to 1 31 | set theWindow's active tab index to theTabIndex 32 | else 33 | tell window 1 34 | activate 35 | make new tab with properties {URL:theURL} 36 | end tell 37 | end if 38 | end tell 39 | end run 40 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-preset-latest_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 5367ef410d8520052bbb4c2a74f8b7a5 2 | // flow-typed version: <>/babel-preset-latest_v^6.24.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-preset-latest' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-preset-latest' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-preset-latest/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-preset-latest/lib/index.js' { 31 | declare module.exports: $Exports<'babel-preset-latest/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /src/app/components/buttons/Button.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import testRender from 'app/utils/test/render'; 3 | import { MemoryRouter } from 'react-router-dom'; 4 | import Button from './Button'; 5 | 6 | describe('Button', () => { 7 | it('renders', () => { 8 | testRender(); 9 | }); 10 | 11 | it('renders onClick', () => { 12 | testRender(); 13 | }); 14 | 15 | it('renders to', () => { 16 | testRender( 17 | 18 | 19 | 20 | ); 21 | }); 22 | 23 | it('renders href', () => { 24 | testRender(); 25 | }); 26 | 27 | it('renders properties', () => { 28 | testRender(); 29 | }); 30 | 31 | it('renders disabled', () => { 32 | testRender(); 33 | }); 34 | 35 | it('renders secondary', () => { 36 | testRender(); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /src/app/components/sandbox/DeleteSandboxButton.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from 'react'; 3 | import styled from 'styled-components'; 4 | import DeleteIcon from 'react-icons/lib/md/delete'; 5 | import Tooltip from 'app/components/Tooltip'; 6 | 7 | const DeleteSandboxButton = styled(props => ( 8 | 9 | 12 | 13 | ))` 14 | font-size: 1.2em; 15 | background-color: inherit; 16 | border: none; 17 | padding: 5px 6px 9px 6px; 18 | color: rgba(255, 255, 255, 0.5); 19 | cursor: pointer; 20 | &:hover { 21 | color: rgba(255, 255, 255, 1); 22 | } 23 | `; 24 | 25 | type Props = { 26 | onDelete: Function, 27 | id: string, 28 | }; 29 | 30 | export default class DeleteSandboxButtonContainer extends React.PureComponent< 31 | Props 32 | > { 33 | deleteSandbox = () => { 34 | this.props.onDelete(this.props.id); 35 | }; 36 | 37 | render() { 38 | return ; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/directories/reducer.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import type { Directory } from 'common/types'; 3 | import { RENAME_DIRECTORY, MOVE_DIRECTORY } from './actions'; 4 | 5 | function directoryReducer(directory: Directory, action) { 6 | switch (action.type) { 7 | case RENAME_DIRECTORY: 8 | return { ...directory, title: action.title }; 9 | case MOVE_DIRECTORY: 10 | return { ...directory, directoryShortid: action.directoryShortid }; 11 | default: 12 | return directory; 13 | } 14 | } 15 | 16 | type State = { 17 | [id: string]: Directory, 18 | }; 19 | 20 | export default function reducer( 21 | state: State, 22 | action: { type: string, [key: string]: any } 23 | ): State { 24 | switch (action.type) { 25 | case RENAME_DIRECTORY: 26 | case MOVE_DIRECTORY: 27 | if (state[action.id]) { 28 | return { 29 | ...state, 30 | [action.id]: directoryReducer(state[action.id], action), 31 | }; 32 | } 33 | return state; 34 | default: 35 | return state; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-preset-stage-0_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: d7786fcaca18758f7bdd3d94ced55329 2 | // flow-typed version: <>/babel-preset-stage-0_v^6.24.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-preset-stage-0' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-preset-stage-0' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-preset-stage-0/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-preset-stage-0/lib/index.js' { 31 | declare module.exports: $Exports<'babel-preset-stage-0/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/src/actions/error.ts: -------------------------------------------------------------------------------- 1 | import { Action } from './'; 2 | 3 | export interface ErrorOptions { 4 | line?: number; 5 | column?: number; 6 | moduleId?: string; 7 | payload?: Object; 8 | } 9 | 10 | export interface ErrorAction extends Action { 11 | title: string; 12 | message: string; 13 | line?: number; 14 | column?: number; 15 | moduleId?: string; 16 | payload?: Object; 17 | } 18 | 19 | /** 20 | * Returns an action that describes to show an error 21 | * in the code of the editor (with the red squiggles) 22 | * 23 | * @export 24 | * @param {string} title 25 | * @param {string} message 26 | * @param {ErrorOptions} { line, column, moduleId, payload } 27 | * @returns {ErrorAction} 28 | */ 29 | export function show( 30 | title: string, 31 | message: string, 32 | { line, column, moduleId, payload }: ErrorOptions, 33 | ): ErrorAction { 34 | return { 35 | title, 36 | message, 37 | line, 38 | column, 39 | moduleId, 40 | payload, 41 | type: 'action', 42 | action: 'show-error', 43 | }; 44 | } 45 | -------------------------------------------------------------------------------- /flow-typed/npm/babili-webpack-plugin_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 524a3244ccb525d9f61f478fb2feb012 2 | // flow-typed version: <>/babili-webpack-plugin_v^0.1.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babili-webpack-plugin' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babili-webpack-plugin' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babili-webpack-plugin/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babili-webpack-plugin/lib/index.js' { 31 | declare module.exports: $Exports<'babili-webpack-plugin/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /src/app/pages/Sandbox/Editor/Workspace/WorkspaceInputContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.div` 4 | display: inline-block; 5 | display: flex; 6 | overflow: visible; 7 | font-size: 0.875rem; 8 | margin: 0.5rem 0.75rem; 9 | input, 10 | textarea { 11 | transition: 0.3s ease background-color, 0.3s ease border-color; 12 | font-family: inherit; 13 | margin: 0 0.25rem; 14 | padding: 0.25rem; 15 | width: 100%; 16 | outline: none; 17 | border: none; 18 | border-radius: 2px; 19 | background-color: ${props => 20 | props.errorMessage 21 | ? props.theme.redBackground.clearer(0.5) 22 | : 'rgba(0, 0, 0, 0.2)'}; 23 | color: ${props => 24 | props.errorMessage ? props.theme.red : props.theme.white}; 25 | 26 | border: 1px solid transparent; 27 | &:focus { 28 | border-color: ${props => props.theme.secondary.clearer(0.5)}; 29 | } 30 | } 31 | 32 | input::-webkit-input-placeholder { 33 | color: ${props => props.theme.background2.lighten(2.9)}; 34 | } 35 | `; 36 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/entity.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import { schema } from 'normalizr'; 3 | import { getSandboxOptions } from 'common/url'; 4 | import moduleEntity from './modules/entity'; 5 | import directoryEntity from './directories/entity'; 6 | import userEntity from '../users/entity'; 7 | 8 | export default new schema.Entity( 9 | 'sandboxes', 10 | { 11 | modules: [moduleEntity], 12 | directories: [directoryEntity], 13 | currentModule: moduleEntity, 14 | author: userEntity, 15 | }, 16 | { 17 | processStrategy: sandbox => { 18 | const { 19 | currentModule, 20 | initialPath, 21 | isInProjectView, 22 | isEditorScreen, 23 | isPreviewScreen, 24 | } = getSandboxOptions(document.location.href); 25 | 26 | return { 27 | ...sandbox, 28 | isInProjectView, 29 | showEditor: !isPreviewScreen, 30 | showPreview: !isEditorScreen, 31 | currentModule, 32 | initialPath, 33 | forcedRenders: 0, // used to force renders 34 | }; 35 | }, 36 | } 37 | ); 38 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/svelte/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import SvelteWorker from 'worker-loader!./svelte-worker.js'; 3 | 4 | import WorkerTranspiler from '../worker-transpiler'; 5 | import { type LoaderContext } from '../../transpiled-module'; 6 | 7 | class SvelteTranspiler extends WorkerTranspiler { 8 | worker: Worker; 9 | 10 | constructor() { 11 | super('svelte-loader', SvelteWorker, 2); 12 | } 13 | 14 | doTranspilation(code: string, loaderContext: LoaderContext) { 15 | return new Promise((resolve, reject) => { 16 | const path = loaderContext.path; 17 | 18 | this.queueTask( 19 | { 20 | code, 21 | path, 22 | }, 23 | loaderContext, 24 | (err, data) => { 25 | if (err) { 26 | loaderContext.emitError(err); 27 | 28 | return reject(err); 29 | } 30 | 31 | return resolve(data); 32 | } 33 | ); 34 | }); 35 | } 36 | } 37 | 38 | const transpiler = new SvelteTranspiler(); 39 | 40 | export { SvelteTranspiler }; 41 | 42 | export default transpiler; 43 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/tools/gh-pages-publish.ts: -------------------------------------------------------------------------------- 1 | const { cd, exec, echo, touch } = require("shelljs") 2 | const { readFileSync } = require("fs") 3 | const url = require("url") 4 | 5 | let repoUrl 6 | let pkg = JSON.parse(readFileSync("package.json") as any) 7 | if (typeof pkg.repository === "object") { 8 | if (!pkg.repository.hasOwnProperty("url")) { 9 | throw new Error("URL does not exist in repository section") 10 | } 11 | repoUrl = pkg.repository.url 12 | } else { 13 | repoUrl = pkg.repository 14 | } 15 | 16 | let parsedUrl = url.parse(repoUrl) 17 | let repository = (parsedUrl.host || "") + (parsedUrl.path || "") 18 | let ghToken = process.env.GH_TOKEN 19 | 20 | echo("Deploying docs!!!") 21 | cd("dist/docs") 22 | touch(".nojekyll") 23 | exec("git init") 24 | exec("git add .") 25 | exec('git config user.name "Ives van Hoorne"') 26 | exec('git config user.email "i.vanhoorne@catawiki.nl"') 27 | exec('git commit -m "docs(docs): update gh-pages"') 28 | exec( 29 | `git push --force --quiet "https://${ghToken}@${repository}" master:gh-pages` 30 | ) 31 | echo("Docs deployed!!") 32 | -------------------------------------------------------------------------------- /scripts/utils/prompt.js: -------------------------------------------------------------------------------- 1 | var rl = require('readline'); 2 | 3 | // Convention: "no" should be the conservative choice. 4 | // If you mistype the answer, we'll always take it as a "no". 5 | // You can control the behavior on with `isYesDefault`. 6 | module.exports = function(question, isYesDefault) { 7 | if (typeof isYesDefault !== 'boolean') { 8 | throw new Error( 9 | 'Provide explicit boolean isYesDefault as second argument.' 10 | ); 11 | } 12 | return new Promise(resolve => { 13 | var rlInterface = rl.createInterface({ 14 | input: process.stdin, 15 | output: process.stdout, 16 | }); 17 | 18 | var hint = isYesDefault === true ? '[Y/n]' : '[y/N]'; 19 | var message = question + ' ' + hint + '\n'; 20 | 21 | rlInterface.question(message, function(answer) { 22 | rlInterface.close(); 23 | 24 | var useDefault = answer.trim().length === 0; 25 | if (useDefault) { 26 | return resolve(isYesDefault); 27 | } 28 | 29 | var isYes = answer.match(/^(yes|y)$/i); 30 | return resolve(isYes); 31 | }); 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /src/app/containers/Preferences/styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Preference from 'app/components/Preference'; 3 | 4 | export const Container = styled.div` 5 | color: ${props => props.theme.white}; 6 | width: 100%; 7 | color: rgba(255, 255, 255, 0.8); 8 | 9 | div { 10 | &:first-child { 11 | padding-top: 0; 12 | } 13 | } 14 | `; 15 | 16 | export const Subheading = styled.div` 17 | color: rgba(255, 255, 255, 0.8); 18 | font-weight: 500; 19 | margin: 1rem 0; 20 | text-transform: uppercase; 21 | `; 22 | 23 | export const PreferenceContainer = styled.div`padding-top: 0.5rem;`; 24 | 25 | export const PaddedPreference = styled(Preference)` 26 | padding: 0; 27 | font-weight: 400; 28 | `; 29 | 30 | export const Description = styled.div` 31 | margin-top: 0.25rem; 32 | font-weight: 500; 33 | color: rgba(255, 255, 255, 0.5); 34 | font-size: 0.875rem; 35 | `; 36 | 37 | export const Rule = styled.hr` 38 | border: none; 39 | height: 1px; 40 | outline: none; 41 | margin: 1rem 0; 42 | 43 | background-color: rgba(255, 255, 255, 0.1); 44 | `; 45 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2017 Ives van Hoorne 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/typescript/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import TypeScriptWorker from 'worker-loader!./typescript-worker.js'; 3 | 4 | import WorkerTranspiler from '../worker-transpiler'; 5 | import { type LoaderContext } from '../../transpiled-module'; 6 | 7 | class TypeScriptTranspiler extends WorkerTranspiler { 8 | worker: Worker; 9 | 10 | constructor() { 11 | super('ts-loader', TypeScriptWorker, 2); 12 | } 13 | 14 | doTranspilation(code: string, loaderContext: LoaderContext) { 15 | return new Promise((resolve, reject) => { 16 | const path = loaderContext.path; 17 | 18 | this.queueTask( 19 | { 20 | code, 21 | path, 22 | }, 23 | loaderContext, 24 | (err, data) => { 25 | if (err) { 26 | loaderContext.emitError(err); 27 | 28 | return reject(err); 29 | } 30 | 31 | return resolve(data); 32 | } 33 | ); 34 | }); 35 | } 36 | } 37 | 38 | const transpiler = new TypeScriptTranspiler(); 39 | 40 | export { TypeScriptTranspiler }; 41 | 42 | export default transpiler; 43 | -------------------------------------------------------------------------------- /src/app/components/user/SubscribeForm/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import { StripeProvider, Elements } from 'react-stripe-elements'; 5 | 6 | import { STRIPE_API_KEY } from 'app/utils/config'; 7 | 8 | import CheckoutForm from './CheckoutForm'; 9 | 10 | const Container = styled.div` 11 | width: 300px; 12 | border-radius: 3px; 13 | box-sizing: border-box; 14 | color: rgba(255, 255, 255, 0.8); 15 | `; 16 | 17 | type Props = { 18 | name: ?string, 19 | subscribe: (token: string) => void, 20 | buttonName: string, 21 | loadingText: string, 22 | }; 23 | 24 | export default ({ 25 | name, 26 | subscribe, 27 | loadingText = 'Creating Subscription...', 28 | buttonName = 'Subscribe', 29 | }: Props) => ( 30 | 31 | 32 | 33 | 39 | 40 | 41 | 42 | ); 43 | -------------------------------------------------------------------------------- /src/app/components/TypeScriptIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import IconBase from 'react-icons/IconBase'; 3 | 4 | export default () => ( 5 | 6 | file_type_typescript 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/stylus/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import StylusWorker from 'worker-loader!./stylus-worker.js'; 3 | 4 | import WorkerTranspiler from '../worker-transpiler'; 5 | import { type LoaderContext } from '../../transpiled-module'; 6 | 7 | class StylusTranspiler extends WorkerTranspiler { 8 | worker: Worker; 9 | 10 | constructor() { 11 | super('stylus-loader', StylusWorker, 1); 12 | 13 | this.cacheable = false; 14 | } 15 | 16 | doTranspilation(code: string, loaderContext: LoaderContext) { 17 | return new Promise((resolve, reject) => { 18 | const path = loaderContext.path; 19 | 20 | this.queueTask( 21 | { 22 | code, 23 | path, 24 | }, 25 | loaderContext, 26 | (err, data) => { 27 | if (err) { 28 | loaderContext.emitError(err); 29 | 30 | return reject(err); 31 | } 32 | 33 | return resolve(data); 34 | } 35 | ); 36 | }); 37 | } 38 | } 39 | 40 | const transpiler = new StylusTranspiler(); 41 | 42 | export { StylusTranspiler }; 43 | 44 | export default transpiler; 45 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/rollup.config.js: -------------------------------------------------------------------------------- 1 | import resolve from 'rollup-plugin-node-resolve' 2 | import commonjs from 'rollup-plugin-commonjs' 3 | import sourceMaps from 'rollup-plugin-sourcemaps' 4 | const pkg = require('./package.json') 5 | const camelCase = require('lodash.camelcase') 6 | 7 | const libraryName = 'codesandbox' 8 | 9 | export default { 10 | entry: `compiled/${libraryName}.js`, 11 | targets: [ 12 | { dest: pkg.main, moduleName: camelCase(libraryName), format: 'umd' }, 13 | { dest: pkg.module, format: 'es' } 14 | ], 15 | sourceMap: true, 16 | // Indicate here external modules you don't wanna include in your bundle (i.e.: 'lodash') 17 | external: [], 18 | plugins: [ 19 | // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs) 20 | commonjs(), 21 | // Allow node_modules resolution, so you can use 'external' to control 22 | // which external modules to include in the bundle 23 | // https://github.com/rollup/rollup-plugin-node-resolve#usage 24 | resolve(), 25 | 26 | // Resolve source maps to the original source 27 | sourceMaps() 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/less/file-manager.js: -------------------------------------------------------------------------------- 1 | export default function(loaderContext, files) { 2 | return { 3 | install: function(less, pluginManager) { 4 | function CSBFileManager() {} 5 | 6 | CSBFileManager.prototype = new less.FileManager(); 7 | CSBFileManager.prototype.constructor = CSBFileManager; 8 | CSBFileManager.prototype.supports = function(filename) { 9 | return true; 10 | }; 11 | 12 | CSBFileManager.prototype.resolve = function(filename) { 13 | return new Promise((resolve, reject) => { 14 | try { 15 | loaderContext.addDependency(filename); 16 | 17 | const module = files[filename]; 18 | resolve(module); 19 | } catch (e) { 20 | reject(e); 21 | } 22 | }); 23 | }; 24 | 25 | CSBFileManager.prototype.loadFile = function(filename) { 26 | return this.resolve(filename).then(code => ({ 27 | contents: code, 28 | filename, 29 | })); 30 | }; 31 | 32 | pluginManager.addFileManager(new CSBFileManager()); 33 | }, 34 | }; 35 | } 36 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-system-import_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: e661ffa5119d3c9f7e127f730a220361 2 | // flow-typed version: <>/babel-plugin-system-import_v^1.1.5/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-system-import' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-system-import' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'babel-plugin-system-import/index' { 29 | declare module.exports: $Exports<'babel-plugin-system-import'>; 30 | } 31 | declare module 'babel-plugin-system-import/index.js' { 32 | declare module.exports: $Exports<'babel-plugin-system-import'>; 33 | } 34 | -------------------------------------------------------------------------------- /src/app/store/context-menu/reducer.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from 'react'; 3 | import * as actions from './actions'; 4 | 5 | export type ContextMenuItem = { 6 | title: string, 7 | action: Function, 8 | icon?: React.Component, 9 | color: ?string, 10 | }; 11 | 12 | export type ContextMenuState = { 13 | show: boolean, 14 | items: Array, 15 | x: number, 16 | y: number, 17 | onClose?: Function, 18 | }; 19 | 20 | const initialState: ContextMenuState = { 21 | show: false, 22 | items: [], 23 | x: 0, 24 | y: 0, 25 | }; 26 | 27 | export default function reducer( 28 | state: ContextMenuState = initialState, 29 | action: Object 30 | ) { 31 | switch (action.type) { 32 | case actions.CLOSE_CONTEXT_MENU: 33 | return { 34 | ...state, 35 | show: false, 36 | }; 37 | case actions.OPEN_CONTEXT_MENU: 38 | return { 39 | ...state, 40 | items: action.items, 41 | x: action.x, 42 | y: action.y, 43 | onClose: action.onClose, 44 | show: true, 45 | }; 46 | default: 47 | return state; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /config/babel.dev.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // Don't try to find .babelrc because we want to force this configuration. 3 | babelrc: false, 4 | // This is a feature of `babel-loader` for webpack (not Babel itself). 5 | // It enables caching results in OS temporary directory for faster rebuilds. 6 | cacheDirectory: true, 7 | presets: [ 8 | // Latest stable ECMAScript features 9 | ['es2015', { modules: false }], 10 | // JSX, Flow 11 | 'react', 12 | ], 13 | plugins: [ 14 | require.resolve('babel-plugin-transform-async-to-generator'), 15 | require.resolve('babel-plugin-transform-object-rest-spread'), 16 | require.resolve('babel-plugin-transform-class-properties'), 17 | require.resolve('babel-plugin-transform-runtime'), 18 | require.resolve('babel-plugin-lodash'), 19 | require.resolve('babel-plugin-syntax-dynamic-import'), 20 | require.resolve('babel-plugin-styled-components'), 21 | [ 22 | require.resolve('react-loadable/babel'), 23 | { 24 | server: true, 25 | webpack: true, 26 | }, 27 | ], 28 | require.resolve('react-hot-loader/babel'), 29 | ], 30 | }; 31 | -------------------------------------------------------------------------------- /flow-typed/npm/rimraf_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: b2a29c9ccb46319b117ba1c937811560 2 | // flow-typed version: <>/rimraf_v^2.6.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'rimraf' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'rimraf' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'rimraf/bin' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'rimraf/rimraf' { 30 | declare module.exports: any; 31 | } 32 | 33 | // Filename aliases 34 | declare module 'rimraf/bin.js' { 35 | declare module.exports: $Exports<'rimraf/bin'>; 36 | } 37 | declare module 'rimraf/rimraf.js' { 38 | declare module.exports: $Exports<'rimraf/rimraf'>; 39 | } 40 | -------------------------------------------------------------------------------- /src/app/pages/NotFound.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import SubTitle from 'app/components/text/SubTitle'; 5 | import Button from 'app/components/buttons/Button'; 6 | import { newSandboxUrl } from 'app/utils/url-generator'; 7 | 8 | const Container = styled.div` 9 | position: absolute; 10 | top: 0; 11 | bottom: 0; 12 | left: 0; 13 | right: 0; 14 | margin: auto; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | flex-direction: column; 19 | font-size: 1.5rem; 20 | color: white; 21 | `; 22 | 23 | const Title = styled.h1`margin-bottom: 0;`; 24 | 25 | const Buttons = styled.div` 26 | display: flex; 27 | justify-content: space-around; 28 | min-width: 450px; 29 | flex-wrap: wrap; 30 | margin-top: 0.5rem; 31 | `; 32 | 33 | export default () => ( 34 | 35 | 404 36 | We could not find the page you{"'"}re looking for :( 37 | 38 | 39 | 40 | 41 | 42 | ); 43 | -------------------------------------------------------------------------------- /src/app/store/entities/sandboxes/modules/utils/get-type.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | import type { Module } from 'common/types'; 3 | 4 | const reactRegex = /import.*from\s['|"]react['|"]/; 5 | export function hasReact(code: string) { 6 | return reactRegex.test(code); 7 | } 8 | 9 | const cssRegex = /\.css$/; 10 | const jsonRegex = /\.json$/; 11 | const htmlRegex = /\.html$/; 12 | 13 | export function getMode(module: Module) { 14 | if (cssRegex.test(module.title)) return 'css'; 15 | if (jsonRegex.test(module.title)) return 'json'; 16 | if (htmlRegex.test(module.title)) return 'html'; 17 | if (!module.title.includes('.')) return 'raw'; 18 | 19 | return ''; 20 | } 21 | 22 | const jsRegex = /\.jsx?$/; 23 | const tsRegex = /\.tsx?$/; 24 | function isJS(module: Module) { 25 | if (jsRegex.test(module.title)) return 'js'; 26 | if (tsRegex.test(module.title)) return 'ts'; 27 | return undefined; 28 | } 29 | 30 | export default function getType(module: Module) { 31 | const isJSType = isJS(module); 32 | if (isJSType) { 33 | if (hasReact(module.code || '')) return 'react'; 34 | return isJSType; 35 | } 36 | 37 | return getMode(module); 38 | } 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Ives van Hoorne 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /flow-typed/npm/humps_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 49ad63e9d94b97eac9cb53fbc1098ff7 2 | // flow-typed version: <>/humps_vCompuIves/humps/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'humps' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'humps' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'humps/humps' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'humps/test/test' { 30 | declare module.exports: any; 31 | } 32 | 33 | // Filename aliases 34 | declare module 'humps/humps.js' { 35 | declare module.exports: $Exports<'humps/humps'>; 36 | } 37 | declare module 'humps/test/test.js' { 38 | declare module.exports: $Exports<'humps/test/test'>; 39 | } 40 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-syntax-dynamic-import_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 570dc6d823e76db09a23a3e1530b3b6a 2 | // flow-typed version: <>/babel-plugin-syntax-dynamic-import_v^6.18.0/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-syntax-dynamic-import' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-syntax-dynamic-import' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-syntax-dynamic-import/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-plugin-syntax-dynamic-import/lib/index.js' { 31 | declare module.exports: $Exports<'babel-plugin-syntax-dynamic-import/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-transform-regenerator_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 904d4f8e6e311e77721ddc0f3142b073 2 | // flow-typed version: <>/babel-plugin-transform-regenerator_v^6.24.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-transform-regenerator' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-transform-regenerator' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-transform-regenerator/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-plugin-transform-regenerator/lib/index.js' { 31 | declare module.exports: $Exports<'babel-plugin-transform-regenerator/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /src/app/split-pane.css: -------------------------------------------------------------------------------- 1 | .Resizer { 2 | -moz-box-sizing: border-box; 3 | -webkit-box-sizing: border-box; 4 | box-sizing: border-box; 5 | background: #000; 6 | opacity: .4; 7 | z-index: 30; 8 | -moz-background-clip: padding; 9 | -webkit-background-clip: padding; 10 | background-clip: padding-box; 11 | } 12 | 13 | .Resizer:hover { 14 | -webkit-transition: all 0.3s ease; 15 | transition: all 0.3s ease; 16 | } 17 | 18 | .Resizer.horizontal { 19 | height: 11px; 20 | margin: -5px 0; 21 | border-top: 5px solid rgba(0, 0, 0, 0); 22 | border-bottom: 5px solid rgba(0, 0, 0, 0); 23 | cursor: row-resize; 24 | width: 100%; 25 | } 26 | 27 | .Resizer.horizontal:hover { 28 | border-top: 5px solid rgba(0, 0, 0, 0.5); 29 | border-bottom: 5px solid rgba(0, 0, 0, 0.5); 30 | } 31 | 32 | .Resizer.vertical { 33 | width: 11px; 34 | margin: 0 -5px; 35 | border-left: 5px solid rgba(0, 0, 0, 0); 36 | border-right: 5px solid rgba(0, 0, 0, 0); 37 | cursor: col-resize; 38 | } 39 | 40 | .Resizer.vertical:hover { 41 | border-left: 5px solid rgba(0, 0, 0, 0.5); 42 | border-right: 5px solid rgba(0, 0, 0, 0.5); 43 | } 44 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/base64/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import Transpiler from '../'; 3 | import { type LoaderContext } from '../../transpiled-module'; 4 | 5 | import mimes from './mimes.json'; 6 | 7 | function getMime(path) { 8 | const extension = path 9 | .split('.') 10 | .pop() 11 | .toLowerCase(); 12 | const mime = mimes[extension]; 13 | if (!mime) { 14 | throw new Error( 15 | 'Unsupported type of image of extension ' + extension + ': ' + path 16 | ); 17 | } 18 | return mime; 19 | } 20 | 21 | class Base64Transpiler extends Transpiler { 22 | constructor() { 23 | super('base64-loader'); 24 | } 25 | 26 | doTranspilation(code: string) { 27 | return new Promise(resolve => { 28 | const reader = new FileReader(); 29 | reader.readAsDataURL(code); 30 | 31 | reader.onloadend = function() { 32 | const base64data = reader.result; 33 | resolve({ 34 | transpiledCode: `module.exports = "${base64data.toString()}"`, 35 | }); 36 | }; 37 | }); 38 | } 39 | } 40 | 41 | const transpiler = new Base64Transpiler(); 42 | 43 | export { Base64Transpiler }; 44 | 45 | export default transpiler; 46 | -------------------------------------------------------------------------------- /src/app/utils/codemirror/prettify.js: -------------------------------------------------------------------------------- 1 | import { DEFAULT_PRETTIER_CONFIG } from 'app/store/preferences/reducer'; 2 | 3 | const worker = new Worker('/static/js/prettier/worker.js'); 4 | 5 | function getParser(mode) { 6 | if (mode === 'jsx') return 'babylon'; 7 | if (mode === 'css') return 'postcss'; 8 | if (mode === 'html') return 'parse5'; 9 | if (mode === 'typescript') return 'typescript'; 10 | if (mode === 'graphql') return 'graphql'; 11 | 12 | return 'babylon'; 13 | } 14 | 15 | export default (function prettify( 16 | code, 17 | mode, 18 | prettierConfig = DEFAULT_PRETTIER_CONFIG 19 | ) { 20 | return new Promise(resolve => { 21 | worker.postMessage({ 22 | text: code, 23 | options: { 24 | ...DEFAULT_PRETTIER_CONFIG, 25 | ...prettierConfig, 26 | parser: getParser(mode), 27 | }, 28 | }); 29 | 30 | worker.onmessage = e => { 31 | const { formatted, text, error } = e.data; 32 | if (error) { 33 | console.error(error); 34 | resolve(text); 35 | } 36 | if (formatted) { 37 | resolve(formatted); 38 | } else { 39 | resolve(text); 40 | } 41 | }; 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-transform-class-properties_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 913612d70fd5bc18f88b840e4db74495 2 | // flow-typed version: <>/babel-plugin-transform-class-properties_v^6.24.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-transform-class-properties' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-transform-class-properties' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-transform-class-properties/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-plugin-transform-class-properties/lib/index.js' { 31 | declare module.exports: $Exports<'babel-plugin-transform-class-properties/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/case-sensitive-paths-webpack-plugin_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 2a6df66b32c48c084d233b70d4975773 2 | // flow-typed version: <>/case-sensitive-paths-webpack-plugin_v^2.0.0/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'case-sensitive-paths-webpack-plugin' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'case-sensitive-paths-webpack-plugin' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'case-sensitive-paths-webpack-plugin/index' { 29 | declare module.exports: $Exports<'case-sensitive-paths-webpack-plugin'>; 30 | } 31 | declare module 'case-sensitive-paths-webpack-plugin/index.js' { 32 | declare module.exports: $Exports<'case-sensitive-paths-webpack-plugin'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/react-addons-css-transition-group_v15.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: fe7abf92d2b0a6cb8907b2ea573c8586 2 | // flow-typed version: e06e1b48c4/react-addons-css-transition-group_v15.x.x/flow_>=v0.26.x 3 | 4 | declare module 'react-addons-css-transition-group' { 5 | declare type ReactCSSTransitionGroupNames = { 6 | enter: string, 7 | enterActive?: string, 8 | leave: string, 9 | leaveActive?: string, 10 | appear: string, 11 | appearActive?: string 12 | }; 13 | declare type Props = { 14 | transitionName: string | ReactCSSTransitionGroupNames, 15 | transitionAppear?: boolean, 16 | transitionEnter?: boolean, 17 | transitionLeave?: boolean, 18 | transitionAppearTimeout?: number, 19 | transitionEnterTimeout?: number, 20 | transitionLeaveTimeout?: number, 21 | }; 22 | declare type DefaultProps = { 23 | transitionAppear: boolean, 24 | transitionEnter: boolean, 25 | transitionLeave: boolean, 26 | } 27 | declare class ReactCSSTransitionGroup extends React$Component { 28 | props: Props; 29 | static defaultProps: DefaultProps; 30 | } 31 | declare module.exports: Class; 32 | } 33 | -------------------------------------------------------------------------------- /src/app/store/entities/users/reducer.js: -------------------------------------------------------------------------------- 1 | import { 2 | FETCH_USER_SANDBOXES_ACTIONS, 3 | FETCH_USER_LIKED_SANDBOXES_ACTIONS, 4 | } from './actions'; 5 | 6 | const initialState = {}; 7 | 8 | function singleUserReducer(user, action) { 9 | switch (action.type) { 10 | case FETCH_USER_LIKED_SANDBOXES_ACTIONS.SUCCESS: { 11 | return { 12 | ...user, 13 | likedSandboxes: { ...user.liked_sandboxes, ...action.data }, 14 | }; 15 | } 16 | case FETCH_USER_SANDBOXES_ACTIONS.SUCCESS: { 17 | return { ...user, sandboxes: { ...user.sandboxes, ...action.data } }; 18 | } 19 | 20 | default: { 21 | return user; 22 | } 23 | } 24 | } 25 | 26 | export default function(state = initialState, action) { 27 | switch (action.type) { 28 | case FETCH_USER_LIKED_SANDBOXES_ACTIONS.SUCCESS: 29 | case FETCH_USER_SANDBOXES_ACTIONS.SUCCESS: { 30 | const { username } = action.meta; 31 | if (username && state[username]) { 32 | return { 33 | ...state, 34 | [username]: singleUserReducer(state[username], action), 35 | }; 36 | } 37 | return state; 38 | } 39 | default: 40 | return state; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-transform-decorators-legacy_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: fcb8751dbcd770a2ff2ed5934dcb7501 2 | // flow-typed version: <>/babel-plugin-transform-decorators-legacy_v^1.3.4/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-transform-decorators-legacy' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-transform-decorators-legacy' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-transform-decorators-legacy/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-plugin-transform-decorators-legacy/lib/index.js' { 31 | declare module.exports: $Exports<'babel-plugin-transform-decorators-legacy/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-transform-remove-strict-mode_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 4ac8e66ca86bb34ba82c34b7710dbdcd 2 | // flow-typed version: <>/babel-plugin-transform-remove-strict-mode_v^0.0.2/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-transform-remove-strict-mode' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-transform-remove-strict-mode' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-transform-remove-strict-mode/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-plugin-transform-remove-strict-mode/lib/index.js' { 31 | declare module.exports: $Exports<'babel-plugin-transform-remove-strict-mode/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/gulp-postcss_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 90fcd72f5bb3b67729b7036cd5febd9e 2 | // flow-typed version: <>/gulp-postcss_v^6.4.0/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'gulp-postcss' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'gulp-postcss' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'gulp-postcss/test' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'gulp-postcss/index' { 31 | declare module.exports: $Exports<'gulp-postcss'>; 32 | } 33 | declare module 'gulp-postcss/index.js' { 34 | declare module.exports: $Exports<'gulp-postcss'>; 35 | } 36 | declare module 'gulp-postcss/test.js' { 37 | declare module.exports: $Exports<'gulp-postcss/test'>; 38 | } 39 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-transform-async-to-generator_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 30d2443ada9aeb505b022c5a1cbb3add 2 | // flow-typed version: <>/babel-plugin-transform-async-to-generator_v^6.24.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-transform-async-to-generator' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-transform-async-to-generator' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-transform-async-to-generator/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-plugin-transform-async-to-generator/lib/index.js' { 31 | declare module.exports: $Exports<'babel-plugin-transform-async-to-generator/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-transform-object-rest-spread_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: a7f10d4e1bb10a70f85748b8d561edb8 2 | // flow-typed version: <>/babel-plugin-transform-object-rest-spread_v^6.23.0/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-transform-object-rest-spread' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-transform-object-rest-spread' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-transform-object-rest-spread/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-plugin-transform-object-rest-spread/lib/index.js' { 31 | declare module.exports: $Exports<'babel-plugin-transform-object-rest-spread/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/filesize_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: b06af7d1b73c98fcee711b8a8c2dd855 2 | // flow-typed version: <>/filesize_v^3.5.6/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'filesize' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'filesize' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'filesize/lib/filesize.es6' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'filesize/lib/filesize' { 30 | declare module.exports: any; 31 | } 32 | 33 | // Filename aliases 34 | declare module 'filesize/lib/filesize.es6.js' { 35 | declare module.exports: $Exports<'filesize/lib/filesize.es6'>; 36 | } 37 | declare module 'filesize/lib/filesize.js' { 38 | declare module.exports: $Exports<'filesize/lib/filesize'>; 39 | } 40 | -------------------------------------------------------------------------------- /src/app/components/user/UserWithAvatar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import PatronStar from './PatronStar'; 5 | 6 | const CenteredText = styled.div` 7 | display: inline-flex; 8 | justify-content: center; 9 | align-items: center; 10 | flex-direction: row; 11 | `; 12 | 13 | const AuthorName = styled.span` 14 | display: inline-flex; 15 | align-items: center; 16 | margin: 0 0.5em; 17 | font-weight: 400; 18 | `; 19 | 20 | const Image = styled.img` 21 | width: 1.75em; 22 | height: 1.75em; 23 | border-radius: 4px; 24 | `; 25 | 26 | type Props = { 27 | avatarUrl: string, 28 | username: string, 29 | subscriptionSince: ?string, 30 | badge: ?Object, 31 | }; 32 | 33 | export default ({ 34 | avatarUrl, 35 | username, 36 | subscriptionSince, 37 | ...props 38 | }: Props) => ( 39 | 40 | {username} 41 | 42 | {username} 43 | {subscriptionSince && ( 44 | 48 | )} 49 | 50 | 51 | ); 52 | -------------------------------------------------------------------------------- /flow-typed/npm/detect-port_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 3defdde83928ff38d42fe607d4bd91ae 2 | // flow-typed version: <>/detect-port_v^1.1.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'detect-port' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'detect-port' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'detect-port/lib/detect-port' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'detect-port/index' { 31 | declare module.exports: $Exports<'detect-port'>; 32 | } 33 | declare module 'detect-port/index.js' { 34 | declare module.exports: $Exports<'detect-port'>; 35 | } 36 | declare module 'detect-port/lib/detect-port.js' { 37 | declare module.exports: $Exports<'detect-port/lib/detect-port'>; 38 | } 39 | -------------------------------------------------------------------------------- /flow-typed/npm/postcss-loader_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 7f2d1f5f0dff5cd75c37602c424bd56e 2 | // flow-typed version: <>/postcss-loader_v^1.2.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'postcss-loader' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'postcss-loader' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'postcss-loader/error' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'postcss-loader/error.js' { 31 | declare module.exports: $Exports<'postcss-loader/error'>; 32 | } 33 | declare module 'postcss-loader/index' { 34 | declare module.exports: $Exports<'postcss-loader'>; 35 | } 36 | declare module 'postcss-loader/index.js' { 37 | declare module.exports: $Exports<'postcss-loader'>; 38 | } 39 | -------------------------------------------------------------------------------- /src/sandbox/eval/transpilers/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import type { SourceMap } from './utils/get-source-map'; 4 | import { type LoaderContext } from '../transpiled-module'; 5 | 6 | type TranspilerResult = { 7 | transpiledCode: string, 8 | ast?: Object, 9 | sourceMap?: SourceMap, 10 | }; 11 | 12 | export default class Transpiler { 13 | cachedResults: { 14 | [id: string]: TranspilerResult, 15 | }; 16 | cacheable: boolean; 17 | name: string; 18 | 19 | constructor(name: string) { 20 | this.cachedResults = {}; 21 | this.cacheable = true; 22 | this.name = name; 23 | } 24 | 25 | /* eslint-disable */ 26 | initialize() {} 27 | 28 | cleanModule(loaderContext: LoaderContext) {} 29 | 30 | doTranspilation( 31 | code: string, 32 | loaderContext: LoaderContext 33 | ): Promise { 34 | throw new Error('This is an abstract function, please override it!'); 35 | } 36 | /* eslint-enable */ 37 | 38 | transpile( 39 | code: string, 40 | loaderContext: LoaderContext 41 | ): Promise { 42 | return this.doTranspilation(code, loaderContext).then(result => { 43 | this.cachedResults[code] = result; 44 | return result; 45 | }); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/app/pages/Search/Filters/Filter.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import { RefinementList } from 'react-instantsearch/dom'; 5 | 6 | const Container = styled.div` 7 | padding: 1rem; 8 | background-color: ${props => props.theme.background}; 9 | box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.24); 10 | border-radius: 2px; 11 | margin-bottom: 1rem; 12 | 13 | .ais-SearchBox__wrapper { 14 | margin-bottom: 0.5rem; 15 | } 16 | 17 | .ais-SearchBox__reset { 18 | top: 0.25rem; 19 | } 20 | 21 | .ais-SearchBox__input { 22 | font-size: 0.875rem; 23 | padding-left: 2.5em; 24 | } 25 | `; 26 | 27 | const Title = styled.div` 28 | font-weight: 300; 29 | font-size: 1.25rem; 30 | margin-bottom: 1rem; 31 | `; 32 | 33 | type Props = { 34 | title: string, 35 | attributeName: string, 36 | operator: string, 37 | noSearch: ?boolean, 38 | }; 39 | 40 | export default ({ title, attributeName, operator, noSearch }: Props) => ( 41 | 42 | {title} 43 | 49 | 50 | ); 51 | -------------------------------------------------------------------------------- /src/node_modules/codesandbox-api/src/errors/index.ts: -------------------------------------------------------------------------------- 1 | import { TranspiledModule, Module, Directory } from '../typings/codesandbox'; 2 | 3 | const transformers: Check[] = []; 4 | 5 | export type SuggestionAction = ( 6 | module: TranspiledModule, 7 | modules: TranspiledModule[], 8 | directories: Directory[] 9 | ) => boolean; 10 | 11 | export interface Suggestion { 12 | title: string; 13 | action: SuggestionAction; 14 | } 15 | 16 | export type Check = ( 17 | error: Error, 18 | module: TranspiledModule, 19 | modules: TranspiledModule[], 20 | directories: Directory[] 21 | ) => { 22 | name: string | undefined; 23 | message: string; 24 | suggestions: Suggestion[]; 25 | } | null; 26 | 27 | export function transformError( 28 | error: Error, 29 | module: TranspiledModule, 30 | modules: TranspiledModule[], 31 | directories: Directory[] 32 | ) { 33 | const transformedErrors = transformers 34 | .map(c => c(error, module, modules, directories)) 35 | .filter(x => x != null); 36 | 37 | return transformedErrors[0]; 38 | } 39 | 40 | export function clearErrorTransformers() { 41 | transformers.length = 0; 42 | } 43 | 44 | export function registerErrorTransformer(check: Check) { 45 | transformers.push(check); 46 | } 47 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-transform-react-constant-elements_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: fcae359feab13947ea5c97da9567068b 2 | // flow-typed version: <>/babel-plugin-transform-react-constant-elements_v^6.23.0/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-transform-react-constant-elements' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-transform-react-constant-elements' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-transform-react-constant-elements/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-plugin-transform-react-constant-elements/lib/index.js' { 31 | declare module.exports: $Exports<'babel-plugin-transform-react-constant-elements/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/html-loader_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: a85c046d64e53ce66a3656a35cf08994 2 | // flow-typed version: <>/html-loader_v^0.4.4/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'html-loader' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'html-loader' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'html-loader/lib/attributesParser' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'html-loader/index' { 31 | declare module.exports: $Exports<'html-loader'>; 32 | } 33 | declare module 'html-loader/index.js' { 34 | declare module.exports: $Exports<'html-loader'>; 35 | } 36 | declare module 'html-loader/lib/attributesParser.js' { 37 | declare module.exports: $Exports<'html-loader/lib/attributesParser'>; 38 | } 39 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | # We vendor our src directory, which is not needed for type-checking 3 | .*/styled-components/src/.* 4 | .*/node_modules/* 5 | 6 | [include] 7 | 8 | [libs] 9 | # This is were your own flow-typed libdefs go 10 | flow-typed 11 | 12 | # These declarations are super explicit... 13 | # We want to show what libdef files we need to make 14 | # flow understand all external dependencies 15 | # 16 | # If you have similar dependencies, you will need to 17 | # check which libdef files are covered by your flow-typed 18 | # directory! 19 | # 20 | # A more generic approach (please use with caution!): 21 | # node_modules/styled-components/flow-typed/*.js 22 | 23 | node_modules/styled-components/flow-typed/react-native.js 24 | node_modules/styled-components/flow-typed/glamor_vx.x.x.js 25 | node_modules/styled-components/flow-typed/lodash_v4.x.x.js 26 | node_modules/styled-components/flow-typed/react-native.js 27 | node_modules/styled-components/flow-typed/inline-style-prefixer_vx.x.x.js 28 | 29 | [options] 30 | module.system.node.resolve_dirname=node_modules 31 | module.system.node.resolve_dirname=src 32 | 33 | # Yeah, we use this to ignore errors... 34 | # Just add it, if you have a different suppress_comment notation 35 | suppress_comment=.*\\$FlowIssue 36 | -------------------------------------------------------------------------------- /src/sandbox/react-error-overlay/utils/getLinesAround.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | //@flow 11 | import { ScriptLine } from './stack-frame'; 12 | 13 | /** 14 | * 15 | * @param {number} line The line number to provide context around. 16 | * @param {number} count The number of lines you'd like for context. 17 | * @param {string[] | string} lines The source code. 18 | */ 19 | function getLinesAround( 20 | line: number, 21 | count: number, 22 | lines: string[] | string 23 | ): ScriptLine[] { 24 | if (typeof lines === 'string') { 25 | lines = lines.split('\n'); 26 | } 27 | const result = []; 28 | for ( 29 | let index = Math.max(0, line - 1 - count); 30 | index <= Math.min(lines.length - 1, line - 1 + count); 31 | ++index 32 | ) { 33 | result.push(new ScriptLine(index + 1, lines[index], index === line - 1)); 34 | } 35 | return result; 36 | } 37 | 38 | export { getLinesAround }; 39 | export default getLinesAround; 40 | --------------------------------------------------------------------------------