# web-components-phionike > Phionike Web Components Library Latest version **0.1.16** (published 2021-08-04) · 0 weekly downloads ## Install ```sh npm install web-components-phionike pnpm add web-components-phionike yarn add web-components-phionike bun add web-components-phionike ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.16 | | Published | 2021-08-04 | | First published | 2021-07-19 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 13 | | Unpacked size | 120.7 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | Shubh Nisar | | Maintainers | shubhooo | | Keywords | react, components, ui | ## Links - npm: https://www.npmjs.com/package/web-components-phionike - npm.io page: https://npm.io/package/web-components-phionike ## Dependencies (13) - [react](https://npm.io/package/react.md) ^17.0.2 - [node-sass](https://npm.io/package/node-sass.md) ^6.0.1 - [react-dom](https://npm.io/package/react-dom.md) ^17.0.2 - [web-vitals](https://npm.io/package/web-vitals.md) ^1.1.2 - [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3 - [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1 - [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.2.0 - [styled-components](https://npm.io/package/styled-components.md) ^5.3.0 - [react-navbar-dropdown](https://npm.io/package/react-navbar-dropdown.md) ^1.4.3 - [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.2.7 - [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.14.1 - [react-accessible-accordion](https://npm.io/package/react-accessible-accordion.md) ^3.3.4 - [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.8.3 ## Alternatives - [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads - [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads - [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads - [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads - [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads ## Recent versions - 0.1.16 (latest) — 2021-08-04 - 0.1.15 — 2021-07-27 - 0.1.14 — 2021-07-23 - 0.1.13 — 2021-07-22 - 0.1.12 — 2021-07-22 - 0.1.11 — 2021-07-21 - 0.1.10 — 2021-07-20 - 0.1.9 — 2021-07-20 - 0.1.8 — 2021-07-20 - 0.1.7 — 2021-07-20 - 0.1.6 — 2021-07-20 - 0.1.5 — 2021-07-20 - 0.1.4 — 2021-07-20 - 0.1.3 — 2021-07-20 - 0.1.2 — 2021-07-19 - … 2 more at https://npm.io/package/web-components-phionike/versions ## README # web-components-phionike A React Library containing basic UI components. ## Installing ### `npm install web-components-phionike` ## Dependencies ### `npm install styled-components` ## Components #### Avatars ```json import { Avatars } from 'web-components-phionike'; ``` #### _props_ | Attribute | Values | Default | Description | | --------- | ------------------------------------------------ | -------- | ------------------------------------ | | size | `"xs"` : `"s"` : `"m"` : `"xm"` : `"l"` : `"xl"` | `m` | The size of Avatar. | | mode | `square` : `circle` | `square` | The shape of Avatar. | | src | `-` | `NULL` | The source location of Avatar image. | ## #### Banner ```json import { Banner } from 'web-components-phionike'; ``` #### _props_ | Attribute | Values | Default | Description | | --------------- | ------------------------------------ | --------- | ------------------------------------ | | backgroundColor | _`String`_ | `#FAFAFA` | The color of Banner. | | image | `-` | `NULL` | The source location of Avatar image. | | button1 | _`String`_ | `#FAFAFA` | The bgColor of button1. | | button1Color | _`String`_ | `#0B5FFF` | The color of button1. | | button2 | _`String`_ | `#FAFAFA` | The bgColor of button2. | | button2Color | _`String`_ | `#0B5FFF` | The color of button2. | | borderRadius | _`Integer`_ | `0` | Border Radius of Banner. | | button1OnClick | _`()=>{}`_ | `null` | Call to action of Button 1. | | button2OnClick | _`()=>{}`_ | `null` | Call to action of Button 2. | ## #### Button ```json import { Button } from 'web-components-phionike'; ``` #### _props_ | Attribute | Values | Default | Description | | --------- | ------------------------------------ | -------- | ------------------------------- | | size | `"small"` : `"medium"` : `"large"` | `medium` | The size of Button. | | radius | _`Integer`_ | `8` | The border-radius of Button. | | primary | _`Boolean`_ | `false` | The background-color of Button. | | onClick | _`()=>{}`_ | `null` | Call to action of Button. | ## #### Buttonicon ```json import { Buttonicon } from 'web-components-phionike'; ``` #### _props_ | Attribute | Values | Default | Description | | --------- | ------------------------------------ | ---------- | --------------------------------- | | icon | `-` | `PlusIcon` | Icon of Buttonicon. | | radius | _`Integer`_ | `8` | Border Radius of Buttonicon. | | size | _`Integer`_ | `52` | The width & height of Buttonicon. | | disabled | _`Boolean`_ | `false` | Disable or Enable Buttonicon. | | primary | _`Boolean`_ | `false` | Primary or Default Buttonicon. | | onClick | _`()=>{}`_ | `null` | Call to action of Button. | ## #### Chips ```json import { Chips } from 'web-components-phionike'; ``` #### _props_ | Attribute | Values | Default | Description | | ------------- | ----------------------------------- | ------------ | ------------------------------------ | | disable | _`Boolean`_ | `false` | Disable Chip. | | label | _`String`_ | `Chip Label` | The label of Chip. | | avatar | `-` | `img` | The source location of Avatar image. | | avatarVisible | _`Boolean`_ | `true` | The visibility of Avatar. | | crossVisible | _`Boolean`_ | `true` | The visibility of Cross Icon. | ## #### Circular Progress ```json import { CircularProgressBar } from 'web-components-phionike'; ``` #### _props_ | Attribute | Values | Default | Description | | ----------- | ------------------------------------ | --------- | ------------------------------- | | strokeWidth | _`Integer`_ | `10` | Width of Color Indicator Strip. | | percentage | _`Integer`_ | `50` | Percentage Progress Completed. | | width | _`Integer`_ | `50` | The total width of Indicator. | | height | _`Integer`_ | `50` | The total height of Indicator. | | color | _`String`_ | `#0B5FFF` | The color of Indicator. | ## #### Input ```json import { Input } from 'web-components-phionike'; ``` #### _props_ | Attribute | Values | Default | Description | | ----------- | ----------------------------------- | ----------------- | ----------------------------- | | placeholder | _`String`_ | `Text` | The placeholder of Input. | | label | _`String`_ | `Label` | The label of Input. | | success | _`Boolean`_ | `false` | Error-free Input. | | successText | _`String`_ | `Success Message` | The Success Message of Input. | | error | _`Boolean`_ | `false` | Error Input. | | errorText | _`String`_ | `Error Message` | The Error Message of Input. | ## #### Progress Indicators ```json import { ProgressIndicators } from 'web-components-phionike'; ``` #### _props_ | Attribute | Values | Default | Description | | --------- | ----------------------------------- | --------- | ---------------------------------- | | bgColor | _`String`_ | `#0B5FFF` | The background-color of Indicator. | | count | _`Boolean`_ | `false` | The count meter of Indicator. | ## #### Sidebar ```json import { Sidebar } from 'web-components-phionike'; ``` #### _props_ | Attribute | Values | Default | Description | | --------- | ----------------------------------- | ------------- | --------------------------- | | theme | `light` : `dark` | `dark` | Theme of the Sidebar. | | logoIcon | `-` | `default img` | Main Site Logo. | | logoText | _`String`_ | `logo` | Main Site Name. | | sections | _`Array`_ | `sections` | Subsections of the Sidebar. | ```json sections = [ {icon: TN, text: "module 1", link: "https://www.google.com", }, { icon: TN, text: "module 2", link: "https://www.google.com", }, ] ``` ## #### Snackbar ```json import { Snackbar } from 'web-components-phionike'; ``` #### _props_ | Attribute | Values | Default | Description | | ----------- | ----------------------------------- | ----------------- | ------------------------------------ | | text | _`String`_ | `Lorem Ipsum` | The text of Snackbar. | | action | _`String`_ | `Small Button` | The title of action button. | | show | _`Boolean`_ | `false` | Toggle visibility. | | successText | _`String`_ | `Success Message` | The Success Message of Input. | | setShow | _`Boolean`_ | `false` | Setter Function for toggling `show`. | | actionBtn | _`Boolean`_ | `false` | Action Button visibility. | ## #### Tooltip ```json import { Tooltip } from 'web-components-phionike'; ``` #### _props_ | Attribute | Values | Default | Description | | --------- | ------------------------------------ | ------------------- | -------------------------------- | | pointer | _`Boolean`_ | `false` | Pointer. | | content | _`String`_ | `This is a tooltip` | Text of the Tooltip. | | direction | `top` : `left`: `right`: `bottom` | `top` | Location of Tooltip. | | textColor | _`String`_ | `white` | The Color of Message of Tooltip. | | delay | _`Integer`_ | `400` | Time delay to show Tooltip. | ## #### NotifWrapper ```json import { NotifWrapper } from 'web-components-phionike'; ``` #### _props_ | Attribute | Values | Default | Description | | ---------- | ----------------------------------------------- | ------- | ---------------------------------------- | | theme | `light` : `dark` | `dark` | Theme of the NotifWrapper. | | wrapper | _`state`_ | `NULL` | state of NotifWrapper. | | setWrapper | _`setter function`_ | `NULL` | state updation function of NotifWrapper. | | drawerSize | _`Integer`_ | `200` | Width of the notification wrapper. | ## #### Navbar ```json import { Navbar } from 'web-components-phionike' ``` #### _props_ | Attribute | Values | Default | Description | | --------- | ----------------------------------- | --------- | ---------------------------------- | | bgColor | _`String`_ | `#B9C0C5` | The background-color of Navbar. | | color | _`String`_ | `#20272C` | Color of the text. | | icon | `-` | `SideNavIcon` | Icon of Logo inside navbar. | | links | _`Object`_ | `links` | Navigation Links of navbar. | ```json links={ product:{}, overview:{ link1: "link-1", link2: "link-2", }, contact:{} } ``` ## #### Responsive Navbar ```json import { ResponsiveNavbar } from 'web-components-phionike' ``` #### _props_ | Attribute | Values | Default | Description | | --------- | ----------------------------------- | --------- | ---------------------------------- | | bgColor | _`String`_ | `#B9C0C5` | The background-color of Navbar. | | color | _`String`_ | `#20272C` | Color of the text. | | icon | `-` | `SideNavIcon` | Icon of Logo inside navbar. | | links | _`Object`_ | `links` | Navigation Links of navbar. | ```json links={ product:{}, overview:{ link1: "link-1", link2: "link-2", }, contact:{} } ``` ## #### Modal ```json import { Modal } from 'web-components-phionike' ``` #### _props_ | Attribute | Values | Default | Description | | ---------- | ----------------------------------------------- | ------- | ---------------------------------------| | size | `"small"` : `"medium"` : `"large"` : `"extraLarge"` | `small` | The size of Modal. | | title | _`String`_ | `Modal Title` | Title of the modal. | | content | _`String`_ | `Modal Content`| Content inside the modal. | | primary | _`Boolean`_ | `false` | The background-color of Button. | | button1Text | _`String`_ | `Button` | Text of the button1. | | button2Text | _`String`_ | `""` | Text of the button2. | | showModal | _`Boolean`_ | `false` | Toggle visibility. | | button1OnClick | _`()=>{}`_ | `null` | Call to action of Button 1. | | button2OnClick | _`()=>{}`_ | `null` | Call to action of Button 2. | ## About #### Contributors | | | | | -------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------- | | tn | Shubh Nisar | [`https://shubh-nisar.github.io`](https://shubh-nisar.github.io) | | tn | Tanay Naik | [`www.linkedin.com/in/tanay-naik-9693831a4`](https://www.linkedin.com/in/tanay-naik-9693831a4/) | --- _Source: https://npm.io/package/web-components-phionike · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._