Skip to content

Commit

Permalink
fix(readme.m,d): readme.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@opensrc0
opensrc0 committed Feb 27, 2024
1 parent d7164a7 commit a414763
Showing 1 changed file with 38 additions and 187 deletions.
225 changes: 38 additions & 187 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,193 +1,92 @@
<img src="https://github.com/opensrc0/fe-theme/blob/develop/logo.svg" alt="FE-Theme Logo" width="100%" style="width: 100%;">
<h2 align="center">A React UI library using styled-component to build consistent, responsive, theme able UI 💪 </h2>
<p align="center">
<img src="https://github.com/opensrc0/fe-pilot/blob/develop/logo.png" alt="fe-pilot Logo" align="center" width="30%" style="width: 30%;">
</p>
A React UI library for Advance JS Features 👨‍✈️
<br />
<p align="center">
<a href="https://www.npmjs.com/package/fe-theme">
<img alt="Minified Size" src="https://badgen.net/bundlephobia/minzip/fe-theme?color=cyan"/>
</a>
<a href="https://styled-components.com/releases#v6.1.1">
<img alt="Styled Component Version" src="https://img.shields.io/badge/styled_component-6.1.1-%2350c62a?logo=styled-components&logoColor=50c62a"/>
<a href="https://www.npmjs.com/package/fe-pilot">
<img alt="Minified Size" src="https://badgen.net/bundlephobia/minzip/fe-pilot?color=cyan"/>
</a>
<a href="https://react.dev/reference/react">
<img alt="React Version" src="https://img.shields.io/badge/react-18.2.0-%23f1e05a?logo=React"/>
</a>
<a href="https://www.npmjs.com/package/fe-theme">
<img alt="NPM Downloads" src="https://img.shields.io/npm/dw/fe-theme?label=Downloads&logo=npm"/>
<a href="https://www.npmjs.com/package/fe-pilot">
<img alt="NPM Downloads" src="https://img.shields.io/npm/dw/fe-pilot?label=Downloads&logo=npm"/>
</a>
<a href="https://www.npmjs.com/package/fe-theme/v/latest">
<img alt="Latest Release" src="https://badgen.net/github/release/opensrc0/fe-theme?icon=github&color=pink"/>
<a href="https://www.npmjs.com/package/fe-pilot/v/latest">
<img alt="Latest Release" src="https://badgen.net/github/release/opensrc0/fe-pilot?icon=github&color=pink"/>
</a>
</p>
<p align="center">
<a href="https://github.com/opensrc0/fe-theme/stargazers">
<img alt="Github Stars" src="https://badgen.net/github/stars/opensrc0/fe-theme?icon=github&color=purple"/>
<a href="https://github.com/opensrc0/fe-pilot/stargazers">
<img alt="Github Stars" src="https://badgen.net/github/stars/opensrc0/fe-pilot?icon=github&color=purple"/>
</a>
<a href="https://github.com/opensrc0/fe-theme/blob/master/LICENSE.md">
<a href="https://github.com/opensrc0/fe-pilot?tab=MIT-1-ov-file">
<img alt="MIT License" src="https://badgen.net/static/license/MIT/orange"/>
</a>
</p>
<br />

FE-Theme is a styled-component based comprehensive library of accessible, reusable, and composable React components that streamlines the development of modern web applications and websites. The library offers a theme based UI to quickly start a new small/medium/large size web based applications.
A React UI library for Advance Web Features that streamlines the development of modern web applications and websites. The library offers component like scanner, voice search, autofill otp, phonebook, share and many more for a small/medium/large size web based applications. Fe-Pilot is a easy to use, light weighted, fully mobile APP like features in web.

