@bigbinary/neetoui 2.0.89 → 2.0.93

package/stories/HelpersColor.stories.mdx

@@ -1,170 +0,0 @@
-import { Meta, Story } from "@storybook/addon-docs";
-
-export const colorPalette = [
-  {
-    name: "$neeto-ui-white",
-    value: "#ffffff",
-    compiledValue: "#ffffff",
-  },
-  {
-    name: "$neeto-ui-black",
-    value: "#1b1f23",
-    compiledValue: "#1b1f23",
-  },
-  {
-    name: "$neeto-ui-gray-800",
-    value: "#2f3941",
-    compiledValue: "#2f3941",
-  },
-  {
-    name: "$neeto-ui-gray-700",
-    value: "#49545c",
-    compiledValue: "#49545c",
-  },
-  {
-    name: "$neeto-ui-gray-600",
-    value: "#68737d",
-    compiledValue: "#68737d",
-  },
-  {
-    name: "$neeto-ui-gray-500",
-    value: "#87929d",
-    compiledValue: "#87929d",
-  },
-  {
-    name: "$neeto-ui-gray-400",
-    value: "#c2c8cc",
-    compiledValue: "#c2c8cc",
-  },
-  {
-    name: "$neeto-ui-gray-300",
-    value: "#d8dcde",
-    compiledValue: "#d8dcde",
-  },
-  {
-    name: "$neeto-ui-gray-200",
-    value: "#e9ebed",
-    compiledValue: "#e9ebed",
-  },
-  {
-    name: "$neeto-ui-gray-100",
-    value: "#f8f9f9",
-    compiledValue: "#f8f9f9",
-  },
-  {
-    name: "$neeto-ui-success",
-    value: "#00ba88",
-    compiledValue: "#00ba88",
-  },
-  {
-    name: "$neeto-ui-info",
-    value: "#276ef1",
-    compiledValue: "#276ef1",
-  },
-  {
-    name: "$neeto-ui-warning",
-    value: "#f3cd82",
-    compiledValue: "#f3cd82",
-  },
-  {
-    name: "$neeto-ui-error",
-    value: "#f56a58",
-    compiledValue: "#f56a58",
-  },
-  {
-    name: "$neeto-ui-pastel-blue",
-    value: "#eaf3fc",
-    compiledValue: "#eaf3fc",
-  },
-  {
-    name: "$neeto-ui-pastel-green",
-    value: "#ebf5ec",
-    compiledValue: "#ebf5ec",
-  },
-  {
-    name: "$neeto-ui-pastel-yellow",
-    value: "#fff2d7",
-    compiledValue: "#fff2d7",
-  },
-  {
-    name: "$neeto-ui-pastel-red",
-    value: "#ffefed",
-    compiledValue: "#ffefed",
-  },
-  {
-    name: "$neeto-ui-pastel-teal",
-    value: "#98f3f4",
-    compiledValue: "#98f3f4",
-  },
-  {
-    name: "$neeto-ui-secondary-indigo",
-    value: "#5e5ce6",
-    compiledValue: "#5e5ce6",
-  },
-  {
-    name: "$neeto-ui-secondary-green",
-    value: "#00ba88",
-    compiledValue: "#00ba88",
-  },
-  {
-    name: "$neeto-ui-secondary-teal",
-    value: "#64d2ff",
-    compiledValue: "#64d2ff",
-  },
-];
-
-<Meta title="Foundation/Helpers/Color" />
-
-<style>{`
-  .story-demo-table tr{
-      background: transparent !important;
-  }
-  
-`}</style>
-
-# Colors
-
-<table className="story-demo-table">
-  <thead>
-    <tr>
-      <td></td>
-      <td>Hex code</td>
-      <td>Variable name</td>
-      <td>Text color class</td>
-      <td>Background color class</td>
-    </tr>
-  </thead>
-  <tbody>
-    {colorPalette.map((color) => {
-      return (
-        <tr key={color.name}>
-          <td>
-            <div
-              className={`w-12 h-12 cursor-pointer rounded-full shadow-xl ${color.name.replace(
-                "$neeto-ui",
-                "neeto-ui-bg"
-              )}`}
-            ></div>
-          </td>
-          <td>
-            <code>{color.value}</code>
-          </td>
-          <td>
-            <code>{color.name}</code>
-          </td>
-          <td>
-            <div className="flex justify-between">
-              <code>{`${color.name.replace("$neeto-ui", "neeto-ui-text")}`}</code>
-              <b className={`ml-2 ${color.name.replace("$neeto-ui", "neeto-ui-text")}`}>
-                Aa
-              </b>
-            </div>
-          </td>
-          <td className={`${color.name.replace("$neeto-ui", "neeto-ui-bg")}`}>
-            <code>{`${color.name.replace("$neeto-ui", "neeto-ui-bg")}`}</code>
-          </td>
-        </tr>
-      );
-    })}
-  </tbody>
-</table>

