diff --git a/.babelrc b/.babelrc deleted file mode 100644 index d85110f..0000000 --- a/.babelrc +++ /dev/null @@ -1,14 +0,0 @@ -{ - "presets": [ - [ - "next/babel", - { - "preset-env": {}, - "transform-runtime": {}, - "styled-jsx": {}, - "class-properties": {} - } - ] - ], - "plugins": [] -} diff --git a/.dockerignore b/.dockerignore deleted file mode 100644 index 95a7ad5..0000000 --- a/.dockerignore +++ /dev/null @@ -1,4 +0,0 @@ -node_modules -npm-debug.log -/.git -/docker-backups \ No newline at end of file diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..aca6cff --- /dev/null +++ b/.env.development @@ -0,0 +1,11 @@ +HOST=http://localhost +PORT=3000 +ORIGINS= http://localhost,https://www.dominikhaid.de +PUBLIC_FOLDER=public + +HELMET_DEFAULT= http://localhost https://www.dominikhaid.de +HELMET_SCRIPTS= http://localhost https://code.jquery.com https://www.dominikhaid.de https://fonts.gstatic.com + + +CERTIFICATE=./certificates/localhostcert +CERTIFICATE_KEY=./certificates/localhostkey \ No newline at end of file diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..cd1a51a --- /dev/null +++ b/.env.production @@ -0,0 +1,11 @@ +HOST=https://dominikhaid.de +PORT=80 +ORIGINS= https://dominikhaid.de,https://www.dominikhaid.de +PUBLIC_FOLDER=public + +HELMET_DEFAULT= https://dominikhaid.de https://www.dominikhaid.de +HELMET_SCRIPTS= https://dominikhaid.de https://code.jquery.com https://www.dominikhaid.de https://fonts.gstatic.com + + +CERTIFICATE=./certificates/localhostcert +CERTIFICATE_KEY=./certificates/localhostkey \ No newline at end of file diff --git a/.eslintrc b/.eslintrc index 5803c96..ac989b5 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,11 +1,7 @@ -// Install packages -// npm install --save-dev prettier eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y husky lint-staged - { "extends": [ "eslint:recommended", "react-app", - "airbnb", "plugin:import/errors", "plugin:react/recommended", "plugin:jsx-a11y/recommended", @@ -13,6 +9,26 @@ "plugin:prettier/recommended", "prettier/react" ], + "settings": { + "import/resolver": { + "alias": { + "map": [ + ["components", "./src/components"], + ["lib", "./src/lib"], + ["src", "./src/"], + ["public", "./public"], + ["data","./src/data"], + ["context","./src/context"], + ["hooks","./src/hooks"], + ["routers","./src/routers"], + ["reducers","./src/reducers"], + ["includes","./src/includes"] + + ], + "extensions": [".ts", ".js", ".jsx", ".json",".css",".less",".scss"] + } + } + }, "plugins": ["react", "import", "prettier", "jsx-a11y"], "parser": "babel-eslint", "parserOptions": { diff --git a/.gitignore b/.gitignore index a728076..22c4cd3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,13 +1,19 @@ -**/gitignore -.env.development -.env.production -/log -/logs -/.next +# .env.development +# .env.production +.next **/build /node_modules **/samples **/certificates /docker-backups **/node_modules -/out +.editorconfig +**/debug.log +package-lock.json +out +**/storybook-static +**/log/.*log +.editorconfig +**.log +log/access.log +**.lock \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json index 2e60162..52c0993 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -8,5 +8,7 @@ "bracketSpacing": false, "jsxBracketSameLine": false, "arrowParens": "avoid", - "proseWrap": "always" + "proseWrap": "always", + "endOfLine":"lf", + "embeddedLanguageFormatting":"auto" } diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100755 index 0000000..b489747 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,83 @@ +const path = require('path'); + +module.exports = { + stories: [ + '../src/stories/**/*.stories.js', + //'../src/components/**/*.stories.js', + ], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-storysource', + '@storybook/addon-actions', + 'storycap', + 'storybook-addon-designs', + '@storybook/addon-controls', + ], + webpackFinal: async config => { + const rules = config.module.rules.map(rule => { + if (/svg/.test(rule.test)) + rule.test = /\.(ico|jpg|jpeg|png|apng|gif|webp|cur|ani|pdf)(\?.*)?$/; + return rule; + }); + + config.module.rules = rules; + + config.module.rules.push({ + test: /\.less$/, + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + modules: false, + // localIdentName: '[local]___[hash:base64:5]', + }, + }, + { + loader: 'less-loader', + options: { + lessOptions: { + javascriptEnabled: true, + }, + }, + }, + ], + include: path.resolve(__dirname, '../src'), + }); + + config.module.rules.unshift({ + test: /\.svg$/, + use: ['@svgr/webpack'], + include: path.resolve(__dirname, '../'), + }); + + config.module.rules.unshift({ + test: /\.(woff|woff2|eot|ttf)/, + loaders: ['file-loader'], + include: path.resolve(__dirname, '../'), + }); + + config.resolve.alias['components'] = path.resolve( + __dirname, + '../src/components', + ); + config.resolve.alias['lib'] = path.resolve(__dirname, '../src/lib'); + config.resolve.alias['src'] = path.resolve(__dirname, '../src'); + config.resolve.alias['data'] = path.resolve(__dirname, '../src/data'); + config.resolve.alias['context'] = path.resolve(__dirname, '../src/context'); + config.resolve.alias['hooks'] = path.resolve(__dirname, '../src/hooks'); + config.resolve.alias['routers'] = path.resolve(__dirname, '../src/routers'); + config.resolve.alias['reducers'] = path.resolve( + __dirname, + '../src/reducers', + ); + config.resolve.alias['includes'] = path.resolve( + __dirname, + '../src/includes', + ); + config.resolve.alias['public'] = path.resolve(__dirname, '../public'); + + return config; + }, +}; diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100755 index 0000000..1b51db5 --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,107 @@ +import Tailwind from '../public/css/global.css'; +import WeatherIcons from 'public/css/weather-icons-core.css'; +import StorbookCss from './stroybook.css'; + +import React from 'react'; +import {withNextRouter} from 'storybook-addon-next-router'; +import {addDecorator} from '@storybook/react'; +import '@storybook/addon-console'; +import {setConsoleOptions} from '@storybook/addon-console'; +import {withConsole} from '@storybook/addon-console'; +import {withScreenshot} from 'storycap'; +import {configure} from '@storybook/react'; + +// import {setDefaults} from 'react-storybook-addon-props-combinations'; + +// setDefaults({ +// // overwrite global defaults here +// }); + +// configure(() => { +// // ... +// }, module); + +addDecorator((storyFn, context) => withConsole()(storyFn)(context)); + +setConsoleOptions({ + panelExclude: [], +}); + +addDecorator( + withNextRouter({ + path: '/', + asPath: '/', + query: {}, + push() {}, + }), +); + +import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport'; + +const customViewports = { + kindleFire2: { + name: 'Kindle Fire 2', + styles: { + width: '600px', + height: '963px', + }, + }, + kindleFireHD: { + name: 'Kindle Fire HD', + styles: { + width: '533px', + height: '801px', + }, + }, +}; + +export const decorators = [ + withScreenshot, + Story => ( + <> + + + ), +]; + +export const parameters = { + backgrounds: { + default: 'light', + values: [ + { + name: 'light', + value: '#fff', + }, + { + name: 'dark', + value: '#041E34', + }, + ], + }, + screenshot: { + viewports: { + large: { + width: 2560, + height: 1440, + }, + medium: 'Kindle Fire HDX landscape', + small: 'iPad', + xsmall: 'iPhone 5', + }, + delay: 500, + }, + viewport: { + viewports: { + ...INITIAL_VIEWPORTS, + ...customViewports, + }, + }, + actions: {argTypesRegex: '^on[A-Z].*'}, + // Storybook a11y addon configuration + a11y: { + // the target DOM element + element: '#root', + // sets the execution mode for the addon + manual: false, + }, +}; diff --git a/.storybook/stroybook.css b/.storybook/stroybook.css new file mode 100644 index 0000000..8e91d65 --- /dev/null +++ b/.storybook/stroybook.css @@ -0,0 +1,38 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); + +@font-face { + font-family: 'weathericons'; + src: url('/fonts/weather/weathericons-regular-webfont.eot'); + src: url('/fonts/weather/weathericons-regular-webfont.eot?#iefix') + format('embedded-opentype'), + url('/fonts/weather/weathericons-regular-webfont.woff2') format('woff2'), + url('/fonts/weather/weather/weathericons-regular-webfont.woff') + format('woff'), + url('/fonts/weather/weathericons-regular-webfont.ttf') format('truetype'), + url('/fonts/weather/weathericons-regular-webfont.svg#weather_iconsregular') + format('svg'); + font-weight: normal; + font-style: normal; +} + +#__next { + min-height: 850px !important; +} + +nav#main-menu { + min-height: 850px !important; +} + +fieldset, +fieldset > * { + height: fit-content; +} + +@media screen and (max-width: 765px) { + #__next { + /*display: inherit !important;*/ + min-height: unset !important; + padding-top: 0rem; + padding-bottom: 0rem; + } +} diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..de6a746 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,65 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "Next: Firefox", + "type": "firefox", + "request": "launch", + "keepProfileChanges": true, + "profile": "default", + "url": "http://localhost:3000/app/weather-app/", + "webRoot": "${workspaceFolder}", + "pathMappings": [ + { + "url": "webpack://_n_e/src", + "path": "${workspaceFolder}/src" + }, + { + "url": "http://localhost:3000/app/weather-app/", + "path": "${workspaceFolder}" + } + ] + }, + { + "type": "chrome", + "request": "launch", + "name": "Next: Chrome", + "url": "http://localhost:3000/app/weather-app/", + "webRoot": "${workspaceFolder}" + }, + { + "type": "node", + "request": "launch", + "name": "Next: Node", + "skipFiles": ["/**"], + "runtimeExecutable": "npm", + "envFile": "${workspaceFolder}/.env.development", + "runtimeArgs": ["run-script", "debug"], + "stopOnEntry": true, + "port": 9229, + "console": "integratedTerminal" + }, + { + "type": "node", + "request": "attach", + "name": "Node: Nodemon", + "processId": "${command:PickProcess}", + "restart": true, + "stopOnEntry": true, + "protocol": "inspector" + } + ], + "compounds": [ + { + "name": "Next: Full Chrome", + "configurations": ["Next: Node", "Next: Chrome"] + }, + { + "name": "Next: Full Firefox", + "configurations": ["Next: Node", "Next: Firefox"] + } + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..64bba01 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + //"liveServer.settings.root": "/out" + "liveServer.settings.root": "/storybook-static" +} diff --git a/README.md b/README.md index f793886..aa750b1 100644 --- a/README.md +++ b/README.md @@ -1,279 +1,164 @@ ## Weather-App +--- +Weather App demo build with Next.js 10 Tailwind.css and the AccuWeather Api. We also included Storybook and some other cool stuff. Live Demo [here](https://www.dominikhaid.de/app/weather-app/?target=_blank). We build this demo using our [base server module](https://github.com/dominikhaid/node-base-server) the [next module](https://github.com/dominikhaid/node-module-next) the [tailwind module](https://github.com/dominikhaid/node-module-tailwind-css) and the [storybook module](https://github.com/dominikhaid/node-modules-storybook). -``` -Description: Simple Weather Demo App build with Next.js and AccuWeather Api. -Use yarn install for setup and yarn run next-dev for start local dev server. -At default it configured to live run at http://localhost/app/weather-app. -You can change that at the next.config.js. to change the port use .env files default is 80. -Live demo can be seen here: https://www.dominikhaid/app/weather-app. -Api is turend of bye default the App uses Sample Data from the data folder. -To turn the Api on turn debug to false in .env files. -``` - +---

