@bigbinary/neeto-rules NPM

@bigbinary/neeto-rules

neetoRules is the library that manages automation rules across neeto products.

Installation

yarn add @bigbinary/neeto-rules

neetoRules has a few peer dependencies that are required for the proper functioning of the package. Install all the peer dependencies using the below command:

yarn add @bigbinary/neetoui @bigbinary/neeto-icons ramda@^0.28.0 classnames@^2.3.1

Usage

<NeetoRulesForm data={initialProps}>
  {({ formattedValues, values, ...formikBag }) => (
    <>
      <InputField name="name" data={initialProps} />
      <TextareaField name="description" data={initialProps} />
      <SelectField name="projectId" data={initialProps} />
      <Events name="events" data={initialProps} />
      <RadioField name="performer" data={initialProps} />
      <Card title="Conditions">
        <Conditions name="conditions" data={initialProps} />
      </Card>
      <ConditionGroups name="conditionGroups" data={initialProps} />
      <Actions name="actions" data={initialProps} />
    </>
  )}
</NeetoRulesForm>

NeetoRules API

Prop Name	Description
data	Object `{ [fieldName] : FieldProps }` FieldProps
children	`children?: React.ReactNode ({ formattedValues, ...props: FormikProps<Values>}) => ReactNode`
className	To provide external classnames to Form component. `string`
handleSubmit	`(values: Values, formikBag: FormikBag) => void` FormikBag
handleCancel	Callback on clicking Form cancel button.

Field Props

Prop	Description
name	Name of the field `string`
label	To specify the text to be displayed above the field. `string`
type	Type of the field. Supported Field Types `string`
value	Default value of the Field. It can be string or array based on the field type.
componentProps	Component specific props. Component Props
options	`[{ label: "", value: ""}]` For Field Types `radio` and `dropdown`.
conditionOptions	If Field Type is `condition` Options
eventOptions	If Field Type is `events` Options
actionOptions	If Field Type is `actions` Options

Options

Prop	Description
label	Option label `string`
value	Option value `string`
type	Type of the option field
dropdownOptions	If the `type` is `dropdown`, `multi-select`, or `multi-select-create`

Field Types

text
long-text
dropdown
radio
events
actions
condition
condition-group

Component Props

Prop	Description	Default value
required	To specify whether the input field is required or not. `Boolean`	`true`

Field Components

InputField

const initialProps = {
  ...otherProps,
  firstName: {
    label: "First Name",
    type: "text",
    value: "", // Default value.
    componentProps: {
      placeholder: "Enter name",
    },
  },
};

<InputField name="firstName" data={initialProps} />;

API

Prop	Description
data	The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`.
name	Name of the field. The name should be same as that in the initialProp
label	To specify the text to be displayed above the field. `string`

TextareaField

const initialProps = {
  ...otherProps,
  description: {
    label: "Description",
    type: "long-text",
    value: "", // Default value.
  },
};

<TextareaField name="description" data={initialProps} />;

API

Prop	Description
data	The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`.
name	Name of the field. The name should be same as that in the initialProp `string`
label	To specify the text to be displayed above the field. `string`

SelectField

const initialProps = {
  ...otherProps,
  user: {
    label: "Project",
    type: "dropdown",
    options: [{ label: "Oliver", value: "oliver" }],
    value: "oliver", // Default selected option will be Oliver
  },
};

<SelectField name="user" data={initialProps} />;

API

Prop	Description
data	The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`.
name	Name of the field. The name should be same as that in the initialProp
label	To specify the text to be displayed above the field. `string`
options	To provide options for the Select input. `[{label, value}]`.
onChange	`(value, setValue) => void` `setValue` is to set the new value

RadioField

const initialProps = {
  ...otherProps,
  performer: {
    label: "Performer",
    type: "radio",
    value: "any", // Default selected value will be "any"
    options: [
      { label: "Admin", value: "admin" },
      { label: "Any", value: "any" },
    ],
  },
};

<RadioField name="performer" data={initialProps} />;

API

Prop	Description
data	The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`.
name	Name of the field. The name should be same as that in the initialProp
label	To specify the text to be displayed above the field. `string`
options	To provide options for the Radio input. `[{label, value}]`.

Events

const initialProps = {
  ...otherProps,
  events: {
    label: "Events",
    type: "events",
    value: [{ id: "1", name: "when_created" }], // Default value
    eventOptions: [
      { label: "When Created", value: "when_created" },
      { label: "When Updated", value: "when_updated" },
      { label: "When Assigned", value: "when_deleted" },
    ],
  },
};

<Events name="events" data={initialProps} />;

API

