@sikka/hawa 0.0.1 → 0.0.2

package/src/components/Hawa/StyledTooltip/StyledTooltip.js

@@ -0,0 +1,46 @@
+import React, { useState, useContext } from "react";
+import Tooltip from "@material-ui/core/Tooltip";
+
+export const StyledTooltip = (props) => {
+  const screenSize = {
+    width: 1500,
+    height: 200
+  };
+  return (
+    <Tooltip
+      placement={screenSize.width > 400 ? "bottom-center" : "top-center"}
+      enterTouchDelay={100}
+      title={
+        props.hint ? (
+          props.hint
+        ) : (
+          <div>
+            <div
+              style={{
+                fontSize: 20,
+                fontWeight: 800,
+                padding: 10,
+                paddingBottom: 5,
+                textAlign: "center"
+              }}
+            >
+              {props.hintTitle}
+            </div>
+            <div
+              style={{
+                fontSize: 13,
+                fontWeight: 100,
+                padding: 10,
+                textAlign: "center"
+              }}
+            >
+              {props.hintContent}
+            </div>
+          </div>
+        )
+      }
+    >
+      {props.children}
+    </Tooltip>
+  );
+};

package/src/components/Hawa/StyledTooltip/index.js

@@ -0,0 +1 @@
+export * from "./StyledTooltip.js";

package/src/components/Hawa/TabPanel/TabPanel.jsx

@@ -34,5 +34,4 @@ export const TabPanel = (props) => {
       )}
     </div>
   );
-}
-
+};

package/src/components/Hawa/TextArea/TextArea.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import {StyledInputLabel} from "../InputLabel";
+import { StyledInputLabel } from "../InputLabel";
 
 export const StyledTextArea = (props) => {
   const { control } = useFormContext();
@@ -13,16 +13,16 @@ export const StyledTextArea = (props) => {
           {inputLabel ? <StyledInputLabel label={inputLabel} /> : null}
           <textarea
             style={{
-              color : "black",
-              backgroundColor : props.bgColor || "white",
-              borderRadius : props.bdRadius || 10,
-              borderBottom : "none",
-              border : "none",
-              width : "100%",
-              padding : 0,
-              margin : 0,
-              marginBottom : 0,
-              resize : props.resize || "vertical"
+              color: "black",
+              backgroundColor: props.bgColor || "white",
+              borderRadius: props.bdRadius || 10,
+              borderBottom: "none",
+              border: "none",
+              width: "100%",
+              padding: 0,
+              margin: 0,
+              marginBottom: 0,
+              resize: props.resize || "vertical"
             }}
             value={field.value ?? ""}
             {...field}
@@ -36,4 +36,3 @@ export const StyledTextArea = (props) => {
     />
   );
 };
-

package/src/components/Hawa/TextField/{TextField.jsx → TextField.js}

@@ -1,8 +1,12 @@
-import React from "react"
-import TextField from "@material-ui/core/TextField"
-import { StyledInputLabel } from "../InputLabel"
+import React, { useState, useContext } from "react";
+import TextField from "@material-ui/core/TextField";
+import { StyledInputLabel } from "../InputLabel";
+import PropTypes from "prop-types";
+import { ThemeProvider } from "../HawaProvider";
 
 export const StyledTextField = (props) => {
+  const theme = useContext(ThemeProvider);
+
   return (
     <div>
       {props.inputLabel ? <StyledInputLabel label={props.inputLabel} /> : null}
@@ -10,12 +14,12 @@ export const StyledTextField = (props) => {
         fullWidth={true}
         style={{
           color: "white",
-          backgroundColor: props.bgColor || "white",
+          backgroundColor: theme.inputColor,
           borderRadius: props.bdRadius || 10,
           borderBottom: "none",
-          padding : props.padding || 5,
+          padding: props.padding || 5,
           border: "none",
-          width: "100%",
+          width: "100%"
         }}
         helperText={props.helperText}
         type={props.type ? props.type : "text"}
@@ -26,16 +30,25 @@ export const StyledTextField = (props) => {
                 inputMode: "numeric",
                 min: "0",
                 max: "9999999",
-                step: "0.01",
+                step: "0.01"
               }
             : {}
         }
         InputProps={{
           disableUnderline: true,
-          onWheelCapture: (e) => e.target.blur(),
+          onWheelCapture: (e) => e.target.blur()
         }}
         value={props.value ? props.value : null}
       />
     </div>
-  )
-}
+  );
+};
+
+StyledTextField.propTypes = {
+  type: PropTypes.oneOf(["text", "number"]),
+  helperText: PropTypes.string
+};
+
+// StyledTextField.defaultProps = {
+//   type: "text"
+// };

package/src/components/Hawa/TextField/index.js

@@ -1 +1 @@
-export * from "./TextField.jsx";
+export * from "./TextField.js";

