Add pre-commit, update README

.env

@@ -2,4 +2,4 @@
 
 ZIGBEE2MQTT_CONFIG_SERIAL_PORT=/dev/ttyUSB0
 ZIGBEE2MQTT_CONFIG_ADVANCED_RTSCTS=false
-ZIGBEE2MQTT_CONFIG_PERMIT_JOIN=false
+ZIGBEE2MQTT_CONFIG_PERMIT_JOIN=false

.eslintrc.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 module.exports = {
   env: {
     browser: true,

.nginx.conf

@@ -5,4 +5,4 @@ server {
     index index.html index.htm;
     try_files $uri $uri/ /index.html =404;
   }
-}
+}

.pre-commit-config.yaml

@@ -0,0 +1,20 @@
+---
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v3.2.0
+    hooks:
+      - id: trailing-whitespace
+      - id: end-of-file-fixer
+      - id: check-yaml
+      - id: check-added-large-files
+
+  - repo: https://github.com/Lucas-C/pre-commit-hooks
+    rev: v1.2.0
+    hooks:
+      - id: insert-license
+        files: \.js$
+        args:
+          - --license-filepath
+          - ./license_header.txt
+          - --comment-style
+          - // # defaults to:  #

.prettierignore

@@ -2,4 +2,4 @@ data
 node_modules
 coverage
 build
-*.md
+*.md

.prettierrc.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 module.exports = {
   trailingComma: 'es5',
   tabWidth: 2,

README.md

@@ -1,3 +1,13 @@
 # zigbee-webui
 
-A React web app to control Zigbee-compliant devices.
+An alternative frontend for [Zigbee2MQTT](https://www.zigbee2mqtt.io/), using React.
+
+## Contributing
+
+Any changes should be made against a separate branch, and a pull request opened. Please remember to [install the pre-commit hooks](https://pre-commit.com/#install) so these run before you commit changes.
+
+### License
+
+This repository is licensed under the GNU General Public License, version 3 (or at your option, **any later version**).
+
+`SPDX-License-Identifier: GPL-3.0-or-later`

license_header.txt

@@ -0,0 +1 @@
+SPDX-License-Identifier: GPL-3.0-or-later

mosquitto.conf

@@ -2,4 +2,4 @@ listener 1883
 allow_anonymous true
 
 listener 1884
-protocol websockets
+protocol websockets

src/App.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import { useEffect, useState } from 'react';
 import * as mqttService from './services/mqttService';
 import { Link, Route } from 'wouter';

src/components/Button/Button.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import styled from 'styled-components';
 
 const StyledButton = styled.button`

src/components/ColorPicker/ColorPicker.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 function ColorPicker(props) {
   return (
     <>

src/components/DeviceCard/DeviceCard.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import { deviceDescription } from '../../utils/deviceUtilities';
 import styled from 'styled-components';
 import { StyledText, StyledHeader } from '../../utils/theme';

src/components/DeviceList/DeviceList.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import { Link } from 'wouter';
 import DeviceCard from '../DeviceCard/DeviceCard';
 

src/components/DeviceSettings/DeviceSettings.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import { useState, useEffect } from 'react';
 
 import LoadingSpinner from '../LoadingSpinner/LoadingSpinner';

src/components/DeviceSettings/generator.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import {
   booleanToMqttState,
   hexToRGB,

src/components/EditableText/EditableText.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import { useState } from 'react';
 import styled from 'styled-components';
 

src/components/GlobalStyles/globalStyles.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import '../../font.css';
 import { createGlobalStyle } from 'styled-components';
 

src/components/LoadingSpinner/LoadingSpinner.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import styled from 'styled-components';
 
 const Wrapper = styled.div`

src/components/Slider/Slider.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import styled from 'styled-components';
 
 const SliderContainer = styled.div`

src/components/Toggle/Toggle.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import styled from 'styled-components';
 
 const Switch = styled.label`

src/components/UseDarkMode/useDarkMode.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import { useEffect, useState } from 'react';
 
 const prefersDarkTheme = () =>

src/index.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';

src/pages/Devices/Devices.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import DeviceList from '../../components/DeviceList/DeviceList';
 import DeviceSettings from '../../components/DeviceSettings/DeviceSettings';
 import LoadingSpinner from '../../components/LoadingSpinner/LoadingSpinner';

src/pages/Settings/Settings.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import * as mqttService from '../../services/mqttService';
 
 import Button from '../../components/Button/Button';

src/reportWebVitals.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {

src/services/mqttService.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import mqtt from 'mqtt';
 let client;
 

src/utils/deviceUtilities.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import { setDeviceSettings } from '../services/mqttService';
 
 export const mqttStateToBoolean = (state) => {

src/utils/theme.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import styled from 'styled-components';
 
 const colours = {

src/utils/transformers.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import Button from '../components/Button/Button';
 import Slider from '../components/Slider/Slider';