Skip to content

Commit ac77446

Browse files
winkerVSbeckswinkerVSbecks
committed
starting point for the tutorial
1 parent 9d08904 commit ac77446

File tree

21 files changed

+10579
-4244
lines changed

21 files changed

+10579
-4244
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,5 @@
2121
npm-debug.log*
2222
yarn-debug.log*
2323
yarn-error.log*
24+
25+
build-storybook.log

‎.storybook/main.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const path = require('path');
2+
3+
const toPath = (_path) => path.join(process.cwd(), _path);
4+
5+
module.exports = {
6+
staticDirs: ['../public'],
7+
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
8+
addons: [
9+
'@storybook/addon-links',
10+
'@storybook/addon-essentials',
11+
'@storybook/preset-create-react-app',
12+
],
13+
core: {
14+
builder: {
15+
name: 'webpack5',
16+
},
17+
},
18+
webpackFinal: async (config) => {
19+
return {
20+
...config,
21+
resolve: {
22+
...config.resolve,
23+
alias: {
24+
...config.resolve.alias,
25+
'@emotion/core': toPath('node_modules/@emotion/react'),
26+
'emotion-theming': toPath('node_modules/@emotion/react'),
27+
},
28+
},
29+
};
30+
},
31+
};

‎.storybook/preview-head.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<link
2+
href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,800,900&display=swap"
3+
rel="stylesheet"
4+
/>

‎.storybook/preview.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import { ChakraProvider } from '@chakra-ui/react';
3+
import { theme } from '../src/theme';
4+
5+
export const parameters = {
6+
actions: { argTypesRegex: '^on[A-Z].*' },
7+
controls: {
8+
matchers: {
9+
color: /(background|color)$/i,
10+
date: /Date$/,
11+
},
12+
},
13+
backgrounds: {
14+
default: 'blue',
15+
values: [
16+
{ name: 'blue', value: '#2cc5d2' },
17+
{ name: 'white', value: '#fff' },
18+
],
19+
},
20+
};
21+
22+
export const decorators = [
23+
(Story) => (
24+
<ChakraProvider theme={theme}>
25+
<Story />
26+
</ChakraProvider>
27+
),
28+
];

‎package.json‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,43 @@
11
{
2-
"name": "ui-testing-code",
2+
"name": "ui-testing-guide-code",
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@chakra-ui/icons": "^1.0.12",
7+
"@chakra-ui/react": "^1.6.0",
8+
"@emotion/react": "^11",
9+
"@emotion/styled": "^11",
610
"@testing-library/jest-dom": "^5.11.4",
711
"@testing-library/react": "^11.1.0",
812
"@testing-library/user-event": "^12.1.10",
13+
"framer-motion": "^4",
914
"react": "^17.0.2",
1015
"react-dom": "^17.0.2",
11-
"react-scripts": "4.0.3",
16+
"react-scripts": "^5.0.1",
1217
"web-vitals": "^1.0.1"
1318
},
1419
"scripts": {
15-
"start": "react-scripts start",
16-
"build": "react-scripts build",
20+
"start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
21+
"build": "SKIP_PREFLIGHT_CHECK=true react-scripts build",
1722
"test": "react-scripts test",
18-
"eject": "react-scripts eject"
23+
"eject": "react-scripts eject",
24+
"storybook": "start-storybook -p 6006",
25+
"build-storybook": "build-storybook"
1926
},
2027
"eslintConfig": {
2128
"extends": [
2229
"react-app",
2330
"react-app/jest"
31+
],
32+
"overrides": [
33+
{
34+
"files": [
35+
"**/*.stories.*"
36+
],
37+
"rules": {
38+
"import/no-anonymous-default-export": "off"
39+
}
40+
}
2441
]
2542
},
2643
"browserslist": {
@@ -34,5 +51,15 @@
3451
"last 1 firefox version",
3552
"last 1 safari version"
3653
]
54+
},
55+
"devDependencies": {
56+
"@storybook/addon-actions": "^6.5.3",
57+
"@storybook/addon-essentials": "^6.5.3",
58+
"@storybook/addon-links": "^6.5.3",
59+
"@storybook/builder-webpack5": "^6.5.3",
60+
"@storybook/manager-webpack5": "^6.5.3",
61+
"@storybook/node-logger": "^6.5.3",
62+
"@storybook/preset-create-react-app": "^4.1.0",
63+
"@storybook/react": "^6.5.3"
3764
}
3865
}

