Labels Editor

src/components/app.tsx

@@ -10,6 +10,8 @@ import { JSS } from 'core/types';
 import { create, GenerateClassName } from 'jss';
 import * as React from 'react';
 import { JssProvider } from 'react-jss';
+import * as styles from '../styles.scss';
+import Grid from '@material-ui/core/Grid';
 
 export type Props = {};
 
@@ -30,16 +32,21 @@ export class App extends React.Component<Props> {
   public render(): JSX.Element {
     return (
       <JssProvider jss={this.jss} generateClassName={this.generateClassName}>
-        <React.Fragment>
+        <section className={styles.appContainer}>
           <AppTitle />
 
           <GithubRibbon />
 
           <RepoConfig />
+
+          <div className={styles.flexContainer}>
+            <Generator onCreateLabel={this.handleCreateLabel}/>
+            <Editor />
+          </div>
+
           <Themes />
-          <Generator onCreateLabel={this.handleCreateLabel}/>
-          <Editor />
-        </React.Fragment>
+
+        </section>
       </JssProvider>
     );
   }

src/components/editor/editor.scss

@@ -0,0 +1,11 @@
+@import "../../constants.scss";
+
+.colum {
+  border-right: 2px solid $headerBackgroundGrey;
+  padding: 10px;
+}
+
+.editorFlexContainer {
+  display: flex;
+  flex-flow: column;
+}

src/components/editor/editor.tsx

@@ -1,14 +1,88 @@
 import * as React from 'react';
 import Button from '@material-ui/core/Button';
-import * as styles from 'editor.scss';
+import * as styles from 'components/editor/editor.scss';
+import * as mainStyles from 'styles.scss';
 import Typography from '@material-ui/core/Typography';
+import { LabelItem } from 'components/labels/label-item';
+import { themesMap, themeList } from 'core/constants';
+import { FilteredLabelsMap, ThemesMap } from 'core/types';
 
-export const Editor = () => (
-  <div>
-    <Typography variant="headline" component="h3">Editor</Typography>
+export interface State {
+  // filteredLabelsMap: FilteredLabelsMap;
+  addedThemes: string[];
+};
 
-    <Button variant="contained" color="primary">
-      Create Labels
-    </Button>
-  </div>
-);
+export interface Props {
+
+}
+
+export class Editor extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      addedThemes: []
+      // filteredLabelsMap: {}
+    };
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div className={`${styles.editorFlexContainer} ${mainStyles.flex1}`}>
+
+        <Typography variant="headline" component="h3">Editor</Typography>
+
+        <div className={`${mainStyles.flexContainer} ${mainStyles.flex2}`}>
+          <div className={this.getColumsClassNames()}>
+            <LabelItem name="Labels Preview" color="#7bdcb5" />
+          </div>
+
+        </div>
+
+        <Button variant="contained" color="primary">
+          Create Labels
+        </Button>
+
+      </div>
+    );
+  }
+
+  private getColumsClassNames(): string {
+    return `${mainStyles.flex1} ${styles.colum}`;
+  }
+
+  private handleAddToggleTheme = (theme: string) => (): void => {
+    const { addedThemes } = this.state;
+    const currentIndex = addedThemes.indexOf(theme);
+    const newAddedThemes = [...addedThemes];
+
+    currentIndex === -1
+    ? newAddedThemes.push(theme)
+    : newAddedThemes.splice(currentIndex, 1);
+
+    this.setState({
+      addedThemes: newAddedThemes
+    })
+  }
+}
+
+// onClickAddToggle={this.handleAddToggleTheme}
+// addedThemes={addedThemes}
+
+// export interface Props {
+//   themes: string[];
+//   addedThemes: string[];
+//   onClickPreview: (theme: string) => () => void;
+//   onClickAddToggle: (theme: string) => () => void;
+// }
+
+// const isAdded = addedThemes.indexOf(theme) !== -1;
+
+// import Switch from '@material-ui/core/Switch';
+// import Tooltip from '@material-ui/core/Tooltip';
+{/* <Tooltip title={isAdded ? 'Remove Labels' : 'Add Labels'}>
+      <Switch
+        onChange={onClickAddToggle(theme)}
+        checked={isAdded}
+      />
+    </Tooltip> */}

src/components/generator/generator.scss

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

src/components/generator/generator.tsx

@@ -9,7 +9,7 @@ import { LabelItem } from 'components/labels/label-item';
 import { ColorPickerColor } from 'core/types';
 import * as React from 'react';
 import { TwitterPicker } from 'react-color';
