@sikka/hawa 0.0.15 → 0.0.18

package/src/stories/ElementsStories/AdaptiveButton.stories.js

@@ -1,51 +0,0 @@
-import { Class } from "@mui/icons-material";
-import React from "react";
-import { AdaptiveButton } from "../../elements";
-
-export default {
-  title: "Elements/Buttons/AdaptiveButton",
-  component: AdaptiveButton,
-  argTypes: {
-    buttonText: {
-      control: "text",
-      description: "The button text",
-      table: {
-        defaultValue: { summary: "Click" }
-      }
-    },
-    showText: {
-      control: "boolean",
-      // default: true,
-      description: "Boolean to show or hide the text",
-      table: {
-        defaultValue: { summary: true },
-        type: {
-          summary: "Use Case",
-          detail:
-            "Set this property to true in large screen and false on mobile"
-        }
-      }
-    }
-  },
-  args: {
-    buttonText: "Click"
-  }
-};
-
-const Template = (args) => {
-  return <AdaptiveButton {...args} />;
-};
-
-export const FullButton = Template.bind({});
-FullButton.args = {
-  showText: true,
-  // buttonText: "Full Button",
-  icon: <Class />
-};
-
-export const IconOnly = Template.bind({});
-IconOnly.args = {
-  showText: false,
-  icon: <Class />,
-  buttonText: "test"
-};

package/src/stories/ElementsStories/Alert.stories.js

@@ -1,41 +0,0 @@
-import React from "react";
-
-import { HawaAlert } from "../../elements";
-
-const Template = (args) => {
-  return (
-    <>
-      <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" />
-    </>
-  );
-};
-//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/ElementsStories/InputLabel.stories.js

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

package/src/stories/ElementsStories/ItemCard.stories.js

@@ -1,18 +0,0 @@
-import { Container } from "@mui/material";
-import React from "react";
-import { HawaCard } from "../../elements";
-
-export default {
-  title: "Elements/Cards/Items",
-  component: [HawaCard],
-  argTypes: {
-    buttonLabel: {
-      control: "text",
-      description: "The text next to the logo"
-    }
-  }
-};
-
-export const Items = (args) => {
-  return <HawaCard />;
-};

package/src/stories/ElementsStories/LogoButtons.stories.js

@@ -1,73 +0,0 @@
-import { Container } from "@mui/material";
-import React from "react";
-import { ActionButton, HawaLogoButton } from "../../elements";
-
-export default {
-  title: "Elements/Buttons/LogoButtons",
-  component: HawaLogoButton,
-  argTypes: {
-    buttonLabel: {
-      control: "text",
-      description: "The text next to the logo"
-    },
-    logo: {
-      control: "select",
-      options: [
-        "google",
-        "twitter",
-        "github",
-        "paypal",
-        "applepay",
-        "googlepay",
-        "stcpay",
-        "mada",
-        "visa/master"
-      ],
-      description: "a brand name that will display the logo accordingly",
-      table: {
-        type: {
-          summary: "Examples",
-          detail: "google, twitter, github, paypal, applepay, googlepay"
-        }
-      }
-    }
-  }
-};
-
-const Template = (args) => {
-  return (
-    <Container maxWidth="xs" variant="plain">
-      <HawaLogoButton logo={args.logo} buttonText={args.buttonLabel} />
-    </Container>
-  );
-};
-
-export const Google = Template.bind({});
-Google.args = { buttonLabel: "Sign in via Google", logo: "google" };
-
-export const Twitter = Template.bind({});
-Twitter.args = { buttonLabel: "Sign in via Twitter", logo: "twitter" };
-
-export const Github = Template.bind({});
-Github.args = { buttonLabel: "Sign in via Github", logo: "github" };
-
-export const WalletPay = Template.bind({});
-WalletPay.args = { buttonLabel: "Pay with Wallet", logo: "wallet" };
-
-export const GooglePay = Template.bind({});
-GooglePay.args = { buttonLabel: "Google Pay", logo: "googlepay" };
-
-export const ApplePay = Template.bind({});
-ApplePay.args = { buttonLabel: "Apple Pay", logo: "applepay" };
-
-export const STCPay = Template.bind({});
-STCPay.args = { buttonLabel: "STC Pay", logo: "stcpay" };
-
-export const VisaMasterPay = Template.bind({});
-VisaMasterPay.args = { buttonLabel: "Visa / Mastercard", logo: "visa/master" };
-
-export const PayPal = Template.bind({});
-PayPal.args = { buttonLabel: "PayPal", logo: "paypal" };
-
-export const Mada = Template.bind({});
-Mada.args = { buttonLabel: "Mada", logo: "mada" };

package/src/stories/ElementsStories/PricingCard.stories.js

