@sikka/hawa 0.0.4 → 0.0.7

package/src/stories/Introduction.stories.js

@@ -1,16 +1,18 @@
-import { Meta } from '@storybook/addon-docs';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-<Meta title="Example/Introduction" />
-
-<style>{`
+import { Meta } from "@storybook/addon-docs";
+// import Code from "./assets/code-brackets.svg";
+// import Colors from "./assets/colors.svg";
+// import Comments from "./assets/comments.svg";
+// import Direction from "./assets/direction.svg";
+// import Flow from "./assets/flow.svg";
+// import Plugin from "./assets/plugin.svg";
+// import Repo from "./assets/repo.svg";
+// import StackAlt from "./assets/stackalt.svg";
+
+<Meta title="Example/Introduction" />;
+
+{
+  /* <style>
+{`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -112,100 +114,120 @@ import StackAlt from './assets/stackalt.svg';
   }
 
   
-`}</style>
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard - to - reach states.Save these UI states as ** stories ** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the`src/stories` directory to learn how they work.
-We recommend building UIs with a[** component - driven **](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <img src={Colors} alt="colors" />
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <img src={Direction} alt="direction" />
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <img src={Code} alt="code" />
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <img src={Comments} alt="comments" />
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
-</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>src/stories/Introduction.stories.mdx</code>
-</div>
+`}
+</style> */
+}
+
+// # Welcome to Storybook
+
+// Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+// That makes it easy to develop hard - to - reach states.Save these UI states as ** stories ** to revisit during development, testing, or QA.
+
+// Browse example stories now by navigating to them in the sidebar.
+// View their code in the`src/stories` directory to learn how they work.
+// We recommend building UIs with a[** component - driven **](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<>
+  <div className="subheading">Configure</div>
+
+  <div className="link-list">
+    <a
+      className="link-item"
+      href="https://storybook.js.org/docs/react/addons/addon-types"
+      target="_blank"
+    >
+      {/* <img src={Plugin} alt="plugin" /> */}
+      <span>
+        <strong>Presets for popular tools</strong>
+        Easy setup for TypeScript, SCSS and more.
+      </span>
+    </a>
+    <a
+      className="link-item"
+      href="https://storybook.js.org/docs/react/configure/webpack"
+      target="_blank"
+    >
+      {/* <img src={StackAlt} alt="Build" /> */}
+      <span>
+        <strong>Build configuration</strong>
+        How to customize webpack and Babel
+      </span>
+    </a>
+    <a
+      className="link-item"
+      href="https://storybook.js.org/docs/react/configure/styling-and-css"
+      target="_blank"
+    >
+      {/* <img src={Colors} alt="colors" /> */}
+      <span>
+        <strong>Styling</strong>
+        How to load and configure CSS libraries
+      </span>
+    </a>
+    <a
+      className="link-item"
+      href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+      target="_blank"
+    >
+      {/* <img src={Flow} alt="flow" /> */}
+      <span>
+        <strong>Data</strong>
+        Providers and mocking for data libraries
+      </span>
+    </a>
+  </div>
+
+  <div className="subheading">Learn</div>
+
+  <div className="link-list">
+    <a
+      className="link-item"
+      href="https://storybook.js.org/docs"
+      target="_blank"
+    >
+      {/* <img src={Repo} alt="repo" /> */}
+      <span>
+        <strong>Storybook documentation</strong>
+        Configure, customize, and extend
+      </span>
+    </a>
+    <a
+      className="link-item"
+      href="https://storybook.js.org/tutorials/"
+      target="_blank"
+    >
+      {/* <img src={Direction} alt="direction" /> */}
+      <span>
+        <strong>In-depth guides</strong>
+        Best practices from leading teams
+      </span>
+    </a>
+    <a
+      className="link-item"
+      href="https://github.com/storybookjs/storybook"
+      target="_blank"
+    >
+      {/* <img src={Code} alt="code" /> */}
+      <span>
+        <strong>GitHub project</strong>
+        View the source and add issues
+      </span>
+    </a>
+    <a
+      className="link-item"
+      href="https://discord.gg/storybook"
+      target="_blank"
+    >
+      {/* <img src={Comments} alt="comments" /> */}
+      <span>
+        <strong>Discord chat</strong>
+        Chat with maintainers and the community
+      </span>
+    </a>
+  </div>
+
+  <div className="tip-wrapper">
+    <span className="tip">Tip</span>Edit the Markdown in{" "}
+    <code>src/stories/Introduction.stories.mdx</code>
+  </div>
+</>;

package/src/stories/LayoutStories/Box.stories.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { Box } from "../../layout";
+import { HawaProvider, defaultTheme } from "../../themes/HawaProvider";
+const theme = {
+  ...defaultTheme
+};
+
+const Template = (args) => {
+  return (
+    <HawaProvider size={args.size} themeName={"secondary"}>
+      <Box>Box 1</Box>
+      <Box>
+        <div style={{ backgroundColor: "white", padding: 10, color: "black" }}>
+          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/UIStories/ActionButton.stories.js

@@ -0,0 +1,53 @@
+import React from "react";
+
+import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
+import { ActionButton } from "../../ui";
+
+const Template = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <ActionButton text={args.buttonLabel} />
+    </HawaProvider>
+  );
+};
+//types:
+//error (red)
+//warning (red)
+//notice (blue)
+
+export default {
+  title: "UI/ActionButton",
+  component: ActionButton,
+  argTypes: {
+    theme: {
+      description: "overwritten description",
+      table: {
+        type: {
+          summary: "something short"
+        },
+        defaultValue: { summary: "Hello" }
+      },
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    }
+  }
+};
+
+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"
+};

