npm package: @imohammad/feature-flags-client
Description: UI Library for react feature flags
Author: LFI
Latest version: 1.0.8

# @imohammad/@imohammad/feature-flags-client

> UI Library for react feature flags

[![NPM](https://img.shields.io/npm/v/@imohammad/@imohammad/feature-flags-client.svg)](https://www.npmjs.com/package/@imohammad/feature-flags-client) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
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={['someEmail@domain.com (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](https://github.com/LFI)