22 |
)).toEqual(true);
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/app/organisms/App/AuthorizedRoute/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Redirect, Route } from 'react-router-dom';
4 |
5 | import setAuthenticatedProp from '../../../utils/authenticated';
6 |
7 | const AuthorizedRoute = ({ authenticated, component: Component, ...rest }) => (
8 | Test
); 21 | const renderedComponent = shallow( 22 |
12 |
13 | {repository.owner.login === username ? repository.name : repository.full_name}
14 |
15 |
16 |
19 |
20 | );
21 |
22 | Repository.propTypes = {
23 | repository: PropTypes.object,
24 | username: PropTypes.string,
25 | };
26 |
27 | export default Repository;
28 |
--------------------------------------------------------------------------------
/app/pages/SignOut/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Enzyme, { shallow } from 'enzyme';
3 | import Adapter from 'enzyme-adapter-react-16';
4 |
5 | import { FormattedMessage } from 'react-intl';
6 |
7 | import SignOutPage from './';
8 |
9 | Enzyme.configure({ adapter: new Adapter() });
10 |
11 | describe('
19 |
23 | );
24 | };
25 |
26 | Page.propTypes = {
27 | children: PropTypes.node,
28 | description: PropTypes.object,
29 | intl: intlShape.isRequired,
30 | title: PropTypes.object,
31 | };
32 |
33 | export default injectIntl(Page);
34 |
--------------------------------------------------------------------------------
/app/organisms/SignInForm/index.story.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import { BrowserRouter } from 'react-router-dom';
5 | import { IntlProvider } from 'react-intl';
6 | import { Provider } from 'react-redux';
7 | import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
8 |
9 | import SignInForm from './';
10 | import defaultTheme from '../App/defaultTheme';
11 | import configureStore from '../../utils/store';
12 | import authReducer from '../../store/auth/reducer';
13 |
14 | const store = configureStore({
15 | auth: authReducer,
16 | });
17 |
18 | storiesOf('Sign In', module)
19 | .addDecorator((story) => (
20 |
23 |
24 |
25 |
26 |
28 |
30 |
31 |
32 | );
33 | };
34 |
35 | Template.propTypes = {
36 | component: PropTypes.oneOfType([
37 | PropTypes.node,
38 | PropTypes.func,
39 | ]).isRequired,
40 | };
41 |
42 | export default Template;
43 |
--------------------------------------------------------------------------------
/app/organisms/Footer/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Enzyme, { shallow } from 'enzyme';
3 | import Adapter from 'enzyme-adapter-react-16';
4 | import { FormattedMessage } from 'react-intl';
5 |
6 | import A from '../../atoms/A';
7 | import messages from './messages';
8 | import Footer from './';
9 |
10 | Enzyme.configure({ adapter: new Adapter() });
11 |
12 | describe('', () => {
13 | it('should render the copyright notice', () => {
14 | const renderedComponent = shallow(
15 |
16 | );
17 | expect(renderedComponent.contains(
18 |
16 | {loading
17 | ?
21 | ) : null
22 | ;
23 |
24 | const getListItems = (repos, username) => (repos.length > 0)
25 | ? repos.map((repository) =>
43 |
45 |
26 |
28 | )).toBe(true);
29 | });
30 |
31 | it('never re-renders', () => expect(component.instance().shouldComponentUpdate()).toBe(false));
32 |
33 | it('sets the page title', () => {
34 | const title = component.find(TitleIntl).first();
35 | expect(title.prop('id')).toBe('boilerplate.pages.FeatureList.metaTitle');
36 | expect(title.prop('defaultMessage')).toBe('Features List');
37 | });
38 |
39 | it('sets the page description', () => {
40 | const description = component.find(MetaIntl).first();
41 | expect(description.prop('name')).toBe('description');
42 | expect(description.prop('id')).toBe('boilerplate.pages.FeatureList.metaDescription');
43 | expect(description.prop('defaultMessage')).toBe('Features list of React.js Boilerplate application');
44 | });
45 | });
46 |
--------------------------------------------------------------------------------
/internals/scripts/dependencies.js:
--------------------------------------------------------------------------------
1 | // No need to build the DLL in production
2 | if (process.env.NODE_ENV === 'production') {
3 | process.exit(0);
4 | }
5 |
6 | require('shelljs/global');
7 |
8 | const path = require('path');
9 | const fs = require('fs');
10 | const exists = fs.existsSync;
11 | const writeFile = fs.writeFileSync;
12 |
13 | const defaults = require('lodash/defaultsDeep');
14 | const pkg = require(path.join(process.cwd(), 'package.json'));
15 | const config = require('../config');
16 | const dllConfig = defaults(pkg.dllPlugin, config.dllPlugin.defaults);
17 | const outputPath = path.join(process.cwd(), dllConfig.path);
18 | const dllManifestPath = path.join(outputPath, 'package.json');
19 |
20 | /**
21 | * I use node_modules/react-boilerplate-dlls by default just because
22 | * it isn't going to be version controlled and babel wont try to parse it.
23 | */
24 | mkdir('-p', outputPath);
25 |
26 | echo('Building the Webpack DLL...');
27 |
28 | /**
29 | * Create a manifest so npm install doesn't warn us
30 | */
31 | if (!exists(dllManifestPath)) {
32 | writeFile(
33 | dllManifestPath,
34 | JSON.stringify(defaults({
35 | name: 'react-boilerplate-dlls',
36 | private: true,
37 | author: pkg.author,
38 | repository: pkg.repository,
39 | version: pkg.version,
40 | }), null, 2),
41 | 'utf8'
42 | );
43 | }
44 |
45 | // the BUILDING_DLL env var is set to avoid confusing the development environment
46 | exec('cross-env BUILDING_DLL=true webpack --display-chunks --color --config internals/webpack/webpack.dll.babel.js --hide-modules');
47 |
--------------------------------------------------------------------------------
/app/pages/FeatureList/Feature/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Enzyme, { shallow } from 'enzyme';
3 | import Adapter from 'enzyme-adapter-react-16';
4 | import { FormattedMessage } from 'react-intl';
5 |
6 | import Feature from './';
7 |
8 | Enzyme.configure({ adapter: new Adapter() });
9 |
10 | describe('
63 |
72 | -
64 | {getLinksData(authenticated).map(({ icon: Icon, text, uri }) => (
65 |
4 | 
5 |
39 |
41 |
42 |
47 |
49 |
64 |
75 |
77 | );
78 | }}
79 |
5 |
140 | `;
141 |
--------------------------------------------------------------------------------
/app/pages/FeatureList/messages.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Feature List Page Messages
3 | *
4 | * This contains all the text for the FeaturePage component.
5 | */
6 | import { defineMessages } from 'react-intl';
7 |
8 | export default defineMessages({
9 | metaTitle: {
10 | id: 'boilerplate.pages.FeatureList.metaTitle',
11 | defaultMessage: 'Features List',
12 | },
13 | metaDescription: {
14 | id: 'boilerplate.pages.FeatureList.metaDescription',
15 | defaultMessage: 'Features list of React.js Boilerplate application',
16 | },
17 | header: {
18 | id: 'boilerplate.pages.FeatureList.header',
19 | defaultMessage: 'Features',
20 | },
21 | scaffoldingHeader: {
22 | id: 'boilerplate.pages.FeatureList.scaffolding.header',
23 | defaultMessage: 'Quick scaffolding',
24 | },
25 | scaffoldingMessage: {
26 | id: 'boilerplate.pages.FeatureList.scaffolding.message',
27 | defaultMessage: `Automate the creation of components, containers, routes, selectors
28 | and sagas - and their tests - right from the CLI!`,
29 | },
30 | feedbackHeader: {
31 | id: 'boilerplate.pages.FeatureList.feedback.header',
32 | defaultMessage: 'Instant feedback',
33 | },
34 | feedbackMessage: {
35 | id: 'boilerplate.pages.FeatureList.feedback.message',
36 | defaultMessage: `
37 | Enjoy the best DX and code your app at the speed of thought! Your
38 | saved changes to the CSS and JS are reflected instantaneously
39 | without refreshing the page. Preserve application state even when
40 | you update something in the underlying code!
41 | `,
42 | },
43 | stateManagementHeader: {
44 | id: 'boilerplate.pages.FeatureList.state_management.header',
45 | defaultMessage: 'Predictable state management',
46 | },
47 | stateManagementMessages: {
48 | id: 'boilerplate.pages.FeatureList.state_management.message',
49 | defaultMessage: `
50 | Unidirectional data flow allows for change logging and time travel
51 | debugging.
52 | `,
53 | },
54 | javascriptHeader: {
55 | id: 'boilerplate.pages.FeatureList.javascript.header',
56 | defaultMessage: 'Next generation JavaScript',
57 | },
58 | javascriptMessage: {
59 | id: 'boilerplate.pages.FeatureList.javascript.message',
60 | defaultMessage: `Use template strings, object destructuring, arrow functions, JSX
61 | syntax and more, today.`,
62 | },
63 | cssHeader: {
64 | id: 'boilerplate.pages.FeatureList.css.header',
65 | defaultMessage: 'Features',
66 | },
67 | cssMessage: {
68 | id: 'boilerplate.pages.FeatureList.css.message',
69 | defaultMessage: 'Next generation CSS',
70 | },
71 | routingHeader: {
72 | id: 'boilerplate.pages.FeatureList.routing.header',
73 | defaultMessage: 'Industry-standard routing',
74 | },
75 | routingMessage: {
76 | id: 'boilerplate.pages.FeatureList.routing.message',
77 | defaultMessage: `
78 | Write composable CSS that's co-located with your components for
79 | complete modularity. Unique generated class names keep the
80 | specificity low while eliminating style clashes. Ship only the
81 | styles that are on the page for the best performance.
82 | `,
83 | },
84 | networkHeader: {
85 | id: 'boilerplate.pages.FeatureList.network.header',
86 | defaultMessage: 'Offline-first',
87 | },
88 | networkMessage: {
89 | id: 'boilerplate.pages.FeatureList.network.message',
90 | defaultMessage: `
91 | The next frontier in performant web apps: availability without a
92 | network connection from the instant your users load the app.
93 | `,
94 | },
95 | intlHeader: {
96 | id: 'boilerplate.pages.FeatureList.internationalization.header',
97 | defaultMessage: 'Complete i18n Standard Internationalization & Pluralization',
98 | },
99 | intlMessage: {
100 | id: 'boilerplate.pages.FeatureList.internationalization.message',
101 | defaultMessage: 'Scalable apps need to support multiple languages, easily add and support multiple languages with `react-intl`.',
102 | },
103 | });
104 |
--------------------------------------------------------------------------------
/app/organisms/SignInForm/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useDispatch } from 'react-redux';
3 | import { Link, useHistory } from 'react-router-dom';
4 | import { ErrorMessage, Field, Form, Formik } from 'formik';
5 | import { TextField } from 'formik-material-ui';
6 | import {
7 | Button,
8 | Card,
9 | CardActions,
10 | CardContent,
11 | CardHeader,
12 | Grid,
13 | InputAdornment,
14 | LinearProgress,
15 | } from '@material-ui/core';
16 | import {
17 | Email,
18 | Lock,
19 | } from '@material-ui/icons';
20 | import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
21 | import * as yup from 'yup';
22 |
23 | import messages from './messages';
24 | import Error from '../../atoms/Error';
25 | import { setSignInData } from '../../store/auth/actions';
26 | import { setToken } from '../../utils/auth';
27 | import submitForm from '../../utils/form';
28 | import { post } from '../../utils/request';
29 |
30 | const SignInForm = ({ intl }) => {
31 | const { push } = useHistory();
32 | const dispatch = useDispatch();
33 |
34 | const validationSchema = yup.object().shape({
35 | email: yup.string().required().email().label(intl.formatMessage(messages.email)),
36 | password: yup.string().required().min(8).label(intl.formatMessage(messages.password)),
37 | });
38 |
39 | return (
40 | 8 | 9 | Features 10 | 11 |
12 |-
15 |
-
16 | 17 |33 |
20 | 21 | Quick scaffolding 22 | 23 |
24 |27 | 28 | Automate the creation of components, containers, routes, selectors 29 | and sagas - and their tests - right from the CLI! 30 | 31 |
32 |
34 | -
35 | 36 |52 |
39 | 40 | Quick scaffolding 41 | 42 |
43 |46 | 47 | Automate the creation of components, containers, routes, selectors 48 | and sagas - and their tests - right from the CLI! 49 | 50 |
51 |
53 | -
54 | 55 |75 |
58 | 59 | Instant feedback 60 | 61 |
62 |65 | 66 | 67 | Enjoy the best DX and code your app at the speed of thought! Your 68 | saved changes to the CSS and JS are reflected instantaneously 69 | without refreshing the page. Preserve application state even when 70 | you update something in the underlying code! 71 | 72 | 73 |
74 |
76 | -
77 | 78 |98 |
81 | 82 | Industry-standard routing 83 | 84 |
85 |88 | 89 | 90 | Write composable CSS that's co-located with your components for 91 | complete modularity. Unique generated class names keep the 92 | specificity low while eliminating style clashes. Ship only the 93 | styles that are on the page for the best performance. 94 | 95 | 96 |
97 |
99 | -
100 | 101 |119 |
104 | 105 | Offline-first 106 | 107 |
108 |111 | 112 | 113 | The next frontier in performant web apps: availability without a 114 | network connection from the instant your users load the app. 115 | 116 | 117 |
118 |
120 | -
121 | 122 |137 |
125 | 126 | Complete i18n Standard Internationalization & Pluralization 127 | 128 |
129 |132 | 133 | Scalable apps need to support multiple languages, easily add and support multiple languages with \`react-intl\`. 134 | 135 |
136 |
138 |