open-index/open-npm huggingface dataset:
npm package: @staffline/components
Description: A collection of Svelte components using tailwind.
Latest version: 0.7.0

# PeoplePlus Svelte Components

A set of opinionated Svelte components with a focus on accesibility, no JavaScript fallback, and
SvelteKit/SSR support. See the [showcase/docs here](https://peopleplus-components.pages.dev/).

## Test coverage

| Statements                                                                                                                                                         | Branches                                                                                                                                                       | Functions                                                                                                                                                        | Lines                                                                                                                                                    |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![Statements](https://img.shields.io/endpoint?style=flat&url=https://gist.githubusercontent.com/jamesbirtles/30db617e41d5bf83af5927c7c071bbeb/raw/statements.json) | ![Branches](https://img.shields.io/endpoint?style=flat&url=https://gist.githubusercontent.com/jamesbirtles/30db617e41d5bf83af5927c7c071bbeb/raw/branches.json) | ![Functions](https://img.shields.io/endpoint?style=flat&url=https://gist.githubusercontent.com/jamesbirtles/30db617e41d5bf83af5927c7c071bbeb/raw/functions.json) | ![Lines](https://img.shields.io/endpoint?style=flat&url=https://gist.githubusercontent.com/jamesbirtles/30db617e41d5bf83af5927c7c071bbeb/raw/lines.json) |

## Developing

```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 the library, everything inside `src/routes` is used to
showcase and document that library.

## Building

To build the library:

```bash
npm run package
```

To create a production version of the showcase app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

## Contributing

See our [Contribution Guidelines](./CONTRIBUTING.md).

## Publishing

Publishes to npm are done automatically on pushes to main where the package.json version has
changed. The docs/showcase are updated on pushed to main.
npm package: @stafflink-tech/baserow-web-frontend
Description: Baserow: open source no-code database web frontend.
Author: Bram Wiepjes
Latest version: 1.99.2

## Storybook ![image](https://avatars.githubusercontent.com/u/22632046?s=20&v=4)

Storybook is a tool that lets you browse and play with all the baserow reusable UI components.

### Start storybook

Run the following command in the web-frontend container
`yarn run storybook`

Storybook is available at `http://localhost:6006`
npm package: @stafftastic/v-calendar
Description: A calendar and date picker plugin for Vue.js.
Author: Nathan Reyes
Latest version: 4.0.0

# VCalendar Plugin for Vue 3

A calendar and date picker plugin for [Vue.js](https://vuejs.org).

[Vue.js](https://vuejs.org) 3.2+, [Popper.js](https://popper.js.org/docs/v2/) 2.0+ are required.

## Install Plugin

### NPM

```shell
npm install v-calendar@next @popperjs/core
```

### Yarn

```shell
yarn add v-calendar@next @popperjs/core
```

## Use Plugin

:warning: **As of `v3.0.0-alpha.7`, all installation methods require manual import of component styles. This is due to Vite build restrictions in libary mode.**

```js
import 'v-calendar/style.css';
```

### Method 1: Use Globally

```js
import VCalendar from 'v-calendar';
import 'v-calendar/style.css';

// Use plugin with optional defaults
app.use(VCalendar, {})
```

```html
<!-- MyComponent.vue -->
<template>
  <VCalendar />
  <VDatePicker v-model="date" />
</template>
```

### Method 2: Use Components Globally

```js
// main.js
import { setupCalendar, Calendar, DatePicker } from 'v-calendar';
import 'v-calendar/style.css';

// Use plugin defaults (optional)
app.use(setupCalendar, {})

// Use the components
app.component('VCalendar', Calendar)
app.component('VDatePicker', DatePicker)
```

```html
<!-- MyComponent.vue -->
<template>
  <VCalendar />
  <VDatePicker v-model="date" />
</template>
```

### Method 3: Use Components As Needed

```js
// main.js
import { setupCalendar } from 'v-calendar';

// Use calendar defaults (optional)
app.use(setupCalendar, {})
```

```vue
<!-- MyComponent.vue -->
<template>
  <Calendar />
  <DatePicker v-model="date">
</template>

<script>
import { Calendar, DatePicker } from 'v-calendar';
import 'v-calendar/style.css';

export default {
  components: {
    Calendar,
    DatePicker,
  },
  data() {
    return {
      date: new Date(),
    };
  },
}
</script>
```

## Source setup

Please follow below mentioned steps to clone and build this project:

### Clone the repo

```sh
git clone https://github.com/nathanreyes/v-calendar

# Move to directory
cd v-calendar
```

### Install dependencies

```sh
npm install
```

### Build library

```sh
# Types, ES, ESM, CommonJS, IIFE
npm run build
```

### Lint and fix files

```sh
npm run lint
```

### Test library

```sh
# Types, ES, ESM, CommonJS, IIFE
npm run test
```
npm package: @stafihub/react-components
Description: This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
Author: joe
Latest version: 2.0.6

# Getting Started with Create React App

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `yarn start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `yarn test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `yarn build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `yarn eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).
npm package: @stagas/fx
Description: fx is a powerful, elegant, data-oriented state management system.
Author: stagas
Latest version: 1.0.0

# fx

**fx** is a powerful, elegant, data-oriented state management system.

```ts
import { Fx } from 'stagas/fx'

// we declare component `Foo`.
function Foo() {
  // we use `Fx` as `_`
  using _ = Fx()

  // `info` holds our reactive data.
  const info = _({ bar: 'bar' })

  _.fx(() => {
    // when `bar` changes, this function will be called.
    const { bar } = info

    // we end our observation here.
    _()

    // => prints (in sync): `bar`
    console.log(bar)
  })

  // we return the component instance.
  return { info }
}

// we create an instance of `Foo`.
const foo = Foo()

// => prints: `baz`
foo.info.bar = 'baz'

// `foo` will be disposed automagically by the higher order system(s) we use,
// but if we prefer to do it manually now, we call:
foo.dispose()
```

# Install

Add `github:stagas/fx` to your `package.json` dependencies.

```sh
npm install @stagas/fx
```

# License

MIT
npm package: @stagas/jest-node-exports-resolver
Description: Jest resolver to handle node's 'exports' package entry points.
Author: Gleb Kochergin
Latest version: 1.1.5-require-basedir-2

# Custom Jest resolver with node exports package entry points support

This package aims to bring [node exports package entry points](https://nodejs.org/api/packages.html#packages_package_entry_points) support to [Jest](https://github.com/facebook/jest), i.e.:
```javascript
// some.test.js
import { Foo } from 'my-package/submodule';
import { Bar } from '@my-scope/package/submodule';
// ...
```

This is heavily discussed in the following [issue #9771](https://github.com/facebook/jest/issues/9771).
Several alternatives proposed, such as
[using enhanced-resolve](https://github.com/facebook/jest/issues/9771#issuecomment-841624042),
[writing own resolver based on firebase-jest-testing resolver](https://github.com/facebook/jest/issues/9771#issuecomment-677759334),
[using custom resolver written for esfx](https://github.com/facebook/jest/issues/9771#issuecomment-838867473).

This package is a slightly generalized version of the [firebase-jest-testing self-resolver](https://github.com/akauppi/firebase-jest-testing/blob/0.0.3-beta.4/sample/hack-jest/self-resolver.cjs):
- test import path for referencing submodule (including `@scoped/` packages);
- try to load that package's `package.json`;
- check for `exports` field, try to find 'node', 'require' or 'default' (in case of `type !== 'module'`) condition;
- reuse `defaultResolver` with updated target.

### Usage

Install:
```shell
yarn add jest-node-exports-resolver -D
```

Add custom resolver [jest config option](https://jestjs.io/docs/configuration#resolver-string):
```javascript
// jest.config.js
module.exports = {
    // ...
    resolver: 'jest-node-exports-resolver',
}

```

### Known limitations

Node.js supports two flavours of 'exports':
- conditions list: when all the entries contain keywords ('import', 'require', 'node' etc.);
- entry points list: when all the entries contain submodule paths ('.', './submodule-a', './submodule-b/*' etc.).

Only the latter one is supported. Feel free to send a PR with conditions list support.
npm package: @stagas/sucrase-jest-plugin
Description: Fork - Jest plugin for Sucrase
Author: stagas
Latest version: 2.2.0-fork

# Sucrase Jest plugin

[![npm version](https://badge.fury.io/js/@sucrase%2Fjest-plugin.svg)](https://www.npmjs.com/package/@sucrase/jest-plugin)
[![MIT License](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](LICENSE)

This is a simple Jest plugin that makes it easy to use
[Sucrase](https://github.com/alangpierce/sucrase) when running Jest tests.

## Usage

First install the package as a dev dependency:
```
yarn add --dev @sucrase/jest-plugin
```

Then change the default transform in jest.config.js file:
```
  ...
  transform: { "\\.(js|jsx|ts|tsx)$": "@sucrase/jest-plugin" },
  ...
```

Passing options to the transformer:
```
module.exports = {
  ...
  transform: {
    "\\.(js|jsx|ts|tsx)$": [
      "@sucrase/jest-plugin",
      { jsxPragma: "h", jsxFragment: "Fragment" }
    ],
  ...
}
```
npm package: @stagas/terminal-screenshot
Description: Render terminal ANSI output into images!
Author: stagas
Latest version: 1.0.1

# terminal-screenshot

Render terminal ANSI output into images!

Under the hood, it uses [XTerm.js](https://www.npmjs.com/package/xterm) to render the terminal output to html, and [Puppeteer](https://www.npmjs.com/package/puppeteer) to capture a screenshot of the page.

## Usage (API)

```ts
import {renderScreenshot} from "terminal-screenshot";

const image = await renderScreenshot({
  data: "[[DATA]]", // Data to be render to the terminal.
  margin: 0, // Margin to leave around the terminal area in pixels. (default: 0)
  fontFamily: "Monaco", // Font family to use in terminal output. (default: Monaco)
  backgroundColor: "black", // Background color of the terminal. (default: black)
  type: "png", // Type of the screenshot to be generated. (default: png)
});

await fs.writeFile(destination, image);
```

## Usage (CLI)

```bash
# Render command output
$(command) | terminal-screenshot --output screenshot.png

# Render ANSI string
terminal-screenshot --output screenshot.png --data "[[DATA]]"

# Print help options
terminal-screenshot --help
```

## CLI Options

```
  -d, --data [string]                Data to be render to the terminal.
  -m --margin [number]               Margin to leave around the terminal area in pixels. (default: 0)
  -f --font-family [string]          Font family to use in terminal output. (default: Monaco)
  -b --background-color [css-color]  Background color of the terminal. (default: black)
  -t --type [png|jpeg]               Type of the screenshot to be generated. (default: png)
  -o --output [path]                 Output path to save the screenshot to.
  -h, --help                         display usage help.
```

## Examples

```bash
npx cfonts $'   terminal\nscreenshot' -g red,blue | terminal-screenshot --output foo.png
```

![foo](https://user-images.githubusercontent.com/15987992/118482566-c1245e80-b6c9-11eb-8c01-1e524dd0d7a3.png)

```bash
node ./plot-graph.js | terminal-screenshot --output foo.png
```

![foo](https://user-images.githubusercontent.com/15987992/118481223-15c6da00-b6c8-11eb-88f6-26ea878a09d4.png)

## Testing

You can also combine this library with the [jest-image-snapshot](https://www.npmjs.com/package/jest-image-snapshot) library to assert screenshots as snapshots in your Jest tests:

```ts
it("can render screenshots", async () => {
  const image = await renderScreenshot({data});
  expect(image).toMatchImageSnapshot();
});
```

## Support

Please use [GitHub Issues](https://github.com/OmarTawfik/terminal-screenshot/issues) to report any issues, or ask questions.
npm package: @stagas/vele
Description: elegant virtual dom
Author: stagas
Latest version: 1.0.0

<h1 align="center">vele</h1>

<p align="center">
elegant virtual dom
</p>

<p align="center">
   <a href="#install">        🔧 <strong>Install</strong></a>
 · <a href="#example">        🧩 <strong>Example</strong></a>
 · <a href="#api">            📜 <strong>API docs</strong></a>
 · <a href="https://github.com/stagas/vele/releases"> 🔥 <strong>Releases</strong></a>
 · <a href="#contribute">     💪🏼 <strong>Contribute</strong></a>
 · <a href="https://github.com/stagas/vele/issues">   🖐️ <strong>Help</strong></a>
</p>

***

## Install

```sh
$ npm i @stagas/vele
```

WIP don't use

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

#### Table of Contents

*   [useHook](#usehook)

### useHook

[src/render.ts:251-251](https://github.com/stagas/vele/blob/314cb1b1e28cbeee2f615cac21ae7d85e5b05514/src/render.ts#L251-L251 "Source code on GitHub")

Returns a callback that will trigger
a rerender on the current component.

```tsx
let clicked = 0
const Foo = () => <>
  {clicked++}
  <button onclick={useHook()}>click me</button>
</>
```

Returns **any** The hook callback

## Contribute

[Fork](https://github.com/stagas/vele/fork) or
[edit](https://github.dev/stagas/vele) and submit a PR.

All contributions are welcome!

## License

MIT © 2022
[stagas](https://github.com/stagas)
npm package: @stage-flux/browser
Description: Browser API for StageFlux
Author: StageFlux
Latest version: 1.0.3

# StageFlux Browser API

Please register for an account to use StageFlux at https://www.stageflux.com.

## Install

> npm i --save @stage-flux/browser

## Init

```typescript
import { init } from '@stage-flux/browser';

async function myCode() {
  const stageFluxAPI = await init('<YOUR SITE ID HERE>');
}
```

## Identify user

```typescript
stageFluxAPI.identify('<USER ID HERE>', { optionalTraits: 'here' });
```

## Set traits for user

- The user first has to be identified

```typescript
stageFluxAPI.traits({ optionalTraits: 'here' });
```

## Track event

- The user first has to be identified

```typescript
stageFluxAPI.event('<Event name>', { optionalProperties: 'here' });
```

## Track multiple events

- The user first has to be identified

```typescript
stageFluxAPI.events([
  { name: '<Event name>', properties: { optionalProperties: 'here' } },
  { name: '<Event name 2>' },
]);
```

## Track page

- The user first has to be identified
- StageFlux will automatically track page history changes if not explicitly disabled

```typescript
stageFluxAPI.page('<Page name>', '<Page category>');
```
npm package: @stage-lib/styled-system
Description: **Stage Styled System**
Latest version: 1.1.3

**Stage Styled System**

**Introduction:**

Welcome to Stage styled-system! This project offers a simplified yet powerful approach to styling React applications using styled-components and Styled System. With Stage styled-system, you can effortlessly apply consistent styles to your components with minimal setup.

**Features:**

- **Effortless Styling:** Leverage the power of styled-components and styled system without the need for extensive customization.
- **Customizable Styles:** Access a collection of predefined styles for common UI elements, allowing for easy customization to suit your project's needs.
- **Responsive Design:** Create responsive layouts effortlessly using the responsive style props provided by Styled System.
- **Panda-CSS Integration:** Seamlessly integrate with Panda-CSS for advanced theming and additional styling capabilities.
- **Developer Friendly:** Simple setup and intuitive APIs make it easy for developers of all levels to utilize Stage Styled System.

**Installation:**

To install Stage Styled System along with Panda-CSS, simply run:

```bash
pnpm install @stage-styled-system panda-css
# or
npm install @stage-styled-system panda-css
# or
yarn add @stage-styled-system panda-css
```

**Usage:**

```javascript
import React from 'react';
import { css } from '@stage-lib/styled-system/css';

const App = () => {
  return (
    <div>
      <p className={css({ fontSize: 'lg' })}> Welcome ! </p>
    <div>
  );
};

export default App;
```

**Contributing:**

We welcome contributions to Stage Styled System. If you find any issues or have suggestions for improvements, please feel free to open a pull request.

**License:**

This project is licensed under the MIT License. See the [LICENSE](https://github.com/Futhememe/stage-styled-system/blob/main/LICENSE) file for details.
npm package: @stage-ui/core
Description: Flexible UI components library declared by your own Design System.
Latest version: 0.7.67

# StageUI

Flexible UI components library declared by your own Design System.

[![npm install @stage-ui/core](https://img.shields.io/npm/v/@stage-ui/core?color=blue&label=Documentation&logo=visual-studio-code&style=for-the-badge)](https://stageui.shds.io)

## Install

```
yarn add @stage-ui/core
```

## Getting started

```
import React from 'react'
import { Viewport, Header } from '@stage-ui/core'

export default () => {
    return (
        <Viewport>
            <Header>Hello world!</Header>
        </Viewport>
    )
}
```

***
[MIT License](https://github.com/pt-one/StageUI/blob/master/LICENSE)
npm package: @stage-ui/icons
Description: Flexible UI components library declared by your own Design System.
Latest version: 0.7.67

# StageUI

Flexible UI components library declared by your own Design System.

[![npm install @stage-ui/core](https://img.shields.io/npm/v/@stage-ui/icons?color=blue&label=Documentation&logo=visual-studio-code&style=for-the-badge)](https://stageui.shds.io)

## How to install?

```
yarn add @stage-ui/icons
```

***
[MIT License](https://github.com/pt-one/StageUI/blob/master/LICENSE)
npm package: @stage-ui/lab
Description: Consistent React UI Framework declared by your own Design System.
Author: Dmitry Beltyukov, Ilya Tricoz
Latest version: 0.1.23

# [Flow UI](http://stageui.abr.tech)
Consistent React UI Framework declared by your own Design System. 

🧪External and developing components for Flow UI

## How to install?

```
yarn add @stage-ui/lab
```

***
[MIT License](https://github.com/stage-org/StageUI/blob/master/LICENSE)
npm package: @stage-ui/system
Description: Flexible UI components library declared by your own Design System.
Latest version: 0.7.67

# StageUI

Flexible UI components library declared by your own Design System.

Make styles for Stage UI Components

[![npm install @stage-ui/core](https://img.shields.io/npm/v/@stage-ui/system?color=blue&label=Documentation&logo=visual-studio-code&style=for-the-badge)](https://stageui.shds.io)

## How to install?

```
yarn add @stage-ui/system
```

***
[MIT License](https://github.com/pt-one/StageUI/blob/master/LICENSE)