Update libraries

Add Info panel

client/Lang.ts

@@ -6,6 +6,8 @@ export const Lang = {
     ABOUT_QUESTIONS_STARTWITHMD: 'about.questions.startWithMD',
     ABOUT_QUESTIONS_STARTWITHREDUX: 'about.questions.startWithRedux',
     ABOUT_WITHTYPESCRIPT: 'about.withTypescript',
+    INFO_TITLE: 'info.title',
+    INFO_DESCRIPTION: 'info.description',
     TECH_REACT: 'tech.react',
     TECH_MD: 'tech.md',
     TECH_REDUX: 'tech.redux',

client/modules/common/components/icon/index.ts

@@ -0,0 +1 @@
+export * from './LightbublFullIcon';

client/modules/common/components/index.ts

@@ -0,0 +1,3 @@
+export * from './icon';
+export * from './menu';
+export * from './page';

client/modules/common/components/menu/index.ts

@@ -0,0 +1 @@
+export * from './LeftMenu';

client/components/Layout.tsx → client/modules/common/components/page/Layout.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {InjectedIntlProps, injectIntl} from 'react-intl';
-import {AppFrame, Content, LeftMenu, TopBar} from './';
+import {AppFrame, Content, LeftMenu, TopBar} from '../';
 
 interface OwnProps {}
 

client/components/TopBar.tsx → client/modules/common/components/page/TopBar.tsx

@@ -4,9 +4,9 @@ import Link from 'next/link';
 import * as React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {ThemeContext} from '../contexts';
-import {Lang} from '../Lang';
-import {LightbublFullIcon} from './LightbublFullIcon';
+import {ThemeContext} from '../../../../contexts';
+import {Lang} from '../../../../Lang';
+import {LightbublFullIcon} from '../icon';
 
 interface Props {
     readonly locale: string;

client/components/index.ts → client/modules/common/components/page/index.ts

@@ -1,6 +1,4 @@
 export * from './AppFrame';
 export * from './Content';
 export * from './Layout';
-export * from './LeftMenu';
-export * from './LightbublFullIcon';
 export * from './TopBar';

client/modules/common/index.ts

@@ -0,0 +1 @@
+export * from './components';

client/modules/homePage/components/AboutPaper.tsx

@@ -1,4 +1,4 @@
-import {Avatar, FormHelperText, List, ListItem, ListItemText, Paper, Typography, withStyles} from '@material-ui/core';
+import {FormHelperText, List, ListItem, ListItemText, Paper, Typography, withStyles} from '@material-ui/core';
 import {Check as CheckIcon} from '@material-ui/icons';
 import * as React from 'react';
 import {FormattedMessage} from 'react-intl';
@@ -13,6 +13,8 @@ const decorate = withStyles((theme) => ({
     },
     checkItemIcon: {
         backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+        borderRadius: 2,
     },
 }));
 
@@ -26,10 +28,8 @@ export const AboutPaper = decorate<Props>(({classes}) => {
                 {questions.map((row) => (
                     <FormattedMessage id={row} key={row}>
                         {(msg) => (
-                            <ListItem>
-                                <Avatar className={classes.checkItemIcon}>
-                                    <CheckIcon />
-                                </Avatar>
+                            <ListItem dense>
+                                <CheckIcon className={classes.checkItemIcon} />
                                 <ListItemText primary={msg} />
                             </ListItem>
                         )}

client/modules/homePage/components/InfoPaper.tsx

@@ -0,0 +1,61 @@
+import {Paper, Typography, withStyles} from '@material-ui/core';
+import * as React from 'react';
+import {FormattedMessage} from 'react-intl';
+import {Lang} from '../../../Lang';
+
+interface Props {}
+
+const decorate = withStyles((theme) => ({
+    root: {
+        padding: theme.spacing.unit,
+    },
+
+    description: {
+        paddingTop: theme.spacing.unit,
+    },
+
+    iconLinkWrapper: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: theme.spacing.unit,
+    },
+
+    iconLink: {
+        textDecoration: 'none',
+        color: theme.palette.secondary.main,
+        paddingRight: theme.spacing.unit,
+    },
+}));
+
+export const InfoPaper = decorate<Props>(({classes}) => {
+    return (
+        <Paper className={classes.root}>
+            <FormattedMessage id={Lang.INFO_TITLE}>{(msg) => <Typography variant="subheading">{msg}</Typography>}</FormattedMessage>
+            <FormattedMessage id={Lang.INFO_DESCRIPTION}>
+                {(msg) => (
+                    <Typography variant="caption" className={classes.description}>
+                        {msg}
+                    </Typography>
+                )}
+            </FormattedMessage>
+
+            <div className={classes.iconLinkWrapper}>
+                <a href={'https://apitree.cz'} target="_blank" className={classes.iconLink}>
+                    <img src="/static/images/logo.svg" height={40} />
+                </a>
+                <div>
+                    <a href={'https://github.com/ApiTreeCZ/alda'} target="_blank" className={classes.iconLink}>
+                        <i className={`fab fa-github-square fa-2x`} />
+                    </a>
+                    <a href={'https://alesdostal.blogspot.com'} target="_blank" className={classes.iconLink}>
+                        <i className={`fab fa-blogger fa-2x`} />
+                    </a>
+                    <a href={'https://www.facebook.com/ApiTree.cz'} target="_blank" className={classes.iconLink}>
+                        <i className={`fab fa-facebook-square fa-2x`} />
+                    </a>
+                </div>
+            </div>
+        </Paper>
+    );
+});

client/modules/homePage/components/TechCard.tsx

@@ -9,25 +9,43 @@ interface Props {
 }
 
 const decorate = withStyles((theme) => ({
-    root: {},
+    root: {
+        marginTop: 20,
+    },
+
+    mediaWrapper: {
+        float: 'left' as 'left',
+        marginTop: -20,
+        marginRight: 15,
+        borderRadius: 4,
+        padding: 8,
+        backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 100 : 500],
+        boxShadow: '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
+    },
+
     media: {
-        height: 300,
-        width: '100%',
+        height: 50,
         'object-fit': 'contain',
     },
+
     content: {
         padding: theme.spacing.unit,
+        clear: 'left' as 'left',
     },
 }));
 
 export const TechCard = decorate<Props>(({classes, imgSrc, title, description}) => (
     <Paper className={classes.root}>
-        <img src={imgSrc} title={title} className={classes.media} />
         <div className={classes.content}>
-            <Typography gutterBottom variant="headline" component="h2">
+            <div className={classes.mediaWrapper}>
+                <img src={imgSrc} title={title} className={classes.media} />
+            </div>
+            <Typography gutterBottom variant="body1" component="h2">
                 {title}
             </Typography>
-            <FormattedMessage id={description}>{(msg) => <Typography component="p">{msg}</Typography>}</FormattedMessage>
+        </div>
+        <div className={classes.content}>
+            <FormattedMessage id={description}>{(msg) => <Typography variant="caption">{msg}</Typography>}</FormattedMessage>
         </div>
     </Paper>
 ));

client/modules/homePage/components/index.ts

@@ -1,2 +1,3 @@
 export * from './AboutPaper';
+export * from './InfoPaper';
 export * from './TechCard';

client/styles/CustomPalette.ts

@@ -0,0 +1,93 @@
+import {PaletteOptions} from '@material-ui/core/styles/createPalette';
+
+const light = {
+    type: 'light',
+    primary: {
+        main: '#007985',
+        light: '#4ca8b5',
+        dark: '#004d58',
+        contrastText: '#fff',
+    },
+    secondary: {
+        main: '#00a651',
+        light: '#54d97f',
+        dark: '#007625',
+        contrastText: '#fff',
+    },
+    custom: {
+        green: {
+            main: '#4caf50',
+            light: '#80e27e',
+            dark: '#087f23',
+            contrastText: '#fff',
+        },
+        orange: {
+            main: '#ff9800',
+            light: '#ffc947',
+            dark: '#c66900',
+            contrastText: '#000',
+        },
+        indigo: {
+            main: '#3f51b5',
+            light: '#757de8',
+            dark: '#002984',
+            contrastText: '#fff',
+        },
+        brown: {
+            main: '#795548',
+            light: '#a98274',
+            dark: '#4b2c20',
+            contrastText: '#fff',
+        },
+    },
+    background: {
+        default: '#f1f1f1',
+    },
+} as PaletteOptions;
+
+const dark = {
+    type: 'dark',
+    primary: {
+        main: '#007985',
+        light: '#4ca8b5',
+        dark: '#004d58',
+        contrastText: '#fff',
+    },
+    secondary: {
+        main: '#00a651',
+        light: '#54d97f',
+        dark: '#007625',
+        contrastText: '#fff',
+    },
+    custom: {
+        green: {
+            main: '#4caf50',
+            light: '#80e27e',
+            dark: '#087f23',
+            contrastText: '#fff',
+        },
+        orange: {
+            main: '#ff9800',
+            light: '#ffc947',
+            dark: '#c66900',
+            contrastText: '#000',
+        },
+        indigo: {
+            main: '#3f51b5',
+            light: '#757de8',
+            dark: '#002984',
+            contrastText: '#fff',
+        },
+        brown: {
+            main: '#795548',
+            light: '#a98274',
+            dark: '#4b2c20',
+            contrastText: '#fff',
+        },
+    },
+} as PaletteOptions;
+
+export const CustomPalette = {
+    light,
+    dark,
+};

client/styles/StylesContext.ts

@@ -1,5 +1,6 @@
-import {createGenerateClassName, createMuiTheme, jssPreset} from '@material-ui/core';
+import {createGenerateClassName, createMuiTheme, jssPreset, PaletteType} from '@material-ui/core';
 import {ThemeOptions} from '@material-ui/core/styles/createMuiTheme';
+import {CustomPalette} from './CustomPalette';
 
 // tslint:disable-next-line
 const {create, SheetsRegistry} = require('jss');
@@ -10,9 +11,9 @@ declare const global: any;
 // Configure JSS
 const jss = create({plugins: [...jssPreset().plugins]});
 
-const createPageContext = (themeOptions: ThemeOptions) => ({
+const createPageContext = (type?: PaletteType) => ({
     jss,
-    theme: createMuiTheme(themeOptions),
+    theme: createMuiTheme({palette: type ? CustomPalette[type] : CustomPalette.dark}),
     // theme: getTheme(palette),
     // This is needed in order to deduplicate the injection of CSS in the page.
     sheetsManager: new Map(),
@@ -34,7 +35,7 @@ export const StylesContext = {
         // Make sure to create a new store for every server-side request so that data
         // isn't shared between connections (which would be bad)
         if (!process.browser) {
-            return createPageContext(themeOptions);
+            return createPageContext(themeOptions!.palette!.type);
         }
 
         // Reuse context on the client-side
@@ -44,7 +45,7 @@ export const StylesContext = {
             !themeOptions.palette.type ||
             global.__INIT_MATERIAL_UI__.theme.palette.type !== themeOptions.palette.type
         ) {
-            global.__INIT_MATERIAL_UI__ = createPageContext(themeOptions);
+            global.__INIT_MATERIAL_UI__ = createPageContext(themeOptions!.palette!.type);
         }
         return global.__INIT_MATERIAL_UI__;
     },

client/with/withApolloProvider.tsx

@@ -1,10 +1,10 @@
 import ApolloClient from 'apollo-boost';
 import {ErrorResponse} from 'apollo-link-error';
 import * as fetch from 'isomorphic-fetch';
-import {Context} from 'next/document';
+import {NextDocumentContext} from 'next/document';
 import * as React from 'react';
 import {ApolloProvider} from 'react-apollo';
-import {Dispatch} from 'react-redux';
+import {Dispatch} from 'redux';
 
 declare const process: any;
 declare const global: any;
@@ -33,7 +33,7 @@ const createClient = (dispatch: Dispatch) => {
     return client;
 };
 
-export const withApolloProvider = (Page: React.ComponentClass & {getInitialProps?: (ctx: Context) => any}): React.ComponentClass<any> => {
+export const withApolloProvider = (Page: React.ComponentClass & {getInitialProps?: (ctx: NextDocumentContext) => any}): React.ComponentClass<any> => {
     return class PageWithApollo extends React.Component<any> {
         static async getInitialProps(ctx: any) {
             if (Page.getInitialProps) {

client/with/withIntl.tsx

@@ -1,4 +1,4 @@
-import {Context, DocumentProps} from 'next/document';
+import {NextDocumentContext, DocumentProps} from 'next/document';
 import * as React from 'react';
 import {addLocaleData, injectIntl, IntlProvider} from 'react-intl';
 
@@ -13,7 +13,7 @@ if (typeof window !== 'undefined' && window.ReactIntlLocaleData) {
     });
 }
 
-export const withIntl = (Page: React.ComponentType<any> & {getInitialProps(ctx: Context): DocumentProps}) => {
+export const withIntl = (Page: React.ComponentType<any> & {getInitialProps(ctx: NextDocumentContext): DocumentProps}) => {
     const IntlPage = injectIntl(Page);
 
     return class PageWithIntl extends React.Component<any> {

client/with/withMaterialUi.tsx

@@ -2,7 +2,7 @@ import {CssBaseline, MuiThemeProvider} from '@material-ui/core';
 import {ThemeOptions} from '@material-ui/core/styles/createMuiTheme';
 import * as React from 'react';
 
-import {AppFrame} from '../components';
+import {AppFrame} from '../modules/common/components';
 import {saveThemeOptions, ThemeContext, ThemeContextType, themeOptions} from '../contexts';
 import {PageContext, StylesContext} from '../styles/StylesContext';
 

lang/.messages/default.json

@@ -1,10 +1,15 @@
 [
   {"id": "title", "defaultMessage": "ALDA"},
+
   {"id": "about.description", "defaultMessage": "A boilerplate for React isomorphic aplication with Material Design, GraphQL, Redux, Redux Form and custom server"},
   {"id": "about.questions.startWithReact", "defaultMessage": "Do you want to start with React?"},
   {"id": "about.questions.startWithMD", "defaultMessage": "Do you want to start with Material Design?"},
   {"id": "about.questions.startWithRedux", "defaultMessage": "Do you want to start with Redux?"},
   {"id": "about.withTypescript", "defaultMessage": "...with TypeScript"},
+
+  {"id": "info.title", "defaultMessage": "This application is used for demonstration purposes"},
+  {"id": "info.description", "defaultMessage": "If you are interested you can download the source code from Github. If you are interested do not hesitate to send suggestions for improvements and bug fixes."},
+
   {"id": "tech.react", "defaultMessage": "A JavaScript library for building user interfaces"},
   {"id": "tech.md", "defaultMessage": "Make beautiful products, faster"},
   {"id": "tech.redux", "defaultMessage": "Predictable state container"},

lang/cs.json

@@ -5,6 +5,8 @@
   "about.questions.startWithMD": "Chcete začít používat Material Design?",
   "about.questions.startWithRedux": "Chcete začít používat Redux?",
   "about.withTypescript": "...plus TypeScript",
+  "info.title": "Tato aplikace slouží k demonstrativním účelům",
+  "info.description": "Pokud máte zájem, můžete si stáhnout zdrojové kódy z Githubu. V případě zájmu, neváhejte poslat návrhy na vylepšení a opravy chyb.",
   "tech.react": "JavaScript knihovna pro psaní uživatelského rozhraní",
   "tech.md": "Tvořte své projekty hezky a rychle",
   "tech.redux": "Předvídatelný stavový kontejner",