├── Chapter01 ├── toUpperCase.ts └── toggle.html ├── Chapter04 ├── geolocation │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ ├── Geolocation.tsx │ │ │ └── GeolocationContainer.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock └── hocs │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── components │ │ └── MyComponent │ │ │ ├── WithInnerWidth.tsx │ │ │ └── index.tsx │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── Chapter05 ├── animations │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ └── Transition │ │ │ │ ├── Transition.css │ │ │ │ └── index.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── controlled-components │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ └── Controlled │ │ │ │ └── index.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── event-switch │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ └── Button │ │ │ │ └── index.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── refs │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ └── Focus │ │ │ │ └── index.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── svg │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ └── Circles │ │ │ │ ├── Circle.tsx │ │ │ │ └── RedCircle.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock └── uncontrolled-components │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── components │ │ └── Uncontrolled │ │ │ └── index.tsx │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── Chapter06 ├── css-modules │ ├── .babelrc │ ├── .gitignore │ ├── package.json │ ├── src │ │ ├── declarations.d.ts │ │ ├── index.css │ │ ├── index.html │ │ └── index.tsx │ ├── tsconfig.json │ ├── webpack.config.js │ └── yarn.lock ├── inline-styles │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ └── FontSize │ │ │ │ └── index.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock └── styled-components │ ├── .babelrc │ ├── .gitignore │ ├── package.json │ ├── src │ ├── components │ │ └── Button │ │ │ └── index.tsx │ ├── index.html │ └── index.tsx │ ├── tsconfig.json │ ├── webpack.config.js │ └── yarn.lock ├── Chapter07 ├── counter │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ └── Counter │ │ │ │ └── index.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock └── keys │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── components │ │ └── List │ │ │ └── index.tsx │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── Chapter08 ├── 1-react-hooks │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── Counter.tsx │ │ ├── Issues.tsx │ │ ├── Issues2.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── 2-todo │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── List.tsx │ │ ├── Task.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock └── 3-reducer │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.tsx │ ├── Notes.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── Chapter09 ├── react-router-v6.4 │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ ├── About │ │ │ │ └── index.tsx │ │ │ ├── Error404 │ │ │ │ └── index.tsx │ │ │ ├── Home │ │ │ │ └── index.tsx │ │ │ └── Pokemons │ │ │ │ └── index.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── react-router-with-params │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ ├── About │ │ │ │ └── index.tsx │ │ │ ├── Contact │ │ │ │ └── index.tsx │ │ │ ├── Contacts │ │ │ │ ├── Contacts.css │ │ │ │ └── index.tsx │ │ │ ├── Error404 │ │ │ │ └── index.tsx │ │ │ └── Home │ │ │ │ └── index.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ ├── routes.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock └── react-router │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── About.tsx │ │ ├── Contact.tsx │ │ ├── Error404.tsx │ │ └── Home.tsx │ ├── index.css │ ├── main.tsx │ ├── routes.tsx │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── Chapter11 ├── context-api │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ ├── App.css │ │ │ ├── App.tsx │ │ │ └── Issues.tsx │ │ ├── contexts │ │ │ └── Issue.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── react-suspense-with-swr │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ ├── App.tsx │ │ │ └── Pokemon │ │ │ │ ├── LoadingSkeleton.tsx │ │ │ │ ├── PokeContainer.tsx │ │ │ │ ├── Pokedex.tsx │ │ │ │ ├── Pokemon.styled.ts │ │ │ │ ├── Pokemon.tsx │ │ │ │ └── fetcher.ts │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock └── redux-toolkit │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── Counter.tsx │ ├── assets │ │ └── react.svg │ ├── counterSlice.ts │ ├── index.css │ ├── main.tsx │ ├── rootReducer.ts │ ├── store.ts │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── Chapter12 ├── data-fetching │ ├── .babelrc │ ├── .gitignore │ ├── dist │ │ ├── public │ │ │ └── bundle.js │ │ └── server.js │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── client.tsx │ │ ├── declarations.d.ts │ │ ├── server.tsx │ │ └── template.ts │ ├── tsconfig.json │ └── webpack.config.js ├── next │ ├── .gitignore │ ├── next-env.d.ts │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ └── index.tsx │ └── tsconfig.json └── server-side-rendering │ ├── .babelrc │ ├── .gitignore │ ├── dist │ ├── public │ │ └── bundle.js │ └── server.js │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.tsx │ ├── client.tsx │ ├── declarations.d.ts │ ├── server.tsx │ └── template.ts │ ├── tsconfig.json │ └── webpack.config.js ├── Chapter13 └── graphql │ ├── .nvm │ ├── backend │ ├── .env │ ├── .env.example │ ├── .gitignore │ ├── apps.json │ ├── config │ │ ├── config.json │ │ └── index.ts │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── graphql │ │ │ ├── resolvers │ │ │ │ ├── index.ts │ │ │ │ └── user.ts │ │ │ └── types │ │ │ │ ├── Scalar.ts │ │ │ │ ├── User.ts │ │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── lib │ │ │ ├── auth.ts │ │ │ └── jwt.ts │ │ ├── models │ │ │ ├── User.ts │ │ │ └── index.ts │ │ └── types │ │ │ ├── index.ts │ │ │ ├── interfaces.ts │ │ │ └── types.ts │ └── tsconfig.json │ └── frontend │ ├── .babelrc │ ├── .editorconfig │ ├── .env.example │ ├── .gitignore │ ├── .prettierrc │ ├── apps.json │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── client │ │ ├── AppRoutes.tsx │ │ ├── components │ │ │ ├── dashboard │ │ │ │ ├── Dashboard.tsx │ │ │ │ └── DashboardLayout.tsx │ │ │ └── users │ │ │ │ ├── Login.styled.ts │ │ │ │ ├── Login.tsx │ │ │ │ └── LoginLayout.tsx │ │ ├── contexts │ │ │ └── user.tsx │ │ ├── graphql │ │ │ └── user │ │ │ │ ├── getUser.query.ts │ │ │ │ └── login.mutation.ts │ │ ├── index.html │ │ ├── index.tsx │ │ └── pages │ │ │ ├── dashboard.tsx │ │ │ ├── error404.tsx │ │ │ ├── home.tsx │ │ │ └── login.tsx │ ├── config.ts │ └── server │ │ ├── devServer.ts │ │ ├── html.ts │ │ ├── index.ts │ │ ├── lib │ │ ├── jwt.ts │ │ └── middlewares │ │ │ └── user.ts │ │ └── server.ts │ ├── tsconfig.json │ ├── webpack.config.ts │ └── webpack │ ├── loadPresets.ts │ ├── presets │ ├── webpack.client.ts │ └── webpack.server.ts │ ├── webpack.common.ts │ ├── webpack.development.ts │ ├── webpack.production.ts │ └── webpack.types.ts ├── Chapter14 ├── monorepo │ ├── .editorconfig │ ├── .eslintignore │ ├── .eslintrc.yml │ ├── .gitignore │ ├── .nvmrc │ ├── .prettierignore │ ├── .prettierrc.yml │ ├── .vscode │ │ ├── extensions.json │ │ └── settings.json │ ├── README.md │ ├── package-lock.json │ ├── package.json │ └── packages │ │ ├── api │ │ ├── index.js │ │ └── package.json │ │ └── frontend │ │ ├── index.js │ │ └── package.json └── web-creator │ ├── .editorconfig │ ├── .eslintignore │ ├── .eslintrc.yml │ ├── .gitignore │ ├── .nvmrc │ ├── .prettierignore │ ├── .prettierrc.yml │ ├── .vscode │ ├── extensions.json │ └── settings.json │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── packages │ ├── api │ │ ├── .env.example │ │ ├── package.json │ │ ├── src │ │ │ ├── config.ts │ │ │ ├── graphql │ │ │ │ ├── resolvers │ │ │ │ │ └── user.ts │ │ │ │ └── types │ │ │ │ │ ├── Error.ts │ │ │ │ │ ├── Scalar.ts │ │ │ │ │ └── User.ts │ │ │ ├── index.ts │ │ │ ├── models │ │ │ │ └── User.ts │ │ │ ├── services │ │ │ │ ├── crm │ │ │ │ │ ├── config.ts │ │ │ │ │ ├── graphql │ │ │ │ │ │ ├── resolvers │ │ │ │ │ │ │ ├── guest.ts │ │ │ │ │ │ │ └── index.ts │ │ │ │ │ │ └── types │ │ │ │ │ │ │ ├── Guest.ts │ │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── models │ │ │ │ │ │ ├── Guest.ts │ │ │ │ │ │ └── index.ts │ │ │ │ │ └── seeds │ │ │ │ │ │ └── index.ts │ │ │ │ └── default │ │ │ │ │ └── config.ts │ │ │ └── types │ │ │ │ ├── config.ts │ │ │ │ ├── index.ts │ │ │ │ ├── model.ts │ │ │ │ └── sequelize.ts │ │ └── tsconfig.json │ ├── authentication │ │ ├── package.json │ │ ├── src │ │ │ ├── authentication.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── design-system │ │ ├── global.d.ts │ │ ├── package.json │ │ ├── sandbox │ │ │ ├── App.styled.ts │ │ │ ├── App.tsx │ │ │ ├── Content.tsx │ │ │ ├── GlobalStyles.tsx │ │ │ ├── Sidebar.tsx │ │ │ ├── bg.png │ │ │ ├── fonts │ │ │ │ └── poppins.ts │ │ │ ├── global.d.ts │ │ │ ├── index.html │ │ │ ├── index.tsx │ │ │ └── stories.tsx │ │ ├── src │ │ │ ├── components │ │ │ │ ├── Alert │ │ │ │ │ ├── Alert.stories.tsx │ │ │ │ │ ├── Alert.styled.ts │ │ │ │ │ ├── Alert.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Avatar │ │ │ │ │ ├── Avatar.stories.tsx │ │ │ │ │ ├── Avatar.styled.ts │ │ │ │ │ ├── Avatar.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Badge │ │ │ │ │ ├── Badge.stories.tsx │ │ │ │ │ ├── Badge.styled.ts │ │ │ │ │ ├── Badge.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Breadcrumb │ │ │ │ │ ├── Breadcrumb.stories.tsx │ │ │ │ │ ├── Breadcrumb.styled.ts │ │ │ │ │ ├── Breadcrumb.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Button │ │ │ │ │ ├── Button.stories.tsx │ │ │ │ │ ├── Button.styled.ts │ │ │ │ │ ├── Button.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Calendar │ │ │ │ │ ├── Calendar.stories.tsx │ │ │ │ │ ├── Calendar.styled.ts │ │ │ │ │ ├── Calendar.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Checkbox │ │ │ │ │ ├── Checkbox.stories.tsx │ │ │ │ │ ├── Checkbox.styled.ts │ │ │ │ │ ├── Checkbox.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── DayPicker │ │ │ │ │ ├── DayPicker.stories.tsx │ │ │ │ │ ├── DayPicker.styled.ts │ │ │ │ │ ├── DayPicker.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Dialog │ │ │ │ │ ├── Dialog.stories.tsx │ │ │ │ │ ├── Dialog.styled.ts │ │ │ │ │ ├── Dialog.tsx │ │ │ │ │ ├── icons │ │ │ │ │ │ └── close.svg │ │ │ │ │ └── index.ts │ │ │ │ ├── GlobalStyles │ │ │ │ │ ├── GlobalStyles.tsx │ │ │ │ │ ├── fonts │ │ │ │ │ │ └── poppins.ts │ │ │ │ │ └── index.ts │ │ │ │ ├── Icon │ │ │ │ │ ├── Icon.tsx │ │ │ │ │ ├── icons │ │ │ │ │ │ ├── feather │ │ │ │ │ │ │ ├── alert-circle.svg │ │ │ │ │ │ │ ├── alert-octagon.svg │ │ │ │ │ │ │ ├── alert-triangle.svg │ │ │ │ │ │ │ ├── align-center.svg │ │ │ │ │ │ │ ├── align-justify.svg │ │ │ │ │ │ │ ├── align-left.svg │ │ │ │ │ │ │ ├── align-right.svg │ │ │ │ │ │ │ ├── archive.svg │ │ │ │ │ │ │ ├── arrow-down-circle.svg │ │ │ │ │ │ │ ├── arrow-down-left.svg │ │ │ │ │ │ │ ├── arrow-down-right.svg │ │ │ │ │ │ │ ├── arrow-down.svg │ │ │ │ │ │ │ ├── arrow-left-circle.svg │ │ │ │ │ │ │ ├── arrow-left.svg │ │ │ │ │ │ │ ├── arrow-right-circle.svg │ │ │ │ │ │ │ ├── arrow-right.svg │ │ │ │ │ │ │ ├── arrow-up-circle.svg │ │ │ │ │ │ │ ├── arrow-up-left.svg │ │ │ │ │ │ │ ├── arrow-up-right.svg │ │ │ │ │ │ │ ├── arrow-up.svg │ │ │ │ │ │ │ ├── at-sign.svg │ │ │ │ │ │ │ ├── award.svg │ │ │ │ │ │ │ ├── bar-chart-2.svg │ │ │ │ │ │ │ ├── bar-chart.svg │ │ │ │ │ │ │ ├── bell-off.svg │ │ │ │ │ │ │ ├── bell.svg │ │ │ │ │ │ │ ├── bold.svg │ │ │ │ │ │ │ ├── book-open.svg │ │ │ │ │ │ │ ├── book.svg │ │ │ │ │ │ │ ├── bookmark.svg │ │ │ │ │ │ │ ├── box.svg │ │ │ │ │ │ │ ├── briefcase.svg │ │ │ │ │ │ │ ├── calendar.svg │ │ │ │ │ │ │ ├── camera-off.svg │ │ │ │ │ │ │ ├── camera.svg │ │ │ │ │ │ │ ├── check-circle.svg │ │ │ │ │ │ │ ├── check-square.svg │ │ │ │ │ │ │ ├── check.svg │ │ │ │ │ │ │ ├── chevron-down.svg │ │ │ │ │ │ │ ├── chevron-left.svg │ │ │ │ │ │ │ ├── chevron-right.svg │ │ │ │ │ │ │ ├── chevron-up.svg │ │ │ │ │ │ │ ├── chevrons-down.svg │ │ │ │ │ │ │ ├── chevrons-left.svg │ │ │ │ │ │ │ ├── chevrons-right.svg │ │ │ │ │ │ │ ├── chevrons-up.svg │ │ │ │ │ │ │ ├── circle.svg │ │ │ │ │ │ │ ├── clipboard.svg │ │ │ │ │ │ │ ├── clock.svg │ │ │ │ │ │ │ ├── cloud-off.svg │ │ │ │ │ │ │ ├── code.svg │ │ │ │ │ │ │ ├── coffee.svg │ │ │ │ │ │ │ ├── columns.svg │ │ │ │ │ │ │ ├── command.svg │ │ │ │ │ │ │ ├── copy.svg │ │ │ │ │ │ │ ├── cpu.svg │ │ │ │ │ │ │ ├── credit-card.svg │ │ │ │ │ │ │ ├── crop.svg │ │ │ │ │ │ │ ├── crosshair.svg │ │ │ │ │ │ │ ├── database.svg │ │ │ │ │ │ │ ├── delete.svg │ │ │ │ │ │ │ ├── disc.svg │ │ │ │ │ │ │ ├── dollar-sign.svg │ │ │ │ │ │ │ ├── download-cloud.svg │ │ │ │ │ │ │ ├── download.svg │ │ │ │ │ │ │ ├── droplet.svg │ │ │ │ │ │ │ ├── edit-2.svg │ │ │ │ │ │ │ ├── edit-3.svg │ │ │ │ │ │ │ ├── edit.svg │ │ │ │ │ │ │ ├── external-link.svg │ │ │ │ │ │ │ ├── eye-off.svg │ │ │ │ │ │ │ ├── eye.svg │ │ │ │ │ │ │ ├── facebook.svg │ │ │ │ │ │ │ ├── fast-forward.svg │ │ │ │ │ │ │ ├── file-plus.svg │ │ │ │ │ │ │ ├── file-text.svg │ │ │ │ │ │ │ ├── file.svg │ │ │ │ │ │ │ ├── film.svg │ │ │ │ │ │ │ ├── flag.svg │ │ │ │ │ │ │ ├── gift.svg │ │ │ │ │ │ │ ├── git-branch.svg │ │ │ │ │ │ │ ├── git-commit.svg │ │ │ │ │ │ │ ├── git-merge.svg │ │ │ │ │ │ │ ├── git-pull-request.svg │ │ │ │ │ │ │ ├── github.svg │ │ │ │ │ │ │ ├── globe.svg │ │ │ │ │ │ │ ├── grid.svg │ │ │ │ │ │ │ ├── hash.svg │ │ │ │ │ │ │ ├── headphones.svg │ │ │ │ │ │ │ ├── heart.svg │ │ │ │ │ │ │ ├── help-circle.svg │ │ │ │ │ │ │ ├── home.svg │ │ │ │ │ │ │ ├── image.svg │ │ │ │ │ │ │ ├── italic.svg │ │ │ │ │ │ │ ├── key.svg │ │ │ │ │ │ │ ├── layers.svg │ │ │ │ │ │ │ ├── layout.svg │ │ │ │ │ │ │ ├── link-2.svg │ │ │ │ │ │ │ ├── link.svg │ │ │ │ │ │ │ ├── linkedin.svg │ │ │ │ │ │ │ ├── list.svg │ │ │ │ │ │ │ ├── loader.svg │ │ │ │ │ │ │ ├── lock.svg │ │ │ │ │ │ │ ├── log-in.svg │ │ │ │ │ │ │ ├── log-out.svg │ │ │ │ │ │ │ ├── mail.svg │ │ │ │ │ │ │ ├── map-pin.svg │ │ │ │ │ │ │ ├── map.svg │ │ │ │ │ │ │ ├── maximize-2.svg │ │ │ │ │ │ │ ├── maximize.svg │ │ │ │ │ │ │ ├── menu.svg │ │ │ │ │ │ │ ├── message-circle.svg │ │ │ │ │ │ │ ├── message-square.svg │ │ │ │ │ │ │ ├── mic-off.svg │ │ │ │ │ │ │ ├── mic.svg │ │ │ │ │ │ │ ├── minimize-2.svg │ │ │ │ │ │ │ ├── minimize.svg │ │ │ │ │ │ │ ├── minus-circle.svg │ │ │ │ │ │ │ ├── minus-square.svg │ │ │ │ │ │ │ ├── minus.svg │ │ │ │ │ │ │ ├── monitor.svg │ │ │ │ │ │ │ ├── moon.svg │ │ │ │ │ │ │ ├── more-horizontal.svg │ │ │ │ │ │ │ ├── more-vertical.svg │ │ │ │ │ │ │ ├── navigation.svg │ │ │ │ │ │ │ ├── package.svg │ │ │ │ │ │ │ ├── paperclip.svg │ │ │ │ │ │ │ ├── pause.svg │ │ │ │ │ │ │ ├── pie-chart.svg │ │ │ │ │ │ │ ├── play-circle.svg │ │ │ │ │ │ │ ├── play.svg │ │ │ │ │ │ │ ├── plus-circle.svg │ │ │ │ │ │ │ ├── plus-square.svg │ │ │ │ │ │ │ ├── plus.svg │ │ │ │ │ │ │ ├── power.svg │ │ │ │ │ │ │ ├── printer.svg │ │ │ │ │ │ │ ├── refresh-ccw.svg │ │ │ │ │ │ │ ├── refresh-cw.svg │ │ │ │ │ │ │ ├── repeat.svg │ │ │ │ │ │ │ ├── rewind.svg │ │ │ │ │ │ │ ├── rotate-ccw.svg │ │ │ │ │ │ │ ├── rotate-cw.svg │ │ │ │ │ │ │ ├── rss.svg │ │ │ │ │ │ │ ├── save.svg │ │ │ │ │ │ │ ├── scissors.svg │ │ │ │ │ │ │ ├── search.svg │ │ │ │ │ │ │ ├── send.svg │ │ │ │ │ │ │ ├── server.svg │ │ │ │ │ │ │ ├── settings.svg │ │ │ │ │ │ │ ├── share-2.svg │ │ │ │ │ │ │ ├── share.svg │ │ │ │ │ │ │ ├── shopping-cart.svg │ │ │ │ │ │ │ ├── sidebar.svg │ │ │ │ │ │ │ ├── slack.svg │ │ │ │ │ │ │ ├── slash.svg │ │ │ │ │ │ │ ├── sliders.svg │ │ │ │ │ │ │ ├── smartphone.svg │ │ │ │ │ │ │ ├── sun.svg │ │ │ │ │ │ │ ├── terminal.svg │ │ │ │ │ │ │ ├── thumbs-down.svg │ │ │ │ │ │ │ ├── thumbs-up.svg │ │ │ │ │ │ │ ├── toggle-left.svg │ │ │ │ │ │ │ ├── toggle-right.svg │ │ │ │ │ │ │ ├── tool.svg │ │ │ │ │ │ │ ├── trash-2.svg │ │ │ │ │ │ │ ├── trash.svg │ │ │ │ │ │ │ ├── twitter.svg │ │ │ │ │ │ │ ├── type.svg │ │ │ │ │ │ │ ├── underline.svg │ │ │ │ │ │ │ ├── unlock.svg │ │ │ │ │ │ │ ├── upload-cloud.svg │ │ │ │ │ │ │ ├── upload.svg │ │ │ │ │ │ │ ├── user-check.svg │ │ │ │ │ │ │ ├── user-minus.svg │ │ │ │ │ │ │ ├── user-plus.svg │ │ │ │ │ │ │ ├── user-x.svg │ │ │ │ │ │ │ ├── user.svg │ │ │ │ │ │ │ ├── users.svg │ │ │ │ │ │ │ ├── video-off.svg │ │ │ │ │ │ │ ├── video.svg │ │ │ │ │ │ │ ├── x-circle.svg │ │ │ │ │ │ │ ├── x-octagon.svg │ │ │ │ │ │ │ ├── x-square.svg │ │ │ │ │ │ │ ├── x.svg │ │ │ │ │ │ │ ├── youtube.svg │ │ │ │ │ │ │ ├── zoom-in.svg │ │ │ │ │ │ │ └── zoom-out.svg │ │ │ │ │ │ └── material │ │ │ │ │ │ │ └── g-translate.svg │ │ │ │ │ └── index.ts │ │ │ │ ├── Input │ │ │ │ │ ├── Input.stories.tsx │ │ │ │ │ ├── Input.styled.ts │ │ │ │ │ ├── Input.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Pagination │ │ │ │ │ ├── Pagination.stories.tsx │ │ │ │ │ ├── Pagination.styled.ts │ │ │ │ │ ├── Pagination.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Paper │ │ │ │ │ ├── Paper.stories.tsx │ │ │ │ │ ├── Paper.styled.ts │ │ │ │ │ ├── Paper.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Radio │ │ │ │ │ ├── Radio.stories.tsx │ │ │ │ │ ├── Radio.styled.ts │ │ │ │ │ ├── Radio.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── RenderIf │ │ │ │ │ ├── RenderIf.stories.tsx │ │ │ │ │ ├── RenderIf.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Select │ │ │ │ │ ├── Select.stories.tsx │ │ │ │ │ ├── Select.styled.tsx │ │ │ │ │ ├── Select.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Spinner │ │ │ │ │ ├── Spinner.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── loaders │ │ │ │ │ │ └── rolling.svg │ │ │ │ ├── Svg │ │ │ │ │ ├── Arrow.tsx │ │ │ │ │ ├── Book.tsx │ │ │ │ │ ├── Calendar.tsx │ │ │ │ │ ├── Code.tsx │ │ │ │ │ ├── Database.tsx │ │ │ │ │ ├── Dollar.tsx │ │ │ │ │ ├── Download.tsx │ │ │ │ │ ├── Edit.tsx │ │ │ │ │ ├── External.tsx │ │ │ │ │ ├── Eye.tsx │ │ │ │ │ ├── EyeOff.tsx │ │ │ │ │ ├── Facebook.tsx │ │ │ │ │ ├── Globe.tsx │ │ │ │ │ ├── Home.tsx │ │ │ │ │ ├── Image.tsx │ │ │ │ │ ├── Link.tsx │ │ │ │ │ ├── Login.tsx │ │ │ │ │ ├── Logout.tsx │ │ │ │ │ ├── Menu.tsx │ │ │ │ │ ├── Moon.tsx │ │ │ │ │ ├── Plus.tsx │ │ │ │ │ ├── Power.tsx │ │ │ │ │ ├── Search.tsx │ │ │ │ │ ├── Settings.tsx │ │ │ │ │ ├── Share.tsx │ │ │ │ │ ├── Sun.tsx │ │ │ │ │ ├── Trash.tsx │ │ │ │ │ ├── Warning.tsx │ │ │ │ │ ├── WhatsApp.tsx │ │ │ │ │ ├── X.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Switcher │ │ │ │ │ ├── Switcher.stories.tsx │ │ │ │ │ ├── Switcher.styled.ts │ │ │ │ │ ├── Switcher.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Table │ │ │ │ │ ├── Table.stories.tsx │ │ │ │ │ ├── Table.styled.ts │ │ │ │ │ ├── Table.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Tags │ │ │ │ │ ├── Tags.stories.tsx │ │ │ │ │ ├── Tags.styled.ts │ │ │ │ │ ├── Tags.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Text │ │ │ │ │ ├── Text.stories.tsx │ │ │ │ │ ├── Text.styled.ts │ │ │ │ │ ├── Text.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── TextArea │ │ │ │ │ ├── TextArea.stories.tsx │ │ │ │ │ ├── TextArea.styled.ts │ │ │ │ │ ├── TextArea.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── TextField │ │ │ │ │ ├── TextField.stories.tsx │ │ │ │ │ ├── TextField.styled.ts │ │ │ │ │ ├── TextField.tsx │ │ │ │ │ └── index.ts │ │ │ │ └── ThemeToggler │ │ │ │ │ ├── ThemeToggler.tsx │ │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── theme │ │ │ │ ├── breakpoints.ts │ │ │ │ ├── cssVariables.ts │ │ │ │ ├── index.ts │ │ │ │ ├── palettes │ │ │ │ │ ├── darkPalette.ts │ │ │ │ │ ├── lightPalette.ts │ │ │ │ │ └── namedColors.ts │ │ │ │ ├── theme.ts │ │ │ │ └── utils.ts │ │ │ ├── types │ │ │ │ ├── alignment.ts │ │ │ │ ├── calc.ts │ │ │ │ ├── fontSize.ts │ │ │ │ ├── fontWeight.ts │ │ │ │ ├── global.d.ts │ │ │ │ ├── index.ts │ │ │ │ ├── shape.ts │ │ │ │ ├── size.ts │ │ │ │ ├── sizes.ts │ │ │ │ ├── theme.ts │ │ │ │ ├── typography.ts │ │ │ │ ├── unit.ts │ │ │ │ └── variant.ts │ │ │ └── usePrevious.ts │ │ └── tsconfig.json │ ├── devtools │ │ ├── package.json │ │ ├── src │ │ │ ├── cli │ │ │ │ └── log.ts │ │ │ ├── index.ts │ │ │ └── webpack │ │ │ │ ├── webpack.common.ts │ │ │ │ ├── webpack.development.ts │ │ │ │ ├── webpack.production.ts │ │ │ │ └── webpack.types.ts │ │ └── tsconfig.json │ ├── frontend │ │ ├── .babelrc │ │ ├── next-env.d.ts │ │ ├── next.config.js │ │ ├── package.json │ │ ├── public │ │ │ ├── .gitkeep │ │ │ └── images │ │ │ │ └── characters │ │ │ │ ├── boy.png │ │ │ │ └── girl.png │ │ ├── src │ │ │ ├── components │ │ │ │ ├── ApolloConnector.tsx │ │ │ │ ├── ErrorPage │ │ │ │ │ ├── ErrorPage.styled.ts │ │ │ │ │ ├── ErrorPage.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── GlobalStyles │ │ │ │ │ ├── GlobalStyles.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Login │ │ │ │ │ ├── Login.styled.ts │ │ │ │ │ ├── Login.tsx │ │ │ │ │ └── index.ts │ │ │ │ └── Switcher.tsx │ │ │ ├── config.ts │ │ │ ├── contexts │ │ │ │ ├── apolloClient.ts │ │ │ │ ├── form.tsx │ │ │ │ └── user.tsx │ │ │ ├── graphql │ │ │ │ ├── client.ts │ │ │ │ └── user │ │ │ │ │ ├── getUser.query.ts │ │ │ │ │ └── login.mutation.ts │ │ │ ├── lib │ │ │ │ └── middlewares │ │ │ │ │ └── user.ts │ │ │ ├── pages │ │ │ │ ├── [page] │ │ │ │ │ ├── [...params].tsx │ │ │ │ │ └── index.tsx │ │ │ │ ├── _app.tsx │ │ │ │ ├── _document.tsx │ │ │ │ └── index.tsx │ │ │ ├── server.ts │ │ │ ├── sites │ │ │ │ ├── blank-page │ │ │ │ │ └── config.ts │ │ │ │ ├── codejobs │ │ │ │ │ ├── config.ts │ │ │ │ │ ├── pages │ │ │ │ │ │ ├── dashboard │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ └── login.tsx │ │ │ │ │ ├── server │ │ │ │ │ │ ├── routerParams.tsx │ │ │ │ │ │ └── siteServerSideProps.ts │ │ │ │ │ ├── static │ │ │ │ │ │ └── images │ │ │ │ │ │ │ └── isotype.png │ │ │ │ │ └── switcher.tsx │ │ │ │ └── san-pancho │ │ │ │ │ ├── config.ts │ │ │ │ │ ├── graphql │ │ │ │ │ └── guest │ │ │ │ │ │ └── getGuests.query.ts │ │ │ │ │ ├── pages │ │ │ │ │ ├── dashboard │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── login.tsx │ │ │ │ │ ├── server │ │ │ │ │ ├── routerParams.ts │ │ │ │ │ └── siteServerSideProps.ts │ │ │ │ │ ├── static │ │ │ │ │ ├── .gitkeep │ │ │ │ │ └── images │ │ │ │ │ │ ├── isotype.png │ │ │ │ │ │ └── logo.png │ │ │ │ │ └── switcher.tsx │ │ │ └── types │ │ │ │ ├── config.ts │ │ │ │ ├── global.d.ts │ │ │ │ └── index.ts │ │ └── tsconfig.json │ └── utils │ │ ├── package.json │ │ ├── src │ │ ├── index.ts │ │ └── utils │ │ │ ├── base64.ts │ │ │ ├── calendar.ts │ │ │ ├── capitalize.ts │ │ │ ├── chunk.ts │ │ │ ├── cookies.ts │ │ │ ├── cx.ts │ │ │ ├── dates.ts │ │ │ ├── forEach.ts │ │ │ ├── format.ts │ │ │ ├── graphql.ts │ │ │ ├── is.tsx │ │ │ ├── keys.ts │ │ │ ├── object.ts │ │ │ ├── pluralify.ts │ │ │ ├── rtl.ts │ │ │ ├── security.ts │ │ │ ├── slug.ts │ │ │ ├── time.ts │ │ │ ├── ts.ts │ │ │ ├── types.ts │ │ │ ├── url.ts │ │ │ ├── uuid.ts │ │ │ └── values.ts │ │ └── tsconfig.json │ ├── tsconfig.common.json │ ├── tsconfig.json │ └── webpack.config.ts ├── Chapter15 └── keys │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── components │ │ └── List │ │ │ └── index.tsx │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── Chapter16 ├── events │ ├── .babelrc │ ├── .eslintrc │ ├── .gitignore │ ├── .prettierrc │ ├── jest.config.js │ ├── package-lock.json │ ├── package.json │ ├── setUpTests.ts │ ├── src │ │ ├── components │ │ │ ├── App.tsx │ │ │ └── ShowInformation │ │ │ │ ├── index.test.tsx │ │ │ │ └── index.tsx │ │ ├── index.html │ │ └── index.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── my-first-vite-project │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ └── Hello │ │ │ │ └── index.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── testing │ ├── .babelrc │ ├── .eslintrc │ ├── .gitignore │ ├── .prettierrc │ ├── jest.config.js │ ├── package-lock.json │ ├── package.json │ ├── setUpTests.ts │ ├── src │ ├── components │ │ ├── App.tsx │ │ └── Hello │ │ │ ├── index.test.tsx │ │ │ └── index.tsx │ ├── index.html │ └── index.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── LICENSE └── README.md /Chapter01/toUpperCase.ts: -------------------------------------------------------------------------------- 1 | const toUpperCase1 = (input: string[]): string[] => { 2 | const output: string[] = []; 3 | 4 | for (let i = 0; i < input.length; i++) { 5 | output.push(input[i].toUpperCase()); 6 | } 7 | 8 | return output; 9 | } 10 | 11 | const toUpperCase2 = (input: string[]) => input.map(value => value.toUpperCase()) 12 | 13 | console.log(toUpperCase1(['foo', 'bar'])) 14 | console.log(toUpperCase2(['foo', 'bar'])) -------------------------------------------------------------------------------- /Chapter04/geolocation/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter04/geolocation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter04/geolocation/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import GeolocationContainer from './components/GeolocationContainer' 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 |
10 | ) 11 | } 12 | 13 | export default App 14 | -------------------------------------------------------------------------------- /Chapter04/geolocation/src/components/Geolocation.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react' 2 | 3 | type Props = { 4 | latitude: number | null 5 | longitude: number | null 6 | } 7 | 8 | const Geolocation: FC = ({ latitude, longitude }) => ( 9 |
10 |

