@bigbinary/neetoui 2.0.57 → 2.0.61

package/stories/Modal.stories.jsx

@@ -3,70 +3,181 @@ import { Check } from "@bigbinary/neeto-icons";
 
 import Button from "../lib/components/Button";
 import Modal from "../lib/components/Modal";
-import Alert from "../lib/components/Alert";
+import Typography from "../lib/components/Typography";
 
 export default {
   title: "Overlays/Modal",
   component: Modal,
-  subcomponents: { Button, Alert },
+  subcomponents: { Button },
   parameters: {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Modal } from "@bigbinary/neetoui";`'
-      }
-    }
+        component: '`import { Modal } from "@bigbinary/neetoui/v2";`',
+      },
+    },
   },
 };
 
-export const Modals = () => {
+export const Default = () => {
   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>
+          <Typography style="h2">They're creepy & they're kooky</Typography>
         </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!
+          <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-4">
+        <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>
 
-      <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!"
-      />
+      <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

@@ -9,7 +9,7 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { PageLoader } from "@bigbinary/neetoui";`',
+        component: '`import { PageLoader } from "@bigbinary/neetoui/v2";`',
       },
     },
   },

package/stories/Pagination.stories.jsx

@@ -9,7 +9,7 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Pagination } from "@bigbinary/neetoui";`',
+        component: '`import { Pagination } from "@bigbinary/neetoui/v2";`',
       },
     },
   },

package/stories/Pane.stories.jsx

@@ -12,9 +12,9 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Pane } from "@bigbinary/neetoui";`'
-      }
-    }
+        component: '`import { Pane } from "@bigbinary/neetoui/v2";`',
+      },
+    },
   },
 };
 

package/stories/Radio.stories.jsx

@@ -9,7 +9,7 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Radio } from "@bigbinary/neetoui";`',
+        component: '`import { Radio } from "@bigbinary/neetoui/v2";`',
       },
     },
   },

package/stories/Select.stories.jsx

@@ -9,7 +9,7 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Select } from "@bigbinary/neetoui";`',
+        component: '`import { Select } from "@bigbinary/neetoui/v2";`',
       },
     },
   },

package/stories/Switch.stories.jsx

@@ -9,7 +9,7 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Switch } from "@bigbinary/neetoui";`',
+        component: '`import { Switch } from "@bigbinary/neetoui/v2";`',
       },
     },
   },

package/stories/Tab.stories.jsx

@@ -9,9 +9,9 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Tab } from "@bigbinary/neetoui";`'
-      }
-    }
+        component: '`import { Tab } from "@bigbinary/neetoui/v2";`',
+      },
+    },
   },
 };
 

package/stories/Tag.stories.jsx

@@ -10,9 +10,9 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Tag } from "@bigbinary/neetoui";`'
-      }
-    }
+        component: '`import { Tag } from "@bigbinary/neetoui/v2";`',
+      },
+    },
   },
 };
 

package/stories/Textarea.stories.jsx

@@ -9,7 +9,7 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Textarea } from "@bigbinary/neetoui";`',
+        component: '`import { Textarea } from "@bigbinary/neetoui/v2";`',
       },
     },
   },

package/stories/Toastr.stories.jsx

@@ -11,9 +11,9 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Toastr } from "@bigbinary/neetoui";`'
-      }
-    }
+        component: '`import { Toastr } from "@bigbinary/neetoui/v2";`',
+      },
+    },
   },
   subcomponents: { Button },
 };

package/stories/Tooltip.stories.jsx

@@ -11,9 +11,9 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Tooltip } from "@bigbinary/neetoui";`'
-      }
-    }
+        component: '`import { Tooltip } from "@bigbinary/neetoui/v2";`',
+      },
+    },
   },
 };
 

package/stories/Typography.stories.jsx

@@ -56,34 +56,34 @@ export const AllVariants = (args) => {
   return (
     <>
       <Typography className="mb-4" style="h1">
-        h1. Heading
+        h1. Heading - 32px
       </Typography>
       <Typography className="mb-4" style="h2">
-        h2. Heading
+        h2. Heading - 24px
       </Typography>
       <Typography className="mb-4" style="h3">
-        h3. Heading
+        h3. Heading - 20px
       </Typography>
       <Typography className="mb-4" style="h4">
-        h4. Heading
+        h4. Heading - 16px
       </Typography>
       <Typography className="mb-4" style="h5">
-        h5. Heading
+        h5. Heading - 14px
       </Typography>
       <Typography className="mb-4" style="h6">
-        h6. Heading
+        h6. Heading - 12px
       </Typography>
       <Typography className="mb-4" style="body1">
         body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-        blanditiis tenetur
+        blanditiis tenetur - 16px
       </Typography>
       <Typography className="mb-4" style="body2">
         body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-        blanditiis tenetur
+        blanditiis tenetur - 14px
       </Typography>
       <Typography className="mb-4" style="body3">
         body3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-        blanditiis tenetur
+        blanditiis tenetur - 12px
       </Typography>
       <div className="mb-4">
         <Typography style="body3" component="del">

package/tailwind.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-  prefix: "tw-",
   purge: {
     enabled: process.env.TAILWIND_ENV === "production" ? true : false,
     content: [
@@ -12,46 +11,7 @@ module.exports = {
     ],
     defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
     options: {
-      safelist: ["tw-flex", "tw-space-x-6", "tw-gap-8", "tw-p-4"],
+      safelist: ["flex", "space-x-6", "gap-8", "p-4"],
     },
   },
-  theme: {
-    extend: {
-      spacing: {
-        1.5: "0.375rem",
-        2.5: "0.625rem",
-        4.5: "1.125rem",
-        5: "1.25rem",
-        10: "2.5rem",
-        18: "4.5rem",
-        36: "8.5rem",
-        140: "35rem",
-        180: "45rem",
-      },
-      colors: {
-        orange: {
-          100: "#FFEDD5",
-          800: "#9A3412",
-        },
-      },
-      boxShadow: {
-        xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
-      },
-      zIndex: {
-        1: 1,
-      },
-      screens: {
-        sm: "768px",
-        md: "991px",
-      },
-    },
-  },
-  variants: {
-    borderColor: ["hover"],
-    boxShadow: ["hover"],
-    backgroundColor: ["hover", "active"],
-    color: ["hover", "active"],
-    margin: ["last"],
-    outline: ["focus"],
-  },
 };