Docs: added feature list

Author: Akalanka47000

CONTRIBUTING.md

@@ -0,0 +1,29 @@
+## Installation
+
+Run `bun i @mezh-hq/react-seat-toolkit` to incorporate into your project <br/>
+
+## Getting started
+
+- Run `bun install` to install all dependencies
+- Run `bun storybook` to start the storybooks dev server
+- Run `bun build-storybook` to build the project for a web release
+- Run `bun build` to build the project for a package release
+
+## Commit messages
+
+- We follow conventional commits during our development workflow as a good practice. More information can be found at their official [documentation](https://www.conventionalcommits.org/en/v1.0.0-beta.4/#examples)
+- Refer the [commitlint.config.js](https://github.com/akalanka47000/react-seat-toolkit/blob/main/commitlint.config.cjs) file for a full list of supported commit message prefixes
+
+## Additional tools
+
+- This project is bootstrapped with [Lefthook](https://evilmartians.com/opensource/lefthook), [Eslint](https://eslint.org/) and [Prettier](https://prettier.io/). Please make good use of them.
+
+<br/>
+
+## Pull request guidelines
+
+- Please label your PRs with the appropriate labels
+- Please add a description to your PRs
+- Please add a screenshot or a gif to your PRs if it's a UI change
+- Please add a documentation update if it's a feature or a bug fix
+

README.md

@@ -12,26 +12,59 @@
 
 <br/> <br/>
 
-React UI library to design and render seat layouts
+React UI library to design and render seat layouts. The library is still under active development and not yet ready for production use until the next major release (v1.0.0).
 
-## Installation
+## Features
 
-Run `bun i react-seat-toolkit` to incorporate into your project <br/>
+- **JSON based**: Define your seat layout using JSON data and retrieve it back as JSON after customization ✓
 
-## Getting started
+- **Customizable**: Customize the layout as per your requirements
 
-- Run `bun install` to install all dependencies
-- Run `bun storybook` to start the storybooks dev server
-- Run `bun build-storybook` to build the project for a web release
-- Run `bun build` to build the project for a package release
+    - **Seats**
+      - Add new seats ✓
+      - Remove existing seats ✓
+      - Change seat colors ✓
+      - Change seat labels ✓
+      - Change seat status ✓
+      - Group seats together into categories ✓
+      - Categorier (Manage seat categories) ✓
 
-## Commit messages
+    - **Pen**
+      - Draw on the layout using a pen tool to create custom shapes ✓
 
-- We follow conventional commits during our development workflow as a good practice. More information can be found at their official [documentation](https://www.conventionalcommits.org/en/v1.0.0-beta.4/#examples)
-- Refer the [commitlint.config.js](https://github.com/akalanka47000/react-seat-toolkit/blob/main/commitlint.config.cjs) file for a full list of supported commit message prefixes
+    - **Text**
+      - Add text to the layout ✓
+      - Change text color ✓
+      - Change text size ✓
+      - Change text font weight ✓
 
-## Additional tools
+    - **Shapes**
+      - Add shapes to the layout ✓
+      - Change shape color ✓
+      - Change shape size ✓
+      - Change shape border color ✓
 
-- This project is bootstrapped with [Lefthook](https://evilmartians.com/opensource/lefthook), [Eslint](https://eslint.org/) and [Prettier](https://prettier.io/). Please make good use of them.
+    - **Sections**
+      - Section manager ✗
+      - Free seating sections ✗
 
-<br/>
+    - **Miscallaneous**
+      - Add, move around and scale background images ✓
+      - Add and move around booths ✓
+      - Multiple element selection and deselection ✓
+      - Bring elements to front or back ✓
+
+- **Responsive**: The layout is responsive and can be viewed on any device 🛠️
+
+- **Preview**: Preview the layout in a separate window 🛠️
+
+- **Designer mode and User mode**: Switch between designer and user mode to enable or disable customization 🛠️
+  - Designer mode: Enable customization
+  - User mode: Disable customization 
+      - Add callback functions to handle seat selection
+
+- **Override styles**: Override the default styles to match your application's theme 🛠️
+
+## Contributing
+
+Please read [CONTRIBUTING.md](https://github.com/mezh-hq/react-seat-toolkit/blob/main/CONTRIBUTING.md) for details on setting up your development environment and the process for submitting pull requests to us.

src/stories/configure.mdx

@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/blocks";
 import { Button, Toaster, toast } from "../components";
 
-export const command = "bun install react-seat-toolkit"
+export const command = "bun install @mezh-hq/react-seat-toolkit"
 
 export const copy = () => {
   navigator.clipboard.writeText(command);
@@ -14,8 +14,8 @@ export const copy = () => {
 <Meta title="Configure your project" />
 
 <div className="h-full w-full flex flex-col justify-center items-center gap-12 text-center p-3 md:p-12">
-  <span className="w-10/12 text-[30px] lg:text-[54px] text-center font-bold tracking-[-2px]"> Complete toolkit for seat design</span>
-  <span className="text-[18px] lg:text-[22px] text-start font-semibold">Just one command away...</span>
-  <Button onClick={copy} className="text-[18px] xs:text-[20px] md:text-[25px] lg:text-[28px] font-medium rounded-full p-4 px-8 sm:px-12 border bg-black text-white" >{command}</Button>
+  <span className="w-10/12 !text-[30px] md:!text-[48px] lg:!text-[54px] text-center font-bold tracking-[-2px]"> Complete toolkit for seat design</span>
+  <span className="!text-[18px] !lg:text-[22px] text-start font-semibold">Just one command away...</span>
+  <Button onClick={copy} className="!text-[18px] xs:!text-[20px] md:!text-[25px] lg:!text-[28px] font-medium rounded-full p-4 px-8 sm:px-12 border bg-black text-white" >{command}</Button>
 </div>
 <Toaster/>