@bigbinary/neetoui 2.0.89 → 2.0.93

package/stories/Toastr.stories.jsx

@@ -1,63 +0,0 @@
-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/v2";`',
-      },
-    },
-  },
-  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>
-    </>
-  );
-};

package/stories/Tooltip.stories.jsx

@@ -1,137 +0,0 @@
-import React from "react";
-
-import Button from "../lib/components/Button";
-import Tooltip from "../lib/components/Tooltip";
-import Typography from "../lib/components/Typography";
-
-export default {
-  title: "Overlays/Tooltip",
-  component: Tooltip,
-  subcomponents: { Button },
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component: '`import { Tooltip } from "@bigbinary/neetoui/v2";`',
-      },
-    },
-  },
-};
-
-export const FollowCursor = (args) => {
-  return (
-    <div className="space-y-8 p-10">
-      <Tooltip
-        placement={"top"}
-        followCursor={"horizontal"}
-        content={"Content is string"}
-      >
-        <Button style="secondary" label="Follow Cursor" />
-      </Tooltip>
-    </div>
-  );
-};
-
-export const JSXContentInside = (args) => {
-  return (
-    <div className="space-y-8 p-10">
-      <Tooltip
-        placement={"top"}
-        trigger={"click"}
-        content={
-          <span>
-            Content is a <b>JSX</b> <u>Element</u>
-          </span>
-        }
-      >
-        <Button style="secondary" label="On Click" />
-      </Tooltip>
-    </div>
-  );
-};
-
-export const Placements = () => {
-  return (
-    <div className="space-y-8 p-10">
-      <div className="flex items-center justify-start gap-8">
-        <Tooltip placement={"top"} content={"Tooltip"}>
-          <Button style="secondary" label="top" />
-        </Tooltip>
-        <Tooltip placement={"top-start"} content={"Tooltip"}>
-          <Button style="secondary" label="top-start" />
-        </Tooltip>
-        <Tooltip placement={"top-end"} content={"Tooltip"}>
-          <Button style="secondary" label="top-end" />
-        </Tooltip>
-      </div>
-      <div className="flex items-center justify-start gap-8">
-        <Tooltip placement={"right"} content={"Tooltip"}>
-          <Button style="secondary" label="right" />
-        </Tooltip>
-        <Tooltip placement={"right-start"} content={"Tooltip"}>
-          <Button style="secondary" label="right-start" />
-        </Tooltip>
-        <Tooltip placement={"right-end"} content={"Tooltip"}>
-          <Button style="secondary" label="right-end" />
-        </Tooltip>
-      </div>
-      <div className="flex items-center justify-start gap-8">
-        <Tooltip placement={"bottom"} content={"Tooltip"}>
-          <Button style="secondary" label="bottom" />
-        </Tooltip>
-        <Tooltip placement={"bottom-start"} content={"Tooltip"}>
-          <Button style="secondary" label="bottom-start" />
-        </Tooltip>
-        <Tooltip placement={"bottom-end"} content={"Tooltip"}>
-          <Button style="secondary" label="bottom-end" />
-        </Tooltip>
-      </div>
-      <div className="flex items-center justify-start gap-8">
-        <Tooltip placement={"left"} content={"Tooltip"}>
-          <Button style="secondary" label="left" />
-        </Tooltip>
-        <Tooltip placement={"left-start"} content={"Tooltip"}>
-          <Button style="secondary" label="left-start" />
-        </Tooltip>
-        <Tooltip placement={"left-end"} content={"Tooltip"}>
-          <Button style="secondary" label="left-end" />
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
-
-export const Themes = () => {
-  return (
-    <div className="space-y-8 p-10">
-      <h2 className="text-xl">Theme</h2>
-      <div className="flex flex-row flex-wrap items-center justify-start gap-8">
-        <Tooltip placement={"top"} content={"Tooltip"} theme={"dark"}>
-          <Button style="secondary" label="dark" />
-        </Tooltip>
-        <Tooltip placement={"top"} content={"Tooltip"} theme={"light"}>
-          <Button style="secondary" label="light" />
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
-
-export const TooltipOnText = () => {
-  return (
-    <div className=" p-10 flex items-center justify-center space-x-6">
-      <Tooltip placement="top" content={"Tooltip"}>
-        <Typography>Top</Typography>
-      </Tooltip>
-      <Tooltip placement="bottom" content={"Tooltip"}>
-        <Typography>Bottom</Typography>
-      </Tooltip>
-      <Tooltip placement="left" content={"Tooltip"}>
-        <Typography>Left</Typography>
-      </Tooltip>
-      <Tooltip placement="right" content={"Tooltip"}>
-        <Typography>Right</Typography>
-      </Tooltip>
-    </div>
-  );
-};

package/stories/Typography.stories.jsx

@@ -1,134 +0,0 @@
-import React from "react";
-
-import Typography from "../lib/components/Typography";
-
-export default {
-  title: "Foundation/Typography",
-  component: Typography,
-  parameters: {
-    layout: "padded",
-  },
-};
-
-const Template = (args) => <Typography {...args}>Typography</Typography>;
-
-export const Heading1 = Template.bind({});
-Heading1.args = {
-  style: "h1",
-};
-
-export const Heading2 = Template.bind({});
-Heading2.args = {
-  style: "h2",
-};
-
-export const Heading3 = Template.bind({});
-Heading3.args = {
-  style: "h3",
-};
-
-export const Heading4 = Template.bind({});
-Heading4.args = {
-  style: "h4",
-};
-
-export const Heading5 = Template.bind({});
-Heading5.args = {
-  style: "h5",
-};
-
-export const Body1 = Template.bind({});
-Body1.args = {
-  style: "body1",
-};
-
-export const Body2 = Template.bind({});
-Body2.args = {
-  style: "body2",
-};
-
-export const Body3 = Template.bind({});
-Body3.args = {
-  style: "body3",
-};
-
-export const AllVariants = (args) => {
-  return (
-    <>
-      <Typography className="mb-4" style="h1">
-        h1. Heading - 32px
-      </Typography>
-      <Typography className="mb-4" style="h2">
-        h2. Heading - 24px
-      </Typography>
-      <Typography className="mb-4" style="h3">
-        h3. Heading - 20px
-      </Typography>
-      <Typography className="mb-4" style="h4">
-        h4. Heading - 16px
-      </Typography>
-      <Typography className="mb-4" style="h5">
-        h5. Heading - 14px
-      </Typography>
-      <Typography className="mb-4" style="h6">
-        h6. Heading - 12px
-      </Typography>
-      <Typography className="mb-4" style="body1">
-        body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-        blanditiis tenetur - 16px
-      </Typography>
-      <Typography className="mb-4" style="body2">
-        body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-        blanditiis tenetur - 14px
-      </Typography>
-      <Typography className="mb-4" style="body3">
-        body3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-        blanditiis tenetur - 12px
-      </Typography>
-      <div className="mb-4">
-        <Typography style="body3" component="del">
-          Represents a range of text that has been deleted from a document.
-        </Typography>
-      </div>
-      <div className="mb-4">
-        <Typography style="body3" component="ins">
-          Represents a range of text that has been added to a document.
-        </Typography>
-      </div>
-      <div className="mb-4">
-        <Typography style="body3" component="u">
-          This is rendered by default as a simple solid underline.
-        </Typography>
-      </div>
-      <div className="mb-4">
-        <Typography style="body3" component="i">
-          Represents a range of text that is set off from the normal text for
-          some reason, such as idiomatic text, technical terms, taxonomical
-          designations, among others.
-        </Typography>
-      </div>
-      <div className="mb-4">
-        <Typography style="body3" component="em">
-          Marks text that has stress emphasis
-        </Typography>
-      </div>
-      <div className="mb-4">
-        <Typography style="body3" component="strong">
-          Indicates that its contents have strong importance, seriousness, or
-          urgency.
-        </Typography>
-      </div>
-      <div className="mb-4">
-        <Typography style="body3" component="b">
-          Used to draw the reader's attention to the element's contents, which
-          are not otherwise granted special importance.
-        </Typography>
-      </div>
-      <div className="mb-4">
-        <Typography style="h4" component="code">
-          Code
-        </Typography>
-      </div>
-    </>
-  );
-};