@sikka/hawa 0.0.5 → 0.0.8

package/storybook-static/vendors~main.aa1d952a.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vendors~main.aa1d952a.iframe.bundle.js","sources":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;A","sourceRoot":""}

package/src/stories/AdaptiveButton.stories.js

@@ -1,80 +0,0 @@
-import React from "react";
-import CastIcon from "@mui/icons-material/Cast";
-import { HawaProvider } from "../themes/HawaProvider";
-import { AdaptiveButton } from "../ui";
-
-const Template = (args) => {
-  const theme = {
-    borderRadius: 10,
-    primaryColor: "#004fff",
-    secondaryColor: "red",
-    // margins: "10px",
-    paddings: 10
-  };
-  return (
-    <HawaProvider theme={theme}>
-      <AdaptiveButton {...args} />
-    </HawaProvider>
-  );
-};
-export default {
-  title: "UI/AdaptiveButton",
-  component: AdaptiveButton,
-  argsTypes: {
-    buttonLabel: { control: "text" },
-    borderRadius: { control: "number" },
-    buttonColor: { control: "color" },
-    padding: { control: "number" },
-    hintTitle: { control: "text" },
-    hintContent: { control: "text" }
-  },
-  args: {
-    // type: "text",
-    // buttonLabel: "Test"
-    // borderRadius: 15,
-    hintTitle: "test",
-    hintContent: "more test",
-    buttonColor: "#f9f9f9"
-  }
-};
-
-export const Light = Template.bind({});
-Light.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  icon: <CastIcon />,
-  textColor: "#000000",
-  buttonColor: "#f9f9f9"
-  // placeholder: "Example ...",
-  // defaultValue: "This is default value",
-  // inputLabel: "Text Field",
-  // padding: 10
-};
-
-export const Dark = Template.bind({});
-Dark.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  buttonColor: "#878787",
-  textColor: "#ffffff",
-  icon: <CastIcon />
-  // placeholder: "Exemple ...",
-  // defaultValue: "This is default value",
-  // inputLabel: "Text Field",
-  // padding: 10
-};
-export const Danger = Template.bind({});
-Danger.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  buttonColor: "#c0c0c0",
-  danger: true,
-  icon: <CastIcon />
-  // placeholder: "Exemple ...",
-  // defaultValue: "This is default value",
-  // inputLabel: "Text Field",
-  // padding: 10
-};

package/src/stories/Alert.stories.js

@@ -1,41 +0,0 @@
-import React from "react";
-
-import { HawaProvider } from "../themes/HawaProvider";
-import { StyledAlert } from "../ui";
-
-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="This is a warning" type="warning" />
-      <StyledAlert text="This is a regular notification" type="notification" />
-      <StyledAlert text="This is a danger alert" type="danger" />
-    </HawaProvider>
-  );
-};
-//types:
-//error (red)
-//warning (red)
-//notice (blue)
-
-export default {
-  title: "UI/Alert",
-  component: StyledAlert
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  textColor: "#000000",
-  buttonColor: "#f9f9f9"
-};

package/src/stories/BlocksStories/UserAccount.stories.js

@@ -1,46 +0,0 @@
-import React from "react";
-import {
-  UserProfile
-} from "../../blocks/Account";
-import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
-
-export default {
-  title: "Blocks/UserProfile",
-  component: UserProfile,
-  argsTypes: {
-    viaGoogle: { control: "boolean" },
-    viaGithub: { control: "boolean" },
-    viaTwitter: { control: "boolean" },
-    viaFacebook: { control: "boolean" }
-  },
-  args: {}
-};
-
-const theme = {
-  ...defaultTheme,
-  paddings: 20
-};
-
-const UserProfileTemplate = (args) => {
-  return (
-    <HawaProvider theme={{ ...defaultTheme, ...theme }}>
-      <UserProfile {...args} />
-    </HawaProvider>
-  );
-};
-
-export const Success = UserProfileTemplate.bind({});
-Success.args = {
-  viaGoogle: true,
-  viaGithub: true,
-  viaTwitter: true,
-  viaFacebook: true
-};
-export const Failed = UserProfileTemplate.bind({});
-Failed.args = {
-  viaGoogle: true,
-  viaGithub: true,
-  viaTwitter: true,
-  viaFacebook: true
-};
-

package/src/stories/GlobalVariables.stories.js

@@ -1,44 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-export const GlobalVariables = (args) => {
-  //   const methods = useForm();
-  return <div>TESTING COMPONENT</div>;
-};
-export const AnotherComponent = (args) => {
-  //   const methods = useForm();
-  return <div>TESTING COMPONENT</div>;
-};
-AnotherComponent.propTypes = {
-  textLabel: PropTypes.string
-};
-export default {
-  title: "TestTitle",
-  component: [GlobalVariables, AnotherComponent],
-  argTypes: {
-    resize: {
-      description: "overwritten description",
-      table: {
-        type: {
-          summary: "something short"
-        },
-        defaultValue: { summary: "Hello" }
-      },
-      options: ["vertical", "horizontal", "both"],
-      control: { type: "select" }
-    },
-    label: {
-      description: "overwritten description",
-      table: {
-        type: {
-          summary: "something short",
-          detail: "something really really long"
-        },
-        defaultValue: { summary: "Hello" }
-      },
-      control: {
-        type: null
-      }
-    }
-  }
-};

