@kubit-ui-web/react-components 2.0.0-beta.1 → 2.0.0-beta.2

package/README.md

@@ -7,16 +7,20 @@
   </a>
 </p>
 
-<div align='center'>
-  
-<a href='#'>
-<img src='./assets/version.png' width="150px">
-</a>
-  
-<a href='#'>
-<img src='./assets/license.png' width="230px">
-</a>
-  
+<div align="center">
+
+[![NPM Version](https://img.shields.io/npm/v/@kubit-ui-web/react-components?style=for-the-badge&logo=npm&color=CB3837)](https://www.npmjs.com/package/@kubit-ui-web/react-components)
+[![NPM Downloads](https://img.shields.io/npm/dm/@kubit-ui-web/react-components?style=for-the-badge&logo=npm&color=CB3837)](https://www.npmjs.com/package/@kubit-ui-web/react-components)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@kubit-ui-web/react-components?style=for-the-badge&logo=webpack&color=8DD6F9)](https://bundlephobia.com/package/@kubit-ui-web/react-components)
+
+[![License](https://img.shields.io/github/license/kubit-ui/kubit-react-components?style=for-the-badge&color=blue)](./LICENSE.md)
+[![GitHub Stars](https://img.shields.io/github/stars/kubit-ui/kubit-react-components?style=for-the-badge&logo=github&color=yellow)](https://github.com/kubit-ui/kubit-react-components/stargazers)
+[![GitHub Issues](https://img.shields.io/github/issues/kubit-ui/kubit-react-components?style=for-the-badge&logo=github&color=red)](https://github.com/kubit-ui/kubit-react-components/issues)
+
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)
+[![React](https://img.shields.io/badge/React-18.3-61DAFB?style=for-the-badge&logo=react)](https://reactjs.org/)
+[![Storybook](https://img.shields.io/badge/Storybook-10.1-FF4785?style=for-the-badge&logo=storybook)](https://storybook.js.org/)
+
 </div>
 
 <br />
@@ -27,9 +31,23 @@
 
 # Getting Started
 
+> **Kubit React Components** is a customizable, accessible library of React web components, designed to enhance your application's user experience with production-ready components.
+
+## 📋 Table of Contents
+
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Usage](#usage)
+- [Documentation](#documentation)
+- [Storybook](#storybook)
+- [Features](#features)
+- [Browser Support](#browser-support)
+- [Contributing](#contributing)
+- [License](#license)
+
 ## Installation
 
-To install the package, run the following command:
+Install the package using your preferred package manager:
 
 ### npm
 
@@ -43,16 +61,33 @@ npm install @kubit-ui-web/react-components
 yarn add @kubit-ui-web/react-components
 ```
 
-This will install the package and its dependencies. Now you can import the components and use them in your application.
+### pnpm
 
-## Usage
+```bash
+pnpm add @kubit-ui-web/react-components
+```
+
+**Package Info:**
+
+- 📦 Size: ~235 KB (gzipped)
+- 🎯 Tree-shakeable: Yes
+- 📘 TypeScript: Full support
+- ⚛️ React: 17+ and 18+
+
+## Quick Start
+
+Import and use components in your application:
+
+## Quick Start
 
-To use the components, import them from the package and use them in your application.
+Import and use components in your application:
 
 ```tsx
-import { Button, KubitProvider } from '@kubit-ui-web/react-components';
 import React from 'react';
 
+import { Button, KubitProvider } from '@kubit-ui-web/react-components';
+import '@kubit-ui-web/react-components/styles/default/default.min.css';
+
 const App = () => {
   return (
     <KubitProvider>
@@ -66,74 +101,313 @@ const App = () => {
 export default App;
 ```
 
-This will render the button with the default styles and functionality.
+> **Note:** The `KubitProvider` is required to use the components. It provides the theme and other context.
+
+## Usage
+
+### Basic Components
+
+```tsx
+import {
+  Button,
+  Input,
+  KubitProvider,
+  Modal,
+  Tooltip,
+} from '@kubit-ui-web/react-components';
+
+function MyApp() {
+  return (
+    <KubitProvider>
+      <Input label="Email" placeholder="Enter your email" type="email" />
+
+      <Button variant="PRIMARY" onClick={handleClick}>
+        Submit
+      </Button>
+
+      <Tooltip content="Helpful information">
+        <span>Hover me</span>
+      </Tooltip>
+    </KubitProvider>
+  );
+}
+```
+
+### Custom Theme
+
+Customize the theme to match your brand:
+
+```tsx
+import { KubitProvider } from '@kubit-ui-web/react-components';
+
+const customTheme = {
+  colors: {
+    primary: '#your-color',
+    secondary: '#your-secondary',
+  },
+};
+
+function App() {
+  return (
+    <KubitProvider theme={customTheme}>{/* Your components */}</KubitProvider>
+  );
+}
+```
+
+For more information about theme customization, visit [Kubit UI Documentation](https://kubit-ui.com).
+
+## Features
+
+✨ **50+ Production-Ready Components**
 
-> Note: The `KubitProvider` is required to use the components. It provides the theme and other context to the components.
+- Buttons, Inputs, Modals, Tooltips, and more
+- Fully customizable and themeable
 
-You can foud more information about change the theme and other options in the [Customize theme](https://kubit-ui.com)
+♿ **Accessible by Default**
+
+- WCAG 2.1 AA compliant
+- Keyboard navigation support
+- Screen reader friendly
+
+🎨 **Design System Integration**
+
+- Built with design tokens
+- CSS variables for easy customization
+- Bernova CSS generation
+
+📦 **Developer Experience**
+
+- Full TypeScript support
+- Tree-shakeable exports
+- Comprehensive documentation
+- Rich Storybook examples
+
+🚀 **Performance Optimized**
+
+- Small bundle size (~235 KB gzipped)
+- Code splitting ready
+- Minimal runtime overhead
+
+## Browser Support
+
+| Browser | Version         |
+| ------- | --------------- |
+| Chrome  | Last 2 versions |
+| Firefox | Last 2 versions |
+| Safari  | Last 2 versions |
+| Edge    | Last 2 versions |
 
 ## Documentation
 
-You can find the documentation for the web components in the [Kubit UI website](https://kubit-ui.com)
+You can find comprehensive documentation for all components at:
+
+🌐 **[Kubit UI Website](https://kubit-ui.com)**
+
+- Component API documentation
+- Interactive examples
+- Design guidelines
+- Migration guides
 
 ## Storybook
 
-To run the storybook, first of all clone the repository and install the dependencies. Then run the following command:
+Explore all components interactively in Storybook.
 
-```bash
-npm run storybook
+### View Online
 
-yarn storybook
-```
+🎭 **[View Storybook](https://kubit-ui.com/storybook)** - Browse all components online
 
-This will start the storybook server and you can see the components in action.
+### Run Locally
+
+To run Storybook locally:
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/kubit-ui/kubit-react-components.git
+   cd kubit-react-components
+   ```
+
+2. Install dependencies:
+
+   ```bash
+   npm install
+   # or
+   yarn install
+   ```
+
+3. Start Storybook:
+   ```bash
+   npm run storybook
+   # or
+   yarn storybook
+   ```
+
+This will start the Storybook server at `http://localhost:6006` where you can see all components in action.
 
 ## Tests
 
-To run the tests, you can use the following command:
+Run the test suite to ensure everything works correctly:
 
 ```bash
+# Run all tests
 npm run test
-
+# or
 yarn test
+
+# Watch mode (for development)
+npm run test:watch
+# or
+yarn test:watch
+
+# Coverage report
+npm run test:coverage
+# or
+yarn test:coverage
 ```
 
-This will run the tests and show the results in the terminal.
+**Test Stack:**
+
+- ✅ Vitest - Fast unit testing
+- 🧪 Testing Library - Component testing
+- ♿ vitest-axe - Accessibility testing
 
 ## Contributing
 
-We are open to contributions. If you want to contribute to the project, please follow the steps below:
+We welcome contributions from the community! Here's how you can help:
+
+### Ways to Contribute
 
-1. **Fork the Repository**: Click the "Fork" button in the upper right corner of the repository's page on GitHub. This will create a copy of the repository in your account.
+- 🐛 Report bugs
+- 💡 Suggest new features
+- 📝 Improve documentation
+- 🔧 Submit pull requests
+- ⭐ Star the repository
 
-2. **Clone the Repository**: Use `git clone` to clone the repository to your local machine.
+### Contribution Steps
 
-   ```sh
-   git clone
+1. **Fork the Repository**: Click the "Fork" button in the upper right corner of the [repository's page](https://github.com/kubit-ui/kubit-react-components) on GitHub.
+
+2. **Clone the Repository**: Clone your fork to your local machine.
+
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/kubit-react-components.git
+   cd kubit-react-components
    ```
 
-3. **Create a Branch**: Use `git checkout` to create a new branch for your changes.
+3. **Create a Branch**: Create a new branch for your changes.
 
-   ```sh
-   git checkout -b <branch-name>
+   ```bash
+   git checkout -b feature/your-feature-name
    ```
 
-4. **Make Changes**: Make any necessary changes to the codebase. And **test** the changes.
+4. **Install Dependencies**:
+
+   ```bash
+   yarn install
+   ```
+
+5. **Make Changes**: Make your changes and test them thoroughly.
+
+   ```bash
+   yarn test
+   yarn lint
+   yarn typecheck
+   ```
 
-5. **Commit Changes**: Use `git commit` to commit your changes to the branch.
+6. **Commit Changes**: Use conventional commits for your messages.
 
-   ```sh
-   git commit -m "Your commit message"
+   ```bash
+   git commit -m "feat: add new component feature"
    ```
 
-6. **Push Changes**: Use `git push` to push your changes to your forked repository.
+   **Commit Types:**
+   - `feat:` - New feature
+   - `fix:` - Bug fix
+   - `docs:` - Documentation changes
+   - `style:` - Code style changes (formatting)
+   - `refactor:` - Code refactoring
+   - `test:` - Adding or updating tests
+   - `chore:` - Maintenance tasks
 
-   ```sh
-   git push origin <branch-name>
+7. **Push Changes**: Push your changes to your fork.
+
+   ```bash
+   git push origin feature/your-feature-name
    ```
 
-7. **Open a Pull Request**: Go to the original repository on GitHub and click the "New pull request" button. Fill out the form with details about your changes and submit the pull request.
+8. **Open a Pull Request**: Go to the original repository and click "New pull request". Fill out the PR template with details about your changes.
+
+### Development Commands
 
-Once your pull request has been submitted, a maintainer will review your changes and provide feedback. If everything looks good, your pull request will be merged and your changes will become part of the project.
+```bash
+# Start development server
+yarn dev
 
-For more information on contributing to our projects, please refer to the `CONTRIBUTING.md` file.
+# Run Storybook
+yarn storybook
+
+# Build library
+yarn dist
+
+# Run tests
+yarn test
+
+# Lint code
+yarn lint
+
+# Type check
+yarn typecheck
+
+# Check package size
+yarn pack:size
+```
+
+For more detailed information, please refer to the [CONTRIBUTING.md](./CONTRIBUTING.md) file.
+
+## Community & Support
+
+- 💬 [GitHub Discussions](https://github.com/kubit-ui/kubit-react-components/discussions) - Ask questions and share ideas
+- 🐛 [Issue Tracker](https://github.com/kubit-ui/kubit-react-components/issues) - Report bugs and request features
+- 📧 [Email](mailto:kubit@opendigitalservices.com) - Contact the team
+- 🐦 [Twitter](https://twitter.com/kubit_ui) - Follow for updates
+
+## Related Projects
+
+- [Kubit Design System](https://kubit-ui.com) - Complete design system documentation
+- [Kubit Figma Kit](https://figma.com/@kubit) - Design files and components
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md) for a list of changes and migration guides.
+
+## Migration Guides
+
+- [v1.x to v2.0.0](./MIGRATION_GUIDE.md) - Complete migration guide for major version
+
+## License
+
+This project is licensed under the **Apache License 2.0** - see the [LICENSE.md](./LICENSE.md) file for details.
+
+```
+Copyright 2025 Kubit
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+```
+
+---
+
+<div align="center">
+
+**Made with ❤️ by the Kubit Team**
+
+[![GitHub](https://img.shields.io/badge/GitHub-kubit--ui-181717?style=for-the-badge&logo=github)](https://github.com/kubit-ui/kubit-react-components)
+[![NPM](https://img.shields.io/badge/NPM-%40kubit--ui--web%2Freact--components-CB3837?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@kubit-ui-web/react-components)
+[![Website](https://img.shields.io/badge/Website-kubit--ui.com-4A90E2?style=for-the-badge&logo=google-chrome&logoColor=white)](https://kubit-ui.com)
+
+If you find this project useful, please consider giving it a ⭐️!
+
+</div>

package/dist/cjs/lib/provider/cssProvider/stats/stats.js

@@ -1,6 +1,6 @@
 /* CssThemes */
 export const cssThemes = {
-  'kubit': { css: '/Users/n128691/PROJECTS/ODS/KUBIT/ods-odswpa-web-ui-components/app/src/lib/designSystem/kubit/css/kubit.css', foreign: { before: [],  after: [], }, },
+  'kubit': { css: '/Users/n128691/PROJECTS/OPEN_SOURCE/kubit-react-components/src/lib/designSystem/kubit/css/kubit.css', foreign: { before: [],  after: [], }, },
 }
 /* CssThemes */
 

package/dist/esm/lib/provider/cssProvider/stats/stats.js

@@ -1,6 +1,6 @@
 /* CssThemes */
 export const cssThemes = {
-  'kubit': { css: '/Users/n128691/PROJECTS/ODS/KUBIT/ods-odswpa-web-ui-components/app/src/lib/designSystem/kubit/css/kubit.css', foreign: { before: [],  after: [], }, },
+  'kubit': { css: '/Users/n128691/PROJECTS/OPEN_SOURCE/kubit-react-components/src/lib/designSystem/kubit/css/kubit.css', foreign: { before: [],  after: [], }, },
 }
 /* CssThemes */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -55,15 +55,27 @@
     "*.ico"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
+    "dist/types",
     "dist/styles",
     "package.json",
     "README.md",
     "LICENSE.md",
+    "CHANGELOG.md",
+    "!dist/cjs/lib/designSystem/**/css/*.css",
+    "!dist/esm/lib/designSystem/**/css/*.css",
+    "!dist/**/*.test.*",
+    "!dist/**/*.test.d.ts",
+    "!dist/**/*.stories.*",
+    "!dist/**/__tests__",
+    "!dist/**/__mocks__",
+    "!dist/**/__fixtures__",
     "!dist/**/tests",
-    "!dist/**/**/*.test.*",
     "!dist/**/storybook",
-    "!dist/**/**/stories"
+    "!dist/**/node_modules",
+    "!dist/**/.tsbuildinfo",
+    "!dist/**/*.map"
   ],
   "exports": {
     ".": {
@@ -105,7 +117,11 @@
     "test:coverage": "vitest --coverage.enabled=true --run",
     "typecheck": "tsc --noEmit",
     "validate": "yarn lint && yarn typecheck && yarn dist",
-    "publish-figma": "npx figma connect publish"
+    "publish-figma": "npx figma connect publish",
+    "pack:check": "npm pack --dry-run",
+    "pack:size": "npm pack --dry-run 2>&1 | grep -E '(unpacked size|package size|total files)'",
+    "pack:analyze": "npm pack && tar -tzf *.tgz | head -50 && rm *.tgz",
+    "prepublishOnly": "yarn dist && yarn pack:size"
   },
   "peerDependencies": {
     "react": ">=17.0.0 || >=18.3.1",