@sikka/hawa 0.0.12 → 0.0.15

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

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

package/src/stories/UIStories/ActionButton.stories.js

@@ -1,41 +0,0 @@
-import React from "react";
-import { ActionButton } from "../../ui";
-
-export default {
-  title: "Elements/Buttons/ActionButton",
-  component: ActionButton,
-  argTypes: {
-    theme: {
-      options: ["primary", "secondary", "default"],
-      control: { type: "select" }
-    }
-  }
-};
-const Template = (args) => {
-  return <ActionButton text={args.buttonLabel} />;
-};
-
-Template.args = {
-  showText: true,
-  buttonLabel: "test",
-  theme: "primary"
-};
-export const Primary = Template.bind({});
-Primary.args = {
-  showText: true,
-  buttonLabel: "test",
-  theme: "primary"
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  showText: true,
-  buttonLabel: "test",
-  theme: "secondary"
-};
-export const Default = Template.bind({});
-Default.args = {
-  showText: true,
-  buttonLabel: "test",
-  theme: "default"
-};

package/src/stories/UIStories/AdaptiveButton.stories.js

@@ -1,76 +0,0 @@
-import React from "react";
-import CastIcon from "@mui/icons-material/Cast";
-import { AdaptiveButton } from "../../ui";
-
-export default {
-  title: "Elements/Buttons/AdaptiveButton",
-  component: AdaptiveButton,
-  argsTypes: {
-    buttonLabel: { control: "text" },
-    borderRadius: { control: "number" },
-    buttonColor: { control: "color" },
-    padding: { control: "number" },
-    hintTitle: { control: "text" },
-    hintContent: { control: "text" },
-    theme: {
-      options: ["primary", "secondary", "default"],
-      control: { type: "select" }
-    }
-  },
-  args: {
-    hintTitle: "test",
-    hintContent: "more test",
-    buttonColor: "#f9f9f9",
-    theme: "primary"
-  }
-};
-
-const Template = (args) => {
-  return <AdaptiveButton {...args} />;
-};
-
-export const FullButton = Template.bind({});
-FullButton.args = {
-  // showText: true,
-  // buttonLabel: "test",
-  // borderRadius: 5,
-  // icon: <CastIcon />,
-  // textColor: "#000000",
-  // buttonColor: "#f9f9f9",
-  theme: "primary"
-  // placeholder: "Example ...",
-  // defaultValue: "This is default value",
-  // inputLabel: "Text Field",
-  // padding: 10
-};
-
-export const IconOnly = Template.bind({});
-IconOnly.args = {
-  // showText: true,
-  // buttonLabel: "test",
-  // borderRadius: 5,
-  // buttonColor: "#878787",
-  // textColor: "#ffffff",
-  // icon: <CastIcon />,
-  theme: "primary"
-
-  // 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 />,
-  theme: "primary"
-
-  // placeholder: "Exemple ...",
-  // defaultValue: "This is default value",
-  // inputLabel: "Text Field",
-  // padding: 10
-};

package/src/stories/UIStories/CheckBox.stories.js

@@ -1,34 +0,0 @@
-import React from "react";
-import { HawaCheckbox } from "../../ui";
-
-const Template = (args) => {
-  return <HawaCheckbox {...args} />;
-};
-
-export default {
-  title: "UI/Checkbox",
-  component: HawaCheckbox,
-  argsTypes: {
-    defaultValue: {
-      options: [true, false],
-      control: { type: "radio" }
-    }
-  },
-  args: {
-    defaultValue: true,
-    disabled: true
-  }
-};
-
-export const Light = Template.bind({});
-export const Dark = Template.bind({});
-
-Light.args = {
-  color: "red",
-  defaultValue: false,
-  label: "test"
-};
-Dark.args = {
-  color: "gray",
-  defaultValue: false
-};

package/src/stories/UIStories/RadioSelector.stories.js

