Skip to content
This repository was archived by the owner on Dec 26, 2022. It is now read-only.

Commit ff7fa08

Browse files
committed
📦 Webpack Configuration Upgrade
Storybook Webpack Upgrade Webpack Configuration from Javascript to TypeScript
1 parent d277efd commit ff7fa08

22 files changed

+504
-219
lines changed

‎.babelrc

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎.env.example

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
API_BASE_URL=
1+
API_BASE_URL=<your api url>

‎.storybook/main.js

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎.storybook/main.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import path from 'path';
2+
3+
export default {
4+
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
5+
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
6+
core: {
7+
builder: 'webpack5',
8+
},
9+
webpackFinal: (config: any) => {
10+
config.module.rules.find((rule: any) => rule.test && rule.test.test('.svg')).exclude = /\.svg$/;
11+
12+
config.module.rules.push({
13+
test: /\.svg$/,
14+
loader: require.resolve('@svgr/webpack'),
15+
enforce: 'pre',
16+
});
17+
18+
return {
19+
...config,
20+
resolve: {
21+
...config.resolve,
22+
alias: {
23+
assets: path.resolve(__dirname, '..', 'src', 'assets'),
24+
components: path.resolve(__dirname, '..', 'src', 'components'),
25+
styles: path.resolve(__dirname, '..', 'src', 'styles'),
26+
stories: path.resolve(__dirname, '..', 'src', 'stories'),
27+
utils: path.resolve(__dirname, '..', 'src', 'utils'),
28+
},
29+
},
30+
};
31+
},
32+
};
Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
21
export const parameters = {
3-
actions: { argTypesRegex: "^on[A-Z].*" },
2+
actions: { argTypesRegex: '^on[A-Z].*' },
43
controls: {
54
matchers: {
65
color: /(background|color)$/i,
76
date: /Date$/,
87
},
98
},
10-
}
9+
};

