@bigbinary/neeto-rules

@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: ["[e-mail]"], 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.

Integrations

Project	Pages
neeto-desk-web	Automation rules, views, Canned response
neeto-planner-web	Automation rules