open-index/open-npm huggingface dataset:
npm package: @inexture/carousel
Description: A lightweight and customizable carousel library built on top of Mantine's carousel component. It provides pre-configured carousel components and utilities for seamless integration into React applications.
Latest version: 23.0.3

# @inexture/carousel

A lightweight and customizable carousel library built on top of Mantine's carousel component. This library provides a seamless integration with Mantine's ecosystem, offering pre-configured carousel components and utilities for React applications.

---

## Features

- **Mantine Integration**: Built on top of `@mantine/carousel` for a robust and flexible carousel experience.
- **Customizable**: Easily customize styles and behavior to fit your application's needs.
- **TypeScript Support**: Fully typed for a better developer experience.
- **Lightweight**: Minimal dependencies for fast and efficient performance.

---

## Installation

Install the library using `pnpm`, `npm`, or `yarn`:

```bash
# Using pnpm
pnpm add @inexture/carousel

# Using npm
npm install @inexture/carousel

# Using yarn
yarn add @inexture/carousel
```

---

## Usage

### 1. **Basic Carousel**

Use the `@inexture/carousel` library to create a basic carousel in your React application.

```tsx
import React from "react";
import { Carousel } from "@inexture/carousel";

const App = () => {
  return (
    <Carousel>
      <Carousel.Slide>Slide 1</Carousel.Slide>
      <Carousel.Slide>Slide 2</Carousel.Slide>
      <Carousel.Slide>Slide 3</Carousel.Slide>
    </Carousel>
  );
};

export default App;
```

---

### 2. **Customizing Carousel**

You can customize the carousel's behavior and appearance by passing props.

```tsx
import React from "react";
import { Carousel } from "@inexture/carousel";

const App = () => {
  return (
    <Carousel
      loop
      align="center"
      slideSize="50%"
      slidesToScroll={1}
      withIndicators
    >
      <Carousel.Slide>Slide 1</Carousel.Slide>
      <Carousel.Slide>Slide 2</Carousel.Slide>
      <Carousel.Slide>Slide 3</Carousel.Slide>
    </Carousel>
  );
};

export default App;
```

---

### 3. **Using Types**

The library re-exports types from `@mantine/carousel` for better type safety.

```tsx
import React from "react";
import { CarouselProps } from "@inexture/carousel";

const CustomCarousel = (props: CarouselProps) => {
  return <Carousel {...props} />;
};

export default CustomCarousel;
```

---

## Development

### Scripts

- **Build**: Build the library using `tsup`.
  ```bash
  pnpm run build
  ```
- **Dev**: Watch for changes and rebuild the library.
  ```bash
  pnpm run dev
  ```
- **Lint**: Run ESLint to check for code quality issues.
  ```bash
  pnpm run lint
  ```
- **Clean**: Remove build artifacts and dependencies.
  ```bash
  pnpm run clean
  ```

---

## License

This project is licensed under the MIT License.
npm package: @inexture/charts
Description: A lightweight and customizable charting library built on top of Mantine's chart components. It provides pre-configured chart components and utilities for seamless integration into React applications.
Latest version: 23.0.3

# @inexture/charts

A lightweight and customizable charting library built on top of Mantine's chart components. This library provides seamless integration with Mantine's ecosystem, offering pre-configured chart components and utilities for React applications.

---

## Features

- **Mantine Integration**: Built on top of `@mantine/charts` for a robust and flexible charting experience.
- **Customizable**: Easily customize chart styles and behavior to fit your application's needs.
- **TypeScript Support**: Fully typed for a better developer experience.
- **Lightweight**: Minimal dependencies for fast and efficient performance.

---

## Installation

Install the library using `pnpm`, `npm`, or `yarn`:

```bash
# Using pnpm
pnpm add @inexture/charts

# Using npm
npm install @inexture/charts

# Using yarn
yarn add @inexture/charts
```

---

## Usage

### 1. **Basic Chart**

Use the `@inexture/charts` library to create a basic chart in your React application.

```tsx
import React from "react";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from "@inexture/charts";

const data = [
  { name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
  { name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
  { name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
];

const App = () => {
  return (
    <LineChart width={500} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="pv" stroke="#8884d8" />
      <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
    </LineChart>
  );
};

export default App;
```

---

### 2. **Customizing Charts**

You can customize the chart's behavior and appearance by passing props.

```tsx
import React from "react";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from "@inexture/charts";

const data = [
  { name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
  { name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
  { name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
];

const App = () => {
  return (
    <BarChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Bar dataKey="pv" fill="#8884d8" />
      <Bar dataKey="uv" fill="#82ca9d" />
    </BarChart>
  );
};

export default App;
```

---

## License

This project is licensed under the MIT License. See the [LICENSE](../../LICENSE) file for details.
npm package: @inexture/dates
Description: A lightweight and customizable date management library built on top of Mantine's date components. It provides pre-configured date utilities and components for seamless integration into React applications.
Latest version: 23.0.3