-import { Label } from 'themes/index';
+import { Label } from 'core/types';
 
 export interface Props {
   onCreateLabel: (label: Label) => void;

src/components/labels/label-item.tsx

@@ -1,6 +1,6 @@
 import * as styles from 'components/labels/labels.scss';
 import * as React from 'react';
-import { Label } from 'themes/index';
+import { Label } from 'core/types';
 import { getTextColorFromBackground } from 'utils/utils';
 import Typography from '@material-ui/core/Typography';
 import { emojify } from 'node-emoji';

src/components/themes/theme-list.tsx

@@ -3,17 +3,14 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
-import Switch from '@material-ui/core/Switch';
 import Tooltip from '@material-ui/core/Tooltip';
 import VisibilityIcon from '@material-ui/icons/Visibility';
 import * as React from 'react';
 import { capitalize } from '../../utils/utils';
 
 export interface Props {
   themes: string[];
-  checkedThemes: string[];
   onClickPreview: (theme: string) => () => void;
-  onClickAddToggle: (theme: string) => () => void;
 }
 
 export interface State {
@@ -26,13 +23,12 @@ export class ThemeList extends React.PureComponent<Props, State> {
   }
 
   public render(): JSX.Element {
-    const { themes, checkedThemes, onClickPreview, onClickAddToggle } = this.props;
+    const { themes, onClickPreview } = this.props;
 
     return (
       <List>
         {
           themes.map((theme) => {
-            const isAdded = checkedThemes.indexOf(theme) !== -1;
             const capitalizedTheme = capitalize(theme);
 
             return (
@@ -47,12 +43,6 @@ export class ThemeList extends React.PureComponent<Props, State> {
                       <VisibilityIcon />
                     </IconButton>
                   </Tooltip>
-                  <Tooltip title={isAdded ? 'Remove Labels' : 'Add Labels'}>
-                    <Switch
-                      onChange={onClickAddToggle(theme)}
-                      checked={isAdded}
-                    />
-                  </Tooltip>
                 </ListItemSecondaryAction>
               </ListItem>
             )

src/components/themes/theme-preview.tsx

@@ -1,49 +1,60 @@
 import Paper from '@material-ui/core/Paper';
-import { withStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import { LabelItem } from 'components/labels/label-item';
+import * as styles from 'components/themes/themes.scss';
+import { ThemesMap } from 'core/types';
 import * as React from 'react';
-import { ThemesMap } from 'themes/index';
 import { capitalize } from 'utils/utils';
 import * as uuid from 'uuid/v4';
 
 export interface Props {
-  theme: string;
+  themes: string[];
   labels: ThemesMap;
 }
 
-export const ThemePreview = ({ theme, labels }: Props): JSX.Element => {
-  const themeLabels = labels[theme];
-
+export const ThemePreview = ({ themes, labels }: Props): JSX.Element => {
   return (
-    <Paper>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>
-              <span className="">{`${capitalize(theme)} Preview `}</span>
-              <span>{`(${themeLabels.length} labels)`}</span>
-            </TableCell>
-            <TableCell></TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {themeLabels.map((label) => {
-            return (
-              <TableRow key={uuid()}>
-                <TableCell component="th" scope="row">
-                  <LabelItem {...label} />
-                </TableCell>
-                <TableCell>{label.description}</TableCell>
-              </TableRow>
-            );
-          })}
-        </TableBody>
-      </Table>
-    </Paper>
+    <div className={styles.themeContainer}>
+      {
+        themes.map((theme: string) => {
+          const themeLabels = labels[theme];
+          const capitalizedTheme = capitalize(theme);
+
+          return (
+            <Paper key={theme}>
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    <TableCell>
+                      <h3>
+                        {capitalizedTheme}
+                        <span>{` (${themeLabels.length} labels)`}</span>
+                      </h3>
+                    </TableCell>
+                    <TableCell />
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {themeLabels.map((label) => {
+                    return (
+                      <TableRow key={uuid()}>
+                        <TableCell component="th" scope="row">
+                          <LabelItem {...label} />
+                        </TableCell>
+                        <TableCell>{label.description}</TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </Paper>
+          );
+        })
+      }
+    </div>
   );
 };

src/components/themes/themes.scss

@@ -0,0 +1,15 @@
+@import "../../constants.scss";
+
+.themeListContainer {
+  width: $leftComponentsWith;
+}
+
+.themeContainer {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+}
+
+.tableHeader {
+  background-color: $headerBackgroundGrey;
+}