open-index/open-npm huggingface dataset:
npm package: @10stars/eslint-config
Description: 10stars.io TypeScript-ESLint Styleguide - ESLint Shareable Config
Author: 10stars.io
Latest version: 6.0.0

# @10stars/eslint-config

## An ESLint [Shareable Config](http://eslint.org/docs/developer-guide/shareable-configs)

## Install

- Not intended for global installation
- Use it as part of your project's `devDependencies`

### Add VS Code extension - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

## Usage

Shareable configs are designed to work with the `extends` feature of `rc` files.
You can learn more about
[Shareable Configs](http://eslint.org/docs/developer-guide/shareable-configs) on the
official ESLint website.
npm package: @10stars/wyw-esbuild
Description: The package contains WyW-in-JS plugin for [esbuild](https://esbuild.github.io/).
Latest version: 0.9.0

# @wyw-in-js/esbuild

The package contains WyW-in-JS plugin for [esbuild](https://esbuild.github.io/).

## Installation

```shell
# npm
npm i -D @wyw-in-js/esbuild
# yarn
yarn add --dev @wyw-in-js/esbuild
# pnpm
pnpm add -D @wyw-in-js/esbuild
```

## Usage

```js
import wyw from '@wyw-in-js/esbuild';
import esbuild from 'esbuild';

const isProduction = process.env.NODE_ENV === 'production';

esbuild
  .build({
    entryPoints: ['src/index.ts'],
    outdir: 'dist',
    bundle: true,
    minify: isProduction,
    plugins: [wyw({ sourceMap: isProduction })],
  })
  .catch(() => process.exit(1));
```

To get details about supported options by the plugin, please check [documentation](https://wyw-in-js.dev/bundlers/esbuild).
npm package: @10stars/wyw-vite
Description: The package contains WyW-in-JS plugin for [Vite](https://vitejs.dev/).
Latest version: 0.9.0

# @wyw-in-js/vite

The package contains WyW-in-JS plugin for [Vite](https://vitejs.dev/).

## Installation

```shell
# npm
npm i -D @wyw-in-js/vite
# yarn
yarn add --dev @wyw-in-js/vite
# pnpm
pnpm add -D @wyw-in-js/vite
```

## Usage

After installation, add the plugin to your `vite.config.js`:

```js
import { defineConfig } from 'vite';
import wyw from '@wyw-in-js/vite';

export default defineConfig({
  // ...
  plugins: [wyw()],
});
```

To get details about supported options by the plugin, please check [documentation](https://wyw-in-js.dev/bundlers/vite).
npm package: @10stars/wyw-webpack-loader
Description: The package contains WyW-in-JS loader for [Webpack](https://webpack.js.org/).
Latest version: 0.9.0

# @wyw-in-js/webpack

The package contains WyW-in-JS loader for [Webpack](https://webpack.js.org/).

## Installation

```shell
# npm
npm i -D @wyw-in-js/webpack-loader
# yarn
yarn add --dev @wyw-in-js/webpack-loader
# pnpm
pnpm add -D @wyw-in-js/webpack-loader
```

## Usage

To use the loader with Webpack, please add `@wyw-in-js/webpack-loader` under `module.rules`:

```js
module.exports = {
  test: /\.js$/,
  use: [
    {
      loader: '@wyw-in-js/webpack-loader',
      options: {
        sourceMap: process.env.NODE_ENV !== 'production',
      },
    },
  ],
};
```

To get details about supported options by the plugin, please check [documentation](https://wyw-in-js.dev/bundlers/webpack).
npm package: @10up/animate
Description: A lightweight utility animation library from 10up
Author: 10up
Latest version: 2.0.0

# 10up Animate

10up Animate is a small utility animation library. It consists of a
series of CSS classes that can be combined or used in isolation to bring small
elements of motion into a UI.



[View official documentation for this package](https://baseline.10up.com/component/animate)

## Installation

`npm install @10up/animate --save`

## Usage

#### CSS Imports

`@import url("@10up/animate");`

The standard import from the NPM package will bring in all the animations. If
you want to choose the animations to bring in you can do so manually by
referencing the CSS files directly.

### CSS

 The styles can be imported into your existing codebase by using PostCSS imports, or by including the standalone CSS file in your project.

## Demo

Example implementations at: https://baseline.10up.com/component/animate/

## Support Level

**Active:** 10up is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress.  Bug reports, feature requests, questions, and pull requests are welcome.

## Like what you see?

<a href="http://10up.com/contact/"><img src="https://10up.com/uploads/2016/10/10up-Github-Banner.png" width="850" alt="10up"></a>
npm package: @10up/component-accordion
Description: Accessible accordion component.
Author: 10up
Latest version: 2.0.1

# 10up Accordion component

[View official documentation for this package](https://baseline.10up.com/component/accordion)

## Installation

`npm install --save @10up/component-accordion`

## Usage

#### CSS Imports

`@import url("@10up/component-accordion");`

The styles can be imported into your existing codebase by using PostCSS imports, or by including the standalone CSS file in your project.

#### JavaScript

Create a new instance by supplying the selector to use for the accordion and an object containing any necessary callback functions.

```javascript
import Accordion from '@10up/component-accordion';

new Accordion( '.accordion', {
	onCreate: function() {
		console.log( 'onCreate callback' );
	},
	onOpen: function( { link, content, heading } ) {
		console.log( 'onOpen callback' );
	},
	onClose: function( { link, content, heading } ) {
		console.log( 'onClose callback' );
	},
	onToggle: function( { link, content, heading } ) {
		console.log( 'onToggle callback' );
	}
} );
```

## Demo

Example implementations at: https://baseline.10up.com/component/accordion/

## Support Level

**Active:** 10up is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress.  Bug reports, feature requests, questions, and pull requests are welcome.

## Like what you see?

<a href="http://10up.com/contact/"><img src="https://10up.com/uploads/2016/10/10up-Github-Banner.png" width="850"></a>
npm package: @10up/frontity-build-config
Description: 10up's frontity build customizations
Latest version: 2.1.0

 @10up/frontity-webpack-config

> This package extends frontity default webpack and babel config

[![Support Level](https://img.shields.io/badge/support-active-green.svg)](#support-level)

## Requirements
- @frontity/core >= 1.14.0

## Installation

To install this package you will need an existing frontity project. Check out the [frontity docs](https://docs.frontity.org/getting-started/quick-start-guide) for instructions.

Install this package:

```
npm install @10upfrontity-build-config --save
```

Then in your `frontitiy.settings.[js|ts]` add the package in the `packages` section.

```js
packages: [
    '@10upfrontity-build-config',
]
```

## Settings

This package accepts a `publicPath` setting in case you're building frontity with a different public path for your assets.

```js
{
    name: '@10upfrontity-build-config',
    state: {
        TenUpBuildConfig: {
            publicPath: '/custom-public-path'
        }
    }
}
```

The the css is compiled to `/build/[publicPath]/css/index.css` and automatically included in the header.

## Features

### Global Sass and PostCSS

Just import the sass or postcss files anywhere and they will automatically be loaded on the page.


```js
import '../assets/index.scss';
import '../assets/index.css';
```

```css
/* assets/index.css */
a {
    color: blue !important;
}
/* assets/index.scss */
header {
    h1.heading-size-1 {
        color: pink;
    }
}
```

### CSS Modules

```js
import styles from './index.module.css';

const App = () => {
    return (
        <div className={styles.mainContent}></div>
    );
}
```

```css
/* index.module.css */
.mainContent {
    min-height: calc(100vh - 190px);
}
``` 

### HMR

Hot Module Reload works out of the box.
npm package: @10up/fueled-brand-tailwind-presets
Description: Tailwind CSS preset based on the Fueled.com brand design system
Author: Fueled
Latest version: 0.3.0

# Fueled Brand Tailwind Presets

A Tailwind CSS preset based on the [Fueled.com](https://fueled.com) design system (theme tokens, utilities, and base styles).

## Requirements

- Tailwind CSS `>=3.4`

This preset expects these Tailwind plugins to be available (they are declared as peer deps):

- `tailwindcss-animate`
- `@tailwindcss/typography`

## Install

```bash
npm install -D fueled-brand-tailwind-presets tailwindcss-animate @tailwindcss/typography
```

## Usage

### Tailwind config

TypeScript / ESM:

```ts
import type { Config } from "tailwindcss";
import fueledPreset from "fueled-brand-tailwind-presets";

const config = {
  presets: [fueledPreset],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "./modules/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
} satisfies Config;

export default config;
```

### CSS

If your app already has a `globals.css` that just contains Tailwind directives, **you can keep it exactly like this**:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Optional: if you want to use the preset’s bundled `globals.css` (it includes the Tailwind directives + some extra layered CSS), make your `globals.css` just import it:

```css
@import "fueled-brand-tailwind-presets/globals.css";
```

## Notes

- **Dark mode**: the preset uses Tailwind’s `class` strategy. The default CSS variables are dark; wrap content in `.light` to opt into light variables.
- **Fonts**: Aeonik is referenced, but fonts are not bundled. Load it yourself or rely on the fallbacks.
- **Source of truth**: token values and utilities live in `globals.css` and `index.js`.
npm package: @10up/next-redis-cache-provider
Description: Redis cache provider for Next.js
Author: 10up
Latest version: 2.0.0


# @10up/next-redis-cache-provider

A drop-in replacement for Next.js Incremental Cache Handler to replace File System cache with Redis.

### How to use

Install the package: 

```bash
npm install --save @10up/next-redis-cache-provider
```

Add it to `next.config.js`:

```js
const { withHeadstarWPConfig } = require('@headstartwp/next/config');

/**
 * Update whatever you need within the nextConfig object.
 *
 * @type {import('next').NextConfig}
 */
const nextConfig = {
	eslint: {
		ignoreDuringBuilds: true,
	},
};


if (process.env.NEXT_REDIS_URL || process.env.VIP_REDIS_PRIMARY) {
	// eslint-disable-next-line global-require
	const { initRedisClient } = require('@10up/next-redis-cache-provider');
	initRedisClient();
	nextConfig.experimental = {
		incrementalCacheHandlerPath: require.resolve('@10up/next-redis-cache-provider'),
	};
}

module.exports = withHeadstarWPConfig(nextConfig);
```

Then add the `NEXT_REDIS_URL` to your `.env` file.

For more information read the full documentation.
## Support Level

**Active:** 10up is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress.  Bug reports, feature requests, questions, and pull requests are welcome.

## Changelog

A complete listing of all notable changes to 10up's Headless Framework are documented in CHANGELOG.md files within the [core](https://github.com/10up/headstartwp/blob/develop/packages/core/CHANGELOG.md), [hooks](https://github.com/10up/headstartwp/blob/develop/packages/hooks/CHANGELOG.md), and [next](https://github.com/10up/headstartwp/blob/develop/packages/next/CHANGELOG.md) packages.

## Repository Structure and Engineering Guidelines

Visit the [CONTRIBUTING](/CONTRIBUTING.md) page for initial contribution and engineering guidance.

This repository is a monorepo, under the `packages` there are all the tools that are published to npm. The `projects` directory is a collection of test projects linked to the tools in `packages` and is used for testing purposes.

## Like what you see?

<a href="http://10up.com/contact/"><img src="https://10up.com/uploads/2016/10/10up-Github-Banner.png" width="850" alt="10up" /></a>
npm package: @10x-roofing/ui-components
Description: Reusable UI components for 10X Roofing applications
Author: 10X Roofing Team
Latest version: 1.1.0

# 10X Roofing UI Components

A reusable React component library built for the 10X Roofing ecosystem, featuring glass morphism design patterns, dashboard components, and comprehensive form elements.

## Installation

```bash
npm install @10x-roofing/ui-components
```

## Quick Start

```tsx
import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  Heading,
  Text,
  StatusBar,
  DataTable
} from '@10x-roofing/ui-components';

function MyDashboard() {
  return (
    <Card variant="default">
      <CardHeader>
        <CardTitle>Sales Dashboard</CardTitle>
      </CardHeader>
      <CardContent>
        <Heading size="h4">Performance Metrics</Heading>
        <StatusBar percentage={85} />
        <Button variant="primary">View Details</Button>
      </CardContent>
    </Card>
  );
}
```

## Components

### Layout Components
- **Card** - Glass morphism cards with variants: `default`, `simple`, `subtle`, `flat`
- **LoadingAnimation** - Loading spinners and skeleton states

### Form Components
- **Button** - Multiple variants: `primary`, `secondary`, `glass`, `tab`, `outline`, `icon`
- **Select** - Dropdown selectors with search and loading states
- **SearchInput** - Debounced search with clear functionality
- **FilterDropdown** - Filter dropdowns with icons and counts

### Data Components
- **DataTable** - Complete table with search, filtering, sorting, and pagination
- **StatusBar** - KPI progress bars with automatic color coding
- **TrendIndicator** - Trend arrows showing positive/negative/neutral states

### Typography
- **Heading** - Semantic headings: `hero`, `display`, `h1-h5`
- **Text** - Body text: `body-lg`, `body`, `body-sm`, `caption`, `tiny`

## Styling

This package uses Tailwind CSS and includes:
- Glass morphism effects (`glass-elevated`, `glass-subtle`)
- Brand gradient backgrounds (`brand-gradient`)
- KPI color system (auto-colored based on percentages)
- Typography scale matching dashboard patterns

## Usage in Different Applications

### React/Next.js Applications
```tsx
import { Button, Card } from '@10x-roofing/ui-components';
```

### TypeScript Support
All components are fully typed with TypeScript interfaces.

### Customization
Components use CSS classes that can be extended:
```tsx
<Button variant="primary" className="my-custom-styles">
  Custom Button
</Button>
```

## Design System

- **Colors**: Automatic KPI coloring (green >80%, amber 60-80%, orange 40-60%, red <40%)
- **Spacing**: 4px-based spacing system
- **Animations**: Swift (100ms) and smooth (240ms) transitions
- **Typography**: Montserrat font family with proper line heights

## Examples

See `TestUIComponents.tsx` for comprehensive examples of all components in action.

## Development

Built with:
- React 18+ 
- TypeScript
- Tailwind CSS
- Framer Motion (for animations)

Perfect for sales dashboards, admin panels, data visualization tools, and any application needing professional glass morphism UI components.
npm package: @10xdevs/ogee
Description: CLI to boot a Next.js app, capture a full-page screenshot with agent-browser, and save it as an OG image.
Latest version: 0.1.5

# @10xdevs/ogee

Generate a clean Open Graph image for a Next.js app with one command.

`@10xdevs/ogee` is a focused CLI that:

1. starts your app with `npm run dev` when needed
2. reuses an already running app when the target port is live
3. captures a production-ready OG image with `agent-browser`
4. writes the result to `app/opengraph-image.png`

## Why

Open Graph images are repetitive setup work. `ogee` is meant to remove that friction for Next.js projects and give you a solid default path:

- fixed output path: `app/opengraph-image.png`
- fixed OG size: `1200x630`
- PNG output for best image quality
- no prompts for save path or aspect ratio

## Usage

```bash
npx @10xdevs/ogee
```

If your app is already running on another port:

```bash
npx @10xdevs/ogee --port 3001
```

## What It Does

When you run `ogee`, it:

1. checks whether your app is already reachable
2. starts `npm run dev` if it is not
3. waits for the app to load
4. opens the app in `agent-browser`
5. captures the OG image
6. saves it to `app/opengraph-image.png`

## Options

```bash
--port <port>          Use a different local port
--url <url>            Use a specific app URL
--wait <ms>            Wait a bit longer before capture
--keep-server          Leave the dev server running after capture
```

Examples:

```bash
npx @10xdevs/ogee --wait 3000
npx @10xdevs/ogee --keep-server
npx @10xdevs/ogee --port 3001
```

## Requirements

- Node.js 20+
- a Next.js app with `npm run dev`
- `npx` available in your environment

## Output

`ogee` always writes the generated image to:

```bash
app/opengraph-image.png
```

That matches the standard Next.js App Router OG image location.

## Publish

```bash
npm publish --access public
```
npm package: @10xjs/polyfill-analyzer
Description: Analyze a javascript file to determine which polyfills are necessary to run it. Designed for use with financial-times/polyfill-library.
Author: Neal Granger
Latest version: 0.1.0

# @10xjs/polyfill-analyzer

> Analyze a javascript file to determine which polyfills are necessary to run it. Designed for use with [`polyfill-library`](https://github.com/Financial-Times/polyfill-library).

## Usage

Polyfill analyzer statically analyzes a string of javascript and returns an array of polyfill feature names compatible with with [`polyfill-library`](https://github.com/Financial-Times/polyfill-library).

```js
import fs from 'fs';
import {analyze} from '@10xjs/polyfill-analyzer';

const features = analyze({
  source: s.readFileSync('./bundle.js', 'utf-8'),
  // `include` is a list of feature names to detect. Without a value provided,
  // `analyze` will default to detecting all possible features (using
  // `polyfillLibrary.listAllPolyfills()`). If you know your browser support 
  // target, `include` should be provided as the list of only the polyfills
  // possibly needed for the targeted browsers.
  include: [
    'Symbol',
    'Symbol.toStringTag',
    'Symbol.iterator',
    'Array.from',
    'Object.entries',
    'Array.prototype.findIndex',
    'Object.keys',
    'Object.getOwnPropertyDescriptor',
    'Object.getOwnPropertyDescriptors',
  ],
  // Configure the behavior when an an entry in the `include` array is not a
  // detectable polyfill. (Not all features listed by
  // polyfillLibrary.listAllPolyfills()` can be detected.)
  // Allowed values are "ignore", "warn", and "error";
  unsupportedPolyfill: 'ignore',
});

// Returns an array of feature names which can be used to generate a custom
// polyfill bundle using `polyfillLibrary.getPolyfillString()`.

// [
//   'Symbol',
//   'Symbol.toStringTag',
//   'Array.from',
//   'Object.keys',
//   'Object.getOwnPropertyDescriptor',
//   'Object.getOwnPropertyDescriptors',
// ]
```

## API

### `analyze(options)`
Get a list of polyfills necessary for running a string of javascript.

- `@param {string} [options.source]` Javascript source code.
- `@param {string[]} [options.include]` List of polyfills (from polyfill-library) to detect. Defaults to all detectable polyfills.
- `@param {string[]} [options.exclude=[]]` List of polyfills to ignore. The exclude list has precedence over the include list.
- `@param {"ignore"|"warn"|"error"} [options.unsupportedPolyfill="error"]` Specify the behavior when an included unsupported polyfill is encountered in the `options.include` list.
npm package: @10xly/strict-equals
Description: Strict equal.
Author: 10xly
Latest version: 1.0.1

# strict equality
usage:
```js
const areStrictlyEqual = require("@10xly/strict-equals")
console.log(areStrictlyEqual(3, 3)) // true

console.log(areStrictlyEqual(3, 4)) // false
```
ponyfill for `===`
npm package: @10xminds/scrollable-date-picker
Description: A scrollable datepicker designed for touch screen interfaces with Svelte.
Latest version: 0.2.5

# Scrollable Date Picker for Svelte

A scrollable datepicker designed for touch screen interfaces with Svelte.

### Installation:

Add the package to your dependencies

NPM:

```bash
    npm install @10xminds/scrollable-date-picker

```

Yarn:

```bash
    yarn add @10xminds/scrollable-date-picker
```

```svelte
<script>
    import { ScrollableDatePicker } from "@10xminds/scrollable-date-picker";

    <ScrollableDatePicker
        selectedDate="2023-01-23"
        rowsShown={3}
        separatorWidth={4}
        rowBackgroundColor="#03FFFF"
    />
```

## TODO: Add more documentation with options

# Development Instructions

Instal dependencies with

```bash
npm install
```

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.

## Building

To build your library:

```bash
npm run package
```

To create a production version of your showcase app:

```bash
npm run build
```

## Publishing

To publish the library to [npm](https://www.npmjs.com):

```bash
npm publish
```
npm package: @10yun/cv-js-utils
Description: 常用 js-utils 工具类库
Author: 10yun
Latest version: 0.3.39
Deprecated: false

# cv-js-utils

- js 常用工具类函数

##  文档

- [中文文档] [http://cvjs.cn/cv-js-utils/](http://cvjs.cn/cv-js-utils/#readme)