diff --git a/frui/README.md b/frui/README.md index fd8221f..972271c 100644 --- a/frui/README.md +++ b/frui/README.md @@ -1,13 +1,22 @@ -

- -

- -# Free React UI (FRUI) - -A collection of vanilla react and tailwind components, fields and -output formats written in typescript. - -Checkout the [Examples](https://ossphilippines.github.io/frui) +
+ +

Free React UI (FRUI)

+ + + + +
+
+ Documentation +
+
+
+ +## JUST REACT COMPONENTS + +No layouts, no grids, no themes, no style engine, no design system. +FRUI offers a comprehensive suite of free react components to use +without the commitments. Checkout the [Examples](https://ossphilippines.github.io/frui) ## Install @@ -15,131 +24,6 @@ Checkout the [Examples](https://ossphilippines.github.io/frui) $ npm install frui ``` -## React Usage - -`frui` was written first in vanilla react with no other dependencies. -You can start importing components like the following. - -```js -import { Loader, fields, formats } from 'frui'; -const { Datetime } = fields; -const { Overflow } = formats; -//or -import { Alert, Badge } from 'frui-react'; -import { Input, Password } from 'frui-react/fields'; -import { HTML, Markdown } from 'frui-react/formats'; -//or -import Table, { Thead, Trow, Tcol } from 'frui-react/Table'; -import Select from 'frui-react/fields/Select'; -import Email from 'frui-react/formats/Email'; -``` - -## Tailwind Setup - -After you install `frui`, open `tailwind.config.js` and add the `frui` -location in the `content` section. - -```js -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: [ - //... - './node_modules/frui-tailwind/**/*.{jsx,tsx}' - //... - ], - //... -} -``` - -## Tailwind Usage - -Tailwind components in `frui` has also been written from the ground up -and you can importing components like the following. - -```js -import { Alert, Badge } from 'frui-tailwind'; -import { Input, Password } from 'frui-tailwind/fields'; -import { HTML, Markdown } from 'frui-tailwind/formats'; -//or -import Table, { Thead, Trow, Tcol } from 'frui-react/Table'; -import Select from 'frui-tailwind/fields/Select'; -import Email from 'frui-tailwind/formats/Email'; -``` - -## Components (13) - - - Accordian *(TODO)* - - Alert - - Badge - - Button - - Control - - Crumbs *(TODO)* - - Loader - - Modal - - Pagination *(TODO)* - - Progress *(TODO)* - - Table - - Tabs *(TODO)* - - Tree *(TODO)* - -## Fields (32) - - - Autocomplete - - Checkbox - - Checklist *(TODO)* - - Code *(TODO)* - - Color *(TODO)* - - Country - - Currency - - Date - - Datetime - - Fieldset - - File - - Filelist - - Image - - Imagelist - - Input - - JSON *(TODO)* - - Markdown - - Mask - - Metadata (String, Number, Date, Datetime, Time) - - Number - - Password - - Radio - - Radio Group *(TODO)* - - Select - - Slider *(TODO)* - - Slug - - Switch - - Taglist - - Textarea - - Textlist - - Time - - WYSIWYG *(TODO)* - -## Formats (20) - - - Color - - Currency - - Date - - Email - - Formula - - HTML - - Image - - Imagelist - - JSON - - Link - - List (Ordered, Unordered) - - Markdown - - Metadata - - Number - - Overflow (Char, Word) - - Phone - - Separated (Space, Comma, Line) - - Table - - Taglist - - Yesno - ## Contributing Thanks for being an awesome developer! We are always looking for @@ -150,7 +34,7 @@ Clone this repo and run the following commands in the project folder. ```js $ yarn $ yarn build -$ yarn start +$ yarn dev ``` Please follow the steps below to properly contribute to this repository.