@bigbinary/neetoui 2.0.89 → 2.0.93

package/stories/Radio.stories.jsx

@@ -1,34 +0,0 @@
-import React from "react";
-
-import Radio from "../lib/components/Radio";
-
-export default {
-  title: "Components/Radio",
-  component: Radio,
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component: '`import { Radio } from "@bigbinary/neetoui/v2";`',
-      },
-    },
-  },
-};
-
-export const Options = () => {
-  return (
-    <Radio label="Radio Options" className="space-y-4">
-      <Radio.Item label="option1" value="option1" />
-      <Radio.Item label="option2" value="option2" />
-    </Radio>
-  );
-};
-
-export const OptionsStacked = () => {
-  return (
-    <Radio label="Radio Options Stacked" className="space-y-4" stacked>
-      <Radio.Item label="option1" value="option1" />
-      <Radio.Item label="option2" value="option2" />
-    </Radio>
-  );
-};

package/stories/Select.stories.jsx

@@ -1,162 +0,0 @@
-import React, { useState } from "react";
-
-import Select from "../lib/components/Select";
-
-export default {
-  title: "Components/Select",
-  component: Select,
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component: '`import { Select } from "@bigbinary/neetoui/v2";`',
-      },
-    },
-  },
-};
-
-const Template = (args) => (
-  <div className="p-4 mb-2">
-    <Select {...args} />
-  </div>
-);
-
-export const Single = Template.bind({});
-Single.args = {
-  label: "Select",
-  defaultValue: { value: "value3", label: "Value Three" },
-  placeholder: "Select an Option",
-  isDisabled: false,
-  isClearable: true,
-  isSearchable: true,
-  name: "ValueList",
-  options: [
-    { value: "value1", label: "Value One" },
-    { value: "value2", label: "Value Two" },
-    { value: "value3", label: "Value Three" },
-    { value: "value4", label: "Value Four" },
-    { value: "value5", label: "Value Five" },
-  ],
-};
-
-export const Multi = Template.bind({});
-Multi.args = {
-  label: "Multi Select",
-  isMulti: true,
-  defaultValue: [
-    { value: "value3", label: "Value Three" },
-    { value: "value5", label: "Value Five" },
-  ],
-  placeholder: "Select an Option",
-  name: "ValueList",
-  options: [
-    { value: "value1", label: "Value One" },
-    { value: "value2", label: "Value Two" },
-    { value: "value3", label: "Value Three" },
-    { value: "value4", label: "Value Four" },
-    { value: "value5", label: "Value Five" },
-  ],
-};
-
-export const Grouped = Template.bind({});
-Grouped.args = {
-  label: "Grouped Select",
-  isMulti: true,
-  defaultValue: [
-    { value: "value3", label: "Value Three" },
-    { value: "value7", label: "Value Seven" },
-  ],
-  placeholder: "Select an Option",
-  name: "ValueList",
-  options: [
-    {
-      label: "Group A",
-      options: [
-        { value: "value1", label: "Value One" },
-        { value: "value2", label: "Value Two" },
-        { value: "value3", label: "Value Three" },
-        { value: "value4", label: "Value Four" },
-        { value: "value5", label: "Value Five" },
-      ],
-    },
-    {
-      label: "Group B",
-      options: [
-        { value: "value6", label: "Value Six" },
-        { value: "value7", label: "Value Seven" },
-        { value: "value8", label: "Value Eight" },
-        { value: "value9", label: "Value Nine" },
-        { value: "value10", label: "Value Ten" },
-      ],
-    },
-  ],
-};
-
-export const Creatable = () => {
-  const [options, setOptions] = useState([
-    { value: "value1", label: "Value One" },
-    { value: "value2", label: "Value Two" },
-    { value: "value3", label: "Value Three" },
-    { value: "value4", label: "Value Four" },
-    { value: "value5", label: "Value Five" },
-  ]);
-
-  return (
-    <div className="p-4 mb-2">
-      <Select
-        label="Grouped Select"
-        isCreateable
-        defaultValue={[{ value: "value3", label: "Value Three" }]}
-        placeholder="Select an Option"
-        onCreateOption={(inputValue) =>
-          setOptions([...options, { label: inputValue, value: inputValue }])
-        }
-        name="ValueList"
-        defaultOptions={options}
-      />
-    </div>
-  );
-};
-
-export const AllVariants = () => {
-  return (
-    <div className="w-full">
-      <div className="p-6 space-y-6">
-        <div className="p-4 space-y-8 border border-indigo-500 border-dashed">
-          <h2 className="text-xl">Select/Large</h2>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Select placeholder="Select Placeholder" />
-          </div>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Select placeholder="Select Placeholder" />
-          </div>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Select placeholder="Select Placeholder" isDisabled />
-          </div>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Select placeholder="Select Placeholder" error="This is an error" />
-          </div>
-        </div>
-        <div className="p-4 space-y-8 border border-indigo-500 border-dashed">
-          <h2 className="text-xl">Select/Small</h2>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Select placeholder="Select Placeholder" size="small" />
-          </div>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Select placeholder="Select Placeholder" size="small" />
-          </div>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Select placeholder="Select Placeholder" size="small" isDisabled />
-          </div>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Select
-              placeholder="Select Placeholder"
-              size="small"
-              error="This is an error"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/stories/Sidebar.stories.jsx

@@ -1,123 +0,0 @@
-import React, { useState } from "react";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-
-import Sidebar from "../lib/components/layouts/Sidebar";
-import AppSwitcher from "../lib/components/layouts/AppSwitcher";
-import { NAV_LINKS, COMPONENT_MAPPING } from "../example/src/constants";
-
-export default {
-  title: "Layouts/Sidebar",
-  component: Sidebar,
-  parameters: {
-    layout: "fullscreen",
-    docs: {
-      description: {
-        component: '`import { Sidebar } from "@bigbinary/neetoui/v2/layouts";`',
-      },
-    },
-  },
-};
-
-const Template = (args) => {
-  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 {...args} />
-        <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>
-  );
-};
-
-export const Sidenav = Template.bind({});
-Sidenav.args = {
-  organizationInfo: {
-    name: "neetoUI",
-    subdomain: "neetoui.netlify.app",
-  },
-  navLinks: NAV_LINKS,
-  profileInfo: {
-    name: "Kieran Miller",
-    imageUrl: "https://randomuser.me/api/portraits/women/90.jpg",
-    dropdownProps: [
-      {
-        label: "Edit",
-        onClick: () => {},
-      },
-      {
-        label: "Logout",
-        onClick: () => {},
-      },
-    ],
-  },
-  showAppSwitcher: true,
-  appName: "neetoUI",
-};
-
-export const SidebarWithAppSwitcher = (args) => {
-  const [isAppSwitcherOpen, setIsAppSwitcherOpen] = useState(false);
-
-  return (
-    <Router>
-        <Sidebar
-          {...args}
-          onAppSwitcherToggle={() => setIsAppSwitcherOpen((isOpen) => !isOpen)}
-          toggleAppSwitcher={isAppSwitcherOpen}
-        />
-        <AppSwitcher
-          isOpen={isAppSwitcherOpen}
-          onClose={() => setIsAppSwitcherOpen(false)}
-          v2
-        />
-    </Router>
-  );
-};
-
-SidebarWithAppSwitcher.storyName = "Sidebar with AppSwitcher"
-SidebarWithAppSwitcher.args = {
-  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: () => {},
-      },
-    ],
-  },
-  showAppSwitcher: true,
-  appName: "neetoUI",
-};