---- - -- [Weather-App](#weather-app) -- [Api](#api) -- [Context](#context) -- [Functions](#functions) -- [Pages](#pages) - - [document](#document) - - [App](#app) - - [info](#info) - - [search](#search) - - [weather](#weather) - - [city](#city) -- [Components](#components) - - [RequestCount](#Requestcount) - - [ErrorModal](#Errormodal) - - [Footer](#footer) - - [Nav](#Nav) ## Api - -``` -https://developer.accuweather.com/ free licence (limit 50 querys per day) -querys:{ -"current":false, -"tomorrow":false, -"fivedays":false, -"hours":false -} - -CornJob Top50 Citys: read and write top 50 citys (save requests to api for every visitor) -IpLock: write a list of blocked ips -CronJob: reset IpLock list every Day -``` - -
-
- --- - -## Context - -``` -appContext: -{ -"mobileBreak" : 500, -"activePage" : "info", -"errorComp":{"state":false,"msg":false}, -"search":false || string, -"requestTotal" : 0, -"ip":false || number, -setRequestCount() { -this.requestTotal += 1 -requestTotal >= 5 && this.errorComp = {"state":true,"msg":"Maximum requests reached"} -} -} - -weatherContext: -{ -"top50":{"state":false, "data":false}, -"citys": ["exampleCity": {"current":false, "tomorrow":false,"fivedays":false,"hours":false }] -} -``` - -
-
+Right now we use the AccuWeather API on a Free Account. +get a free account @ https://developer.accuweather.com/ +free licence (limit 50 querys per day) --- -## Functions - -``` -setRequestCount() handel request Managment -setComponent('searchPage') set argument true -cityWeather() Render city Object to html -renderTop50() Render top50 weather Object to html -``` - -
-
- -``` -Component tree - - - -
- -