feat(Demo): Add theme contribution modal

package.json

@@ -56,6 +56,7 @@
   "dependencies": {
     "@simonwep/pickr": "^1.5.1",
     "@stencila/components": "^0.9.0",
+    "project-name-generator": "^2.1.7",
     "react": "^16.13.0",
     "react-dom": "^16.13.0"
   },

src/demo/editor/contributeModal.tsx

@@ -0,0 +1,93 @@
+// @ts-ignore
+import generate from 'project-name-generator'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { submitPR, ThemeObject } from '../utils'
+
+const randomName = (): string => generate().dashed
+
+interface Props {
+  baseTheme: ThemeObject
+  baseThemeName: string
+  themeOverrides: ThemeObject
+}
+
+interface State {
+  projectName: string
+}
+
+export class ContributeForm extends React.Component<Props, State> {
+  private el: HTMLElement | null
+
+  constructor(props: Props) {
+    super(props)
+
+    this.el = document.getElementById('modalTarget')
+
+    this.state = {
+      projectName: randomName()
+    }
+  }
+
+  setProjectName = (projectName: string): void => {
+    this.setState({ projectName })
+    this.el = document.getElementById('modal')
+  }
+
+  onNameChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    e.preventDefault()
+    this.setProjectName(e.currentTarget.value)
+  }
+
+  onRandomizeName = (e: React.MouseEvent<HTMLButtonElement>): void => {
+    e.preventDefault()
+    this.setProjectName(randomName())
+  }
+
+  onSubmitTheme = (e: React.MouseEvent<HTMLButtonElement>): void => {
+    e.preventDefault()
+
+    submitPR(
+      this.state.projectName,
+      '',
+      this.props.themeOverrides,
+      this.props.baseThemeName,
+      this.props.baseTheme
+    )
+  }
+
+  render(): React.ReactPortal | null {
+    return this.el === null
+      ? null
+      : ReactDOM.createPortal(
+          <div id="contributeModal">
+            <div className="modalContents">
+              <p>
+                Name your theme, and submit as a GitHub pull request to share
+                your theme with others.
+              </p>
+
+              <form>
+                <label>Theme Name</label>
+
+                <div className="labelWrapper">
+                  <input
+                    value={this.state.projectName}
+                    onChange={this.onNameChange}
+                  />
+
+                  <button type="button" onClick={this.onRandomizeName}>
+                    Randomize
+                  </button>
+                </div>
+
+                <button onClick={this.onSubmitTheme} type="submit">
+                  Open Pull Request
+                </button>
+              </form>
+            </div>
+          </div>,
+          this.el
+        )
+  }
+}

src/demo/editor/header.tsx

@@ -7,11 +7,11 @@ import { HeaderBase } from './headerBase'
 
 interface Props {
   /* onExampleChange: (e: React.ChangeEvent<HTMLSelectElement>) => string */
-  examples: string[]
+  exampleContent: string[]
   /* themes: string[] */
 }
 
-const HeaderComponent = ({ examples }: Props): JSX.Element => {
+const HeaderComponent = ({ exampleContent }: Props): JSX.Element => {
   const [example, updateExample] = React.useState<string>(getExample())
 
   return (
@@ -32,8 +32,8 @@ const HeaderComponent = ({ examples }: Props): JSX.Element => {
               setExample(e.currentTarget.value)
             }}
           >
-            {examples.map(example => (
-              <option key={example}>{example}</option>
+            {exampleContent.map(ex => (
+              <option key={ex}>{ex}</option>
             ))}
           </select>
         </label>
@@ -62,7 +62,7 @@ export class Header extends React.Component {
     return this.el === null
       ? null
       : ReactDOM.createPortal(
-          <HeaderComponent examples={Object.keys(examples)} />,
+          <HeaderComponent exampleContent={Object.keys(examples)} />,
           this.el
         )
   }

src/demo/editor/index.tsx

@@ -3,9 +3,15 @@ import { getTheme } from '../utils/theme'
 import { Header } from './header'
 import { ThemeSwitcher } from './themeSwitcher'
 import { VariableKnobs } from './variables/form'
+import { ContributeForm } from './contributeModal'
+import { ThemeObject } from '../utils'
 
 export const ThemeEditor = (): JSX.Element => {
   const [activeTheme, setTheme] = useState<string>(getTheme())
+  const [contributeModalIsOpen, toggleContributeModal] = useState<boolean>(true)
+  const [themeOverrides, setThemeOverrides] = useState<
+    Record<string, ThemeObject>
+  >({})
 
   return (
     <>
@@ -25,6 +31,14 @@ export const ThemeEditor = (): JSX.Element => {
       <h3>Customize</h3>
 
       <VariableKnobs theme={activeTheme} />
+
+      {contributeModalIsOpen && (
+        <ContributeForm
+          themeOverrides={themeOverrides[activeTheme] ?? {}}
+          baseTheme={themeOverrides[activeTheme] ?? {}}
+          baseThemeName={activeTheme}
+        />
+      )}
     </>
   )
 }

src/demo/editor/variables/form.tsx

@@ -91,19 +91,22 @@ export const VariableKnobs = ({ theme }: Props): JSX.Element => {
 
       {userVars[theme] !== undefined &&
         Object.keys(userVars[theme]).length > 0 && (
-          <a
-            className="button"
-            href="#"
-            id="contribute"
-            target="_blank"
-            title="Submit your changes as a new theme to Thema"
-            onClick={e => {
-              e.preventDefault()
-              submitPR('', '', userVars[theme], theme, themeVars[theme])
-            }}
-          >
-            Contribute changes
-          </a>
+          <>
+            <a
+              className="button"
+              href="#"
+              id="contribute"
+              target="_blank"
+              title="Submit your changes as a new theme to Thema"
+              onClick={e => {
+                e.preventDefault()
+                submitPR('', '', userVars[theme], theme, themeVars[theme])
+              }}
+            >
+              Contribute changes
+            </a>
+            <div id="contributeCover"></div>
+          </>
         )}
     </div>
   )