Arcane UI

Arcane UI is a comprehensive design system aimed at accelerating development workflows by eliminating the need for a dedicated designer. With its focus on style and efficiency, Arcane UI enables developers to create visually appealing interfaces with minimal effort. This package leverages the power of React and TypeScript, providing a robust foundation for building scalable and maintainable applications.

🚀 Getting Started

To get started with Arcane UI, follow these steps to set up your development environment:

yarn install
yarn dev

This will install all necessary dependencies and start the development environment, allowing you to immediately begin working on your project.

📦 What's Included?

Arcane UI comes packed with features and tools designed to streamline your development process:

• Concurrently: Run multiple commands concurrently. Perfect for watching files, running a server alongside your client, etc.
• tsup: Utilize the simplicity and speed of tsup for bundling your TypeScript libraries.
• TypeScript: Leverage the full power of TypeScript for safer code and easier maintenance.
• ESLint & Prettier: Ensure code quality and consistency with integrated linting and formatting tools.
• Vitest: A blazing fast unit-test framework that works out of the box for JavaScript projects.
• Storybook: Isolate and develop UI components in a dedicated environment.
• Release-it: Automate the versioning and publishing process of your package.
• Husky & Commitizen: Simplify git hooks and enforce conventional commit standards.

🛠 Scripts

Arcane UI includes several scripts to help with development:

• yarn dev: Runs the project in development mode with live reloading.
• yarn build: Builds the project for production.
• yarn type-check: Checks TypeScript types.
• yarn lint: Lints the project files.
• yarn lint:fix: Fixes linting issues and formats the code.
• yarn test: Runs the test suite.
• yarn test:ci: Runs the test suite with coverage reporting.
• yarn prepare: Prepares the husky hooks.
• yarn commit: Runs Commitizen for commit prompts.
• yarn storybook: Starts the Storybook environment.
• yarn build-storybook: Builds the Storybook for production.
• yarn release: Builds the project and releases it.
• yarn link:self: Links the package for local development.

🖇️ Developing & Linking

Arcane UI supports local linking for easy development across projects. After building your package with yarn build, you can link it using yarn link and then integrate it into any project by running yarn link "arcane-ui" in the consuming project's root.

🔖 Versioning & Publishing

Utilize yarn release to increment version numbers, tag your release, and automate the changelog generation. Ensure you're logged in to npm (npm login) with the correct permissions before publishing. After a successful release, GitHub Actions (if configured) will publish your package to npm.

🎨 Styling

Arcane UI is designed to work seamlessly with modern CSS and supports PostCSS out of the box. You can import CSS files directly in your components, and they will be bundled with your package. For more advanced scenarios, including CSS-in-JS libraries, Arcane UI is flexible enough to integrate with your chosen solution.

🚀 Let's Build Something Amazing

Arcane UI is here to empower developers to build beautiful, user-friendly interfaces without a steep learning curve. We can't wait to see what you build with it. If you create something awesome, feel free to share it with the community.

Happy coding!