@sikka/hawa 0.0.1

package/src/stories/GlobalVariables.stories.js

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import { storiesOf } from "@storybook/react";
+import { Hawa } from "../components/Hawa/Hawa";
+import { StyledCheckbox } from "../components/Hawa/Checkbox/Checkbox";
+import { AutoCompleteField } from "../components/Hawa/AutoCompleteField/AutoCompleteField";
+import { StyledInputLabel } from "../components/Hawa/InputLabel/StyledInputLabel";
+import { StyledTextArea } from "../components/Hawa/TextArea/TextArea";
+import { StyledTextField } from "../components/Hawa/TextField/TextField";
+import { StyledRadioSelector } from "../components/Hawa/RadioSelector";
+import { FormProvider, useForm } from "react-hook-form";
+import "../styles.css";
+
+const stories = storiesOf("Test", module);
+
+stories.add("Global Variables", () => {
+  return <div>test</div>;
+});
+
+export const GlobalVariables = (args) => {
+  //   const methods = useForm();
+  return <div>test</div>;
+};
+export default {
+  title: "GlobalVariables",
+  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: "checkbox",
+//   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: "styledtextfield",
+//   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: "Radio Selector",
+//   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/HawaProvider.stories.js

@@ -0,0 +1,23 @@
+import React from "react";
+import CastIcon from "@material-ui/icons/Cast";
+import { HawaProvider } from "../components/Hawa/HawaProvider";
+
+const Template = (args) => {
+  const theme = {
+    borderRadius: 20,
+    primaryColor: "green",
+    secondaryColor: "red",
+    // margins: "10px",
+    paddings: 10
+  };
+  return (
+    <HawaProvider theme={theme}>
+      <div>test</div>
+    </HawaProvider>
+  );
+};
+
+export default {
+  title: "Globals/HawaProvider",
+  component: HawaProvider
+};

package/src/stories/InputLabel.stories.js

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import { storiesOf } from "@storybook/react";
+import { Hawa } from "../components/Hawa/Hawa";
+import { StyledCheckbox } from "../components/Hawa/Checkbox/Checkbox";
+import { AutoCompleteField } from "../components/Hawa/AutoCompleteField/AutoCompleteField";
+import { StyledInputLabel } from "../components/Hawa/InputLabel/StyledInputLabel";
+import { StyledTextArea } from "../components/Hawa/TextArea/TextArea";
+import { StyledTextField } from "../components/Hawa/TextField/TextField";
+import { StyledRadioSelector } from "../components/Hawa/RadioSelector";
+import { FormProvider, useForm } from "react-hook-form";
+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

@@ -0,0 +1,69 @@
+import React from "react";
+import { StyledRadioSelector } from "../components/Hawa/RadioSelector";
+import { HawaProvider } from "../components/Hawa/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({});
+export const Dark = 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: "black",
+  handleChange: () => {
+    console.log("handleChange goes here");
+  }
+};
+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/TextField.stories.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { StyledTextField } from "../components/Hawa/TextField/TextField";
+import "../styles.css";
+
+const Template = (args) => {
+  return <StyledTextField {...args} />;
+};
+
+export default {
+  title: "Components/TextField",
+  component: Light,
+  argsTypes: {
+    defaultValue: {
+      control: { type: "text" }
+    },
+    value: {
+      control: { type: "text" }
+    },
+    inputLabel: {
+      control: { type: "text" }
+    },
+    bdRadius: {
+      contol: { type: "number" }
+    },
+    placeholder: {
+      control: { type: "text" }
+    },
+    type: {
+      options: ["text", "number", "date"],
+      control: { type: "radio" }
+    },
+    padding: {
+      type: "number"
+    }
+  },
+  args: {
+    bdRadius: 15,
+    defaultValue: "Test",
+    type: "date"
+  }
+};
+
+export const Light = Template.bind({});
+export const Dark = Template.bind({});
+
+Light.args = {
+  placeholder: "Exemple ...",
+  defaultValue: "This is default value",
+  inputLabel: "Text Field",
+  bgColor: "lightgray",
+  padding: 10
+};
+Dark.args = {
+  placeholder: "Exemple ...",
+  defaultValue: "This is default value",
+  inputLabel: "Text Field",
+  bgColor: "lightgray",
+  padding: 10
+};