finalreact.txt

#--

React Story Book Content for the same can be found below with its respective decriptions : 

Description:

The following is the example for Input, which can be for either Textfields or TextArea, these will be used for taking input of different types : 

TextField  is : 

  <Input
    data-testid="input-test-id"
    helperText="It must contain a minimum of 8 characters and include at least 1 small case letter, 1 capital letter, and 1 special character."
    label="Label"
    placeholder="Placeholder"
    type="text"
  />


TextArea is : 


  <Input
    data-testid="input-test-id"
    label="Label"
    type="textarea"
  />

These are replacements for natural <input> box normaly used in react, but are defined for nitrozen., 

The arguments for the above are as follows with thier descriptions  : 
In the below ignore the word control, type is used to tell teh type of argument, action tell when it happens and options tell different set of input that can be provieded to it, 


1. autoComplete: This field controls whether browsers should automatically complete the input value based on the user's input history.
2. type: This is the type of input field the box will render as, e.g., email, password, number, etc.
3. label: This is the label text that appears above or beside the input box.
4. placeholder: This is the placeholder text that appears within the input box when it is empty.
5. disabled: This field controls whether the input field is disabled or not.
6. required: This field controls whether the input field is required to be filled out.
7. value: This is the current value of the input box.
8. showSearchIcon: This field controls whether a search icon will appear within the input box.
9. id: This is the unique identifier of the input box.
10. showPrefix: This field controls whether a prefix element is displayed on the input box.
11. showSuffix: This field controls whether a suffix element is displayed on the input box.
12. autofocus: This field controls whether the input box is automatically focused when the component is loaded.
13. min: This field sets the minimum value for number and date inputs.
14. max: This field sets the maximum value for number and date inputs.
15. stateText: This field sets additional state information that appears under the input box, e.g., validation errors.
16. maxLength: This field sets the maximum number of characters allowed in the input box.
17. tooltipText: This field sets the text that appears in a tooltip when the input box is hovered over.
18. showTooltip: This field controls whether the tooltip is displayed or not.
19. onKeyUp/onKeyPress/onChange/onBlur/onFocus/onClick/onPrefixClick/onSuffixClick: These fields define what happens when these events occur.
20. state: This field sets the state of the input box, e.g., default, error, success, warning.
21. suffix: This field defines an element to be placed on the right side of the input box, ideally an icon. This element is clickable.
22. prefix: This field defines an element to be placed on the left side of the input box, ideally an icon. This element is clickable.


Different Types that it allows are as follow : 

The "options" field in this JSON represents the different values that can be selected for the input type of the React component. Here's the meaning of each option value and some sample use cases:

* "email": This option value is used when the input should only accept valid email addresses. Sample use case: A sign-up form where the user needs to provide their email address.
* "month": This option value is used when the input should only accept a month in the format YYYY-MM. Sample use case: A form where the user needs to select their birth month.
* "number": This option value is used when the input should only accept numeric values. Sample use case: A form where the user needs to enter their age.
* "password": This option value is used when the input should obscure the entered text (e.g. with asterisks) for security reasons. Sample use case: A login form where the user needs to enter their password.
* "tel": This option value is used when the input should only accept valid telephone numbers. Sample use case: A form where the user needs to provide their phone number.
* "text": This option value is used when the input should accept any text. Sample use case: A form where the user needs to provide their name.
* "textarea": This option value is used when the input should accept multiple lines of text. Sample use case: A feedback form where the user needs to provide detailed comments.
* "week": This option value is used when the input should only accept a week in the format YYYY-W## (where ## is the week number). Sample use case: A form where the user needs to select the week of a year for a project.
* "date": This option value is used when the input should only accept a date in the format YYYY-MM-DD. Sample use case: A form where the user needs to enter their birthdate.
* "datetime-local": This option value is used when the input should only accept a date and time in the format YYYY-MM-DDTHH:MM. Sample use case: A form where the user needs to schedule an appointment.
* "month": This option value is used when the input should only accept a month in the format YYYY-MM. Sample use case: A form where the user needs to select the month for a subscription renewal.

#--

Description:

The following is the example for Table, which can be used to display  data in tabular format 

* it can be used instead of <table> html when working on a nitrozen compliant product. 

Sample Table Code :

