Jabroni Outfit

out-of-the-box gui and persistent-state library

https://smartacephale.github.io/jabroni-outfit/

Sublime's custom image

Introduction

The jabroni-outfit library is a versatile tool for creating user interfaces with persistent state management. It provides a simple and efficient way to define state variables, build UI controls, and automatically update the UI based on state changes.

Key Features

State Management:
- Define state variables with properties like value, persistent, and watch.
- Easily manage and update state values throughout your application.
UI Creation:
- Create UI controls (e.g., text inputs, checkboxes) based on state variables.
- Automatically update the UI whenever state values change.
Persistence:
- Store state values persistently across application sessions.
Flexibility:
- Customize the UI and state management to fit your specific needs.

Usage

1. Import the Library:

import { JabroniOutfitStore, JabroniOutfitUI } from 'jabroni-outfit';

or umd cdn:

<script src="https://unpkg.com/jabroni-outfit@latest/dist/jabroni-outfit.umd.js"></script>
...
const { JabroniOutfitStore, JabroniOutfitUI } = window.jabronioutfit;

2. Define State Variables:

Create an object containing state variables. Each variable has properties:

value: The current value of the state variable.
persistent: Boolean indicating if the value should be stored persistently.
watch: Boolean indicating if the UI should update when the value changes.

const myState = {
  gradientColor1: { value: "red", persistent: false, watch: true },
  // ... other state variables
};

3. Create a Store:

Instantiate a JabroniOutfitStore object with your state definition.

const store = new JabroniOutfitStore(myState);

4. Create UI Controls:

Define an object mapping state variables to UI control configurations.

const uiConfig = {
  gradientColor1: [{ type: "text", model: "localState.gradientColor1" }],
  // ... other UI controls
};

5. Create the UI:

Instantiate a JabroniOutfitUI object with the store and UI configuration.

const ui = new JabroniOutfitUI(store, uiConfig);

6. Subscribe to reactive data:

Use the subscribe method on the store to trigger updates whenever the state changes.

store.subscribe(() => {
  // ...
});

Example

const {
  JabroniOutfitStore,
  JabroniOutfitUI
} = window.jabronioutfit;

const customState = {
  gradientColor1: { value: "red", persistent: false, watch: true, type: "string" },
  gradientColor2: { value: "coral", persistent: false, watch: true, type: "string" },
  gradientColor3: { value: "orange", persistent: false, watch: true, type: "string" },
  gradientEnabled: { value: true, persistent: false, watch: true, type: "boolean" },
  uiEnabled: { value: true, persistent: true, watch: true, type: "boolean" }
}

const store = new JabroniOutfitStore(customState);

const customScheme = {
  gradientColor1: [{ type: "text", model: "localState.gradientColor1", placeholder: "color", labelBefore: "color1" }],
  gradientColor2: [{ type: "text", model: "localState.gradientColor2", placeholder: "color", labelBefore: "color2" }],
  gradientColor3: [{ type: "text", model: "localState.gradientColor3", placeholder: "color", labelBefore: "color3" }],
  gradientEnabled: [{ type: "checkbox", model: "localState.gradientEnabled", labelBefore: "gradient enabled" }],
};

new JabroniOutfitUI(store, customScheme, '#lol');

function drawGradient() {
  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
  const { gradientColor1, gradientColor2, gradientColor3, gradientEnabled } = store.localState;
  if (!gradientEnabled) { document.body.style.background = 'blue'; return; }
  document.body.style.background = `radial-gradient(${gradientColor1}, ${gradientColor2}, ${gradientColor3})`;
}

drawGradient();

store.subscribe(() => {
  drawGradient();
});