# @inexture/dates

A lightweight and customizable date management library built on top of Mantine's date components. It provides pre-configured date utilities and components for seamless integration into React applications.

---

## Features

- **Mantine Integration**: Built on top of `@mantine/dates` for robust and flexible date management.
- **Customizable**: Easily customize date pickers and utilities to fit your application's needs.
- **TypeScript Support**: Fully typed for a better developer experience.
- **Lightweight**: Minimal dependencies for fast and efficient performance.

---

## Installation

Install the library using `pnpm`, `npm`, or `yarn`:

```bash
# Using pnpm
pnpm add @inexture/dates

# Using npm
npm install @inexture/dates

# Using yarn
yarn add @inexture/dates
```

### Peer Dependencies

Make sure the following peer dependencies are installed in your project:

- `react`
- `react-dom`
- `@inexture/core`
- `dayjs`

You can install them using:

```bash
pnpm add react react-dom @inexture/core dayjs
```

---

## Usage

### 1. **Basic Date Picker**

Use the `@inexture/dates` library to create a basic date picker in your React application.

```tsx
import React from "react";
import { DatePicker } from "@inexture/dates";

const App = () => {
  return (
    <DatePicker
      label="Pick a date"
      placeholder="Select a date"
      value={new Date()}
      onChange={(date) => console.log(date)}
    />
  );
};

export default App;
```

---

### 2. **Customizing Date Picker**

You can customize the date picker's behavior and appearance by passing props.

```tsx
import React from "react";
import { DatePicker } from "@inexture/dates";

const App = () => {
  return (
    <DatePicker
      label="Pick a date"
      placeholder="Select a date"
      value={new Date()}
      onChange={(date) => console.log(date)}
      minDate={new Date(2023, 0, 1)}
      maxDate={new Date(2025, 11, 31)}
      withTime
    />
  );
};

export default App;
```

---

### 3. **Using Types**

The library re-exports types from `@mantine/dates` for better type safety.

```tsx
import React from "react";
import { DatePickerProps } from "@inexture/dates";

const CustomDatePicker = (props: DatePickerProps) => {
  return <DatePicker {...props} />;
};

export default CustomDatePicker;
```

---

## License

This project is licensed under the MIT License.
npm package: @inexture/dropzone
Description: A lightweight and customizable dropzone library built on top of Mantine's dropzone component. It provides pre-configured dropzone components and utilities for seamless integration into React applications.
Latest version: 23.0.3

# @inexture/dropzone

A lightweight and customizable dropzone library built on top of Mantine's dropzone component. It provides pre-configured dropzone components and utilities for seamless integration into React applications.

---

## Features

- **Mantine Integration**: Built on top of `@mantine/dropzone` for robust and flexible file dropzone management.
- **Customizable**: Easily customize dropzone behavior and appearance to fit your application's needs.
- **TypeScript Support**: Fully typed for a better developer experience.
- **Lightweight**: Minimal dependencies for fast and efficient performance.

---

## Installation

Install the library using `pnpm`, `npm`, or `yarn`:

```bash
# Using pnpm
pnpm add @inexture/dropzone

# Using npm
npm install @inexture/dropzone

# Using yarn
yarn add @inexture/dropzone
```

### Peer Dependencies

Make sure the following peer dependencies are installed in your project:

- `react`
- `react-dom`
- `@inexture/core`

You can install them using:

```bash
pnpm add react react-dom @inexture/core 
```

---

## Usage

### 1. **Basic Dropzone**

Use the `@inexture/dropzone` library to create a basic dropzone in your React application.

```tsx
import React from "react";
import { Dropzone } from "@inexture/dropzone";

const App = () => {
  return (
    <Dropzone
      onDrop={(files) => console.log(files)}
      accept={["image/*"]}
      maxSize={3 * 1024 ** 2} // 3 MB
    >
      <div>Drag and drop files here, or click to select files</div>
    </Dropzone>
  );
};

export default App;
```

---

### 2. **Customizing Dropzone**

You can customize the dropzone's behavior and appearance by passing props.

```tsx
import React from "react";
import { Dropzone } from "@inexture/dropzone";

const App = () => {
  return (
    <Dropzone
      onDrop={(files) => console.log(files)}
      accept={["image/png", "image/jpeg"]}
      maxSize={5 * 1024 ** 2} // 5 MB
      multiple
    >
      <div>Drag and drop PNG or JPEG files here, or click to select files</div>
    </Dropzone>
  );
};

export default App;
```

---

### 3. **Using Types**

The library re-exports types from `@mantine/dropzone` for better type safety.

```tsx
import React from "react";
import { DropzoneProps } from "@inexture/dropzone";

const CustomDropzone = (props: DropzoneProps) => {
  return <Dropzone {...props} />;
};

export default CustomDropzone;
```

---

## License

