initial commit

.browserlistrc

@@ -0,0 +1,14 @@
+{
+  "production": [
+    ">0.2%",
+    "safari >= 9",
+    "ie >= 11",
+    "not dead",
+    "not op_mini all"
+  ],
+  "development": [
+    "last 1 chrome version",
+    "last 1 firefox version",
+    "last 1 safari version"
+  ]
+}

.dockerignore

@@ -0,0 +1,10 @@
+.git
+.vscode
+.docz
+artifacts
+build
+dist
+tmp
+functions-build
+.webpack
+node_modules

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -0,0 +1,10 @@
+logs
+*.log
+npm-debug.log*
+.DS_Store
+
+coverage
+node_modules
+build
+public/static
+.env.*.local

.huskyrc

@@ -0,0 +1,5 @@
+{
+  "hooks": {
+    "pre-commit": "git config core.ignorecase false && lint-staged"
+  }
+}

.lintstagedignore

@@ -0,0 +1,10 @@
+.git
+.vscode
+.docz
+artifacts
+build
+dist
+tmp
+functions-build
+.webpack
+node_modules

.lintstagedrc

@@ -0,0 +1,4 @@
+{
+  "src/**/*.{json,css,scss,md,yml}": ["prettier --write", "git add"],
+  "src/**/*.{js,jsx}": ["prettier --write", "eslint ./src --fix", "git add"]
+}

.prettierrc

@@ -0,0 +1,8 @@
+{
+    "singleQuote": true,
+    "printWidth": 80,
+    "trailingComma": "none",
+    "arrowParens": "always",
+    "bracketSpacing": true,
+    "useTabs": false
+}

.travis.yml

@@ -0,0 +1,19 @@
+sudo: false
+language: node_js
+cache:
+  directories:
+    - node_modules
+notifications:
+  email: false
+node_js:
+  - '10'
+  - '11'
+  - '12'
+before_install:
+  - npm install -g greenkeeper-lockfile
+install: npm install
+before_script: greenkeeper-lockfile-update
+after_script: greenkeeper-lockfile-upload
+script:
+  - npm run lint
+  - npm test

Dockerfile

@@ -0,0 +1,43 @@
+#
+# PRODUCTION
+# Dockerfile
+#
+
+#
+# Stage: 1
+# We install the dependencies
+# and required tools such as git, npm
+#
+
+FROM mhart/alpine-node:12 as build
+
+LABEL autodelete="true"
+
+WORKDIR /usr/src/razzle-dev-env
+
+COPY . /usr/src/razzle-dev-env
+
+RUN npm ci --ignore-scripts
+RUN npm run build
+RUN rm -rf node_modules src
+RUN npm ci --prod --ignore-scripts
+
+#
+# Stage: 2
+# We copy files from `Stage: 1` and just add some polyfill
+# and it starts working
+#
+
+FROM mhart/alpine-node:slim-12
+
+WORKDIR /usr/src/razzle-dev-env
+
+COPY --from=build usr/src/razzle-dev-env /usr/src/razzle-dev-env
+
+ENV NODE_CLUSTER_SCHED_POLICY=rr
+ENV NODE_ENV=production
+ENV PORT=8080
+
+EXPOSE 8080
+
+ENTRYPOINT ["node", "build/server.js"]

README.md

