Skip to content

Commit

Permalink
starting point for the tutorial
Browse files Browse the repository at this point in the history
  • Loading branch information
winkerVSbecks committed May 19, 2022
1 parent 9d08904 commit ac77446
Show file tree
Hide file tree
Showing 21 changed files with 10,579 additions and 4,244 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,5 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*

build-storybook.log
31 changes: 31 additions & 0 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
const path = require('path');

const toPath = (_path) => path.join(process.cwd(), _path);

module.exports = {
staticDirs: ['../public'],
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app',
],
core: {
builder: {
name: 'webpack5',
},
},
webpackFinal: async (config) => {
return {
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
'@emotion/core': toPath('node_modules/@emotion/react'),
'emotion-theming': toPath('node_modules/@emotion/react'),
},
},
};
},
};
4 changes: 4 additions & 0 deletions .storybook/preview-head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<link
href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,800,900&display=swap"
rel="stylesheet"
/>
28 changes: 28 additions & 0 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import { theme } from '../src/theme';

export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
backgrounds: {
default: 'blue',
values: [
{ name: 'blue', value: '#2cc5d2' },
{ name: 'white', value: '#fff' },
],
},
};

export const decorators = [
(Story) => (
<ChakraProvider theme={theme}>
<Story />
</ChakraProvider>
),
];
37 changes: 32 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,26 +1,43 @@
{
"name": "ui-testing-code",
"name": "ui-testing-guide-code",
"version": "0.1.0",
"private": true,
"dependencies": {
"@chakra-ui/icons": "^1.0.12",
"@chakra-ui/react": "^1.6.0",
"@emotion/react": "^11",
"@emotion/styled": "^11",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"framer-motion": "^4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-scripts": "^5.0.1",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
"build": "SKIP_PREFLIGHT_CHECK=true react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
Expand All @@ -34,5 +51,15 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@storybook/addon-actions": "^6.5.3",
"@storybook/addon-essentials": "^6.5.3",
"@storybook/addon-links": "^6.5.3",
"@storybook/builder-webpack5": "^6.5.3",
"@storybook/manager-webpack5": "^6.5.3",
"@storybook/node-logger": "^6.5.3",
"@storybook/preset-create-react-app": "^4.1.0",
"@storybook/react": "^6.5.3"
}
}
6 changes: 5 additions & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,11 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Taskbox app</title>
<link
href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,800,900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
38 changes: 0 additions & 38 deletions src/App.css

This file was deleted.

28 changes: 10 additions & 18 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,16 @@
import logo from './logo.svg';
import './App.css';
import { ChakraProvider } from '@chakra-ui/react';
import { InboxScreen } from './InboxScreen';
import { LoginScreen } from './LoginScreen';
import { theme } from './theme';
import { useAuth } from './useAuth';

function App() {
const [user, logIn] = useAuth();

return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<ChakraProvider theme={theme}>
{user?.token ? <InboxScreen /> : <LoginScreen onLogIn={logIn} />}
</ChakraProvider>
);
}

Expand Down
8 changes: 0 additions & 8 deletions src/App.test.js

This file was deleted.

80 changes: 80 additions & 0 deletions src/InboxScreen.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Box, Heading } from '@chakra-ui/react';
import { Icon } from '@chakra-ui/react';
import { TaskList } from './components/TaskList';
import { EmptyState } from './components/EmptyState';
import { useTasks } from './useTasks';

const FrownIcon = (props) => (
<Icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M16 16s-1.5-2-4-2-4 2-4 2M9 9h.01M15 9h.01" />
</Icon>
);

export const InboxScreen = ({ error }) => {
const [tasks, dispatch] = useTasks();

const archiveTask = (archive, id) => {
dispatch({ type: archive ? 'ARCHIVE_TASK' : 'INBOX_TASK', id });
};

const togglePinTask = (state, id) => {
dispatch({ type: state === 'TASK_PINNED' ? 'INBOX_TASK' : 'PIN_TASK', id });
};

const editTitle = (title, id) => {
dispatch({ type: 'EDIT_TITLE', id, title });
};

if (error) {
return (
<EmptyState
h="75vh"
Icon={FrownIcon}
title="Oh no!"
subtitle="Something went wrong"
/>
);
}

return (
<Box p={4} bg="brand.300">
<Box as="nav" bg="brand.200" py={6} px={5}>
<Heading
as="h1"
fontSize="lg"
lineHeight="8"
color="brand.500"
textAlign={['center', 'center', 'left']}
>
Taskbox
</Heading>
</Box>
<TaskList
tasks={tasks}
onArchiveTask={archiveTask}
onTogglePinTask={togglePinTask}
onEditTitle={editTitle}
/>
</Box>
);
};

InboxScreen.propTypes = {
error: PropTypes.string,
};

InboxScreen.defaultProps = {
error: null,
};
Loading

0 comments on commit ac77446

Please sign in to comment.