@sikka/hawa 0.0.4 → 0.0.7

package/src/blocks/index.js

@@ -1,13 +0,0 @@
-'use strict';
-
-var _GooglePay = require('./Payment/Gateway/GooglePay');
-var _Payfort = require('./Payment/Gateway/Payfort');
-var _Paypal = require('./Payment/Gateway/Paypal');
-var _Wallet = require('./Payment/Gateway/Wallet');
-var _PaymentMethod = require('./Payment/PaymentMethod');
-
-exports.GooglePay = _GooglePay.default;
-exports.Payfort = _Payfort.default;
-exports.Paypal = _Paypal.default;
-exports.Wallet = _Wallet.default;
-exports.PaymentMethod = _PaymentMethod.default;

package/src/stories/ActionButton.stories.js

@@ -1,49 +0,0 @@
-import React from "react";
-
-import { defaultTheme, HawaProvider } from "../themes/HawaProvider";
-import { ActionButton } from "../ui";
-
-const Template = (args) => {
-  const theme = {
-    borderRadius: 10,
-    primaryColor: "green",
-    secondaryColor: "red",
-    // margins: "10px",
-    paperColors: "#c6c6c6",
-    paddings: 10,
-    margins: 10
-  };
-  return (
-    <HawaProvider theme={{ ...defaultTheme, ...args.theme }}>
-      <ActionButton secondary={args.secondary} text='here' />
-    </HawaProvider>
-  );
-};
-//types:
-//error (red)
-//warning (red)
-//notice (blue)
-
-export default {
-  title: "UI/ActionButton",
-  component: ActionButton
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  textColor: "#000000",
-  buttonColor: "#f9f9f9"
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  secondary: true,
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  textColor: "#000000",
-  buttonColor: "#f9f9f9",
-};

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/AuthForm.stories.js

@@ -1,79 +0,0 @@
-import React from "react";
-import {
-  NewPasswordForm,
-  ResetPasswordForm,
-  SignInForm,
-  SignUpForm
-} from "../blocks/AuthForms";
-import { defaultTheme, HawaProvider } from "../themes/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,
-  paperColors: 'blue'
-};
-
-const SignInTemplate = (args) => {
-  return (
-    <HawaProvider theme={{ ...defaultTheme }}>
-      <SignInForm {...args} />
-    </HawaProvider>
-  );
-};
-
-export const SignIn = SignInTemplate.bind({});
-SignIn.args = {
-  viaGoogle: true,
-  viaGithub: true,
-  viaTwitter: true,
-  viaFacebook: true
-};
-
-const SignUpTemplate = (args) => {
-  return (
-    <HawaProvider theme={{ ...defaultTheme }}>
-      <SignUpForm {...args} />
-    </HawaProvider>
-  );
-};
-export const SignUp = SignUpTemplate.bind({});
-SignUp.args = {
-  viaGoogle: true,
-  viaGithub: true,
-  viaTwitter: true,
-  viaFacebook: true
-};
-
-const ResetPasswordTemplate = (args) => {
-  return (
-    <HawaProvider theme={{ ...defaultTheme }}>
-      <ResetPasswordForm {...args} />
-    </HawaProvider>
-  );
-};
-export const ResetPassword = ResetPasswordTemplate.bind({});
-ResetPassword.args = {};
-const NewPasswordTemplate = (args) => {
-  return (
-    <HawaProvider theme={{ ...defaultTheme }}>
-      <NewPasswordForm {...args} />
-    </HawaProvider>
-  );
-};
-export const NewPassword = NewPasswordTemplate.bind({});
-NewPassword.args = {};

package/src/stories/Box.stories.js

@@ -1,64 +0,0 @@
-import React from "react";
-import { Box } from "../layout";
-import { HawaProvider, defaultTheme } from "../themes/HawaProvider";
-const theme = {
-  // paperColors: "#c6c6c6",
-  // paperColors: "blue",
-  // textColors: 'orange',
-  ...defaultTheme
-
-  // borderRadius: 10,
-  // primaryColor: "blue",
-  // secondaryColor: "grey",
-  // backgroundColor: 'red',
-  // layoutColor: 'orange',
-  // margins: 10,
-  // paddings: 5
-};
-
-const Template = (args) => {
-  return (
-    <HawaProvider size={args.size} theme={{ ...defaultTheme, ...args.theme }}>
-      <Box>Box 1</Box>
-      <Box><div style={{ backgroundColor: 'white', padding: 10 }}>testing box in box</div></Box>
-      <Box>Box 3</Box>
-    </HawaProvider >
-  );
-};
-export default {
-  title: "Layout/Box",
-  component: <Box />,
-  parameters: {
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: theme.lightBackground },
-        { name: 'dark', value: theme.darkBackground },
-      ],
-    },
-  },
-};
-
-export const Normal = Template.bind({});
-Normal.args = {
-  size: 'large',
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  padding: theme.paddings,
-  textColor: "#000000",
-  buttonColor: "#f9f9f9"
-};
-export const Compact = Template.bind({});
-Compact.args = {
-  size: 'small',
-  showText: true,
-  buttonLabel: "test",
-  theme: {
-    borderRadius: 5,
-    paddings: theme.paddings / 2,
-    textColor: "#000000",
-    buttonColor: "#f9f9f9",
-
-  }
-};

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/stories/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/ui/RadioSelector.js

