Skip to content
Permalink
Browse files

[FEATURE] Migrating to react-scripts 2.1.1 πŸŽ‰ (#231)

* Fixing storybook

* Updating tests

* Adding the linter before commiting

* Testing hook

* Testing husky

* Testing pre-commit

* Using yarn

* Removing custom webpack configurations

* Adding prettier

* Removing explicit html package for webpack from dev dependencies

* Adding noopener to the mail mail to link

* Making noopener required when linting

* updating snapshoot
  • Loading branch information...
crysfel committed Nov 16, 2018
1 parent 1dc5f66 commit b547fefa77ac6cc850cc141ece82a6f788b05f17
Showing with 3,607 additions and 1,983 deletions.
  1. +2 βˆ’0 .env.example
  2. +2 βˆ’0 .eslintrc
  3. +1 βˆ’1 .storybook/config.js
  4. +2 βˆ’1 .storybook/webpack.config.js
  5. +19 βˆ’22 package.json
  6. +0 βˆ’33 scripts/config-overrides.dev.js
  7. +0 βˆ’38 scripts/config-overrides.prod.js
  8. +0 βˆ’7 scripts/config-overrides.testing.js
  9. +0 βˆ’75 scripts/custom-config.js
  10. +1 βˆ’2 src/components/button/Button.js
  11. +1 βˆ’1 src/components/button/__tests__/__snapshots__/button.test.js.snap
  12. 0 src/components/button/{button.scss β†’ button.module.scss}
  13. +1 βˆ’1 src/components/footer/Footer.js
  14. +7 βˆ’7 src/components/footer/__tests__/__snapshots__/Donate.test.js.snap
  15. +12 βˆ’6 src/components/footer/__tests__/__snapshots__/Footer.test.js.snap
  16. +4 βˆ’1 src/components/footer/{footer.scss β†’ footer.module.scss}
  17. +4 βˆ’4 src/components/image/__tests__/__snapshots__/Image.test.js.snap
  18. +1 βˆ’1 src/components/modal/Modal.js
  19. 0 src/components/modal/{modal.scss β†’ modal.module.scss}
  20. +1 βˆ’1 src/components/overlayCookie/OverlayCookie.js
  21. +4 βˆ’0 src/components/overlayCookie/{overlayCookie.scss β†’ overlayCookie.module.scss}
  22. +1 βˆ’1 src/components/panel/Panel.js
  23. +0 βˆ’1 src/components/panel/Panel.stories.js
  24. +2 βˆ’2 src/components/panel/__tests__/Panel.test.js
  25. +1 βˆ’1 src/components/panel/__tests__/__snapshots__/Panel.test.js.snap
  26. 0 src/components/panel/assets/{panel.scss β†’ panel.module.scss}
  27. +0 βˆ’5 src/components/panel/assets/panelContent.scss
  28. +0 βˆ’6 src/components/panel/assets/panelFooter.scss
  29. +0 βˆ’29 src/components/panel/assets/panelHeader.scss
  30. +29 βˆ’0 src/config/i18n/_build/src/components/navbar/Navbar.js.json
  31. +0 βˆ’42 src/containers/App/assets/app.scss
  32. BIN src/containers/App/assets/mentor.jpg
  33. +2 βˆ’2 src/pages/home/Home.js
  34. +27 βˆ’19 src/pages/home/__tests__/__snapshots__/SocialMedia.test.js.snap
  35. +3 βˆ’3 src/pages/home/__tests__/home.test.js
  36. +0 βˆ’81 src/pages/home/assets/contact.scss
  37. +1 βˆ’0 src/pages/home/assets/{home.scss β†’ home.module.scss}
  38. 0 src/pages/home/assets/{socialmedia.scss β†’ socialmedia.module.scss}
  39. +0 βˆ’45 src/pages/home/components/Contact.js
  40. +1 βˆ’1 src/pages/home/components/HomeSection.js
  41. 0 src/pages/home/components/{HomeSection.scss β†’ HomeSection.module.scss}
  42. +1 βˆ’1 src/pages/home/components/LegalModal.js
  43. 0 src/pages/home/components/{LegalModal.scss β†’ LegalModal.module.scss}
  44. +1 βˆ’1 src/pages/home/components/SocialMedia.js
  45. +220 βˆ’101 src/theme/index.css
  46. +3,256 βˆ’1,441 yarn.lock
@@ -1,3 +1,5 @@
NODE_PATH=src/

REACT_APP_TWITTER_URL=https://twitter.com/codingcoach_io
REACT_APP_FB_URL=https://www.facebook.com/codingcoachio/
REACT_APP_INSTA_URL=https://www.instagram.com/codingcoach_io/
@@ -18,6 +18,7 @@
],
"rules": {
"react/jsx-filename-extension": "off",
"react/jsx-no-target-blank": [2, { "enforceDynamicLinks": "always" }],
"lines-between-class-members": 2,
"block-spacing": 2,
"no-trailing-spaces": 2,
@@ -28,6 +29,7 @@
]
},
"plugins": [
"react",
"babel",
"prettier"
]
@@ -1,5 +1,5 @@
import { configure, addDecorator } from '@storybook/react';
import '../src/theme/index.scss';
import 'theme/index.css';

const req = require.context('../src', true, /\.stories\.js$/);

