Skip to content

Commit 29061dc

Browse files
Davicho-DevDavicho-Dev
committed
ADD: Storybook;
Installing and configuring Storybook and its dependencies
1 parent baa9d8d commit 29061dc

File tree

9 files changed

+6682
-339
lines changed

9 files changed

+6682
-339
lines changed

‎.eslintrc.json

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
"plugin:react/recommended",
1010
"plugin:prettier/recommended",
1111
"plugin:@typescript-eslint/recommended"
12-
1312
],
1413
"parser": "@typescript-eslint/parser",
1514
"parserOptions": {
@@ -33,6 +32,15 @@
3332
"usePrettierrc": true
3433
}
3534
],
35+
"@typescript-eslint/ban-types": [
36+
"error",
37+
{
38+
"extendDefaults": true,
39+
"types": {
40+
"{}": false
41+
}
42+
}
43+
],
3644
"react/react-in-jsx-scope": "off"
3745
}
3846
}

‎.storybook/main.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
stories: ['../src/**/*.story.@(js|jsx|ts|tsx)'],
3+
addons: [
4+
'@storybook/addon-links',
5+
'@storybook/addon-essentials',
6+
'@storybook/preset-create-react-app',
7+
],
8+
framework: '@storybook/react',
9+
core: {
10+
builder: 'webpack5',
11+
},
12+
}

‎.storybook/preview.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const parameters = {
2+
actions: { argTypesRegex: '^on[A-Z].*' },
3+
controls: {
4+
matchers: {
5+
color: /(background|color)$/i,
6+
date: /Date$/,
7+
},
8+
},
9+
}

