Add mdx-deck template (codesandbox#1660)

SaraVieira · web-flow · commit 3b32081e689f · 2019-03-29T15:32:41.000Z
**What kind of change does this PR introduce?** Adds MDX Deck as a server template Here is an example of it working with node: https://codesandbox.io/s/jvo0z15rx9 Importer PR: codesandbox/codesandbox-importers#31
diff --git a/packages/app/src/app/components/CodeEditor/types.ts b/packages/app/src/app/components/CodeEditor/types.ts
@@ -1,4 +1,4 @@
-// @flow
+
 
 import {
   Module,
diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestOverview/elements.ts b/packages/app/src/app/components/Preview/DevTools/Tests/TestOverview/elements.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import styled from 'styled-components';
 
 export const Container = styled.div`
diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestProgressBar/elements.ts b/packages/app/src/app/components/Preview/DevTools/Tests/TestProgressBar/elements.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import styled from 'styled-components';
 
 export const ProgressBar = styled.div`
diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestSummary/elements.ts b/packages/app/src/app/components/Preview/DevTools/Tests/TestSummary/elements.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import styled from 'styled-components';
 
 export const Container = styled.div`
diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/elements.ts b/packages/app/src/app/components/Preview/DevTools/Tests/elements.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import styled, { css } from 'styled-components';
 
 import Check from 'react-icons/lib/go/check';
diff --git a/packages/app/src/sandbox/eval/entities/module.ts b/packages/app/src/sandbox/eval/entities/module.ts
@@ -1,4 +1,4 @@
-// @flow
+
 
 export type Module = {
   path: string,
diff --git a/packages/app/src/sandbox/eval/manager.ts b/packages/app/src/sandbox/eval/manager.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { flattenDeep, uniq, values } from 'lodash-es';
 import { Protocol } from 'codesandbox-api';
 import resolve from 'browser-resolve';
diff --git a/packages/app/src/sandbox/eval/npm/fetch-npm-module.ts b/packages/app/src/sandbox/eval/npm/fetch-npm-module.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import * as pathUtils from '@codesandbox/common/lib/utils/path';
 import resolve from 'browser-resolve';
 import DependencyNotFoundError from 'sandbox-hooks/errors/dependency-not-found-error';
diff --git a/packages/app/src/sandbox/eval/presets/index.ts b/packages/app/src/sandbox/eval/presets/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { orderBy } from 'lodash-es';
 import querystring from 'querystring';
 import { Module } from '../entities/module';
diff --git a/packages/app/src/sandbox/eval/transpiled-module.ts b/packages/app/src/sandbox/eval/transpiled-module.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { flattenDeep } from 'lodash-es';
 
 import { actions, dispatch } from 'codesandbox-api';
diff --git a/packages/common/src/components/Preview/types.ts b/packages/common/src/components/Preview/types.ts
@@ -1,4 +1,4 @@
-// @flow
+
 
 import { Module, Sandbox, ModuleError, ModuleCorrection } from '../../types';
 
diff --git a/packages/common/src/components/logos/Styleguidist.tsx b/packages/common/src/components/logos/Styleguidist.tsx
@@ -139,6 +139,7 @@ export default ({ width = 32, height = 32, className }) => (
           <path
             stroke="#043849"
             strokeWidth="12"
+            fill="#25d8fc"
             d="M112.452 183.148c26.036-.25 45.471-16.624 45.47-41.223V76.324c0-45.23-36.67-81.852-81.995-81.852-45.206 0-81.852 36.646-81.852 81.852v65.601c0 24.596 19.43 40.97 45.46 41.222l.49.098a400.748 400.748 0 0 0 12.476 2.25c2.723.446 5.366.847 7.89 1.191 6.167.842 11.337 1.312 15.285 1.312 4.007 0 9.263-.47 15.534-1.31a307.85 307.85 0 0 0 8.027-1.19 414.587 414.587 0 0 0 13.215-2.35z"
           />
         </g>
diff --git a/packages/common/src/components/logos/mdx-deck.tsx b/packages/common/src/components/logos/mdx-deck.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+export default ({ width = 32, height = 32, className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 138 57"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g fill="none" fillRule="evenodd">
+      <rect
+        stroke="#EAEAEA"
+        strokeWidth="1.5"
+        fill="#FFF"
+        x=".75"
+        y=".75"
+        width="136.5"
+        height="55.5"
+        rx="4.5"
+      />
+      <g stroke="#000" strokeWidth={6}>
+        <path d="M70.5 36V13.836" strokeLinecap="square" />
+        <path d="M57 27.24l13.61 13.61 13.416-13.414" />
+      </g>
+      <path
+        stroke="#000"
+        strokeWidth={6}
+        d="M16.45 43.928V18.964L30.3 32.815l13.932-13.931v24.865"
+      />
+      <path
+        d="M122.439 41.268L93.17 12m.391 29.268L122.83 12"
+        stroke="#F9AC00"
+        strokeWidth={6}
+      />
+    </g>
+  </svg>
+);
diff --git a/packages/common/src/sandbox/modules.ts b/packages/common/src/sandbox/modules.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { Module, Directory } from '../types';
 import memoize from 'lodash/memoize';
 
diff --git a/packages/common/src/templates/angular.ts b/packages/common/src/templates/angular.ts
@@ -1,4 +1,4 @@
-// @flow
+
 
 import { absolute, join } from '../utils/path';
 
diff --git a/packages/common/src/templates/apollo-server.ts b/packages/common/src/templates/apollo-server.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Template from './template';
 import { decorateSelector } from '../theme';
 
diff --git a/packages/common/src/templates/babel.ts b/packages/common/src/templates/babel.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Template from './template';
 import { decorateSelector } from '../theme';
 import configurations from './configuration';
diff --git a/packages/common/src/templates/configuration/angular-cli/index.ts b/packages/common/src/templates/configuration/angular-cli/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { ConfigurationFile } from '../types';
 
 const config: ConfigurationFile = {
diff --git a/packages/common/src/templates/configuration/angular-json/index.ts b/packages/common/src/templates/configuration/angular-json/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { ConfigurationFile } from '../types';
 
 const config: ConfigurationFile = {
diff --git a/packages/common/src/templates/configuration/babel-transpiler/index.ts b/packages/common/src/templates/configuration/babel-transpiler/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { ConfigurationFile } from '../types';
 
 const config: ConfigurationFile = {
diff --git a/packages/common/src/templates/configuration/babelrc/index.ts b/packages/common/src/templates/configuration/babelrc/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { isBabel7 } from '../../../utils/is-babel-7';
 
 import { ConfigurationFile } from '../types';
diff --git a/packages/common/src/templates/configuration/custom-codesandbox/index.ts b/packages/common/src/templates/configuration/custom-codesandbox/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { ConfigurationFile } from '../types';
 
 const config: ConfigurationFile = {
diff --git a/packages/common/src/templates/configuration/eslintrc/index.ts b/packages/common/src/templates/configuration/eslintrc/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { ConfigurationFile } from '../types';
 
 const config: ConfigurationFile = {
diff --git a/packages/common/src/templates/configuration/index.ts b/packages/common/src/templates/configuration/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import packageJSON from './package-json';
 import prettierRC from './prettierRC';
 import sandboxConfig from './sandbox';
diff --git a/packages/common/src/templates/configuration/now/index.ts b/packages/common/src/templates/configuration/now/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { ConfigurationFile } from '../types';
 
 const config: ConfigurationFile = {
diff --git a/packages/common/src/templates/configuration/package-json/index.ts b/packages/common/src/templates/configuration/package-json/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 
 import { Sandbox } from '../../../types';
 import slugify from '../../../utils/slugify';
diff --git a/packages/common/src/templates/configuration/parse.ts b/packages/common/src/templates/configuration/parse.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { ConfigurationFile } from '../../templates/configuration/types';
 
 import { parse } from 'jsonlint';
diff --git a/packages/common/src/templates/configuration/prettierRC/index.ts b/packages/common/src/templates/configuration/prettierRC/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import DEFAULT_PRETTIER_CONFIG from '../../../prettify-default-config';
 
 import { ConfigurationFile } from '../types';
diff --git a/packages/common/src/templates/configuration/sandbox/index.ts b/packages/common/src/templates/configuration/sandbox/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { ConfigurationFile } from '../types';
 
 const config: ConfigurationFile = {
diff --git a/packages/common/src/templates/configuration/tsconfig/index.ts b/packages/common/src/templates/configuration/tsconfig/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { ConfigurationFile } from '../types';
 
 const JSX_PRAGMA = {
diff --git a/packages/common/src/templates/configuration/types.ts b/packages/common/src/templates/configuration/types.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { Sandbox } from '../../types';
 
 export type ConfigurationFile = {
diff --git a/packages/common/src/templates/custom.ts b/packages/common/src/templates/custom.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Template from './template';
 import { decorateSelector } from '../theme';
 import configurations from './configuration';
diff --git a/packages/common/src/templates/cxjs.ts b/packages/common/src/templates/cxjs.ts
@@ -1,4 +1,4 @@
-// @flow
+
 
 import Template from './template';
 import { decorateSelector } from '../theme';
diff --git a/packages/common/src/templates/dojo.ts b/packages/common/src/templates/dojo.ts
@@ -1,4 +1,4 @@
-// @flow
+
 
 import Template, { ParsedConfigurationFiles } from './template';
 import { decorateSelector } from '../theme';
diff --git a/packages/common/src/templates/ember.ts b/packages/common/src/templates/ember.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Template from './template';
 import { decorateSelector } from '../theme';
 
diff --git a/packages/common/src/templates/gatsby.ts b/packages/common/src/templates/gatsby.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Template from './template';
 import { decorateSelector } from '../theme';
 import configurations from './configuration';
diff --git a/packages/common/src/templates/icons.ts b/packages/common/src/templates/icons.ts
@@ -1,4 +1,4 @@
-// @flow
+
 
 import React from '../components/logos/React';
 import Angular from '../components/logos/Angular';
@@ -19,6 +19,7 @@ import Apollo from '../components/logos/Apollo';
 import Nest from '../components/logos/Nest';
 import Static from '../components/logos/Static';
 import Styleguidist from '../components/logos/Styleguidist';
+import MDXDeck from '../components/logos/mdx-deck';
 
 import {
   react,
@@ -41,6 +42,7 @@ import {
   sapper,
   staticTemplate,
   styleguidist,
+  mdxDeck,
 } from './';
 
 import { TemplateType } from './';
@@ -94,6 +96,8 @@ export default function getIcon(theme: TemplateType): ReturnedIcon {
       return Static;
     case styleguidist.name:
       return Styleguidist;
+    case mdxDeck.name:
+      return MDXDeck;
     default:
       return React;
   }
diff --git a/packages/common/src/templates/index.ts b/packages/common/src/templates/index.ts
@@ -1,4 +1,3 @@
-// @flow
 import angular from './angular';
 import babel from './babel';
 import parcel from './parcel';
@@ -21,6 +20,7 @@ import sapper from './sapper';
 import nest from './nest';
 import staticTemplate from './static';
 import styleguidist from './styleguidist';
+import mdxDeck from './mdx-deck';
 
 export {
   angular,
@@ -45,6 +45,7 @@ export {
   ember,
   staticTemplate,
   styleguidist,
+  mdxDeck,
 };
 
 export type TemplateType =
@@ -65,7 +66,8 @@ export type TemplateType =
   | 'sapper'
   | 'nest'
   | 'static'
-  | 'styleguidist';
+  | 'styleguidist'
+  | 'mdx-deck';
 
 export default function getDefinition(theme: TemplateType) {
   switch (theme) {
@@ -111,6 +113,8 @@ export default function getDefinition(theme: TemplateType) {
       return staticTemplate;
     case styleguidist.name:
       return styleguidist;
+    case mdxDeck.name:
+      return mdxDeck;
     case ember.name:
       return ember;
     default:
diff --git a/packages/common/src/templates/mdx-deck.ts b/packages/common/src/templates/mdx-deck.ts
@@ -0,0 +1,16 @@
+import Template from './template';
+import { decorateSelector } from '../theme';
+
+export default new Template(
+  'mdx-deck',
+  'MDX Deck',
+  'https://github.com/jxnblk/mdx-deck',
+  'github/jxnblk/mdx-deck/tree/master/templates/basic',
+  decorateSelector(() => '#FAD961'),
+  {
+    distDir: 'dist',
+    isServer: true,
+    mainFile: ['deck.mdx'],
+    showOnHomePage: true,
+  }
+);
diff --git a/packages/common/src/templates/nest.ts b/packages/common/src/templates/nest.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Template from './template';
 import { decorateSelector } from '../theme';
 import configurations from './configuration';
diff --git a/packages/common/src/templates/next.ts b/packages/common/src/templates/next.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Template from './template';
 import { decorateSelector } from '../theme';
 import configurations from './configuration';
diff --git a/packages/common/src/templates/node.ts b/packages/common/src/templates/node.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Template from './template';
 import { decorateSelector } from '../theme';
 
diff --git a/packages/common/src/templates/nuxt.ts b/packages/common/src/templates/nuxt.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Template from './template';
 import { decorateSelector } from '../theme';
 import configurations from './configuration';
diff --git a/packages/common/src/templates/parcel.ts b/packages/common/src/templates/parcel.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { absolute } from '../utils/path';
 
 import Template, { ParsedConfigurationFiles } from './template';
diff --git a/packages/common/src/templates/preact.ts b/packages/common/src/templates/preact.ts
@@ -1,4 +1,4 @@
-// @flow
+
 
 import Template from './template';
 import { decorateSelector } from '../theme';
diff --git a/packages/common/src/templates/react-ts.ts b/packages/common/src/templates/react-ts.ts
@@ -1,4 +1,4 @@
-// @flow
+
 
 import configurations from './configuration';
 
diff --git a/packages/common/src/templates/react.ts b/packages/common/src/templates/react.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Template from './template';
 import { decorateSelector } from '../theme';
 
diff --git a/packages/common/src/templates/reason.ts b/packages/common/src/templates/reason.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Template from './template';
 import { decorateSelector } from '../theme';
 
diff --git a/packages/common/src/templates/sapper.ts b/packages/common/src/templates/sapper.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import configurations from './configuration';
 
 import Template from './template';
diff --git a/packages/common/src/templates/static.ts b/packages/common/src/templates/static.ts
diff --git a/packages/common/src/templates/styleguidist.ts b/packages/common/src/templates/styleguidist.ts
diff --git a/packages/common/src/templates/svelte.ts b/packages/common/src/templates/svelte.ts
diff --git a/packages/common/src/templates/template.ts b/packages/common/src/templates/template.ts
diff --git a/packages/common/src/templates/vue.ts b/packages/common/src/templates/vue.ts
diff --git a/packages/common/src/test/mocks.ts b/packages/common/src/test/mocks.ts
diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts
diff --git a/packages/common/src/url.ts b/packages/common/src/url.ts
diff --git a/packages/common/src/utils/hash.ts b/packages/common/src/utils/hash.ts
diff --git a/packages/common/src/utils/path.ts b/packages/common/src/utils/path.ts
diff --git a/packages/common/src/utils/url-generator.ts b/packages/common/src/utils/url-generator.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// @flow`
	`1`	`+`
`2`	`2`
`3`	`3`	`import {`
`4`	`4`	`Module,`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// @flow`
	`1`	`+`
`2`	`2`	`import styled from 'styled-components';`
`3`	`3`
`4`	`4`	export const Container = styled.div`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// @flow`
	`1`	`+`
`2`	`2`	`import styled, { css } from 'styled-components';`
`3`	`3`
`4`	`4`	`import Check from 'react-icons/lib/go/check';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// @flow`
	`1`	`+`
`2`	`2`
`3`	`3`	`export type Module = {`
`4`	`4`	`path: string,`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// @flow`
	`1`	`+`
`2`	`2`	`import { flattenDeep, uniq, values } from 'lodash-es';`
`3`	`3`	`import { Protocol } from 'codesandbox-api';`
`4`	`4`	`import resolve from 'browser-resolve';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// @flow`
	`1`	`+`
`2`	`2`	`import * as pathUtils from '@codesandbox/common/lib/utils/path';`
`3`	`3`	`import resolve from 'browser-resolve';`
`4`	`4`	`import DependencyNotFoundError from 'sandbox-hooks/errors/dependency-not-found-error';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// @flow`
	`1`	`+`
`2`	`2`	`import { orderBy } from 'lodash-es';`
`3`	`3`	`import querystring from 'querystring';`
`4`	`4`	`import { Module } from '../entities/module';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// @flow`
	`1`	`+`
`2`	`2`	`import { flattenDeep } from 'lodash-es';`
`3`	`3`
`4`	`4`	`import { actions, dispatch } from 'codesandbox-api';`