Merge pull request #4 from heiso/new-configurator

new configurator

README.md

@@ -74,7 +74,11 @@ This is still a work in progress, the firt revision is working flawlessly but it
 - [Wooting 60HE pcb](https://github.com/heiso/macrolev/tree/main/ref/Wooting-60HE)
 - [Connecting to uncommon HID devices](https://developer.chrome.com/articles/hid)
 - [HID Descriptor parser](https://eleccelerator.com/usbdescreqparser/)
-- [peppapighs HE keyboard](https://github.com/peppapighs/HE8)
+- [peppapighs HE8 keyboard](https://github.com/peppapighs/HE8)
+- [peppapighs libhmk library](https://github.com/peppapighs/libhmk)
+- [nuphy configurator demo](https://drive.nuphy.io/?isDemoMode=true)
+- [geonworks configurator demo](https://venom.how/)
+- [wooting configurator demo](https://wootility.io/)
 
 ### Tooling
 

web-app-old/.dockerignore

@@ -0,0 +1,11 @@
+fly.toml
+Dockerfile
+.dockerignore
+node_modules
+.git
+*.log
+.DS_Store
+.env
+/.cache
+/public/build
+/build

web-app-old/.gitignore

@@ -0,0 +1,12 @@
+node_modules
+routes.ts
+svgs.ts
+
+dist
+/.cache
+/build
+/public/build
+.env
+.env.*
+!.env.tpl
+.DS_Store

web-app-old/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-organize-imports"]
+}

web-app-old/Dockerfile

@@ -0,0 +1,60 @@
+# syntax=docker/dockerfile:1
+ARG NODE_VERSION=20.6.1
+
+
+
+# ===
+# base node image
+# ===
+FROM node:${NODE_VERSION}-slim as base
+
+RUN apt-get update -qq && \
+    apt-get install -y openssl 
+
+LABEL fly_launch_runtime="Remix"
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+
+
+# ===
+# Build the app
+# ===
+FROM base as build
+
+# Install packages needed to build node modules
+RUN apt-get update -qq && \
+    apt-get install -y python-is-python3 pkg-config build-essential 
+
+# Install node modules
+COPY --link package.json package-lock.json ./
+RUN npm install --production=false
+
+# Copy application code
+COPY --link . .
+
+# Generate Routes
+RUN npx tsx generate-remix-routes.ts
+
+# Generate SVGs
+RUN npx tsx generate-svg-icons-sprite.ts
+
+# Build application
+RUN npm run build
+
+# Remove development dependencies
+RUN npm prune --production
+
+
+
+# ===
+# Final stage for app image
+# ===
+FROM base
+
+# Copy built application
+COPY --from=build /app /app
+
+CMD node --max-old-space-size=256 build/server

web-app-old/README.md

@@ -0,0 +1,69 @@
+# UwU Stack · ![logo](./public/favicon-32x32.png)
+
+## Install and first run
+
+```bash
+npm i
+cp .env.tpl .env
+npm run up
+npm run reset-database
+npm run log
+```
+
+Then go to http://localhost:3000
+
+## DevEnv actions
+
+Start
+
+```bash
+npm run up
+```
+
+Show logs
+
+```bash
+npm run log
+```
+
+Stop
+
+```bash
+npm run down
+```
+
+Restart
+
+```bash
+npm run restart
+```
+
+Truncate Database, Migrate and apply seeds
+
+```bash
+npm run reset-database
+```
+
+Run Lint
+
+```bash
+npm run lint
+```
+
+Run tests
+
+```bash
+npm run test
+```
+
+## TODO
+
+- ✅ ...Done
+- ⌛️ ...In Progress
+- 🚨 ...Bug
+- 🚧 ...Improvment
+
+- full sqlite option
+- redis/postgres option
+- auth flow
+- ui

web-app-old/app/components/field.tsx

@@ -0,0 +1,130 @@
+import {
+  forwardRef,
+  useState,
+  type InputHTMLAttributes,
+  type ReactNode,
+  type SelectHTMLAttributes,
+  type TextareaHTMLAttributes,
+} from 'react'
+import { Hint, type HintProps } from '../ui/hint.tsx'
+import { Icon } from '../ui/icon.tsx'
+import { Checkbox, Input } from '../ui/input.tsx'
+import { Label } from '../ui/label.tsx'
+import { SelectMultiple, type SelectMultipleProps } from '../ui/select-multiple.tsx'
+import { Select, type Option } from '../ui/select.tsx'
+import { Textarea } from '../ui/textarea.tsx'
+
+export type BaseFieldProps = {
+  label?: string
+  hint?: HintProps['hint']
+  errors?: string[]
+}
+
+export type FieldProps = InputHTMLAttributes<HTMLInputElement> &
+  BaseFieldProps & {
+    icon?: ReactNode
+  }
+
+export const Field = forwardRef<HTMLInputElement, FieldProps>(
+  ({ label, hint, errors, ...props }, ref) => {
+    return (
+      <div className="flex flex-col gap-1 mb-1">
+        <Label>{label}</Label>
+        <Input ref={ref} hasError={Boolean(errors?.length)} {...props} />
+        <Hint error={errors?.join('\n')} hint={hint} />
+      </div>
+    )
+  },
+)
+Field.displayName = 'Field'
+
+export const PasswordField = forwardRef<HTMLInputElement, FieldProps>(({ ...props }, ref) => {
+  const [show, setShow] = useState(false)
+
+  return (
+    <Field
+      ref={ref}
+      {...props}
+      type={show ? 'text' : 'password'}
+      icon={
+        show ? (
+          <Icon onClick={() => setShow(!show)} id="eye-open" className="cursor-pointer" />
+        ) : (
+          <Icon onClick={() => setShow(!show)} id="eye-closed" className="cursor-pointer" />
+        )
+      }
+    />
+  )
+})
+PasswordField.displayName = 'PasswordField'
+
+export const CheckboxField = forwardRef<HTMLInputElement, FieldProps>(
+  ({ label, hint, errors, ...props }, ref) => {
+    return (
+      <div className="flex flex-col gap-1 mb-1">
+        <Label className="cursor-pointer flex flex-row gap-2 select-none items-center">
+          <Checkbox ref={ref} {...props} hasError={Boolean(errors?.length)} />
+          <div>{label}</div>
+        </Label>
+        <Hint error={errors?.join('\n')} hint={hint} />
+      </div>
+    )
+  },
+)
+CheckboxField.displayName = 'CheckboxField'
+
+export type TextareaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & BaseFieldProps
+
+export const TextareaField = forwardRef<HTMLTextAreaElement, TextareaFieldProps>(
+  ({ label, hint, errors, ...props }, ref) => {
+    return (
+      <div className="flex flex-col gap-1 mb-1">
+        <Label>{label}</Label>
+        <Textarea ref={ref} hasError={Boolean(errors?.length)} {...props} />
+        <Hint error={errors?.join('\n')} hint={hint} />
+      </div>
+    )
+  },
+)
+TextareaField.displayName = 'TextareaField'
+
+export type SelectFieldProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> &
+  BaseFieldProps & {
+    options: Option[]
+  }
+
+export const SelectField = forwardRef<HTMLSelectElement, SelectFieldProps>(
+  ({ label, hint, options, errors, ...props }, ref) => {
+    return (
+      <div className="flex flex-col gap-1 mb-1">
+        <Label>{label}</Label>
+        <Select
+          hasError={Boolean(errors?.length)}
+          {...props}
+          ref={ref}
+          className="border border-gray-300 rounded px-2 py-1"
+        >
+          {options.map(({ value, label }) => (
+            <option key={value} value={value}>
+              {label}
+            </option>
+          ))}
+        </Select>
+        <Hint error={errors?.join('\n')} hint={hint} />
+      </div>
+    )
+  },
+)
+SelectField.displayName = 'SelectField'
+
+export type SelectMultipleFieldProps = BaseFieldProps & SelectMultipleProps
+
+export function SelectMultipleField({ label, hint, errors, ...props }: SelectMultipleFieldProps) {
+  return (
+    <div className="flex flex-col gap-1 mb-1">
+      <Label>{label}</Label>
+      <SelectMultiple {...props} hasError={Boolean(errors?.length)} />
+      <Hint error={errors?.join('\n')} hint={hint} />
+    </div>
+  )
+}