Where tableHeader is array of headers and tableRow is array of rows that needs to be displayes
In the following name in tableHeader should match with key in the tableRows 


  <Table
    onRowClick={() => {}}
    rowStyle="simple"
    showColumnDivider
    tableHeader={[
      {
        customSort: function noRefCheck() {},
        name: 'firstName',
        sortable: true,
        value: 'First name',
        width: '50%'
      },
      {
        name: 'lastName',
        sortable: false,
        value: 'Last name',
        width: '20%'
      },
      {
        customSort: function noRefCheck() {},
        name: 'age',
        sortable: true,
        type: 'number',
        value: 'Age',
        width: '100px'
      }
    ]}
    tableRow={[
      {
        age: 45,
        firstName: 'John',
        lastName: 'Yang'
      },
      
    ]}
  />

The arguments are as follows :-  


1. The tableRow field is an array of objects, each object representing a row in the table. Each row has an age, firstName, and lastName field.
2. The tableHeader field is an array of objects representing the table header. Each header object has a name, value, and width field, and optionally a customSort and sortable field.
3. The footer field is a text string for the table footer.
4. The rowStyle field is a dropdown with two options - "simple" and "zebra" - for styling the rows.
5. The onRowClick field is a function that is called when a row is clicked, with the row index as an argument.
6. The headerBackground field is a color picker for setting the background color of the table header.
7. The customSortIcon field is an element - ideally an icon - to be placed on the left side of the header, which can be clickable if onIconClick is defined.
8. The checkable field is a boolean value, indicating whether or not the rows can be selected.
9. The showColumnDivider field is a boolean value, indicating whether or not to show dividers between columns.


We can also make these tables checkable by doing the following :- 


      <Table
        {...args}
        checkable={true}
        getCheckedItems={getCheckedItems}
        allCheckClicked={allCheckClicked}
        tableRow={rowItem}
        onRowClick={onRowClick}
      />


Here is the sample code for implementing select all 



  // Function to select all items in the table
  const handleSelectAll = (isChecked) => {
    if (isChecked) {
      const newSelectedItems = [...tableData];
      setSelectedItems(newSelectedItems);
    } else {
      setSelectedItems([]);
    }
  };


It also has the feature to implement sorting this can be done as follows :- 


1. Define a sort icon using customSortIcon
2. In table header select the column by setting the customSort function which does the sorting for you. 
3. Sample of sortFunction is as follows : 

  const sortNames = () => {
    let tempItemsArr = [...rowItem];
    tempItemsArr = tempItemsArr.sort((a, b) =>
      a.firstName.localeCompare(b.firstName)
    );
    setRowItem(tempItemsArr);
  };

  <Table
    customSortIcon={<SvgIcSort color="white" />}
    rowStyle="simple"
    showColumnDivider
    tableHeader={[
      {
        customSort: function noRefCheck() {},
        name: 'firstName',
        sortable: true,
        value: 'First name',
        width: '50%'
      },
      {
        name: 'lastName',
        sortable: false,
        value: 'Last name',
        width: '20%'
      },
      {
        name: 'age',
        type: 'number',
        value: 'Age',
        width: '100px'
      }
    ]}
    tableRow={[
      {
        age: 45,
        firstName: 'John',
        lastName: 'Yang'
      },
      {
        age: 16,
        firstName: 'Robert',
        lastName: 'Peterson'
      },
      {
        age: 45,
        firstName: 'Dana',
        lastName: 'Culley'
      },
     
    ]}
  />

#--

Pagination

Description : 

The following is the example for the component which can be used to paginate on something, 

* Ideal Implementation for this would be to do pagination of Table component mentioned in Nitozen 

Sample Code : 


    <Pagination
      id="1"
      name="Pages"
      onChange={() => {}}
      onNextClick={function noRefCheck() {}}
      onPreviousClick={function noRefCheck() {}}
      pageSizeOptions={[
        10,
        20,
        50,
        100
      ]}
      value={{
        current: '[Circular]',
        currentPage: '',
        currentTotal: 100,
        limit: 10,
        nextPage: '',
        prevPage: '',
        total: 100
      }}
    />

There are two types of pagination : 


1. Basic : which works on page based pagination 
2. Secondary : which work on offset based pagination 


Arguments for each are as follows :- 

Basic  : 