@@ -1,24 +0,0 @@
-import React from "react";
-import { HawaRadio } from "../../ui";
-
-export default {
-  title: "Elements/Selections/Radio Selector",
-  component: [HawaRadio],
-  argTypes: {},
-  args: {}
-};
-
-export const RadioSelector = (args) => {
-  return (
-    <HawaRadio
-      {...args}
-      handleChange={(e) => console.log("changing to ", e)}
-      defaultValue="option1"
-      options={[
-        { label: "Option 1", value: "option1" },
-        { label: "Option 2", value: "option2" },
-        { label: "Option 3", value: "option3" }
-      ]}
-    />
-  );
-};

package/src/stories/UIStories/SettingsRow.stories.js

@@ -1,51 +0,0 @@
-import React from "react";
-import {
-  SelectPayment,
-  CreditCardForm,
-  ChargeWalletForm,
-  PayWithWallet
-} from "../../blocks/Payment";
-import { HawaSettingsRow } from "../../ui";
-
-export default {
-  title: "UI/SettingsRow",
-  component: [SelectPayment, CreditCardForm],
-  argTypes: {
-    theme: {
-      options: ["primary", "secondary", "default"],
-      control: { type: "select" }
-    },
-    type: {
-      options: ["checkbox", "text", "default"],
-      control: { type: "select" }
-    }
-  },
-  args: {
-    theme: "primary",
-    type: "checkbox"
-  }
-};
-
-const HawaSettingsRowTemplate = (args) => {
-  return <HawaSettingsRow settingsType={args.type} />;
-};
-
-export const Checkbox = HawaSettingsRowTemplate.bind({});
-Checkbox.args = {
-  theme: "primary",
-  type: "checkbox"
-};
-export const Text = (args) => {
-  return <HawaSettingsRow settingsType={args.type} />;
-};
-Text.args = {
-  theme: "primary",
-  type: "text"
-};
-export const Radio = (args) => {
-  return <HawaSettingsRow settingsType={args.type} />;
-};
-Radio.args = {
-  theme: "primary",
-  type: "radio"
-};

package/src/themes/HawaProvider.js

