💠 Vector Sigma

Dynamic Form Orchestrator 📦

Overview

Fields, Input Validation and Submission can be defined and parametized in real-time predicated on a JSON (JavaScript Object Notation) xForm definition or builder object pattern.

Key Features

Documentation

Installation

npm install @emeraldemperaur/vector-sigma

Peer Dependencies

npm install react@latest react-dom@latest sass@latest

Usage

var s = "JavaScript/TypeScript Code Snippet";
alert(s);

Screenshots

Automation Workflow Use Case

Web Application Use Case

Design Tenets

var s = "JavaScript/TypeScript Code Builder Snippet";
alert(s);

import { Theme, File, Dropdown } from '@emeraldemperaur/vector-sigma';

const App = () => {
  return (
    
    <Theme>
      <File/>
      <Dropdown/>
    </Theme>
  );
}

import { Container, Column, Row, CheckboxGroup, Dropdown, File, RangeSlider } 
from '@emeraldemperaur/vector-sigma';
import { Theme } from '@emeraldemperaur/vector-sigma';
import { Form, Formik } from 'formik'
import * as Yup from 'yup'


const App = () => {
  return (
    <Container fluid>
      <Row>
        <Column span={9}>
        <Formik 
          initialValues={{
            dropdownInput: 'Zaibatsu',
          }}
          
          validationSchema={Yup.object({
            dropdownInput: Yup.string().required('Dropdown selection is required'),
          })}

          onSubmit={(values) => {
            console.log(values);
          }}
    >
      {({ values }) => (
        <Form>
            <Theme>
            <File alias='inputFile' width={3}/>
            <Dropdown alias="dropdownInput" width={8} inputLabel="Dropdown Element" inputtype="dropdown-outline" value="Zaibatsu" 
                inputoptions={
                    [
                    {optionid: 1, 
                    optionvalue: "Kaiju", 
                    optionurl:"https://github.com/emeraldemperaur", 
                    text: "Kaiju"},
                    {optionid: 2, 
                    optionvalue: "Meka", 
                    optionurl:"https://www.mekaegwim.ca", 
                    text: "Meka"},
                    {optionid: 3, 
                    optionvalue: "Godzilla", 
                    optionurl:"https://www.me.ca", 
                    text: "Godzilla"},
                    {optionid: 4, 
                    optionvalue: "Zaibatsu", 
                    optionurl:"https://www.npmjs.com/package/@emeraldemperaur/vector-sigma", 
                    text: "Zaibatsu"},
                    ]}/>
            </Theme>
            <button type="submit" style={{ marginTop: 20 }}>Submit</button>
        </Form>
      )}
        </Formik>
        </Column>
      </Row>
    </Container>
  );
}

Tool Stack

Changeset Versioning Synopsis

npm install --save-dev @changesets/cli
# Changeset project initializer
npx changeset init

git checkout -b new-changeset-branchname

# Changeset - patch, minor, major versioning
npx changeset

# PreRelease mode (alpha)
npx changeset pre enter alpha

# PreRelease mode (beta)
npx changeset pre enter beta

# Exit PreRelease mode 
npx changeset pre exit

git add .
git commit -m "Changeset :: commit message"
git status
# confirm clean working tree before push
git push origin new-changeset-branchname

git checkout prometheus

git pull origin prometheus