Chop Logic Components

Code Quality Checks

Deployments

Standards

Welcome to Chop Logic Components, a React components library packed with a variety of styled components and custom hooks that are easy to integrate into any React project.

📚 About This Library

Chop Logic Components follows Atomic Design principles with Fully Typed TypeScript components. All styling uses pure CSS with CSS variables (BEM naming convention with cl- prefix) for consistent theming across light and dark modes. Built for developer productivity with comprehensive Storybook documentation and accessibility-first approach.

✨ Features

Chop Logic is designed to speed up development by providing reusable, accessible, and highly customizable components. Whether you're building complex forms, creating dynamic layouts, or managing component logic with hooks, Chop Logic Components has the tools to make it easier.

🔗 Links

• NPM package
• Playground
• Changelog

📦 Installation

To get started with Chop Logic, install it via npm or yarn:

npm install chop-logic-components
# or
yarn add chop-logic-components

📜 Available NPM Scripts

Script	Description
start	Starts Storybook in development mode on port 6006 without opening a browser.
build	Builds the TypeScript types and compiles the library using Vite.
build:storybook	Builds a static version of Storybook into the storybook-static directory.
prepare	Runs the production build and sets up Husky git hooks.
format	Formats all files using both Biome (for JS/TS) and Prettier (for MD/MDX).
format:biome	Formats JS, TS, JSON, and CSS files using Biome.
format:prettier	Formats MD and MDX files using Prettier.
lint	Runs both Biome and Prettier linters to check code style and quality.
lint:biome	Runs Biome linter on JS/TS files.
lint:prettier	Checks formatting of MD and MDX files using Prettier.
lint:errors	Shows only error-level diagnostics from Biome (limited to 100 issues).
lint:warnings	Shows only warning-level diagnostics from Biome (limited to 100 issues).
lint:fix	Automatically fixes Biome issues where possible.
typecheck	Performs a full type check without emitting output.
test	Runs unit tests using Vitest in watch mode (interactive).
test:ci	Runs tests once in CI mode and allows empty test sets.
coverage	Runs tests and generates a coverage report using Vitest.
test:mutation	Runs mutation testing using Stryker to verify test quality.
release:version	Bumps the version (patch, minor, or major), commits the change, creates a Git tag, and pushes to main. Usage: npm run release:version patch

🛠 Contributing

Contributions are welcome! If you find a bug or have an idea for improvement, feel free to open an issue or submit a pull request. Please check the Contribution guide for additional info.

1. Fork the repository.
2. Clone your fork.
3. Create a new feature branch.
4. Implement and test your changes.
5. Submit a pull request!

---

Let's build better logic tools together! 🚀