@stack-spot/jinja-forms
TypeScript icon, indicating that this package has built-in type declarations

0.3.0 • Public • Published

Jinja Forms

TODO

Installation

pnpm add @stack-spot/jinja-forms

Open your package.json and add to scripts.postinstall the following:

{
  "scripts": {
    "postinstall": "pnpm pyodide"
  }
}

Now run pnpm i.

Usage

Example:

import { Button, Flex } from '@citric/core'
import mock from './forms-mock.json' // a mock with a json describing a form
import mock2 from './forms-mock-2.json' // a mock with a json describing a form
import { accountVars, authVars, pluginVars, stackVars, workspaceVars } from './variables-mock' // mocked values for variables
import { ConnectionInterfaceConfig, ConnectionInterfaceConfigProvider, DynamicForm, GlobalContext, VariablesContext } from '@stack-spot/jinja-forms'

const connectionsMock: ConnectionInterfaceConfig = {
  getConnectionInterfaces: () => Promise.resolve(['connection1', 'connection2']), // gets the connections interfaces to be used in the form
  isConnectionInterfaceNameAvailable: (value) => Promise.resolve(false), // checks if the name for a connection interface is available
}

export const FormsTest = () => (
  <ConnectionInterfaceConfigProvider value={connectionsMock}> {/* Allows connection interface fields to be used in the child forms */}
    <VariablesContext account={accountVars} workspace={workspaceVars} auth={authVars} stack={stackVars}> {/* Tells which variables are available to the child forms */}
      <GlobalContext> {/* Uses a global context common to all child forms. Useful for sharing data among different forms. */}
        <h1>Form 1</h1>
        <DynamicForm {/* The form itself */}
          name="test"
          inputs={mock.inputs as any} {/* This is the field "inputs" that normally comes from the backend. It describes the form fields. */}
          computedInputs={mock.computedInputs} {/* This is the form data that is computed. This data can be used by the fields. Optional. */}
          globalComputedInputs={mock.globalComputedInputs} {/* This is the form data that is computed and global. This data can be used by the fields. Optional. Requires a GlobalContext. */}
          envs={['dev', 'stg', 'prd']} {/* The environments available for the form. Fields that are "by env" will be able to be set for each environment */}
          pluginVariables={pluginVars} {/* If this is a plugin form, it might need plugin variables. This is where you pass these variables. Optional. */}
          onSubmit={console.log} {/* What to do when the form is submit. It receives the form object, which contains many things among all fields with their current values. */}
        >
          <Flex style={{ marginTop: '20px' }}>
            <Button type="reset" colorScheme="inverse">Reset</Button>
            <Button type="submit">Submit</Button>
          </Flex>
        </DynamicForm>
        {/* Another example, a second form. */}
        <h1>Form 2</h1>
        <DynamicForm name="test2" inputs={mock2.inputs as any} globalContext="global" envs={['dev', 'stg', 'prd']} onSubmit={console.log}>
          <Flex style={{ marginTop: '20px' }}>
            <Button type="reset" colorScheme="inverse">Reset</Button>
            <Button type="submit">Submit</Button>
          </Flex>
        </DynamicForm>
      </GlobalContext>
    </VariablesContext>
  </ConnectionInterfaceConfigProvider>
)

This example has been taken from here: https://github.com/stack-spot/portal-edp/blob/feat-jinja-forms-rework/src/views/FormsTest.tsx

With the link above you can also check the code for the mocks used.

/@stack-spot/jinja-forms/

    Package Sidebar

    Install

    npm i @stack-spot/jinja-forms

    Weekly Downloads

    19

    Version

    0.3.0

    License

    none

    Unpacked Size

    15.5 MB

    Total Files

    242

    Last publish

    Collaborators

    • renanrodrigueszup
    • carolinegoncalveszup
    • tiagobalbinodesazup
    • larissacostazup
    • magno.lemos
    • hiltonpaulozup
    • tiagoperesfr
    • arthurbleilzup
    • tarcisiogc
    • lucasgarciazup
    • rafamsilva-zup
    • leonardo.palis
    • caiorezendezup