@sikka/hawa 0.0.90 → 0.0.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.90",
+  "version": "0.0.92",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -32,6 +32,7 @@
     "@storybook/storybook-deployer": "^2.8.11",
     "@storybook/theming": "^6.5.8",
     "babel-loader": "^8.2.2",
+    "clsx": "^1.2.1",
     "crypto-js": "^4.1.1",
     "emotion-theming": "^11.0.0",
     "framer-motion": "^4.1.7",

package/src/blocks/AuthForms/SignInForm.js

@@ -3,7 +3,8 @@ import {
   HawaTextField,
   HawaLogoButton,
   HawaAlert,
-  HawaButton
+  HawaButton,
+  HawaPhoneInput
 } from "../../elements";
 import { Controller, useForm } from "react-hook-form";
 import PropTypes from "prop-types";
@@ -51,7 +52,7 @@ export const SignInForm = (props) => {
               }
             }}
           />
-        ) : (
+        ) : props.signInType === "username" ? (
           <Controller
             control={control}
             name="username"
@@ -70,6 +71,13 @@ export const SignInForm = (props) => {
               required: props.texts.usernameRequired
             }}
           />
+        ) : (
+          <Controller
+            control={control}
+            name="phone"
+            render={({ field }) => <HawaPhoneInput label="Phone number" />}
+            rules={{ required: props.texts.passwordRequiredText }}
+          />
         )}
         <Controller
           control={control}

package/src/elements/HawaAccordian.js

