@sikka/hawa 0.0.1

package/.prettierrc

@@ -0,0 +1,28 @@
+{
+  "semi": false,
+  "overrides": [
+    {
+      "files": ["*.jsx", "*.js"],
+      "options": {
+        "arrowParens": "always",
+        "bracketSpacing": true,
+        "endOfLine": "lf",
+        "htmlWhitespaceSensitivity": "css",
+        "insertPragma": false,
+        "jsxBracketSameLine": false,
+        "jsxSingleQuote": false,
+        "printWidth": 80,
+        "proseWrap": "preserve",
+        "quoteProps": "as-needed",
+        "requirePragma": false,
+        "semi": true,
+        "singleQuote": false,
+        "tabWidth": 2,
+        "trailingComma": "none",
+        "useTabs": false,
+        "vueIndentScriptAndStyle": false,
+        "parser": "babel"
+      }
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,119 @@
+<!-- ![Hawa | هواء](https://xakher-images.s3.ap-southeast-1.amazonaws.com/hawa-logo.png) -->
+
+<p align="center">
+  <img src="https://xakher-images.s3.ap-southeast-1.amazonaws.com/hawa-logo.png" alt="Hawa | هواء" />
+</p>
+
+
+
+# Hawa | هواء
+
+[![NPM](https://img.shields.io/npm/v/@sikka/hawa.svg)](https://www.npmjs.com/package/@sikka/hawa)
+[![NPM](https://img.shields.io/npm/dt/@sikka/hawa.svg)](https://www.npmjs.com/package/@sikka/hawa)
+[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+> Opinionated UI Kit for web apps and websites. 
+
+# Concept
+
+# Features
+- [ ] Change borders and margin, padding in one place
+- [ ] Drag and drop tool to create a layout of boxes
+
+
+## Boxes
+Most components will live inside **boxes**. Windows can show anything. It can show a video, image, form, iFrame, etc. Boxes make out the layout of your website or application. Boxes can be arranged in different layouts
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/46135573/143972102-0c104239-b8f6-4a7b-9aad-54f6d91a8906.png" alt="layout-types" />
+</p>
+
+Points
+- The content inside each box can be scrollable (vertical/horizontal/Both) with one prop
+- you can control the spacing of the content inside each box with one prop
+- you can also control the spacing of all the box in the layout
+- some boxes can float (animation of open and close modal)
+- some boxes can go full screen (animation to transition)
+
+
+## Install
+
+```bash
+
+npm install --save @sikka/hawa
+
+```
+
+## Components
+
+- [ ] Layout
+- [ ] Box
+- [ ] TextField
+- [ ] TextArea
+- [ ] Radio Selector
+- [ ] PasswordField
+- [ ] Autocomplete
+- [ ] Tabs
+
+## Usage
+
+```jsx
+
+//example coming soon inshallah
+
+```
+
+## Contributing
+
+To contribute, clone this github repository and run the development server
+
+- clone repository
+
+```bash
+git clone git@github.com:sikka-software/hawa.git
+cd hawa
+npm install
+```
+
+## TESTING
+
+- Run development server
+
+```bash
+git clone git@github.com:sikka-software/hawa.git
+cd hawa
+npm install
+npm run storybook
+```
+
+- Edit **Hawa/src/stories/Hawa.stories.js_** file
+
+- Add your custom testing component in **Hawa.stories.js** file
+
+- Or you can preview without running development server. [See Preview](https://sikka-software.github.io/Hawa/storybook-static/)
+
+```jsx
+
+//example coming soon inshallah
+
+```
+
+## Deployment
+
+```bash
+npm run build-storybook
+```
+
+## Publishing (Admin)
+
+```bash
+npm version [major | minor | patch]
+npm run build-lib
+npm publish --access public
+```
+
+## License
+
+<!-- https://github.com/react-component/drawer  -->
+
+MIT © [SIKKA SOFTWARE](https://sikka.sa)

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sikka/hawa",
+  "version": "0.0.1",
+  "description": "UI Kit",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "build-lib": "rollup -c"
+  },
+  "author": "SIKKA SOFTWARE",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-react": "^7.12.10",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^11.1.1",
+    "@storybook/addon-actions": "^6.4.7",
+    "@storybook/addon-essentials": "^6.4.7",
+    "@storybook/addon-links": "^6.4.7",
+    "@storybook/react": "^6.4.7",
+    "babel-loader": "^8.2.2",
+    "framer-motion": "^4.1.7",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rollup": "^2.38.4",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "*",
+    "prop-types": "^15.7.2",
+    "react-hook-form": "^7.20.4",
+    "tinycolor2": "^1.4.2"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,40 @@
+import babel from "rollup-plugin-babel";
+import resolve from "@rollup/plugin-node-resolve";
+import external from "rollup-plugin-peer-deps-external";
+import { terser } from "rollup-plugin-terser";
+import postcss from "rollup-plugin-postcss";
+import commonjs from "@rollup/plugin-commonjs";
+
+export default [
+  {
+    input: "src/index.js",
+    output: [
+      {
+        file: "dist/index.js",
+        format: "cjs"
+      },
+      {
+        file: "dist/index.es.js",
+        format: "es",
+        exports: "named"
+      }
+    ],
+    plugins: [
+      postcss({
+        plugins: [],
+        minimize: true
+      }),
+      babel({
+        exclude: "node_modules/**",
+        presets: [
+          "@babel/preset-env",
+          ["@babel/preset-react", { runtime: "automatic" }]
+        ]
+      }),
+      external(),
+      resolve(),
+      terser(),
+      commonjs()
+    ]
+  }
+];

package/src/components/Hawa/AdaptiveButton/AdaptiveButton.jsx

@@ -0,0 +1,261 @@
+import React, { useState, useContext } from "react";
+import Button from "@material-ui/core/Button";
+import Tooltip from "@material-ui/core/Tooltip";
+import { motion } from "framer-motion";
+import { ThemeProvider } from "../HawaProvider";
+
+const AdaptiveButton = (props) => {
+  const { showText, buttonColor, borderRadius, textColor } = props;
+  const theme = useContext(ThemeProvider);
+
+  const screenSize = {
+    width: 1500,
+    height: 200
+  };
+  const [tooltip, setTooltip] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  //full button
+  if (showText) {
+    return (
+      <motion.div
+        transition={{ duration: 0.2 }}
+        initial={{
+          // direction: "rtl",
+          backgroundColor: buttonColor,
+          color: textColor,
+          borderRadius: theme.borderRadius,
+          width: "fit-content"
+        }}
+        whileHover={{
+          backgroundColor: props.hoverColor,
+          borderRadius: borderRadius
+        }}
+        whileTap={{ scale: 1.2 }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onMouseDown={() => {
+          setHovered(true);
+          setTooltip(true);
+        }}
+        onMouseUp={() => {
+          setHovered(false);
+          setTooltip(true);
+        }}
+        onMouseOver={() => {
+          setHovered(true);
+          setTooltip(true);
+        }}
+        onMouseOut={() => {
+          setHovered(false);
+          // setTooltip(true);
+        }}
+      >
+        <Button
+          disabled={props.disabled}
+          disableRipple
+          aria-label={props.buttonLabel}
+          color={props.danger ? "secondary" : "primary"}
+          onClick={props.handleClick}
+          style={{
+            borderRadius: borderRadius,
+            padding: 10,
+            color: hovered
+              ? "#ffffff"
+              : props.danger
+              ? "#f50057"
+              : "var(--blue)"
+          }}
+        >
+          {props.icon}
+          {props.showText ? (
+            <span style={{ marginLeft: props.icon ? 5 : 0 }}>
+              {props.buttonLabel}
+            </span>
+          ) : null}
+        </Button>
+      </motion.div>
+    );
+  } else if (props.buttonLabelOnly) {
+    return (
+      <motion.div
+        transition={{
+          duration: 0.2
+        }}
+        initial={{
+          width: "fit-content",
+          backgroundColor: props.buttonColor,
+          borderRadius: borderRadius
+        }}
+        whileTap={{ scale: 1.2 }}
+        whileHover={{
+          backgroundColor: props.hoverColor,
+          borderRadius: borderRadius
+        }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onMouseDown={() => {
+          setHovered(true);
+          setTooltip(true);
+        }}
+        onMouseUp={() => {
+          setHovered(false);
+          setTooltip(true);
+        }}
+        onMouseOver={() => {
+          setHovered(true);
+          setTooltip(true);
+        }}
+        onMouseOut={() => {
+          setHovered(false);
+          // setTooltip(true);
+        }}
+      >
+        <Tooltip
+          placement={screenSize.width > 400 ? "bottom-center" : "top-center"}
+          enterTouchDelay={100}
+          title={
+            props.hint ? (
+              props.hint
+            ) : (
+              <div>
+                <div
+                  style={{
+                    fontSize: 20,
+                    fontWeight: 800,
+                    padding: 10,
+                    paddingBottom: 5,
+                    textAlign: "center"
+                  }}
+                >
+                  {props.hintTitle}
+                </div>
+                <div
+                  style={{
+                    fontSize: 13,
+                    fontWeight: 100,
+                    padding: 10,
+                    textAlign: "center"
+                  }}
+                >
+                  {props.hintContent}
+                </div>
+              </div>
+            )
+          }
+        >
+          <Button
+            disabled={props.disabled}
+            size="small"
+            disableRipple
+            aria-label={props.buttonLabel}
+            onClick={props.handleClick}
+            color={props.danger ? "secondary" : "primary"}
+            style={{
+              padding: 10,
+
+              color: hovered
+                ? "#ffffff"
+                : props.danger
+                ? "#f50057"
+                : "var(--blue)"
+            }}
+          >
+            {props.buttonLabel}
+          </Button>
+        </Tooltip>
+      </motion.div>
+    );
+  } else {
+    //icon only
+    return (
+      <motion.div
+        transition={{ duration: 0.2 }}
+        initial={{
+          width: "fit-content",
+          backgroundColor: props.buttonColor,
+          borderRadius: borderRadius,
+          // padding: 5,
+          margin: 5
+        }}
+        whileTap={{ scale: 1.2 }}
+        whileHover={{
+          backgroundColor: props.hoverColor,
+          borderRadius: borderRadius
+        }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onMouseDown={() => {
+          setHovered(true);
+          setTooltip(true);
+        }}
+        onMouseUp={() => {
+          setHovered(false);
+          setTooltip(true);
+        }}
+        onMouseOver={() => {
+          setHovered(true);
+          setTooltip(true);
+        }}
+        onMouseOut={() => {
+          setHovered(false);
+          // setTooltip(true);
+        }}
+      >
+        <Tooltip
+          placement={screenSize.width > 400 ? "bottom-center" : "top-center"}
+          enterTouchDelay={100}
+          title={
+            props.hint ? (
+              props.hint
+            ) : (
+              <div>
+                <div
+                  style={{
+                    fontSize: 20,
+                    fontWeight: 800,
+                    padding: 10,
+                    paddingBottom: 5,
+                    textAlign: "center"
+                  }}
+                >
+                  {props.hintTitle}
+                </div>
+                <div
+                  style={{
+                    fontSize: 13,
+                    fontWeight: 100,
+                    padding: 10,
+                    textAlign: "center"
+                  }}
+                >
+                  {props.hintContent}
+                </div>
+              </div>
+            )
+          }
+        >
+          <Button
+            disabled={props.disabled}
+            size="small"
+            disableRipple
+            aria-label={props.buttonLabel}
+            onClick={props.handleClick}
+            color={props.danger ? "secondary" : "primary"}
+            style={{
+              padding: 10,
+              color: hovered
+                ? "#ffffff"
+                : props.danger
+                ? "#f50057"
+                : "var(--blue)"
+            }}
+          >
+            {props.icon}
+          </Button>
+        </Tooltip>
+      </motion.div>
+    );
+  }
+};
+
+export default AdaptiveButton;

package/src/components/Hawa/AdaptiveButton/index.js

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

package/src/components/Hawa/AutoCompleteField/AutoCompleteField.jsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { Controller, useFormContext } from "react-hook-form"
+// import Autocomplete from "@material-ui/lab/Autocomplete";
+
+export const AutoCompleteField = (props) => {
+  const { control } = useFormContext()
+  const { name, rules, shouldUnregister } = props
+
+  return (
+    <React.Fragment>
+      <Controller
+        name={name}
+        rules={rules}
+        control={control}
+        shouldUnregister={shouldUnregister}
+        className="theme_form_input"
+        render={({ field: { onChange, value } }) => {
+          return (
+            <input type="text" />
+            // <Autocomplete
+            //   onChange={(e, data) => {
+            //     onChange(data);
+            //   }}
+            //   value={value ?? ""}
+            //   {...props}
+            //   className={"theme_form_input"}
+            // />
+          )
+        }}
+      />
+    </React.Fragment>
+  )
+}

package/src/components/Hawa/AutoCompleteField/index.js

@@ -0,0 +1 @@
+export * from "./AutoCompleteField.jsx"

package/src/components/Hawa/Checkbox/Checkbox.jsx

@@ -0,0 +1,20 @@
+import React from "react"
+import FormControlLabel from "@material-ui/core/FormControlLabel"
+import Checkbox from "@material-ui/core/Checkbox"
+import PropTypes from "prop-types"
+
+export const StyledCheckbox = (props) => {
+  console.log("props : ", props)
+  return (
+    <React.Fragment>
+      <FormControlLabel
+        control={
+          <Checkbox
+            style={{ color: props.color || null }}
+            defaultChecked={props.defaultValue}
+          />
+        }
+      />
+    </React.Fragment>
+  )
+}

package/src/components/Hawa/Checkbox/index.js

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