package/stories/SubHeader.stories.jsx

@@ -1,39 +0,0 @@
-import React, { useState } from "react";
-
-import SubHeader from "../lib/components/layouts/SubHeader";
-
-export default {
-  title: "Layouts/SubHeader",
-  component: SubHeader,
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component:
-          '`import { SubHeader } from "@bigbinary/neetoui/v2/layouts";`',
-      },
-    },
-  },
-};
-
-export const BasicUsage = () => {
-    const [searchString, setSearchString] = useState("")
-    return (
-        <SubHeader
-          searchProps={{
-            value: searchString,
-            onChange: (e) => setSearchString(e.target.value),
-          }}
-          deleteButtonProps={{
-            count: 0,
-            selectedIDs: [],
-            onClick: () => {},
-          }}
-          disableButtonProps={{
-            count: 0,
-            selectedIDs: [],
-            onClick: () => {},
-          }}
-        />
-    )
-}

package/stories/Switch.stories.jsx

@@ -1,52 +0,0 @@
-import React from "react";
-
-import Switch from "../lib/components/Switch";
-
-export default {
-  title: "Components/Switch",
-  component: Switch,
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component: '`import { Switch } from "@bigbinary/neetoui/v2";`',
-      },
-    },
-  },
-};
-
-const Template = (args) => (
-  <div className="p-4">
-    <Switch {...args} />
-  </div>
-);
-
-export const CheckedState = Template.bind({});
-CheckedState.args = {
-  checked: true,
-};
-
-export const UncheckedState = Template.bind({});
-UncheckedState.args = {
-  checked: false,
-};
-
-export const DisabledState = Template.bind({});
-DisabledState.args = {
-  disabled: true,
-};
-
-export const WithLabel = Template.bind({});
-WithLabel.args = {
-  label: "Switch Label Example",
-};
-
-export const WithCustomLabel = Template.bind({});
-WithCustomLabel.args = {
-  label: <span className="neeto-ui-text-info">Custom Label Example</span>,
-};
-
-export const WithChangeListner = Template.bind({});
-WithChangeListner.args = {
-  onChange: (e) => alert("Callback invoked"),
-};

package/stories/Tab.stories.jsx