package/src/stories/InputLabel.stories.js

@@ -1,92 +0,0 @@
-import { storiesOf } from "@storybook/react";
-
-import "../styles.css";
-
-const stories = storiesOf("InputLabel", module);
-
-export default {
-  title: "Components/InputLabel",
-  component: [
-    StyledCheckBox,
-    StyledTextFieldT,
-    StyledTextAreaT,
-    StyledRadioSeletorT
-  ],
-  argTypes: {
-    resize: {
-      options: ["vertical", "horizontal", "both"],
-      control: { type: "radio" }
-    }
-  }
-};
-
-/****************************/
-// STYLED CHECKBOX TEMPLATE
-// const StyledCheckBoxTemplate = (args) => {
-//   const methods = useForm();
-//   return (
-//     <FormProvider {...methods}>
-//       <StyledCheckbox {...args} />
-//     </FormProvider>
-//   );
-// };
-// export const StyledCheckBox = StyledCheckBoxTemplate.bind({});
-// StyledCheckBox.args = {
-//   name: "Components/InputLabel",
-//   label: "CheckBox",
-//   color: "blue",
-//   rules: { required: true },
-//   defaultValue: true
-// };
-/****************************/
-
-/****************************/
-// STYLED TextField TEMPLATE
-// const StyledTextFieldTemplate = (args) => {
-//   const methods = useForm();
-//   return (
-//     <FormProvider {...methods}>
-//       <StyledTextField {...args} />
-//     </FormProvider>
-//   );
-// };
-
-// export const StyledTextFieldT = StyledTextFieldTemplate.bind({});
-// StyledTextFieldT.args = {
-//   name: "Components/InputLabel",
-//   inputLabel: "Label",
-//   bdRadius: 12,
-//   bgColor: "lightgray",
-//   helperText: "This is HelperText",
-//   type: "text",
-//   placeholder: "exemple ..."
-// };
-
-/****************************/
-// Radio Selector Template
-// const styledRadioSelectorTempalte = (args) => {
-//   const methods = useForm();
-
-//   return (
-//     <FormProvider {...methods}>
-//       <StyledRadioSelector {...args} />
-//     </FormProvider>
-//   );
-// };
-
-// export const StyledRadioSeletorT = styledRadioSelectorTempalte.bind({});
-// StyledRadioSeletorT.args = {
-//   name: "Components/InputLabel",
-//   shouldUnregister: true,
-//   options: [
-//     { text: "Option 1", label: "option1" },
-//     { text: "Option 2", label: "option2" },
-//     { text: "Option 3", label: "option3" }
-//   ],
-//   selectedColor: "blue",
-//   bdRadius: 12,
-//   defaultValue: "option2",
-//   bgSelectedColor: "red",
-//   textSelectedColor: "black"
-// };
-/****************************/

package/src/stories/RadioSelector.stories.js

@@ -1,69 +0,0 @@
-import React from "react";
-import { StyledRadioSelector } from "../ui";
-import { HawaProvider } from "../themes/HawaProvider";
-import "../styles.css";
-
-const Template = (args) => {
-  const theme = {
-    borderRadius: 5,
-    primaryColor: "green",
-    secondaryColor: "red",
-    // margins: "10px",
-    paddings: 10
-  };
-  return (
-    <HawaProvider theme={theme}>
-      <StyledRadioSelector {...args} />
-    </HawaProvider>
-  );
-};
-export default {
-  title: "Components/RadioSelector",
-  component: Light,
-  argTypes: {
-    options: {
-      control: "array"
-    }
-  },
-  args: {
-    options: [
-      { text: "Option 1", label: "option1" },
-      { text: "Option 2", label: "option2" },
-      { text: "Option 3", label: "option3" }
-    ]
-  }
-};
-
-export const Light = Template.bind({});
-
-Light.args = {
-  options: [
-    { text: "Option 1", label: "option1" },
-    { text: "Option 2", label: "option2" },
-    { text: "Option 3", label: "option3" }
-  ],
-  selectedColor: "blue",
-  borderRadius: 12,
-  defaultValue: "option2",
-  bgSelectedColor: "red",
-  textSelectedColor: "white",
-  handleChange: () => {
-    console.log("handleChange goes here");
-  }
-};
-export const Dark = Template.bind({});
-Dark.args = {
-  options: [
-    { text: "Option 1", label: "option1" },
-    { text: "Option 2", label: "option2" },
-    { text: "Option 3", label: "option3" }
-  ],
-  selectedColor: "blue",
-  borderRadius: 12,
-  defaultValue: "option2",
-  bgSelectedColor: "blue",
-  textSelectedColor: "white",
-  handleChange: () => {
-    console.log("handleChange goes here");
-  }
-};