## Table of contents
1. 🚀 [Features](#features)
2. 📦 [Installation](#installation)
3. 💻 [Usage](#usage)
4. ⚙️ [Customization](#customization)
4. 📚 [Online Editor Templates](#online-editor-templates)
5. 📝 [Contributing](#contributing)
6. ✨ [Contributors](#contributors)
7. ⚖️ [License](#license)

## Features

- **Theme:** FE-Theme provides themeable based UI component, and are easy to configure.
- **Web/Mobile Support:** FE-theme will be helpfull in Large/Mid/Small size of web based applications.
- **Ease of Styling:** FE-Theme contains a set of layout components like `Button` and `Input` that make it easy to style your components by passing props.
- **Advancement:** FE-Theme provide a variety of advance plug and play component like `Voice Search`, `Share`, `Contact List`, `Live Location Tracking`, `Current Location` etc.
- **Scalable & Maintainable:** FE-Theme components are built on top of a React UI and Styled-Component for better scalable, maintainable component.
- **Accessiblity Support:** FE-Theme components follow the accessiblity guidelines specifications and have the right `aria-*` attributes.
- **Dark Mode UI:** FE-Theme support dark mode compatibility.
- **Web/Mobile Support:** fe-pilot will be helpfull in Large/Mid/Small size of web based applications.
- **Ease of Use:** fe-pilot contains a set of components like `Scanner`, `PhoneBook`, `Voice Search`, `Share`, `Contact List`, `Live Location Tracking`, `Current Location` that are easy to plug and play.
- **Scalable & Maintainable:** fe-pilot components are built on top of a React for better scalable, maintainable component.

## Installation
Install `fe-theme` package using any package manager
Install `fe-pilot` package using any package manager

```sh
# with Yarn
$ yarn add fe-theme
$ yarn add fe-pilot

# with npm
$ npm i fe-theme --save
$ npm i fe-pilot --save

# with pnpm
$ pnpm add fe-theme
$ pnpm add fe-pilot

# with Bun
$ bun add fe-theme
$ bun add fe-pilot
```

## Usage

#### 1. Use fe-theme in your application using themeProvider

```js
import { ThemeProvider } from 'styled-components'; // import ThemeProvider component
import init from 'fe-theme/init'; // import Init function
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
// Wrap your application with ThemeProvider
<ThemeProvider theme={init()}>
<App />
</ThemeProvider>
);
```

#### 2. You are good to go and import fe-theme component in your application
```js
import Button from 'fe-theme/Button';

<Button />
```

&nbsp;&nbsp;Wow, the configuration is quite simple, but wait... button design is different in your application.
&nbsp;&nbsp;No worry, Checkout Customization.


## Customization

#### 1. Create your own theme

==> To Generate config files for components **Automatically** using command line [Check Commands](./.github/COMMAND.md).

==> To create config files for components **Manually**, follow steps given below.

&nbsp;&nbsp; **a)** Create an empty folder called ```fe-theme-config``` in your application at any location.

&nbsp;&nbsp; **c)** Create ```configButton.js``` file inside ```fe-theme-config folder``` (To configure Button Component)

#### 1. Use fe-pilot in your application
```js
const Button = {
primary: {
color: configColor.white,
background: configColor.themeColor,
borderColor: configColor.themeColor,
borderRadius: '4px',
},
outlined: {
color: configColor.themeColor,
bgColor: configColor.white,
borderColor: configColor.themeColor,
borderRadius: '14px',
},
size: {
s: { fontSize: 'xs', padding: [1, 2] },
m: { fontSize: 's', padding: [1.5, 2] },
l: { fontSize: 's', padding: [2, 2.5] },
},
extraProps: {},
};
import Scanner from 'fe-pilot/Scanner';

export default Button;
<Scanner />
```
&nbsp;&nbsp; **Note** Config file name start with ```config``` keyword along with ```component Name``` like ```configButton.js``` or ```configInput.js```

&nbsp;&nbsp; **c)** Create theme.js file and include configButton.js
```js
import Button from '../configButton';

export default {
Button,
};

```

#### 2. Pass the newly created theme file in init function

```js
import { ThemeProvider } from 'styled-components';
import init from 'fe-theme/init';
import theme from '{PATH}/fe-theme-config/theme'; // Include your theme to fe-theme
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
// Inside the Init function pass theme
<ThemeProvider theme={init(theme)}>
<App />
</ThemeProvider>
);
```

**Note:** ```PATH``` is a variable i.e. location of config files in your application

**Hurrah...!!!** Now you can change button(any compponent) property according to your application

```
Your Application Folder(Root Directory)
└──fe-theme-config
├──configButton
├──configInput
└──configChip
```
Play around the property of component according to your project.

## Online Editor Templates

#### 1. CodeSandbox
- JavaScript Starter: https://codesandbox.io/p/devbox/fe-theme-js-6q2vcg
- JavaScript Starter: https://codesandbox.io/p/devbox/fe-pilot-js-6q2vcg
<!-- - TypeScript Starter: WIP -->
<!-- - NextJS TypeScript Starter: WIP -->

#### 2. Stackblitz
- JavaScript Starter: https://stackblitz.com/edit/fe-theme-js-b6mri2
- JavaScript Starter: https://stackblitz.com/edit/fe-pilot-js-b6mri2
<!-- - TypeScript Starter: WIP -->
<!-- - NextJS TypeScript Starter: WIP -->


## Contributing

Feel like contributing? Most welcome!
[Setup locally](./.github/SETUP.md) to get fe-theme working on your local machine and [guide lines](./.github/CONTRIBUTING.md) to contribute in fe-theme.
[Setup locally](./.github/SETUP.md) to get fe-pilot working on your local machine and [guide lines](./.github/CONTRIBUTING.md) to contribute in fe-pilot.

## Contributors

Expand All @@ -204,35 +103,19 @@ Thanks goes to these wonderful people
</a>
<br />
</td>
<td align="center" valign="top" width="14.28%">
<a href="https://github.com/ashwinihegde123">
<img src="https://avatars.githubusercontent.com/u/40521396?v=4" width="64px;" alt="Ashwini Hegde" />
<br />
<sub><b>Ashwini Hegde</b></sub>
</a>
<br />
</td>
<td align="center" valign="top" width="14.28%">
<a href="https://github.com/vineet091">
<img src="https://avatars.githubusercontent.com/u/5345138?v=4" width="64px;" alt="Vineet Gupta" />
<br />
<sub><b>Vineet Gupta</b></sub>
</a>
<br />
</td>
<td align="center" valign="top" width="14.28%">
<a href="https://github.com/Alok30">
<img src="https://avatars.githubusercontent.com/u/36290248?s=64&v=4" width="64px;" alt="Alok Dubey" />
<td align="center" valign="top" width="14.28%">
<a target="_blank" href="https://github.com/Ghanshyam-K-Dobariya">
<img src="https://avatars.githubusercontent.com/u/5426993?s=400" width="64px;" alt="Ghanshyam KD" />
<br />
<sub><b>Alok Dubey</b></sub>
<sub><b>Ghanshyam KD</b></sub>
</a>
<br />
</td>
<td align="center" valign="top" width="14.28%">
<a href="https://github.com/Ravi-Chef">
<img src="https://avatars.githubusercontent.com/u/31059087?v=4" width="64px;" alt="Ravi Verma" />
<a target="_blank" href="https://github.com/hardikjain29">
<img src="https://avatars.githubusercontent.com/u/13768932?v=4" width="64px;" alt="Hardik Jain" />
<br />
<sub><b>Ravi Verma</b></sub>
<sub><b>Hardik Jain</b></sub>
</a>
<br />
</td>
Expand All @@ -244,16 +127,6 @@ Thanks goes to these wonderful people
</a>
<br />
</td>
<td align="center" valign="top" width="14.28%">
<a target="_blank" href="https://github.com/Ghanshyam-K-Dobariya">
<img src="https://avatars.githubusercontent.com/u/5426993?s=400" width="64px;" alt="Ghanshyam KD" />
<br />
<sub><b>Ghanshyam KD</b></sub>
</a>
<br />
</td>
</tr>
<tr>
<td align="center" valign="top" width="14.28%">
<a target="_blank" href="https://github.com/fossabot">
<img src="https://avatars.githubusercontent.com/u/29791463?v=4" width="64px;" alt="Fossa Bot" />
Expand All @@ -262,30 +135,8 @@ Thanks goes to these wonderful people
</a>
<br />
</td>
<td align="center" valign="top" width="14.28%">
<a target="_blank" href="https://github.com/swarajgolu">
<img src="https://avatars.githubusercontent.com/u/31703347?v=4" width="64px;" alt="Swaraj Singh" />
<br />
<sub><b>Swaraj Singh</b></sub>
</a>
<br />
</td>
<td align="center" valign="top" width="14.28%">
<a target="_blank" href="https://github.com/abhinavGupta786">
<img src="https://avatars.githubusercontent.com/u/69836367?v=4" width="64px;" alt="Abhinav Gupta" />
<br />
<sub><b>Abhinav Gupta</b></sub>
</a>
<br />
</td>
<td align="center" valign="top" width="14.28%">
<a target="_blank" href="https://github.com/hardikjain29">
<img src="https://avatars.githubusercontent.com/u/13768932?v=4" width="64px;" alt="Hardik Jain" />
<br />
<sub><b>Hardik Jain</b></sub>
</a>
<br />
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
Expand Down

0 comments on commit a414763

Please sign in to comment.