From 87b9ff88efbaccdf0a9d945c16930d4ac87755ec Mon Sep 17 00:00:00 2001 From: MunchDev-oss Date: Sun, 4 Jan 2026 19:19:55 -0500 Subject: [PATCH] Enhance UI with dark mode support and update README with TODO list. Added PCB components to BOM and improved styling for various components to support dark mode. Updated Tailwind configuration to enable dark mode. --- README.md | 25 ++ website/src/App.jsx | 23 +- website/src/components/BOMSummary.jsx | 284 ++++++++++-------- website/src/components/MainPage.jsx | 46 +-- website/src/components/ThemeToggle.jsx | 45 +++ website/src/components/Wizard.jsx | 34 +-- website/src/components/steps/ColorsStep.jsx | 28 +- website/src/components/steps/MotorStep.jsx | 44 +-- website/src/components/steps/OptionsStep.jsx | 58 ++-- .../src/components/steps/PowerSupplyStep.jsx | 36 +-- website/src/components/steps/RemoteStep.jsx | 58 ++-- website/src/components/steps/ToyMountStep.jsx | 42 +-- website/src/contexts/ThemeContext.jsx | 75 +++++ website/src/data/components/pcb.json | 75 +++++ website/src/data/components/stand.json | 20 +- website/src/data/index.js | 2 + website/src/main.jsx | 5 +- website/tailwind.config.js | 1 + 18 files changed, 590 insertions(+), 311 deletions(-) create mode 100644 website/src/components/ThemeToggle.jsx create mode 100644 website/src/contexts/ThemeContext.jsx create mode 100644 website/src/data/components/pcb.json diff --git a/README.md b/README.md index 8464b41..f658f1f 100644 --- a/README.md +++ b/README.md @@ -43,6 +43,31 @@ The OSSM Configurator is a React-based single-page application built with Vite. - **Tailwind CSS** - Styling - **JSZip** - For generating downloadable BOM packages +## TODO +- [X] Dark Mode [Completed] +- [ ] Finalize Actuator Components and mapping to BOM [In Progress] +- [ ] Finalize Stand Components and mapping to BOM +- [ ] Finalize PCB Components and mapping to BOM +- [ ] Finalize Toy Mounts Components and mapping to BOM +- [ ] Finalize Remote Control Components and mapping to BOM +- [ ] Finalize Mounting Components and mapping to BOM +- [ ] Finalize Other Components and mapping to BOM +- [ ] Finalize Colors and mapping to BOM +- [ ] Finalize Pricing and mapping to BOM +- [ ] Finalize BOM Export and mapping to BOM +- [ ] Finalize BOM Import and mapping to BOM +- [ ] Finalize Storage and sharing of BOMs +- [ ] Add references to original hardware files and designs +- [ ] Add Readme/assembly instructions for each component +- [ ] Add FAQ and troubleshooting guide +- [ ] Add support for multiple languages +- [ ] Add support for multiple currencies +- [ ] Add support for multiple payment methods +- [ ] Add support for multiple shipping methods +- [ ] Add support for multiple shipping countries +- [ ] Add support for multiple shipping regions +- [ ] Add support for multiple shipping cities +- [ ] Add 3D render of final product with all components and options selected and coloured [If possible] ## Getting Started ### Prerequisites diff --git a/website/src/App.jsx b/website/src/App.jsx index 6010342..69288b6 100644 --- a/website/src/App.jsx +++ b/website/src/App.jsx @@ -1,6 +1,7 @@ import { useState, useEffect } from 'react'; import MainPage from './components/MainPage'; import Wizard from './components/Wizard'; +import ThemeToggle from './components/ThemeToggle'; import partsData from './data/index.js'; import { getSharedConfig } from './utils/shareService'; @@ -145,16 +146,24 @@ function App() { }; if (!buildType) { - return ; + return ( + <> + + + + ); } return ( - + <> + + + ); } diff --git a/website/src/components/BOMSummary.jsx b/website/src/components/BOMSummary.jsx index dcbe020..841b3b3 100644 --- a/website/src/components/BOMSummary.jsx +++ b/website/src/components/BOMSummary.jsx @@ -129,6 +129,19 @@ export default function BOMSummary({ config }) { }); } + // Include PCB mount parts if a PCB mount is selected + if (config.pcbMount) { + const pcbMountId = config.pcbMount.id; + const pcbMountComponent = partsData.components?.[pcbMountId]; + if (pcbMountComponent?.printedParts) { + pcbMountComponent.printedParts.forEach((part) => { + if (part.required) { + parts.push({ ...part, category: 'PCB Mount' }); + } + }); + } + } + // Include toy mount parts if any toy mounts are selected if (config.toyMountOptions && config.toyMountOptions.length > 0) { if (partsData.components?.toyMounts?.printedParts) { @@ -274,6 +287,7 @@ export default function BOMSummary({ config }) { if (config.standFeet) selectedOptionIds.add(config.standFeet.id); if (config.mount) selectedOptionIds.add(config.mount.id); if (config.cover) selectedOptionIds.add(config.cover.id); + if (config.pcbMount) selectedOptionIds.add(config.pcbMount.id); if (config.remoteKnob) selectedOptionIds.add(config.remoteKnob.id); if (config.toyMountOptions && config.toyMountOptions.length > 0) { config.toyMountOptions.forEach(opt => selectedOptionIds.add(opt.id)); @@ -540,6 +554,7 @@ export default function BOMSummary({ config }) { if (config.standFeet) selectedOptionIds.add(config.standFeet.id); if (config.mount) selectedOptionIds.add(config.mount.id); if (config.cover) selectedOptionIds.add(config.cover.id); + if (config.pcbMount) selectedOptionIds.add(config.pcbMount.id); if (config.remoteKnob) selectedOptionIds.add(config.remoteKnob.id); if (config.toyMountOptions && config.toyMountOptions.length > 0) { config.toyMountOptions.forEach(opt => selectedOptionIds.add(opt.id)); @@ -650,7 +665,7 @@ export default function BOMSummary({ config }) { // Define main sections and their subcategories const mainSections = { - 'Actuator + Mount': ['Actuator Body', 'Mount', 'Cover'], + 'Actuator + Mount': ['Actuator Body', 'Mount', 'Cover', 'PCB Mount'], 'Stand': ['Stand', 'Stand Hinges', 'Stand Feet', 'Stand Crossbar Supports'], 'Remote': ['Remote Body', 'Remote Knobs'], }; @@ -669,13 +684,13 @@ export default function BOMSummary({ config }) { return (
-

BOM Summary

-

+

BOM Summary

+

Review your configuration and bill of materials.

{/* Tab Navigation */} -
+