@sikka/hawa 0.0.2 → 0.0.3

package/.github/workflows/hawa-publish.yml

@@ -0,0 +1,43 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Hawa Publish Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+      - run: | 
+         if [ -e 'package-lock.json' ]; then 
+          npm ci
+         else 
+          npm install
+         fi
+      #- run: npm test
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: | 
+         if [ -e 'package-lock.json' ]; then 
+          npm ci
+         else 
+          npm install
+         fi
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/.prettierrc

@@ -1,28 +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"
-      }
-    }
-  ]
-}
+{
+  "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

@@ -1,148 +1,149 @@
-<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
-
-### Components
-
-The smallest elements of this UI kit are the typical low-level components. Examples of components:
-
-- InputField
-- Checkboxes
-- Modal
-- Drag-Drop Image(s)
-- Button
-- etc ...
-
-### Blocks
-
-Blocks are commonly used collection of components. Examples of blocks:
-
-- Sign-In
-- Sign-Up
-- Reset Password
-- SaaS Pricing Plans
-- Payment Methods Block (to list saved methods)
-- Account Block (to edit account info)
-- etc ...
-
-### Boxes
-
-Most components and blocks 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)
-
-### Utilities
-
-[x] **getTextColor(bgColor)**
-determine if text should be black or white based on the contrast of `bgColor`
-
-[ ] **darkenColor(color,percent)**
-darken a given `color` by a given `percent`
-
-[ ] **lightenColor(color,percent)**
-lighten a given `color` by a given `percent`
-
-# Features
-
-- [ ] Change borders and margin, padding in one place
-- [ ] Drag and drop tool to create a layout of boxes
-
-## Components
-
-- [ ] Layout
-- [ ] Box
-- [ ] TextField
-- [ ] TextArea
-- [ ] Radio Selector
-- [ ] PasswordField
-- [ ] Autocomplete
-- [ ] Tabs
-- [ ] Alerts
-- [ ] Badges
-
-## Install
-
-```bash
-
-npm install --save @sikka/hawa
-
-```
-
-## 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)
+<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?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@sikka/hawa)
+[![NPM](https://img.shields.io/npm/dt/@sikka/hawa.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@sikka/hawa)
+
+
+
+> Opinionated UI Kit for web apps and websites.
+
+# Concept
+
+### Components
+
+The smallest elements of this UI kit are the typical low-level components. Examples of components:
+
+- InputField
+- Checkboxes
+- Modal
+- Drag-Drop Image(s)
+- Button
+- etc ...
+
+### Blocks
+
+Blocks are commonly used collection of components. Examples of blocks:
+
+- Sign-In
+- Sign-Up
+- Reset Password
+- SaaS Pricing Plans
+- Payment Methods Block (to list saved methods)
+- Account Block (to edit account info)
+- etc ...
+
+### Boxes
+
+Most components and blocks 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)
+
+### Utilities
+
+- [x] **getTextColor(bgColor)**
+determine if text should be black or white based on the contrast of `bgColor`
+
+- [ ] **darkenColor(color,percent)**
+darken a given `color` by a given `percent`
+
+- [ ] **lightenColor(color,percent)**
+lighten a given `color` by a given `percent`
+
+# Features
+
+- [ ] Change borders and margin, padding in one place
+- [ ] Drag and drop tool to create a layout of boxes
+
+## Components
+
+- [ ] Layout
+- [ ] Box
+- [ ] TextField
+- [ ] TextArea
+- [ ] Radio Selector
+- [ ] PasswordField
+- [ ] Autocomplete
+- [ ] Tabs
+- [ ] Alerts
+- [ ] Badges
+
+## Install
+
+```bash
+
+npm install --save @sikka/hawa
+
+```
+
+## 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

@@ -1,47 +1,49 @@
-{
-  "name": "@sikka/hawa",
-  "version": "0.0.2",
-  "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"
-  }
-}
+{
+  "name": "@sikka/hawa",
+  "version": "0.0.3",
+  "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",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/theming": "^6.4.19",
+    "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

@@ -1,30 +1,30 @@
-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()
-    ]
-  }
-];
+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/blocks/Account/UserProfile.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { StyledTextField, ActionButton } from "../../ui";
+import { Box } from '../../layout'
+
+export const UserProfile = (props) => {
+    return (
+        <Box maxWidth={400}>
+            <StyledTextField type="text" inputLabel="First Name" />
+            <StyledTextField type="text" inputLabel="Last Name" />
+            <StyledTextField type="email" inputLabel="Email" />
+            <StyledTextField type="password" inputLabel="Password" />
+            <ActionButton last text="Update Account" />
+        </Box>
+    );
+};

package/src/blocks/Account/UserSettings.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { StyledTextField, ActionButton } from "../../ui";
+import { Box } from '../../layout'
+
+export const UserSettings = (props) => {
+    return (
+        <Box maxWidth={400}>
+            <StyledTextField type="text" inputLabel="First Name" />
+            <StyledTextField type="text" inputLabel="Last Name" />
+            <StyledTextField type="email" inputLabel="Email" />
+            <StyledTextField type="password" inputLabel="Password" />
+            <ActionButton last text="Update Account" />
+        </Box>
+    );
+};

package/src/blocks/Account/index.js

@@ -0,0 +1,2 @@
+export * from "./UserProfile.js";
+export * from "./UserSettings.js";

package/src/blocks/AuthForms/NewPasswordForm.js

@@ -0,0 +1,17 @@
+import React, { useContext } from "react";
+import { Box } from "../../layout";
+import { ThemeProvider } from "../../themes/HawaProvider";
+import { StyledTextField, StyledInputLabel } from "../../ui";
+export const NewPasswordForm = (props) => {
+  const theme = useContext(ThemeProvider);
+  return (
+    <Box maxWidth={400} >
+
+      <StyledInputLabel label="Password" />
+      <StyledTextField type="password" />
+      <StyledInputLabel label="Confirm Password" />
+      <StyledTextField type="password" />
+      {props.children}
+    </Box>
+  );
+};

package/src/blocks/AuthForms/ResetPasswordForm.js

@@ -0,0 +1,14 @@
+import React, { useContext } from "react";
+import { Box } from "../../layout";
+import { ThemeProvider } from "../../themes/HawaProvider";
+import { StyledTextField, StyledInputLabel } from "../../ui";
+export const ResetPasswordForm = (props) => {
+  const theme = useContext(ThemeProvider);
+  return (
+    <Box maxWidth={400} >
+      <StyledInputLabel label="Email" />
+      <StyledTextField type="text" />
+      {props.children}
+    </Box>
+  );
+};

package/src/blocks/AuthForms/SignInForm.js

@@ -0,0 +1,19 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../../themes/HawaProvider";
+import { StyledTextField, StyledInputLabel } from "../../ui";
+import { Box } from '../../layout'
+export const SignInForm = (props) => {
+  const theme = useContext(ThemeProvider);
+  return (
+    <Box maxWidth={400}>
+
+      <StyledInputLabel label="Email" />
+      <StyledTextField type="text" />
+      <StyledInputLabel label="Password" />
+      <StyledTextField type="text" />
+
+      {props.children}
+
+    </Box>
+  );
+};