@@ -18,18 +18,13 @@ const AccordionItem = (props) => {
       <h2 id={"accordion-collapse-heading-" + props.count}>
         <button
           type="button"
-          className={
-            props.count === 0 ? roundedTop : noRounding
-            // : props.count === -1
-            // ? roundedBottom
-            // : noRounding
-          }
+          className={props.count === 0 ? roundedTop : noRounding}
           onClick={() => setCollapse(!collapse)}
           data-accordion-target={"#accordion-collapse-body-" + props.count}
           aria-expanded="true"
           aria-controls={"accordion-collapse-body-" + props.count}
         >
-          <span>What is Flowbite?</span>
+          <span>{props.title}</span>
           <svg
             data-accordion-icon=""
             className={`w-6 h-6 ${collapse ? "" : "rotate-180"}  shrink-0`}
@@ -52,20 +47,7 @@ const AccordionItem = (props) => {
       >
         <div className={props.count === -1 ? accPaperRounded : accPaper}>
           <p className="mb-2 text-gray-500 dark:text-gray-400">
-            Flowbite is an open-source library of interactive components built
-            on top of Tailwind CSS including buttons, dropdowns, modals,
-            navbars, and more.
-          </p>
-          <p className="text-gray-500 dark:text-gray-400">
-            Check out this guide to learn how to{" "}
-            <a
-              href="/docs/getting-started/introduction/"
-              className="text-blue-600 dark:text-blue-500 hover:underline"
-            >
-              get started
-            </a>{" "}
-            and start developing websites even faster with components on top of
-            Tailwind CSS.
+            {props.content}
           </p>
         </div>
       </div>
@@ -73,20 +55,14 @@ const AccordionItem = (props) => {
   );
 };
 export const HawaAccordian = (props) => {
-  let accordionContent = [
-    { title: "etete", content: "teoite" },
-    { title: "etete", content: "teoite" },
-    { title: "etete", content: "teoite" },
-    { title: "etete", content: "teoite" }
-  ];
   return (
     <div id="accordion-collapse" data-accordion="collapse">
-      {accordionContent.map((acc, i) => {
+      {props.content.map((acc, i) => {
         return (
           <AccordionItem
             title={acc.title}
             content={acc.content}
-            count={accordionContent.length - 1 === i ? -1 : i}
+            count={props.content.length - 1 === i ? -1 : i}
           />
         );
       })}
@@ -94,6 +70,8 @@ export const HawaAccordian = (props) => {
   );
 };
 HawaAccordian.propTypes = {
-  title: PropTypes.string,
-  content: PropTypes.string
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    content: PropTypes.string
+  })
 };

package/src/elements/HawaDrawer.js

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from "react";
+import { AiOutlineClose } from "react-icons/ai";
+import clsx from "clsx";
+
+export const HawaDrawer = ({ open, setOpen, position, heading, children }) => {
+  const [openDrawer, setOpenDrawer] = useState(open);
+
+  const leftDrawer =
+    "w-60 z-50 h-full absolute overflow-x-hidden top-0 left-0 border-r";
+  const rightDrawer =
+    "w-60 z-50 h-full absolute overflow-x-hidden top-0 right-0 border-l";
+
+  //   useEffect(() => {
+  //     setOpenDrawer(true);
+  //   }, [open]);
+
+  const childrenWithProps = React.Children.map(children, (child) => {
+    if (React.isValidElement(child) && child.type.name == "DrawerHeader") {
+      return React.cloneElement(child, {
+        closeButton: setOpenDrawer,
+        children: child.props.children
+      });
+    }
+    if (React.isValidElement(child) && child.type.name == "DrawerBody") {
+      return React.cloneElement(child, { children: child.props.children });
+    }
+    if (React.isValidElement(child) && child.type.name == "DrawerFooter") {
+      return React.cloneElement(child, { children: child.props.children });
+    }
+  });
+
+  const drawerClass =
+    open && position == "left"
+      ? clsx("block", leftDrawer)
+      : open && position == "right"
+      ? clsx("block", rightDrawer)
+      : "hidden";
+
+  return <div className={drawerClass}>{childrenWithProps}</div>;
+};
+
+export const DrawerHeader = ({ children, closeButton }) => {
+  return (
+    <div className="  w-full flex flex-row justify-between items-center py-4 px-1 border-b">
+      {children}
+      <div
+        className="justify-self-end hover:cursor-pointer border p-1 rounded"
+        onClick={() => {
+          closeButton(false);
+        }}
+      >
+        <AiOutlineClose size={20} strokeWidth={2} />
+      </div>
+    </div>
+  );
+};
+
+export const DrawerBody = ({ children }) => {
+  return <div className="p-1">{children}</div>;
+};
+
+export const DrawerFooter = ({ children }) => {
+  return (
+    <div className="absolute w-full py-4 px-1 border-t bottom-0">
+      {children}
+    </div>
+  );
+};

package/src/elements/HawaPhoneInput.js

@@ -19,7 +19,7 @@ const Option = ({
   </div>
 );
 
-export const HawaPhoneInput = ({ preferredCountry }) => {
+export const HawaPhoneInput = ({ preferredCountry, label }) => {
   const [code, setCode] = useState(preferredCountry ?? "");
   const [selectedCountry, setSelectedCountry] = useState("+966");
   const [tel, setTel] = useState("");
@@ -43,65 +43,71 @@ export const HawaPhoneInput = ({ preferredCountry }) => {
 
   return (
     <div
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "center",
-        alignItems: "center",
-        height: "100%"
-      }}
+      // style={{
+      //   justifyContent: "center",
+      //   alignItems: "center",
+      //   height: "100%"
+      // }}
+      className="flex flex-col mb-3"
     >
-      <Select
-        styles={{
-          input: (base) => ({
-            ...base,
-            fontSize: "0.875rem",
-            "input:focus": {
-              boxShadow: "none"
-            },
-            lineHeight: "1.25rem",
-            padding: "0.37rem"
-          }),
-          singleValue: (base) => ({
-            ...base,
-            fontSize: "0.875rem",
-            textAlign: "right"
-          }),
-          control: (base) => ({
-            ...base,
-            width: 64,
-            borderRadius: "0.5rem",
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0
-          }),
-          menu: (base) => ({
-            ...base,
-            width: 190,
-            borderRadius: "0.5rem"
-          })
-        }}
-        components={{
-          Option,
-          DropdownIndicator: () => null,
-          IndicatorSeparator: () => null
-        }}
-        options={Countries}
-        isCreatable={false}
-        isMulti={false}
-        isSearchable={true}
-        isClearable={false}
-        placeholder="+966"
-        defaultValue={Countries[0]}
-        onInputChange={() => console.log("changed to")}
-        onChange={(newValue, action) => {
-          console.log("test n", newValue);
-          setSelectedCountry(newValue);
-        }}
-      />
-      <input
-        type="number"
-        className="bg-gray-50 appearance-none border rounded-l-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 border-l-0"
-      />
+      {label && (
+        <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+          {label}
+        </label>
+      )}
+      <div className="flex flex-row">
+        <Select
+          styles={{
+            input: (base) => ({
+              ...base,
+              fontSize: "0.875rem",
+              "input:focus": {
+                boxShadow: "none"
+              },
+              lineHeight: "1.25rem",
+              padding: "0.37rem"
+            }),
+            singleValue: (base) => ({
+              ...base,
+              fontSize: "0.875rem",
+              textAlign: "right"
+            }),
+            control: (base) => ({
+              ...base,
+              width: 64,
+              borderRadius: "0.5rem",
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0
+            }),
+            menu: (base) => ({
+              ...base,
+              width: 190,
+              borderRadius: "0.5rem"
+            })
+          }}
+          components={{
+            Option,
+            DropdownIndicator: () => null,
+            IndicatorSeparator: () => null
+          }}
+          options={Countries}
+          isCreatable={false}
+          isMulti={false}
+          isSearchable={true}
+          isClearable={false}
+          placeholder="+966"
+          defaultValue={Countries[0]}
+          onInputChange={() => console.log("changed to")}
+          onChange={(newValue, action) => {
+            console.log("test n", newValue);
+            setSelectedCountry(newValue);
+          }}
+        />
+        <input
+          type="number"
+          className="bg-gray-50 appearance-none border rounded-l-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 border-l-0"
+        />
+      </div>
     </div>
   );
 };

package/src/elements/index.js

@@ -25,3 +25,4 @@ export * from "./HawaTooltip";
 export * from "./HawaTabs";
 export * from "./HawaModal";
 export * from "./HawaMenu";
+export * from "./HawaDrawer";

package/src/styles.css

@@ -580,15 +580,18 @@ video {
 .left-0 {
   left: 0px;
 }
+.top-0 {
+  top: 0px;
+}
 .right-0 {
   right: 0px;
 }
+.bottom-0 {
+  bottom: 0px;
+}
 .top-7 {
   top: 1.75rem;
 }
-.top-0 {
-  top: 0px;
-}
 .bottom-4 {
   bottom: 1rem;
 }
@@ -607,12 +610,12 @@ video {
 .-left-1 {
   left: -0.25rem;
 }
-.z-10 {
-  z-index: 10;
-}
 .z-50 {
   z-index: 50;
 }
+.z-10 {
+  z-index: 10;
+}
 .z-40 {
   z-index: 40;
 }
@@ -685,15 +688,15 @@ video {
 .-mb-px {
   margin-bottom: -1px;
 }
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
 .ml-1 {
   margin-left: 0.25rem;
 }
 .mt-2 {
   margin-top: 0.5rem;
 }
-.mb-3 {
-  margin-bottom: 0.75rem;
-}
 .mt-5 {
   margin-top: 1.25rem;
 }
@@ -772,6 +775,9 @@ video {
 .w-4 {
   width: 1rem;
 }
+.w-60 {
+  width: 15rem;
+}
 .w-44 {
   width: 11rem;
 }
@@ -940,6 +946,9 @@ video {
   --tw-divide-opacity: 1;
   border-color: rgb(17 24 39 / var(--tw-divide-opacity));
 }
+.justify-self-end {
+  justify-self: end;
+}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1012,6 +1021,12 @@ video {
 .border-t-0 {
   border-top-width: 0px;
 }
+.border-r {
+  border-right-width: 1px;
+}
+.border-l {
+  border-left-width: 1px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1169,6 +1184,14 @@ video {
   padding-top: 0px;
   padding-bottom: 0px;
 }
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1189,10 +1212,6 @@ video {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
 .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
@@ -1253,6 +1272,10 @@ video {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
 .font-medium {
   font-weight: 500;
 }
@@ -1292,10 +1315,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-.text-blue-600 {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
-}
 .text-blue-700 {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));
@@ -1316,6 +1335,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
 .text-red-600 {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));
@@ -1447,6 +1470,9 @@ body {
   --tw-content: '';
   content: var(--tw-content);
 }
+.hover\:cursor-pointer:hover {
+  cursor: pointer;
+}
 .hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -1626,10 +1652,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
-.dark .dark\:text-blue-500 {
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
-}
 .dark .dark\:text-blue-800 {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
@@ -1658,6 +1680,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
+.dark .dark\:text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
 .dark .dark\:text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));

package/tailwind.config.js

@@ -7,6 +7,24 @@ module.exports = {
       plex: ["IBM Plex Sans Arabic"]
     },
     extend: {
+      transitionProperty: {
+        height: "height"
+      },
+      keyframes: {
+        collapse: {
+          "0%,100%": { transform: "scaleY(0)" },
+          "10%": { transform: "scaleY(0)" },
+          "20%": { transform: "scaleY(0)" },
+          "30%": { transform: "scaleY(0)" },
+          "40%": { transform: "scaleY(0)" },
+          "50%": { transform: "scaleY(0)" },
+          "60%": { transform: "scaleY(0)" },
+          // "100%": { transform: "scaleY(1)" },
+        }
+      },
+      animation: {
+        collapsing: "collapse"
+      },
       colors: {
         primary: {
           200: "#C4DEFD",