@sikka/hawa 0.0.1 → 0.0.4

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

@@ -0,0 +1,45 @@
+# 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:
+  push:
+    branches: [ main ]
+
+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 run build-lib
+      - run: npm run build:styles
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

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

@@ -0,0 +1,45 @@
+# 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 run build-lib
+      - run: npm run build:styles
+      - 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,119 +1,149 @@
-<!-- ![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)
+<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)