@bigbinary/neeto-rules

0.0.65 • Public • Published

@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.

Integrations

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

Readme

Keywords

none

Package Sidebar

Install

npm i @bigbinary/neeto-rules

Weekly Downloads

0

Version

0.0.65

License

MIT

Unpacked Size

926 kB

Total Files

6

Last publish

Collaborators

  • neetohq
  • bigbinarybot
  • yedhink
  • neerajdotname