‎package.json

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
"build": "react-scripts build",
66
"eject": "react-scripts eject",
77
"prettier:fix": "prettier --write .",
8+
"storybook": "start-storybook -p 4000 -s public",
9+
"build-storybook": "build-storybook -s public"
810
},
911
"dependencies": {
1012
"react": "^17.0.2",
@@ -13,6 +15,14 @@
1315
"web-vitals": "^2.1.0"
1416
},
1517
"devDependencies": {
18+
"@storybook/addon-actions": "^6.4.13",
19+
"@storybook/addon-essentials": "^6.4.13",
20+
"@storybook/addon-links": "^6.4.13",
21+
"@storybook/builder-webpack5": "^6.4.13",
22+
"@storybook/manager-webpack5": "^6.4.13",
23+
"@storybook/node-logger": "^6.4.13",
24+
"@storybook/preset-create-react-app": "^4.0.0",
25+
"@storybook/react": "^6.4.13",
1626
"@types/node": "^17.0.9",
1727
"@types/react": "^17.0.38",
1828
"@types/react-dom": "^17.0.11",
@@ -22,15 +32,24 @@
2232
"eslint-config-prettier": "^8.3.0",
2333
"eslint-plugin-prettier": "^4.0.0",
2434
"eslint-plugin-react": "^7.28.0",
35+
"eslint-plugin-storybook": "^0.5.5",
2536
"prettier": "2.5.1",
2637
"typescript": "^4.5.4",
2738
"webpack": "^5.66.0"
2839
},
2940
"eslintConfig": {
3041
"extends": [
31-
"react-app",
42+
"react-app"
3243
],
3344
"overrides": [
45+
{
46+
"files": [
47+
"**/*.stories.*"
48+
],
49+
"rules": {
50+
"import/no-anonymous-default-export": "off"
51+
}
52+
}
3453
]
3554
},
3655
"browserslist": {

‎public/index.html

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
<!DOCTYPE html>
22
<html lang='en'>
3-
<head>
4-
<meta charset='utf-8' />
5-
<meta content='width=device-width, initial-scale=1' name='viewport' />
6-
<meta content='#b7894f' name='theme-color' />
7-
<meta
8-
content='Web site created using create-react-app'
9-
name='description'
10-
/>
11-
<link href='%PUBLIC_URL%/favicon.ico' rel='icon' />
12-
<link href='%PUBLIC_URL%/logo192.png' rel='apple-touch-icon' />
13-
<!--<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />-->
14-
<title>HotelSweetDreams</title>
15-
</head>
16-
<body id='root'></body>
3+
<head>
4+
<meta charset='utf-8' />
5+
<meta content='width=device-width, initial-scale=1' name='viewport' />
6+
<meta content='#b7894f' name='theme-color' />
7+
<meta content='Web site created using create-react-app' name='description' />
8+
<link href='%PUBLIC_URL%/favicon.ico' rel='icon' />
9+
<link href='%PUBLIC_URL%/logo192.png' rel='apple-touch-icon' />
10+
<!--<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />-->
11+
<title>HotelSweetDreams</title>
12+
</head>
13+
<body id='root'></body>
1714
</html>

‎public/manifest.json

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
{
2-
"short_name": "React App",
3-
"name": "Create React App Sample",
4-
"icons": [
5-
{
6-
"src": "favicon.ico",
7-
"sizes": "64x64 32x32 24x24 16x16",
8-
"type": "image/x-icon"
9-
},
10-
{
11-
"src": "logo192.png",
12-
"type": "image/png",
13-
"sizes": "192x192"
14-
},
15-
{
16-
"src": "logo512.png",
17-
"type": "image/png",
18-
"sizes": "512x512"
19-
}
20-
],
21-
"start_url": ".",
22-
"display": "standalone",
23-
"theme_color": "#000000",
24-
"background_color": "#ffffff"
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
2525
}

‎src/App.tsx

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
1-
import React from 'react';
1+
import React from 'react'
22

33
function App() {
4-
return (
5-
<div className="App">
6-
<header className="App-header">
7-
8-
<p>
9-
Edit <code>src/App.tsx</code> and save to reload.
10-
</p>
11-
<a
12-
className="App-link"
13-
href="https://reactjs.org"
14-
target="_blank"
15-
rel="noopener noreferrer"
16-
>
17-
Learn React
18-
</a>
19-
</header>
20-
</div>
21-
);
4+
return (
5+
<div className='App'>
6+
<header className='App-header'>
7+
<p>
8+
Edit <code>src/App.tsx</code> and save to reload.
9+
</p>
10+
<a
11+
className='App-link'
12+
href='https://reactjs.org'
13+
target='_blank'
14+
rel='noopener noreferrer'
15+
>
16+
Learn React
17+
</a>
18+
</header>
19+
</div>
20+
)
2221
}
2322

24-
export default App;
23+
export default App

‎tsconfig.json

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,21 @@
11
{
2-
"compilerOptions": {
3-
"target": "es5",
4-
"lib": [
5-
"dom",
6-
"dom.iterable",
7-
"esnext"
8-
],
9-
"allowJs": true,
10-
"skipLibCheck": true,
11-
"esModuleInterop": true,
12-
"allowSyntheticDefaultImports": true,
13-
"strict": true,
14-
"forceConsistentCasingInFileNames": true,
15-
"noFallthroughCasesInSwitch": true,
16-
"module": "esnext",
17-
"moduleResolution": "node",
18-
"resolveJsonModule": true,
19-
"isolatedModules": true,
20-
"noEmit": true,
21-
"jsx": "react-jsx"
22-
},
23-
"include": [
24-
"src"
25-
]
2+
"compilerOptions": {
3+
"target": "es5",
4+
"types": ["cypress", "@testing-library/cypress"],
5+
"lib": ["dom", "dom.iterable", "esnext"],
6+
"allowJs": true,
7+
"skipLibCheck": true,
8+
"esModuleInterop": true,
9+
"allowSyntheticDefaultImports": true,
10+
"strict": true,
11+
"forceConsistentCasingInFileNames": true,
12+
"noFallthroughCasesInSwitch": true,
13+
"module": "esnext",
14+
"moduleResolution": "node",
15+
"resolveJsonModule": true,
16+
"isolatedModules": true,
17+
"noEmit": true,
18+
"jsx": "react-jsx"
19+
},
20+
"include": ["src"]
2621
}

0 commit comments

Comments
 (0)