open-index/open-npm huggingface dataset:
npm package: @idered/twix
Description: Style Radix Ui components with Tailwind CSS
Latest version: 0.0.7

# Twix

![](./screenshot.png)

<p align="center">
Style React components with TailwindCSS
</p>

<br />

<p align="center">
  <a href="https://codesandbox.io/s/tailwindcss-radix-ui-jnfckh?fontsize=14&hidenavigation=1&theme=dark">
    <img alt="Edit tailwindcss-radix-ui" src="https://codesandbox.io/static/img/play-codesandbox.svg" />
  </a>
</p>

<p align="center">
  <a href="https://twitter.com/intent/follow/?screen_name=Idered">
    <img alt="twitter" src="https://img.shields.io/twitter/follow/Idered?style=social" />
  </a>
</p>

## Install

```sh
npm i @idered/twix
```

To get IntelliSense working, add this to your Visual Studio Config:

```json
"tailwindCSS.experimental.classRegex": [
  "twix\\([\\s\\S]*?'([^']*)'\\s?\\)",
  "twix\\([\\s\\S]*?\"([^\"]*)\"\\s?\\)",
  "twix\\([\\s\\S]*?`([^`]*)`\\s?\\)"
]
```

## Usage

```tsx
// components/checkbox.tsx
import { twix } from "@idered/twix";
import * as Checkbox from "@radix-ui/react-checkbox";

export const Root = twix(
  Checkbox.Root,
  "border border-slate-300 hover:border-slate-500 rounded w-8 h-8 flex items-center justify-center aria-checked:border-blue-500"
);

export const Indicator = twix(Checkbox.Indicator, "text-indigo-500");
```

```tsx
// app.tsx
import * as Checkbox from "./components/checkbox.tsx";
import { CheckIcon } from "@radix-ui/react-icons";

export default () => {
  return (
    <div>
      <Checkbox.Root>
        <Checkbox.Indicator>
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Root>
    </div>
  );
};
```

## Styling based on state

Use [ARIA states](https://tailwindcss.com/docs/hover-focus-and-other-states#aria-states).
npm package: @idesigncode/storybook-tools
Description: A collection of ESM tools to document component implementation examples in Storybook.
Author: Matthew Nuthall
Latest version: 3.0.2

# @idesigncode/storybook-tools

A collection of ESM tools to document component implementation examples in Storybook.

## Documentation [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://idesigncode-storybook-tools.netlify.app)

Check out the [documentation](https://idesigncode-storybook-tools.netlify.app/) for all examples and configuration details.

## Installation

```shell
npm i @idesigncode/storybook-tools --save-dev
```

## Features

- ✏️ Write functional "example components" for actual use cases of a component.
- 📑 [PropsTable](https://idesigncode-storybook-tools.netlify.app/?path=/docs/components-propstable--docs): automatically document static & "live-updating" props details.
- 🖥️ [Source](https://idesigncode-storybook-tools.netlify.app/?path=/docs/components-source--docs): output production-ready source code with [Raw Imports](https://idesigncode-storybook-tools.netlify.app/?path=/docs/configuration-webpack--docs#raw-imports) & [Import Path Replacements](https://idesigncode-storybook-tools.netlify.app/?path=/docs/configuration-import-path-replacements--docs).
- 🌙 [DocsContainer](https://idesigncode-storybook-tools.netlify.app/?path=/docs/configuration-docscontainer--docs): dark mode support for Storybook Docs with [storybook-dark-mode](https://github.com/hipstersmoothie/storybook-dark-mode).
- 📸 Image snapshot testing compatible.
- 🎉 Compatible with `MDX` and `CSF` stories.
- 🧪 Tested with [Storybook Test Runner](https://storybook.js.org/docs/react/writing-tests/test-runner) to run [User Interaction](https://storybook.js.org/docs/react/writing-tests/interaction-testing), [DOM](https://jestjs.io/docs/snapshot-testing) & [Image](https://github.com/americanexpress/jest-image-snapshot) Snapshot tests.

## Requirements

- See [peer dependencies](package.json)
- The default [Webpack builder](https://storybook.js.org/docs/react/builders/webpack) for Storybook.
- A small amount of configuration for [Webpack](https://idesigncode-storybook-tools.netlify.app/?path=/docs/configuration-webpack--docs) & the [default CSS styles](https://idesigncode-storybook-tools.netlify.app/?path=/docs/configuration-css--docs).
npm package: @idestin/eslint-config-basic
Description: ### eslint-plugin-html插件
Author: Destin
Latest version: 0.0.1

## ESLint常用插件介绍

### eslint-plugin-html插件

通过这个插件你可以让eslint去检测html文件script标签里的js代码，只需要在 `plugins` 中引入即可

```javaScript
{
  "plugins": [
    "html"
  ]
}
```

### eslint-plugin-n

> forked from eslint-plugin-node v11.1.0. as the original repository seems no longer maintained.

因为原始仓库 `eslint-plugin-node` 似乎不再维护，所以现在基本上都用这个了，它添加对 `node` 的 `eslint` 支持

### eslint-plugin-import插件

这个插件意在提供对ES6+ import/export语法的支持，有助于防止你写错文件路径或者引用的变量名

```javaScript
{
  "extends": {
    'plugin:import/recommended',
  }
}
```

### eslint-plugin-promise插件

这个插件意在通过代码风格检测让开发者养成较好地使用promise的方式（最佳实践，best practices）。比如在对promise使用了then之后会要求你加一个catch捕获下异常，当然如果你的方法是直接return返回了这个promise的话则不会要求你马上加catch（因为毕竟当然你可以稍后在其他地方拿到这个promise后再catch）

```javaScript
{
  "plugins": [
    "promise"
  ],
  "rules": {
    "promise/always-return": "error",
    "promise/no-return-wrap": "error",
    "promise/param-names": "error",
    "promise/catch-or-return": "error",
    "promise/no-native": "off",
    "promise/no-nesting": "warn",
    "promise/no-promise-in-callback": "warn",
    "promise/no-callback-in-promise": "warn",
    "promise/avoid-new": "warn",
    "promise/no-return-in-finally": "warn"
  }
}

