feat(radio-button): initial commit

radio-button/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

radio-button/.gitignore

@@ -0,0 +1,107 @@
+# Others
+build*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

radio-button/.npmrc

@@ -0,0 +1,2 @@
+# .npmrc
+engine-strict=true

radio-button/README.md

@@ -0,0 +1,17 @@
+# React.js Example
+
+## Table of Contents
+0. [General](#general)
+1. [Links](#links)
+
+# General
+
+# Links
+
+* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
+* [Production](https://webpack.js.org/guides/production/)
+* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
+* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
+* [load CSS](https://masteringjs.io/tutorials/webpack/css-loader)
+* [load CSS](https://webpack.js.org/loaders/css-loader/)
+* [load CSS](https://blog.jakoblind.no/css-modules-webpack/)

radio-button/app/app.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Home from './pages/home';
+export default function App() {
+  return (
+    <div>
+	<h1>React.js</h1>
+	<Home />
+    </div>
+  )
+}

radio-button/app/components/hello.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+//destructure props
+const Hello = ({msg}) => {
+    return (
+	<>
+	    <div>{msg}</div>
+	</>
+    );
+}
+
+export default Hello
+
+Hello.propTypes = {
+    msg: PropTypes.string,
+};

radio-button/app/components/radio-button.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+
+export default function RadioButton() {
+    return (
+	<>
+	    <p>
+		Group! Value! Label!
+	    </p>
+	    <input type="radio" id="huey" name="drone" value="huey" />
+	    <label for="huey">Huey</label>
+	    <input type="radio" id="dewey" name="drone" value="dewey" />
+	    <label for="dewey">Dewey</label>
+	    <input type="radio" id="louie" name="drone" value="louie" />
+	    <label for="louie">Louie</label>
+	    </>
+    );
+}

radio-button/app/components/radio-button2.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+
+export default function RadioButton2() {
+    return (
+	<>
+	    <p>
+		Group! Value! Label!
+	    </p>
+	    <input type="radio" id="html" name="fav_language" value="HTML"  checked />
+	    <label for="html">HTML</label>
+	    <br />
+	    <input type="radio" id="css" name="fav_language" value="CSS" />
+	    <label for="css">CSS</label>
+	    <br />
+	    <input type="radio" id="javascript" name="fav_language" value="JavaScript" />
+	    <label for="javascript">JavaScript</label>
+    </>
+    );
+}

radio-button/app/components/radio-button3.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+
+export default function RadioButton3() {
+    return (
+	<>
+	    <p>
+		No group! Multiple choices possible! No value!
+	    </p>
+	    <input type="radio"/> Email
+	    <input type="radio"/> Phone
+	    <input type="radio"/> Mail
+	</>
+    );
+}

radio-button/app/components/radio-button4.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { useState } from 'react'
+
+export default function RadioButton4() {
+    const [age, setAge] = useState();
+
+  // this function will be called when a radio button is checked
+    const handleChange = (e) => {
+	console.log('handleChange() e.target.value: ' + e.target.value);
+	setAge(e.target.value);
+    }
+    return (
+    <div style={{ padding: 50 }}>
+      <form>
+        <fieldset>
+          <legend>Select your age</legend>
+
+          <input
+            type="radio"
+            name="age"
+            id='age-range-1'
+            value="0-17"
+            onChange={handleChange}
+            checked={age === '0-17'} />
+          <label htmlFor="age-range-1">Under 18</label><br />
+
+          <input
+            type="radio"
+            name="age"
+            id='age-range-2'
+            value="18-24"
+            onChange={handleChange}
+            checked={age === '18-24'} />
+          <label htmlFor="age-range-2">18-24</label><br />
+
+          <input
+            type="radio"
+            name="age"
+            id='age-range-3'
+            value="25-34"
+            onChange={handleChange}
+            checked={age === '25-34'} />
+          <label htmlFor="age-range-3">25-34</label><br />
+
+          <input
+            type="radio"
+            name="age"
+            id='age-range-4'
+            value="35-44"
+            onChange={handleChange}
+            checked={age === '35-44'} />
+          <label htmlFor="age-range-4">35-44</label><br />
+
+          <input
+            type="radio"
+            name="age"
+            id='age-range-5'
+            value="45-54"
+            onChange={handleChange}
+            checked={age === '45-54'} />
+          <label htmlFor="age-range-5">45-54</label><br />
+
+          <input
+            type="radio"
+            name="age"
+            id='age-range-6'
+            value="55-64"
+            onChange={handleChange}
+            checked={age === '55-64'} />
+          <label htmlFor="age-range-6">55-64</label><br />
+
+          <input
+            type="radio" 
+            name="age"
+            id='age-range-7'
+            value="65+"
+            onChange={handleChange}
+            checked={age === '65+'} />
+          <label htmlFor="age-range-7">65+</label><br />
+        </fieldset>
+      </form>
+      <h1>{age === undefined ? 'Please select your age' : `Your age: ${age}`}</h1>
+    </div>
+  );
+};

radio-button/app/components/radio-button5.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useState } from 'react'
+
+export default function RadioButton5() {
+
+    const [gender, setGender] = React.useState('male');
+
+ const handleChange = (event) => {
+    setGender(event.target.value)
+  }
+
+  const resetRadioState = () => {
+    setGender('');
+  }
+  return (
+    <form>
+      <p>Gender</p>
+      <div>
+        <input
+          type="radio"
+          value="male"
+          checked={gender === 'male'}
+          onChange={handleChange}
+        /> Male
+      </div>
+      <div>
+        <input
+          type="radio"
+          value="female"
+          checked={gender === 'female'}
+          onChange={handleChange}
+        /> Female
+      </div>
+      <div>
+        <input
+          type="radio"
+          value="transgender"
+          checked={gender === 'transgender'}
+          onChange={handleChange}
+        /> Transgender
+      </div>
+      <div>
+        <button
+          type="reset"
+          onClick={resetRadioState}
+        />
+      </div>
+    </form>
+  )
+};

radio-button/app/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app';
+//TODO remove debugging
+if (process.env.NODE_ENV !== 'production') {
+    console.log('development mode');
+}
+//since react 18
+import { createRoot } from 'react-dom/client';
+//create root container
+const root = createRoot(document.getElementById("root"));
+//render root app
+root.render(
+    <React.StrictMode>
+	<App />
+    </React.StrictMode>
+);

radio-button/app/osm-query.json

@@ -0,0 +1,20 @@
+{
+    "queries": [
+	{
+	    "title": "Second hand shops",
+	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[shop=second_hand](area)->.shops;nwr[second_hand=yes](area)->.secondHands;(.shops;.secondHands;);out body center qt;"
+	},
+	{
+	    "title": "Organic bakeries",
+	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[shop=bakery][organic=yes](area);out body center qt;"
+	},
+	{
+	    "title": "Organic only shops",
+	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[shop][organic=only](area);out body center qt;"
+	},
+	{
+	    "title": "Public bookcases",
+	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[amenity=public_bookcase](area);out body center qt;"
+	}
+    ]
+}

radio-button/app/pages/home.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Hello from '../components/hello';
+import RadioButton5 from '../components/radio-button5';
+import RadioButton4 from '../components/radio-button4';
+import RadioButton from '../components/radio-button';
+import RadioButton2 from '../components/radio-button2';
+import RadioButton3 from '../components/radio-button3';
+
+import '../style.css';
+
+// import JSON
+import jsonOsmQuery from '../osm-query.json';
+
+const Home = () => {
+
+    const rryOsmQuery = jsonOsmQuery.queries;
+
+    return (
+	<>
+	    <h2>Home</h2>
+	    <h3>(React.js Lambda Function Component)</h3>
+	    <Hello msg="Hello World!" />
+	    <h3>(React.js Function Component)</h3>
+	    <RadioButton5 />
+	    <h3>(React.js Function Component)</h3>
+	    <RadioButton4 />
+	    <h3>(React.js Function Component)</h3>
+	    <RadioButton />
+	    <h3>(React.js Function Component)</h3>
+	    <RadioButton2 />
+	    <h3>(React.js Function Component)</h3>
+	    <RadioButton3 />
+	</>
+    );
+}
+
+export default Home

radio-button/app/style.css

@@ -0,0 +1,3 @@
+h1 { color: red; }
+h2 { color: green; }
+h3 { color: blue; }

radio-button/config/webpack.common.js

@@ -0,0 +1,41 @@
+//generate a HTML5 file including all webpack bundles in the body using script tags
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+//path is used to resolve properly across the OS
+const path = require('path');
+module.exports = {
+    //bundle *.js from this entry point
+    entry: path.resolve(__dirname, '../app/index.jsx'),
+    //create output file to be linked to index.html
+    output: {
+        filename: '[name].bundle.js',
+	path: path.resolve(__dirname, '../dist'),
+	clean: true,
+    },
+    module: {
+	rules: [
+	    {
+		//test all *.js using babel-loader
+		//test all *.jsx (e.g. React.js) using babel-loader
+		test: /\.(js|jsx)$/,
+		exclude: /node_modules/,
+		include: path.resolve(__dirname, '../app'),
+		use: ['babel-loader'],
+	    },
+	    {
+		//test all *.css using style-loader and css-loader
+		test: /\.css$/i,
+		use: ["style-loader", "css-loader"],
+	    },
+	]
+    },
+    resolve: {
+	extensions: ['*', '.js', '.jsx'],
+    },
+    plugins: [
+	// create a plugin instance so that you can use it several times anywhere
+	new HtmlWebpackPlugin({
+	    title: 'Production',
+	    template: path.resolve(__dirname, "../public/index.html")
+	}),
+    ],
+};

radio-button/config/webpack.dev.js

@@ -0,0 +1,16 @@
+//path is used to resolve properly across the OS
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+//merge() calls in the environment-specific configuration to include commons
+module.exports = merge(common, {
+    //set development mode
+    mode: 'development',
+    //enable strong source mapping
+    devtool: 'inline-source-map',
+    devServer: {
+	static: path.resolve(__dirname, '../dist'),
+	//When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. Enable devServer.historyApiFallback by setting it to true.
+	historyApiFallback: true,
+    },
+});

radio-button/config/webpack.prod.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(common, {
+    mode: 'production',
+    //source maps encouraged in production
+    //choose mapping with fairly quick build speed like source-map
+    devtool: 'source-map',
+});

radio-button/package.json

@@ -0,0 +1,39 @@
+{
+    "private": true,
+    "name": "react-example",
+    "description": "React.js example",
+    "version": "0.1.0",
+    "main": "index.js",
+    "keywords": [
+        "react",
+        "webpack"
+    ],
+    "author": "Software Ingenieur Begerad <dialog@SwIngBe.de>",
+    "license": "GPL-3.0-or-later",
+    "engines": {
+	"npm": ">=8.0.0 <=10.2.3",
+	"node": ">=10.0.0 <=18.17.0"
+    },
+    "scripts": {
+        "start": "webpack serve --config config/webpack.dev.js",
+        "build": "webpack --config config/webpack.prod.js"
+    },
+    "devDependencies": {
+        "@babel/core": "7.22.10",
+        "@babel/preset-env": "7.22.10",
+        "@babel/preset-react": "7.22.5",
+        "babel-loader": "9.1.3",
+        "css-loader": "6.7.3",
+        "html-webpack-plugin": "5.5.3",
+        "style-loader": "3.3.2",
+        "webpack": "5.89.0",
+        "webpack-cli": "5.1.4",
+        "webpack-dev-server": "4.15.1",
+        "webpack-merge": "5.10.0"
+    },
+    "dependencies": {
+        "prop-types": "15.8.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0"
+    }
+}

radio-button/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>React Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>