Added styled components

- also removed existing css
  - left the capabilities included
This commit is contained in:
Rick van Lieshout 2022-08-08 14:08:16 +02:00
parent e733c4a9f6
commit 4b61b4a370
9 changed files with 382 additions and 504 deletions

View File

@ -4,7 +4,7 @@
"body": [ "body": [
"import { FunctionComponent } from \"react\";", "import { FunctionComponent } from \"react\";",
"", "",
"type Props = {}", "type Props = {};",
"", "",
"export const ${1:${TM_FILENAME_BASE}}: FunctionComponent<Props> = () => {", "export const ${1:${TM_FILENAME_BASE}}: FunctionComponent<Props> = () => {",
" return <h1>${1:${TM_FILENAME_BASE}}</h1>;", " return <h1>${1:${TM_FILENAME_BASE}}</h1>;",
@ -72,5 +72,23 @@
"react-i18next useTranslate hook": { "react-i18next useTranslate hook": {
"prefix": ["useTranslation", "translate", "i18-trans"], "prefix": ["useTranslation", "translate", "i18-trans"],
"body": ["const [translate] = useTranslation();"] "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}} };",
""
]
} }
} }

View File

@ -4,6 +4,12 @@ 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/), 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). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [0.6.0] - 2022-08-08
- Added styled components
- also removed existing css
- left the capabilities included
## [0.5.0] - 2022-06-26 ## [0.5.0] - 2022-06-26
- Added react-oidc (use demo/demo) - Added react-oidc (use demo/demo)

790
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{ {
"name": "react-starter-kit", "name": "react-starter-kit",
"version": "0.5.0", "version": "0.6.0",
"description": "A modern, create-react-app-based, starter kit for React projects", "description": "A modern, create-react-app-based, starter kit for React projects",
"keywords": [ "keywords": [
"react", "react",
@ -37,7 +37,7 @@
"start": "node scripts/start.js", "start": "node scripts/start.js",
"test": "node scripts/test.js --verbose", "test": "node scripts/test.js --verbose",
"test-ci": "node scripts/test.js --ci --coverage", "test-ci": "node scripts/test.js --ci --coverage",
"test-live-coverage": " concurrently --kill-others \"npm run test-with-coverage\" \"npx http-server -c-1 coverage/lcov-report\"", "test-live-coverage": "concurrently --kill-others \"npm run test-with-coverage\" \"npx http-server -c-1 coverage/lcov-report\"",
"test-with-coverage": "node scripts/test.js --coverage", "test-with-coverage": "node scripts/test.js --coverage",
"test:prod": "npm run test-ci && npm run e2e-ci" "test:prod": "npm run test-ci && npm run e2e-ci"
}, },
@ -56,7 +56,7 @@
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-redux": "^8.0.2", "react-redux": "^8.0.2",
"react-router-dom": "^6.3.0", "react-router-dom": "^6.3.0",
"tailwindcss": "^3.1.6" "styled-components": "^5.3.5"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.18.9", "@babel/core": "^7.18.9",
@ -71,6 +71,7 @@
"@types/node": "^18.6.1", "@types/node": "^18.6.1",
"@types/react": "^18.0.15", "@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6", "@types/react-dom": "^18.0.6",
"@types/styled-components": "^5.1.25",
"babel-jest": "^27.4.2", "babel-jest": "^27.4.2",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"babel-plugin-named-asset-import": "^0.3.8", "babel-plugin-named-asset-import": "^0.3.8",
@ -112,7 +113,7 @@
"mocha-junit-reporter": "^2.0.2", "mocha-junit-reporter": "^2.0.2",
"postcss": "^8.4.14", "postcss": "^8.4.14",
"postcss-flexbugs-fixes": "^5.0.2", "postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.2.1", "postcss-loader": "^7.0.1",
"postcss-normalize": "^10.0.1", "postcss-normalize": "^10.0.1",
"postcss-preset-env": "^7.7.2", "postcss-preset-env": "^7.7.2",
"prettier": "^2.7.1", "prettier": "^2.7.1",

View File

@ -1,11 +0,0 @@
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;
}

View File

@ -1,9 +1,9 @@
import React from "react"; import React from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import { createGlobalStyle } from "styled-components";
import App from "./App"; import App from "./App";
import { store } from "./app/store"; import { store } from "./app/store";
import "./index.css";
import "./infrastructure/i18n/init"; import "./infrastructure/i18n/init";
import { OidcProvider } from "./infrastructure/sso/OidcProvider"; import { OidcProvider } from "./infrastructure/sso/OidcProvider";
import { Loader } from "./infrastructure/wrappers/WithPageSuspense"; import { Loader } from "./infrastructure/wrappers/WithPageSuspense";
@ -12,8 +12,23 @@ import reportWebVitals from "./reportWebVitals";
const container = document.getElementById("root")!; const container = document.getElementById("root")!;
const root = createRoot(container); 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( root.render(
<React.StrictMode> <React.StrictMode>
<GlobalStyle />
<Provider store={store}> <Provider store={store}>
<OidcProvider> <OidcProvider>
<Loader> <Loader>

View File

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

View File

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

View File

@ -0,0 +1,12 @@
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 };