Fix types dependency in UI

amberstarlight · Jun 8, 2024 · cc44149 · cc44149
1 parent a9e6238
commit cc44149
Show file tree

Hide file tree

Showing 17 changed files with 53 additions and 1,687 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/packages/api/README.md b/packages/api/README.md
@@ -0,0 +1,21 @@
+# starlight/api
+
+REST API for Starlight. Connects to `zigbee2mqtt` and `mosquitto` or other MQTT
+endpoint.
+
+## Environment Variables
+
+### `PORT`
+
+The port the API runs on. Defaults to 8080.
+
+
+### `MQTT_ENDPOINT_HOSTNAME`
+
+The endpoint for the MQTT server. Defaults to `localhost`, using `mqtt`
+protocol.
+
+
+### `MQTT_ENDPOINT_PORT`
+
+The port the MQTT endpoint uses. Defaults to 1883.
diff --git a/packages/api/package.json b/packages/api/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "devDependencies": {
+    "@starlight/types": "workspace:^",
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.17",
     "@types/node": "^20.10.5",
@@ -12,7 +13,6 @@
     "typescript": "^5.0.2"
   },
   "dependencies": {
-    "@starlight/types": "workspace:^",
     "cors": "^2.8.5",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",

diff --git a/packages/types/README.md b/packages/types/README.md
@@ -1,3 +1,3 @@
-# types
+# starlight/types
 
 Types and interface exports for Starlight. Based on the Zigbee2MQTT project.
diff --git a/packages/ui/.yarn/install-state.gz b/packages/ui/.yarn/install-state.gz
diff --git a/packages/ui/.yarnrc.yml b/packages/ui/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/packages/ui/README.md b/packages/ui/README.md
@@ -0,0 +1,9 @@
+# starlight/ui
+
+Vite + React UI for Starlight. Connects to Starlight API.
+
+## Environment Variables
+
+### `VITE_API_URL`
+
+API URL (including port) to connect to.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -16,6 +16,7 @@
     "wouter": "^3.1.2"
   },
   "devDependencies": {
+    "@starlight/types": "workspace:^",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
@@ -15,7 +15,7 @@ import Groups from "./pages/Groups/Groups";
 
 import Button from "./components/Button/Button";
 import DeviceSettings from "./components/DeviceSettings/DeviceSettings";
-import { type Device, type Group } from "../../types/zigbee_types";
+import { type Device, type Group } from "starlight/types";
 import GroupSettings from "./components/GroupSettings/GroupSettings";
 
 const Wrapper = styled.div`

diff --git a/packages/ui/src/components/DeviceCard/DeviceCard.tsx b/packages/ui/src/components/DeviceCard/DeviceCard.tsx
@@ -4,8 +4,7 @@
 import { deviceDescription } from "../../utils/deviceUtilities";
 import styled from "styled-components";
 import { StyledText, StyledHeader } from "../../utils/theme";
-
-import { type Device } from "../../../../types/zigbee_types";
+import { type Device } from "@starlight/types";
 
 const emojiLookup = {
   light: "💡",

diff --git a/packages/ui/src/components/DeviceList/DeviceList.tsx b/packages/ui/src/components/DeviceList/DeviceList.tsx
@@ -3,7 +3,7 @@
 
 import { Link } from "wouter";
 import DeviceCard from "../DeviceCard/DeviceCard";
-import { type Device } from "../../../../types/zigbee_types";
+import { type Device } from "@starlight/types";
 
 function DeviceList(props: { devices: Device[]; onClick: Function }) {
   return (

diff --git a/packages/ui/src/components/GroupCard/GroupCard.tsx b/packages/ui/src/components/GroupCard/GroupCard.tsx
@@ -3,8 +3,7 @@
 
 import styled from "styled-components";
 import { StyledText, StyledHeader } from "../../utils/theme";
-
-import { type Group } from "../../../../types/zigbee_types";
+import { type Group } from "@starlight/types";
 
 const Card = styled.div`
   margin: 2em 0em;

diff --git a/packages/ui/src/components/GroupList/GroupList.tsx b/packages/ui/src/components/GroupList/GroupList.tsx
@@ -3,7 +3,7 @@
 
 import { Link } from "wouter";
 import GroupCard from "../GroupCard/GroupCard";
-import { type Group } from "../../../../types/zigbee_types";
+import { type Group } from "@starlight/types";
 
 function GroupList(props: { groups: Group[]; onClick?: Function }) {
   return (

diff --git a/packages/ui/src/components/GroupSettings/GroupSettings.tsx b/packages/ui/src/components/GroupSettings/GroupSettings.tsx
@@ -5,6 +5,7 @@ import { useState, useEffect } from "react";
 
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner";
 import EditableText from "../EditableText/EditableText";
+import { deviceSettingsGenerator } from "../DeviceSettings/generator";
 
 const backend = import.meta.env.VITE_API_URL ?? "";
 
@@ -17,7 +18,10 @@ function GroupSettings(props) {
   useEffect(() => {
     fetch(`${backend}/api/groups/${props.group.id}/state`)
       .then((res) => res.json())
-      .then((data) => setGroupSettingsState(data.data));
+      .then((data) => {
+        setGroupSettingsState(data.data);
+        console.log(data.data);
+      });
   }, []);
 
   if (!groupSettingsState) return <LoadingSpinner />;
@@ -40,8 +44,13 @@ function GroupSettings(props) {
           // }}
         />
       </div>
-
-      <div>"todo"</div>
+      <div>
+        {deviceSettingsGenerator(
+          props.group,
+          groupSettingsState,
+          setGroupSettingsState,
+        )}
+      </div>
     </>
   );
 }