or

{
  "extends": [
    "plugin:promise/recommended"
  ]
}
```

### eslint-plugin-yml插件

这个 ESLint 插件为 `YAML` 提供了 `linting` 规则

```javaScript
{
  "extends": [
    'plugin:yml/standard',
  ]
}
```

### eslint-plugin-jsonc插件

这个 ESLint 插件为 `JSON`、`JSONC`、`JSON5` 提供了 `linting` 规则

### eslint-plugin-markdown插件

这个 ESLint 插件可以在 `Markdown` 中为 `js`、`ts`、`jsx` 提供校验

```javaScript
{
  "extends": [
    "plugin:markdown/recommended"
  ]
}
```

### eslint-plugin-eslint-comments插件

用于 ESLint 指令注释的附加 ESLint 规则
npm package: @idetik/core-prerelease
Description: A layer-based visualization abstraction
Latest version: 7.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @idetik/core-prerelease

🚨 **This package is under active development.** Use at your own risk in production environments.

A layer-based visualization abstraction for interactive rendering of large datasets, with particular focus on scientific imaging and bioinformatics data formats.
npm package: @idetik/react
Description: idetik react components
Latest version: 0.6.0

# @idetik/react

🚨 **This package is under active development.** Use at your own risk in production environments.

React components for interactive visualization of large datasets, built on the Idetik runtime.

## Getting Started

### Prerequisites

- Node.js v20.19.0 or later (required)
- npm

### Installation

1. Clone the repository:
   ```bash
   git clone <repository-url>
   cd idetik-react
   ```

2. Install dependencies:
   ```bash
   npm install
   ```

3. Build the library:
   ```bash
   npm run build
   ```


### Development

- **Start dev server**: `npm run dev`
- **Run tests**: `npm test`
- **Run tests with coverage**: `npm run test-with-coverage`
- **Lint code**: `npm run lint`
- **Format code**: `npm run format`
- **Check formatting**: `npm run format-check`

### Publishing

Releases are **automated** using semantic-release when PRs are merged to `main`. The version and changelog are automatically determined from commit messages.

#### Conventional Commits

All PR titles must follow the [Conventional Commits](https://www.conventionalcommits.org/) format:

```
<type>(<scope>): <description>