@@ -1,192 +0,0 @@
-import { createTheme } from "@mui/system";
-// import { createContext } from "react";
-
-// //make the text color of the action buttons different from the text color of the layout
-// let allPrimaryBG = "#f90900";
-// let allPrimaryAction = "#B20D30";
-// export const defaultTheme = {
-//   allPrimaryBG: "#f90900",
-//   allPrimaryAction: "#138A36",
-//   allBorderRadius: 10,
-//   borderRadius: 10,
-//   primaryColor: "blue",
-//   secondaryColor: "grey",
-//   // primaryActionColor: '#f72585', //Colors of the buttons
-//   primaryActionColor: "grey", //Colors of the buttons
-//   secondaryActionColor: "#4cc9f0", //Colors of the buttons
-//   layoutColor: "#d3d4d9", //Colors of boxes and cards
-//   textColor: "black", //Colors of text everywhere
-//   inputColor: "white", //Color of input fields
-//   lightBackground: "#FBF5F3", //
-//   darkBackground: "#0F0E0E",
-//   testcolor: "green",
-//   margins: 10,
-//   paddings: 10,
-//   typography: {
-//     fontFamily: ["IBMPlex"].join(","),
-//     primary: { color: "black" },
-//     secondary: { color: "white" }
-//   },
-//   logoButton: {
-//     primary: {
-//       borderRadius: 10,
-//       backgroundColor: allPrimaryAction,
-//       // margin: 10,
-//       marginTop: 10,
-//       padding: 30,
-//       paddingTop: 0,
-//       paddingBottom: 0,
-//       border: "1px solid #ced4da",
-//       height: 50,
-//       "&:focus": {
-//         borderColor: allPrimaryAction
-//       }
-//     },
-//     secondary: {
-//       borderRadius: 10,
-//       backgroundColor: "#f90900",
-//       marginTop: 10,
-//       padding: 30,
-//       paddingTop: 0,
-//       paddingBottom: 0,
-//       border: "1px solid #ced4da",
-//       height: 50,
-//       "&:focus": {
-//         borderColor: "green"
-//       }
-//     }
-//   },
-//   actionButton: {
-//     primary: {
-//       borderRadius: 10,
-//       // backgroundColor: "#f90900",
-//       backgroundColor: allPrimaryAction,
-//       color: "white",
-//       margin: 10,
-//       padding: 10,
-//       border: "1px solid #ced4da",
-//       fontSize: 16,
-//       height: 50,
-//       "&:focus": {
-//         borderColor: "red"
-//       }
-//     },
-//     secondary: {
-//       borderRadius: 10,
-//       margin: 10,
-//       padding: 10,
-//       backgroundColor: "#FF8811",
-//       color: "black"
-//     }
-//   },
-//   layout: {
-//     primary: {
-//       backgroundColor: "#d3d4d9",
-//       color: "black",
-//       margin: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       backgroundColor: "#001E3C",
-//       // backgroundColor: "red",
-//       color: "white",
-//       margin: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     }
-//   },
-//   inputFields: {
-//     primary: {
-//       backgroundColor: "white",
-//       borderRadius: 10,
-//       padding: 10,
-//       "&:hover": {
-//         borderColor: "red",
-//         borderWidth: 1,
-//         outline: "1px solid black"
-//       }
-//     },
-//     secondary: {
-//       backgroundColor: "white",
-//       borderRadius: 10,
-//       padding: 10
-//     }
-//   },
-//   alerts: {
-//     primary: {
-//       marginBottom: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       marginBottom: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     }
-//   },
-//   settingsRow: {
-//     primary: {
-//       display: "flex",
-//       flexDirection: "row",
-//       justifyContent: "space-between",
-//       alignItems: "center",
-//       backgroundColor: "#F5F5F5",
-//       margin: 0,
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       display: "flex",
-//       flexDirection: "row",
-//       justifyContent: "space-between",
-//       alignItems: "center",
-//       backgroundColor: "blue",
-//       margin: 0,
-//       padding: 5,
-//       borderRadius: 10
-//     }
-//   },
-//   radioSelector: {
-//     primary: {
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       padding: 10,
-//       borderRadius: 10
-//     }
-//   }
-// };
-
-export const QawaimTheme = createTheme({
-  components: {
-    MuiButton: {
-      variants: [
-        {
-          props: { variant: "withLogo" },
-          style: {
-            textTransform: "none",
-            border: `2px solid blue`,
-            backgroundColor: "red"
-          }
-        },
-        {
-          props: { variant: "dashed", color: "secondary" },
-          style: {
-            border: `4px dashed red`
-          }
-        }
-      ]
-    },
-    MuiButton: {
-      styleOverrides: {
-        // Name of the slot
-        root: {
-          // Some CSS
-          fontSize: "3rem"
-        }
-      }
-    }
-  }
-});

package/src/themes/QawaimTheme.js

