npm package: @front-app-react/elements
Description: The @front-app-react/elements package is a collection of ReactJS components designed for use in web applications. styled-components are used for styles. These components are easy to use and highly customizable, making them ideal for a wide range of projec
Author: Mahdi Ahmad Khan Beigi
Latest version: 2.0.1

# Elements Component

The @front-app-react/elements package is a collection of ReactJS components designed for use in web applications. styled-components are used for styles. These components are easy to use and highly customizable, making them ideal for a wide range of projects.
@front-app-react/theme is used to manage the theme

## Demo

demo for using [demo-front-app-react](https://github.com/front-app-react/demo)

## Installing

`npm i @front-app-react/elements`

## Components

List of components used:

- Button - Button allow users to take actions, and make choices, with a single tap.
- Card - Cards contain content and actions about a single subject.
- Divider - A divider is a thin line that groups content in lists and layouts.
- Dropdown - A Dropdown can be used to display some content on top of another.
- Modal - The modal component provides a solid foundation for creating dialogs, dropdown, lightboxes, or whatever else.
- Overlay - The Overlay component narrows the user's focus to a particular element on the screen.
- Table - A fast react data table and react data grid.
- Tabs - Tabs make it easy to explore and switch between different views.
- Typography - Use typography to present your design and content as clearly and efficiently as possible.

## The Gist

They use React context to hook into the parent <ElementsProvider /> state/methods.

```
import { ElementsProvider } from "@front-app-react/elements";
    <ElementsProvider theme={theme} styles={styles}>
        ...otherCode
    </ElementsProvider>
```

### ThemeProvider Props

| props    | description                                                              |
| -------- | ------------------------------------------------------------------------ |
| theme\*  | props [@front-app-react/theme](https://github.com/front-app-react/theme) |
| styles\* | Basic styling for props elements                                         |

#### prop styles

Properties are not required
| property | value
|--|--|
|btn| [Button Props](https://github.com/front-app-react/elements#props-button-component)
|card| [Card Props](https://github.com/front-app-react/elements#props-card-component)
|divider| [Divider Props](https://github.com/front-app-react/elements#props-divider-component)
|dropdownMenu| [DropdownMenu Props](https://github.com/front-app-react/elements#props-dropdownmenu-component)
|table| [Table Props](https://github.com/front-app-react/elements#props-table-component)
|tab| [Tab Props](https://github.com/front-app-react/elements#props-tab-component)
|typography| [Typography Props](https://github.com/front-app-react/elements#props-typography-component)

### props button component

Button allow users to take actions, and make choices, with a single tap.

- `$textColor` (optional): a partial type of [ThemeColor](https://github.com/front-app-react/theme#type-themecolor) interface.
- `$bgColor` (optional): a partial type of [ThemeColor](https://github.com/front-app-react/theme#type-themecolor) interface.
- `$borderColor` (optional): a partial type of [ThemeColor](https://github.com/front-app-react/theme#type-themecolor) interface.
- `$isCircle` (optional): a boolean that indicates whether the button should be circular.
- `$isIcon` (optional): a boolean that indicates whether the button should display an icon.
- `$isBlock` (optional): a boolean that indicates whether the button should take up the full width of its container.
- `$isActive` (optional): a boolean that indicates whether the button is currently active or not.
- `$sizing` (optional): a string literal type that can be either `"sm"` or `"lg"`.
- `$withoutColor` (optional): a boolean that indicates whether the button should have any colors applied to it.
- `$withoutActions` (optional): a boolean that indicates whether any actions should be applied to the button.
- `$boxShadow` (optional): a CSS property that defines the shadow effect of the button.

### props card component

Cards contain content and actions about a single subject.

- `$border` (optional): a partial type of [Border](https://github.com/front-app-react/elements#type-border) interface.
- `$bgColor` (optional): a partial type of [Color](https://github.com/front-app-react/theme#type-color) interface.
- `$width` (optional): a CSS property that defines the width of the box.
- `$height` (optional): a CSS property that defines the height of the box.
- `$radius` (optional): a CSS property that defines the border radius of the box.
- `$boxShadow` (optional): a CSS property that defines the shadow effect of the box.

### props divider component

Cards contain content and actions about a single subject.

- `$bgColor` (optional): a partial type of [Color](https://github.com/front-app-react/theme#type-color) interface.
- `$width` (optional): a CSS property that defines the width of the box.
- `$height` (optional): a CSS property that defines the height of the box.

### props overlayBg component

The Overlay component narrows the user's focus to a particular element on the screen.

- type of [ThemeColor](https://github.com/front-app-react/theme#type-themecolor) interface

### props modal component

The modal component provides a solid foundation for creating dialogs, dropdown, lightboxes, or whatever else.

- `dialog` (optional):
  - `$paddingTop` (optional): a string that defines the top padding of the dialog.
  - `$paddingBottom` (optional): a string that defines the bottom padding of the dialog.
- `content` (optional): a type of [CustomCSSProperties](https://github.com/front-app-react/theme#type-CustomCSSProperties) that defines the style of the content.
- `heading` (optional): a type of [CustomCSSProperties](https://github.com/front-app-react/theme#type-CustomCSSProperties) that defines the style of the heading.

### props table component

A fast react data table and react data grid.

- `$thProps` (optional): a type of [CustomCSSProperties](https://github.com/front-app-react/theme#type-CustomCSSProperties) that defines the style of the content.
- `$btnThProps` (optional): a type of [CustomCSSProperties](https://github.com/front-app-react/theme#type-CustomCSSProperties) that defines the style of the content.
- `$tdProps` (optional): a type of [CustomCSSProperties](https://github.com/front-app-react/theme#type-CustomCSSProperties) that defines the style of the heading.

### props tab component

Tabs make it easy to explore and switch between different views.

- `data` is an array of objects, each of which has a `title` and `content` property that can be of any React Node type.
- `getActive` (optional): is an optional callback function that takes an active index as a parameter.
- `defaultActiveIndex` (optional): is an optional number that specifies the default active index.
- `styleCard` (optional): a type of [CustomCSSProperties](https://github.com/front-app-react/theme#type-CustomCSSProperties) style .
- `styleBtnTab` (optional): a type of [CustomCSSProperties](https://github.com/front-app-react/theme#type-CustomCSSProperties) style .

### props typography component

Use typography to present your design and content as clearly and efficiently as possible.

- `$fontSize` (optional): a string that defines the font size of the text.
- `$fontFamily` (optional): a string that defines the font family of the text.
- `$textColor` (optional): a partial type of [Color](https://github.com/front-app-react/theme#type-color) interface.
- `$fontWeight` (optional): a string that defines the font weight of the text.
- `$textTransform` (optional): which is of the same type as the `textTransform` property of the `CSSProperties` interface.
- `$lineHeight` (optional): is a string that specifies the line height of the text.

### props dropdown component

A Dropdown can be used to display some content on top of another.

## Type CustomCSSProperties

which extends the `CSSProperties` interface.

- `$textColor` (optional): a partial type of [ThemeColor](https://github.com/front-app-react/theme#type-themecolor) interface.
- `$bgColor` (optional): a partial type of [ThemeColor](https://github.com/front-app-react/theme#type-themecolor) interface.
- `$borderColor` (optional): a partial type of [ThemeColor](https://github.com/front-app-react/theme#type-themecolor) interface.

## Type Border

- `direction` (optional):
  a type that defines a `Record` with `top`,`right`,`bottom`,`left` as keys and an object as value. The object has the following properties:
  - `size` (optional): a number that defines the size of the border.
  - `color` (optional): a type of [ThemeColor](https://github.com/front-app-react/theme#type-themecolor) that defines the color of the border.
  - `style` (optional): a string that defines the style of the border.
- `size` (optional): a number that defines the size of the border.
- `color` (optional): a type of [ThemeColor](https://github.com/front-app-react/theme#type-themecolor) that defines the
- `style` (optional): a string that defines the style of the border.