@@ -1,71 +0,0 @@
-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/v2";`',
-      },
-    },
-  },
-};
-
-const Template = (args) => (
-  <Tab {...args}>
-    <Tab.Item active="true">Label</Tab.Item>
-    <Tab.Item>Label</Tab.Item>
-  </Tab>
-);
-
-export const Default = Template.bind({});
-
-export const Large = Template.bind({});
-Large.args = {
-  size: "large",
-};
-
-export const LargeWithoutUnderline = Template.bind({});
-LargeWithoutUnderline.args = {
-  size: "large",
-  noUnderline: true,
-};
-
-export const TwoItems = () => {
-  const [tab, setTab] = useState(true);
-  return (
-    <Tab>
-      <Tab.Item active={tab} onClick={() => setTab(true)}>
-        Label
-      </Tab.Item>
-      <Tab.Item active={!tab} onClick={() => setTab(false)}>
-        Label
-      </Tab.Item>
-    </Tab>
-  );
-};
-
-export const ThreeItems = () => {
-  return (
-    <Tab>
-      <Tab.Item active>Label</Tab.Item>
-      <Tab.Item>Label</Tab.Item>
-      <Tab.Item>Label</Tab.Item>
-    </Tab>
-  );
-};
-
-export const FourItems = () => {
-  return (
-    <Tab>
-      <Tab.Item active>Label</Tab.Item>
-      <Tab.Item>Label</Tab.Item>
-      <Tab.Item>Label</Tab.Item>
-      <Tab.Item>Label</Tab.Item>
-    </Tab>
-  );
-};

package/stories/Tag.stories.jsx

@@ -1,149 +0,0 @@
-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/v2";`',
-      },
-    },
-  },
-};
-
-const Template = (args) => <Tag {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  label: "Label",
-};
-
-export const TagColorStory = (props) => (
-  <div className="p-6">
-    <Tag {...props} />
-  </div>
-);
-
-TagColorStory.storyName = "Tag with Color";
-TagColorStory.args = {
-  color: "green",
-  style: "outline",
-  label: "Label",
-  size: "large",
-  onClose: null,
-};
-
-export const AllVariants = () => {
-  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 p-2 space-y-6">
-          <div className="flex flex-row items-start justify-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 items-start justify-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 items-start justify-start space-x-4">
-            <h5>Colored Outline Large : </h5>
-            <Tag
-              style="outline"
-              size="large"
-              color="grey"
-              icon={Favorite}
-              onClose={onClose}
-              label="Label"
-            />
-            <Tag style="outline" size="large" color="red" label="Label" />
-            <Tag
-              style="outline"
-              size="large"
-              color="green"
-              icon={Favorite}
-              label="Label"
-            />
-            <Tag
-              style="outline"
-              size="large"
-              color="blue"
-              onClose={onClose}
-              label="Label"
-            />
-            <Tag
-              style="outline"
-              size="large"
-              color="yellow"
-              icon={Favorite}
-              onClose={onClose}
-              label="Label"
-            />
-          </div>
-          <div className="flex flex-row items-start justify-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 items-start justify-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 items-start justify-start space-x-4">
-            <h5>Solid With Colors : </h5>
-            <Tag size="large" style="solid" label="Label" color="grey" />
-            <Tag size="large" style="solid" label="Label" color="red" />
-            <Tag size="large" style="solid" label="Label" color="green" />
-            <Tag size="large" style="solid" label="Label" color="blue" />
-            <Tag size="large" style="solid" label="Label" color="yellow" />
-          </div>
-          <div className="flex flex-row items-start justify-start space-x-4">
-            <h5>With Indicator : </h5>
-            <Tag label="Label" indicatorColor="green" />
-            <Tag label="Label" indicatorColor="yellow" />
-            <Tag label="Label" indicatorColor="blue" />
-            <Tag label="Label" indicatorColor="red" />
-            <Tag label="Label" indicatorColor="grey" />
-          </div>
-          <div className="flex flex-row items-start justify-start space-x-4">
-            <h5>With Indicator Large : </h5>
-            <Tag size="large" label="Label" indicatorColor="green" />
-            <Tag size="large" label="Label" indicatorColor="yellow" />
-            <Tag size="large" label="Label" indicatorColor="blue" />
-            <Tag size="large" label="Label" indicatorColor="red" />
-            <Tag size="large" label="Label" indicatorColor="grey" />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/stories/Textarea.stories.jsx

@@ -1,55 +0,0 @@
-import React, { useState } from "react";
-
-import Textarea from "../lib/components/Textarea";
-
-export default {
-  title: "Components/Textarea",
-  component: Textarea,
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component: '`import { Textarea } from "@bigbinary/neetoui/v2";`',
-      },
-    },
-  },
-};
-
-const Template = (args) => <Textarea {...args} />;
-
-export const BasicUsage = Template.bind({});
-BasicUsage.args = {
-  label: "Textarea",
-  placeholder: "Enter text",
-};
-
-export const Controlled = () => {
-  const [value, setValue] = useState("BigBinary");
-  return (
-    <Textarea
-      label="Controlled Input"
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-    />
-  );
-};
-
-export const Required = () => (
-  <Textarea label="Required Textarea" required={true} />
-);
-
-export const Disabled = () => (
-  <Textarea label="Disabled Textarea" disabled={true} />
-);
-
-export const Error = () => (
-  <Textarea label="Error" error="Provide valid email" />
-);
-
-export const HelpText = () => (
-  <Textarea label="Name" helpText="This is help text props to the component." />
-);
-
-export const NakedInput = () => (
-  <Textarea label="Naked Textarea Field" nakedTextarea={true} />
-);