package/src/stories/{AdaptiveButton.stories.js → UIStories/AdaptiveButton.stories.js}

@@ -1,7 +1,7 @@
 import React from "react";
-import CastIcon from "@material-ui/icons/Cast";
-import { HawaProvider } from "../themes/HawaProvider";
-import { AdaptiveButton } from "../ui";
+import CastIcon from "@mui/icons-material/Cast";
+import { HawaProvider } from "../../themes/HawaProvider";
+import { AdaptiveButton } from "../../ui";
 
 const Template = (args) => {
   const theme = {

package/src/stories/UIStories/Alert.stories.js

@@ -0,0 +1,42 @@
+import React from "react";
+
+import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
+import { HawaAlert } from "../../ui";
+
+const Template = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <HawaAlert
+        title="What?"
+        text="This is a success alert"
+        severity="success"
+      />
+      <HawaAlert text="This is an info alert" severity="info" />
+      <HawaAlert text="This is a warning alert" severity="warning" />
+      <HawaAlert text="This is an error alert" severity="error" />
+    </HawaProvider>
+  );
+};
+//types:
+//error (red)
+//warning (red)
+//notice (blue)
+
+export default {
+  title: "UI/Alert",
+  component: HawaAlert,
+  argTypes: {
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    }
+  },
+  args: {
+    theme: "primary"
+  }
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  theme: "primary"
+};

package/src/stories/{CheckBox.stories.js → UIStories/CheckBox.stories.js}

@@ -1,14 +1,13 @@
 import React from "react";
-import { StyledCheckbox } from "../ui";
-import "../styles.css";
+import { HawaCheckbox } from "../../ui";
 
 const Template = (args) => {
-  return <StyledCheckbox {...args} />;
+  return <HawaCheckbox {...args} />;
 };
 
 export default {
   title: "UI/Checkbox",
-  component: Light,
+  component: HawaCheckbox,
   argsTypes: {
     defaultValue: {
       options: [true, false],

package/src/stories/UIStories/InputLabel.stories.js

@@ -0,0 +1,13 @@
+import { storiesOf } from "@storybook/react";
+import { HawaInputLabel } from "../../ui";
+
+export default {
+  title: "Components/InputLabel",
+  component: [HawaInputLabel],
+  argTypes: {
+    resize: {
+      options: ["vertical", "horizontal", "both"],
+      control: { type: "radio" }
+    }
+  }
+};

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

@@ -0,0 +1,53 @@
+import React from "react";
+import { HawaProvider } from "../../themes/HawaProvider";
+import { HawaRadio } from "../../ui";
+
+export default {
+  title: "UI/RadioSelector",
+  component: HawaRadio,
+  argTypes: {
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    }
+  },
+  args: {
+    theme: "primary"
+  }
+};
+
+const Template = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <HawaRadio
+        defaultValue="option1"
+        options={[
+          { text: "Option 1", label: "option1" },
+          { text: "Option 2", label: "option2" },
+          { text: "Option 3", label: "option3" }
+        ]}
+      />
+    </HawaProvider>
+  );
+};
+export const Light = Template.bind({});
+
+Light.args = {
+  theme: "primary",
+
+  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" }
+  ],
+  defaultValue: "option2",
+  handleChange: () => {
+    console.log("handleChange goes here");
+  }
+};

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

@@ -0,0 +1,64 @@
+import React from "react";
+import {
+  SelectPayment,
+  CreditCardForm,
+  ChargeWalletForm,
+  PayWithWallet
+} from "../../blocks/Payment";
+import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
+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 (
+    <HawaProvider themeName={args.theme}>
+      <HawaSettingsRow settingsType={args.type} />
+    </HawaProvider>
+  );
+};
+
+export const Checkbox = HawaSettingsRowTemplate.bind({});
+Checkbox.args = {
+  theme: "primary",
+  type: "checkbox"
+};
+export const Text = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <HawaSettingsRow settingsType={args.type} />
+    </HawaProvider>
+  );
+};
+Text.args = {
+  theme: "primary",
+  type: "text"
+};
+export const Radio = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <HawaSettingsRow settingsType={args.type} />
+    </HawaProvider>
+  );
+};
+Radio.args = {
+  theme: "primary",
+  type: "radio"
+};

package/src/stories/{TextField.stories.js → UIStories/TextField.stories.js}

@@ -1,14 +1,13 @@
 import React from "react";
-import { StyledTextField } from "../ui";
-import "../styles.css";
+import { HawaTextField } from "../../ui";
 
 const Template = (args) => {
-  return <StyledTextField {...args} />;
+  return <HawaTextField {...args} />;
 };
 
 export default {
-  title: "Components/TextField",
-  component: StyledTextField,
+  title: "UI/TextField",
+  component: HawaTextField,
   argsTypes: {
     type: {
       name: "type",