Prop	Description
data	The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`.
name	Name of the field. The name should be same as that in the initialProp
label	To specify the text to be displayed above the field. `string`
onSelectEvent	`(name, selectedOption) => void` This method will trigger when we select an event option. The `name` is to refer the event in the formik context.

Conditions

const initialProps = {
  ...otherProps,
  conditions: {
    label: "Conditions",
    type: "condition",
    conditionOptions: [
      {
        value: "status",
        label: "Status",
        type: "dropdown", // Types : text, textarea, dropdown, multi-select, multi-select-create, date.
        dropdownOptions: [
          { label: "Open", value: "open" },
          { label: "Closed", value: "closed" },
        ],
      },
      { value: "name", label: "Name", type: "text" },
      {
        value: "tags",
        label: "Tags",
        type: "multi-select-create",
      },
    ],
    value: [
      {
        id: "1",
        field: "status",
        verb: "is",
        value: "open",
        joinType: "and_operator",
      },
      {
        id: "2",
        field: "name",
        verb: "is",
        value: "Test",
        joinType: "and_operator",
      },
    ],
  },
};

<Card title="Conditions">
  <Conditions name="conditions" data={initialProps} />
</Card>;

API

Prop	Description
data	The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`.
name	Name of the field. The name should be same as that in the initialProp
label	To specify the text to be displayed above the field. `string`
isConditionGroup	To specify whether the component is part of `ConditionGroups` field. Default is `false`
onSelectCondition	`(name, selectedOption) => void` This method will trigger when we select a condition. The `name` is to refer the condition in the formik context.
selectedConditionOptions	`(selectedCondition)=> [{label, value}]` To provide options for the selected condition if the type of selected condition is `dropdown`, `multi-select`, or `multi-select-create`

ConditionGroups

const initialProps = {
  ...otherProps,
  conditionGroups: {
    label: "Condition Groups",
    type: "condition-group",
    conditionOptions: [
      {
        value: "status",
        label: "Status",
        type: "dropdown", // Types : text, textarea, dropdown, multi-select, multi-select-create, date.
        dropdownOptions: [
          { label: "Open", value: "open" },
          { label: "Closed", value: "closed" },
        ],
      },
      { value: "name", label: "Name", type: "text" },
      {
        value: "tags",
        label: "Tags",
        type: "multi-select-create",
      },
    ],
    value: [
      {
        id: "1",
        joinType: "and_operator",
        conditions: [
          {
            id: "1",
            field: "status", Specify the value of the selected condition.
            verb: "is",
            value: "open",
            joinType: "and_operator",
          },
          {
            id: "2",
            field: "name",
            verb: "is",
            value: "Test",
            joinType: "and_operator",
          },
        ],
      },
    ],
  },
}

 <ConditionGroups name="conditionGroups" data={initialProps} />

API

Prop	Description
data	The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`.
name	Name of the field. The name should be same as that in the initialProp
label	To specify the text to be displayed above the field. `string`
onSelectCondition	`(name, selectedOption) => void` This method will trigger when we select a condition. The `name` is to refer the condition in the formik context.
selectedConditionOptions	`(selectedCondition)=> [{label, value}]` To provide options for the selected condition if the type of selected condition is `dropdown`, `multi-select`, or `multi-select-create`

Actions

const initialProps = {
  ...otherProps,
  actions: {
    label: "Actions",
    type: "actions",
    actionOptions: [
      {
        value: "change_status",
        label: "Change Status",
        type: "dropdown", // Types : emailToIds, email, dropdown, list, multiSelect, note
        dropdownOptions: [
          { label: "Open", value: "open" },
          { label: "Closed", value: "closed" },
        ],
      },
      {
        value: "email_to",
        label: "Email To",
        type: "emailToIds",
        hideSubject: true, // Hide subject field if this prop is true
      },
    ],
    value: [
      {
        id: "1",
        name: "email_to", // Specify the value of the selected action.
        metadata: { emails: ["a@a.com"], subject: "test", body: "test" },
      },
      {
        id: "2",
        name: "change_status",
        metadata: { value: "closed" },
      },
    ],
  },
};

<Actions name="fieldName" data={initialProps} />;

API

Prop	Description
data	The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`.
name	Name of the field. The name should be same as that in the initialProp
label	To specify the text to be displayed above the field. `string`
onSelectAction	`(name, selectedOption) => void` This method will trigger when we select an action. The `name` is to refer the action in the formik context.
selectedActionOptions	`(selectedAction)=> [{label, value}]` To provide options for the selected action if the type of selected action is `dropdown`, or `multi-select`

Example: Refer Example App

Development

Install all the dependencies by executing the following command

yarn install

Start the development server using the yarn start command. Port: 8080

Building

The neetoRules package gets auto-published to npm for every new merge to the main branch. You can checkout the publish workflow in git actions to get a live update.