Typeweave

Introduction

TypeWeave is an organization on npm that provides a collection of packages for building robust and elegant user interfaces. My goal is to streamline the development process and make it easier for developers to create high-quality applications.

Main Packages

• @typeweave/react: A versatile TypeScript React UI components package that provides a comprehensive set of UI components for building robust and maintainable applications.

• @typeweave/theme: A Tailwind CSS theme package that provides a set of pre-designed styles for use with @typeweave/react. This package allows you to quickly customize the appearance of your application and create a consistent visual identity.

By harnessing the power of both @typeweave/react and @typeweave/theme packages, you can seamlessly integrate sophisticated UI components, leveraging the robust typing capabilities of TypeScript and the rapid styling features of Tailwind CSS to streamline your development process and create exceptional user experiences.

Features

• TypeScript Integration: Harness the power of TypeScript's static typing to catch errors early and enhance code maintainability.

• Rich Component Library: Access a comprehensive collection of UI components, ranging from basic to complex elements, all meticulously crafted for seamless integration.

• Customization Options: Tailor the appearance and behavior of components to suit your project's unique requirements with customizable props and styling options.

• Developer-Friendly: Enjoy a smooth development experience with clear documentation, helpful examples, and intuitive APIs.

• Tailwind CSS Integration: Built with Tailwind CSS, allowing for rapid prototyping and easy customization of component styles.

Installation

To install @typeweave/react in your project, simply run one of these:

pnpm add @typeweave/react @typeweave/theme

npm install @typeweave/react @typeweave/theme

yarn add @typeweave/react @typeweave/theme

Usage

To use @typeweave/react in your project, you'll need to configure Tailwind CSS with the styles provided by @typeweave/theme. Here's how you can do it:

1. Install Tailwind CSS in your project if you haven't already.

2. Configure @typeweave/theme in your project's tailwind.config.js file:

import { createTheme, registerStyles } from '@typeweave/theme';

export default {
  content: [...registerStyles(['button'])],
  plugins: [createTheme()],
};

and in your global css

@layer base {
  body {
    @apply bg-background text-foreground;
  }
}

This configuration registers the necessary styles for @typeweave/react components, ensuring they are available for use in your application.

3. Import individual components from @typeweave/react and integrate them into your React application:

import React from 'react';
import { Button } from '@typeweave/react';

const App = () => {
  return (
    <div>
      <Button onPress={() => alert('Hello, TypeWeave!')}>Press me</Button>
    </div>
  );
};

export default App;

Documentation and Examples

• TypeWeave Documentation (coming soon!)
• Example Projects (coming soon!)

Contributing

I welcome contributions to Typeweave. Please see Contributing Guide for information on issue reporting, pull requests, and coding standards.

License

Typeweave is licensed under the MIT License.

Contact

For questions, feedback, or support, please contact me at 7up.charsi@gmail.com.

Note

This project is under active development. Your feedback is highly valued as I continue to refine and enhance Typeweave. Developed with the aim to demonstrate expertise and contribute to the developer community.