@@ -3,7 +3,7 @@ const path = require('path');
module.exports = (storybookBaseConfig, configType) => {
storybookBaseConfig.module.rules.push(
{
test: /\.scss$/,
test: /\.(scss|css)$/,
loaders: ['style-loader', 'css-loader?modules', 'resolve-url-loader', 'sass-loader'],
include: path.resolve(__dirname, '..', 'src'),
},
@@ -30,6 +30,7 @@ module.exports = (storybookBaseConfig, configType) => {
);

storybookBaseConfig.resolve.modules.push('src');
storybookBaseConfig.resolve.modules.push('src/theme');

return storybookBaseConfig;
};
@@ -4,13 +4,13 @@
"private": true,
"homepage": "https://codingcoach.io/",
"scripts": {
"start": "yarn build:css && node scripts/custom-config start",
"build": "yarn build:css && node scripts/custom-config build",
"start": "yarn build:css && react-scripts start",
"build": "yarn build:css && react-scripts build",
"build:prod": "yarn build && react-snap",
"deploy": "gh-pages -d build",
"lint": "eslint src/",
"test": "node scripts/custom-config test --env=jsdom",
"test:staged": "cross-env CI=true node scripts/custom-config test --env=jsdom --findRelatedTests",
"test": "react-scripts test --env=jsdom",
"test:staged": "cross-env CI=true react-scripts test --env=jsdom --findRelatedTests",
"eject": "react-scripts eject",
"precommit": "lint-staged",
"analyze": "source-map-explorer build/static/js/main.*",
@@ -31,15 +31,15 @@
"react": "^16.5.0",
"react-dom": "^16.5.0",
"react-i18next": "^7.12.0",
"react-scripts": "1.1.5"
"react-scripts": "2.1.1"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"**/src/**/*.js": [
"src/**/*.js": [
"prettier --write",
"eslint --fix",
"npm run test:staged",
@@ -51,34 +51,31 @@
"@storybook/react": "^3.4.10",
"ajv": "^6.5.3",
"autoprefixer": "^9.3.1",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"eslint": "^5.5.0",
"eslint-config-prettier": "^3.0.1",
"css-loader": "^1.0.1",
"eslint-config-prettier": "^3.3.0",
"eslint-plugin-babel": "^5.2.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-prettier": "^2.6.2",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-prettier": "^3.0.0",
"file-loader": "^2.0.0",
"gh-pages": "^1.2.0",
"husky": "^0.14.3",
"jest-dom": "^1.12.0",
"lint-staged": "^7.2.2",
"node-sass": "^4.9.3",
"lint-staged": "^8.0.4",
"node-sass": "^4.10.0",
"postcss-cli": "^6.0.1",
"prettier": "^1.14.2",
"proxyquire": "^2.1.0",
"react-snap": "^1.19.0",
"react-testing-library": "^5.0.1",
"resolve-url-loader": "^3.0.0",
"rewire": "^4.0.1",
"sass": "^1.13.2",
"sass-loader": "^7.1.0",
"storybook-readme": "^4.0.0-beta1",
"style-loader": "^0.23.0",
"style-loader": "^0.23.1",
"tailwindcss": "^0.7.2",
"webpack-bundle-analyzer": "^3.0.2"
}
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

@@ -1,5 +1,5 @@
import React from 'react';
import styles from './button.scss';
import styles from './button.module.scss';
import classNames from 'classnames';
import PropTypes from 'prop-types';
/**
@@ -14,7 +14,6 @@ import PropTypes from 'prop-types';
const Button = (props) => {
const { children, type, size, shape, typography, disabled, fullWidth, id, onClick } = props;

console.log(styles);
return (
<button
id={id}
@@ -3,7 +3,7 @@
exports[`renders the button component 1`] = `
<div>
<button
class=""
class="button primary medium rounded uppercase"
>
CLICK ME
</button>
File renamed without changes.
@@ -5,7 +5,7 @@ import Button from 'components/button/Button';

// @TODO: Bring it back when ready
// import DonateButton from './DonateButton';
import styles from './footer.scss';
import styles from './footer.module.scss';

function Footer({ onClickLegal, t }) {
return (
@@ -7,25 +7,25 @@ exports[`components/footer/DonateButton should render the donate button 1`] = `
target="_top"
>
<input
type="hidden"
name="cmd"
type="hidden"
value="_s-xclick"
/>
<input
type="hidden"
name="hosted_button_id"
value="123abc"
type="hidden"
value="3LA9RLHEXNZV6"
/>
<input
type="image"
src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"
alt="PayPal - The safer, easier way to pay online!"
border="0"
name="submit"
alt="PayPal - The safer, easier way to pay online!"
src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"
type="image"
/>
<img
src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif"
alt="Donate!"
src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif"
/>
</form>
`;
@@ -1,21 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders the footer element 1`] = `
<footer>
<div>
<div />
<footer
class="footerMain"
>
<div
class="footerInner"
>
<div
class="column"
/>
<button
class=""
class="button tertiary small rounded capitalize"
>
Terms & Conditions
</button>
<button
class=""
class="button tertiary small rounded capitalize"
>
Cookies
</button>
<button
class=""
class="button tertiary small rounded capitalize"
>
Privacy Policy
</button>
@@ -39,7 +39,10 @@
display: inline-block;
padding: 10px;
font-size: $font-xxs;
color: $color-grey-medium;
// Migrating to CRA2 is messing up with the sass imports
// the `!important` here is a temporal fix, after all
// we will remove this styles once migrated to tailwind
color: $color-grey-medium !important;
text-decoration: none;
&:hover {
color:$color-grey-dark;

0 comments on commit b547fef

Please sign in to comment.
You can’t perform that action at this time.