@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: ["[email protected]"], 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 |