package/src/components/Hawa/index.js

@@ -8,4 +8,3 @@ export * from "./SelectedField";
 export * from "./TabPanel";
 export * from "./TextArea";
 export * from "./TextField";
- 

package/src/stories/AdaptiveButton.stories.js

@@ -5,15 +5,15 @@ import { HawaProvider } from "../components/Hawa/HawaProvider";
 
 const Template = (args) => {
   const theme = {
-    borderRadius: 20,
-    primaryColor: "green",
+    borderRadius: 10,
+    primaryColor: "#004fff",
     secondaryColor: "red",
     // margins: "10px",
     paddings: 10
   };
   return (
     <HawaProvider theme={theme}>
-      <AdaptiveButton {...args} />{" "}
+      <AdaptiveButton {...args} />
     </HawaProvider>
   );
 };
@@ -45,9 +45,7 @@ Light.args = {
   borderRadius: 5,
   icon: <CastIcon />,
   textColor: "#000000",
-
   buttonColor: "#f9f9f9"
-
   // placeholder: "Example ...",
   // defaultValue: "This is default value",
   // inputLabel: "Text Field",
@@ -62,7 +60,6 @@ Dark.args = {
   buttonColor: "#878787",
   textColor: "#ffffff",
   icon: <CastIcon />
-
   // placeholder: "Exemple ...",
   // defaultValue: "This is default value",
   // inputLabel: "Text Field",
@@ -76,7 +73,6 @@ Danger.args = {
   buttonColor: "#c0c0c0",
   danger: true,
   icon: <CastIcon />
-
   // placeholder: "Exemple ...",
   // defaultValue: "This is default value",
   // inputLabel: "Text Field",

package/src/stories/Alert.stories.js

@@ -0,0 +1,48 @@
+import React from "react";
+
+import { HawaProvider } from "../components/Hawa/HawaProvider";
+import { StyledAlert } from "../components/Hawa/StyledAlert/StyledAlert";
+
+const Template = (args) => {
+  const theme = {
+    borderRadius: 10,
+    primaryColor: "green",
+    secondaryColor: "red",
+    // margins: "10px",
+    paperColors: "#c6c6c6",
+    paddings: 10,
+    margins: 10
+  };
+  return (
+    <HawaProvider theme={theme}>
+      <StyledAlert text="teshht" />
+    </HawaProvider>
+  );
+};
+//types:
+//error (red)
+//warning (red)
+//notice (blue)
+
+export default {
+  title: "Components/Alert",
+  component: StyledAlert
+};
+
+export const Light = Template.bind({});
+Light.args = {
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  textColor: "#000000",
+  buttonColor: "#f9f9f9"
+};
+
+export const Dark = Template.bind({});
+Dark.args = {
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  buttonColor: "#878787",
+  textColor: "#ffffff"
+};

package/src/stories/AuthForm.stories.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { NewPasswordForm } from "../components/Hawa/AuthForms/NewPasswordForm";
+import { ResetPasswordForm } from "../components/Hawa/AuthForms/ResetPasswordForm";
+import { SignInForm } from "../components/Hawa/AuthForms/SignInForm";
+import { SignUpForm } from "../components/Hawa/AuthForms/SignUpForm";
+import { HawaProvider } from "../components/Hawa/HawaProvider";
+
+export default {
+  title: "Blocks/AuthForms",
+  component: SignInForm,
+  argsTypes: {
+    viaGoogle: { control: "boolean" },
+    viaGithub: { control: "boolean" },
+    viaTwitter: { control: "boolean" },
+    viaFacebook: { control: "boolean" }
+  },
+  args: {}
+};
+
+const theme = {
+  borderRadius: 20,
+  primaryColor: "green",
+  secondaryColor: "red",
+  inputColor: "lightGrey",
+  paddings: 10
+};
+
+const SignInTemplate = (args) => {
+  return (
+    <HawaProvider theme={theme}>
+      <SignInForm {...args} />
+    </HawaProvider>
+  );
+};
+
+export const SignIn = SignInTemplate.bind({});
+SignIn.args = {
+  viaGoogle: true,
+  viaGithub: true,
+  viaTwitter: true,
+  viaFacebook: true
+};
+
+const SignUpTemplate = (args) => {
+  return (
+    <HawaProvider theme={theme}>
+      <SignUpForm {...args} />
+    </HawaProvider>
+  );
+};
+export const SignUp = SignUpTemplate.bind({});
+SignUp.args = {
+  viaGoogle: true,
+  viaGithub: true,
+  viaTwitter: true,
+  viaFacebook: true
+};
+
+const ResetPasswordTemplate = (args) => {
+  return (
+    <HawaProvider theme={theme}>
+      <ResetPasswordForm {...args} />
+    </HawaProvider>
+  );
+};
+export const ResetPassword = ResetPasswordTemplate.bind({});
+ResetPassword.args = {};
+const NewPasswordTemplate = (args) => {
+  return (
+    <HawaProvider theme={theme}>
+      <NewPasswordForm {...args} />
+    </HawaProvider>
+  );
+};
+export const NewPassword = NewPasswordTemplate.bind({});
+NewPassword.args = {};

package/src/stories/Box.stories.js

@@ -0,0 +1,45 @@
+import React from "react";
+import AdaptiveButton from "../components/Hawa/AdaptiveButton/AdaptiveButton";
+import { Box } from "../components/Hawa/Box";
+import { HawaProvider } from "../components/Hawa/HawaProvider";
+
+const Template = (args) => {
+  const theme = {
+    borderRadius: 10,
+    primaryColor: "green",
+    secondaryColor: "red",
+    // margins: "10px",
+    paperColors: "#c6c6c6",
+    paddings: 10,
+    margins: 10
+  };
+  return (
+    <HawaProvider theme={theme}>
+      <Box>Box 1</Box>
+      <Box>Box 2</Box>
+      <Box>Box 3</Box>
+    </HawaProvider>
+  );
+};
+export default {
+  title: "Layout/Box",
+  component: AdaptiveButton
+};
+
+export const Light = Template.bind({});
+Light.args = {
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  textColor: "#000000",
+  buttonColor: "#f9f9f9"
+};
+
+export const Dark = Template.bind({});
+Dark.args = {
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  buttonColor: "#878787",
+  textColor: "#ffffff"
+};

package/src/stories/CheckBox.stories.js

@@ -16,7 +16,8 @@ export default {
     }
   },
   args: {
-    defaultValue: true
+    defaultValue: true,
+    disabled: true
   }
 };
 

package/src/stories/RadioSelector.stories.js

@@ -35,7 +35,6 @@ export default {
 };
 
 export const Light = Template.bind({});
-export const Dark = Template.bind({});
 
 Light.args = {
   options: [
@@ -47,11 +46,12 @@ Light.args = {
   borderRadius: 12,
   defaultValue: "option2",
   bgSelectedColor: "red",
-  textSelectedColor: "black",
+  textSelectedColor: "white",
   handleChange: () => {
     console.log("handleChange goes here");
   }
 };
+export const Dark = Template.bind({});
 Dark.args = {
   options: [
     { text: "Option 1", label: "option1" },

package/src/stories/TextField.stories.js

@@ -8,36 +8,26 @@ const Template = (args) => {
 
 export default {
   title: "Components/TextField",
-  component: Light,
+  component: StyledTextField,
   argsTypes: {
-    defaultValue: {
-      control: { type: "text" }
-    },
-    value: {
-      control: { type: "text" }
-    },
-    inputLabel: {
-      control: { type: "text" }
-    },
-    bdRadius: {
-      contol: { type: "number" }
-    },
-    placeholder: {
-      control: { type: "text" }
-    },
     type: {
+      name: "type",
+      type: { name: "string", required: true },
       options: ["text", "number", "date"],
-      control: { type: "radio" }
-    },
-    padding: {
-      type: "number"
+      control: { type: "radio" },
+      defaultValue: "text",
+      description: "Styled Text Field",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Hello" }
+      }
     }
-  },
-  args: {
-    bdRadius: 15,
-    defaultValue: "Test",
-    type: "date"
   }
+  // args: {
+  //   bdRadius: 15,
+  //   defaultValue: "Test",
+  //   type: "date"
+  // }
 };
 
 export const Light = Template.bind({});
@@ -45,10 +35,11 @@ export const Dark = Template.bind({});
 
 Light.args = {
   placeholder: "Exemple ...",
-  defaultValue: "This is default value",
+  defaultValue: "This isko default value",
   inputLabel: "Text Field",
   bgColor: "lightgray",
   padding: 10
+  // type: "number"
 };
 Dark.args = {
   placeholder: "Exemple ...",

package/src/styles.css

@@ -163,11 +163,8 @@
   margin: 0px;
   margin-bottom: 0px;
   resize: vertical;
-
 }
 
-
-
 .input_label {
   font-size: 15px;
   font-weight: 500;

package/src/util.js

@@ -0,0 +1,20 @@
+const hexToRgb = (hex) => {
+  let d = hex?.split("#")[1];
+  var aRgbHex = d?.match(/.{1,2}/g);
+  var aRgb = [
+    parseInt(aRgbHex[0], 16),
+    parseInt(aRgbHex[1], 16),
+    parseInt(aRgbHex[2], 16)
+  ];
+  return aRgb;
+};
+const getTextColor = (backColor) => {
+  let rgbArray = hexToRgb(backColor);
+  if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {
+    return "#000000";
+  } else {
+    return "#ffffff";
+  }
+};
+
+export { hexToRgb, getTextColor };