id: A unique identifier for the pagination component. It can be used for styling or for referencing the component in the code.
name: A label for the pagination component. It indicates what the pagination is for and can be used for accessibility purposes.
value: An object containing information about the pagination, including:

    * limit: The maximum number of items to display per page.
    * total: The total number of items available for pagination.
    * current: The current page number.
    * prevPage: The URL of the previous page, if applicable.
    * nextPage: The URL of the next page, if applicable.
    * currentPage: The URL of the current page, if applicable.
    * currentTotal: The total number of items on the current page.

pageSizeOptions: An array of options for the number of items to display per page. It can be used to allow the user to select the number of items to display.
onChange: A callback function that is called when the user changes the pagination. It can be used to update the page number or other pagination information.
onPreviousClick: A callback function that is called when the user clicks the "Previous" button. It can be used to navigate to the previous page.
onNextClick: A callback function that is called when the user clicks the "Next" button. It can be used to navigate to the next page.

For cursor-based pagination, there is an additional property:

* mode: A value indicating that the pagination is using cursor-based pagination.

In cursor-based pagination, the value property contains additional properties related to the cursor:

* prevPage: A cursor that can be used to retrieve the previous page of data.
* nextPage: A cursor that can be used to retrieve the next page of data.
* currentPage: The current cursor used to retrieve the current page of data.
* currentTotal: The total number of items in the current cursor.


Here is a  samples : 

Secondary : 


    <Pagination
      id="1"
      mode="cursor"
      name="Pages"
      onChange={() => {}}
      onNextClick={function noRefCheck() {}}
      onPreviousClick={function noRefCheck() {}}
      pageSizeOptions={[
        10,
        20
      ]}
      value={{
        current: '[Circular]',
        currentPage: '',
        currentTotal: 100,
        limit: 10,
        nextPage: '',
        prevPage: '',
        total: 100
      }}
    />

Note you can optimise this code as well :- 


import React, { useState, useEffect } from "react";
import { Table, Autocomplete, Pagination } from "@gofynd/nitrozen-react";
import "./paginationTable.css";
function PaginatedTable({ columns, getData, converRow }) {
    if (!converRow) {
        converRow = (row) => {
            return row;
        };
    }
    const [tableData, setTableData] = useState([]);
    const [pageOptions, setPageOptions] = useState({
        "limit": 10,
        "total": 20,
        "current": 1,
        "prevPage": "",
        "nextPage": "",
        "currentPage": "",
        "currentTotal": 20,
    });

    const fetchData = async (e) => {
        var query = "";
        if (e && e.current && e.limit) {
            query = query + "page=" + e.current + "&limit=" + e.limit;
        }
        const response = await fetchFunction(query);
        const flattenData = response.data.items.map(converRow);
        pageOptions.total = response.data.page.item_total;
        pageOptions.currentTotal = response.data.page.size;
        setPageOptions(pageOptions);
        setTableData(flattenData);
        console.log("Setting current total to: ", response.data.page.item_total);
    };

    useEffect(() => {
        fetchData();
    }, [pageOptions]);

    return (
        <div>
            <Table
                className="table"
                checkable
                showColumnDivider={false}
                onRowClick={() => {}}
                rowStyle="simple"
                tableHeader={columns}
                tableRow={tableData}
            />
            <Pagination
                id="1"
                name="Pages"
                pageSizeOptions={[10, 20, 50, 100]}
                value={pageOptions}
                onChange={(e) => {
                    fetchData(e);
                }}
            />
        </div>
    );
}

export default PaginatedTable;

#--
Checkbox

Description:

The following is the example for checkbox, which can be used to allow selection of one or more options from a list of choices.  

* it can be used instead of <checkbox> html when working on a nitrozen compliant product. 

Sample checkbox Code :



  <Checkbox
    checkArray={[
      'Vue1'
    ]}
    checkboxValue="React"
    icon={() => {}}
    id="React1"
    labelText="React"
    name="basic1"
    onChange={function noRefCheck() {}}
    onIconClick={function noRefCheck() {}}
    showIcon
    state="success"
    stateMessage="Success"
    value="React1"
  />
  <Checkbox
    checkArray={[
      'Vue1'
    ]}
    checkboxValue="Angular1"
    icon={function noRefCheck() {}}
    id="Angular1"
    labelText="Angular"
    name="basic"
    onChange={function noRefCheck() {}}
    onIconClick={function noRefCheck() {}}
    showIcon
    state="warning"
    stateMessage="Warning"
    value="Angular1"
  />
  <Checkbox
    checkArray={[
      'Vue1'
    ]}
    checkboxValue="Vue1"
    disabled
    icon={function noRefCheck() {}}
    id="Vue1"
    labelText="Vue"
    onChange={function noRefCheck() {}}
    onIconClick={function noRefCheck() {}}
    showIcon
    state="error"
    stateMessage="Error"
    value="Vue1"
  />

