Production Release

.github/workflows/deploy.yml

@@ -87,6 +87,7 @@ jobs:
           EOF
           export NPM_CONFIG_USERCONFIG=$(pwd)/.npmrc
           npx changeset version --snapshot ${{ env.TAG }}
+          npm run build
           npx changeset publish --tag ${{ env.TAG }} --registry ${{ vars.NPM_STAGING }} --no-git-tag
 
       - name: Remove outdated snapshot versions
@@ -230,7 +231,7 @@ jobs:
 
       - name: Comment - No Changesets Found
         uses: mshick/add-pr-comment@v2
-        if: always() && steps.check_changesets.outputs.found != 'true'
+        if: success() && steps.check_changesets.outputs.found != 'true'
         with:
           message-id: 'deployment-status' # Unique key to identify this specific comment thread
           message: |
@@ -249,6 +250,7 @@ jobs:
         if: success() && steps.check_changesets.outputs.found == 'true'
         with:
           message-id: 'deployment-status' # MATCHES the ID above
+          issue: ${{ env.RELEASE_PR_NUMBER }}
           message: |
             ## ${{ env.TAG == 'rc' && 'Release Candidate' || 'Snapshot' }} Deployment Successful
 
@@ -257,17 +259,19 @@ jobs:
             - **Registry:** `${{ env.REGISTRY }}`
             - **Tag:** `${{ env.TAG }}`
             - **Commit:** [`${{ env.SHORT_SHA }}`](https://github.com/${{ github.repository }}/commit/${{ github.sha }})
-            - **Deployed:** ${{ env.TIMESTAMP }}
+            - **Deployed:** ${{ env.TIMESTAMP }} (UTC)
             - **Branch:** `${{ github.head_ref || github.ref_name }}`
 
             **Preview Links**
-            - [View Storybook Components](${{ vars.UI_DOC }}/${{ env.TAG }})
-            - [NPM Registry](${{ env.REGISTRY }})
+            - [View UI Doc](${{ vars.UI_DOC }}/${{ env.TAG }})
+            - [Package Registry](${{ env.REGISTRY }})
 
             **Installation**
             ```bash
             npm install <package-name>@${{ env.TAG }} --registry ${{ env.REGISTRY }}
             ```
 
             **Next Steps**
-            ${{ env.TAG == 'rc' && '- This release candidate is ready for testing \n- Merge to master to publish to production' || '- Review the changes in Storybook \n - Test the snapshot packages in your project' }}
+            ${{ env.TAG == 'rc' && '- This release candidate is ready for testing
+            - Merge to master to publish to production' || '- Review the changes in Storybook
+            - Test the snapshot packages in your project' }}

.husky/pre-push

@@ -0,0 +1 @@
+npm run test

.storybook/preview.tsx

@@ -236,7 +236,9 @@ const SuiWrapper = ({ children, context }) => {
 
 	return (
 		<WordPress>
-			<div className={`sui-wrap sui-theme--${suitheme}`}>{children}</div>
+			<div id="sui-wrap" className={`sui-wrap sui-theme--${suitheme}`}>
+				{children}
+			</div>
 		</WordPress>
 	)
 }

CONTRIBUTION.md

@@ -1,77 +1,196 @@
+# Contribution Guide
+
+This guide outlines the process for contributing to the SUI React repository. Please follow these guidelines to ensure a smooth and consistent contribution workflow.
+
 ## Project Setup
 
 To start contributing to SUI React, follow these steps:
 
-1. Fork the repository by clicking the <kbd>Fork</kbd> button located at the top right of this page. ([SUI React repo](https://github.com/wpmudev/sui-react))
-
+1. Fork the repository by clicking the **Fork** button at the top right of the [SUI React repository](https://github.com/<organization>/sui-react).
 2. Clone your fork locally:
-
-```sh
-git clone https://github.com/<github_username>/sui-react.git
-cd sui-react
-```
-
-3. Install all dependencies and packages by running `npm ci`. This command will take care of installing the necessary dependencies.
+   ```bash
+   git clone https://github.com/<github_username>/sui-react.git
+   cd sui-react
+   ```
+3. Install all dependencies and packages:
+   ```bash
+   npm ci
+   ```
 
 ## Development
 
-To enhance our development process, we've implemented tooling and systems. SUI React utilizes a monorepo structure, and each component is treated as an independent package that can be used in isolation.
+SUI React utilizes a monorepo structure, where each component is treated as an independent package that can be used in isolation.
 
 ### Packages
-- **`./packages/assets/css`**: This directory houses styling and CSS files, ensuring a uniform and cohesive UI design.
-- **`./packages/assets/icons`**: Icons for icon assets.
-- **`./packages/react`**: This package serves as the hub for all UI components, providing a streamlined export for easy integration.
-- **`./packages/hooks`**: In this directory, you'll find custom React hooks designed for reusable functionalities, enhancing code modularity.
-- **`./packages/utils`**: A collection of helper functions and modules catering to common operations.
-- **`./packages/ui/*`**: This folder includes all the UI component packages.
-- **`./packages/common/*`**: These packages are combination of component packages which falls under same category.
+- **./packages/assets/css**: Houses styling and CSS files for a uniform and cohesive UI design.
+- **./packages/assets/icons**: Contains icon assets.
+- **./packages/react**: Central hub for all UI components, providing streamlined exports for easy integration.
+- **./packages/hooks**: Custom React hooks for reusable functionalities, enhancing code modularity.
+- **./packages/utils**: Helper functions and modules for common operations.
+- **./packages/ui/***: Individual UI component packages.
+- **./packages/common/***: Combinations of component packages grouped by category.
 
 ### Tooling
-
-- [Lerna](https://lerna.js.org/) to keep track of packages and dependencies.
-- [Storybook](https://storybook.js.org/) helps us quickly develop and test UI components.
-- [Testing Library](https://testing-library.com/)  ensures our components and hooks are thoroughly tested.
-- [Changeset](https://github.com/atlassian/changesets) is there to document changes, create changelogs, and manage releases
+- **Lerna**: Manages packages and dependencies in the monorepo.
+- **Storybook**: Facilitates rapid development and visual testing of UI components.
+- **Testing Library**: Ensures components and hooks are thoroughly tested.
+- **Changeset**: Manages versioning, changelogs, and releases.
 
 ### Commands
+- `npm ci`: Installs all necessary dependencies for development.
+- `npm run storybook`: Starts the Storybook server for visually testing components.
+- `npm run build`: Builds all component packages.
+- `npm run test`: Runs tests for all component packages.
+- `npm run test:dev`: Runs tests with the `--watch` flag for continuous monitoring.
+- `npm run test:a11y`: Runs tests with accessibility checks.
 
-- **`npm ci`**: Installs all the necessary dependencies for development.
-- **`npm run storybook`**: Initiates the Storybook server. This is useful for visually testing components during development.
-- **`npm run build`**: Executes the build process for all component packages.
-- **`npm run test`**: Runs tests for all component packages.
-
-## Making a Pull Request?
+## Commit Guidelines
 
-### Commit Guidelines
+We enforce [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for all commit messages to ensure a clear and consistent commit history. Non-compliant commits will be rejected.
 
-Before submitting Pull Request, ensure that your commits adhere to the commit conventions specified in this repository.
+### Commit Message Format
+```
+<category>(<scope>): <message>
+```
 
-When making a commit, please use the following format for your commit message: `category(scope or module): message`. Choose one of the following categories:
+- **category**: One of the following:
+	- `feat`: New features or code.
+	- `fix`: Bug fixes (ideally reference the related issue).
+	- `refactor`: Code changes that are neither fixes nor features.
+	- `docs`: Documentation updates or additions (e.g., README, library usage docs).
+	- `build`: Changes to app building, dependencies, or new dependencies.
+	- `test`: Test-related changes, including new or modified tests.
+	- `ci`: Continuous integration configuration changes (e.g., GitHub Actions).
+	- `chore`: Other changes not covered by the above categories.
+- **scope**: The affected package or module (e.g., `button`, `hooks`, `utils`).
+- **message**: A concise description of the change (max 50 characters).
 
-- ✨`feat`: for changes introducing new code or features
-- 🐛`fix`: for changes addressing and fixing bugs (ideally, reference the related issue)
-- 🔨`refactor`: for any code-related changes that are neither fixes nor features
-- 📚`docs`: for modifications to existing documentation or the creation of new documentation (e.g., README, documentation for library usage)
-- 📦`build`: for changes related to app building, dependencies, or the addition of new dependencies
-- 🚨`test`: for changes related to tests, including the addition of new tests or modifications to existing ones
-- 👷`ci`: for changes related to the configuration of continuous integration (e.g., GitHub Actions, CI system)
-- 🔧`chore`: for all other changes to the repo that don't fit into the categories mentioned above
+**Examples**:
+- `feat(button): add new button variants`
+- `fix(auth): resolve login error handling`
+- `docs(readme): update installation instructions`
 
-> Important: 
-> 1. Follow the commit convention in both the PR title and commit message.
-> 2. Icons will be added to the changelog automatically. Please refrain from using icons when writing commit or pull request titles, as this may result in multiple icons.
+**Important**:
+- Use the same convention for both commit messages and PR titles.
 
-### PR Submission Process
+### Steps to Commit
+1. Stage your changes: `git add .` or specific files.
+2. Commit with a conventional message: `git commit -m "<category>(<scope>): <message>"`.
+3. If the commit is rejected, ensure the message adheres to the format.
 
-1. Begin by forking `sui-react` repository and subsequently clone your fork.
-2. Create a new branch originating from the `development` employing the `[type/scope]` such as: `fix/button`.
-3. Commit your changes following the commit convention. Validate your changes during development using `npm run storybook` and `npm run test --a11y`.
-4. Execute `npm run changeset` to write description of your modifications. It will contributes to the generation of a changelog during the release phase. Check [Changeset documentation](https://github.com/atlassian/changesets/tree/master/packages/cli) for additional insights.
+## Branch Naming Conventions
 
-### Tests
+Branches should align with Conventional Commits and follow a clear naming pattern to reflect the type of change.
 
-Every commit addressing bugs or introducing new features requires a test, you can use following commands as per your need:
+### Branch Naming Pattern
+```
+<type>/<short-description>
+```
 
-- **`npm run test`**: Runs tests for all component packages.
-- **`npm run test:dev`**: Runs tests for all component packages with the `--watch` flag, allowing continuous monitoring.
-- **`npm run test:a11y`**: Runs tests with accessibility.
+- **type**: Matches the commit category (`feat`, `fix`, `docs`, etc.).
+- **short-description**: A brief, hyphenated description of the change.
+
+**Examples**:
+- `feat/add-button-variants`
+- `fix/auth-error-handling`
+- `docs/update-readme`
+
+### Main Branches
+- **master**: Production-ready branch. Only the `development` branch is merged into `master` during a release. Direct commits or PRs to `master` are not allowed.
+- **development**: The integration branch for all changes. All PRs must target this branch.
+
+### Steps to Create a Branch
+1. Ensure you are on the `development` branch: `git checkout development`.
+2. Create a new branch: `git checkout -b <type>/<short-description>`.
+3. Make changes and commit using the Conventional Commits format.
+4. Push the branch: `git push origin <type>/<short-description>`.
+
+## Using NVM for Node Version Management
+
+We use [Node Version Manager (nvm)](https://github.com/nvm-sh/nvm) to ensure consistent Node.js versions across development environments.
+
+### Setting the Node Version
+1. Install `nvm` by following the instructions in the [official nvm documentation](https://github.com/nvm-sh/nvm#installing-and-updating).
+2. Check the required Node version in the `.nvmrc` file:
+   ```bash
+   cat .nvmrc
+   ```
+3. Use the specified version:
+   ```bash
+   nvm use
+   ```
+4. If the version is not installed, install it:
+   ```bash
+   nvm install
+   ```
+5. Verify the active Node version:
+   ```bash
+   node --version
+   ```
+
+## Using Changesets for Version Management
+
+We use [Changesets](https://github.com/changesets/changesets) to manage versioning and changelogs. Every PR introducing a change (e.g., `feat`, `fix`) must include a changeset.
+
+### Steps to Generate a Changeset
+1. After committing changes, run:
+   ```bash
+   npm run changeset
+   ```
+2. Follow the interactive prompts:
+	- Select affected packages (if applicable).
+	- Choose the change type (`patch`, `minor`, or `major`).
+	- Provide a description of the change.
+3. This generates a `.md` file in the `.changeset` directory.
+4. Commit the changeset file:
+   ```bash
+   git add .changeset
+   git commit -m "chore: add changeset for <description>"
+   ```
+5. Push changes and create a PR.
+
+### Notes
+- Ensure the changeset description is clear and aligns with the PR changes.
+- The changeset contributes to the changelog and determines the version bump during release.
+
+## PR Submission Process
+
+1. Fork the [SUI React repository](https://github.com/<organization>/sui-react) and clone your fork.
+2. Create a branch from `development` using the `[type]/[scope]` format (e.g., `fix/button`).
+3. Commit changes following the Conventional Commits format.
+4. Validate changes using:
+   ```bash
+   npm run storybook
+   npm run test --a11y
+   ```
+5. Generate a changeset:
+   ```bash
+   npm run changeset
+   ```
+6. Push the branch:
+   ```bash
+   git push origin <type>/<short-description>
+   ```
+7. Create a pull request targeting the `development` branch, ensuring:
+	- The PR title follows the Conventional Commits format.
+	- A clear description of the changes and their purpose.
+	- A generated changeset (if applicable).
+8. Request a review from the maintainers.
+
+## Tests
+
+Every commit addressing bugs or introducing new features requires tests. Use the following commands as needed:
+- `npm run test`: Runs tests for all component packages.
+- `npm run test:dev`: Runs tests with the `--watch` flag for continuous monitoring.
+- `npm run test:a11y`: Runs tests with accessibility checks.
+
+## Additional Notes
+- Keep your branch up-to-date with `development`:
+  ```bash
+  git fetch origin
+  git pull origin development
+  ```
+- Ensure tests pass and code adheres to linting/formatting rules before submitting a PR.
+- Be responsive to feedback during the PR review process.
+
+Thank you for contributing to SUI React!

README.md

@@ -1,20 +1,19 @@
 # SUI React
 
-[![npm](https://img.shields.io/npm/v/@wpmudev/sui-react?color=blue&style=for-the-badge)](https://www.npmjs.com/package/@wpmudev/sui-react)
+[![npm](https://img.shields.io/npm/v/@wpmudev/sui-css?color=blue&style=for-the-badge)](https://www.npmjs.com/package/@wpmudev/sui-react)
 [![GitHub package.json version (subfolder of monorepo)](https://img.shields.io/github/package-json/v/wpmudev/sui-react?color=orange&filename=package.json&label=core&style=for-the-badge)](https://github.com/wpmudev/sui-react/)
 [![License: GPLv3](https://img.shields.io/badge/License-GPL%20v3-blue.svg?color=green&style=for-the-badge)](http://www.gnu.org/licenses/gpl-3.0)
 
 The SUI React components are user-interface building blocks of our design system. Each component is reusable and specifically developed to work on a WordPress plugin environment with React library.
 
 ## Installation
-```shell
-npm i --save @wpmudev/sui-react
-```
+
+Sui React is structured as a collection of individual packages, with each component developed as a separate package. This modular approach enhances maintainability and ensures cleaner code, allowing for targeted version releases of individual components as needed.
 
 > For the installation of any particular package, check the documentation associated with component: [SUI Doc](https://wpmudev.github.io/sui-react/)
 
 ## Contributing
 See [CONTRIBUTING.md](https://github.com/wpmudev/sui-react/blob/development/CONTRIBUTION.md) for guidelines.
 
 ## Releasing
-See [RELEASING.md](https://github.com/wpmudev/sui-react/blob/development/RELEASING.md) for guidelines.
+See [RELEASING.md](https://github.com/wpmudev/sui-react/blob/development/RELEASING.md) for guidelines