‎jest.config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export default {
22
// The root of your source code, typically /src
33
// `<rootDir>` is a token Jest substitutes
44
roots: ['<rootDir>/src'],
5+
testEnvironment: 'jsdom',
56
// Jest transformations -- this adds support for TypeScript
67
// using ts-jest
78
transform: {

‎package.json

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@
1414
],
1515
"license": "ISC",
1616
"author": "Tushar Mistry",
17-
"main": "index.js",
17+
"main": "src/index.tsx",
1818
"scripts": {
19-
"start": "cross-env APP_ENV=local NODE_ENV=development webpack serve --config webpack/webpack.config.js --env env=dev",
20-
"build": "cross-env APP_ENV=production NODE_ENV=production webpack --config webpack/webpack.config.js --env env=prod",
21-
"analyze": "webpack --config webpack/webpack.config.js --env env=prod --analyze",
19+
"start": "cross-env APP_ENV=local NODE_ENV=development webpack serve --config webpack.config.ts --env env=development",
20+
"build": "cross-env APP_ENV=production NODE_ENV=production webpack --config webpack.config.ts --env env=production",
21+
"analyze": "cross-env APP_ENV=production NODE_ENV=production webpack --config webpack.config.ts --env env=prod --analyze",
2222
"lint": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx,scss,css,json}\"",
2323
"format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,scss,css,json,md}\"",
2424
"test": "jest -c jest.config.ts",
@@ -38,14 +38,15 @@
3838
"@babel/runtime": "^7.14.0",
3939
"@svgr/webpack": "^5.5.0",
4040
"babel-loader": "^8.2.2",
41+
"babel-plugin-styled-components": "1.13.2",
4142
"copy-webpack-plugin": "^9.0.1",
4243
"cross-env": "^7.0.3",
4344
"css-loader": "^6.2.0",
4445
"dotenv-webpack": "^7.0.2",
4546
"html-webpack-plugin": "^5.3.1",
47+
"mini-css-extract-plugin": "^2.2.2",
4648
"react": "^17.0.2",
4749
"react-dom": "^17.0.2",
48-
"style-loader": "^3.2.1",
4950
"styled-components": "^5.3.0",
5051
"terser-webpack-plugin": "^5.2.4",
5152
"ts-loader": "^9.2.5",
@@ -55,41 +56,52 @@
5556
"webpack-merge": "^5.7.3"
5657
},
5758
"devDependencies": {
58-
"@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
59-
"@storybook/addon-actions": "^6.2.9",
60-
"@storybook/addon-essentials": "^6.2.9",
61-
"@storybook/addon-links": "^6.2.9",
62-
"@storybook/builder-webpack5": "^6.2.9",
59+
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
60+
"@storybook/addon-essentials": "^6.3.8",
61+
"@storybook/addon-actions": "^6.3.8",
62+
"@storybook/addon-links": "^6.3.8",
63+
"@storybook/builder-webpack5": "^6.3.8",
64+
"@storybook/components": "6.3.8",
6365
"@storybook/manager-webpack5": "^6.3.8",
64-
"@storybook/react": "^6.2.9",
66+
"@storybook/react": "^6.3.8",
6567
"@storybook/theming": "^6.3.8",
6668
"@testing-library/jest-dom": "^5.12.0",
6769
"@testing-library/react": "^12.0.0",
70+
"@types/copy-webpack-plugin": "^8.0.1",
71+
"@types/dotenv-webpack": "^7.0.3",
72+
"@types/html-webpack-plugin": "^3.2.6",
6873
"@types/jest": "^27.0.1",
74+
"@types/mini-css-extract-plugin": "^2.2.0",
6975
"@types/node": "^16.9.1",
7076
"@types/react": "^17.0.20",
7177
"@types/react-dom": "^17.0.5",
7278
"@types/styled-components": "^5.1.14",
79+
"@types/testing-library__jest-dom": "^5.14.1",
80+
"@types/webpack-dev-server": "^4.1.0",
7381
"@typescript-eslint/eslint-plugin": "^4.31.0",
7482
"@typescript-eslint/parser": "^4.31.0",
7583
"eslint": "^7.26.0",
76-
"eslint-config-airbnb": "18.2.1",
84+
"eslint-config-airbnb": "^18.2.1",
7785
"eslint-config-prettier": "^8.3.0",
7886
"eslint-plugin-import": "^2.23.1",
7987
"eslint-plugin-jest": "^24.3.6",
8088
"eslint-plugin-jsx-a11y": "^6.4.1",
8189
"eslint-plugin-prettier": "^4.0.0",
8290
"eslint-plugin-react": "^7.23.2",
8391
"eslint-plugin-react-hooks": "^4.2.0",
84-
"husky": "7.0.2",
92+
"husky": "^7.0.2",
8593
"jest": "^27.1.1",
8694
"lint-staged": "^11.0.0",
8795
"netlify-cli": "^6.8.12",
8896
"prettier": "^2.4.0",
89-
"react-refresh": "^0.10.0",
90-
"ts-jest": "27.0.5",
91-
"ts-node": "10.2.1",
92-
"webpack-bundle-analyzer": "4.4.2",
93-
"webpack-dev-server": "4.2.0"
97+
"react-refresh": "^0.9.0",
98+
"style-loader": "^3.2.1",
99+
"ts-jest": "^27.0.5",
100+
"ts-node": "^10.2.1",
101+
"webpack-bundle-analyzer": "^4.4.2",
102+
"webpack-dev-server": "^4.2.0"
103+
},
104+
"peerDependencies": {
105+
"react-is": "16.8.0"
94106
}
95107
}

‎public/favicon.ico

15 KB
Binary file not shown.

‎public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<link rel="preconnect" href="https://fonts.gstatic.com" />
8+
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
89
<title>React-Template</title>
910
</head>
1011
<body>

‎src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC } from 'react';
1+
import React, { FC } from 'react';
22
import { Container, Header, Image, Link } from 'styles/App.style';
33
import logo from 'assets/png/logo512.png';
44
import GlobalStyle from 'styles/globalStyles';

0 commit comments

Comments
 (0)