Geolocation:

11 |
Latitude: {latitude}
12 |
Longitude: {longitude}
13 |
14 | ) 15 | 16 | export default Geolocation 17 | -------------------------------------------------------------------------------- /Chapter04/geolocation/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter04/geolocation/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter04/geolocation/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter04/geolocation/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter04/hocs/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter04/hocs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter04/hocs/src/App.tsx: -------------------------------------------------------------------------------- 1 | import MyComponent from './components/MyComponent' 2 | 3 | function App() { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default App 12 | -------------------------------------------------------------------------------- /Chapter04/hocs/src/components/MyComponent/index.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react' 2 | 3 | import withInnerWidth from './WithInnerWidth' 4 | 5 | type Props = { 6 | innerWidth: number 7 | } 8 | 9 | const MyComponent: FC = ({ innerWidth }) =>
innerWidth: {innerWidth}
10 | 11 | export default withInnerWidth(MyComponent) 12 | -------------------------------------------------------------------------------- /Chapter04/hocs/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter04/hocs/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter04/hocs/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter04/hocs/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter05/animations/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter05/animations/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter05/animations/src/App.tsx: -------------------------------------------------------------------------------- 1 | import Transition from './components/Transition' 2 | 3 | function App() { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default App 12 | -------------------------------------------------------------------------------- /Chapter05/animations/src/components/Transition/Transition.css: -------------------------------------------------------------------------------- 1 | .fade-enter { 2 | opacity: 0.01; 3 | } 4 | 5 | .fade-enter.fade-appear-active { 6 | opacity: 1; 7 | transition: opacity .5s ease-in; 8 | } -------------------------------------------------------------------------------- /Chapter05/animations/src/components/Transition/index.tsx: -------------------------------------------------------------------------------- 1 | import './Transition.css' 2 | 3 | import { TransitionGroup } from 'react-transition-group' 4 | 5 | const Transition = () => ( 6 | 7 |

Hello React

8 | 9 | ); 10 | 11 | export default Transition; 12 | -------------------------------------------------------------------------------- /Chapter05/animations/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter05/animations/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter05/animations/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter05/animations/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter05/controlled-components/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter05/controlled-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter05/controlled-components/src/App.tsx: -------------------------------------------------------------------------------- 1 | import Controlled from './components/Controlled' 2 | 3 | function App() { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default App 12 | -------------------------------------------------------------------------------- /Chapter05/controlled-components/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter05/controlled-components/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter05/controlled-components/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter05/controlled-components/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter05/event-switch/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter05/event-switch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter05/event-switch/src/App.tsx: -------------------------------------------------------------------------------- 1 | import Button from './components/Button' 2 | 3 | function App() { 4 | return ( 5 |
6 |
8 | ) 9 | } 10 | 11 | export default App 12 | -------------------------------------------------------------------------------- /Chapter05/event-switch/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter05/event-switch/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter05/event-switch/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter05/event-switch/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter05/refs/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter05/refs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter05/refs/src/App.tsx: -------------------------------------------------------------------------------- 1 | import Focus from './components/Focus' 2 | 3 | function App() { 4 | return ( 5 |
6 |
7 |
8 | ) 9 | } 10 | 11 | export default App 12 | -------------------------------------------------------------------------------- /Chapter05/refs/src/components/Focus/index.tsx: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react' 2 | 3 | const Focus = () => { 4 | const inputRef = useRef(null) 5 | 6 | const handleClick = () => { 7 | inputRef.current.focus() 8 | } 9 | 10 | return ( 11 | <> 12 | 16 | 17 | 18 | ) 19 | } 20 | 21 | export default Focus -------------------------------------------------------------------------------- /Chapter05/refs/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter05/refs/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter05/refs/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter05/refs/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter05/svg/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter05/svg/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter05/svg/src/App.tsx: -------------------------------------------------------------------------------- 1 | import Circle from './components/Circles/Circle' 2 | import RedCircle from './components/Circles/RedCircle' 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 | 9 |
10 | ) 11 | } 12 | 13 | export default App 14 | -------------------------------------------------------------------------------- /Chapter05/svg/src/components/Circles/Circle.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react' 2 | 3 | type Props = { 4 | x: number; 5 | y: number; 6 | radius: number; 7 | fill: string; 8 | }; 9 | 10 | const Circle: FC = ({ x, y, radius, fill }) => ( 11 | 12 | 13 | 14 | ); 15 | 16 | export default Circle; 17 | -------------------------------------------------------------------------------- /Chapter05/svg/src/components/Circles/RedCircle.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react' 2 | 3 | import Circle from './Circle' 4 | 5 | type Props = { 6 | x: number; 7 | y: number; 8 | radius: number; 9 | }; 10 | 11 | const RedCircle: FC = ({ x, y, radius }) => ( 12 | 13 | ); 14 | 15 | export default RedCircle; 16 | -------------------------------------------------------------------------------- /Chapter05/svg/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter05/svg/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter05/svg/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter05/svg/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter05/uncontrolled-components/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter05/uncontrolled-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter05/uncontrolled-components/src/App.tsx: -------------------------------------------------------------------------------- 1 | import Uncontrolled from './components/Uncontrolled' 2 | 3 | function App() { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default App 12 | -------------------------------------------------------------------------------- /Chapter05/uncontrolled-components/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter05/uncontrolled-components/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter05/uncontrolled-components/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter05/uncontrolled-components/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter06/css-modules/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } -------------------------------------------------------------------------------- /Chapter06/css-modules/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter06/css-modules/src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.css' { 2 | const content: Record 3 | export default content 4 | } -------------------------------------------------------------------------------- /Chapter06/css-modules/src/index.css: -------------------------------------------------------------------------------- 1 | .button { 2 | background-color: #ff0000; 3 | width: 320px; 4 | padding: 20px; 5 | border-radius: 5px; 6 | border: none; 7 | outline: none; 8 | } -------------------------------------------------------------------------------- /Chapter06/css-modules/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= htmlWebpackPlugin.options.title %> 8 | 9 | 10 |
11 | 12 | -------------------------------------------------------------------------------- /Chapter06/css-modules/src/index.tsx: -------------------------------------------------------------------------------- 1 | // Dependencies 2 | import { createRoot } from 'react-dom/client' 3 | import styles from './index.css' 4 | 5 | // Components 6 | const Button = () => // This is for css modules 7 | 8 | createRoot(document.getElementById('root') as HTMLElement).render(, document.querySelector('#root')) -------------------------------------------------------------------------------- /Chapter07/counter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter07/counter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter07/counter/src/App.tsx: -------------------------------------------------------------------------------- 1 | import Counter from './components/Counter' 2 | 3 | function App() { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default App 12 | -------------------------------------------------------------------------------- /Chapter07/counter/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter07/counter/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter07/counter/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter07/counter/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter07/keys/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter07/keys/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter07/keys/src/App.tsx: -------------------------------------------------------------------------------- 1 | import List from './components/List' 2 | 3 | function App() { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default App 12 | -------------------------------------------------------------------------------- /Chapter07/keys/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter07/keys/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter07/keys/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter07/keys/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter08/1-react-hooks/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter08/1-react-hooks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter08/1-react-hooks/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import Issues2 from './Issues' 3 | 4 | const App = () => { 5 | return ( 6 | 7 | ) 8 | } 9 | 10 | export default App; 11 | -------------------------------------------------------------------------------- /Chapter08/1-react-hooks/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter08/1-react-hooks/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter08/1-react-hooks/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter08/1-react-hooks/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter08/2-todo/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter08/2-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter08/2-todo/src/Task.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC, useEffect, memo } from 'react' 2 | 3 | interface Props { 4 | id: number 5 | task: string 6 | handleDelete: any 7 | } 8 | 9 | const Task: FC = ({ id, task, handleDelete }) => { 10 | useEffect(() => { 11 | // console.log('Rendering ', task) 12 | }) 13 | 14 | return ( 15 |
  • {task}
    • 16 | ) 17 | } 18 | 19 | export default memo(Task) -------------------------------------------------------------------------------- /Chapter08/2-todo/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter08/2-todo/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter08/2-todo/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter08/2-todo/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter08/3-reducer/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter08/3-reducer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter08/3-reducer/src/App.tsx: -------------------------------------------------------------------------------- 1 | import Notes from './Notes' 2 | 3 | function App() { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default App 10 | -------------------------------------------------------------------------------- /Chapter08/3-reducer/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter08/3-reducer/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter08/3-reducer/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter08/3-reducer/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter09/react-router-v6.4/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter09/react-router-v6.4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter09/react-router-v6.4/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App ul.menu { 6 | margin: 50px; 7 | padding: 0; 8 | list-style: none; 9 | } 10 | 11 | .App ul.menu li { 12 | display: inline-block; 13 | padding: 0 10px; 14 | } 15 | 16 | .App ul.menu li a { 17 | color: #333; 18 | text-decoration: none; 19 | } 20 | 21 | .App ul.menu li a:hover { 22 | color: #ccc; 23 | } 24 | 25 | a { 26 | color: blue; 27 | } -------------------------------------------------------------------------------- /Chapter09/react-router-v6.4/src/components/About/index.tsx: -------------------------------------------------------------------------------- 1 | const About = () => ( 2 |
    3 |

    About

    4 |
    5 | ) 6 | 7 | export default About -------------------------------------------------------------------------------- /Chapter09/react-router-v6.4/src/components/Error404/index.tsx: -------------------------------------------------------------------------------- 1 | const Error404 = () => ( 2 |
    3 |

    Error404

    4 |
    5 | ) 6 | 7 | export default Error404 -------------------------------------------------------------------------------- /Chapter09/react-router-v6.4/src/components/Home/index.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => ( 2 |
    3 |

    Home

    4 |
    5 | ) 6 | 7 | export default Home -------------------------------------------------------------------------------- /Chapter09/react-router-v6.4/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import App from './App' 3 | 4 | createRoot(document.getElementById('root') as HTMLElement).render( 5 | 6 | ) -------------------------------------------------------------------------------- /Chapter09/react-router-v6.4/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter09/react-router-v6.4/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter09/react-router-v6.4/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter09/react-router-with-params/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter09/react-router-with-params/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter09/react-router-with-params/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App ul.menu { 6 | margin: 50px; 7 | padding: 0; 8 | list-style: none; 9 | } 10 | 11 | .App ul.menu li { 12 | display: inline-block; 13 | padding: 0 10px; 14 | } 15 | 16 | .App ul.menu li a { 17 | color: #333; 18 | text-decoration: none; 19 | } 20 | 21 | .App ul.menu li a:hover { 22 | color: #ccc; 23 | } 24 | -------------------------------------------------------------------------------- /Chapter09/react-router-with-params/src/components/About/index.tsx: -------------------------------------------------------------------------------- 1 | const About = () => ( 2 |
    3 |

    About

    4 |
    5 | ) 6 | 7 | export default About -------------------------------------------------------------------------------- /Chapter09/react-router-with-params/src/components/Contact/index.tsx: -------------------------------------------------------------------------------- 1 | const Contact = () => ( 2 |
    3 |

    Contact

    4 |
    5 | ) 6 | 7 | export default Contact -------------------------------------------------------------------------------- /Chapter09/react-router-with-params/src/components/Contacts/Contacts.css: -------------------------------------------------------------------------------- 1 | .Contacts ul { 2 | list-style: none; 3 | margin: 0; 4 | margin-bottom: 20px; 5 | padding: 0; 6 | } 7 | 8 | .Contacts ul li { 9 | padding: 10px; 10 | } 11 | 12 | .Contacts a { 13 | color: #555; 14 | text-decoration: none; 15 | } 16 | 17 | .Contacts a:hover { 18 | color: #ccc; 19 | text-decoration: none; 20 | } 21 | -------------------------------------------------------------------------------- /Chapter09/react-router-with-params/src/components/Error404/index.tsx: -------------------------------------------------------------------------------- 1 | const Error404 = () => ( 2 |
    3 |

    Error404

    4 |
    5 | ) 6 | 7 | export default Error404 -------------------------------------------------------------------------------- /Chapter09/react-router-with-params/src/components/Home/index.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => ( 2 |
    3 |

    Home

    4 |
    5 | ) 6 | 7 | export default Home -------------------------------------------------------------------------------- /Chapter09/react-router-with-params/src/main.tsx: -------------------------------------------------------------------------------- 1 | // Dependencies 2 | import { createRoot } from 'react-dom/client' 3 | import { BrowserRouter as Router } from 'react-router-dom' 4 | 5 | // Routes 6 | import AppRoutes from './routes' 7 | 8 | createRoot(document.getElementById('root') as HTMLElement).render( 9 | 10 | 11 | 12 | ) -------------------------------------------------------------------------------- /Chapter09/react-router-with-params/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter09/react-router-with-params/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter09/react-router-with-params/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter09/react-router/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter09/react-router/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter09/react-router/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App ul.menu { 6 | margin: 50px; 7 | padding: 0; 8 | list-style: none; 9 | } 10 | 11 | .App ul.menu li { 12 | display: inline-block; 13 | padding: 0 10px; 14 | } 15 | 16 | .App ul.menu li a { 17 | color: #333; 18 | text-decoration: none; 19 | } 20 | 21 | .App ul.menu li a:hover { 22 | color: #ccc; 23 | } 24 | -------------------------------------------------------------------------------- /Chapter09/react-router/src/components/About.tsx: -------------------------------------------------------------------------------- 1 | const About = () => ( 2 |
    3 |

    About

    4 |
    5 | ) 6 | 7 | export default About -------------------------------------------------------------------------------- /Chapter09/react-router/src/components/Contact.tsx: -------------------------------------------------------------------------------- 1 | const Contact = () => ( 2 |
    3 |

    Contact

    4 |
    5 | ) 6 | 7 | export default Contact -------------------------------------------------------------------------------- /Chapter09/react-router/src/components/Error404.tsx: -------------------------------------------------------------------------------- 1 | const Error404 = () => ( 2 |
    3 |

    Error404

    4 |
    5 | ) 6 | 7 | export default Error404 -------------------------------------------------------------------------------- /Chapter09/react-router/src/components/Home.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => ( 2 |
    3 |

    Home

    4 |
    5 | ) 6 | 7 | export default Home -------------------------------------------------------------------------------- /Chapter09/react-router/src/main.tsx: -------------------------------------------------------------------------------- 1 | // Dependencies 2 | import { createRoot } from 'react-dom/client' 3 | import { BrowserRouter as Router } from 'react-router-dom' 4 | 5 | // Routes 6 | import AppRoutes from './routes' 7 | 8 | createRoot(document.getElementById('root') as HTMLElement).render( 9 | 10 | 11 | 12 | ) -------------------------------------------------------------------------------- /Chapter09/react-router/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter09/react-router/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter09/react-router/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter11/context-api/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter11/context-api/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter11/context-api/src/components/App.tsx: -------------------------------------------------------------------------------- 1 | // Providers 2 | import IssueProvider from '../contexts/Issue' 3 | 4 | // Components 5 | import Issues from './Issues' 6 | 7 | const App = () => { 8 | return ( 9 | 10 | 11 | 12 | ) 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter11/context-api/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './components/App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter11/context-api/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter11/context-api/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter11/context-api/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter11/react-suspense-with-swr/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter11/react-suspense-with-swr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter11/react-suspense-with-swr/src/components/Pokemon/LoadingSkeleton.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react' 2 | import Skeleton from 'react-loading-skeleton' 3 | 4 | const LoadingSkeleton: FC = () => ( 5 |
    6 | 7 |
    8 | ) 9 | 10 | export default LoadingSkeleton 11 | -------------------------------------------------------------------------------- /Chapter11/react-suspense-with-swr/src/components/Pokemon/PokeContainer.tsx: -------------------------------------------------------------------------------- 1 | import { FC, Suspense } from 'react' 2 | 3 | import Pokedex from './Pokedex' 4 | 5 | const PokeContainer: FC = () => { 6 | return ( 7 | Loading Pokedex...}> 8 | 9 | 10 | ) 11 | } 12 | 13 | export default PokeContainer -------------------------------------------------------------------------------- /Chapter11/react-suspense-with-swr/src/components/Pokemon/fetcher.ts: -------------------------------------------------------------------------------- 1 | const fetcher = (url: string) => { 2 | return fetch(url).then((response) => { 3 | if (response.ok) { 4 | return response.json() 5 | } 6 | 7 | return { 8 | error: true 9 | } 10 | }) 11 | } 12 | 13 | export default fetcher 14 | -------------------------------------------------------------------------------- /Chapter11/react-suspense-with-swr/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './components/App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter11/react-suspense-with-swr/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter11/react-suspense-with-swr/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter11/react-suspense-with-swr/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter11/redux-toolkit/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter11/redux-toolkit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter11/redux-toolkit/src/counterSlice.ts: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit'; 2 | 3 | const counterSlice = createSlice({ 4 | name: 'counter', 5 | initialState: 0, 6 | reducers: { 7 | increment: (state) => state + 1, 8 | decrement: (state) => state - 1, 9 | }, 10 | }); 11 | 12 | export const { increment, decrement } = counterSlice.actions; 13 | 14 | export default counterSlice.reducer; -------------------------------------------------------------------------------- /Chapter11/redux-toolkit/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import { Provider } from 'react-redux'; 4 | import store from './store'; 5 | import Counter from './Counter'; 6 | 7 | createRoot(document.getElementById('root') as HTMLElement).render( 8 | 9 | 10 | 11 | ) 12 | -------------------------------------------------------------------------------- /Chapter11/redux-toolkit/src/rootReducer.ts: -------------------------------------------------------------------------------- 1 | import { combineReducers } from '@reduxjs/toolkit'; 2 | import counterReducer from './counterSlice'; 3 | 4 | const rootReducer = combineReducers({ 5 | counter: counterReducer, 6 | }); 7 | 8 | export default rootReducer; -------------------------------------------------------------------------------- /Chapter11/redux-toolkit/src/store.ts: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit'; 2 | import rootReducer from './rootReducer'; 3 | 4 | const store = configureStore({ 5 | reducer: rootReducer, 6 | }); 7 | 8 | export type RootState = ReturnType; 9 | export default store; 10 | -------------------------------------------------------------------------------- /Chapter11/redux-toolkit/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter11/redux-toolkit/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter11/redux-toolkit/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter12/data-fetching/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } -------------------------------------------------------------------------------- /Chapter12/data-fetching/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter12/data-fetching/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react' 2 | 3 | type Gist = { 4 | id: string 5 | description: string 6 | } 7 | 8 | type Props = { 9 | gists: Gist[] 10 | } 11 | 12 | const App: FC = ({ gists }) => ( 13 |
      14 | {gists.map((gist) => ( 15 |
    • {gist.description}
      • 16 | ))} 17 |
    18 | ) 19 | 20 | export default App 21 | -------------------------------------------------------------------------------- /Chapter12/data-fetching/src/client.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom' 2 | import App from './App'; 3 | 4 | type Gist = { 5 | id: string 6 | description: string 7 | } 8 | 9 | declare global { 10 | interface Window { 11 | gists: Gist[] 12 | } 13 | } 14 | 15 | ReactDOM.hydrate(, document.getElementById('app')) -------------------------------------------------------------------------------- /Chapter12/data-fetching/src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.css' { 2 | const content: Record 3 | export default content 4 | } -------------------------------------------------------------------------------- /Chapter12/data-fetching/src/template.ts: -------------------------------------------------------------------------------- 1 | export default (body: any, gists: any) => ` 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    ${body}
    9 | 10 | 11 | 12 | 13 | ` -------------------------------------------------------------------------------- /Chapter12/next/.gitignore: -------------------------------------------------------------------------------- 1 | .next 2 | node_modules -------------------------------------------------------------------------------- /Chapter12/next/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /Chapter12/server-side-rendering/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } -------------------------------------------------------------------------------- /Chapter12/server-side-rendering/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter12/server-side-rendering/src/App.tsx: -------------------------------------------------------------------------------- 1 | const App = () =>
    Hello React
    2 | 3 | export default App -------------------------------------------------------------------------------- /Chapter12/server-side-rendering/src/client.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom' 2 | import App from './App'; 3 | 4 | ReactDOM.render(, document.getElementById('app')) -------------------------------------------------------------------------------- /Chapter12/server-side-rendering/src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.css' { 2 | const content: Record 3 | export default content 4 | } -------------------------------------------------------------------------------- /Chapter12/server-side-rendering/src/template.ts: -------------------------------------------------------------------------------- 1 | export default (body: any) => ` 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    ${body}
    9 | 10 | 11 | 12 | ` -------------------------------------------------------------------------------- /Chapter13/graphql/.nvm: -------------------------------------------------------------------------------- 1 | v18 -------------------------------------------------------------------------------- /Chapter13/graphql/backend/.env: -------------------------------------------------------------------------------- 1 | DB_DIALECT=postgres 2 | DB_PORT=5432 3 | DB_HOST=localhost 4 | DB_DATABASE=login 5 | DB_USERNAME=czantany 6 | DB_PASSWORD=12345678 -------------------------------------------------------------------------------- /Chapter13/graphql/backend/.env.example: -------------------------------------------------------------------------------- 1 | DB_DIALECT=postgres 2 | DB_PORT=5432 3 | DB_HOST=localhost 4 | DB_DATABASE= 5 | DB_USERNAME= 6 | DB_PASSWORD= -------------------------------------------------------------------------------- /Chapter13/graphql/backend/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | dist -------------------------------------------------------------------------------- /Chapter13/graphql/backend/apps.json: -------------------------------------------------------------------------------- 1 | { 2 | "apps": [ 3 | { 4 | "name": "backend", 5 | "script": "./dist/src/index.js", 6 | "instances": 1, 7 | "exec_mode": "cluster", 8 | "env": { 9 | "NODE_ENV": "production", 10 | "PORT": "3000" 11 | } 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Chapter13/graphql/backend/config/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "server": { 3 | "port": 4000 4 | }, 5 | "security": { 6 | "secretKey": "C0nt3ntP1", 7 | "expiresIn": "7d" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Chapter13/graphql/backend/src/graphql/resolvers/index.ts: -------------------------------------------------------------------------------- 1 | import { mergeResolvers } from '@graphql-tools/merge' 2 | 3 | import user from './user' 4 | 5 | const resolvers = mergeResolvers([user]) 6 | 7 | export default resolvers 8 | -------------------------------------------------------------------------------- /Chapter13/graphql/backend/src/graphql/types/Scalar.ts: -------------------------------------------------------------------------------- 1 | import gql from 'graphql-tag' 2 | 3 | export default gql` 4 | scalar UUID 5 | scalar Datetime 6 | scalar JSON 7 | ` 8 | -------------------------------------------------------------------------------- /Chapter13/graphql/backend/src/graphql/types/index.ts: -------------------------------------------------------------------------------- 1 | import { mergeTypeDefs } from '@graphql-tools/merge' 2 | 3 | import Scalar from './Scalar' 4 | import User from './User' 5 | 6 | export default mergeTypeDefs([Scalar, User]) 7 | -------------------------------------------------------------------------------- /Chapter13/graphql/backend/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from './interfaces' 2 | export * from './types' 3 | -------------------------------------------------------------------------------- /Chapter13/graphql/backend/src/types/types.ts: -------------------------------------------------------------------------------- 1 | export type User = { 2 | username: string 3 | password: string 4 | email: string 5 | role: string 6 | active: boolean 7 | } 8 | 9 | export type Sequelize = { 10 | _defaults?: any 11 | name?: string 12 | options?: any 13 | associate?: any 14 | } 15 | -------------------------------------------------------------------------------- /Chapter13/graphql/backend/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "./src", 4 | "esModuleInterop": true, 5 | "module": "commonjs", 6 | "noImplicitAny": true, 7 | "outDir": "dist", 8 | "resolveJsonModule": true, 9 | "sourceMap": true, 10 | "target": "ESNext", 11 | "typeRoots": ["./src/@types", "./node_modules/@types"] 12 | }, 13 | "include": ["src/**/*.ts"], 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /Chapter13/graphql/frontend/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /Chapter13/graphql/frontend/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /Chapter13/graphql/frontend/.env.example: -------------------------------------------------------------------------------- 1 | .env.example 2 | -------------------------------------------------------------------------------- /Chapter13/graphql/frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | dist 26 | .env 27 | -------------------------------------------------------------------------------- /Chapter13/graphql/frontend/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSpacing": true, 4 | "jsxSingleQuote": false, 5 | "printWidth": 100, 6 | "quoteProps": "as-needed", 7 | "semi": false, 8 | "singleQuote": true, 9 | "tabWidth": 2, 10 | "trailingComma": "none", 11 | "useTabs": false 12 | } 13 | -------------------------------------------------------------------------------- /Chapter13/graphql/frontend/apps.json: -------------------------------------------------------------------------------- 1 | { 2 | "apps": [ 3 | { 4 | "name": "frontend", 5 | "script": "./dist/server.js", 6 | "instances": 1, 7 | "exec_mode": "cluster", 8 | "env": { 9 | "NODE_ENV": "production", 10 | "PORT": "3000" 11 | } 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Chapter13/graphql/frontend/src/client/components/dashboard/Dashboard.tsx: -------------------------------------------------------------------------------- 1 | interface IProps { 2 | connectedUser: any 3 | } 4 | 5 | const Dashboard = ({ connectedUser }) => ( 6 |
    7 |

    Welcome, {connectedUser.username}!

    8 | 9 | 14 |
    15 | ) 16 | 17 | export default Dashboard 18 | -------------------------------------------------------------------------------- /Chapter13/graphql/frontend/src/client/graphql/user/getUser.query.ts: -------------------------------------------------------------------------------- 1 | import { gql } from '@apollo/client' 2 | 3 | export default gql` 4 | query getUser($at: String!) { 5 | getUser(at: $at) { 6 | id 7 | email 8 | username 9 | role 10 | active 11 | } 12 | } 13 | ` 14 | -------------------------------------------------------------------------------- /Chapter13/graphql/frontend/src/client/graphql/user/login.mutation.ts: -------------------------------------------------------------------------------- 1 | import { gql } from '@apollo/client' 2 | 3 | export default gql` 4 | mutation login($email: String!, $password: String!) { 5 | login(input: { email: $email, password: $password }) { 6 | token 7 | } 8 | } 9 | ` 10 | -------------------------------------------------------------------------------- /Chapter13/graphql/frontend/src/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= htmlWebpackPlugin.options.title %> 5 | 6 | 7 | 8 |
    9 | 10 | 11 | -------------------------------------------------------------------------------- /Chapter13/graphql/frontend/src/client/pages/dashboard.tsx: -------------------------------------------------------------------------------- 1 | import DashboardLayout from '../components/dashboard/DashboardLayout' 2 | import UserProvider from '../contexts/user' 3 | 4 | const Page = () => ( 5 | 6 | 7 | 8 | ) 9 | 10 | export default Page 11 | -------------------------------------------------------------------------------- /Chapter13/graphql/frontend/src/client/pages/error404.tsx: -------------------------------------------------------------------------------- 1 | const Page = () => ( 2 |
    3 |

    Error404

    4 |
    5 | ) 6 | 7 | export default Page 8 | -------------------------------------------------------------------------------- /Chapter13/graphql/frontend/src/client/pages/home.tsx: -------------------------------------------------------------------------------- 1 | const Page = () => ( 2 |
    3 |

    Home

    4 | 5 | 10 |
    11 | ) 12 | 13 | export default Page 14 | -------------------------------------------------------------------------------- /Chapter13/graphql/frontend/webpack/webpack.production.ts: -------------------------------------------------------------------------------- 1 | import { Configuration } from 'webpack' 2 | 3 | const webpackProdConfig: (args: { presets: string[] }) => Configuration = () => { 4 | const webpackConfig: Configuration = { 5 | mode: 'production' 6 | } 7 | 8 | return webpackConfig 9 | } 10 | 11 | export default webpackProdConfig 12 | -------------------------------------------------------------------------------- /Chapter13/graphql/frontend/webpack/webpack.types.ts: -------------------------------------------------------------------------------- 1 | // Types 2 | export type WebpackMode = 'production' | 'development' 3 | 4 | export type ConfigArgs = { 5 | mode: WebpackMode 6 | presets: string[] 7 | } 8 | -------------------------------------------------------------------------------- /Chapter14/monorepo/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /Chapter14/monorepo/.eslintignore: -------------------------------------------------------------------------------- 1 | /dist/** 2 | /node_modules/** -------------------------------------------------------------------------------- /Chapter14/monorepo/.nvmrc: -------------------------------------------------------------------------------- 1 | v18 2 | -------------------------------------------------------------------------------- /Chapter14/monorepo/.prettierignore: -------------------------------------------------------------------------------- 1 | build 2 | coverage 3 | dist 4 | node_modules -------------------------------------------------------------------------------- /Chapter14/monorepo/.prettierrc.yml: -------------------------------------------------------------------------------- 1 | arrowParens: always 2 | bracketSpacing: true 3 | jsxSingleQuote: false 4 | printWidth: 100 5 | quoteProps: as-needed 6 | semi: false 7 | singleQuote: true 8 | tabWidt": 2 9 | trailingComma: none 10 | useTabs: false -------------------------------------------------------------------------------- /Chapter14/monorepo/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "EditorConfig.EditorConfig", 4 | "dbaeumer.vscode-eslint", 5 | "esbenp.prettier-vscode", 6 | "DavidAnson.vscode-markdownlint", 7 | "redhat.vscode-yaml", 8 | "GraphQL.vscode-graphql", 9 | "aaron-bond.better-comments", 10 | "mike-co.import-sorter", 11 | "zengxingxin.sort-js-object-keys", 12 | "diegolincoln.vscode-styled-components" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Chapter14/monorepo/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "editor.formatOnSave": true, 4 | "prettier.requireConfig": true, 5 | "editor.codeActionsOnSave": { 6 | "source.fixAll.eslint": true 7 | }, 8 | "typescript.tsdk": "node_modules/typescript/lib" 9 | } 10 | -------------------------------------------------------------------------------- /Chapter14/monorepo/README.md: -------------------------------------------------------------------------------- 1 | # site-builder -------------------------------------------------------------------------------- /Chapter14/monorepo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web-creator", 3 | "private": true, 4 | "workspaces": [ 5 | "packages/*" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /Chapter14/monorepo/packages/api/index.js: -------------------------------------------------------------------------------- 1 | module.exports = () => console.log("I'm the API package UPDATED") 2 | -------------------------------------------------------------------------------- /Chapter14/monorepo/packages/api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web-creator/api", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC" 12 | } 13 | -------------------------------------------------------------------------------- /Chapter14/monorepo/packages/frontend/index.js: -------------------------------------------------------------------------------- 1 | const api = require('@web-creator/api') 2 | 3 | api() 4 | -------------------------------------------------------------------------------- /Chapter14/monorepo/packages/frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web-creator/frontend", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1" 7 | }, 8 | "keywords": [], 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "@web-creator/api": "1.0.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /Chapter14/web-creator/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /Chapter14/web-creator/.eslintignore: -------------------------------------------------------------------------------- 1 | /dist/** 2 | /node_modules/** -------------------------------------------------------------------------------- /Chapter14/web-creator/.nvmrc: -------------------------------------------------------------------------------- 1 | v18 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/.prettierignore: -------------------------------------------------------------------------------- 1 | build 2 | coverage 3 | dist 4 | node_modules -------------------------------------------------------------------------------- /Chapter14/web-creator/.prettierrc.yml: -------------------------------------------------------------------------------- 1 | arrowParens: always 2 | bracketSpacing: true 3 | jsxSingleQuote: false 4 | printWidth: 100 5 | quoteProps: as-needed 6 | semi: false 7 | singleQuote: true 8 | tabWidt": 2 9 | trailingComma: none 10 | useTabs: false -------------------------------------------------------------------------------- /Chapter14/web-creator/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "EditorConfig.EditorConfig", 4 | "dbaeumer.vscode-eslint", 5 | "esbenp.prettier-vscode", 6 | "DavidAnson.vscode-markdownlint", 7 | "redhat.vscode-yaml", 8 | "GraphQL.vscode-graphql", 9 | "aaron-bond.better-comments", 10 | "mike-co.import-sorter", 11 | "zengxingxin.sort-js-object-keys", 12 | "diegolincoln.vscode-styled-components" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Chapter14/web-creator/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "editor.formatOnSave": true, 4 | "prettier.requireConfig": true, 5 | "editor.codeActionsOnSave": { 6 | "source.fixAll.eslint": true 7 | }, 8 | "typescript.tsdk": "node_modules/typescript/lib" 9 | } 10 | -------------------------------------------------------------------------------- /Chapter14/web-creator/README.md: -------------------------------------------------------------------------------- 1 | # site-builder -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/api/.env.example: -------------------------------------------------------------------------------- 1 | DB_ENGINE=postgresql 2 | DB_PORT=5432 3 | DB_HOST=localhost 4 | DB_USERNAME= 5 | DB_PASSWORD= 6 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/api/src/graphql/types/Error.ts: -------------------------------------------------------------------------------- 1 | import gql from 'graphql-tag' 2 | 3 | export default gql` 4 | type ErrorResponse { 5 | code: Int 6 | message: String! 7 | } 8 | type Error { 9 | error: ErrorResponse 10 | } 11 | ` 12 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/api/src/graphql/types/Scalar.ts: -------------------------------------------------------------------------------- 1 | import gql from 'graphql-tag' 2 | 3 | export default gql` 4 | scalar UUID 5 | scalar Datetime 6 | scalar JSON 7 | ` 8 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/api/src/services/crm/config.ts: -------------------------------------------------------------------------------- 1 | import { ServiceConfiguration } from '../../types/config' 2 | 3 | export const config: ServiceConfiguration = { 4 | domainName: 'ranchosanpancho.com', 5 | port: 4000, 6 | database: { 7 | database: 'crm' 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/api/src/services/crm/graphql/resolvers/index.ts: -------------------------------------------------------------------------------- 1 | import { mergeResolvers } from '@graphql-tools/merge' 2 | 3 | import user from '../../../../graphql/resolvers/user' 4 | import guest from './guest' 5 | 6 | const resolvers = mergeResolvers([user, guest]) 7 | 8 | export default resolvers 9 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/api/src/services/crm/graphql/types/index.ts: -------------------------------------------------------------------------------- 1 | import { mergeTypeDefs } from '@graphql-tools/merge' 2 | 3 | // Global Types 4 | import Error from '../../../../graphql/types/Error' 5 | import Scalar from '../../../../graphql/types/Scalar' 6 | import User from '../../../../graphql/types/User' 7 | 8 | // Local Types 9 | import Guest from './Guest' 10 | 11 | export default mergeTypeDefs([Error, Scalar, User, Guest]) 12 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/api/src/services/default/config.ts: -------------------------------------------------------------------------------- 1 | import { ServiceConfiguration } from '../../types/config' 2 | 3 | export const config: ServiceConfiguration = { 4 | domainName: 'localhost', 5 | port: 4000, 6 | database: { 7 | engine: 'postgresql', 8 | port: 5432, 9 | host: 'localhost', 10 | database: '', 11 | username: '', 12 | password: '' 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/api/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from './config' 2 | export * from './model' 3 | export * from './sequelize' 4 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/api/src/types/sequelize.ts: -------------------------------------------------------------------------------- 1 | export type Sequelize = { 2 | _defaults?: any 3 | name?: string 4 | options?: any 5 | associate?: any 6 | define?: any 7 | } 8 | 9 | export type DataType = { 10 | UUID: string 11 | UUIDV4(): string 12 | STRING: string 13 | BOOLEAN: boolean 14 | TEXT: string 15 | INTEGER: number 16 | JSON: string 17 | DATE: string 18 | FLOAT: number 19 | } 20 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/api/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.common.json", 3 | "compilerOptions": { 4 | "outDir": "./dist", 5 | "typeRoots": ["node_modules/@types"], 6 | "paths": { 7 | "~/*": ["./src/*"] 8 | } 9 | }, 10 | "include": ["src/**/*"] 11 | } 12 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/authentication/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './authentication' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/authentication/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.common.json", 3 | "compilerOptions": { 4 | "outDir": "./dist" 5 | }, 6 | "include": ["src/**/*"] 7 | } 8 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.png' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/sandbox/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-18-Design-Patterns-and-Best-Practices-Fourth-Edition/f38a9bc11bc4a1926659298699b7dd720a155df2/Chapter14/web-creator/packages/design-system/sandbox/bg.png -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/sandbox/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.png' 2 | declare module '*.eot' 3 | declare module '*.svg' 4 | declare module '*.ttf' 5 | declare module '*.woff' 6 | declare module '*.woff2' 7 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/sandbox/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | 4 | import App from './App' 5 | 6 | render(, document.querySelector('#root')) 7 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Alert/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Alert' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Avatar/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Avatar' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Badge/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Badge' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Breadcrumb' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Button/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Button' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Calendar/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Calendar' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Checkbox' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/DayPicker/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './DayPicker' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Dialog/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Dialog' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/GlobalStyles/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './GlobalStyles' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/alert-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/align-center.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/align-justify.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/align-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/align-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/archive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/arrow-down-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/arrow-down-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/arrow-down-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/arrow-left-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/arrow-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/arrow-right-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/arrow-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/arrow-up-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/arrow-up-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/arrow-up-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/arrow-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/at-sign.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/award.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/bar-chart-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/bar-chart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/bell.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/bold.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/book-open.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/book.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/bookmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/briefcase.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/camera-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/camera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/check-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/check-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/chevron-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/chevron-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/chevron-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/chevron-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/chevrons-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/chevrons-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/chevrons-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/chevrons-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/clipboard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/clock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/cloud-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/code.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/columns.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/copy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/credit-card.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/crop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/database.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/disc.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/dollar-sign.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/download-cloud.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/droplet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/edit-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/edit-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/edit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/external-link.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/eye.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/fast-forward.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/flag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/git-branch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/git-commit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/git-merge.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/git-pull-request.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/grid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/hash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/headphones.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/heart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/help-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/image.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/italic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/key.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/layers.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/layout.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/link-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/link.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/lock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/log-in.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/log-out.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/mail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/map-pin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/map.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/maximize-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/maximize.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/message-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/minimize.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/minus-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/minus-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/minus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/monitor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/moon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/more-horizontal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/more-vertical.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/navigation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/paperclip.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/pause.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/pie-chart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/play-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/play.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/plus-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/plus-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/power.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/repeat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/rewind.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/rotate-ccw.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/rotate-cw.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/rss.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/save.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/send.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/share.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/shopping-cart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/sidebar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/slash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/smartphone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/terminal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/thumbs-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/thumbs-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/toggle-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/toggle-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/tool.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/trash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/type.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/underline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/unlock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/upload.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/user-check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/user-minus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/user.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/users.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/video-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/video.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/x-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/x-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/x.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/zoom-in.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/icons/feather/zoom-out.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Icon/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Icon' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Input/index.ts: -------------------------------------------------------------------------------- 1 | export { default, Props } from './Input' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Pagination/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Pagination' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Paper/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Paper' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Radio/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Radio' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/RenderIf/RenderIf.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC, ReactElement } from 'react' 2 | 3 | interface IProps { 4 | children: ReactElement | string 5 | isTrue: boolean 6 | } 7 | 8 | const RenderIf: FC = ({ children, isTrue }) => { 9 | if (isTrue) { 10 | return
    {children}
    11 | } 12 | 13 | return null 14 | } 15 | 16 | export default RenderIf 17 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/RenderIf/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './RenderIf' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Select/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Select' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Spinner/Spinner.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import { CSSObject } from 'styled-components' 3 | 4 | interface Props { 5 | spinner?: string 6 | style: CSSObject 7 | } 8 | 9 | const Spinner: FC = ({ spinner = 'rolling', style = {} }) => ( 10 | Spinner 11 | ) 12 | 13 | export default Spinner 14 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Spinner/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Spinner' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Switcher/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Switcher' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Table/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Table' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Tags/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Tags' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/Text/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Text' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/TextArea/index.ts: -------------------------------------------------------------------------------- 1 | export { default, Props as ITextAreaProps } from './TextArea' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/TextField/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './TextField' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/components/ThemeToggler/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './ThemeToggler' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/theme/index.ts: -------------------------------------------------------------------------------- 1 | export * from './theme' 2 | export * from './utils' 3 | export * from './breakpoints' 4 | export * from './palettes/namedColors' 5 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/types/alignment.ts: -------------------------------------------------------------------------------- 1 | import { ValueOf } from '@web-creator/utils' 2 | 3 | export const Alignment = { 4 | left: 'left', 5 | center: 'center', 6 | right: 'right' 7 | } as const 8 | 9 | export type Alignment = ValueOf 10 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/types/calc.ts: -------------------------------------------------------------------------------- 1 | import { ValueOf } from '@web-creator/utils' 2 | 3 | export const CalcType = { 4 | spacing: 'spacing', 5 | padding: 'padding' 6 | } as const 7 | 8 | export type CalcType = ValueOf 9 | export const CalcTypes = Object.keys(CalcType) 10 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/types/fontWeight.ts: -------------------------------------------------------------------------------- 1 | export type FontWeight = { 2 | light: number 3 | normal: number 4 | semibold: number 5 | bold: number 6 | heavy: number 7 | } 8 | 9 | export const FontWeight: FontWeight = { 10 | light: 100, 11 | normal: 400, 12 | semibold: 500, 13 | bold: 700, 14 | heavy: 900 15 | } 16 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/types/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.eot' 2 | declare module '*.svg' 3 | declare module '*.ttf' 4 | declare module '*.woff' 5 | declare module '*.woff2' 6 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/types/size.ts: -------------------------------------------------------------------------------- 1 | import { ValueOf } from '@web-creator/utils' 2 | 3 | export const Size = { 4 | xSmall: 'xSmall', 5 | small: 'small', 6 | medium: 'medium', 7 | large: 'large', 8 | xLarge: 'xLarge' 9 | } as const 10 | 11 | export type Size = ValueOf 12 | export const Sizes = Object.keys(Size) 13 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/types/sizes.ts: -------------------------------------------------------------------------------- 1 | import { ValueOf } from '@web-creator/utils' 2 | 3 | export const ButtonSize = { 4 | xl: 'xl', 5 | lg: 'lg', 6 | md: 'md', 7 | sm: 'sm' 8 | } as const 9 | 10 | export type ButtonSize = ValueOf 11 | export const ButtonSizes = Object.keys(ButtonSize) 12 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/types/theme.ts: -------------------------------------------------------------------------------- 1 | import { IPalette } from '../theme/palettes/lightPalette' 2 | import { ITypography } from './typography' 3 | 4 | export interface Theme { 5 | palette: IPalette 6 | typography?: ITypography 7 | } 8 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/types/unit.ts: -------------------------------------------------------------------------------- 1 | import { ValueOf } from '@web-creator/utils' 2 | 3 | export interface IUnit { 4 | unitBase: string 5 | } 6 | 7 | export const Units = { 8 | unitBase: 'unitBase' 9 | } as const 10 | 11 | export type Units = ValueOf 12 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/design-system/src/usePrevious.ts: -------------------------------------------------------------------------------- 1 | import { useRef, useEffect } from 'react' 2 | 3 | function usePrevious(value: any) { 4 | const ref = useRef() 5 | 6 | useEffect(() => { 7 | ref.current = value 8 | }) 9 | 10 | return ref.current 11 | } 12 | 13 | export default usePrevious 14 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/devtools/src/index.ts: -------------------------------------------------------------------------------- 1 | // Cli 2 | export * from './cli/log' 3 | 4 | // Webpack 5 | export { default as getWebpackCommonConfig } from './webpack/webpack.common' 6 | export { default as getWebpackDevelopmentConfig } from './webpack/webpack.development' 7 | export { default as getWebpackProductionConfig } from './webpack/webpack.production' 8 | export * from './webpack/webpack.types' 9 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/devtools/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.common.json", 3 | "compilerOptions": { 4 | "outDir": "./dist" 5 | }, 6 | "include": ["src/**/*"] 7 | } 8 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["next/babel"], 3 | "plugins": [["styled-components", { "ssr": true, "preprocess": false }]], 4 | "env": { 5 | "production": { 6 | "plugins": ["babel-plugin-jsx-remove-data-test-id"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/next.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | reactStrictMode: true, 5 | webpack: (config, { isServer }) => { 6 | // Fixes npm packages that depend on `fs` module 7 | if (!isServer) { 8 | config.resolve.fallback.fs = false 9 | } 10 | 11 | // Aliases 12 | config.resolve.alias['~'] = path.resolve(__dirname, './src') 13 | 14 | return config 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/public/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-18-Design-Patterns-and-Best-Practices-Fourth-Edition/f38a9bc11bc4a1926659298699b7dd720a155df2/Chapter14/web-creator/packages/frontend/public/.gitkeep -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/public/images/characters/boy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-18-Design-Patterns-and-Best-Practices-Fourth-Edition/f38a9bc11bc4a1926659298699b7dd720a155df2/Chapter14/web-creator/packages/frontend/public/images/characters/boy.png -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/public/images/characters/girl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-18-Design-Patterns-and-Best-Practices-Fourth-Edition/f38a9bc11bc4a1926659298699b7dd720a155df2/Chapter14/web-creator/packages/frontend/public/images/characters/girl.png -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/components/ErrorPage/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './ErrorPage' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/components/GlobalStyles/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './GlobalStyles' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/components/Login/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Login' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/contexts/apolloClient.ts: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react' 2 | 3 | import { initializeApollo } from '~/graphql/client' 4 | 5 | export function useApollo(initialState: any) { 6 | const store = useMemo(() => initializeApollo(initialState), [initialState]) 7 | return store 8 | } 9 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/graphql/user/getUser.query.ts: -------------------------------------------------------------------------------- 1 | import { gql } from '@apollo/client' 2 | 3 | export default gql` 4 | query getUser($at: String!) { 5 | getUser(at: $at) { 6 | id 7 | email 8 | username 9 | role 10 | active 11 | } 12 | } 13 | ` 14 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/graphql/user/login.mutation.ts: -------------------------------------------------------------------------------- 1 | import { gql } from '@apollo/client' 2 | 3 | export default gql` 4 | mutation login($emailOrUsername: String!, $password: String!) { 5 | login(input: { emailOrUsername: $emailOrUsername, password: $password }) { 6 | token 7 | } 8 | } 9 | ` 10 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/sites/blank-page/config.ts: -------------------------------------------------------------------------------- 1 | import { SiteConfiguration } from '../../types/config' 2 | 3 | export const config: SiteConfiguration = { 4 | siteTitle: 'Blank Page', 5 | domainName: 'localhost', 6 | api: { 7 | uri: 'http://localhost:4000/graphql' 8 | }, 9 | pages: ['index'] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/sites/codejobs/config.ts: -------------------------------------------------------------------------------- 1 | import { SiteConfiguration } from '../../types/config' 2 | 3 | export const config: SiteConfiguration = { 4 | siteTitle: 'Codejobs', 5 | domainName: 'codejobs.com', 6 | pages: ['index', 'login'] 7 | } 8 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/sites/codejobs/pages/dashboard/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default () => ( 4 | <> 5 |

    Dashboard for Codejobs

    6 | Logout 7 | 8 | ) 9 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/sites/codejobs/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default () =>

    Codejobs Index Page

    4 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/sites/codejobs/pages/login.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Login from '~/components/Login' 4 | 5 | export default () => 6 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/sites/codejobs/server/siteServerSideProps.ts: -------------------------------------------------------------------------------- 1 | import Config from '~/config' 2 | 3 | const getSiteServerSideProps = async ({ req }: any) => { 4 | const props = { 5 | site: Config.site, 6 | siteTitle: Config.siteTitle 7 | } 8 | 9 | return { 10 | props 11 | } 12 | } 13 | 14 | export default getSiteServerSideProps 15 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/sites/codejobs/static/images/isotype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-18-Design-Patterns-and-Best-Practices-Fourth-Edition/f38a9bc11bc4a1926659298699b7dd720a155df2/Chapter14/web-creator/packages/frontend/src/sites/codejobs/static/images/isotype.png -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/sites/san-pancho/config.ts: -------------------------------------------------------------------------------- 1 | import { SiteConfiguration } from '../../types/config' 2 | 3 | export const config: SiteConfiguration = { 4 | siteTitle: 'Cabañas San Pancho', 5 | domainName: 'ranchosanpancho.com', 6 | pages: ['index', 'login'] 7 | } 8 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/sites/san-pancho/pages/dashboard/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default () => ( 4 | <> 5 |

    Dashboard for San Pancho

    6 | Logout 7 | 8 | ) 9 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/sites/san-pancho/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default () =>

    San Pancho Index Page

    4 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/sites/san-pancho/pages/login.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Login from '~/components/Login' 4 | 5 | export default () => 6 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/sites/san-pancho/server/siteServerSideProps.ts: -------------------------------------------------------------------------------- 1 | import Config from '~/config' 2 | 3 | const getSiteServerSideProps = async () => { 4 | const props = { 5 | site: Config.site, 6 | siteTitle: Config.siteTitle 7 | } 8 | 9 | return { 10 | props 11 | } 12 | } 13 | 14 | export default getSiteServerSideProps 15 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/sites/san-pancho/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-18-Design-Patterns-and-Best-Practices-Fourth-Edition/f38a9bc11bc4a1926659298699b7dd720a155df2/Chapter14/web-creator/packages/frontend/src/sites/san-pancho/static/.gitkeep -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/sites/san-pancho/static/images/isotype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-18-Design-Patterns-and-Best-Practices-Fourth-Edition/f38a9bc11bc4a1926659298699b7dd720a155df2/Chapter14/web-creator/packages/frontend/src/sites/san-pancho/static/images/isotype.png -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/sites/san-pancho/static/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-18-Design-Patterns-and-Best-Practices-Fourth-Edition/f38a9bc11bc4a1926659298699b7dd720a155df2/Chapter14/web-creator/packages/frontend/src/sites/san-pancho/static/images/logo.png -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/types/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.json' { 2 | const value: any 3 | export default value 4 | } 5 | 6 | declare module '*.eot' 7 | declare module '*.svg' 8 | declare module '*.ttf' 9 | declare module '*.woff' 10 | declare module '*.woff2' 11 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/frontend/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from './config' 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/utils/src/utils/chunk.ts: -------------------------------------------------------------------------------- 1 | function chunk(arr: any[], size = 1): any[] { 2 | return arr.length > size ? [arr.slice(0, size), ...chunk(arr.slice(size), size)] : [arr] 3 | } 4 | 5 | export default chunk 6 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/utils/src/utils/forEach.ts: -------------------------------------------------------------------------------- 1 | import is from './is' 2 | import keys from './keys' 3 | 4 | function forEach(items: any, callback: any): any { 5 | if (!is.Defined(items)) { 6 | return false 7 | } 8 | 9 | if ((is.Defined(items) && is.Defined(items[0])) || is.Array(items)) { 10 | return items.forEach(callback) 11 | } 12 | 13 | return is.Object(items) ? keys(items).forEach(callback) : false 14 | } 15 | 16 | export default forEach 17 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/utils/src/utils/format.ts: -------------------------------------------------------------------------------- 1 | import currencyFormatter from 'currency-formatter' 2 | 3 | const format = { 4 | money(amount: number, currency = 'MXN') { 5 | return currencyFormatter.format(amount, { code: currency }) 6 | } 7 | } 8 | 9 | export default format 10 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/utils/src/utils/keys.ts: -------------------------------------------------------------------------------- 1 | import is from './is' 2 | 3 | function keys(obj: any): any[] { 4 | if (is.Object(obj)) { 5 | return Object.keys(obj) 6 | } 7 | 8 | return [] 9 | } 10 | 11 | export default keys 12 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/utils/src/utils/pluralify.ts: -------------------------------------------------------------------------------- 1 | function pluralify(singular: string, plural: string, count: number) { 2 | return count === 1 ? singular : plural 3 | } 4 | 5 | export default pluralify 6 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/utils/src/utils/slug.ts: -------------------------------------------------------------------------------- 1 | import slugFn from 'slug' 2 | 3 | function slug(str = '') { 4 | return slugFn(str, { lower: true }) 5 | } 6 | 7 | export default slug 8 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/utils/src/utils/time.ts: -------------------------------------------------------------------------------- 1 | export function waitFor(time: number): Promise { 2 | return new Promise((resolve) => setTimeout(resolve, time * 1000)) 3 | } 4 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/utils/src/utils/ts.ts: -------------------------------------------------------------------------------- 1 | const ts = { 2 | hasKey(obj: any, key: keyof any): key is keyof O { 3 | return key in obj 4 | }, 5 | includes(Type: any, value: any) { 6 | return Object.values(Type).includes(value) 7 | } 8 | } 9 | 10 | export default ts 11 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/utils/src/utils/types.ts: -------------------------------------------------------------------------------- 1 | export type ValueOf = T[keyof T] 2 | -------------------------------------------------------------------------------- /Chapter14/web-creator/packages/utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.common.json", 3 | "compilerOptions": { 4 | "outDir": "./dist" 5 | }, 6 | "include": ["src/**/*"] 7 | } 8 | -------------------------------------------------------------------------------- /Chapter14/web-creator/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.common.json", 3 | "compilerOptions": { 4 | "baseUrl": "./packages", 5 | "paths": { 6 | "@web-creator/*": ["*/src"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Chapter15/keys/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter15/keys/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter15/keys/src/App.tsx: -------------------------------------------------------------------------------- 1 | import List from './components/List' 2 | 3 | function App() { 4 | return ( 5 |
    6 | 7 |
    8 | ) 9 | } 10 | 11 | export default App 12 | -------------------------------------------------------------------------------- /Chapter15/keys/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /Chapter15/keys/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter15/keys/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter15/keys/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /Chapter16/events/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } -------------------------------------------------------------------------------- /Chapter16/events/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter16/events/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSpacing": true, 4 | "jsxSingleQuote": false, 5 | "printWidth": 100, 6 | "quoteProps": "as-needed", 7 | "semi": false, 8 | "singleQuote": true, 9 | "tabWidth": 2, 10 | "trailingComma": "none", 11 | "useTabs": false 12 | } -------------------------------------------------------------------------------- /Chapter16/events/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | setupFilesAfterEnv: ['/setUpTests.ts'], 4 | testEnvironment: 'jsdom' 5 | } 6 | -------------------------------------------------------------------------------- /Chapter16/events/setUpTests.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect' 2 | -------------------------------------------------------------------------------- /Chapter16/events/src/components/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ShowInformation from './ShowInformation' 3 | 4 | function App() { 5 | return 6 | } 7 | 8 | export default App 9 | -------------------------------------------------------------------------------- /Chapter16/events/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= htmlWebpackPlugin.options.title %> 8 | 9 | 10 |
    11 | 12 | -------------------------------------------------------------------------------- /Chapter16/events/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | import App from './components/App' 4 | 5 | render(, document.getElementById('root')) 6 | -------------------------------------------------------------------------------- /Chapter16/my-first-vite-project/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter16/my-first-vite-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter16/my-first-vite-project/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /Chapter16/my-first-vite-project/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter16/my-first-vite-project/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter16/my-first-vite-project/vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import { defineConfig } from 'vite' 3 | import react from '@vitejs/plugin-react' 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react()], 8 | test: { 9 | environment: 'jsdom', 10 | globals: true, 11 | includeSource: ['src/**/*.{ts,tsx}'] 12 | } 13 | }) 14 | -------------------------------------------------------------------------------- /Chapter16/testing/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } -------------------------------------------------------------------------------- /Chapter16/testing/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter16/testing/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSpacing": true, 4 | "jsxSingleQuote": false, 5 | "printWidth": 100, 6 | "quoteProps": "as-needed", 7 | "semi": false, 8 | "singleQuote": true, 9 | "tabWidth": 2, 10 | "trailingComma": "none", 11 | "useTabs": false 12 | } -------------------------------------------------------------------------------- /Chapter16/testing/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | setupFilesAfterEnv: ['/setUpTests.ts'], 4 | testEnvironment: 'jsdom' 5 | } 6 | -------------------------------------------------------------------------------- /Chapter16/testing/setUpTests.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect' 2 | -------------------------------------------------------------------------------- /Chapter16/testing/src/components/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Hello from './Hello' 3 | 4 | function App() { 5 | return 6 | } 7 | 8 | export default App 9 | -------------------------------------------------------------------------------- /Chapter16/testing/src/components/Hello/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | type Props = { 4 | name?: string 5 | } 6 | 7 | function Hello({ name }: Props) { 8 | return

    Hello {name || 'World'}

    9 | } 10 | 11 | Hello.defaultProps = { 12 | name: '' 13 | } 14 | 15 | export default Hello 16 | -------------------------------------------------------------------------------- /Chapter16/testing/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= htmlWebpackPlugin.options.title %> 8 | 9 | 10 |
    11 | 12 | -------------------------------------------------------------------------------- /Chapter16/testing/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | import App from './components/App' 4 | 5 | render(, document.getElementById('root')) 6 | --------------------------------------------------------------------------------