typo & prettier

This commit is contained in:
Joshua Seigler 2022-10-10 17:21:20 -04:00
parent 4d52a58af7
commit 3c12c945c7
No known key found for this signature in database
4 changed files with 73 additions and 63 deletions

View file

@ -53,11 +53,12 @@ function Introduction() {
<main> <main>
<h2>Introduction</h2> <h2>Introduction</h2>
<p> <p>
This repo has a simple ToDo app mostly using React's <code>useState</code> hook. This repo has a simple ToDo app mostly using React's{' '}
<code>useState</code> hook.
</p> </p>
<p> <p>
We will rewrite this app with <code>useReducer</code>, <code>Redux</code>, <code>useContext</code>, and We will rewrite this app with <code>useReducer</code>,{' '}
something new, Preact <code>signal</code>s. <code>useContext</code>, and something new, Preact <code>signal</code>s.
</p> </p>
</main> </main>
) )

View file

@ -8,17 +8,17 @@ My updates:
/* Global variables. */ /* Global variables. */
:root { :root {
/* Set sans-serif & mono fonts */ /* Set sans-serif & mono fonts */
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, --sans-font: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir,
"Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica, 'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica,
"Helvetica Neue", sans-serif; 'Helvetica Neue', sans-serif;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; --mono-font: Consolas, Menlo, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
/* Default (light) theme */ /* Default (light) theme */
--bg: #fff; --bg: #fff;
--accent-bg: #f5f7ff; --accent-bg: #f5f7ff;
--text: #212121; --text: #212121;
--text-light: #585858; --text-light: #585858;
--border: #898EA4; --border: #898ea4;
--accent: #0d47a1; --accent: #0d47a1;
--code: #d81b60; --code: #d81b60;
--preformatted: #444; --preformatted: #444;
@ -50,7 +50,9 @@ My updates:
:root { :root {
box-sizing: border-box; box-sizing: border-box;
} }
*, ::before, ::after { *,
::before,
::after {
box-sizing: inherit; box-sizing: inherit;
} }
@ -149,7 +151,13 @@ h6 {
} }
/* Prevent long strings from overflowing container */ /* Prevent long strings from overflowing container */
p, h1, h2, h3, h4, h5, h6 { p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
@ -190,11 +198,11 @@ a:hover {
} }
button, button,
[role="button"], [role='button'],
input[type="submit"], input[type='submit'],
input[type="reset"], input[type='reset'],
input[type="button"], input[type='button'],
label[type="button"] { label[type='button'] {
border: none; border: none;
border-radius: 5px; border-radius: 5px;
background-color: var(--accent); background-color: var(--accent);
@ -205,12 +213,12 @@ label[type="button"] {
} }
button[disabled], button[disabled],
[role="button"][aria-disabled="true"], [role='button'][aria-disabled='true'],
input[type="submit"][disabled], input[type='submit'][disabled],
input[type="reset"][disabled], input[type='reset'][disabled],
input[type="button"][disabled], input[type='button'][disabled],
input[type="checkbox"][disabled], input[type='checkbox'][disabled],
input[type="radio"][disabled], input[type='radio'][disabled],
select[disabled] { select[disabled] {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
@ -223,7 +231,7 @@ select:disabled {
background-color: var(--disabled); background-color: var(--disabled);
} }
input[type="range"] { input[type='range'] {
padding: 0; padding: 0;
} }
@ -236,16 +244,16 @@ abbr[title] {
button:focus, button:focus,
button:enabled:hover, button:enabled:hover,
[role="button"]:focus, [role='button']:focus,
[role="button"]:not([aria-disabled="true"]):hover, [role='button']:not([aria-disabled='true']):hover,
input[type="submit"]:focus, input[type='submit']:focus,
input[type="submit"]:enabled:hover, input[type='submit']:enabled:hover,
input[type="reset"]:focus, input[type='reset']:focus,
input[type="reset"]:enabled:hover, input[type='reset']:enabled:hover,
input[type="button"]:focus, input[type='button']:focus,
input[type="button"]:enabled:hover, input[type='button']:enabled:hover,
label[type="button"]:focus, label[type='button']:focus,
label[type="button"]:hover { label[type='button']:hover {
filter: brightness(1.4); filter: brightness(1.4);
cursor: pointer; cursor: pointer;
} }
@ -305,7 +313,10 @@ header > nav a:hover {
} }
/* Consolidate box styling */ /* Consolidate box styling */
aside, details, pre, progress { aside,
details,
pre,
progress {
background-color: var(--accent-bg); background-color: var(--accent-bg);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 5px; border-radius: 5px;
@ -329,7 +340,8 @@ aside {
} }
} }
article, fieldset { article,
fieldset {
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 1rem; padding: 1rem;
border-radius: 5px; border-radius: 5px;
@ -449,30 +461,30 @@ select:not([multiple]) {
} }
/* checkbox and radio button style */ /* checkbox and radio button style */
input[type="checkbox"], input[type='checkbox'],
input[type="radio"] { input[type='radio'] {
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
width: min-content; width: min-content;
} }
input[type="checkbox"] + label, input[type='checkbox'] + label,
input[type="radio"] + label { input[type='radio'] + label {
display: inline-block; display: inline-block;
} }
input[type="radio"] { input[type='radio'] {
border-radius: 100%; border-radius: 100%;
} }
input[type="checkbox"]:checked, input[type='checkbox']:checked,
input[type="radio"]:checked { input[type='radio']:checked {
background-color: var(--accent); background-color: var(--accent);
} }
input[type="checkbox"]:checked::after { input[type='checkbox']:checked::after {
/* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */ /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
content: " "; content: ' ';
width: 0.18em; width: 0.18em;
height: 0.32em; height: 0.32em;
border-radius: 0; border-radius: 0;
@ -485,9 +497,9 @@ input[type="checkbox"]:checked::after {
font-size: 1.8em; font-size: 1.8em;
transform: rotate(45deg); transform: rotate(45deg);
} }
input[type="radio"]:checked::after { input[type='radio']:checked::after {
/* creates a colored circle for the checked radio button */ /* creates a colored circle for the checked radio button */
content: " "; content: ' ';
width: 0.25em; width: 0.25em;
height: 0.25em; height: 0.25em;
border-radius: 100%; border-radius: 100%;
@ -508,13 +520,13 @@ input[type="radio"]:checked::after {
} }
/* Set a height for color input */ /* Set a height for color input */
input[type="color"] { input[type='color'] {
height: 2.5rem; height: 2.5rem;
padding: 0.2rem; padding: 0.2rem;
} }
/* do not show border around file selector button */ /* do not show border around file selector button */
input[type="file"] { input[type='file'] {
border: 0; border: 0;
} }

View file

@ -1,11 +1,11 @@
import { UseState } from "./useState"; import { UseState } from './useState'
import { UseReducer } from "./useReducer"; import { UseReducer } from './useReducer'
import { UseContext } from "./useContext"; import { UseContext } from './useContext'
import { UseSignal } from "./useSignal"; import { UseSignal } from './useSignal'
export const strategies = [ export const strategies = [
{ name: 'useState', component: UseState }, { name: 'useState', component: UseState },
{ name: 'useReducer', component: UseReducer }, { name: 'useReducer', component: UseReducer },
{ name: 'useContext', component: UseContext }, { name: 'useContext', component: UseContext },
{ name: 'useSignal', component: UseSignal }, { name: 'useSignal', component: UseSignal }
] ]

View file

@ -78,7 +78,8 @@ export function UseContext() {
return ( return (
<main style={isLoading ? { pointerEvents: 'none', cursor: 'wait' } : {}}> <main style={isLoading ? { pointerEvents: 'none', cursor: 'wait' } : {}}>
<TodoContext.Provider value={{ <TodoContext.Provider
value={{
todos, todos,
dispatchTodoAction dispatchTodoAction
}}> }}>
@ -113,11 +114,7 @@ function TodoList() {
) )
} }
function TodoItem({ function TodoItem({ todo }: { todo: Todo }) {
todo
}: {
todo: Todo
}) {
const { dispatchTodoAction: dispatch } = useContext(TodoContext) const { dispatchTodoAction: dispatch } = useContext(TodoContext)
return ( return (
<label <label