@sikka/hawa 0.0.2 → 0.0.5

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"
+// };
+/****************************/

package/src/stories/Introduction.stories.js

@@ -0,0 +1,211 @@
+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;
+    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;
+    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 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} theme={{ ...defaultTheme, ...args.theme }}>
+      <Box themeType="primary">Box 1</Box>
+      <Box themeType="secondary">
+        <div style={{ backgroundColor: "white", padding: 10, color: "black" }}>
+          testing box in box
+        </div>
+      </Box>
+      <Box themeType="secondary">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/RadioSelector.stories.js

@@ -1,69 +1,69 @@
-import React from "react";
-import { StyledRadioSelector } from "../components/Hawa/RadioSelector";
-import { HawaProvider } from "../components/Hawa/HawaProvider";
-import "../styles.css";
-
-const Template = (args) => {
-  const theme = {
-    borderRadius: 5,
-    primaryColor: "green",
-    secondaryColor: "red",
-    // margins: "10px",
-    paddings: 10
-  };
-  return (
-    <HawaProvider theme={theme}>
-      <StyledRadioSelector {...args} />
-    </HawaProvider>
-  );
-};
-export default {
-  title: "Components/RadioSelector",
-  component: Light,
-  argTypes: {
-    options: {
-      control: "array"
-    }
-  },
-  args: {
-    options: [
-      { text: "Option 1", label: "option1" },
-      { text: "Option 2", label: "option2" },
-      { text: "Option 3", label: "option3" }
-    ]
-  }
-};
-
-export const Light = Template.bind({});
-
-Light.args = {
-  options: [
-    { text: "Option 1", label: "option1" },
-    { text: "Option 2", label: "option2" },
-    { text: "Option 3", label: "option3" }
-  ],
-  selectedColor: "blue",
-  borderRadius: 12,
-  defaultValue: "option2",
-  bgSelectedColor: "red",
-  textSelectedColor: "white",
-  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" }
-  ],
-  selectedColor: "blue",
-  borderRadius: 12,
-  defaultValue: "option2",
-  bgSelectedColor: "blue",
-  textSelectedColor: "white",
-  handleChange: () => {
-    console.log("handleChange goes here");
-  }
-};
+import React from "react";
+import { StyledRadioSelector } from "../ui";
+import { HawaProvider } from "../themes/HawaProvider";
+import "../styles.css";
+
+const Template = (args) => {
+  const theme = {
+    borderRadius: 5,
+    primaryColor: "green",
+    secondaryColor: "red",
+    // margins: "10px",
+    paddings: 10
+  };
+  return (
+    <HawaProvider theme={theme}>
+      <StyledRadioSelector {...args} />
+    </HawaProvider>
+  );
+};
+export default {
+  title: "Components/RadioSelector",
+  component: Light,
+  argTypes: {
+    options: {
+      control: "array"
+    }
+  },
+  args: {
+    options: [
+      { text: "Option 1", label: "option1" },
+      { text: "Option 2", label: "option2" },
+      { text: "Option 3", label: "option3" }
+    ]
+  }
+};
+
+export const Light = Template.bind({});
+
+Light.args = {
+  options: [
+    { text: "Option 1", label: "option1" },
+    { text: "Option 2", label: "option2" },
+    { text: "Option 3", label: "option3" }
+  ],
+  selectedColor: "blue",
+  borderRadius: 12,
+  defaultValue: "option2",
+  bgSelectedColor: "red",
+  textSelectedColor: "white",
+  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" }
+  ],
+  selectedColor: "blue",
+  borderRadius: 12,
+  defaultValue: "option2",
+  bgSelectedColor: "blue",
+  textSelectedColor: "white",
+  handleChange: () => {
+    console.log("handleChange goes here");
+  }
+};