nuanceui

Nuance UI Framework Documentation

Welcome to the documentation for the Nuance UI Framework! This framework provides a set of React components for building user interfaces with a consistent and stylish look. Below is a detailed guide on how to use various components included in the Nuance UI Framework.

Installation

npm install nuanceui

Table of Contents

1. Spinner
2. Toast
3. Dropdown Menu
4. Date Time Picker
5. Data Grid
6. Dialog
7. Button
8. TextField
9. Radio & Checkbox

Usage

1. Spinner

import { NSpinner } from "./NuanceUI";

<NSpinner />;

The NSpinner component displays a spinner while content is loading.

2. Toast

import { NButton, NToast } from "./NuanceUI";

const App = () => {
  const [isToastVisible, setToastVisible] = useState(false);

  const showToast = () => {
    setToastVisible(true);
    setTimeout(() => {
      setToastVisible(false);
    }, 3000);
  };

  return (
    <div>
      <h2>Toast</h2>
      <NButton onClick={showToast}>Show Toast</NButton>
      {isToastVisible && <NToast message="This is a toast message!" />}
    </div>
  );
};

The NToast component displays a toast message with a customizable duration.

3. Dropdown Menu

import { NDropdownMenu } from "./NuanceUI";

const App = () => {
  const [selectedOption, setSelectedOption] =
    (useState < string) | (null > null);
  const options = ["Option 1", "Option 2"];

  const handleSelectionChange = (newSelectedOption: string | null) => {
    setSelectedOption(newSelectedOption);
  };

  return (
    <div>
      <h2>Dropdown Menu</h2>
      <NDropdownMenu
        options={options}
        selectedOption={selectedOption}
        onSelectionChange={handleSelectionChange}
      />
      <p>Selected Option: {selectedOption || "None"}</p>
    </div>
  );
};

The NDropdownMenu component provides a dropdown menu with customizable options.

4. Date Time Picker

import { NDatePicker } from "./NuanceUI";

const App = () => {
  const [selectedDate, setSelectedDate] = (useState < Date) | (null > null);

  const handleDateChange = (date: Date) => {
    setSelectedDate(date);
  };

  return (
    <div>
      <h2>Date Time Picker</h2>
      <NDatePicker onDateChange={handleDateChange} />
      <p>
        Selected Date: {selectedDate ? selectedDate.toDateString() : "None"}
      </p>
    </div>
  );
};

The NDatePicker component allows users to select a date from a calendar.

5. Data Grid

import { NDataGrid } from "./NuanceUI";

const App = () => {
  const columns = [
    { field: "OrderID", width: "100px", textAlign: "center" },
    // ... additional columns
  ];

  const customerData = [
    {
      OrderID: 10248,
      CustomerID: "VINET",
      EmployeeID: 5,
      Freight: 32.38,
      ShipCountry: "Germany",
      OrderDate: "1996-07-04T00:00:00.000Z",
      Discount: 0.15,
    },
    // ... additional rows
  ];

  return (
    <div>
      <h2>Data Grid</h2>
      <NDataGrid dataSource={customerData} columns={columns} itemsPerPage={4} />
    </div>
  );
};

The NDataGrid component displays tabular data with customizable columns.

6. Dialog

import { NButton, NDialogBox } from "./NuanceUI";

const App = () => {
  const [isDialogOpen, setIsDialogOpen] = useState(false);

  const openDialog = () => {
    setIsDialogOpen(true);
  };

  const closeDialog = () => {
    setIsDialogOpen(false);
  };

  return (
    <div>
      <h2>Dialog</h2>
      <NButton onClick={openDialog}>Open Dialog</NButton>
      <NDialogBox
        isOpen={isDialogOpen}
        onClose={closeDialog}
        title="Sample Dialog"
      >
        This is the content of the dialog box.
      </NDialogBox>
    </div>
  );
};

The NDialogBox component creates a customizable dialog box.

7. Button

import { NButton, NFlexGroup, NFlexItem } from "./NuanceUI";

const App = () => {
  const handleClick = () => {
    throw new Error("Function not implemented.");
  };

  return (
    <div>
      <h2>Button</h2>
      <NFlexGroup justify="space-between">
        <NFlexItem>
          <NButton onClick={handleClick} color="primary">
            Primary
          </NButton>
        </NFlexItem>
        {/* ... additional buttons */}
      </NFlexGroup>
    </div>
  );
};

The NButton component creates a customizable button with various color options.

8. TextField

import { NTextField } from "./NuanceUI";

const App = () => {
  const [email, setEmail] = useState("");

  const handleOnChange = (event: any) => {
    setEmail(event.target.value);
  };

  return (
    <div>
      <h2>TextField</h2>
      <NTextField
        id="myTextField"
        value={email}
        onChange={handleOnChange}
        placeholder="Enter your name"
      />
      {/* ... additional text fields */}
    </div>
  );
};

The NTextField component creates a customizable text input field.

9. Radio & Checkbox

import { NRadioButton, NCheckBox } from "./NuanceUI";

const App = () => {
  const [isChecked, setIsChecked] = useState(false);
  const [selectedOption, setSelectedOption] =
    (useState < string) | (null > null);

  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setIsChecked(event.target.checked);
  };

  const handleRadioChange = (value: string) => {
    setSelectedOption(value);
  };

  return (
    <div>
      <h2>Radio & Checkbox</h2>
      <NRadioButton
        label="Option 1"
        value="option1"
        checked={selectedOption === "option1"}
        onChange={handleRadioChange}
      />
      <NRadioButton
        label="Option 2"
        value="option2"
        checked={selectedOption === "option2"}
        onChange={handleRadioChange}
      />
      <p>Selected Option: {selectedOption}</p>
      <NCheckBox
        id="checkbox1"
        checked={isChecked}
        onChange={handleCheckboxChange}
        label="Check me"
      />
    </div>
  );
};

The NRadioButton and NCheckBox components create customizable radio buttons and checkboxes, respectively.