readme fix

maphel · Sep 3, 2023 · 03705f3 · 03705f3
1 parent 090a626
commit 03705f3
Show file tree

Hide file tree

Showing 2 changed files with 149 additions and 46 deletions.
diff --git a/contributing.md b/contributing.md
@@ -0,0 +1,101 @@
+# Contributing to `@maphel/classnames`
+
+Thank you for considering contributing to `@maphel/classnames`. We appreciate your effort and contributions from all skill levels are welcome.
+
+## Table of Contents
+1. [Prerequisites](#prerequisites)
+2. [Setting up the Development Environment](#setting-up-the-development-environment)
+3. [Coding Guidelines](#coding-guidelines)
+4. [How to Submit a Pull Request](#how-to-submit-a-pull-request)
+5. [Code Review Process](#code-review-process)
+6. [License](#license)
+
+---
+
+## Prerequisites
+
+- Familiarity with TypeScript, and Node.js package management.
+- Install Node.js and npm on your system.
+
+---
+
+## Setting up the Development Environment
+
+1. **Fork the Repository**
+
+   Fork the `@maphel/classnames` repository on GitHub and clone your fork locally.
+
+    ```sh
+    git clone https://github.com/[YOUR_USERNAME]/classnames.git
+    ```
+
+2. **Install Dependencies**
+
+   Navigate to the repository folder and install all necessary packages:
+
+    ```sh
+    cd classnames
+    npm install
+    ```
+
+3. **Branching**
+
+   Create a new branch for your feature or bugfix:
+
+    ```sh
+    git checkout -b [BRANCH_NAME]
+    ```
+
+---
+
+## Coding Guidelines
+
+- Write your code in TypeScript.
+- Make sure your code lints and all tests pass. Run:
+
+    ```sh
+    npm run lint
+    npm test
+    ```
+
+- Keep your code as clean and straightforward as possible.
+
+---
+
+## How to Submit a Pull Request
+
+1. **Commit and Push**
+
+   Commit your changes and push them to your fork on GitHub.
+
+    ```sh
+    git add .
+    git commit -m "Your commit message"
+    git push origin [BRANCH_NAME]
+    ```
+
+2. **Start a Pull Request**
+
+   Navigate to your fork on GitHub and click the "New Pull Request" button.
+
+3. **Describe Your Changes**
+
+   Provide a summary and describe the changes you have implemented or the bug you have fixed.
+
+4. **Submit for Review**
+
+   After creating a pull request, maintainers will review your code. If any changes or fixes are required, they will inform you.
+
+---
+
+## Code Review Process
+
+- The core team will review your pull request and provide feedback.
+- Once your PR is approved, it will be merged into the master branch.
+
+---
+
+## License
+
+By contributing to `@maphel/classnames`, you agree that your contributions will be licensed under its MIT License.
+
diff --git a/readme.md b/readme.md
@@ -1,82 +1,84 @@
+# `@maphel/classnames` Package
+![Classnames Package](https://img.shields.io/badge/@maphel-classnames-8A2BE2)
+![NPM version](https://img.shields.io/npm/v/@maphel/classnames.svg)
+![Build Status](https://img.shields.io/github/actions/workflow/status/maphel/classnames/build.yml)
+![Coverage Status](https://img.shields.io/coverallsCoverage/github/maphel/classnames)
+![License](https://img.shields.io/github/license/maphel/classnames)
 
-# @maphel/classnames Package
-[![Classnames Package](https://img.shields.io/badge/@maphel-classnames-8A2BE2)](https://github.com/maphel/classnames)
-[![NPM version](https://img.shields.io/npm/v/@maphel/classnames.svg)](https://www.npmjs.com/package/@maphel/classnames)
-[![Build Status](https://img.shields.io/github/actions/workflow/status/maphel/classnames/build.yml)](https://github.com/maphel/classnames/actions/workflows/build.yml)
-[![Coverage Status](https://img.shields.io/coverallsCoverage/github/maphel/classnames)](https://coveralls.io/github/maphel/classnames?branch=main)
-[![Dependabot Status](https://img.shields.io/github/license/maphel/classnames)]()
+> The @maphel/classnames package is a utility library for TypeScript and JavaScript applications that simplifies the dynamic creation and manipulation of CSS class strings. Written in TypeScript, it allows you to conditionally concatenate class names based on a variety of data types like strings, objects, and arrays. This is particularly useful for managing UI state changes in frontend frameworks like React, Angular, and Vue.
 
+---
+
+## Table of Contents
+- [Installation](#Installation)
+- [Usage](#Usage)
+- [API](#API)
+  - [Parameters](#Parameters)
+- [Examples](#Examples)
+- [Contributing](#Contributing)
+- [License](#License)
 
-> A TypeScript utility for conditionally concatenating class names.
 
 ---
 
-## Table of Contents
+## Features
+Type Safety: Being written in TypeScript, it offers type safety while handling class names.
+Conditional Classes: Easily apply class names based on conditions.
+Array and Object Support: Accepts an array or object of class names, giving you flexibility in how you manage your classes.
 
-- [Installation](#installation)
-- [Usage](#usage)
-- [API](#api)
-    - [classNames(...args)](#classnamesargs)
-- [Examples](#examples)
-- [Contributing](#contributing)
-- [License](#license)
+## Why @maphel/classnames?
+Working with dynamic class names often leads to cumbersome ternary or logical operations that can make the code less readable. The @maphel/classnames utility helps you create class name strings in a more expressive, readable, and error-free manner.
 
 ---
 
 ## Installation
-
 ```bash
-npm install class-names-package
+npm install @maphel/classnames
 ```
 
 ## Usage
-
-Import the utility function into your TypeScript or JavaScript file:
+Import `classNames` into your TypeScript or JavaScript file.
 ```typescript
 import { classNames } from '@maphel/classnames';
 ```
 
 ## API
 ```typescript
-classNames(...args)
+classNames(...args: ClassValue[]): string;
 ```
-Returns a concatenated string of class names based on the given arguments.
 
 ### Parameters
--  args
-
-A list of `ClassValue` or `ClassMap` values that you want to concatenate.
-`ClassValue` can be `string | undefined | null | boolean`.
-ClassMap is a `Record<string, boolean>`.
+- `args`: ClassValue[]  
+  Array of `ClassValue` elements to concatenate.
 
 ### Return Value
-A string that is a concatenated list of class names based on the given arguments.
+Returns a concatenated string of class names based on `args`.
 
-## Examples
+---
 
-Here are a few examples to show how you can use `classNames`.
+## Examples
 ```typescript
-import { classNames } from 'class-names-package';
-
-// Basic usage
-const result = classNames('class1', 'class2');  // Output: "class1 class2"
+import { classNames } from '@maphel/classnames';
 
-// With conditions
-const isEnabled = true;
-const isHidden = false;
+// Basic Usage
+const basicResult = classNames('class1', 'class2');
+console.log(basicResult);  // Output: "class1 class2"
 
+// Conditional Classes
 const conditionalResult = classNames(
-  'base-class',
-  { 'enabled': isEnabled, 'hidden': isHidden }
-);  // Output: "base-class enabled"
+        'base',
+        { 'active': true, 'disabled': false }
+);
+console.log(conditionalResult);  // Output: "base active"
 
-// With array
-const arrayResult = classNames(['base-class', 'base-class2']]);  // Output: "base base2"
-```
+// Array Usage
+const arrayResult = classNames(['array-class1', 'array-class2']);
+console.log(arrayResult);  // Output: "array-class1 array-class2"
 
+```
+---
 ## Contributing
-Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests.
-
-## Licence
+Refer to the [CONTRIBUTING.md](./CONTRIBUTING.md) file for contribution guidelines.
 
-This project is licensed under the MIT License - see the LICENSE.md file for details.
+## License
+This project is under the MIT License. Refer to the [LICENSE.md](./LICENSE.md) file for details.