Label Generator

package.json

@@ -38,12 +38,17 @@
   "dependencies": {
     "@material-ui/core": "^1.2.1",
     "@material-ui/icons": "^1.1.0",
+    "node-emoji": "^1.8.1",
     "react": "^16.4.1",
+    "react-color": "^2.14.1",
     "react-dom": "^16.4.1",
+    "react-jss": "^8.5.1",
     "uuid": "^3.2.1"
   },
   "devDependencies": {
-    "@types/react": "^16.3.17",
+    "@types/node-emoji": "^1.8.0",
+    "@types/react": "^16.3.18",
+    "@types/react-color": "^2.13.5",
     "@types/react-dom": "^16.0.6",
     "@types/uuid": "^3.4.3",
     "clean-webpack-plugin": "^0.1.19",
@@ -58,7 +63,7 @@
     "typescript": "^2.9.2",
     "url-loader": "^1.0.1",
     "webpack": "^4.12.0",
-    "webpack-cli": "^3.0.6",
+    "webpack-cli": "^3.0.8",
     "webpack-dev-server": "^3.1.4",
     "webpack-merge": "^4.1.3"
   }

src/@types/declaration.d.ts

@@ -10,3 +10,5 @@ declare module '*.scss' {
 
   export = content;
 }
+
+declare module 'react-jss';

src/components/app-title.tsx

@@ -1,13 +1,13 @@
 import Typography from '@material-ui/core/Typography';
+import { LabelItem } from 'components/labels/label-item';
 import * as React from 'react';
-import { LabelItem } from './labels/label';
 
 export const AppTitle = () => (
   <React.Fragment>
     <Typography variant="headline" component="h2">
-      <LabelItem isTitle={true} name="Labels" color="#98EBED" />
+      <LabelItem isTitle={true} name=":rocket: Labels" color="#7bdcb5" />
       <span>-</span>
-      <LabelItem isTitle={true} name="Generator" color="#7FFFD4" />
+      <LabelItem isTitle={true} name="Generator :dancer:" color="#f78da7" />
     </Typography>
   </React.Fragment>
 );

src/components/app.tsx

@@ -1,21 +1,48 @@
+import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
+import { AppTitle } from 'components/app-title';
+import { Editor } from 'components/editor/editor';
+import { Generator } from 'components/generator/generator';
+import { GithubRibbon } from 'components/github-ribbon/github-ribbon';
+import { RepoConfig } from 'components/repo-config/repo-config';
+import { Themes } from 'components/themes/themes';
+import { setupStylesInjectionPoint } from 'core/setup-jss';
+import { JSS } from 'core/types';
+import { create, GenerateClassName } from 'jss';
 import * as React from 'react';
-import { GithubRibbon } from './github-ribbon/github-ribbon';
-import { RepoConfig } from './repo-config/repo-config';
-import { Themes } from './themes/themes';
-import { Generator } from './generator/generator';
-import { Editor } from './editor/editor';
-import { AppTitle } from './app-title';
-
-export const App = () => (
-  <React.Fragment>
-    <AppTitle />
-
-    <GithubRibbon />
-
-    <RepoConfig />
-    <Themes />
-    <Generator />
-    <Editor />
-
-  </React.Fragment>
-);
+import { JssProvider } from 'react-jss';
+
+export type Props = {};
+
+export class App extends React.Component<Props> {
+
+  private generateClassName: GenerateClassName;
+  private jss: JSS;
+  private JSS_LABEL: string = 'mui-insertion-point';
+
+  constructor(props: Props) {
+    super(props);
+
+    this.generateClassName = createGenerateClassName();
+    this.jss = create(jssPreset());
+    setupStylesInjectionPoint(this.jss, this.JSS_LABEL);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <JssProvider jss={this.jss} generateClassName={this.generateClassName}>
+        <React.Fragment>
+          <AppTitle />
+
+          <GithubRibbon />
+
+          <RepoConfig />
+          <Themes />
+          <Generator onCreateLabel={this.handleCreateLabel}/>
+          <Editor />
+        </React.Fragment>
+      </JssProvider>
+    );
+  }
+
+  private handleCreateLabel = () => {};
+}

src/components/generator/generator.scss

@@ -0,0 +1,24 @@
+.textField {
+  margin: 10px;
+  width: 90%,
+}
+
+.labelColor {
+  color: rgba(0, 0, 0, 0.54);
+  padding: 0;
+  font-size: 1rem;
+  margin: 15px 10px;
+}
+
+.card {
+  max-width: 400px,
+}
+
+.cardHeader {
+  align-items: center;
+  background-color: #f3f3f3;
+  display: flex;
+  min-height: 70px;
+  justify-content: center;
+  width: 100%;
+}