@sikka/hawa 0.0.2 → 0.0.3

package/src/{components/Hawa → blocks}/AuthForms/SignUpForm.js

@@ -1,26 +1,20 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../HawaProvider";
-import { StyledInputLabel } from "../InputLabel";
-import { StyledTextField } from "../TextField";
-
-export const SignUpForm = (props) => {
-  const theme = useContext(ThemeProvider);
-  return (
-    <div
-      style={{
-        backgroundColor: theme.paperColors,
-        padding: theme.paddings,
-        borderRadius: theme.borderRadius,
-        margin: theme.margins
-      }}
-    >
-      <StyledInputLabel label="Email" />
-      <StyledTextField type="text" />
-      <StyledInputLabel label="Password" />
-      <StyledTextField type="text" />
-      <StyledInputLabel label="Confirm Password" />
-      <StyledTextField type="text" />
-      {props.children}
-    </div>
-  );
-};
+import React, { useContext } from "react";
+import { Box } from "../../layout";
+import { ThemeProvider } from "../../themes/HawaProvider";
+import { StyledTextField, StyledInputLabel } from "../../ui";
+
+export const SignUpForm = (props) => {
+  const theme = useContext(ThemeProvider);
+  return (
+    <Box maxWidth={400}>
+
+      <StyledInputLabel label="Email" />
+      <StyledTextField type="text" />
+      <StyledInputLabel label="Password" />
+      <StyledTextField type="text" />
+      <StyledInputLabel label="Confirm Password" />
+      <StyledTextField type="text" />
+      {props.children}
+    </Box>
+  );
+};

package/src/{components/Hawa → blocks}/AuthForms/index.js

@@ -1,4 +1,4 @@
-export * from "./NewPasswordForm.js";
-export * from "./ResetPasswordForm.js";
-export * from "./SignUpForm.js";
-export * from "./SignInForm.js";
+export * from "./NewPasswordForm.js";
+export * from "./ResetPasswordForm.js";
+export * from "./SignUpForm.js";
+export * from "./SignInForm.js";

package/src/index.js

@@ -1 +1 @@
-export * from "./components/Hawa";
+export * from "./components/Hawa";

package/src/layout/Box.js

@@ -0,0 +1,25 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+
+export const Box = (props) => {
+  const theme = useContext(ThemeProvider);
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        // justifyContent: 'center',
+        // alignItems: 'center',
+
+        backgroundColor: theme.layoutColor,
+        color: theme.textColor,
+        padding: theme.paddings,
+        margin: theme.margins,
+        borderRadius: theme.borderRadius,
+        maxWidth: props.maxWidth
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};

package/src/layout/index.js

@@ -0,0 +1 @@
+export * from "./Box";

package/src/stories/ActionButton.stories.js

@@ -0,0 +1,49 @@
+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/AdaptiveButton.stories.js

@@ -1,80 +1,80 @@
-import React from "react";
-import AdaptiveButton from "../components/Hawa/AdaptiveButton/AdaptiveButton";
-import CastIcon from "@material-ui/icons/Cast";
-import { HawaProvider } from "../components/Hawa/HawaProvider";
-
-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: "Components/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
-};
+import React from "react";
+import CastIcon from "@material-ui/icons/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,48 +1,41 @@
-import React from "react";
-
-import { HawaProvider } from "../components/Hawa/HawaProvider";
-import { StyledAlert } from "../components/Hawa/StyledAlert/StyledAlert";
-
-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="teshht" />
-    </HawaProvider>
-  );
-};
-//types:
-//error (red)
-//warning (red)
-//notice (blue)
-
-export default {
-  title: "Components/Alert",
-  component: StyledAlert
-};
-
-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 { 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,76 +1,79 @@
-import React from "react";
-import { NewPasswordForm } from "../components/Hawa/AuthForms/NewPasswordForm";
-import { ResetPasswordForm } from "../components/Hawa/AuthForms/ResetPasswordForm";
-import { SignInForm } from "../components/Hawa/AuthForms/SignInForm";
-import { SignUpForm } from "../components/Hawa/AuthForms/SignUpForm";
-import { HawaProvider } from "../components/Hawa/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
-};
-
-const SignInTemplate = (args) => {
-  return (
-    <HawaProvider theme={theme}>
-      <SignInForm {...args} />
-    </HawaProvider>
-  );
-};
-
-export const SignIn = SignInTemplate.bind({});
-SignIn.args = {
-  viaGoogle: true,
-  viaGithub: true,
-  viaTwitter: true,
-  viaFacebook: true
-};
-
-const SignUpTemplate = (args) => {
-  return (
-    <HawaProvider theme={theme}>
-      <SignUpForm {...args} />
-    </HawaProvider>
-  );
-};
-export const SignUp = SignUpTemplate.bind({});
-SignUp.args = {
-  viaGoogle: true,
-  viaGithub: true,
-  viaTwitter: true,
-  viaFacebook: true
-};
-
-const ResetPasswordTemplate = (args) => {
-  return (
-    <HawaProvider theme={theme}>
-      <ResetPasswordForm {...args} />
-    </HawaProvider>
-  );
-};
-export const ResetPassword = ResetPasswordTemplate.bind({});
-ResetPassword.args = {};
-const NewPasswordTemplate = (args) => {
-  return (
-    <HawaProvider theme={theme}>
-      <NewPasswordForm {...args} />
-    </HawaProvider>
-  );
-};
-export const NewPassword = NewPasswordTemplate.bind({});
-NewPassword.args = {};
+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 = {};