@bigbinary/neetoui 2.0.46 → 2.0.50

package/stories/Iconography.stories.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import * as iconset from "@bigbinary/neeto-icons";
+
+export default {
+  title: "Foundation/Iconography",
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: '`import { ClockIcon } from "@bigbinary/neeto-icons";` <br><br> Anywhere in your React file <br><br> `<ClockIcon color="#1e1e20" size={24} />`',
+      }
+    }
+  },
+};
+
+export const Iconography = () => {
+  return (
+    <div className="p-4">
+      <p className="mb-4">
+        <a
+          href="https://github.com/bigbinary/neeto-icons"
+          target="_blank"
+          rel="noreferrer"
+          className="flex items-center space-x-0.5 text-sm font-medium text-gray-600 hover:text-gray-900 mr-8"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+          >
+            <path fill="none" d="M0 0h24v24H0z"></path>
+            <path
+              fill="currentColor"
+              d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0022 12c0-5.525-4.475-10-10-10z"
+            ></path>
+          </svg>
+          <span>Source</span>
+        </a>
+      </p>
+      <div className="grid grid-cols-4 lg:grid-cols-8 gap-3">
+        {iconset.iconList.map((icon) => {
+          const Component = iconset[icon];
+          return (
+            <div
+              key={icon}
+              className="flex items-center justify-center p-5 bg-gray-50 hover:bg-gray-100 rounded-lg flex-col cursor-pointer transition-colors"
+            >
+              <Component />
+              <div className="mt-2 text-xs">{icon}</div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/stories/Introduction.stories.mdx

@@ -0,0 +1,100 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Introduction" />
+
+<style>{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 2px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #2f3941;
+    color: #fff;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+
+  
+`}</style>
+
+# What is NeetoUI?
+
+NeetoUI is the library that drives the experience in all Neeto products built at BigBinary
+
+<div className="subheading">Installation</div>
+
+To install NeetoUI via yarn, use this command.
+
+```
+yarn add @bigbinary/neetoui
+```
+
+For other installation methods, refer our [**official npm page**](https://www.npmjs.com/package/@bigbinary/neetoui)
+
+<div className="tip-wrapper">
+  <span className="tip">To use NeetoUI, you need a recent version of React.js installed (version 16.13.1+ recommended)</span>
+</div>
+
+<div className="subheading">Basic Usage</div>
+
+##### Importing
+
+NeetoUI exports all it’s component as named exports. You can individually import necessary components in the following way:
+
+```
+import { Button, Tooltip, } from "@bigbinary/neetoui";
+```
+
+If you need access to an object that contains references to all the components you can do a wildcard import. This way, you can render dynamic components from NeetoUI.
+
+```
+import React from "react";
+import * as NeetoUI from "@bigbinary/neetoui";
+
+export default function index() {
+  const Button = NeetoUI.Button;
+
+  // get a random component
+  const componentName = Math.random() > 0.5 ? "Badge" : "Avatar";
+  const MyDynamicComponent = NeetoUI[componentName];
+
+  return (
+    <div>
+      <Button />
+      <MyDynamicComponent />
+    </div>
+  );
+}
+```
+
+#### Acceptable props for Components
+
+Refer documentation of each component for a detailed list of available props and their usage.
+
+

package/stories/Layouts.stories.jsx

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from "react";
+import { MenuHorizontal } from "@bigbinary/neeto-icons";
+
+import {
+  Header,
+  SubHeader,
+  Container,
+  Scrollable,
+} from "../lib/components/layouts";
+import {
+  Button,
+  PageLoader,
+  Pagination,
+  Checkbox,
+  Dropdown,
+} from "../lib/components";
+
+export default {
+  title: "Layouts/Page",
+};
+
+export const Page = () => {
+  const [searchString, setSearchString] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 2000);
+  }, []);
+
+  return (
+    <Container>
+      <Header title="Layouts" actionBlock={<Button label="Primary Action" />} />
+      <SubHeader
+        searchProps={{
+          value: searchString,
+          onChange: (e) => setSearchString(e.target.value),
+        }}
+        deleteButtonProps={{
+          count: 0,
+          selectedIDs: [],
+          onClick: () => {},
+        }}
+        disableButtonProps={{
+          count: 0,
+          selectedIDs: [],
+          onClick: () => {},
+        }}
+      />
+      <Scrollable className="w-full">
+        {isLoading ? (
+          <PageLoader />
+        ) : (
+          <table className={`nui-table nui-table--checkbox nui-table--actions`}>
+            <thead>
+              <tr>
+                <th>
+                  <Checkbox name="header" />
+                </th>
+                <th>Name</th>
+                <th>Email</th>
+                <th>Company</th>
+                <th>Phone No</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {Array(50)
+                .fill()
+                .map((_, index) => (
+                  <React.Fragment key={index}>
+                    <tr>
+                      <td>
+                        <Checkbox name="1" />
+                      </td>
+                      <td>Goutham Subramanyam</td>
+                      <td>goutham.subramanyam@bigbinary.com</td>
+                      <td>BigBinary</td>
+                      <td>+91 9633123456</td>
+                      <td>
+                        <div className="flex flex-row items-center justify-end space-x-3">
+                          <Dropdown
+                            icon={MenuHorizontal}
+                            buttonStyle="icon"
+                            autoWidth
+                          >
+                            <li>Edit</li>
+                            <li>Delete</li>
+                          </Dropdown>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <Checkbox name="2" />
+                      </td>
+                      <td>Edwin Babu</td>
+                      <td>edwin.babu@bigbinary.com</td>
+                      <td>BigBinary</td>
+                      <td>+91 8281331983</td>
+                      <td>
+                        <div className="flex flex-row items-center justify-end space-x-3">
+                          <Dropdown
+                            icon={MenuHorizontal}
+                            buttonStyle="icon"
+                            autoWidth
+                          >
+                            <li>Edit</li>
+                            <li>Delete</li>
+                          </Dropdown>
+                        </div>
+                      </td>
+                    </tr>
+                  </React.Fragment>
+                ))}
+            </tbody>
+          </table>
+        )}
+      </Scrollable>
+      <div className="flex flex-row justify-end items-center w-full mt-6 mb-8">
+        <Pagination count={300} pageNo={1} pageSize={25} navigate={() => {}} />
+      </div>
+    </Container>
+  );
+};

package/stories/Modal.stories.jsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { Check } from "@bigbinary/neeto-icons";
+
+import Button from "../lib/components/Button";
+import Modal from "../lib/components/Modal";
+import Alert from "../lib/components/Alert";
+
+export default {
+  title: "Overlays/Modal",
+  component: Modal,
+  subcomponents: { Button, Alert },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: '`import { Modal } from "@bigbinary/neetoui";`'
+      }
+    }
+  },
+};
+
+export const Modals = () => {
+  const [showModal, setShowModal] = useState(false);
+  const [showAlert, setShowAlert] = useState(false);
+  return (
+    <div className="w-full">
+      <div className="space-y-6">
+        <div className="w-1/2 space-y-8">
+          <div className="flex flex-row items-center justify-start space-x-6">
+            <Button label="Show Modal" onClick={() => setShowModal(true)} />
+            <Button label="Show Alert" onClick={() => setShowAlert(true)} />
+          </div>
+        </div>
+      </div>
+
+      <Modal isOpen={showModal} onClose={() => setShowModal(false)}>
+        <Modal.Header>
+          <h2>Add Label</h2>
+        </Modal.Header>
+        <Modal.Body>
+          Somewhere out in space live The Herculoids! Zok, the laser-ray dragon!
+          Igoo, the giant rock ape! Tundro, the tremendous! Gloop and Gleep, the
+          formless, fearless wonders! With Zandor, their leader, and his wife,
+          Tara, and son, Dorno, they team up to protect their planet from
+          sinister invaders! All-strong! All-brave! All-heroes! They're The
+          Herculoids!
+        </Modal.Body>
+        <Modal.Footer className="space-x-4">
+          <Button
+            icon={Check}
+            label="Continue"
+            onClick={() => setShowModal(false)}
+          />
+          <Button
+            style="text"
+            label="Cancel"
+            onClick={() => setShowModal(false)}
+          />
+        </Modal.Footer>
+      </Modal>
+
+      <Alert
+        isOpen={showAlert}
+        onClose={() => setShowAlert(false)}
+        onSubmit={() => setShowAlert(false)}
+        message="Are you sure you want to continue? All of your unsaved changes will be
+            lost."
+        title="You have unsaved changes!"
+      />
+    </div>
+  );
+};

package/stories/Pane.stories.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { Check } from "@bigbinary/neeto-icons";
+
+import Button from "../lib/components/Button";
+import Pane from "../lib/components/Pane";
+
+export default {
+  title: "Overlays/Pane",
+  component: Pane,
+  subcomponents: { Button },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: '`import { Pane } from "@bigbinary/neetoui";`'
+      }
+    }
+  },
+};
+
+export const Panes = () => {
+  const [showPane, setShowPane] = useState(false);
+  return (
+    <div className="w-full">
+      <div className="space-y-6">
+        <div className="w-1/2 space-y-8">
+          <div className="flex flex-row items-center justify-start space-x-6">
+            <Button label="Show Pane" onClick={() => setShowPane(true)} />
+          </div>
+        </div>
+      </div>
+
+      <Pane isOpen={showPane} onClose={() => setShowPane(false)}>
+        <Pane.Header>
+          <h2>User Info</h2>
+        </Pane.Header>
+        <Pane.Body>
+          Somewhere out in space live The Herculoids! Zok, the laser-ray dragon!
+          Igoo, the giant rock ape! Tundro, the tremendous! Gloop and Gleep, the
+          formless, fearless wonders! With Zandor, their leader, and his wife,
+          Tara, and son, Dorno, they team up to protect their planet from
+          sinister invaders! All-strong! All-brave! All-heroes! They're The
+          Herculoids!
+        </Pane.Body>
+        <Pane.Footer className="flex space-x-4">
+          <Button
+            icon={Check}
+            label="Continue"
+            onClick={() => setShowPane(false)}
+          />
+          <Button
+            style="text"
+            label="Cancel"
+            onClick={() => setShowPane(false)}
+          />
+        </Pane.Footer>
+      </Pane>
+    </div>
+  );
+};

package/stories/Sidebar.stories.jsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { Sidebar } from "../lib/components/layouts";
+import { NAV_LINKS, COMPONENT_MAPPING } from "../example/src/constants";
+
+export default {
+  title: "Layouts/Sidebar",
+};
+
+export const Sidenav = () => {
+  let ROUTER_LINKS = [];
+  NAV_LINKS.map((navLink) => {
+    if (navLink.items) {
+      navLink.items.map((item) => {
+        ROUTER_LINKS.push(item);
+      });
+    } else {
+      ROUTER_LINKS.push(navLink);
+    }
+  });
+  return (
+    <Router>
+      <div className="flex flex-row items-start justify-start">
+        <Sidebar
+          organizationInfo={{
+            name: "neetoUI",
+            subdomain: "neetoui.netlify.app",
+          }}
+          navLinks={NAV_LINKS}
+          profileInfo={{
+            name: "Kieran Miller",
+            email: "kieranmiller@gmail.com",
+            imageUrl: "https://randomuser.me/api/portraits/women/90.jpg",
+            dropdownProps: [
+              {
+                label: "Edit",
+                onClick: () => {},
+              },
+              {
+                label: "Logout",
+                onClick: () => {},
+              },
+            ],
+          }}
+        />
+        <div className="relative flex flex-col flex-grow h-screen overflow-auto">
+          <Switch>
+            {ROUTER_LINKS &&
+              ROUTER_LINKS.map(({ label, to }, index) => {
+                return (
+                  <Route
+                    key={index}
+                    path={to}
+                    component={COMPONENT_MAPPING[label]}
+                  />
+                );
+              })}
+          </Switch>
+        </div>
+      </div>
+    </Router>
+  );
+};

package/stories/Tab.stories.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+
+import Tab from "../lib/components/Tab";
+
+export default {
+  title: "Components/Tab",
+  component: Tab,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: '`import { Tab } from "@bigbinary/neetoui";`'
+      }
+    }
+  },
+};
+
+export const TwoItems = () => {
+  const [tab, setTab] = useState(true);
+  return (
+    <Tab className="grid grid-cols-2">
+      <Tab.Item active={tab} onClick={() => setTab(true)}>
+        Tab 1
+      </Tab.Item>
+      <Tab.Item active={!tab} onClick={() => setTab(false)}>
+        Tab 2
+      </Tab.Item>
+    </Tab>
+  );
+};
+
+export const ThreeItems = () => {
+  return (
+    <Tab className="grid grid-cols-3">
+      <Tab.Item active>Tab 1</Tab.Item>
+      <Tab.Item>Tab 2</Tab.Item>
+      <Tab.Item>Tab 3</Tab.Item>
+    </Tab>
+  );
+};
+
+export const FourItems = (args) => {
+  return (
+    <Tab className="grid grid-cols-3">
+      <Tab.Item active>Tab 1</Tab.Item>
+      <Tab.Item>Tab 2</Tab.Item>
+      <Tab.Item>Tab 3</Tab.Item>
+      <Tab.Item>Tab 4</Tab.Item>
+    </Tab>
+  );
+};

package/stories/Tag.stories.jsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Favorite } from "@bigbinary/neeto-icons";
+
+import Tag from "../lib/components/Tag";
+
+export default {
+  title: "Components/Tag",
+  component: Tag,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: '`import { Tag } from "@bigbinary/neetoui";`'
+      }
+    }
+  },
+};
+
+export const Tags = () => {
+  const onClose = () => alert("onClose Triggered!");
+
+  return (
+    <div className="p-6">
+      <div className="p-4 space-y-8 border border-indigo-500 border-dashed">
+        <div className="flex flex-col space-y-6 p-2">
+          <div className="flex flex-row justify-start items-start space-x-4">
+            <h5>Outline Small: </h5>
+            <Tag label="Label" />
+            <Tag icon={Favorite} label="Label" />
+            <Tag onClose={onClose} label="Label" />
+            <Tag icon={Favorite} onClose={onClose} label="Label" />
+          </div>
+          <div className="flex flex-row justify-start items-start space-x-4">
+            <h5>Outline Large: </h5>
+            <Tag size="large" label="Label" />
+            <Tag size="large" icon={Favorite} label="Label" />
+            <Tag size="large" onClose={onClose} label="Label" />
+            <Tag size="large" icon={Favorite} onClose={onClose} label="Label" />
+          </div>
+          <div className="flex flex-row justify-start items-start space-x-4">
+            <h5>Solid Small: </h5>
+            <Tag style="solid" label="Label" />
+            <Tag style="solid" icon={Favorite} label="Label" />
+            <Tag style="solid" onClose={onClose} label="Label" />
+            <Tag
+              style="solid"
+              icon={Favorite}
+              onClose={onClose}
+              label="Label"
+            />
+          </div>
+          <div className="flex flex-row justify-start items-start space-x-4">
+            <h5>Solid Large : </h5>
+            <Tag style="solid" size="large" label="Label" />
+            <Tag style="solid" size="large" icon={Favorite} label="Label" />
+            <Tag style="solid" size="large" onClose={onClose} label="Label" />
+            <Tag
+              style="solid"
+              size="large"
+              icon={Favorite}
+              onClose={onClose}
+              label="Label"
+            />
+          </div>
+          <div className="flex flex-row justify-start items-start space-x-4">
+            <h5>With Indicator : </h5>
+            <Tag label="Label" indicator="bg-green-500" />
+            <Tag label="Label" indicator="bg-yellow-500" />
+            <Tag label="Label" indicator="bg-blue-500" />
+            <Tag label="Label" indicator="bg-red-500" />
+          </div>
+          <div className="flex flex-row justify-start items-start space-x-4">
+            <h5>With Indicator Large : </h5>
+            <Tag size="large" label="Label" indicator="bg-green-500" />
+            <Tag size="large" label="Label" indicator="bg-yellow-500" />
+            <Tag size="large" label="Label" indicator="bg-blue-500" />
+            <Tag size="large" label="Label" indicator="bg-red-500" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/stories/Toastr.stories.jsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { ToastContainer } from "react-toastify";
+
+import Button from "../lib/components/Button";
+import Toastr from "../lib/components/Toastr";
+
+export default {
+  title: "Overlays/Toastr",
+  component: Toastr,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: '`import { Toastr } from "@bigbinary/neetoui";`'
+      }
+    }
+  },
+  subcomponents: { Button },
+};
+
+export const Toastrs = () => {
+  return (
+    <>
+      <ToastContainer />
+      <div className="space-y-6">
+        <div className="flex flex-row items-center justify-start space-x-6">
+          <Button
+            label="Info Toastr"
+            onClick={() => Toastr.info("This is an info toastr.")}
+          />
+          <Button
+            label="Warning Toastr"
+            onClick={() => Toastr.warning("This is a warning toastr.")}
+          />
+          <Button
+            label="Success Toastr"
+            onClick={() => Toastr.success("Form has been successfully saved.")}
+          />
+          <Button
+            label="Toastr with CTA"
+            onClick={() =>
+              Toastr.error(
+                Error("Ticket marked as spam."),
+                "Block Customer",
+                () => alert("Customer blocked successfully!")
+              )
+            }
+          />
+          <Button
+            label="Error Toastr"
+            onClick={() =>
+              Toastr.error(
+                Error(
+                  "Some error occured! Please visit https://github.com/bigbinary/neeto-ui."
+                )
+              )
+            }
+          />
+        </div>
+      </div>
+    </>
+  );
+};