package/src/ui/ApplePayButton.js

@@ -1,94 +0,0 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import Button from "@mui/material/Button";
-import { styled, darken } from "@mui/material/styles";
-
-import GitHubIcon from "@mui/icons-material/GitHub";
-
-export const ApplePayButton = (props) => {
-  const theme = useContext(ThemeProvider);
-  let buttonStyle = {};
-
-  console.log(Object.keys(theme.actionButton));
-  let currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
-  );
-  if (currentTheme) {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: 0,
-      marginTop: theme.actionButton[currentTheme].margin,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: theme.actionButton[currentTheme].borderRadius,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  } else {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      marginTop: theme.margins,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: 0,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  }
-
-  const StyledButton = styled(Button)(({ theme }) => {
-    return {
-      // "label + &": {
-      //   marginTop: theme.spacing(3)
-      // },
-
-      borderRadius: 4,
-      position: "relative",
-      border: "1px solid #ced4da",
-      fontSize: 16,
-      // width: "auto",
-      height: 50,
-      // padding: "10px 12px",
-      ...buttonStyle,
-      "&:focus": {
-        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
-        borderColor: theme.palette.primary.main
-      }
-    };
-  });
-
-  return (
-    <StyledButton
-      //  style={buttonStyle}
-      onClick={props.handleClick}
-    >
-      <img
-        src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png"
-        height={40}
-      />{" "}
-      <div style={{ width: 10 }} />
-      <p
-        style={{
-          color: "black",
-          fontSize: 14,
-          textAlign: "center",
-          letterSpacing: 0.4,
-          fontFamily: "Roboto",
-          fontWeight: 500
-        }}
-      >
-        {props.buttonText}
-      </p>
-    </StyledButton>
-  );
-};

package/src/ui/GithubButton.js

@@ -1,91 +0,0 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import Button from "@mui/material/Button";
-import { styled, darken } from "@mui/material/styles";
-
-import GitHubIcon from "@mui/icons-material/GitHub";
-
-export const GithubButton = (props) => {
-  const theme = useContext(ThemeProvider);
-  let buttonStyle = {};
-
-  console.log(Object.keys(theme.actionButton));
-  let currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
-  );
-  if (currentTheme) {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: 0,
-      marginTop: theme.actionButton[currentTheme].margin,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: theme.actionButton[currentTheme].borderRadius,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  } else {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      marginTop: theme.margins,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: 0,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  }
-
-  const StyledButton = styled(Button)(({ theme }) => {
-    return {
-      // "label + &": {
-      //   marginTop: theme.spacing(3)
-      // },
-
-      borderRadius: 4,
-      position: "relative",
-      border: "1px solid #ced4da",
-      fontSize: 16,
-      // width: "auto",
-      height: 50,
-      // padding: "10px 12px",
-      ...buttonStyle,
-      "&:focus": {
-        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
-        borderColor: theme.palette.primary.main
-      }
-    };
-  });
-
-  return (
-    <StyledButton
-      //  style={buttonStyle}
-      onClick={props.handleClick}
-    >
-      <GitHubIcon />
-      <div style={{ width: 10 }} />
-      <p
-        style={{
-          color: "black",
-          fontSize: 14,
-          textAlign: "center",
-          letterSpacing: 0.4,
-          fontFamily: "Roboto",
-          fontWeight: 500
-        }}
-      >
-        {props.buttonText}
-      </p>
-    </StyledButton>
-  );
-};

package/src/ui/GoogleButton.js

@@ -1,83 +0,0 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import { styled, darken } from "@mui/material/styles";
-import Button from "@mui/material/Button";
-
-export const GoogleButton = (props) => {
-  const theme = useContext(ThemeProvider);
-  let buttonStyle = {};
-
-  console.log(Object.keys(theme.actionButton));
-  let currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
-  );
-  if (currentTheme) {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      marginTop: theme.layout[currentTheme].margin,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: theme.layout[currentTheme].borderRadius,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  } else {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      marginTop: theme.margins,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: 0,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  }
-  const StyledButton = styled(Button)(({ theme }) => {
-    return {
-      // "label + &": {
-      //   marginTop: theme.spacing(3)
-      // },
-
-      borderRadius: 4,
-      position: "relative",
-      border: "1px solid #ced4da",
-      fontSize: 16,
-      // width: "auto",
-      height: 50,
-      // padding: "10px 12px",
-      ...buttonStyle,
-      "&:focus": {
-        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
-        borderColor: theme.palette.primary.main
-      }
-    };
-  });
-  return (
-    <StyledButton onClick={props.handleClick}>
-      <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" />
-      <div style={{ width: 10 }} />
-      <p
-        style={{
-          color: "black",
-          fontSize: 14,
-          textAlign: "center",
-          letterSpacing: 0.4,
-          fontFamily: "Roboto",
-          fontWeight: 500
-        }}
-      >
-        {props.buttonText}
-      </p>
-    </StyledButton>
-  );
-};