https://github.com/codewithveek/chakra-next
https://github.com/codewithveek/chakra-next
Last synced: 7 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/codewithveek/chakra-next
- Owner: codewithveek
- Created: 2024-07-26T23:45:35.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-13T02:05:51.000Z (almost 2 years ago)
- Last Synced: 2026-02-04T14:37:15.056Z (4 months ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# chakra-next
`chakra-next` is a command-line tool that exports Chakra UI components to separate files, sets up Chakra UI configuration, and ensures compatibility with App Router. This tool streamlines the process of organizing and preparing Chakra UI components for use in Next.js projects.
## Features
- Exports individual Chakra UI components to separate files
- Automatically adds the "use client" directive for Next.js App Router compatibility
- Supports exporting entire component families (e.g., Menu, Modal, Tabs)
- Customizable output directory and file extension
- Sets up Chakra UI configuration and provider
- Supports both TypeScript and JavaScript projects
- Configures for both App Router and Pages Router
## Installation
You can install `chakra-next` globally using npm:
```bash
npm install -g chakra-next
```
Or, if you prefer to use it as a dev dependency in your project:
```bash
npm install --save-dev chakra-next
```
## Usage
### Command Line Interface
Basic usage:
```bash
chakra-next [component-names...]
```
Options:
- `-o, --output `: Specify the output directory for components (default: "components/ui")
- `-e, --extension `: Specify the file extension (default: "tsx", options: "tsx" or "jsx")
- `--init`: Initialize Chakra UI setup without exporting components
Examples:
```bash
# Initialize Chakra UI setup
chakra-next --init
# Export a single component
chakra-next Button
# Export multiple components
chakra-next Button Menu Modal
# Specify output directory and file extension
chakra-next Button -o src/components -e jsx
```
If you run the command without specifying component names or with the `--init` flag, you'll be guided through the Chakra UI setup process.
### Setup Process
When initializing or running without arguments, the script will:
1. Prompt you about TypeScript usage
2. Ask if you're using the Next.js App Router
3. Create or update a theme file in `lib/theme.(ts|js)`
4. Set up a Chakra provider in `providers/chakra-provider.(tsx|jsx)`
5. For App Router users, update the layout file to include the provider
## API
### `exportComponent(componentName, outputDir, fileExtension)`
Exports a Chakra UI component to a separate file.
- `componentName` (string): Name of the component to export
- `outputDir` (string): Directory to output the component file
- `fileExtension` (string): File extension for the component file ("tsx" or "jsx")
### `createDirectoryIfNotExists(dirPath)`
Creates a directory if it doesn't already exist.
- `dirPath` (string): Path of the directory to create
### `getComponentFamily(componentName)`
Returns an array of related components for compound components.
- `componentName` (string): Name of the component to get the family for
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgements
- [Chakra UI](https://chakra-ui.com/) for their excellent component library
- [Commander.js](https://github.com/tj/commander.js/) for the command-line interface
## Support
If you encounter any issues or have questions, please file an issue on the [GitHub repository](https://github.com/your-username/chakra-next/issues).