This project is licensed under the MIT License.
npm package: @inexture/highlight
Description: A lightweight and customizable syntax highlighting library built on top of Mantine's code highlight component. It provides pre-configured components and utilities for seamless integration into React applications.
Latest version: 23.0.3

# @inexture/highlight

A lightweight and customizable syntax highlighting library built on top of Mantine's code highlight component. It provides pre-configured components and utilities for seamless integration into React applications.

---

## Features

- **Mantine Integration**: Built on top of `@mantine/code-highlight` for robust and flexible syntax highlighting.
- **Customizable**: Easily customize syntax highlighting styles and behavior to fit your application's needs.
- **TypeScript Support**: Fully typed for a better developer experience.
- **Lightweight**: Minimal dependencies for fast and efficient performance.

---

## Installation

Install the library using `pnpm`, `npm`, or `yarn`:

```bash
# Using pnpm
pnpm add @inexture/highlight

# Using npm
npm install @inexture/highlight

# Using yarn
yarn add @inexture/highlight
```

### Peer Dependencies

Make sure the following peer dependencies are installed in your project:

- `react`
- `react-dom`
- `@inexture/core`

You can install them using:

```bash
pnpm add react react-dom @inexture/core
```

---

## Usage

### 1. **Basic Syntax Highlighting**

Use the `@inexture/highlight` library to create a basic syntax highlighting component in your React application.

```tsx
import React from "react";
import { CodeHighlight } from "@inexture/highlight";

const App = () => {
  return (
    <CodeHighlight language="javascript">
      {`const greet = () => console.log("Hello, World!");`}
    </CodeHighlight>
  );
};

export default App;
```

---

### 2. **Customizing Syntax Highlighting**

You can customize the syntax highlighting styles and behavior by passing props.

```tsx
import React from "react";
import { CodeHighlight } from "@inexture/highlight";

const App = () => {
  return (
    <CodeHighlight
      language="typescript"
      withLineNumbers
      highlightLines={[2]}
    >
      {`const greet = () => {
  console.log("Hello, World!");
};`}
    </CodeHighlight>
  );
};

export default App;
```

---

### 3. **Using Types**

The library re-exports types from `@mantine/code-highlight` for better type safety.

```tsx
import React from "react";
import { CodeHighlightProps } from "@inexture/highlight";

const CustomCodeHighlight = (props: CodeHighlightProps) => {
  return <CodeHighlight {...props} />;
};

export default CustomCodeHighlight;
```

---

## License

This project is licensed under the MIT License.
npm package: @inexture/installer
Description: CLI to bootstrap frontend projects from starter repos.
Author: Inexture Solutions
Latest version: 0.0.3

## installer

CLI to bootstrap Inexture frontend starter projects from the terminal.

### Install

The package is published as `@inexture/installer` on npm.

You don’t need to install it globally – just use `npx`:

```bash
npx @inexture/installer
```

> Make sure you have `git` and `node` installed.

### What it does

The installer guides you through a few simple steps:

1. **Choose a template**
   - React with Mantine
   - React with MUI
2. **Enter a project name**
3. The installer will:
   - `git clone` the selected template into a new folder with that name
   - remove the template’s `.git` folder so you start with a clean repo

At the end you’ll see instructions like:

```bash
cd your-project-name
npm install    # or bun install
npm run dev   # or bun dev
```

### Templates used

Currently the following public templates are used:

- React with Mantine: `https://github.com/inexture-solutions/quick-start-react-mantine.git`
- React with Mantine ( Default ): `https://github.com/inexture-solutions/quick-start-react-mantine-default.git`
- React with MUI: `https://github.com/inexture-solutions/quick-start-react-mui.git`
npm package: @inf-fe/seact
Description: React in San, San in React.
Latest version: 0.4.2

# Seact

React in San, San in React.

## 什么是 Seact

Seact 是一个工具库，可以使 React 和 San 组件相互调用对方。

## 应用场景

* 从 San 迁移至 React 或者 React 迁移至 San
* 在一个应用中同时使用 React 和 San

请注意，在针对上述应用场景的情况下，无论是 iframe 还是各种微前端的方案都是不错的选择。

只有在极其希望用粒度更小的混合方式的前提下，才建议使用 Seact。因为一旦使用 Seact，项目的工程管理难度将陡然提升。之所以一个项目要用到类似 Seact 这样的库，那么说明该项目本身就在工程管理上做的不够优秀。所以，我们建议，除非万不得已不要使用，如果使用，尽量保证粒度够大，逻辑简单清晰。

## 安装

```shell
npm i @inf-fe/seact
```

## 案例

[案例](https://github.com/inf-fe/seact/tree/main/src/example)

## 注意

* sanInReact 中，san 挂载在一个类名是 seact-san-in-react-mount-container 的 div 标签中

## TODO

* 使用styled时效果与预期不符

## License

[MIT](http://opensource.org/licenses/MIT)