The arguments are as follows :-  


1. disabled: A boolean field that specifies whether the checkbox is disabled or not. If set to true, the checkbox will be grayed out and the user will not be able to interact with it.
2. value: A text field that represents the value of the checkbox. This can be any string or text that you want to associate with the checkbox.
3. name: A text field that specifies the name of the checkbox. This can be used to group the checkbox with other elements in a form.
4. state: A select field that represents the validation state of the checkbox. The options are "success", "warning", and "error". This can be used to provide visual feedback to the user regarding the state of the checkbox.
5. stateMessage: A text field that provides a message to the user regarding the state of the checkbox. This can be used to provide additional context or information to the user.
6. checkboxValue: A boolean field that specifies the value of the checkbox. If set to true, the checkbox will be checked.
7. id: A text field that specifies the id of the checkbox. This can be used to associate the checkbox with other elements in a form.
8. onChange: An action field that specifies the function to be called when the checkbox is clicked or changed.
9. onIconClick: A function field that specifies the function to be called when the icon on the left of the checkbox is clicked.
10. style: An object field that specifies the CSS style of the checkbox.
11. labelStyle: An object field that specifies the CSS style of the label associated with the checkbox.
12. className: A text field that specifies the class name of the checkbox.
13. labelText: A text field that specifies the text of the label associated with the checkbox.
14. showIcon: A boolean field that specifies whether to show the icon on the left of the checkbox.
15. icon: An array of SVG elements that can be used as an icon on the left of the checkbox.
16. isIndeterminate: A boolean field that specifies whether the checkbox is in an indeterminate state. This is often used when dealing with tri-state checkboxes that can be checked, unchecked, or in an indeterminate state.

#--
Radiobutton

Description: 
The following is the example for radiobutton which is a UI element that allows users to select one option from a list of mutually exclusive choices.

Sample radiobutton code: 


<Radio
    icon={() => {}}
    id="girl"
    labelText="Girl"
    name="basic"
    onChange={function noRefCheck() {}}
    onIconClick={function noRefCheck() {}}
    radioValue="girl"
    showIcon
    value="girl"
  />
  <Radio
    icon={function noRefCheck() {}}
    id="boy"
    labelText="Boy"
    name="basic"
    onChange={function noRefCheck() {}}
    onIconClick={function noRefCheck() {}}
    radioValue="girl"
    showIcon
    value="boy"
  />
  <Radio
    id="other"
    labelText="Other"
    name="basic"
    onChange={function noRefCheck() {}}
    radioValue="girl"
    value="other"
  />

The arguments are as follows :-  


1. disabled: A boolean field that specifies whether the radio button is disabled or not. If set to true, the radio button will be grayed out and the user will not be able to interact with it.
2. name: A text field that specifies the name of the radio button. This can be used to group the radio button with other elements in a form.
3. labelText: A text field that specifies the text of the label associated with the radio button.
4. value: A text field that represents the value of the radio button. This can be any string or text that you want to associate with the radio button.
5. radioValue: A text field that represents the value of the selected radio button in a group. This is used to differentiate between the selected radio buttons when multiple radio buttons are grouped together.
6. id: A text field that specifies the id of the radio button. This can be used to associate the radio button with other elements in a form.
7. onChange: An action field that specifies the function to be called when the radio button is clicked or changed.
8. state: A select field that represents the validation state of the radio button. The options are "success", "warning", and "error". This can be used to provide visual feedback to the user regarding the state of the radio button.
9. stateMessage: A text field that provides a message to the user regarding the state of the radio button. This can be used to provide additional context or information to the user.
10. onIconClick: A function field that specifies the function to be called when the icon on the left of the radio button is clicked.
11. showIcon: A boolean field that specifies whether to show the icon on the left of the radio button.
12. icon: An array of SVG elements that can be used as an icon on the left of the radio button.

#--

Button

Description: 
The following is the example for button which is a graphical user interface element that can be clicked or tapped to perform an action or trigger a process.

Sample button code: 


<Button onClick={() => {}}>
    Button
  </Button>

There are multiple variations of buttons as mentioned below along with sample code:


