@imohammad/@imohammad/feature-flags-client

UI Library for react feature flags

Install

npm install --save @imohammad/feature-flags-client

Usage

Navbar & List:

import React, { useState, useCallback } from 'react'

// import the components where ever you wish to show the dashboard
import { Navbar, List } from '@imohammad/feature-flags-client'

// import the base styles into your main app root file
import '@imohammad/feature-flags-client/dist/index.css'

declare type TFeature = {
  name: string
  id: number
  description: string
  status: 'on' | 'off' | 'pilot'
  createdAt?: string
}

const data: TFeature[] = [
  {
    id: 1,
    name: 'MULTI_STORE_POPOVER',
    description: 'Enable Multi Store Popover View',
    status: 'on',
    createdAt: '1675071198226'
  },
  {
    id: 2,
    name: 'SPONSORED_ADS_IN_SEARCH',
    description: 'Display sponsored section Ads on the search results page',
    status: 'off',
    createdAt: '1675163406439'
  },
  {
    id: 3,
    name: 'TELKOM_ADS_IN_SEARCH',
    description: 'Display Telkom Ads on search results page',
    status: 'on',
    createdAt: '1674477471197'
  }
]

const Example = () => {
  const [searchTerm, setSearchTerm] = useState('')

  const getFlags = useCallback(
    (flags: TFeature[]) => {
      if (!flags || !flags.length) {
        return []
      }
      if (searchTerm) {
        return flags.filter((each: TFeature) =>
          each.name.toLowerCase().includes(searchTerm.toLowerCase())
        )
      }
      return flags
    },
    [searchTerm]
  )

  return (
    <>
      {/* Renders the FeatureFlag Navbar */}
      <Navbar
        rootClassName='container'
        logo='' // brand-logo
        showButton={true} // to show and hide create-Feature button
        showSearch={true} // to show and hide search-input
        searchTerm={searchTerm} // search input value
        onSearch={setSearchTerm}
        // triggered when someone types in the search-input-field
        createFeature={() => {
          // triggered when someone clicks create-feature button
        }}
      />
      {/* Renders the list of features */}
      <List
        rootClassName='container'
        data={getFlags(data)}
        onEdit={(name) => {
          // triggered when someone clicks on the Edit button
          console.log(name)
        }}
        onDelete={(name) => {
          // triggered when someone clicks on the delete button
          console.log(name)
        }}
      />
    </>
  )
}

export default Example

Card:

import React, { Component } from 'react';
import { Card } from '@imohammad/feature-flags-client';

class Example extends Component {
  render() {
    return (
      // This component renders the Feature Card
      <Card
        name="MULTI_STORE_POPOVER"
        id={1}
        description="Enable Multi Store Popover View"
        status="pilot"
        onDelete={(title) => {
          // triggered when someone clicks on the Edit button
        }}
        onEdit={(title) => {
          // triggered when someone clicks on the delete button
        }}
      />
    );
  }
}

export default Example

Edit  & create Form:

import React, { useState } from 'react'
import '@imohammad/feature-flags-client/dist/index.css'
import { Form, TFormData } from '@imohammad/feature-flags-client'


const Example = () => {
  const [formData, setFormData] = useState<TFormData>({
    name: '',
    description: '',
    status: 'on',
    pilotType: 'Custom',
    pilotIds: []
  })

  const onChangeInput = (key: string, value: any) => {
    setFormData({ ...formData, [key]: value })
  }
  return (
    // This component is used to Edit and Create New Feature
    <Form
      disableNameEdit={false} // make this true in case of edit feature to disable feature name edit
      formData={formData}
      onChange={(Key, value) => {
        onChangeInput(Key, value)
      }}
      onSubmit={(formData) => {
        // triggered when someone clicks on the submit button on featureFrom
        console.log(formData)
      }}
      pilotOptions={['[email protected] (11111)']}
    />
  )
}

export default Example

PopUp:

import React, { Component } from 'react'
import  { PopUp } from '@imohammad/feature-flags-client'

class Example extends Component {
  render() {
   return (
       // This component is used to show popUp on success | error | warning
       <PopUp 
         title="Are you sure?"
         text="You won't be able to revert this!"
         type={"success" | "error" | "warning"}
         primaryButton="Yes, delete it!"
         onCancel={() => {
           // triggered when someone clicks on the cancel-button on pop-up 
         }} 
         onDelete={() => {
           // triggered when someone clicks on the delete-button on pop-up 
         }}
       />
    )}
  }
  
  export default Example

Styles C.S.S

To style components class are given below:

Navbar

• fcc-root-feature-navbar
• fcc-left-feature-navbar
• fcc-search-feature-navbar
• fcc-create-button-feature-navbar

List

• fcc-root-feature-list

Card

• fcc-root-feature-card
• fcc-upper-feature-card
• fcc-up-right-feature-card
• fcc-up-left-feature-card

Form

• fcc-root-feature-form
• fcc-input-feature-form
• fcc-status-feature-form
• fcc-radio-feature-form
• fcc-submit-button-feature-form

AutoComplete

• fcc-input-box-autocomplete
• fcc-tag-autocomplete
• fcc-suggestions-autocomplete
• fcc-options-autocomplete
• fcc-option-autocomplete

PopUp

• fcc-root-popup
• fcc-root-content-popup
• fcc-button-container-popup
• fcc-primary-button-popup
• fcc-cancel-button-popup
• fcc-close-btn

License

MIT © LFI