‎public/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,11 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>Taskbox app</title>
28+
<link
29+
href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,800,900&display=swap"
30+
rel="stylesheet"
31+
/>
2832
</head>
2933
<body>
3034
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.css‎

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

‎src/App.js‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,16 @@
1-
import logo from './logo.svg';
2-
import './App.css';
1+
import { ChakraProvider } from '@chakra-ui/react';
2+
import { InboxScreen } from './InboxScreen';
3+
import { LoginScreen } from './LoginScreen';
4+
import { theme } from './theme';
5+
import { useAuth } from './useAuth';
36

47
function App() {
8+
const [user, logIn] = useAuth();
9+
510
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
11+
<ChakraProvider theme={theme}>
12+
{user?.token ? <InboxScreen /> : <LoginScreen onLogIn={logIn} />}
13+
</ChakraProvider>
2214
);
2315
}
2416

‎src/App.test.js‎

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

‎src/InboxScreen.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { Box, Heading } from '@chakra-ui/react';
4+
import { Icon } from '@chakra-ui/react';
5+
import { TaskList } from './components/TaskList';
6+
import { EmptyState } from './components/EmptyState';
7+
import { useTasks } from './useTasks';
8+
9+
const FrownIcon = (props) => (
10+
<Icon
11+
xmlns="http://www.w3.org/2000/svg"
12+
viewBox="0 0 24 24"
13+
fill="none"
14+
stroke="currentColor"
15+
strokeWidth={2}
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
{...props}
19+
>
20+
<circle cx="12" cy="12" r="10"></circle>
21+
<path d="M16 16s-1.5-2-4-2-4 2-4 2M9 9h.01M15 9h.01" />
22+
</Icon>
23+
);
24+
25+
export const InboxScreen = ({ error }) => {
26+
const [tasks, dispatch] = useTasks();
27+
28+
const archiveTask = (archive, id) => {
29+
dispatch({ type: archive ? 'ARCHIVE_TASK' : 'INBOX_TASK', id });
30+
};
31+
32+
const togglePinTask = (state, id) => {
33+
dispatch({ type: state === 'TASK_PINNED' ? 'INBOX_TASK' : 'PIN_TASK', id });
34+
};
35+
36+
const editTitle = (title, id) => {
37+
dispatch({ type: 'EDIT_TITLE', id, title });
38+
};
39+
40+
if (error) {
41+
return (
42+
<EmptyState
43+
h="75vh"
44+
Icon={FrownIcon}
45+
title="Oh no!"
46+
subtitle="Something went wrong"
47+
/>
48+
);
49+
}
50+
51+
return (
52+
<Box p={4} bg="brand.300">
53+
<Box as="nav" bg="brand.200" py={6} px={5}>
54+
<Heading
55+
as="h1"
56+
fontSize="lg"
57+
lineHeight="8"
58+
color="brand.500"
59+
textAlign={['center', 'center', 'left']}
60+
>
61+
Taskbox
62+
</Heading>
63+
</Box>
64+
<TaskList
65+
tasks={tasks}
66+
onArchiveTask={archiveTask}
67+
onTogglePinTask={togglePinTask}
68+
onEditTitle={editTitle}
69+
/>
70+
</Box>
71+
);
72+
};
73+
74+
InboxScreen.propTypes = {
75+
error: PropTypes.string,
76+
};
77+
78+
InboxScreen.defaultProps = {
79+
error: null,
80+
};

0 commit comments

Comments
 (0)