From 6563e386cae9bec08b9999683615d9a9718413bb Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 19 Apr 2021 22:11:17 +0000 Subject: [PATCH 01/15] Bump ssri from 6.0.1 to 6.0.2 Bumps [ssri](https://github.com/npm/ssri) from 6.0.1 to 6.0.2. - [Release notes](https://github.com/npm/ssri/releases) - [Changelog](https://github.com/npm/ssri/blob/v6.0.2/CHANGELOG.md) - [Commits](https://github.com/npm/ssri/compare/v6.0.1...v6.0.2) Signed-off-by: dependabot[bot] --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 0b752ad..64e1721 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10304,9 +10304,9 @@ sshpk@^1.7.0: tweetnacl "~0.14.0" ssri@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8" - integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA== + version "6.0.2" + resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5" + integrity sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q== dependencies: figgy-pudding "^3.5.1" From 7c0cd58fccdaa7011da8b2c50c841dd5031b6aa2 Mon Sep 17 00:00:00 2001 From: Brandon Dean Date: Fri, 23 Apr 2021 17:59:14 -0400 Subject: [PATCH 02/15] Make full app area a link --- src/components/app.tsx | 36 +++++++++++++++++------------------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/src/components/app.tsx b/src/components/app.tsx index aabd910..6d38867 100644 --- a/src/components/app.tsx +++ b/src/components/app.tsx @@ -3,10 +3,16 @@ import Icon from "./icon"; import styled from "styled-components"; import selectedTheme from "../lib/theme"; -const AppContainer = styled.div` +const AppContainer = styled.a` display: flex; - flex: auto 25%; + flex: 1 0 auto; padding: 1rem; + color: ${selectedTheme.mainColor}; + font-weight: 500; + text-transform: uppercase; + margin: 0; + text-decoration: none; + font-size: 1rem; `; const IconContainer = styled.div` @@ -21,16 +27,8 @@ const DetailsContainer = styled.div` flex-direction: column; `; -const AppLink = styled.a` - flex: 1 0 auto; - color: ${selectedTheme.mainColor}; - font-weight: 500; - text-transform: uppercase; - margin: 0; - text-decoration: none; - font-size: 1rem; - - &:hover { +const AppName = styled.div` + a:hover & { text-decoration: underline; } `; @@ -59,18 +57,18 @@ export const App = ({ name, icon, url, displayURL, newTab }: IAppProps) => { useEffect(() => { console.log(newTab) }, [newTab]) + const linkAttrs = (newTab !== undefined && newTab) ? { + target: '_blank', + rel: 'noopener noreferrer', + } : {}; + return ( - + - - { - (newTab !== undefined && newTab) ? - {name} : {name} - } - + {name} {displayURL} From aaee58137dc406d91b04830ab6a1ffef183d72d2 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 11 May 2021 18:35:42 +0000 Subject: [PATCH 03/15] Bump hosted-git-info from 2.8.8 to 2.8.9 Bumps [hosted-git-info](https://github.com/npm/hosted-git-info) from 2.8.8 to 2.8.9. - [Release notes](https://github.com/npm/hosted-git-info/releases) - [Changelog](https://github.com/npm/hosted-git-info/blob/v2.8.9/CHANGELOG.md) - [Commits](https://github.com/npm/hosted-git-info/compare/v2.8.8...v2.8.9) Signed-off-by: dependabot[bot] --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 64e1721..844b1d2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5645,9 +5645,9 @@ hoopy@^0.1.4: integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ== hosted-git-info@^2.1.4: - version "2.8.8" - resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488" - integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg== + version "2.8.9" + resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9" + integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw== hpack.js@^2.1.6: version "2.1.6" From 947e6778d9d8a730bb42016a8a899f66b7200a5d Mon Sep 17 00:00:00 2001 From: phntxx Date: Sat, 15 May 2021 16:09:12 +0200 Subject: [PATCH 04/15] Update greeter.tsx --- src/components/greeter.tsx | 34 +++++++++++++++++++++++----------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/src/components/greeter.tsx b/src/components/greeter.tsx index b91185d..3f13acb 100644 --- a/src/components/greeter.tsx +++ b/src/components/greeter.tsx @@ -38,32 +38,33 @@ interface IGreeterComponentProps { } /** - * + * * @param a the number that's supposed to be checked * @param b the minimum * @param c the maximum */ -const isBetween = (a: number, b: number, c: number): boolean => (a > b && a < c) +const isBetween = (a: number, b: number, c: number): boolean => + a >= b && a <= c; /** * Returns a greeting based on the current time * @returns {string} - A greeting */ const getGreeting = (greetings: Array): string => { - - let hours = Math.floor(new Date().getHours()) + let hours = Math.floor(new Date().getHours()); let result = ""; - greetings.forEach(greeting => { - if (isBetween(hours, greeting.start, greeting.end)) result = greeting.greeting; - }) + greetings.forEach((greeting) => { + if (isBetween(hours, greeting.start, greeting.end)) + result = greeting.greeting; + }); return result; }; /** * Returns the appropriate extension for a number (eg. 'rd' for '3' to make '3rd') - * @param {number} day - The number of a day within a month + * @param {number} day - The number of a day within a month * @returns {string} - The extension for that number */ const getExtension = (day: number) => { @@ -87,7 +88,11 @@ const getExtension = (day: number) => { * @param {string} format - The format of the date string * @returns {string} - The current date as a string */ -const getDateString = (weekdays: Array, months: Array, format: string) => { +const getDateString = ( + weekdays: Array, + months: Array, + format: string +) => { let currentDate = new Date(); let weekday = weekdays[currentDate.getUTCDay()]; @@ -96,7 +101,12 @@ const getDateString = (weekdays: Array, months: Array, format: s let extension = getExtension(day); let year = currentDate.getFullYear(); - return format.replace("%wd", weekday).replace("%d", day.toString()).replace("%e", extension).replace("%m", month).replace("%y", year.toString()); + return format + .replace("%wd", weekday) + .replace("%d", day.toString()) + .replace("%e", extension) + .replace("%m", month) + .replace("%y", year.toString()); }; /** @@ -104,7 +114,9 @@ const getDateString = (weekdays: Array, months: Array, format: s */ const Greeter = ({ data }: IGreeterComponentProps) => ( - {getDateString(data.days, data.months, data.dateformat)} + + {getDateString(data.days, data.months, data.dateformat)} + {getGreeting(data.greetings)} ); From 524caa15203701f114b78a43dfaabcbc28a4a9cd Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 28 May 2021 18:15:56 +0000 Subject: [PATCH 05/15] Bump dns-packet from 1.3.1 to 1.3.4 Bumps [dns-packet](https://github.com/mafintosh/dns-packet) from 1.3.1 to 1.3.4. - [Release notes](https://github.com/mafintosh/dns-packet/releases) - [Changelog](https://github.com/mafintosh/dns-packet/blob/master/CHANGELOG.md) - [Commits](https://github.com/mafintosh/dns-packet/compare/v1.3.1...v1.3.4) Signed-off-by: dependabot[bot] --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 844b1d2..c3e01bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4257,9 +4257,9 @@ dns-equal@^1.0.0: integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0= dns-packet@^1.3.1: - version "1.3.1" - resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a" - integrity sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg== + version "1.3.4" + resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.4.tgz#e3455065824a2507ba886c55a89963bb107dec6f" + integrity sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA== dependencies: ip "^1.1.0" safe-buffer "^5.0.1" From e7d86fda6ca9decde25cae2b7b7c729780c8d79f Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun, 6 Jun 2021 05:00:14 +0000 Subject: [PATCH 06/15] Bump ws from 6.2.1 to 6.2.2 Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2. - [Release notes](https://github.com/websockets/ws/releases) - [Commits](https://github.com/websockets/ws/commits) --- updated-dependencies: - dependency-name: ws dependency-type: indirect ... Signed-off-by: dependabot[bot] --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index c3e01bc..11a2296 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11673,9 +11673,9 @@ write-file-atomic@^3.0.0: typedarray-to-buffer "^3.1.5" ws@^6.2.1: - version "6.2.1" - resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb" - integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA== + version "6.2.2" + resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e" + integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw== dependencies: async-limiter "~1.0.0" From f0129100baf3e46da91e4a93b734e5c961f6439f Mon Sep 17 00:00:00 2001 From: Yasiru <62378744+yrangana@users.noreply.github.com> Date: Thu, 10 Jun 2021 20:26:18 +1000 Subject: [PATCH 07/15] Update greeter.json changed end as 24 in the good evening greeting. 0 didn't work --- data/greeter.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/data/greeter.json b/data/greeter.json index 487bd37..e01f136 100644 --- a/data/greeter.json +++ b/data/greeter.json @@ -42,7 +42,7 @@ { "greeting": "Good evening!", "start": 18, - "end": 0 + "end": 24 } ], "dateformat": "%wd, %m %d%e %y" From 24e61efcf1929fa9ee9530275d6c22b8e679b31f Mon Sep 17 00:00:00 2001 From: phntxx Date: Mon, 14 Jun 2021 11:29:03 +0200 Subject: [PATCH 08/15] Added tests --- .circleci/config.yml | 57 + .eslintrc.js | 34 + .gitignore | 3 + .prettierrc.js | 21 + codecov.yml | 16 + package.json | 26 +- src/app.tsx | 14 +- src/components/app.tsx | 25 +- src/components/appCategory.tsx | 10 +- src/components/appList.tsx | 10 +- src/components/bookmarkList.tsx | 24 - .../{bookmarkGroup.tsx => bookmarks.tsx} | 34 +- src/components/elements.tsx | 28 - src/components/greeter.tsx | 23 +- src/components/icon.tsx | 66 +- src/components/imprint.tsx | 37 +- src/components/modal.tsx | 20 +- src/components/searchBar.tsx | 7 +- src/components/settings.tsx | 12 +- src/index.tsx | 2 +- src/lib/fetcher.d.ts | 32 + src/lib/fetcher.tsx | 116 +- src/serviceWorker.ts | 53 +- src/setupTests.ts | 2 +- src/test/components/app.spec.tsx | 24 + src/test/components/appCategory.spec.tsx | 30 + src/test/components/appList.spec.tsx | 43 + src/test/components/bookmarks.spec.tsx | 39 + tsconfig.json | 12 +- yarn.lock | 3006 ++++++++--------- 30 files changed, 2089 insertions(+), 1737 deletions(-) create mode 100644 .circleci/config.yml create mode 100644 .eslintrc.js create mode 100644 .prettierrc.js create mode 100644 codecov.yml delete mode 100644 src/components/bookmarkList.tsx rename src/components/{bookmarkGroup.tsx => bookmarks.tsx} (53%) create mode 100644 src/lib/fetcher.d.ts create mode 100644 src/test/components/app.spec.tsx create mode 100644 src/test/components/appCategory.spec.tsx create mode 100644 src/test/components/appList.spec.tsx create mode 100644 src/test/components/bookmarks.spec.tsx diff --git a/.circleci/config.yml b/.circleci/config.yml new file mode 100644 index 0000000..48ea7c7 --- /dev/null +++ b/.circleci/config.yml @@ -0,0 +1,57 @@ +version: 2.1 + +commands: + install_dependencies: + description: "Installs dependencies and uses CircleCI's cache" + steps: + - checkout + - restore_cache: + keys: + - dependencies-{{ checksum "yarn.lock" }} + - dependencies- + - run: + command: | + yarn install + - save_cache: + paths: + - node_modules + key: dependencies-{{ checksum "yarn.lock" }} + +jobs: + style: + docker: + - image: node:latest + steps: + - install_dependencies + - run: + name: prettier + command: | + yarn prettier --check + - run: + name: lint + command: | + yarn lint + + frontend: + docker: + - image: node:latest + steps: + - install_dependencies + - run: + name: typecheck + command: | + yarn typecheck + - run: + name: test + command: | + yarn test + - run: + name: coverage + command: | + yarn coverage + +workflows: + version: 2 + tilt: + jobs: + - style diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..8340487 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,34 @@ +module.exports = { + extends: ["eslint:recommended", "plugin:react-hooks/recommended"], + rules: { + orderedImports: true, + completedDocs: [ + true, + { + enums: true, + functions: { + visibilities: ["exported"], + }, + interfaces: { + visibilities: ["exported"], + }, + methods: { + tags: { + content: {}, + existence: ["inheritdoc", "override"], + }, + }, + types: { + visibilities: ["exported"], + }, + variables: { + visibilities: ["exported"], + }, + }, + ], + maxClassesPerFile: false, + maxLineLength: false, + memberOrdering: false, + variableName: false, + }, +}; diff --git a/.gitignore b/.gitignore index 7d9df53..6813200 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ # testing /coverage +__snapshots__ # building /build @@ -21,3 +22,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + + diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..363e53c --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,21 @@ +module.exports = { + bracketSpacing: true, + printWidth: 80, + parser: "typescript", + trailingComma: "all", + arrowParens: "always", + overrides: [ + { + files: "README.md", + options: { + parser: "markdown", + }, + }, + { + files: "*.json", + options: { + parser: "json", + } + } + ], +}; \ No newline at end of file diff --git a/codecov.yml b/codecov.yml new file mode 100644 index 0000000..261b78c --- /dev/null +++ b/codecov.yml @@ -0,0 +1,16 @@ +coverage: + status: + project: + default: off + dashboard: + target: 80% + flags: dashboard + +flags: + dashboard: + paths: + - src/ + - data/ + +ignore: + - node_modules diff --git a/package.json b/package.json index 151d6bd..9f5afc2 100644 --- a/package.json +++ b/package.json @@ -8,14 +8,13 @@ ], "private": false, "dependencies": { - "@testing-library/jest-dom": "^5.11.10", - "@testing-library/react": "^11.2.5", - "@testing-library/user-event": "^13.0.6", - "@types/jest": "^26.0.22", "@types/node": "^14.14.37", "@types/react-dom": "^17.0.3", "@types/react-select": "^4.0.13", "@types/styled-components": "^5.1.9", + "browserslist": "^4.16.6", + "http-server": "^0.12.3", + "npm-run-all": "^4.1.5", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "^4.0.3", @@ -23,11 +22,28 @@ "styled-components": "^5.2.1", "typescript": "^4.2.3" }, + "devDependencies": { + "@testing-library/jest-dom": "^5.11.10", + "@testing-library/react": "^11.2.7", + "@testing-library/user-event": "^13.0.6", + "@types/jest": "^26.0.22", + "codecov": "^3.8.2", + "eslint": "^7.28.0", + "eslint-plugin-react-hooks": "^4.2.0", + "prettier": "^2.3.1" + }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", + "coverage": "codecov -f coverage/*.json -F dashboard", "test": "react-scripts test", - "eject": "react-scripts eject" + "typecheck": "tsc --noEmit", + "eject": "react-scripts eject", + "lint": "eslint --config .eslintrc.js", + "prettier": "prettier --config .prettierrc.js '{data,src}/**/*.{json,ts,tsx}'", + "http-server:data": "http-server ./ -c-1", + "http-server:app": "http-server ./build --proxy http://localhost:8080 --port 3000", + "serve:production": "npm-run-all --parallel http-server:data http-server:app" }, "eslintConfig": { "extends": "react-app" diff --git a/src/app.tsx b/src/app.tsx index 0245f9e..a92dd02 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -3,7 +3,7 @@ import { createGlobalStyle } from "styled-components"; import SearchBar from "./components/searchBar"; import Greeter from "./components/greeter"; import AppList from "./components/appList"; -import BookmarkList from "./components/bookmarkList"; +import BookmarkList from "./components/bookmarks"; import Settings from "./components/settings"; import Imprint from "./components/imprint"; @@ -29,15 +29,21 @@ const GlobalStyle = createGlobalStyle` * Renders the entire app by calling individual components */ const App = () => { - - const { appData, bookmarkData, searchProviderData, themeData, imprintData, greeterData } = useFetcher(); + const { + appData, + bookmarkData, + searchProviderData, + themeData, + imprintData, + greeterData, + } = useFetcher(); return ( <>
- {!themeData.error && !searchProviderData.error && ( + {(!themeData.error || !searchProviderData.error) && ( { - - useEffect(() => { console.log(newTab) }, [newTab]) - - const linkAttrs = (newTab !== undefined && newTab) ? { - target: '_blank', - rel: 'noopener noreferrer', - } : {}; +const App = ({ name, icon, url, displayURL, newTab }: IAppProps) => { + const linkAttrs = + newTab !== undefined && newTab + ? { + target: "_blank", + rel: "noopener noreferrer", + } + : {}; return ( @@ -73,4 +74,6 @@ export const App = ({ name, icon, url, displayURL, newTab }: IAppProps) => { ); -} +}; + +export default App; diff --git a/src/components/appCategory.tsx b/src/components/appCategory.tsx index 83d0fc3..8e86629 100644 --- a/src/components/appCategory.tsx +++ b/src/components/appCategory.tsx @@ -1,6 +1,5 @@ -import React from "react"; import styled from "styled-components"; -import { App, IAppProps } from "./app"; +import App, { IAppProps } from "./app"; import { ItemList, Item, SubHeadline } from "./elements"; const CategoryHeadline = styled(SubHeadline)` @@ -18,9 +17,10 @@ export interface IAppCategoryProps { /** * Renders one app category - * @param {IAppCategoryProps} props - The props of the given category + * @param {IAppCategoryProps} props props of the given category + * @returns {React.ReactNode} the app category node */ -export const AppCategory = ({ name, items }: IAppCategoryProps) => ( +const AppCategory = ({ name, items }: IAppCategoryProps) => ( {name && {name}} @@ -38,3 +38,5 @@ export const AppCategory = ({ name, items }: IAppCategoryProps) => ( ); + +export default AppCategory; diff --git a/src/components/appList.tsx b/src/components/appList.tsx index 3781438..6319acf 100644 --- a/src/components/appList.tsx +++ b/src/components/appList.tsx @@ -1,4 +1,4 @@ -import { AppCategory, IAppCategoryProps } from "./appCategory"; +import AppCategory, { IAppCategoryProps } from "./appCategory"; import { IAppProps } from "./app"; import { Headline, ListContainer } from "./elements"; @@ -10,7 +10,8 @@ export interface IAppListProps { /** * Renders one list containing all app categories and uncategorized apps - * @param {IAppListProps} props - The props of the given list of apps + * @param {IAppListProps} props props of the given list of apps + * @returns {React.ReactNode} the app list component */ const AppList = ({ categories, apps }: IAppListProps) => ( @@ -20,10 +21,7 @@ const AppList = ({ categories, apps }: IAppListProps) => ( ))} {apps && ( - + )} ); diff --git a/src/components/bookmarkList.tsx b/src/components/bookmarkList.tsx deleted file mode 100644 index 7f07852..0000000 --- a/src/components/bookmarkList.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react"; -import { Headline, ListContainer, ItemList } from "./elements"; -import { BookmarkGroup, IBookmarkGroupProps } from "./bookmarkGroup"; - -interface IBookmarkListProps { - groups: Array; -} - -/** - * Renders a given list of categorized bookmarks - * @param {IBookmarkListProps} props - The props of the given bookmark list - */ -const BookmarkList = ({ groups }: IBookmarkListProps) => ( - - Bookmarks - - {groups.map(({ name, items }, idx) => ( - - ))} - - -); - -export default BookmarkList; diff --git a/src/components/bookmarkGroup.tsx b/src/components/bookmarks.tsx similarity index 53% rename from src/components/bookmarkGroup.tsx rename to src/components/bookmarks.tsx index 1a44d27..5893cb1 100644 --- a/src/components/bookmarkGroup.tsx +++ b/src/components/bookmarks.tsx @@ -1,6 +1,11 @@ -import React from "react"; import styled from "styled-components"; -import { Item, SubHeadline } from "./elements"; +import { + Headline, + Item, + ItemList, + ListContainer, + SubHeadline, +} from "./elements"; import selectedTheme from "../lib/theme"; const GroupContainer = styled.div` @@ -32,9 +37,14 @@ export interface IBookmarkGroupProps { items: Array; } +export interface IBookmarkListProps { + groups: Array; +} + /** * Renders a given bookmark group - * @param {IBookmarkGroupProps} props - The given props of the bookmark group + * @param {IBookmarkGroupProps} props given props of the bookmark group + * @returns {React.ReactNode} the bookmark group component */ export const BookmarkGroup = ({ name, items }: IBookmarkGroupProps) => ( @@ -48,3 +58,21 @@ export const BookmarkGroup = ({ name, items }: IBookmarkGroupProps) => ( ); + +/** + * Renders a given list of categorized bookmarks + * @param {IBookmarkListProps} props props of the given bookmark list + * @returns {React.ReactNode} the bookmark list component + */ +const BookmarkList = ({ groups }: IBookmarkListProps) => ( + + Bookmarks + + {groups.map(({ name, items }, idx) => ( + + ))} + + +); + +export default BookmarkList; diff --git a/src/components/elements.tsx b/src/components/elements.tsx index 48d81de..5ea4667 100644 --- a/src/components/elements.tsx +++ b/src/components/elements.tsx @@ -1,7 +1,5 @@ -import React from "react"; import styled from "styled-components"; import selectedTheme from "../lib/theme"; -import Icon from "./icon"; export const ListContainer = styled.div` padding: 2rem 0; @@ -56,29 +54,3 @@ export const Button = styled.button` cursor: pointer; } `; - -const StyledButton = styled.button` - float: right; - border: none; - padding: 0; - background: none; - - &:hover { - cursor: pointer; - } -`; - -interface IIconButtonProps { - icon: string; - onClick: (e: React.FormEvent) => void; -} - -/** - * Renders a button with an icon - * @param {IIconProps} props - The props of the given IconButton - */ -export const IconButton = ({ icon, onClick }: IIconButtonProps) => ( - - - -); diff --git a/src/components/greeter.tsx b/src/components/greeter.tsx index 3f13acb..f27ffd0 100644 --- a/src/components/greeter.tsx +++ b/src/components/greeter.tsx @@ -38,17 +38,18 @@ interface IGreeterComponentProps { } /** - * - * @param a the number that's supposed to be checked - * @param b the minimum - * @param c the maximum + * Checks if a number is between two numbers + * @param {number} a number that's supposed to be checked + * @param {number} b minimum + * @param {number} c maximum */ const isBetween = (a: number, b: number, c: number): boolean => a >= b && a <= c; /** * Returns a greeting based on the current time - * @returns {string} - A greeting + * @param {Array} greetings a list of greetings with start and end date + * @returns {string} a greeting */ const getGreeting = (greetings: Array): string => { let hours = Math.floor(new Date().getHours()); @@ -64,8 +65,8 @@ const getGreeting = (greetings: Array): string => { /** * Returns the appropriate extension for a number (eg. 'rd' for '3' to make '3rd') - * @param {number} day - The number of a day within a month - * @returns {string} - The extension for that number + * @param {number} day number of a day within a month + * @returns {string} extension for that number */ const getExtension = (day: number) => { let extension = ""; @@ -85,13 +86,13 @@ const getExtension = (day: number) => { /** * Generates the current date - * @param {string} format - The format of the date string - * @returns {string} - The current date as a string + * @param {string} format format of the date string + * @returns {string} current date as a string */ const getDateString = ( weekdays: Array, months: Array, - format: string + format: string, ) => { let currentDate = new Date(); @@ -111,6 +112,8 @@ const getDateString = ( /** * Renders the Greeter + * @param {IGreeterComponentProps} data required greeter data + * @returns {React.ReactNode} the greeter */ const Greeter = ({ data }: IGreeterComponentProps) => ( diff --git a/src/components/icon.tsx b/src/components/icon.tsx index 8c98bc6..2537258 100644 --- a/src/components/icon.tsx +++ b/src/components/icon.tsx @@ -7,32 +7,62 @@ interface IIconProps { size?: string; } +interface IIconButtonProps { + icon: string; + onClick: (e: React.FormEvent) => void; +} + +const StyledButton = styled.button` + float: right; + border: none; + padding: 0; + background: none; + + &:hover { + cursor: pointer; + } +`; + +const IconContainer = styled.i` + font-family: "Material Icons"; + font-weight: normal; + font-style: normal; + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + -moz-osx-font-smoothing: grayscale; + font-feature-settings: "liga"; +`; + /** * Renders an Icon - * @param {IIconProps} props - The props needed for the given icon + * @param {IIconProps} props props needed for the given icon + * @returns {React.ReactNode} the icon node */ export const Icon = ({ name, size }: IIconProps) => { - - let IconContainer = styled.i` - font-family: "Material Icons"; - font-weight: normal; - font-style: normal; + let Container = styled(IconContainer)` font-size: ${size ? size : "24px"}; color: ${selectedTheme.mainColor}; - display: inline-block; - line-height: 1; - text-transform: none; - letter-spacing: normal; - word-wrap: normal; - white-space: nowrap; - direction: ltr; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - -moz-osx-font-smoothing: grayscale; - font-feature-settings: "liga"; `; - return {name}; + return {name}; }; +/** + * Renders a button with an icon + * @param {IIconProps} props - The props of the given IconButton + * @returns {React.ReactNode} the icon button node + */ +export const IconButton = ({ icon, onClick }: IIconButtonProps) => ( + + + +); + export default Icon; diff --git a/src/components/imprint.tsx b/src/components/imprint.tsx index 8567d86..2f14782 100644 --- a/src/components/imprint.tsx +++ b/src/components/imprint.tsx @@ -2,12 +2,7 @@ import React from "react"; import Modal from "./modal"; import styled from "styled-components"; import selectedTheme from "../lib/theme"; -import { - ListContainer, - ItemList, - Headline, - SubHeadline, -} from "./elements"; +import { ListContainer, ItemList, Headline, SubHeadline } from "./elements"; const ModalSubHeadline = styled(SubHeadline)` display: block; @@ -37,11 +32,6 @@ const ItemContainer = styled.div` padding: 1rem 0; `; -interface IImprintFieldProps { - text: string; - link: string; -} - export interface IImprintProps { name: IImprintFieldProps; address: IImprintFieldProps; @@ -51,17 +41,23 @@ export interface IImprintProps { text: string; } -interface IImprintFieldComponentProps { - field: IImprintFieldProps; -} - interface IImprintComponentProps { imprint: IImprintProps; } +interface IImprintFieldComponentProps { + field: IImprintFieldProps; +} + +interface IImprintFieldProps { + text: string; + link: string; +} + /** * Renders an imprint field - * @param {IImprintFieldComponentProps} props - The data for the field + * @param {IImprintFieldComponentProps} props data for the field + * @returns {React.ReactNode} the imprint field component */ const ImprintField = ({ field }: IImprintFieldComponentProps) => ( {field.text} @@ -69,7 +65,8 @@ const ImprintField = ({ field }: IImprintFieldComponentProps) => ( /** * Renders the imprint component - * @param {IImprintProps} props - The contents of the imprint + * @param {IImprintProps} props contents of the imprint + * @returns {React.ReactNode} the imprint node */ const Imprint = ({ imprint }: IImprintComponentProps) => ( <> @@ -93,7 +90,7 @@ const Imprint = ({ imprint }: IImprintComponentProps) => (
Information in accordance with section 5 TMG - + <> {imprint.name && } {imprint.address && } @@ -103,9 +100,7 @@ const Imprint = ({ imprint }: IImprintComponentProps) => (
- - Imprint - + Imprint {imprint.text && {imprint.text}}
diff --git a/src/components/modal.tsx b/src/components/modal.tsx index aede217..5691220 100644 --- a/src/components/modal.tsx +++ b/src/components/modal.tsx @@ -2,7 +2,8 @@ import React, { useState } from "react"; import styled from "styled-components"; import selectedTheme from "../lib/theme"; -import { Headline, IconButton } from "./elements"; +import { Headline } from "./elements"; +import { IconButton } from "./icon"; const ModalContainer = styled.div` position: absolute; @@ -49,9 +50,18 @@ interface IModalProps { /** * Renders a modal with button to hide and un-hide - * @param {IModalProps} props - The needed props for the modal + * @param {IModalProps} props needed props for the modal + * @returns {React.ReactNode} the modal component */ -const Modal = ({ element, icon, text, condition, title, onClose, children }: IModalProps) => { +const Modal = ({ + element, + icon, + text, + condition, + title, + onClose, + children, +}: IModalProps) => { const [modalHidden, setModalHidden] = useState(condition ?? true); const closeModal = () => { @@ -65,9 +75,7 @@ const Modal = ({ element, icon, text, condition, title, onClose, children }: IMo closeModal()} /> )} - {element === "text" && ( - closeModal()}>{text} - )} + {element === "text" && closeModal()}>{text}}