package/stories/Iconography.stories.jsx

@@ -1,120 +0,0 @@
-import React from "react";
-import * as iconset from "@bigbinary/neeto-icons";
-
-const applications = [
-  "NeetoAnalytics",
-  "NeetoCal",
-  "NeetoChangelog",
-  "NeetoChat",
-  "NeetoDesk",
-  "NeetoForm",
-  "NeetoInsights",
-  "NeetoInterview",
-  "NeetoInvisible",
-  "NeetoKb",
-  "NeetoQuiz",
-  "NeetoReplay",
-  "NeetoWireframe",
-];
-
-export default {
-  title: "Foundation/Iconography",
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component:
-          '`import { Clock } from "@bigbinary/neeto-icons";` <br><br> Anywhere in your React file <br><br> `<Clock 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 gap-3 lg:grid-cols-8">
-        {iconset.iconList.map((icon) => {
-          const Component = iconset[icon];
-          return (
-            <div
-              key={icon}
-              className="flex flex-col items-center justify-center p-5 transition-colors rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100"
-            >
-              <Component />
-              <div className="mt-2 text-xs">{icon}</div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export const ApplicationIcons = () => {
-  return (
-    <div className="p-4">
-      <div className="table border-collapse">
-        <thead>
-          <tr>
-            <th className="p-4 text-left border border-gray-200"></th>
-            <th className="p-4 text-left border border-gray-200">Application</th>
-            <th className="p-4 text-left border border-gray-200">Gradient class</th>
-            <th className="p-4 text-left border border-gray-200">Icon</th>
-          </tr>
-        </thead>
-        <tbody>
-          {applications.map((application) => {
-            const Component = iconset[application];
-            return (
-              <tr className="">
-                <td className="p-4 text-center border border-gray-200">  
-                  <div
-                    className={`w-8 h-8 rounded-md mb-3 flex flex-row items-center justify-center ${application
-                      .toLocaleLowerCase()
-                      .replace("neeto", "gradient--")}`}
-                  >
-                    <Component color="#fff" />
-                  </div>
-                </td>
-                <td className="p-4 text-left border border-gray-200">
-                  <b className="p-1 px-2 text-xs">{application}</b>
-                </td>
-                <td className="p-4 text-left border border-gray-200">
-                  <code className="p-1 px-2 text-xs bg-gray-100 rounded">{`${application
-                    .toLocaleLowerCase()
-                    .replace("neeto", "gradient--")}`}</code>
-                </td>
-                <td className="p-4 text-left border border-gray-200">
-                  <code className="p-1 px-2 text-xs bg-gray-100 rounded">{application}</code>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </div>
-    </div>
-  );
-};

package/stories/Input.stories.jsx

@@ -1,187 +0,0 @@
-import React, { useState } from "react";
-import { Search, Favorite } from "@bigbinary/neeto-icons";
-
-import Input from "../lib/components/Input";
-
-export default {
-  title: "Components/Input",
-  component: Input,
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component: '`import { Input } from "@bigbinary/neetoui/v2";`',
-      },
-    },
-  },
-};
-
-const Template = (args) => <Input {...args} />;
-
-export const Normal = Template.bind({});
-Normal.args = {
-  label: "Input",
-  placeholder: "Enter Name",
-};
-
-export const Controlled = () => {
-  const [value, setValue] = useState("BigBinary");
-  return (
-    <Input
-      label="Controlled Input"
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-    />
-  );
-};
-
-export const Large = () => <Input label="Large Input" size="large" />;
-
-export const Required = () => <Input label="Required Input" required={true} />;
-
-export const Disabled = () => <Input label="Disabled Input" disabled={true} />;
-
-export const SearchInputSmall = () => (
-  <Input label="Search" prefix={<Search size={16} />} suffix=".neetohelp.com" />
-);
-
-export const SearchInputLarge = () => (
-  <Input label="Search" size="large" prefix={<Search size={20} />} suffix=".neetohelp.com" />
-);
-
-export const Error = () => <Input label="Error" error="Provide valid email" />;
-
-export const HelpText = () => (
-  <Input label="Name" helpText="This is help text props to the component." />
-);
-
-export const NakedInput = () => (
-  <Input label="Naked Input Field" nakedInput={true} />
-);
-
-export const AllVariants = () => {
-  const [input, setInput] = useState("Text");
-  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">Input/Small/Default</h2>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Input placeholder="Input Placeholder" />
-            <Input
-              placeholder="Input Placeholder"
-              prefix={<Favorite size={16} />}
-            />
-            <Input placeholder="Input Placeholder" />
-            <Input placeholder="Input Placeholder" />
-          </div>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Input
-              placeholder="Input Placeholder"
-              onChange={(e) => setInput(e.target.value)}
-              value={input}
-            />
-            <Input
-              placeholder="Input Placeholder"
-              onChange={(e) => setInput(e.target.value)}
-              prefix={<Favorite size={16} />}
-              value={input}
-            />
-            <Input
-              placeholder="Input Placeholder"
-              onChange={(e) => setInput(e.target.value)}
-              value={input}
-            />
-            <Input
-              placeholder="Input Placeholder"
-              onChange={(e) => setInput(e.target.value)}
-              value={input}
-            />
-          </div>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Input placeholder="Input Placeholder" disabled />
-            <Input
-              placeholder="Input Placeholder"
-              prefix={<Favorite size={16} />}
-              disabled
-            />
-            <Input placeholder="Input Placeholder" disabled />
-            <Input placeholder="Input Placeholder" disabled />
-          </div>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Input placeholder="Input Placeholder" error={true} />
-            <Input
-              placeholder="Input Placeholder"
-              prefix={<Favorite size={16} />}
-              error={true}
-            />
-            <Input placeholder="Input Placeholder" error={true} />
-            <Input placeholder="Input Placeholder" error={true} />
-          </div>
-        </div>
-        <div className="p-4 space-y-8 border border-indigo-500 border-dashed">
-          <h2 className="text-xl">Input/Large</h2>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Input placeholder="Input Placeholder" size="large" />
-            <Input
-              placeholder="Input Placeholder"
-              size="large"
-              prefix={<Favorite size={16} />}
-            />
-            <Input placeholder="Input Placeholder" size="large" />
-            <Input placeholder="Input Placeholder" size="large" />
-          </div>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Input
-              placeholder="Input Placeholder"
-              onChange={(e) => setInput(e.target.value)}
-              value={input}
-              size="large"
-            />
-            <Input
-              placeholder="Input Placeholder"
-              onChange={(e) => setInput(e.target.value)}
-              size="large"
-              value={input}
-              prefix={<Favorite size={16} />}
-            />
-            <Input
-              placeholder="Input Placeholder"
-              onChange={(e) => setInput(e.target.value)}
-              size="large"
-              value={input}
-            />
-            <Input
-              placeholder="Input Placeholder"
-              onChange={(e) => setInput(e.target.value)}
-              size="large"
-              value={input}
-            />
-          </div>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Input placeholder="Input Placeholder" size="large" disabled />
-            <Input
-              placeholder="Input Placeholder"
-              size="large"
-              prefix={<Favorite size={16} />}
-              disabled
-            />
-            <Input placeholder="Input Placeholder" size="large" disabled />
-            <Input placeholder="Input Placeholder" size="large" disabled />
-          </div>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Input placeholder="Input Placeholder" size="large" error={true} />
-            <Input
-              placeholder="Input Placeholder"
-              size="large"
-              prefix={<Favorite size={16} />}
-              error={true}
-            />
-            <Input placeholder="Input Placeholder" size="large" error={true} />
-            <Input placeholder="Input Placeholder" size="large" error={true} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/stories/Introduction.stories.mdx

@@ -1,103 +0,0 @@
-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)
-
-For more information, refer our [**GitHub repository**](https://github.com/bigbinary/neeto-ui)
-
-<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/v2";
-```
-
-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/v2";
-
-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/Label.stories.jsx

@@ -1,29 +0,0 @@
-import React from "react";
-
-import Label from "../lib/components/Label";
-
-export default {
-  title: "Components/Label",
-  component: Label,
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component: '`import { Label } from "@bigbinary/neetoui/v2";`',
-      },
-    },
-  },
-};
-
-const Template = ({ children, ...args }) => <Label {...args}>{children}</Label>;
-
-export const Basic = Template.bind({});
-Basic.args = {
-  children: "This is a basic label",
-};
-
-export const Required = Template.bind({});
-Required.args = {
-  children: "This is a required label",
-  required: true,
-};