All Themes 

The size of the button can be defined as small, medium and large. This can be done by setting the themes as primary, secondary and tertiary. Below is the code snippet:


 <div className="sb-display-grid">
      <Button theme="primary" size="small">
        Button
      </Button>
      <Button theme="primary" size="medium">
        Button
      </Button>
      <Button theme="primary" size="large">
        Button
      </Button>
    </div>
    <div className="sb-display-grid">
      <Button theme="secondary" size="small">
        Button
      </Button>
      <Button theme="secondary" size="medium">
        Button
      </Button>
      <Button theme="secondary" size="large">
        Button
      </Button>
    </div>
    <div className="sb-display-grid">
      <Button theme="tertiary" size="small">
        Button
      </Button>
      <Button theme="tertiary" size="medium">
        Button
      </Button>
      <Button theme="tertiary" size="large">
        Button
      </Button>
    </div>



Button With Icon Left

A button with an icon on the left is a graphical user interface element that displays an icon on the left side of the button, typically used to visually represent the action or process triggered by the button. Below is the code snippet:


    <div className="sb-display-grid">
      <Button theme="primary" size="small" icon={SvgArray.SvgIcAlarmOff}>
        Button
      </Button>
      <Button theme="primary" size="medium" icon={SvgArray.SvgIcAlarmOff}>
        Button
      </Button>
      <Button theme="primary" size="large" icon={SvgArray.SvgIcAlarmOff}>
        Button
      </Button>
    </div>
    <div className="sb-display-grid">
      <Button theme="secondary" size="small" icon={SvgArray.SvgIcAlarmOff}>
        Button
      </Button>
      <Button theme="secondary" size="medium" icon={SvgArray.SvgIcAlarmOff}>
        Button
      </Button>
      <Button theme="secondary" size="large" icon={SvgArray.SvgIcAlarmOff}>
        Button
      </Button>
    </div>
    <div className="sb-display-grid">
      <Button theme="tertiary" size="small" icon={SvgArray.SvgIcAlarmOff}>
        Button
      </Button>
      <Button theme="tertiary" size="medium" icon={SvgArray.SvgIcAlarmOff}>
        Button
      </Button>
      <Button theme="tertiary" size="large" icon={SvgArray.SvgIcAlarmOff}>
        Button
      </Button>
    </div>

All Themes With Positive State

A button with a positive state is a graphical user interface element that displays a button in a style that indicates a positive or successful state, typically used to confirm or complete an action. Below is the code snippet:


<div className="sb-display-grid">
      <Button theme="primary" size="small" state="positive">
        Button
      </Button>
      <Button theme="primary" size="medium" state="positive">
        Button
      </Button>
      <Button theme="primary" size="large" state="positive">
        Button
      </Button>
    </div>
    <div className="sb-display-grid">
      <Button theme="secondary" size="small" state="positive">
        Button
      </Button>
      <Button theme="secondary" size="medium" state="positive">
        Button
      </Button>
      <Button theme="secondary" size="large" state="positive">
        Button
      </Button>
    </div>
    <div className="sb-display-grid">
      <Button theme="tertiary" size="small" state="positive">
        Button
      </Button>
      <Button theme="tertiary" size="medium" state="positive">
        Button
      </Button>
      <Button theme="tertiary" size="large" state="positive">
        Button
      </Button>
    </div>

The arguments for button are as follows: 


1. children: This property sets the display value or label of the button.
2. theme: This property sets the visual theme of the button. It has three options: primary, secondary, and tertiary.
3. as: This property determines whether the root element should be a <button>, <div>, or <span>.
4. size: This property sets the size of the button. It has three options: small, medium, and large.
5. rounded: This property sets the border radius of the button. If true, the button has rounded corners.
6. href: This property converts the button into an anchor tag with the specified URL, which is useful for redirection.
7. disabled: This property enables or disables the button. If true, the button is disabled and cannot be clicked.
8. focused: This property sets focus on the button. If true, the button is focused.
9. state: This property changes the button to a custom state. It has three options: positive, destructive, and default.
10. showProgress: This property adds a loader to the button, indicating that it is processing a request or action.
11. fullWidth: This property determines whether the button should take up the full width of its container.
12. id: This property sets a unique identifier for the button.
13. name: This property sets a name for the button.
14. icon: This property displays an icon on the left side of the button.
15. iconRight: This property displays an icon on the right side of the button.