# @devoinc/app-widgets > Devo library that contains the building blocks to start building visual widgets on Devo Apps. Latest version **1.0.6** (published 2023-10-30) · MIT license · 0 weekly downloads ## Install ```sh npm install @devoinc/app-widgets pnpm add @devoinc/app-widgets yarn add @devoinc/app-widgets bun add @devoinc/app-widgets ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.6 | | Published | 2023-10-30 | | First published | 2022-09-30 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 19 | | Unpacked size | 5 MB | | Known vulnerabilities | 0 (+2 in 2 direct dependencies) | | Install scripts | no | | GitHub stars | 2 | | Author | Devo Inc | | Maintainers | devo_ci | ## Links - npm: https://www.npmjs.com/package/@devoinc/app-widgets - Repository: https://github.com/DevoInc/App-Widgets - Homepage: https://github.com/DevoInc/App-Widgets#readme - Issues: https://github.com/DevoInc/App-Widgets/issues - npm.io page: https://npm.io/package/@devoinc/app-widgets ## Dependencies (19) - [uuid](https://npm.io/package/uuid.md) ^8.3.2 - [rsuite](https://npm.io/package/rsuite.md) ^5.16.0 - [i18next](https://npm.io/package/i18next.md) ^21.8.14 - [@nivo/geo](https://npm.io/package/@nivo/geo.md) ^0.83.0 - [crypto-js](https://npm.io/package/crypto-js.md) ^4.2.0 - [apexcharts](https://npm.io/package/apexcharts.md) ^3.35.5 - [json-2-csv](https://npm.io/package/json-2-csv.md) ^3.17.1 - [prop-types](https://npm.io/package/prop-types.md) ^15.8.1 - [@types/jest](https://npm.io/package/@types/jest.md) ^29.0.1 - [@types/uuid](https://npm.io/package/@types/uuid.md) ^8.3.4 - [react-icons](https://npm.io/package/react-icons.md) ^4.4.0 - [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.4.3 - [query-string](https://npm.io/package/query-string.md) ^8.1.0 - [react-cookie](https://npm.io/package/react-cookie.md) ^4.1.1 - [@nivo/network](https://npm.io/package/@nivo/network.md) ^0.83.0 - [react-i18next](https://npm.io/package/react-i18next.md) ^11.18.1 - [react-apexcharts](https://npm.io/package/react-apexcharts.md) ^1.4.0 - [react-native-base64](https://npm.io/package/react-native-base64.md) ^0.2.1 - [i18next-browser-languagedetector](https://npm.io/package/i18next-browser-languagedetector.md) ^6.1.4 ## Recent versions - 1.0.6 (latest) — 2023-10-30 - 1.0.5 — 2022-10-13 - 1.0.4 — 2022-10-03 - 1.0.3 — 2022-09-30 - 1.0.2 — 2022-09-30 ## README ![Build](https://github.com/DevoInc/App-Widgets/actions/workflows/Build.yml/badge.svg) ![Publish](https://github.com/DevoInc/App-Widgets/actions/workflows/Publish.yml/badge.svg) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](CODE_OF_CONDUCT.md) # Devo App Widgets Devo App Widgets is a library that contains the building blocks to start building visual widgets on Devo Apps. ## Live demo 🌈 You can explore this library and interact with widgets directly by using in the following link: https://devoinc.github.io/App-Widgets/demo --- ## What is a Devo App? A Devo App is a front-end web browser extension capable of being injected and hosted into the Devo web platform as well as communicating with it and with the collection of HTTP services enabled for Devo customers. ## Before starting As a main requirement for the development of applications in Devo it is necessary to have access to the platform and a domain. Once you have access, to prepare the development environment you must install the google chrome extension "Devo Runner", you will find it [here](https://chrome.google.com/webstore/detail/devo-runner/apjjdfhcegcemhdhaeadkddbjhgfplmo). This extension will help the developer to be able to debug and develop their application by providing a mechanism to inject it into an existing Devo client domain. --- ## Instalation Start by installing this package in your NPM project ```npm $ npm install @devoinc/app-widgets ``` ## Usage There are 5 widgets available at the moment: ``` ApexColumn ApexDonut ApexPie SimpleMap SingleValue ``` You can visit our [Storybook website](https://devoinc.github.io/App-Widgets/demo) to watch them in action. ## Documentation For specific question regarding how to use these Widgets, refer to each module in the documentation. https://devoinc.github.io/App-Widgets/ --- ## Development ### 1. Getting started You need to have [Node.js](https://nodejs.org/en/), [v16.15.1](https://nodejs.org/download/release/v16.15.1/), to develop on this library. In case you have `nvm` installed, you can just run the following command. There is an `.nvmrc` file with specific node.js version. ```sh nvm use ``` In order to install what is necessary and to start the project, please follow these simple steps: ```sh # Clone this repository: git clone git@github.com:DevoInc/App-Widgets.git # Go into the repository: cd App-Widgets # Install dependencies: npm ci # Run the development environment (storybook): npm run start # Build for production: npm run build ``` ### 2. Develop locally using Storybook ```sh # Run in development and serve directly: npm run start or npm run storybook # Just build, and open separately: npm run storybook:build ``` ### 3. Develop locally using an example app In case you want to test this library locally (without publish), you need to build the library, create a package, and use it directly as a dependency on your local application. ```sh # Build package: npm run build # Package it locally (without publish): npm pack ``` Then, you need to import this dependency package on your local app (package.json): ```sh { # App's package.json # Rest of App's package.json ... "dependencies": { "@devoinc/app-widgets": "file:../App-Widgets/devoinc-app-widgets-*.tgz", # Rest of dependencies ... } } ``` ### 4. Testing ``` npm run test ``` ### 5. Linter ``` npm run lint ``` ### 🚨 Development notes: 1. Bundle `.d.ts` types issue There is an issue with Typescript types generation while using `parcel`. We need to use `.d.tsx` files instead of `.d.ts` ones. Because raw `.d.ts` files are sometimes skipped during bundle creation on `parcel`, generating empty references to `.d.ts` on bundler files. Issue link on Github: https://github.com/parcel-bundler/parcel/issues/7790 --- _Source: https://npm.io/package/@devoinc/app-widgets · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._