DOCSEARCHbyAlgolia
Submit Docs

Arclix Documentation

website·Indexed 31 days ago

https://arclix.github.io/arclix-docs

An open source React component generation tool. Arclix provides a CLI to generate single, multiple, and nested components within React projects, featuring configurable options via arclix.config.json and support for custom component types.

Tokens
4.8K
Snippets
31
Records
41
Agent score
75%

What's inside Arclix

  1. Overview of Arclix Component Generator

    Arclix is an open-source CLI designed for component generation in React projects. It allows developers to instantly generate components including templates, styles, stories, and tests. It provides out-of-the-box support for TypeScript, CSS preprocessors, Storybook, and testing frameworks.

  2. Run unit tests for Arclix core

    Arclix uses Vitest for unit testing across all modules (core, utility, etc.). Configuration is located in vitest.config.cjs. To maintain quality, ensure that branch and function coverage remains above 70%.
    # Run unit tests
npm run test

# Run unit tests with coverage
npm run test:coverage

  3. Initialize Arclix configuration file

    Configure Arclix component generation by creating an arclix.config.json file. This file defines default options shared across the project. You can create this file manually or by running the initialization command. Note that project-wide configurations can be temporarily overridden for specific components using CLI flags during generation.
    npx arclix init

  4. Run Arclix without installation using npx

    You can execute Arclix commands without installing the package manually by using npx. Note that this method is slower than installing the package as a devDependency or globally.
    npx arclix <command>

  6. Set up the Arclix core development environment

    To develop and test the core Arclix package, ensure you have Node.js and npm (v16 or greater) installed. Follow these steps to prepare the repository:

    1. Install dependencies using npm i in the root folder.
    2. Implement your changes.
    3. Verify your changes by running tests and building the project. You can run these individually or use the combined verify command.
    # Run tests
npm run test

# Build the project
npm run build

# Run both tests and build
npm run verify

  7. Apply scopes and breaking change indicators in commits

    Scopes are optional and should specify the area of the change (e.g., core, build, workflow, cli, create, generate, deps). To indicate a breaking change, add an exclamation mark ! after the scope or type.
    # With scope
feat(core): add create project (#1)

# Breaking change (using !)
refactor(core)!: remove create project (#2)

# Without scope
feat: add create project (#1)

  9. Override Arclix configuration options using CLI flags

    You can temporarily override the default options defined in arclix.config.json by using CLI flags during the component generation command. This is useful for one-off requirements, such as placing a specific component in a different directory than the global default.
    # Override the default path to generate a component in the pages folder
npx arclix g c Contact --path="./src/pages"

  10. Prerequisites for installing Arclix

    To use Arclix, you must have Node.js version 16.14 or above installed. It is recommended to check all dependency-related checkboxes during Node.js installation. Users can use nvm (macOS/Linux) or nvm-windows to manage Node versions across different projects.

  11. Follow Arclix commit message conventions

    Arclix follows the Angular commit convention to ensure readable project history and automated changelog generation. Commit messages are enforced using commitlint.

    Message Format

    Commit messages must follow this structure: <type>[optional scope]: <description> (#issue id)

    [optional body]

    [optional footer(s)]

    Formatting Rules for Descriptions

    • Use the imperative, present tense (e.g., "change", not "changed" or "changes").
    • Do not capitalize the first letter.
    • Do not end the description with a period (.).

  12. Prepare and submit a Pull Request to Arclix core

    When submitting a PR, follow these guidelines:

    • Branching: Checkout a topic branch from the base branch (e.g., master) and merge back into it.
    • Features: Provide a reason for the feature (ideally via an approved suggestion issue) and include accompanying test cases.
    • Bug Fixes: Provide a detailed description (and live demo if possible) and add test coverage. Use the format fix: description (#issue id) #PR id in the PR title for release logs.
    • Formatting: Run formatting and PR verification commands before submission. Code is automatically formatted via Prettier and husky git hooks.
    • Commit Messages: PR titles must follow the project's commit message convention for automatic changelog generation.
    # Format code
npm run format

# Run PR verification
npm run verify:pr