@sikka/hawa 0.0.12 → 0.0.15

package/src/stories/ElementsStories/RadioSelector.stories.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { HawaRadio } from "../../elements";
+
+export default {
+  title: "Elements/Selections/Panel Tabs",
+  component: [HawaRadio],
+  argTypes: {
+    options: {
+      control: "array",
+      description: "An array of objects containing the option label and value",
+      table: {
+        type: {
+          summary: "Object Example",
+          detail: "{label: 'Option 1', value: 'option1'}"
+        }
+      }
+    }
+  },
+  args: {
+    options: 3
+  }
+};
+
+export const PanelTabs = (args) => {
+  let allOptions = Array.from({ length: args.options }, (v, i) => {
+    return { label: `Option ${i}`, value: `option${i}` };
+  });
+  return (
+    <HawaRadio
+      {...args}
+      handleChange={(e) => console.log("changing to ", e)}
+      defaultValue="option1"
+      options={allOptions}
+    />
+  );
+};

package/src/stories/ElementsStories/SettingsRow.stories.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { HawaSettingsRow } from "../../elements";
+
+export default {
+  title: "Elements/Settings/Row",
+  component: [HawaSettingsRow],
+  parameters: {
+    backgrounds: {
+      default: 'twitter',
+      values: [
+        {
+          name: 'light',
+          value: '#00aced',
+        },
+        {
+          name: 'dark',
+          value: '#3b5998',
+        },
+      ],
+    },
+  //   backgrounds: [{ name: "dark background", value: "#000", default: true }]
+  },
+  argTypes: {
+    settingsType: {
+      options: ["checkbox", "text", "radio"],
+      control: { type: "select" }
+    }
+  }
+};
+
+export const CheckboxSettings = (args) => <HawaSettingsRow {...args} />;
+CheckboxSettings.args = {
+  settingsType: "checkbox",
+  settingsLabel: "Text Settings"
+};
+export const TextSettings = (args) => (
+  <HawaSettingsRow placeholder="Text here" {...args} />
+);
+
+TextSettings.args = {
+  settingsType: "text",
+  settingsLabel: "Text Settings"
+};
+export const RadioSettings = (args) => {
+  let allOptions = Array.from({ length: args.options }, (v, i) => {
+    return { label: `Option ${i}`, value: `option${i}` };
+  });
+  return (
+    <HawaSettingsRow
+      settingsType={args.settingsType}
+      settingsLabel={args.settingsLabel}
+      handleChange={(e) => console.log("changing to ", e)}
+      defaultValue="option1"
+      options={allOptions}
+    />
+  );
+};
+
+RadioSettings.args = {
+  options: 3,
+  settingsType: "radio",
+  settingsLabel: "Radio Settings"
+};

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { HawaTextField } from "../../ui";
+import { HawaTextField } from "../../elements";
 
 const Template = (args) => {
   return <HawaTextField {...args} />;

package/src/stories/LayoutStories/AppBar.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { HawaAppBar } from "../../elements";
+
+const Template = (args) => {
+  return <HawaAppBar />;
+};
+export default {
+  title: "Layout/AppBar",
+  component: [HawaAppBar],
+  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",
+  // padding: theme.paddings,
+  textColor: "#000000",
+  buttonColor: "#f9f9f9"
+};

package/src/stories/LayoutStories/AppLayout.stories.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { HawaAppLayout } from "../../layout";
+
+const Template = (args) => {
+  return (
+    <HawaAppLayout
+      pageName="page1"
+      pages={[
+        { text: "page1", icon: "fdd" },
+        { text: "page2", icon: "huhu" },
+        { text: "page3", icon: "test" }
+      ]}
+      //   pages={[
+      //     <HawaListItem text="dd" />,
+      //     <HawaListItem text="dd" />,
+      //     <HawaListItem text="dd" />
+      //   ]}
+      logo={
+        <img
+          height={40}
+          style={{ zIndex: 30, width: "100%" }}
+          src="https://xakher-images.s3.ap-southeast-1.amazonaws.com/sikka-logo.svg"
+        />
+      }
+    >
+      the rest of the app here
+    </HawaAppLayout>
+  );
+};
+export default {
+  title: "Layout/AppLayout",
+  component: [HawaAppLayout],
+  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",
+  // padding: theme.paddings,
+  textColor: "#000000",
+  buttonColor: "#f9f9f9"
+};

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

@@ -1,22 +1,13 @@
+import { Container } from "@mui/material";
 import React from "react";
 import { Box } from "../../layout";
 
 const Template = (args) => {
-  return (
-    <>
-      <Box>Box 1</Box>
-      <Box>
-        <div style={{ backgroundColor: "white", padding: 10, color: "black" }}>
-          testing box in box
-        </div>
-      </Box>
-      <Box>Box 3</Box>
-    </>
-  );
+  return <Container variant="auth">test</Container>;
 };
 export default {
-  title: "Layout/Box",
-  component: <Box />,
+  title: "Layout/Container",
+  component: <Container />,
   parameters: {
     backgrounds: {
       default: "light"

package/src/styles.css

@@ -1,3 +1,4 @@
+
 .reset_password_root {
   display: flex;
   flex-direction: column;

package/storybook-static/iframe.html

@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.f1ebae9b.iframe.bundle.js"></script><script src="vendors~main.f8d30727.iframe.bundle.js"></script><script src="main.a9a16923.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.f1ebae9b.iframe.bundle.js"></script><script src="vendors~main.b4186832.iframe.bundle.js"></script><script src="main.66955578.iframe.bundle.js"></script></body></html>

package/storybook-static/index.html

@@ -37,7 +37,7 @@
         /* eslint-enable object-shorthand */
       })
     );
-  };</script><link rel="shortcut icon" href="/favicon.ico"/><link rel="icon" type="image/png" href="/hawa-icon.png" sizes="192x192"/><style>#root[hidden],
+  };</script><link rel="shortcut icon" href="/favicon.ico"/><link rel="icon" type="image/png" href="/hawa-icon.png" sizes="192x192"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet"/><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
       }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";