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.