diff --git a/readme.MD b/readme.MD index e1d9f64..516205b 100644 --- a/readme.MD +++ b/readme.MD @@ -1,66 +1,132 @@ # React Blur Admin -All credit for the theme goes to [akveo](http://akveo.com/blur-admin/), this is just a React implementation. -Note: This is currently partial implementation of Blur Admin. This repo includes styles from Blur Admin that are required for pages and components to load correctly and the components themselves. +A **React implementation** of the popular [Blur Admin theme](http://akveo.com/blur-admin/) by [akveo](http://akveo.com/blur-admin/). +This project brings the Blur Admin design and UI components into the React ecosystem, making it easier to build modern admin dashboards. -Individual pages/demos/layouts can be found in the [React Webpack Skeleton repo](https://github.com/knledg/react-webpack-skeleton). +⚠️ **Note:** This is a **partial implementation** of Blur Admin. It includes core styles and essential components required for pages and layouts to load correctly. -### Build Status +πŸ‘‰ For individual pages, demos, and layouts, check out the [React Webpack Skeleton repo](https://github.com/knledg/react-webpack-skeleton). + +--- + +## πŸ“Š Build Status [![CircleCI](https://circleci.com/gh/knledg/react-blur-admin/tree/master.svg?style=svg)](https://circleci.com/gh/knledg/react-blur-admin/tree/master) -### Currently Implemented +--- + +## πŸš€ Installation & Quick Start + +1. **Clone the repository** + ```bash + git clone https://github.com/knledg/react-blur-admin.git + cd react-blur-admin + ``` + +2. **Install dependencies** + ```bash + npm install + ``` + +3. **Run the development server** + ```bash + npm start + ``` + +4. **Build for production** + ```bash + npm run build + ``` + +--- + +## βœ… Features Implemented + +- Text Inputs +- Buttons +- Editable Fields +- Loading Spinner +- Tables (basic tables only, not smart tables) +- Tabs +- Switches +- Select Dropdowns +- Progress Bars +- Panels +- Pages +- Textareas +- Pagination (with additional flexibility compared to Blur Admin’s original implementation) +- Notifications +- Alerts + +--- + +## 🚧 Features Pending Implementation + +- Accordions +- Sliders +- Searchable Table Columns +- Tag Inputs -- Text Inputs -- Buttons -- Editable Fields -- Loading Spinner -- Tables (not including smart tables) -- Tabs -- Switches -- Select Dropdowns -- Progress Bars -- Panels -- Pages -- Textareas -- Pagination (diverged from Blur's implementation slightly for additional flexibility) -- Notifications -- Alerts +--- -### Needs Implementation +## πŸ“¦ Dependencies -- Accordions -- Sliders -- Searchable table columns -- Tags Inputs +This project relies on: -## Semver +- **Bootstrap CSS** +- **Bootstrap-Select CSS** +- **Bootstrap-Switch CSS** +- **Blur CSS** +- **Flexbox** for layout (rows/columns) +- **EventEmitter** (implemented in `lib/event-bus`) for global notifications without requiring a Flux implementation -Before the v1.0.0 release, a minor update will represent breaking changes and a patch will represent feature enhancements or bug fixes. +--- -## Contributing +## πŸ“– Versioning (SemVer) -This is an active project and we'd love your help! Please submit small pull requests. You can make sure tests and lint passes by running `npm run lint && npm run test` before committing. +This project follows **Semantic Versioning (SemVer)**. -You can also add the `.git/hooks/pre-push` with the following: +- Before **v1.0.0**: + - **Minor updates** β†’ may introduce breaking changes + - **Patch updates** β†’ reserved for bug fixes or minor enhancements +--- + +## πŸ‘¨β€πŸ’» Contributing + +We welcome contributions! πŸš€ + +- Please keep pull requests **small and focused**. +- Ensure linting and tests pass before committing: + +```bash +npm run lint && npm run test ``` -#!/usr/bin/env bash +- To automate this check before pushing, you can add a `pre-push` Git hook: + +```bash +#!/usr/bin/env bash npm run lint && npm run test ``` -And making it executable with `chmod ugo+x .git/hooks/pre-push` +Make it executable with: + +```bash +chmod ugo+x .git/hooks/pre-push +``` + +--- + +## πŸ“˜ Example Usage + +A sample **React Webpack Skeleton** implementing React Blur Admin’s layout and components will be linked soon. -## Example Usage +Meanwhile, you can explore the source code of demo pages in this repository to see how each component is used. -A React Webpack Skeleton implementing the layout for React Blur Admin and using it's components will be uploaded and linked shortly. You can see how each component is implemented by looking at the source code for each of the demo pages. +--- -## Dependencies -- Bootstrap CSS -- Bootstrap-Select CSS -- Bootstrap-Switch CSS -- Blur CSS -- EventEmitter implemented in lib/event-bus so that notifications can listen for a new notification from anywhere without any specific implementation of flux -- Utilizes Flexbox for columns/rows +## πŸ™Œ Credits +- Theme design: [akveo](http://akveo.com/blur-admin/) +- React implementation: [knledg](https://github.com/knledg)