Tapp-plugins NPM

Tapp-Plugins

This library was generated with Angular CLI version 14.10.2. The core purpose of this library is to use different components implemented in most application instead of making them from scratch with adding some customized/end user's own information.

Plot

We have use this design to implemenet on dashboard. Figma Link

Code scaffolding

Run npm install tapp-plugins --legacy-peer-deps to install library.

Important Note:

Packages Below Version 1.0 are not for users, they are just for testing purpose. Always download/install package <= version 1.

Current Version & Changelogs:

In current version we worked on Customized Dashboard Component, when used will act as plugin, we will work on further updates later.

This version is the continuation of previous version just with a little change in readme

Methodolgy

We are using PrimeNg, PrimeIcons, Bootstrap, Tailwind, Ng Nt Design and Apexcharts as of third party libraries. For understanding of code please go through our github repository, will be shared on request.

Configurations

Add the following commands for configurations in angular.json file.

In styles tag.

"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-accent/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/bootstrap/dist/css/bootstrap.css"

And in scripts tag.

"node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/apexcharts/dist/apexcharts.min.js"

In tsconfig.json file, add the following in the compilerOptions tag:

"compilerOptions":{
  ...............,
  ...............,
  "strict": false,
  "skipLibCheck": true,
  ...............,
  ...............
}

In index.html file of project use this line below meta tag:

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,700" rel="stylesheet">

For tailwind configration run command npx tailwindcss init and follow this Documentation

Note: If problem occured like primeng and primeicons or any dependency not found, install them from via using npm through their documentation.

How to Use

In module file import the PluginModule.

in constructor:

imports: [
    ...........,
    ...........,
    PluginsModule
  ]

After this import the library's style in styles.scss/css file:

@import "node_modules/tapp-plugins/src/custom/custom.styles";

-- For Dashboard Component: In component file, call the selector of the dashboard component and pass values through parent component binding. We made it in a dynamic way that you can use your own values

<plugin-dashboard 
[CardInfo]="cardData" 
[midGridFirst]="midBox1" [midGridSecond]="midBox2"  
[ChartInfo]="graphData" [socialMedia]="socialMedia">
</plugin-dashboard>

While calling the selector, keep a thing in notice that the objects. Whose values are being passed to dashboard component selector, must follow this model as present in plugins.model.ts file and you could also Import them and map them:

//Type values to patch for [CardInfo] input
export type CardData = {
  heading: string;
  value: string;
  interval: string;
}

//Type values to patch for [midGridFirst] input

export type InfoGrid = {
  title: string;
  data: PeopleInfo[]
}

//Type values to patch for [midGridSecond] input
export type StatsGrid = {
  icon: string;
  progress: number;
  label: string;
  icon_color: string;
  icon_background: string;
  active: boolean
}

//Type values exist in "data" object of "InfoGrid" Type
export type PeopleInfo = {
  name: string;
  avatar: string;
  progress: number;
  ratings: number;
  time: string;
  left: string
}


//Type values to patch for [ChartInfo] input
export type GraphData = {
  series: Series[];
  colors: [];
  dates: [];
  days: number;
  title: string;
}

//Type values exist in "series" object of "GraphData" Type
export type Series = {
  name: string;
  data: [];
  color: string;
}

//Type values to patch for [socialMedia] input

export type SocialMedia = {
  src: string;
  label: string
}