Add navbar, button grid

Author: amberstarlight

packages/ui/Dockerfile Dockerfile.uipackages/ui/Dockerfile renamed to Dockerfile.ui

@@ -1,14 +1,12 @@
-# multi stage 🚀
-
-FROM node:16.10-alpine3.11 AS build
+FROM node:lts-alpine AS build
 WORKDIR /app
 COPY ./ /app/
+ENV NODE_ENV production
 RUN yarn install
 RUN yarn build
 
 FROM nginx:stable-alpine AS production
-LABEL org.opencontainers.image.source https://github.com/amberstarlight/zigbee-webui
-ENV NODE_ENV production
+LABEL org.opencontainers.image.source="https://github.com/amberstarlight/starlight"
 COPY --from=build /app/build /usr/share/nginx/html
 COPY .nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80

packages/ui/docker-compose.yaml docker-compose.yamlpackages/ui/docker-compose.yaml renamed to docker-compose.yaml

@@ -20,12 +20,19 @@ services:
     network_mode: host
     privileged: true
     environment:
-      - TZ=Europe/London
-    env_file:
-      - .env
+      TZ: "Europe/London"
+      ZIGBEE2MQTT_CONFIG_SERIAL_PORT: "/dev/ttyUSB0"
+      ZIGBEE2MQTT_CONFIG_ADVANCED_RTSCTS: "false"
+      ZIGBEE2MQTT_CONFIG_PERMIT_JOIN: "false"
 
-  webserver:
-    container_name: zigbee_webui
-    image: ghcr.io/amberstarlight/zigbee-webui:latest
+  api:
+    container_name: starlight_api
+    image: ghcr.io/amberstarlight/starlight/ui:latest
+    ports:
+      - "80:80"
+
+  ui:
+    container_name: starlight_ui
+    image: gchr.io/amberstarlight/starlight/api:latest
     ports:
       - "80:80"

packages/ui/.env.production

@@ -0,0 +1,2 @@
+# .env.production
+VITE_API_URL=http://io.local

packages/ui/src/App.tsx

@@ -8,11 +8,13 @@ import styled, { ThemeProvider } from "styled-components";
 import { GlobalStyles } from "./components/GlobalStyles/globalStyles";
 import { useDarkMode } from "./components/UseDarkMode/useDarkMode";
 import { StyledText, themeColours, darkThemeColours } from "./utils/theme";
+import "./font.css";
 
 import Devices from "./pages/Devices/Devices";
 import Settings from "./pages/Settings/Settings";
 import Groups from "./pages/Groups/Groups";
 
+import NavBar from "./components/NavBar/NavBar";
 import Button from "./components/Button/Button";
 import DeviceSettings from "./components/DeviceSettings/DeviceSettings";
 import { type Device, type Group } from "starlight/types";
@@ -22,13 +24,6 @@ const Wrapper = styled.div`
   padding: 2em;
 `;
 
-const NavBar = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 1em;
-`;
-
 const backend = import.meta.env.VITE_API_URL ?? "";
 
 function App() {
@@ -52,17 +47,21 @@ function App() {
     <ThemeProvider theme={themeMode}>
       <GlobalStyles />
       <Wrapper>
-        <NavBar>
-          <Link href={"/devices"}>
-            <Button text={"Devices"} />
-          </Link>
-          <Link href={"/groups"}>
-            <Button text={"Groups"} />
-          </Link>
-          <Link href={"/settings"}>
-            <Button text={"Settings"} />
-          </Link>
-        </NavBar>
+        <NavBar
+          items={
+            <>
+              <Link href={"/devices"}>
+                <Button text={"Devices"} />
+              </Link>
+              <Link href={"/groups"}>
+                <Button text={"Groups"} />
+              </Link>
+              <Link href={"/settings"}>
+                <Button text={"Settings"} />
+              </Link>
+            </>
+          }
+        ></NavBar>
 
         {/* routes */}
         <Route path={"/devices"}>

packages/ui/src/components/Button/Button.tsx

@@ -7,12 +7,11 @@ const StyledButton = styled.button`
   font-family: "Lilex Medium", monospace;
   border: none;
   padding: 0.75em 2em;
+  margin-right: 0.5em;
   background: none;
 
   display: inline-block;
-  margin: 0.5rem;
   color: ${({ theme }) => theme.accent};
-  border-radius: 0.25rem;
   border: 1px solid ${(props) => props.theme.accent};
   background: transparent;
   text-align: center;
@@ -23,12 +22,15 @@ const StyledButton = styled.button`
     background-color: ${({ theme }) => theme.accent};
     color: ${(props) => props.theme.background};
   }
+
+  &:is(:last-child):not(:first-child) {
+    margin-right: 0;
+  }
 `;
 
 function Button(props) {
   return (
     <StyledButton
-      className={props.className}
       type={props.type || "button"}
       disabled={props.disabled || false}
       onClick={props.onClick}

packages/ui/src/components/ButtonGrid/ButtonGrid.tsx

@@ -0,0 +1,20 @@
+// SPDX-FileCopyrightText: © 2024 Amber Cronin <software@amber.vision>
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { ReactElement } from "react";
+import styled from "styled-components";
+
+const StyledButtonGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(9%, 1fr));
+`;
+
+interface buttons {
+  buttons: ReactElement[];
+}
+
+function ButtonGrid(props: buttons) {
+  return <StyledButtonGrid>{props.buttons}</StyledButtonGrid>;
+}
+
+export default ButtonGrid;

packages/ui/src/components/ColorPicker/ColorPicker.tsx

@@ -6,7 +6,11 @@ function ColorPicker(props) {
     <>
       <label>
         {props.label}
-        <input type="color" value={props.value} onChange={props.onChange} />
+        <input
+          type="color"
+          value={props.value}
+          onChange={props.onChange}
+        />
       </label>
       <p>{props.value}</p>
     </>

packages/ui/src/components/DeviceCard/DeviceCard.tsx

@@ -26,10 +26,6 @@ const Card = styled.div`
   &:hover {
     background-color: ${({ theme }) => theme.hover};
   }
-
-  > *:visited {
-    border: none;
-  }
 `;
 
 function DeviceCard(props: {

packages/ui/src/components/DeviceSettings/DeviceSettings.tsx

@@ -71,10 +71,6 @@ function DeviceSettings(props) {
           onChange={(event) => {
             const newFriendlyName = event.target.value;
             setDeviceFriendlyNameState(newFriendlyName);
-            setDeviceFriendlyNameState(
-              props.device.friendly_name,
-              deviceFriendlyNameState,
-            );
           }}
         />
         <h3>{deviceDescription(deviceDefinition)}</h3>

packages/ui/src/components/EditableText/EditableText.tsx

@@ -61,7 +61,6 @@ function EditableText(props: EditableTextProps) {
 
   const handleBlur = (event) => {
     setEditable(false);
-    console.log(event.target.defaultValue);
   };
 
   const handleFocus = () => {