@@ -0,0 +1,80 @@
+# razzle-dev-env
+
+[![Greenkeeper badge](https://badges.greenkeeper.io/dalisoft/razzle-dev-env.svg)](https://greenkeeper.io/)
+
+This project is modified and prepared as Development Environment for Frontend development with SSR support. This project supports SSR. Also if you have less money on deploy servers, this Dev-Env will help you because it uses only one server for both Express (server) and React (client)
+
+## Target of project
+
+- React PropTypes instead of TypeScript
+- Latest dependecies (stable)
+- i18n support configured
+- Prettier configured
+- Stylelint configured
+- VS Code configuration configured (for best performance)
+- Using React PropTypes
+- Redaction instead of Redux dispatching (easy & fun)
+- SSR Compatible
+- Fetch is preferred
+- NPM is preferred (because of dependecies resolve)
+- Components are documented with docz (with basic example)
+- Components are tests with react-test-renderer and Jest (with basic example)
+- Good browser support
+- Good structured (subjective)
+
+### Testing
+
+For one of component was created test using `Jest` + `react-test-renderer` and works good for now.
+
+Note: _If you install Jest to your Editor, works without any commands at editor level with good performance_
+
+Command to run
+
+```bash
+npm test
+```
+
+### Linting (in progress)
+
+ESLint + Prettier + Stylelint is very good combo to keep project as high quality, clean and maintainable.
+
+Note: _If you install Plug-ins of these linters to your Editor, works without any commands at editor level with good performance_
+
+Command to run
+
+```bash
+npm lint
+```
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br>
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br>
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Learn More
+
+You can learn more in the [Razzle documentation]https://github.com/jaredpalmer/razzle).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

build.sh

@@ -0,0 +1,6 @@
+docker build -t razzle-dev-env .
+
+list=$(docker images -q -f "dangling=true" -f "label=autodelete=true")
+if [ -n "$list" ]; then
+     docker rmi $list
+fi

client/components/UI/Text/Text.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+// TODO: Upgrade later...?
+// Currently workaround for FormattedMessage error
+FormattedMessage.propTypes = {
+  children: PropTypes.string,
+};
+
+export const Text = ({ id, ...props }) => <FormattedMessage id={id || props.children} {...props} />;
+
+Text.propTypes = {
+  children: PropTypes.string,
+};
+
+export default Text;

client/components/UI/Text/index.js

@@ -0,0 +1,3 @@
+import Text from './Text';
+
+export default Text;

client/components/UI/index.js

@@ -0,0 +1,3 @@
+import Text from './Text';
+
+export { Text };

client/components/common/LangSwitcher/LangSwitcher.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import reducers from 'redux/reducers';
+import { connect } from 'redaction';
+
+import style from './style.module.css';
+
+export class LanguageSwitcher extends React.PureComponent {
+  static propTypes = {
+    locale: PropTypes.string,
+  };
+  render() {
+    const { locale } = this.props;
+
+    return (
+      <div className={style.switcherContainer}>
+        <span
+          className={classNames(style.switcher, {
+            [style.active]: locale === 'en',
+          })}
+          onClick={() => reducers.init.setLocale('en')}
+        >
+          Set lang as English
+        </span>
+        <span
+          className={classNames(style.switcher, {
+            [style.active]: locale === 'ru',
+          })}
+          onClick={() => reducers.init.setLocale('ru')}
+        >
+          Set lang as Russian
+        </span>
+        <span
+          className={classNames(style.switcher, {
+            [style.active]: locale === 'uz',
+          })}
+          onClick={() => reducers.init.setLocale('uz')}
+        >
+          Set lang as Uzbek
+        </span>
+      </div>
+    );
+  }
+}
+
+export default connect({ locale: 'init.locale' })(LanguageSwitcher);

client/components/common/LangSwitcher/index.js

@@ -0,0 +1,2 @@
+import LangSwitcher from './LangSwitcher';
+export default LangSwitcher;

client/components/common/LangSwitcher/style.module.css

@@ -0,0 +1,14 @@
+.switcher-container {
+  display: flex;
+}
+
+.switcher {
+  color: #666;
+  text-decoration: underline;
+}
+
+.active {
+  color: #333;
+  font-weight: bold;
+  text-decoration: none;
+}

client/components/common/index.js

@@ -0,0 +1,3 @@
+import LangSwitcher from './LangSwitcher';
+
+export { LangSwitcher };

client/components/layouts/PageLayout/PageLayout.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { layout } from './style.module.scss';
+
+const Layout = ({ children }) => <div className={layout}>{children}</div>;
+Layout.propTypes = {
+  children: PropTypes.any,
+};
+
+export default React.memo(Layout);

client/components/layouts/PageLayout/index.js

@@ -0,0 +1,3 @@
+import PageLayout from './PageLayout';
+
+export default PageLayout;

client/components/layouts/PageLayout/style.module.scss

@@ -0,0 +1,9 @@
+.layout {
+  background-color: #eee;
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  padding: 10px;
+  position: absolute;
+  width: 100%;
+}

client/components/layouts/index.js

@@ -0,0 +1,3 @@
+import PageLayout from './PageLayout';
+
+export { PageLayout };

client/containers/App.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+
+import Routes from '../routes';
+import Root from './Root';
+import { connect } from 'redaction';
+
+const App = React.memo(({ locale }) => {
+  return (
+    <Root locale={locale}>
+      <Route component={Routes} />
+    </Root>
+  );
+});
+
+const enhance = connect({ locale: 'init.locale' });
+
+export default enhance(App);

client/containers/IntlProvider.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IntlProvider as Provider, addLocaleData } from 'react-intl';
+
+import en from 'react-intl/locale-data/en';
+import ru from 'react-intl/locale-data/ru';
+import uz from 'react-intl/locale-data/uz';
+import 'intl/locale-data/jsonp/en.js';
+import 'intl/locale-data/jsonp/ru.js';
+import 'intl/locale-data/jsonp/uz.js';
+
+import { flatten } from '../helpers';
+import messages from '../translations';
+
+addLocaleData([...en, ...ru, ...uz]);
+
+export const IntlProvider = React.memo(({ children, locale }) => {
+  return (
+    <Provider locale={locale} messages={flatten(messages[locale])}>
+      {children}
+    </Provider>
+  );
+});