@sikka/hawa 0.0.2 → 0.0.3

package/src/stories/Box.stories.js

@@ -1,45 +1,64 @@
-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"
-};
+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/CheckBox.stories.js

@@ -1,34 +1,35 @@
-import React from "react";
-import { StyledCheckbox } from "../components/Hawa/Checkbox/Checkbox";
-import "../styles.css";
-
-const Template = (args) => {
-  return <StyledCheckbox {...args} />;
-};
-
-export default {
-  title: "Components/Checkbox",
-  component: Light,
-  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: "gray",
-  defaultValue: false
-};
-Dark.args = {
-  color: "gray",
-  defaultValue: false
-};
+import React from "react";
+import { StyledCheckbox } from "../ui";
+import "../styles.css";
+
+const Template = (args) => {
+  return <StyledCheckbox {...args} />;
+};
+
+export default {
+  title: "UI/Checkbox",
+  component: Light,
+  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/GlobalVariables.stories.js

@@ -1,108 +1,101 @@
-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"
-// };
-/****************************/
+import React, { useState } from "react";
+import { storiesOf } from "@storybook/react";
+
+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

@@ -1,23 +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
-};
+import React from "react";
+import CastIcon from "@material-ui/icons/Cast";
+import { HawaProvider } from "../themes/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

@@ -1,100 +1,92 @@
-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"
-// };
-/****************************/
+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"
+// };
+/****************************/