.husky/pre-commit

@@ -2,6 +2,5 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 npm run lint-staged
-npm run lint
 npm run test-ci
 npm run e2e-ci

.vscode/typescriptreact.code-snippets

@@ -4,7 +4,7 @@
     "body": [
       "import { FunctionComponent } from \"react\";",
       "",
-      "type Props = {};",
+      "type Props = {}",
       "",
       "export const ${1:${TM_FILENAME_BASE}}: FunctionComponent<Props> = () => {",
       "  return <h1>${1:${TM_FILENAME_BASE}}</h1>;",
@@ -72,23 +72,5 @@
   "react-i18next useTranslate hook": {
     "prefix": ["useTranslation", "translate", "i18-trans"],
     "body": ["const [translate] = useTranslation();"]
-  },
-  "react-styled-component": {
-    "prefix": ["rsfc", "rsc", "react-styled-component"],
-    "body": [
-      "import { FunctionComponent } from \"react\";",
-      "import styled from \"styled-components\";",
-      "",
-      "type Props = { className?: string };",
-      "",
-      "const ${1:${TM_FILENAME_BASE}}: FunctionComponent<Props> = ({className}) => {",
-      "  return <h1 className={className}>${1:${TM_FILENAME_BASE}}</h1>;",
-      "};",
-      "",
-      "const Styled${1:${TM_FILENAME_BASE}} = styled(${1:${TM_FILENAME_BASE}})``;",
-      "",
-      "export { Styled${1:${TM_FILENAME_BASE}} as ${1:${TM_FILENAME_BASE}} };",
-      ""
-    ]
   }
 }

CHANGELOG.md

@@ -4,16 +4,6 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.6.1] - 2022-08-08
-
-- eslint now receives the glob itself
-
-## [0.6.0] - 2022-08-08
-
-- Added styled components
-  - also removed existing css
-  - left the capabilities included
-
 ## [0.5.0] - 2022-06-26
 
 - Added react-oidc (use demo/demo)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-starter-kit",
-  "version": "0.6.1",
+  "version": "0.5.0",
   "description": "A modern, create-react-app-based, starter kit for React projects",
   "keywords": [
     "react",
@@ -30,7 +30,7 @@
     "e2e": "cypress open -d --e2e",
     "e2e-ci": "start-server-and-test start http://localhost:3000 cypress-run",
     "postinstall": "husky install",
-    "lint": "eslint \"src/**\"",
+    "lint": "GLOBIGNORE='src/types' && eslint src/**",
     "lint-staged": "lint-staged --relative",
     "organize-package-json": "npx format-package -w && npx sort-package-json",
     "pretty-quick": "pretty-quick --staged",
@@ -56,7 +56,7 @@
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
-    "styled-components": "^5.3.5"
+    "tailwindcss": "^3.1.6"
   },
   "devDependencies": {
     "@babel/core": "^7.18.9",
@@ -71,7 +71,6 @@
     "@types/node": "^18.6.1",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
-    "@types/styled-components": "^5.1.25",
     "babel-jest": "^27.4.2",
     "babel-loader": "^8.2.5",
     "babel-plugin-named-asset-import": "^0.3.8",
@@ -113,7 +112,7 @@
     "mocha-junit-reporter": "^2.0.2",
     "postcss": "^8.4.14",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-loader": "^7.0.1",
+    "postcss-loader": "^6.2.1",
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^7.7.2",
     "prettier": "^2.7.1",

src/index.css

@@ -0,0 +1,11 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}

src/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
-import { createGlobalStyle } from "styled-components";
 import App from "./App";
 import { store } from "./app/store";
+import "./index.css";
 import "./infrastructure/i18n/init";
 import { OidcProvider } from "./infrastructure/sso/OidcProvider";
 import { Loader } from "./infrastructure/wrappers/WithPageSuspense";
@@ -12,23 +12,8 @@ import reportWebVitals from "./reportWebVitals";
 const container = document.getElementById("root")!;
 const root = createRoot(container);
 
-const GlobalStyle = createGlobalStyle`
-  body {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-      "Droid Sans", "Helvetica Neue", sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-  }
-`;
-
 root.render(
   <React.StrictMode>
-    <GlobalStyle />
     <Provider store={store}>
       <OidcProvider>
         <Loader>

src/infrastructure/navbar/Navbar.css

@@ -0,0 +1,3 @@
+nav a {
+  padding-right: 10px;
+}

src/infrastructure/navbar/Navbar.tsx

@@ -3,18 +3,18 @@ import { DateTime } from "luxon";
 import { FunctionComponent } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import styled from "styled-components";
 import { ROUTE_KEYS } from "../../Routes";
 import { Config } from "../config";
-type Props = { className?: string };
+import "./Navbar.css";
+type Props = {};
 
-const Navbar: FunctionComponent<Props> = ({ className }) => {
+export const Navbar: FunctionComponent<Props> = () => {
   const [translate, i18n] = useTranslation();
   const { login, logout, isAuthenticated } = useOidc();
   const { accessTokenPayload } = useOidcAccessToken();
   const { home, about, counter } = ROUTE_KEYS;
   return (
-    <div className={className}>
+    <>
       <h1>{translate("navBar.intro")}</h1>
       <p>
         {/* trans can also be used to translate */}
@@ -48,14 +48,6 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
         <button onClick={() => i18n.changeLanguage("nl")}>nl</button>
         <hr />
       </nav>
-    </div>
+    </>
   );
 };
-
-const StyledNavBar = styled(Navbar)`
-  nav a {
-    padding-right: 10px;
-  }
-`;
-
-export { StyledNavBar as Navbar };

src/infrastructure/navbar/TestComponent.tsx

@@ -1,12 +0,0 @@
-import { FunctionComponent } from "react";
-import styled from "styled-components";
-
-type Props = {};
-
-const TestComponent: FunctionComponent<Props> = () => {
-  return <h1>TestComponent</h1>;
-};
-
-const StyledTestComponent = styled(TestComponent)``;
-
-export { StyledTestComponent as TestComponent };