@@ -1,51 +0,0 @@
-import React, { useState, useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-
-export const StyledRadioSelector = (props) => {
-  const [value, setValue] = useState(props.defaultValue);
-  const theme = useContext(ThemeProvider);
-
-  return (
-    <div
-      style={{
-        backgroundColor: "white",
-        display: "flex",
-        flexDirection: "row",
-        margin: theme.margins,
-        padding: theme.paddings,
-        marginBottom: 10
-      }}
-    >
-      {props.options.map((singleOption) => {
-        return (
-          <div
-            key={singleOption.label}
-            className="radio_option"
-            onClick={() => {
-              setValue(singleOption.label);
-              if (props.handleChange) {
-                props.handleChange();
-              }
-            }}
-            style={
-              value.toLowerCase() === singleOption.label.toLowerCase()
-                ? {
-                    borderRadius: theme.borderRadius,
-                    padding: theme.paddings,
-                    backgroundColor:
-                      theme.primaryColor || props.bgSelectedColor || "blue",
-                    color: props.textSelectedColor || "lightgray"
-                  }
-                : {
-                    borderRadius: theme.borderRadius,
-                    padding: theme.paddings
-                  }
-            }
-          >
-            {singleOption.text}
-          </div>
-        );
-      })}
-    </div>
-  );
-};

package/src/ui/StyledAlert.js

@@ -1,30 +0,0 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-
-export const StyledAlert = (props) => {
-  const theme = useContext(ThemeProvider);
-
-  let alertStyle = {
-    backgroundColor: "green",
-    padding: 10,
-    marginTop: 10,
-    marginBottom: 10,
-    borderRadius: theme.borderRadius
-  };
-  switch (props.type) {
-    case "warning":
-      alertStyle.backgroundColor = "yellow";
-      return <div style={alertStyle}>{props.text}</div>;
-      break;
-    case "danger":
-      alertStyle.backgroundColor = "red";
-      return <div style={alertStyle}>{props.text}</div>;
-      break;
-    case "notification":
-      alertStyle.backgroundColor = "blue";
-      return <div style={alertStyle}>{props.text}</div>;
-      break;
-    default:
-      return <div style={alertStyle}>{props.text}</div>;
-  }
-};

package/src/ui/StyledInputLabel.js

@@ -1,19 +0,0 @@
-import InputLabel from "@material-ui/core/InputLabel";
-import { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-
-export const StyledInputLabel = (props) => {
-  const theme = useContext(ThemeProvider);
-  return (
-    <InputLabel
-      style={{
-        margin: 15,
-        marginRight: 0,
-        marginLeft: 0,
-        color: theme.textColor
-      }}
-    >
-      <div style={{ fontSize: 15 }}>{props.label}</div>
-    </InputLabel>
-  );
-};

package/src/ui/TextField.js

@@ -1,62 +0,0 @@
-import React, { useState, useContext } from "react";
-import TextField from "@material-ui/core/TextField";
-import { StyledInputLabel } from "../ui";
-import PropTypes from "prop-types";
-import { ThemeProvider } from "../themes/HawaProvider";
-
-export const StyledTextField = (props) => {
-  const theme = useContext(ThemeProvider);
-
-  return (
-    <div style={{ display: 'flex',  flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start' }}>
-      {props.inputLabel ? <StyledInputLabel label={props.inputLabel} /> : null}
-      <TextField
-        // fullWidth={true}
-        style={{
-          color: "white",
-          backgroundColor: theme.inputColor,
-          borderRadius: props.bdRadius || 10,
-          borderBottom: "none",
-          // padding: 5,
-          // paddingLeft: 0,
-          // paddingRight: 0,
-          // margin: 5,
-          border: "none",
-          width: "100%"
-        }}
-        helperText={props.helperText}
-        type={props.type ? props.type : "text"}
-        placeholder={props.placeholder}
-        inputProps={
-
-          props.type === "number"
-            ? {
-              inputMode: "numeric",
-              min: "0",
-              max: "9999999",
-              step: "0.01"
-            }
-            : {}
-        }
-        InputProps={{
-          style: {
-            padding: 5,
-            paddingLeft: 10, paddingRight: 10
-          },
-          disableUnderline: true,
-          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"
-// };