@@ -1,91 +0,0 @@
-import React from "react";
-import { HawaPricingCard } from "../../elements";
-
-export default {
-  title: "Elements/Cards/Pricing",
-  component: [HawaPricingCard],
-  argTypes: {
-    title: {
-      control: "text",
-      description: "The title of the pricing package"
-    },
-    subtitle: {
-      control: "text",
-      description: "The subtitle of the pricing package"
-    },
-    price: {
-      control: "number",
-      description: "The price of the pricing package"
-    },
-    currency: {
-      control: "text",
-      description: "The currency of the price",
-      table: {
-        type: {
-          summary: "Examples",
-          detail: "$, SAR, ريال, دولار"
-        }
-      }
-    },
-    cycleText: {
-      control: "text",
-      description: "The cycle period of the payment",
-      table: {
-        type: {
-          summary: "Examples",
-          detail: "Monthly, Annually, Quarterly, Every 3 Months, Every 6 Months"
-        }
-      }
-    },
-    features: {
-      control: "array",
-      description: "An Array of strings for the package features"
-    },
-    lang: {
-      control: "text",
-      description: "The language of the card to change the direction",
-      table: {
-        type: {
-          summary: "Options",
-          detail: "ar, en"
-        }
-      }
-    },
-    buttonText: {
-      control: "text",
-      description: "The text of the button"
-    }
-  },
-  args: {
-    title: "Pro",
-    subtitle: "For small businesses",
-    price: 300,
-    currency: "$",
-    cycleText: "Monthly",
-    buttonText: "Select Plan"
-  }
-};
-
-export const LTR = (args) => {
-  return (
-    <HawaPricingCard
-      {...args}
-      features={["Unlimited Menus", "Unlimited Items", "Custom Handle"]}
-    />
-  );
-};
-
-export const RTL = (args) => {
-  return (
-    <HawaPricingCard
-      lang="ar"
-      title="الإحترافي"
-      subtitle="للمنشئات الصغيرة"
-      price="300"
-      currency="ريال"
-      cycleText="كل 6 أشهر"
-      buttonText="إختر الباقة"
-      features={["قوائم لا محدودة", "عناصر لا محدودة", "أسم مخصص"]}
-    />
-  );
-};

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

@@ -1,36 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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/ElementsStories/TextField.stories.js

@@ -1,49 +0,0 @@
-import React from "react";
-import { HawaTextField } from "../../elements";
-
-const Template = (args) => {
-  return <HawaTextField {...args} />;
-};
-
-export default {
-  title: "UI/TextField",
-  component: HawaTextField,
-  argsTypes: {
-    type: {
-      name: "type",
-      type: { name: "string", required: true },
-      options: ["text", "number", "date"],
-      control: { type: "radio" },
-      defaultValue: "text",
-      description: "Styled Text Field",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "Hello" }
-      }
-    }
-  }
-  // args: {
-  //   bdRadius: 15,
-  //   defaultValue: "Test",
-  //   type: "date"
-  // }
-};
-
-export const Light = Template.bind({});
-export const Dark = Template.bind({});
-
-Light.args = {
-  placeholder: "Exemple ...",
-  defaultValue: "This isko default value",
-  inputLabel: "Text Field",
-  bgColor: "lightgray",
-  padding: 10
-  // type: "number"
-};
-Dark.args = {
-  placeholder: "Exemple ...",
-  defaultValue: "This is default value",
-  inputLabel: "Text Field",
-  bgColor: "lightgray",
-  padding: 10
-};

package/src/stories/Introduction.stories.mdx

@@ -1,229 +0,0 @@
-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="Introduction" />
-
-<style>{`
-  .subheading {
-    --mediumdark: '#999999';
-    font-weight: 900;
-    font-size: 13px;
-    color: #999;
-    letter-spacing: 6px;
-    line-height: 24px;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-    margin-top: 40px;
-  }
-
-  .link-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-    row-gap: 10px;
-  }
-
-  @media (min-width: 620px) {
-    .link-list {
-      row-gap: 20px;
-      column-gap: 20px;
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  @media all and (-ms-high-contrast:none) {
-  .link-list {
-      display: -ms-grid;
-      -ms-grid-columns: 1fr 1fr;
-      -ms-grid-rows: 1fr 1fr;
-    }
-  }
-
-  .link-item {
-    display: block;
-    padding: 20px 30px 20px 15px;
-    border: 1px solid #00000010;
-    border-radius: 5px;
-    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-    color: #333333;
-    display: flex;
-    flex-direction:column;
-    align-items: flex-start;
-  }
-
-  .link-item:hover {
-    border-color: #1EA7FD50;
-    transform: translate3d(0, -3px, 0);
-    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-  }
-
-  .link-item:active {
-    border-color: #1EA7FD;
-    transform: translate3d(0, 0, 0);
-  }
-
-  .link-item strong {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 2px;
-  }
-  
-  .link-item img {
-    height: 40px;
-    width: 40px;
-    margin-right: 15px;
-    flex: none;
-  }
-
-  .link-item span {
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-  .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #E7FDD8;
-    color: #66BF3C;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-  }
-
-  .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
-  .tip-wrapper code {
-    font-size: 12px;
-    display: inline-block;
-  }
-
-  
-`}</style>
-
-# Welcome to Hawa
-
-<div className="tip-wrapper">
-  <span className="tip">Notice</span>This page is still in progress
-</div>
-
-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">Structure</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" /> */}
-    <h3>Layout</h3>
-    <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" /> */}
-    <h3>Blocks</h3>
-    <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" /> */}
-    <h3>Elements</h3>
-    <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" /> */}
-    <h3>UI</h3>
-    <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/AppBar.stories.js

@@ -1,29 +0,0 @@
-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"
-};