Examples:
- feat(slider): add new dimension slider component
- fix(viewer): resolve memory leak in image rendering
- docs: update installation instructions
```

**Types and Version Bumps:**
- `feat:` - New feature (minor version bump: 7.0.0 → 7.1.0)
- `fix:` - Bug fix (patch version bump: 7.0.0 → 7.0.1)
- `perf:` - Performance improvement (patch version bump)
- `refactor:` - Code refactoring (patch version bump)
- `docs:`, `style:`, `test:`, `build:`, `ci:`, `chore:` - No release

**Breaking Changes:**
Add `!` after type or include `BREAKING CHANGE:` in PR body for major version bump (7.0.0 → 8.0.0):
```
feat!: remove deprecated API
```

#### Manual Publishing (if needed)

If you need to publish manually:
```bash
npm install
npm run build
npm login
npm run pub
```

## Dependencies

This package depends on `@idetik/core` as both a peer dependency and dev dependency. Make sure your consuming application also has the core package installed.

## Project Structure

```
├── src/                    # Source code
│   ├── components/         # React components
│   │   ├── providers/      # Context providers
│   │   └── viewers/        # Viewer components (OmeZarrImageViewer, etc.)
│   └── hooks/              # Custom React hooks
├── examples/               # Example applications
├── test/                   # Test files
└── dist/                   # Built output (generated)
```
npm package: @idetik/react-prerelease
Description: idetik react components
Latest version: 6.3.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @idetik/react-prerelease

🚨 **This package is under active development.** Use at your own risk in production environments.

React components for interactive visualization of large datasets, built on the Idetik runtime.

## Getting Started

### Prerequisites

- Node.js v20.19.0 or later (required)
- npm

### Installation

1. Clone the repository:
   ```bash
   git clone <repository-url>
   cd idetik-react
   ```

2. Install dependencies:
   ```bash
   npm install
   ```

3. Build the library:
   ```bash
   npm run build
   ```

   **Note**: The build currently has TypeScript errors related to features from `@idetik/core-prerelease` that are not yet in the published version. The library builds successfully, but TypeScript compilation fails. These errors will be resolved when the core package is updated.

### Development

- **Start dev server**: `npm run dev`
- **Run tests**: `npm test`
- **Run tests with coverage**: `npm run test-with-coverage`
- **Lint code**: `npm run lint`
- **Format code**: `npm run format`
- **Check formatting**: `npm run format-check`

### Publishing

Releases are **automated** using semantic-release when PRs are merged to `main`. The version and changelog are automatically determined from commit messages.

#### Conventional Commits

All PR titles must follow the [Conventional Commits](https://www.conventionalcommits.org/) format:

```
<type>(<scope>): <description>

Examples:
- feat(slider): add new dimension slider component
- fix(viewer): resolve memory leak in image rendering
- docs: update installation instructions
```

**Types and Version Bumps:**
- `feat:` - New feature (minor version bump: 7.0.0 → 7.1.0)
- `fix:` - Bug fix (patch version bump: 7.0.0 → 7.0.1)
- `perf:` - Performance improvement (patch version bump)
- `refactor:` - Code refactoring (patch version bump)
- `docs:`, `style:`, `test:`, `build:`, `ci:`, `chore:` - No release

**Breaking Changes:**
Add `!` after type or include `BREAKING CHANGE:` in PR body for major version bump (7.0.0 → 8.0.0):
```
feat!: remove deprecated API
```

#### Manual Publishing (if needed)

If you need to publish manually:
```bash
npm install
npm run build
npm login
npm run pub
```

## Dependencies

This package depends on `@idetik/core-prerelease` as both a peer dependency and dev dependency. Make sure your consuming application also has the core package installed.

## Project Structure

```
├── src/                    # Source code
│   ├── components/         # React components
│   │   ├── providers/      # Context providers
│   │   └── viewers/        # Viewer components (OmeZarrImageViewer, etc.)
│   └── hooks/              # Custom React hooks
├── examples/               # Example applications
├── test/                   # Test files
└── dist/                   # Built output (generated)
```