⚒️ Preparate boilerplate v2 - Typescript + React 18.

styles/Home.module.css

@@ -0,0 +1,116 @@
+.container {
+  padding: 0 2rem;
+}
+
+.main {
+  min-height: 100vh;
+  padding: 4rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.title a {
+  color: #0070f3;
+  text-decoration: none;
+}
+
+.title a:hover,
+.title a:focus,
+.title a:active {
+  text-decoration: underline;
+}
+
+.title {
+  margin: 0;
+  line-height: 1.15;
+  font-size: 4rem;
+}
+
+.title,
+.description {
+  text-align: center;
+}
+
+.description {
+  margin: 4rem 0;
+  line-height: 1.5;
+  font-size: 1.5rem;
+}
+
+.code {
+  background: #fafafa;
+  border-radius: 5px;
+  padding: 0.75rem;
+  font-size: 1.1rem;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+.grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 800px;
+}
+
+.card {
+  margin: 1rem;
+  padding: 1.5rem;
+  text-align: left;
+  color: inherit;
+  text-decoration: none;
+  border: 1px solid #eaeaea;
+  border-radius: 10px;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  max-width: 300px;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  color: #0070f3;
+  border-color: #0070f3;
+}
+
+.card h2 {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+}
+
+.card p {
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+
+.logo {
+  height: 1em;
+  margin-left: 0.5rem;
+}
+
+@media (max-width: 600px) {
+  .grid {
+    width: 100%;
+    flex-direction: column;
+  }
+}

styles/components/button/index.js

@@ -1,86 +0,0 @@
-const baseStyle = {
-  borderRadius: "md",
-  borderColor: "dark.400",
-  boxShadow: "none",
-  cursor: "pointer",
-  display: "inline-flex",
-  alignItems: "center",
-  _disabled: {
-    cursor: "not-allowed",
-  },
-  _focused: {
-    borderColor: "dark.500",
-  },
-};
-
-function variantPrimary() {
-  const disabled = {
-    bg: "dark.300",
-    color: "dark.500",
-  };
-
-  const loading = {
-    bg: "dark.600",
-    color: "white",
-  };
-
-  return {
-    bg: "dark.700",
-    color: "white",
-    _hover: {
-      bg: "dark.800",
-      _disabled: {
-        ...disabled,
-        _loading: loading,
-      },
-    },
-    _active: {
-      bg: "dark.800",
-    },
-    _disabled: {
-      ...disabled,
-      _loading: loading,
-    },
-  };
-}
-
-function variantSecondary() {
-  const disabled = {
-    bg: "dark.300",
-    color: "gray.500",
-  };
-
-  const loading = {
-    bg: "dark.600",
-    color: "white",
-  };
-
-  return {
-    bg: "dark.500",
-    color: "white",
-    _hover: {
-      bg: "dark.700",
-      _disabled: {
-        ...disabled,
-        _loading: loading,
-      },
-    },
-    _active: {
-      bg: "dark.800",
-    },
-    _disabled: {
-      ...disabled,
-      _loading: loading,
-    },
-  };
-}
-
-const variants = {
-  primary: variantPrimary,
-  secondary: variantSecondary,
-};
-
-export default {
-  baseStyle,
-  variants,
-};

styles/components/index.js

@@ -1,5 +0,0 @@
-import Button from "./button";
-
-export default {
-  Button,
-};

styles/globals.css

@@ -1,11 +1,16 @@
-@font-face {
-  font-family: "Inter-Medium";
-  src: url("/fonts/Inter-Medium.woff2") format('woff2');
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
-a:focus {
-  outline: none;
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
 }

styles/theme.js

@@ -1,51 +0,0 @@
-import { extendTheme } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
-import components from "./components";
-
-const theme = extendTheme(
-  {
-    components,
-  },
-  {
-    config: {
-      initialColorMode: "light",
-      useSystemColorMode: false,
-    },
-    colors: {
-      dark: {
-        50: "#fafafa",
-        100: "#f5f5f5",
-        200: "#e6e6e6",
-        300: "#d6d6d6",
-        400: "#a5a5a5",
-        500: "#767676",
-        600: "#575757",
-        700: "#434343",
-        800: "#292929",
-        900: "#000000",
-      },
-      lightDark: {
-        900: "#16161a",
-      },
-      light: {
-        100: "#f9f9f9",
-      },
-    },
-    fonts: {
-      body: "Inter-Medium, sans-serif",
-      heading: "Inter-Medium, sans-serif",
-    },
-    styles: {
-      global: (props) => ({
-        "html, body": {
-          height: "100%",
-          maxHeight: "100vh",
-          backgroundColor: mode("light.100", "lightDark.900")(props),
-        },
-      }),
-      borderColor: "red",
-    },
-  }
-);
-
-export default theme;