JSPM – @pseudocoder-in/ftcomponents@1.1.6

Package Exports

@pseudocoder-in/ftcomponents

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@pseudocoder-in/ftcomponents) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Resuable UI Componenents used in the Family Tree App

NavTree

UI Component to load and edit the tree data. Screenshot 2021-05-21 at 1 33 13 PM

Usage

import { NavTree } from '@pseudocoder-in/ftcomponents';

<NavTree 
    theme: "dark", // light/dark
    data: treeData, // Tree data in Json format
    width: "100vw",
    height: "100vh",
    onUpdate: {(updatedTreeData) => { /* Handle updated data in the client side*/}}
/>

TreeViewer

Component to load the tree json data and display it in a tree like structure. It uses react-tree-graph and d3 libraries.

treeviewer

Usage

import { TreeViewer } from '@pseudocoder-in/ftcomponents';

<TreeViewer 
    theme: "dark", // light/dark
    data: treeData, // Tree data in Json format
    width: "100vw",
    height: "100vh",
    handleShare: () => { }, //Optional parameter
    handleFullScreen: () => { } //Optional parameter
/>

Sample Input Data (treeData)

export const treeData = {
    "1":{
        id:"1",
        name:"Rajeev Gupta",
        partner:" Nita Gupta",
        children:["2","3","4"],
        isRoot: true
    },
    "2":{
        id:"2",
        name:"Aalok kumar Gupta",
        partner:"Rhea Gupta",
        children:["5"],
    },
    "3":{
        id:"3",
        name:"Sanjeev Gupta",
        partner:"Roshani Gupta",
        children:[],
    },
    "4":{
        id:"4",
        name:"Robin Gupta",
        partner:"Raashi Gupta",
        children:[],
    },
    "5":{
        id:"5",
        name:"Sorabh Gupta",
        partner:"",
        children:[],
    },

}

Building from codes

Clone the repository
Run npm install
Run yarn storybook for viewing the Componenents
Run yarn build to create a buld in dist folder

More customization coming soon ... 😄