Hide light theme behind feature flag (codesandbox#3016)

* get split pane to work in embed

* add a cute little toggle

* snap to edges

* get default size from props

* handle toggle position for different vertical views

* get full height back

* add transition for resize toggle

* breaking things to test on mobile

* bring back the toggle

* header buttons work again

* hide resizer on mobile

* only offset height if header is visible

* handle 50% and pane container

* add transition to snap

* add sidebar toggle to header

* handle screen resize

* vertical panes only

* remove header for mobile

* refactor and simplify code

* Move the heart button to preview

* refactor actions + add refresh

* add button to open in new window

* get the right icons

* fade transition

* get animation right for navigation actions

* add border on all sides for preview

* Add types for new props

* i dont know what to tell you fam

* increase tap width for resizer

* increase snap radius for the right side

* add threshold for showing navigation icons on smaller screens

* (has bugs) add click functionality for resizer

* rename width to newSize

* add opacity for border

* update icons for navigation

* move global actions inside splitpane

* position open sandbox lower for editor

* fold when like overlaps + isDragging transition

* first stab at intro animation

* animation intensifies

* i think thats good

* introduce on load for mobile

* fix the animation timeline

* fix opacity for animation

* variables good good

* use window.outerWidth because that doesnt lie

* dont wait for mouseover on mobile

* oh noes, outerWidth is also a lie

* solve preview size problems

* rename embed theme to dark

* start new theme

* move theme provider to App

* introduce getTheme

* add harcoded variant

* read theme from url

* refactor sidebar elements to system

* sidebar info on theme

* systemetise file tree

* panel + content container

* cheeseburget

* fix the height of tabs and navigator

* remove icons from tabs in embed

* theming wip

* style preview components

* fix embed background

* decide top offset for preview based on navigation flag

* add theme drop down to share sheet

* more night own less custom

* punctuations

* add poor man's feature flag

Author: siddharthkp

README.md

@@ -6,7 +6,13 @@
 
  
 
-[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/codesandbox) [![All Contributors](https://img.shields.io/badge/all_contributors-153-orange.svg?style=flat-square)](#contributors-) [![CircleCI](https://circleci.com/gh/codesandbox/codesandbox-client.svg?style=svg)](https://circleci.com/gh/codesandbox/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
+[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/codesandbox)
+[![All Contributors](https://img.shields.io/badge/all_contributors-153-orange.svg?style=flat-square)](#contributors-)
+[![CircleCI](https://circleci.com/gh/codesandbox/codesandbox-client.svg?style=svg)](https://circleci.com/gh/codesandbox/codesandbox-client)
+[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+[![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
+[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
 
 [![Backers on Open Collective](https://opencollective.com/codesandbox/backers/badge.svg)](#backers)
 [![Sponsors on Open Collective](https://opencollective.com/codesandbox/sponsors/badge.svg)](#sponsors)
@@ -252,6 +258,7 @@ Thanks goes to these wonderful people
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 ## Backers

packages/app/scripts/sentry-create-release.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 const childProcess = require('child_process');
 const VERSION = require('@codesandbox/common/lib/version').default;
 

packages/app/src/app/pages/common/Modals/ShareModal/index.js

@@ -6,6 +6,7 @@ import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import track from '@codesandbox/common/lib/utils/analytics';
 import { Button } from '@codesandbox/common/lib/components/Button';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
+import { EMBED_LIGHT_THEME } from '@codesandbox/common/lib/utils/feature-flags';
 import Title from './Title';
 
 import {
@@ -163,13 +164,15 @@ class ShareView extends React.Component {
                   value={view}
                   setValue={this.setView}
                 />
-                <PaddedPreference
-                  title="Theme"
-                  type="dropdown"
-                  options={THEME_OPTIONS}
-                  value={theme}
-                  setValue={this.setTheme}
-                />
+                {EMBED_LIGHT_THEME && (
+                  <PaddedPreference
+                    title="Theme"
+                    type="dropdown"
+                    options={THEME_OPTIONS}
+                    value={theme}
+                    setValue={this.setTheme}
+                  />
+                )}
                 <PaddedPreference
                   title="Auto resize"
                   type="boolean"

packages/common/src/utils/feature-flags.js

@@ -0,0 +1,9 @@
+/**
+  poor man's feature flags
+
+  you can export a constant which enables/disables a feature
+
+  it's a JS file, so you can add whatever logic you want as long as it's static
+*/
+
+export const EMBED_LIGHT_THEME = true;

standalone-packages/codesandbox-browserfs/src/backend/CodeSandboxEditorFS.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import {
   SynchronousFileSystem,
   FileSystem,