@@ -1,199 +0,0 @@
-import { createTheme } from "@mui/system";
-// import { createContext } from "react";
-
-// //make the text color of the action buttons different from the text color of the layout
-// let allPrimaryBG = "#f90900";
-// let allPrimaryAction = "#B20D30";
-// export const defaultTheme = {
-//   allPrimaryBG: "#f90900",
-//   allPrimaryAction: "#138A36",
-//   allBorderRadius: 10,
-//   borderRadius: 10,
-//   primaryColor: "blue",
-//   secondaryColor: "grey",
-//   // primaryActionColor: '#f72585', //Colors of the buttons
-//   primaryActionColor: "grey", //Colors of the buttons
-//   secondaryActionColor: "#4cc9f0", //Colors of the buttons
-//   layoutColor: "#d3d4d9", //Colors of boxes and cards
-//   textColor: "black", //Colors of text everywhere
-//   inputColor: "white", //Color of input fields
-//   lightBackground: "#FBF5F3", //
-//   darkBackground: "#0F0E0E",
-//   testcolor: "green",
-//   margins: 10,
-//   paddings: 10,
-//   typography: {
-//     fontFamily: ["IBMPlex"].join(","),
-//     primary: { color: "black" },
-//     secondary: { color: "white" }
-//   },
-//   logoButton: {
-//     primary: {
-//       borderRadius: 10,
-//       backgroundColor: allPrimaryAction,
-//       // margin: 10,
-//       marginTop: 10,
-//       padding: 30,
-//       paddingTop: 0,
-//       paddingBottom: 0,
-//       border: "1px solid #ced4da",
-//       height: 50,
-//       "&:focus": {
-//         borderColor: allPrimaryAction
-//       }
-//     },
-//     secondary: {
-//       borderRadius: 10,
-//       backgroundColor: "#f90900",
-//       marginTop: 10,
-//       padding: 30,
-//       paddingTop: 0,
-//       paddingBottom: 0,
-//       border: "1px solid #ced4da",
-//       height: 50,
-//       "&:focus": {
-//         borderColor: "green"
-//       }
-//     }
-//   },
-//   actionButton: {
-//     primary: {
-//       borderRadius: 10,
-//       // backgroundColor: "#f90900",
-//       backgroundColor: allPrimaryAction,
-//       color: "white",
-//       margin: 10,
-//       padding: 10,
-//       border: "1px solid #ced4da",
-//       fontSize: 16,
-//       height: 50,
-//       "&:focus": {
-//         borderColor: "red"
-//       }
-//     },
-//     secondary: {
-//       borderRadius: 10,
-//       margin: 10,
-//       padding: 10,
-//       backgroundColor: "#FF8811",
-//       color: "black"
-//     }
-//   },
-//   layout: {
-//     primary: {
-//       backgroundColor: "#d3d4d9",
-//       color: "black",
-//       margin: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       backgroundColor: "#001E3C",
-//       // backgroundColor: "red",
-//       color: "white",
-//       margin: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     }
-//   },
-//   inputFields: {
-//     primary: {
-//       backgroundColor: "white",
-//       borderRadius: 10,
-//       padding: 10,
-//       "&:hover": {
-//         borderColor: "red",
-//         borderWidth: 1,
-//         outline: "1px solid black"
-//       }
-//     },
-//     secondary: {
-//       backgroundColor: "white",
-//       borderRadius: 10,
-//       padding: 10
-//     }
-//   },
-//   alerts: {
-//     primary: {
-//       marginBottom: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       marginBottom: 10,
-//       padding: 10,
-//       borderRadius: 10
-//     }
-//   },
-//   settingsRow: {
-//     primary: {
-//       display: "flex",
-//       flexDirection: "row",
-//       justifyContent: "space-between",
-//       alignItems: "center",
-//       backgroundColor: "#F5F5F5",
-//       margin: 0,
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       display: "flex",
-//       flexDirection: "row",
-//       justifyContent: "space-between",
-//       alignItems: "center",
-//       backgroundColor: "blue",
-//       margin: 0,
-//       padding: 5,
-//       borderRadius: 10
-//     }
-//   },
-//   radioSelector: {
-//     primary: {
-//       padding: 10,
-//       borderRadius: 10
-//     },
-//     secondary: {
-//       padding: 10,
-//       borderRadius: 10
-//     }
-//   }
-// };
-
-export const QawaimTheme = createTheme({
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        // Name of the slot
-        root: {
-          // Some CSS
-          fontSize: "1rem"
-        }
-      },
-      variants: [
-        {
-          props: { variant: "withLogo" },
-          style: {
-            textTransform: "none",
-            border: `2px solid blue`,
-            backgroundColor: "red"
-          }
-        },
-        {
-          props: { variant: "dashed", color: "secondary" },
-          style: {
-            border: `4px dashed red`
-          }
-        }
-      ]
-    },
-    MuiButton: {
-      styleOverrides: {
-        // Name of the slot
-        root: {
-          // Some CSS
-          fontSize: "3rem"
-        }
-      }
-    }
-  }
-});