@toolsify/core

A core library for building customizable UI components and themes using Mantine. This library provides pre-configured components, utilities, and theme management for seamless integration into your projects.

---

Features

• Customizable Components: Pre-styled components like buttons, inputs, modals, tables, and more.
• Theme Management: Easily manage and customize themes with support for color schemes, radius, and other design tokens.
• Mantine Integration: Built on top of Mantine for a robust and flexible UI foundation.
• Utilities: Helper utilities for toggling modes, managing themes, and more.

---

Installation

Install the library using pnpm, npm, or yarn:

# Using pnpm
pnpm add @toolsify/core

# Using npm
npm install @toolsify/core

# Using yarn
yarn add @toolsify/core

---

Usage

1. Theme Provider

Wrap your application with the ThemeProvider to enable theme customization and management.

import React from "react";
import { ThemeProvider } from "@toolsify/core";

const App = () => {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
};

export default App;

---

2. Using Pre-Styled Components

The library provides pre-configured components that can be used directly in your application.

Example: Button

import React from "react";
import { Button } from "@toolsify/core";

const App = () => {
  return <Button variant="filled" color="primary">Click Me</Button>;
};

export default App;

Example: Input

import React from "react";
import { TextInput } from "@toolsify/core";

const App = () => {
  return <TextInput label="Name" placeholder="Enter your name" />;
};

export default App;

---

3. Theme Customization

Use the ThemeCustomizer component to allow users to customize the theme dynamically.

import React from "react";
import { ThemeCustomizer } from "@toolsify/core";

const App = () => {
  return <ThemeCustomizer />;
};

export default App;

---

4. Toggle Dark/Light Mode

Use the ToggleMode utility to switch between dark and light modes.

import React from "react";
import { ToggleMode } from "@toolsify/core";

const App = () => {
  return <ToggleMode />;
};

export default App;

---

Folder Structure

libs/@core/base/
├── package.json
├── tsconfig.json
├── tsup.config.ts
├── src/
│   ├── index.tsx
│   ├── components/
│   │   ├── index.tsx
│   │   ├── badge/
│   │   │   └── theme-badge.ts
│   │   ├── button/
│   │   │   └── theme-button.ts
│   │   ├── card/
│   │   ├── colors/
│   │   ├── drawer/
│   │   ├── input/
│   │   ├── modal/
│   │   ├── overlay/
│   │   ├── paper/
│   │   ├── popover/
│   │   ├── switch/
│   │   ├── table/
│   │   └── tooltip/
│   ├── plugins/
│   │   ├── index.tsx
│   │   └── iconify/
│   ├── providers/
│   │   ├── index.tsx
│   │   └── ThemeProvider.tsx
│   ├── store/
│   │   ├── index.tsx
│   │   └── theme.store.ts
│   ├── theme/
│   │   ├── index.tsx
│   │   ├── config/
│   │   └── customizer/
│   ├── types/
│   │   ├── index.d.ts
│   │   └── index.type.ts
│   └── utils/
│       ├── index.tsx
│       └── ToggleMode.tsx

---

Development

Scripts

• Build: Build the library using tsup.

  pnpm run build

• Dev: Watch for changes and rebuild the library.

  pnpm run dev

• Lint: Run ESLint to check for code quality issues.

  pnpm run lint

• Clean: Remove build artifacts and dependencies.

  pnpm run clean

---

License

This project is licensed under the MIT License. See the LICENSE file for details.