@bigbinary/neetoui 2.0.89 → 2.0.93

package/stories/Layouts.stories.jsx

@@ -1,246 +0,0 @@
-import React, { useState, useEffect } from "react";
-import {
-  MenuHorizontal,
-  Settings,
-  Plus,
-  Search,
-} from "@bigbinary/neeto-icons";
-
-import {
-  Header,
-  SubHeader,
-  Container,
-  Scrollable,
-  MenuBar,
-} from "../lib/components/layouts";
-import {
-  Button,
-  PageLoader,
-  Pagination,
-  Checkbox,
-  Dropdown,
-  Typography
-} from "../lib/components";
-
-export default {
-  title: "Layouts/Page",
-};
-
-const SidebarHandleIcon = ({ size, color }) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path stroke={color} strokeWidth="1.5" d="M3 7.25L21 7.25"></path>
-      <path stroke={color} strokeWidth="1.5" d="M3 11.25L15 11.25"></path>
-      <path stroke={color} strokeWidth="1.5" d="M3 15.25L11 15.25"></path>
-    </svg>
-  );
-};
-
-export const Page = () => {
-  const [searchString, setSearchString] = useState("");
-  const [isLoading, setIsLoading] = useState(true);
-  const [showMenu, setShowMenu] = useState(false);
-  const [isSearchCollapsed, setIsSearchCollapsed] = useState(true);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 2000);
-  }, []);
-
-  return (
-    <div className="flex">
-      <MenuBar
-        showMenu={showMenu}
-        title="Contacts"
-      >
-        <MenuBar.Block label="All" count={13} active />
-        <MenuBar.Block label="Users" count={2} />
-        <MenuBar.Block label="Leads" count={7} />
-        <MenuBar.Block label="Visitors" count={4} />
-
-        <MenuBar.SubTitle
-          iconProps={[
-            {
-              icon: () => <Search size={20} />,
-              onClick: () => setIsSearchCollapsed(!isSearchCollapsed),
-            },
-          ]}
-        >
-          <Typography
-            component="h4"
-            style="h5"
-            textTransform="uppercase"
-            weight="bold"
-          >
-            Segments
-          </Typography>
-        </MenuBar.SubTitle>
-        <MenuBar.Search
-          collapse={isSearchCollapsed}
-          onCollapse={() => setIsSearchCollapsed(true)}
-        />
-        <MenuBar.Block label="Europe" count={80} />
-        <MenuBar.Block label="Middle-East" count={60} />
-        <MenuBar.Block label="Asia" count={60} />
-        <MenuBar.AddNew label="Add New Segments" />
-        <MenuBar.SubTitle
-          iconProps={[
-            {
-              icon: () => <Settings size={20} />,
-            },
-            {
-              icon: () => <Plus size={20} />,
-            },
-            {
-              icon: () => <Search size={20} />,
-            },
-          ]}
-        >
-          <Typography
-            component="h4"
-            style="h5"
-            textTransform="uppercase"
-            weight="bold"
-          >
-            Tags
-          </Typography>
-        </MenuBar.SubTitle>
-        <MenuBar.Block label="Europe" count={80} />
-        <MenuBar.Block label="Middle-East" count={60} />
-        <MenuBar.Block label="Asia" count={60} />
-        <MenuBar.AddNew label="Add New Tag" />
-
-        <MenuBar.Item
-          label="General"
-          description="Welcome Message, KB and Labels "
-        />
-        <MenuBar.Item
-          label="Styling"
-          active
-          description="Brand Color, Logo and Widget Position"
-        />
-        <MenuBar.Item
-          label="Widget Icon"
-          description="Position, Icon and Label"
-        />
-      </MenuBar>
-      <Container>
-        <Header
-          title="Layouts"
-          actionBlock={<Button label="Primary Action" />}
-          menuBarHandle={
-            <Button
-              style="text"
-              className="mr-2"
-              icon={() => <SidebarHandleIcon size={20} color={"#68737D"} />}
-              onClick={() => setShowMenu(!showMenu)}
-            />
-          }
-        />
-        <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={`neeto-ui-table neeto-ui-table--checkbox neeto-ui-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 items-center justify-end w-full mt-6 mb-8">
-          <Pagination
-            count={300}
-            pageNo={1}
-            pageSize={25}
-            navigate={() => {}}
-          />
-        </div>
-      </Container>
-    </div>
-  );
-};

package/stories/MenuBar.stories.jsx

@@ -1,119 +0,0 @@
-import React, { useState } from "react";
-import { Settings, Plus, Search } from "@bigbinary/neeto-icons";
-
-import { Container, MenuBar } from "../lib/components/layouts";
-import { Button, Typography } from "../lib/components";
-
-export default {
-  title: "Layouts/MenuBar",
-  component: MenuBar,
-  subcomponents: {
-    Block: MenuBar.Block,
-    AddNew: MenuBar.AddNew,
-    SubTitle: MenuBar.SubTitle,
-    Search: MenuBar.Search,
-    Item: MenuBar.Item,
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: '`import { MenuBar } from "@bigbinary/neetoui/v2/layouts";`',
-      },
-    },
-  },
-};
-
-export const MenuBarStory = () => {
-  const [showMenu, setShowMenu] = useState(false);
-  const [isSearchCollapsed, setIsSearchCollapsed] = useState(true);
-
-  return (
-    <div className="flex">
-      <MenuBar
-        showMenu={showMenu}
-        title="Contacts"
-      >
-        <MenuBar.Block label="All" count={13} active />
-        <MenuBar.Block label="Users" count={2} />
-        <MenuBar.Block label="Leads" count={7} />
-        <MenuBar.Block label="Visitors" count={4} />
-
-        <MenuBar.SubTitle
-          iconProps={[
-            {
-              icon: () => <Search size={20} />,
-              onClick: () => setIsSearchCollapsed(!isSearchCollapsed),
-            },
-          ]}
-        >
-          <Typography
-            component="h4"
-            style="h5"
-            textTransform="uppercase"
-            weight="bold"
-          >
-            Segments
-          </Typography>
-        </MenuBar.SubTitle>
-        <MenuBar.Search
-          collapse={isSearchCollapsed}
-          onCollapse={() => setIsSearchCollapsed(true)}
-        />
-        <MenuBar.Block label="Europe" count={80} />
-        <MenuBar.Block label="Middle-East" count={60} />
-        <MenuBar.Block label="Asia" count={60} />
-        <MenuBar.AddNew label="Add New Segments" />
-        <MenuBar.SubTitle
-          iconProps={[
-            {
-              icon: () => <Settings size={20} />,
-            },
-            {
-              icon: () => <Plus size={20} />,
-            },
-            {
-              icon: () => <Search size={20} />,
-            },
-          ]}
-        >
-          <Typography
-            component="h4"
-            style="h5"
-            textTransform="uppercase"
-            weight="bold"
-          >
-            Tags
-          </Typography>
-        </MenuBar.SubTitle>
-        <MenuBar.Block label="Europe" count={80} />
-        <MenuBar.Block label="Middle-East" count={60} />
-        <MenuBar.Block label="Asia" count={60} />
-        <MenuBar.AddNew label="Add New Tag" />
-
-        <MenuBar.Item
-          label="General"
-          description="Welcome Message, KB and Labels "
-        />
-        <MenuBar.Item
-          label="Styling"
-          active
-          description="Brand Color, Logo and Widget Position"
-        />
-        <MenuBar.Item
-          label="Widget Icon"
-          description="Position, Icon and Label"
-        />
-      </MenuBar>
-      <Container>
-        <div className="flex items-center justify-center w-full h-full">
-          <Button
-            label={`${showMenu ? "Close" : "Open"} MenuBar`}
-            onClick={() => setShowMenu(!showMenu)}
-          />
-        </div>
-      </Container>
-    </div>
-  );
-};
-
-MenuBarStory.storyName = "MenuBar";

package/stories/Modal.stories.jsx

@@ -1,183 +0,0 @@
-import React, { useState } from "react";
-import { Check } from "@bigbinary/neeto-icons";
-
-import Button from "../lib/components/Button";
-import Modal from "../lib/components/Modal";
-import Typography from "../lib/components/Typography";
-
-export default {
-  title: "Overlays/Modal",
-  component: Modal,
-  subcomponents: { Button },
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component: '`import { Modal } from "@bigbinary/neetoui/v2";`',
-      },
-    },
-  },
-};
-
-export const Default = () => {
-  const [showModal, setShowModal] = 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)} />
-          </div>
-        </div>
-      </div>
-
-      <Modal isOpen={showModal} onClose={() => setShowModal(false)}>
-        <Modal.Header>
-          <Typography style="h2">They're creepy & they're kooky</Typography>
-        </Modal.Header>
-        <Modal.Body>
-          <Typography style="body2" lineHeight="normal">
-            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!
-          </Typography>
-        </Modal.Body>
-        <Modal.Footer className="space-x-2">
-          <Button
-            icon={Check}
-            label="Continue"
-            onClick={() => setShowModal(false)}
-            size="large"
-          />
-          <Button
-            style="text"
-            label="Cancel"
-            onClick={() => setShowModal(false)}
-            size="large"
-          />
-        </Modal.Footer>
-      </Modal>
-    </div>
-  );
-};
-
-export const ModalSizing = () => {
-  const [showModalExtraSmall, setShowModalExtraSmall] = useState(false);
-  const [showModalSmall, setShowModalSmall] = useState(false);
-  const [showModalMedium, setShowModalMedium] = 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="Extra Small"
-              onClick={() => setShowModalExtraSmall(true)}
-            />
-            <Button label="Small" onClick={() => setShowModalSmall(true)} />
-            <Button label="Medium" onClick={() => setShowModalMedium(true)} />
-          </div>
-        </div>
-      </div>
-
-      <Modal
-        isOpen={showModalExtraSmall}
-        onClose={() => setShowModalExtraSmall(false)}
-        size="xs"
-      >
-        <Modal.Header>
-          <Typography style="h2">They're creepy & they're kooky</Typography>
-        </Modal.Header>
-        <Modal.Body>
-          <Typography style="body2" lineHeight="normal">
-            Somewhere out in space live The Herculoids! Zok, the laser-ray
-            dragon! Igoo, the giant rock ape! Tundro, the tremendous!
-          </Typography>
-        </Modal.Body>
-        <Modal.Footer className="space-x-2">
-          <Button
-            icon={Check}
-            size="large"
-            label="Continue"
-            onClick={() => setShowModalExtraSmall(false)}
-          />
-          <Button
-            style="text"
-            size="large"
-            label="Cancel"
-            onClick={() => setShowModalExtraSmall(false)}
-          />
-        </Modal.Footer>
-      </Modal>
-
-      <Modal
-        isOpen={showModalSmall}
-        onClose={() => setShowModalSmall(false)}
-        size="sm"
-      >
-        <Modal.Header>
-          <Typography style="h2">They're creepy & they're kooky</Typography>
-        </Modal.Header>
-        <Modal.Body>
-          <Typography style="body2" lineHeight="normal">
-            Somewhere out in space live The Herculoids! Zok, the laser-ray
-            dragon! Igoo, the giant rock ape! Tundro, the tremendous!
-          </Typography>
-        </Modal.Body>
-        <Modal.Footer className="space-x-2">
-          <Button
-            icon={Check}
-            size="large"
-            label="Continue"
-            onClick={() => setShowModalSmall(false)}
-          />
-          <Button
-            style="text"
-            size="large"
-            label="Cancel"
-            onClick={() => setShowModalSmall(false)}
-          />
-        </Modal.Footer>
-      </Modal>
-
-      <Modal
-        isOpen={showModalMedium}
-        onClose={() => setShowModalMedium(false)}
-        size="md"
-      >
-        <Modal.Header>
-          <Typography style="h2">They're creepy & they're kooky</Typography>
-        </Modal.Header>
-        <Modal.Body>
-          <Typography style="body2" lineHeight="normal">
-            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!
-          </Typography>
-        </Modal.Body>
-        <Modal.Footer className="space-x-2">
-          <Button
-            icon={Check}
-            size="large"
-            label="Continue"
-            onClick={() => setShowModalMedium(false)}
-          />
-          <Button
-            style="text"
-            size="large"
-            label="Cancel"
-            onClick={() => setShowModalMedium(false)}
-          />
-        </Modal.Footer>
-      </Modal>
-    </div>
-  );
-};

package/stories/PageLoader.stories.jsx

@@ -1,41 +0,0 @@
-import React, { useState } from "react";
-
-import PageLoader from "../lib/components/PageLoader";
-
-export default {
-  title: "Components/PageLoader",
-  component: PageLoader,
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component: '`import { PageLoader } from "@bigbinary/neetoui/v2";`',
-      },
-    },
-  },
-};
-
-const Template = (args) => (
-  <div className="py-10">
-    <PageLoader {...args} />
-  </div>
-);
-
-export const BasicUsage = Template.bind({});
-BasicUsage.args = {};
-
-export const LoadingText = () => {
-  const [value, setValue] = useState(0);
-  setTimeout(() => setValue(value + 1), 1000);
-
-  return (
-    <div className="py-10">
-      <PageLoader text={`Please wait ${5 - (value % 5)} seconds`} />
-    </div>
-  );
-};
-
-export const CustomColor = Template.bind({});
-CustomColor.args = {
-  color: "red",
-};

package/stories/Pagination.stories.jsx

@@ -1,26 +0,0 @@
-import React from "react";
-
-import Pagination from "../lib/components/Pagination";
-
-export default {
-  title: "Components/Pagination",
-  component: Pagination,
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component: '`import { Pagination } from "@bigbinary/neetoui/v2";`',
-      },
-    },
-  },
-};
-
-const Template = (args) => <Pagination {...args} />;
-
-export const BasicUsage = Template.bind({});
-BasicUsage.args = {
-  count: 500,
-  pageNo: 3,
-  pageSize: 100,
-  navigate: (pageNumber) => {},
-};

package/stories/Pane.stories.jsx

@@ -1,67 +0,0 @@
-import React, { useState } from "react";
-import { Check } from "@bigbinary/neeto-icons";
-
-import Button from "../lib/components/Button";
-import Pane from "../lib/components/Pane";
-import Typography from "../lib/components/Typography";
-
-export default {
-  title: "Overlays/Pane",
-  component: Pane,
-  subcomponents: { Button },
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component: '`import { Pane } from "@bigbinary/neetoui/v2";`',
-      },
-    },
-  },
-};
-
-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>
-          <Typography style="h2" weight="semibold">
-            Typography
-          </Typography>
-        </Pane.Header>
-        <Pane.Body>
-          <Typography style="body2">
-            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!
-          </Typography>
-        </Pane.Body>
-        <Pane.Footer className="flex items-center space-x-2">
-          <Button
-            icon={Check}
-            size="large"
-            label="Continue"
-            onClick={() => setShowPane(false)}
-          />
-          <Button
-            style="text"
-            size="large"
-            label="Cancel"
-            onClick={() => setShowPane(false)}
-          />
-        </Pane.Footer>
-      </Pane>
-    </div>
-  );
-};