@bigbinary/neeto-fields-frontend 1.3.25 → 1.3.26

package/README.md

@@ -1,33 +1,35 @@
 # neeto-fields-nano
 
-The `neeto-fields-nano` enables the management of dynamically added fields (often
-referred to as custom fields) across neeto applications. The nano exports the `@bigbinary/neeto-fields-frontend` NPM package and `neeto-fields-engine` Rails engine for development.
+The `neeto-fields-nano` enables the management of dynamically added fields
+(often referred to as custom fields) across neeto applications. The nano exports
+the `@bigbinary/neeto-fields-frontend` NPM package and `neeto-fields-engine`
+Rails engine for development.
 
 # Contents
 
 1. [Development with Host Application](#development-with-host-application)
-    - [Engine](#engine)
-        - [Installation](#installation)
-        - [customizability](#customizability)
-    - [Frontend package](#frontend-package)
-      - [Installation](#installation-1)
-      - [Instructions for development](#instructions-for-development)
-      - [Components](#components)
-        - [FieldsDashBoard](#1-fieldsdashboard)
-        - [FieldsPane](#2-fieldspane)
-        - [FieldValuesContainer](#3-fieldvaluescontainer)
-        - [FieldInputs](#4-fieldinputs)
-        - [InlineFieldValueInputProps](#5-inlinefieldvalueinput)
-        - [FieldDeleteAlert](#6-fielddeletealert)
-      - [Functions](#functions)
-        - [mergeInitialValues](#1-neetofieldsutilsmergeinitialvalues)
-        - [transformValues](#2-neetofieldsutilstransformvalues)
-      - [Hooks](#hooks)
-        - [useFetchFields](#1-usefetchfields)
-        - [useShowFields](#2-useshowfield)
-        - [useCreateField](#3-usecreatefield)
-        - [useUpdateField](#4-useupdatefield)
-        - [useDestroyField](#5-usedestroyfield)
+   - [Engine](#engine)
+     - [Installation](#installation)
+     - [customizability](#customizability)
+   - [Frontend package](#frontend-package)
+     - [Installation](#installation-1)
+     - [Instructions for development](#instructions-for-development)
+     - [Components](#components)
+       - [FieldsDashBoard](#1-fieldsdashboard)
+       - [FieldsPane](#2-fieldspane)
+       - [FieldValuesContainer](#3-fieldvaluescontainer)
+       - [FieldInputs](#4-fieldinputs)
+       - [InlineFieldValueInputProps](#5-inlinefieldvalueinput)
+       - [FieldDeleteAlert](#6-fielddeletealert)
+     - [Functions](#functions)
+       - [mergeInitialValues](#1-neetofieldsutilsmergeinitialvalues)
+       - [transformValues](#2-neetofieldsutilstransformvalues)
+     - [Hooks](#hooks)
+       - [useFetchFields](#1-usefetchfields)
+       - [useShowFields](#2-useshowfield)
+       - [useCreateField](#3-usecreatefield)
+       - [useUpdateField](#4-useupdatefield)
+       - [useDestroyField](#5-usedestroyfield)
 2. [Instructions for Publishing](#instructions-for-publishing)
 
 ## Development with Host Application
@@ -40,54 +42,59 @@ The engine is used to manage fields for any entity across neeto products.
 
 1. Add this line to your application's Gemfile:
 
-    ```ruby
-    source "NEETO_GEM_SERVER_URL" do
-    # ..existing gems
+   ```ruby
+   source "NEETO_GEM_SERVER_URL" do
+   # ..existing gems
 
-      gem 'neeto-fields-engine'
-    end
-    ```
+     gem 'neeto-fields-engine'
+   end
+   ```
 
 2. And then execute:
 
-    ```ruby
-    bundle install
-    ```
+   ```ruby
+   bundle install
+   ```
 
 3. Add this line to your application's `config/routes.rb` file:
 
-    ```ruby
-    mount NeetoFieldsEngine::Engine => "/neeto_fields_engine"
-    ```
+   ```ruby
+   mount NeetoFieldsEngine::Engine => "/neeto_fields_engine"
+   ```
 
-4. Run the following command to copy the migrations from the engine to the host application:
+4. Run the following command to copy the migrations from the engine to the host
+   application:
 
-    ```ruby
-    rails g neeto_fields_engine:install
-    ```
+   ```ruby
+   rails g neeto_fields_engine:install
+   ```
 
 5. Add the migrations to the database:
 
-    ```ruby
-    bundle exec rails db:migrate
-    ```
+   ```ruby
+   bundle exec rails db:migrate
+   ```
 
-6. Generate the required associations between models using the following command:
+6. Generate the required associations between models using the following
+   command:
 
-    ```ruby
-    rails g neeto_fields_engine:associations
-    ```
+   ```ruby
+   rails g neeto_fields_engine:associations
+   ```
 
-    This will prompt the user to enter 2 things:
+   This will prompt the user to enter 2 things:
 
-    1. Name of Owner model.
-    2. Names of Resource models.
+   1. Name of Owner model.
+   2. Names of Resource models.
 
-    Explore [Owner & Resource Information](docs/engine/owner-resource-information.md) for details.
+   Explore
+   [Owner & Resource Information](docs/engine/owner-resource-information.md) for
+   details.
 
 #### Customizability
 
-Refer [Engine customizability](docs/engine/customizability.md) to learn about customizing the engine's default behavior.
+Refer [Engine customizability](docs/engine/customizability.md) to learn about
+customizing the engine's default behavior.
 
 ### Frontend package
 
@@ -110,7 +117,9 @@ yarn add uuid
 
 ### Instructions for development
 
-Check the [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) for step-by-step instructions to develop the frontend package.
+Check the
+[Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0)
+for step-by-step instructions to develop the frontend package.
 
 ### Components
 
@@ -158,12 +167,15 @@ default, but you can customize its behavior by passing optional props.
    `inactive` states.
 9. `breadcrumbs`: Specifies the breadcrumbs to be displayed on the dashboard
    page.
-10. `helpDocUrl`: Specify the URL to the help documentation about fields. This
+10. `helpDescription`: To set the description of the popover, this can be a
+    string or a custom component.
+11. `helpDocUrl`: Specify the URL to the help documentation about fields. This
     URL will be shown in the `NoData` screen.
-11. `nameAliases`: This property accepts alias names as key-value pairs to be
+12. `nameAliases`: This property accepts alias names as key-value pairs to be
     displayed for the names of resource types in header and menubar.
-12. `headerTitle`: Specify the header title explicitly. Default is 'fields'
-13. `resources`: For owner-based field categorization, provide an array of
+13. `headerTitle`: Specify the header title explicitly. Default is 'fields'. TIt
+    also specifies the title of `HelpPopover`.
+14. `resources`: For owner-based field categorization, provide an array of
     objects with `id` and `name` properties for each owner. For resource
     type-based categorization, use an array of objects with `label` and `value`
     properties representing each resource types.
@@ -176,81 +188,80 @@ default, but you can customize its behavior by passing optional props.
 
 1. When `Organization` is the owner of the fields.
 
-    ```jsx
-    import { FieldsDashboard } from "@bigbinary/neeto-fields-frontend";
-
-    <FieldsDashboard
-      allowedKinds={["text", "number"]}
-      buildColumnData={({ defaultColumns }) => [
-        ...defaultColumns,
-        {
-          dataIndex: "isSystem",
-          index: "isSystem",
-          title: t("titles.systemField"),
-          render: boolVal => (boolVal ? "Yes" : "No"),
-        },
-      ]}
-      fieldStatesTaxonomy={{ active: "Active", inactive: "Deactivated" }}
-      paneProps={{
-        children: <HostSpecificInputFields />,
-        validations: {
-          hostSpecificInputName: validationSchema,
-        },
-        initialValues: {
-          hostSpecificInputName: initialValue,
-        },
-      }}
-      breadcrumbs={[
-        {
-          link: "/",
-          text: "Home",
-        },
-        {
-          link: "/",
-          text: "Settings",
-        },
-      ]}
-    />;
-    ```
-
-    #### Usage in [neetoDesk](https://github.com/bigbinary/neeto-desk-web/blob/34068bb579335d3eb6041279f6f3f660099d7f1c/app/javascript/src/components/TicketFields/List/index.jsx#L119C8-L130C11)
-
-
-2. When `Organization` is not owner of the fields. Let's say the owner is `Project`.
-
-    ```jsx
-    import { FieldsDashboard } from "@bigbinary/neeto-fields-frontend";
-
-    <FieldsDashboard
-      allowedKinds={["text", "number"]}
-      resourceType="tasks"
-      showOwnersInMenu
-      fieldStatesTaxonomy={{ active: "Active", inactive: "Deactivated" }}
-      paneProps={{
-        children: <HostSpecificInputFields />,
-        validations: {
-          hostSpecificInputName: validationSchema,
-        },
-        initialValues: {
-          hostSpecificInputName: initialValue,
-        },
-      }}
-      breadcrumbs={[
-        {
-          link: "/",
-          text: "Home",
-        },
-        {
-          link: "/",
-          text: "Settings",
-        },
-      ]}
-    />;
-    ```
+   ```jsx
+   import { FieldsDashboard } from "@bigbinary/neeto-fields-frontend";
+
+   <FieldsDashboard
+     allowedKinds={["text", "number"]}
+     buildColumnData={({ defaultColumns }) => [
+       ...defaultColumns,
+       {
+         dataIndex: "isSystem",
+         index: "isSystem",
+         title: t("titles.systemField"),
+         render: boolVal => (boolVal ? "Yes" : "No"),
+       },
+     ]}
+     fieldStatesTaxonomy={{ active: "Active", inactive: "Deactivated" }}
+     paneProps={{
+       children: <HostSpecificInputFields />,
+       validations: {
+         hostSpecificInputName: validationSchema,
+       },
+       initialValues: {
+         hostSpecificInputName: initialValue,
+       },
+     }}
+     breadcrumbs={[
+       {
+         link: "/",
+         text: "Home",
+       },
+       {
+         link: "/",
+         text: "Settings",
+       },
+     ]}
+   />;
+   ```
+
+   #### Usage in [neetoDesk](https://github.com/bigbinary/neeto-desk-web/blob/34068bb579335d3eb6041279f6f3f660099d7f1c/app/javascript/src/components/TicketFields/List/index.jsx#L119C8-L130C11)
+
+2. When `Organization` is not owner of the fields. Let's say the owner is
+   `Project`.
+
+   ```jsx
+   import { FieldsDashboard } from "@bigbinary/neeto-fields-frontend";
+
+   <FieldsDashboard
+     allowedKinds={["text", "number"]}
+     resourceType="tasks"
+     showOwnersInMenu
+     fieldStatesTaxonomy={{ active: "Active", inactive: "Deactivated" }}
+     paneProps={{
+       children: <HostSpecificInputFields />,
+       validations: {
+         hostSpecificInputName: validationSchema,
+       },
+       initialValues: {
+         hostSpecificInputName: initialValue,
+       },
+     }}
+     breadcrumbs={[
+       {
+         link: "/",
+         text: "Home",
+       },
+       {
+         link: "/",
+         text: "Settings",
+       },
+     ]}
+   />;
+   ```
 
    #### Usage in [neetoForm](https://github.com/bigbinary/neeto-form-web/blob/1ae06a0f49f62b20ced313c1672fb336553b867c/app/javascript/src/components/Form/Settings/Fields.jsx#L35C7-L47C9)
 
-
 #### 2. `FieldsPane`
 
 <div align="center">
@@ -281,24 +292,24 @@ The `FieldsPane` component handles the `Add / Edit` operations of the field.
 
 #### Usage
 
-  ```jsx
-  import { FieldsPane } from "@biginary/neeto-fields-frontend";
-
-  const [fieldPaneOpen, setFieldPaneOpen] = useState(false);
-
-  <FieldsPane
-    isOpen={fieldPaneOpen}
-    allowedKinds={["text", "number"]}
-    resourceType="users"
-    additionalValidations={{
-      hostSpecificInputName: validationSchema,
-    }}
-    initialValues={{ hostSpecificInputName: initialValue }}
-    onClose={() => setFieldPaneOpen(false)}
-  >
-    <HostSpecificInputFields />
-  </FieldsPane>;
-  ```
+```jsx
+import { FieldsPane } from "@biginary/neeto-fields-frontend";
+
+const [fieldPaneOpen, setFieldPaneOpen] = useState(false);
+
+<FieldsPane
+  isOpen={fieldPaneOpen}
+  allowedKinds={["text", "number"]}
+  resourceType="users"
+  additionalValidations={{
+    hostSpecificInputName: validationSchema,
+  }}
+  initialValues={{ hostSpecificInputName: initialValue }}
+  onClose={() => setFieldPaneOpen(false)}
+>
+  <HostSpecificInputFields />
+</FieldsPane>;
+```
 
 ## 3. `FieldValuesContainer`
 
@@ -405,8 +416,8 @@ The `FieldInputs` component render the input UI for the fetched fields.
 > [`mergeInitialValues`](#1-neetofieldsutilsmergeinitialvalues) function.
 >
 > To submit the values from this formik form, you need to use
-> [`transformValues`](#2-neetofieldsutilstransformvalues) function to capture the right
-> data from neeto-fields.
+> [`transformValues`](#2-neetofieldsutilstransformvalues) function to capture
+> the right data from neeto-fields.
 
 #### Usage
 
@@ -496,7 +507,8 @@ const buildColumnDataForFields = (fields, onFieldValueUpdateSuccess) =>
   <img src="https://github.com/bigbinary/neeto-fields-nano/assets/35305344/6518b206-58f3-4375-bc68-7134ad68c168" alt="Field delete alert" width="500"/>
 </div>
 
-The `FieldDeleteAlert` component handles delete operation on fields. It accepts the following props:
+The `FieldDeleteAlert` component handles delete operation on fields. It accepts
+the following props:
 
 #### Props
 
@@ -505,8 +517,10 @@ The `FieldDeleteAlert` component handles delete operation on fields. It accepts
 3. `resourceTypeName`: The type of resource.
 4. `isDeleteAlertOpen`: Boolean state which specifies whether the alert is open.
 5. `isDeleting`: Boolean state indicating whether the field is being deleted.
-6. `handleDelete`: The callback function responsible for deleting the specified field.
-7. `handleAlertClose`: The callback function to be executed on closing the alert.
+6. `handleDelete`: The callback function responsible for deleting the specified
+   field.
+7. `handleAlertClose`: The callback function to be executed on closing the
+   alert.
 
 #### Usage
 
@@ -672,16 +686,18 @@ organization._
 
 ## Instructions for Publishing
 
-Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.
+Consult the
+[building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages)
+guide for details on how to publish.
 
 ## Integrations
 
-| Projects      |     Integrated     |
-| ------------- | :----------------: |
-| neetoForm     | :white_check_mark: |
-| neetoDesk     | :white_check_mark: |
-| neetoPlanner  | :white_check_mark: |
-| neetoCrm      | :white_check_mark: |
-| neetoChat     | :white_check_mark: |
-| neetoCal      | :white_check_mark: |
-| neetoTestify  | :white_check_mark: |
+| Projects     |     Integrated     |
+| ------------ | :----------------: |
+| neetoForm    | :white_check_mark: |
+| neetoDesk    | :white_check_mark: |
+| neetoPlanner | :white_check_mark: |
+| neetoCrm     | :white_check_mark: |
+| neetoChat    | :white_check_mark: |
+| neetoCal     | :white_check_mark: |
+| neetoTestify | :white_check_mark: |

package/dist/index.cjs.js

@@ -2520,7 +2520,7 @@ var buildDefaultColumns = function buildDefaultColumns(_ref2) {
     key: "name",
     dataIndex: "name",
     title: i18next.t("neetoFields.titles.fieldName"),
-    width: "300px",
+    width: 300,
     render: function render(name, field) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "flex items-center justify-between gap-x-3"
@@ -2548,12 +2548,12 @@ var buildDefaultColumns = function buildDefaultColumns(_ref2) {
     render: function render(kind) {
       return DISPLAY_KINDS[kind];
     },
-    width: "300px"
+    width: 180
   }, {
     key: "isRequired",
     dataIndex: "isRequired",
     title: i18next.t("neetoFields.titles.required"),
-    width: "300px",
+    width: 140,
     render: function render(boolVal) {
       return boolVal ? i18next.t("neetoFields.common.yes") : i18next.t("neetoFields.common.no");
     }
@@ -3072,14 +3072,17 @@ var Header = reactUtils.withT(function (_ref) {
     actionBlock: /*#__PURE__*/React__default["default"].createElement(ActionBlock, actionBlockProps),
     searchProps: searchInputProps,
     size: "small",
-    title: /*#__PURE__*/React__default["default"].createElement("span", null, title, /*#__PURE__*/React__default["default"].createElement(HelpPopover__default["default"], {
-      title: title,
-      className: "ml-2 self-center",
-      description: helpDescription,
+    title: /*#__PURE__*/React__default["default"].createElement("span", null, title, (helpDocUrl || helpDescription) && /*#__PURE__*/React__default["default"].createElement(HelpPopover__default["default"], _extends({
+      className: "ml-2 self-center"
+    }, helpDocUrl && {
+      title: title
+    }, helpDescription && {
+      description: helpDescription
+    }, helpDocUrl && {
       helpLinkProps: {
         href: helpDocUrl
       }
-    }))
+    })))
   });
 });