open-index/open-npm huggingface dataset:
npm package: @sandypockets/components
Description: A React component library
Author: sandypockets
Latest version: 0.7.1

# @sandypockets/components

A React component library, still very much under development. As the library works towards a 1.0.0 release, there will likely be large stylistic and functional overhauls. Until then, this package is not suitable for production.

[![License: MIT](https://img.shields.io/npm/l/@sandypockets/components?color=1eb319)](LICENSE.md)
[![](https://img.shields.io/npm/v/@sandypockets/components?color=%231eb319)](https://www.npmjs.com/package/@sandypockets/components)
[![](https://img.shields.io/npm/dw/@sandypockets/components?label=npm%20downloads&color=%231eb319)](https://www.npmjs.com/package/@sandypockets/components)
[![](https://img.shields.io/badge/-buy_me_a%C2%A0coffee-gray?logo=buy-me-a-coffee)](https://www.buymeacoffee.com/sandypockets)

Each component is styled with its own CSS module, so you don't have to worry about collisions with your existing code. 

## Installation
Add the package to your project:

```shell
yarn add @sandypockets/components
```

## Usage
Once installed, import the package and use it like you would any other component.

```javascript
import { Button } from '@sandypockets/components'

export default function MyComponent() {
  
  return (
    <div>
      <Button theme="primary">
        Click me
      </Button>
    </div>
  )
}
```

<details>
<summary>View button props</summary>

| Attribute  | Prop Name          | Type     | Required | default   |
|------------|--------------------|----------|----------|-----------|
| aria-label | accessibilityLabel | string   | no       | null      |
| className  | theme              | string   | no       | "primary" |
| disabled   | disabled           | boolean  | no       | false     |
| style      | inlineStyle        | object   | no       | null      |
| type       | type               | string   | no       | "button"  |
| onClick    | onClickHandler     | function | no       | null      |
| onSubmit   | onSubmitHandler    | function | no       | null      |

</details>



## Current components
- Avatar
- Avatar group
- Badge
- Button
- Modal
- Text area

## Live demo
Check out the [demo on StackBlitz](https://stackblitz.com/edit/react-uyja8n?file=src/App.js)
npm package: @sane-shopify/types
Description: Common typescript typings for @sane-shopify projects
Author: Joseph Thomas
Latest version: 0.24.0

# `@sane-shopify/types`

<!-- toc -->
- [Reasoning](#reasoning)
- [Usage](#usage)

<!-- tocstop -->
This package is a Typescript typeRoot of typings of both common types throughout the @sane-shopify repo and external packages that otherwise have no types of their own.

Common types are exported in `types/index.ts`, and external packages are typed in `external/package-name/index.d.ts`.

This also includes all types from [@good-idea/unwind-edges](https://www.github.com/good-idea/unwind-edges).

## Reasoning

Some of the types are not in the main DefintelyTyped repository, while others are written by us.
We're using this package to increase velocity of updating types. Getting stuff into the main repo takes a week,
which is too slow for us at the current stage.

All of the types here are designed to not add any functionality except the one existing in the packages themselves

## Usage

Install this package.

```bash
yarn add --dev @sane-shopify/types
```

```ts
import { ShopifyClient } from '@sane-shopify/types'
```

To use the external typings, update your `tsconfig.json` to include additional type root.

```json
{
  {
  "compilerOptions": {
    "typeRoots": ["node_modules/@sane-shopify/types/external", "node_modules/@types"]
  }
}
```

Then, in your project:

```ts
import { SanityClient } from '@sanity/base'
```

(Setup adapted from [@joincivil/Civil/typescript-typings](https://github.com/joincivil/Civil/tree/master/packages/typescript-typings))
npm package: @sane-ts/base-shadcn
Description: Shadcn UI Package
Author: Valerii Petryniak
Latest version: 0.0.5

# Shadcn UI Package

Contains all shadcn-ui components and hooks in `src/components` and `src/hooks` which are regularly updated by `sync.bash` script.

## Install

You need to have [tailwind](https://tailwindcss.com) installed and configured.

```bash
pnpm add @sane-ts/base-shadcn tailwindcss
```

## Usage

Add these to your your tailwind css file:

```css
@import "tailwindcss";
@import "@sane-ts/base-shadcn/index.css";
@import "@sane-ts/base-shadcn/themes/zinc.css";
@source "../node_modules/@sane-ts/base-shadcn/src/**/*.js";
@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

Import and use components

```tsx
import { Button } from "@sane-ts/base-shadcn";
import { useState } from "react";

export function App() {
  const [count, setCount] = useState(0);
  const onClick = () => setCount((c) => c + 1);
  return <Button onClick={onClick} children={count} />;
}
```

Check out vite project [example](https://github.com/valerii15298/sane-cn-example)
npm package: @sane-ts/shadcn-ui
Description: Shadcn UI Package
Author: Valerii Petryniak
Latest version: 0.0.5

# Shadcn UI Package

Contains all shadcn-ui components and hooks in `src/components` and `src/hooks` which are regularly updated by `sync.bash` script.

## Install

You need to have [tailwind](https://tailwindcss.com) installed and configured.

```bash
pnpm add @sane-ts/shadcn-ui tailwindcss
```

## Usage

Add these to your your tailwind css file:

```css
@import "tailwindcss";
@import "@sane-ts/shadcn-ui/index.css";
@import "@sane-ts/shadcn-ui/themes/zinc.css";
@source "../node_modules/@sane-ts/shadcn-ui/src/**/*.js";
@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

Import and use components

```tsx
import { Button } from "@sane-ts/shadcn-ui";
import { useState } from "react";

export function App() {
  const [count, setCount] = useState(0);
  const onClick = () => setCount((c) => c + 1);
  return <Button onClick={onClick} children={count} />;
}
```

Check out vite project [example](https://github.com/valerii15298/sane-cn-example)
npm package: @sane/command
Description: Promisified api for shell commands and simple daemons
Author: Blair Strang
Latest version: 1.0.0

# @sane/command

Promisified api for shell commands and simple daemons.

Install
-------

```bash
npm install @sane/command --save
```

Example
-------

```javascript
import { cmd, Daemon } from '@sane/service';

async function main() {
  let repoUrl = 'https://github.com/bls/node-sane-command.git'
  await cmd(['git', 'clone', repoUrl]);
  let gitd = new Daemon(['git', 'daemon', '/tmp']);
  await gitd.start();
  //
  // Code requiring local git daemon goes here...
  // 
  await gitd.stop();
}

main()
```

Compatibility
-------------

* Requires Node >= v4.0.0

Release
-------

1. Bump up the version number in package.json
1. Add a section for the new release in CHANGELOG.md
1. Run prepublish and test npm scripts
1. Commit
1. Create a git tag for the new release and push it
1. Run npm publish
npm package: @sane/dns
Description: Promisified 'dns' API, for typescript.
Author: Blair Strang
Latest version: 1.0.0

# @sane/dns

Promisified 'dns' API, for typescript.

Just import it and use it like the regular 'dns' module.

Install
-------

```bash
npm install @sane/dns --save
```

Api
---

See [src/index.ts](src/index.ts) for a list of promisifed methods.

Example
-------

```javascript
import * as dns from '@sane/dns';

dns.reverseAsync('8.8.8.8')
    .then(() => {
        // ...
    });
```

Release
-------

1. Bump up the version number in package.json
1. Add a section for the new release in CHANGELOG.md
1. Run npm run-script compile to ensure it builds
1. Commit
1. Run npm publish
1. Create a git tag for the new release and push it
npm package: @sane/fs
Description: Promisified 'fs' API, for typescript.
Author: Blair Strang
Latest version: 1.0.4

# @sane/fs

Promisified 'fs' API, for TypeScript.

Just import it and use it like the regular 'fs' module.

Install
-------

```bash
npm install @sane/fs --save
```

Api
---

If `foo` gives you a callback, `fooAsync` will give you a promise. See [src/index.ts](src/index.ts)
for a list of promisifed methods.

Example
-------

```javascript
import * as fs from '@sane/fs';

await fs.unlinkAsync('/tmp/foo');
```


Compatibility
-------------

* Requires Node >= v4.0.0

Release
-------

1. Bump up the version number in package.json
1. Add a section for the new release in CHANGELOG.md
1. Run npm run prepublish to ensure it builds
1. Commit
1. Run npm publish
1. Create a git tag for the new release and push it
npm package: @sane/fsx
Description: Promisified TypeScript file-system extras
Author: Blair Strang
Latest version: 1.0.1

# @sane/fsx

Promisified TypeScript file-system extras.

Install
-------

```bash
npm install @sane/fsx --save
```

Api
---

Gotta read[src/index.ts](src/index.ts) for now.

Example
-------

```javascript
// TODO!
```

Compatibility
-------------

* Requires Node >= v0.4.0

Release
-------

1. Bump up the version number in package.json
1. Add a section for the new release in CHANGELOG.md
1. Run prepublish and test npm scripts
1. Commit
1. Create a git tag for the new release and push it
1. Run npm publish
npm package: @sane/promisify-listen
Description: Promisify network server bind & close.
Author: Blair Strang
Latest version: 1.0.1

# @sane/promisify-listen

Promisify network server listen & close.

Install
-------

```bash
npm install @sane/promisify-listen --save
```

Example
-------

```javascript
import { promisifyListen } from '@sane/promisify-listen';

let s = promisifyListen(http.createServer(...));
s.listenAsync(31337).then(() => {
    // ...
});
```

Release
-------

1. Bump up the version number in package.json
1. Add a section for the new release in CHANGELOG.md
1. Run npm run-script compile to ensure it builds
1. Commit
1. Run npm publish
1. Create a git tag for the new release and push it
npm package: @sane/service
Description: A service interface, for typescript.
Author: Blair Strang
Latest version: 1.0.2

# @sane/service

A service interface, for typescript.

Install
-------

```bash
npm install @sane/service --save
```

Example
-------

```javascript
import * as http from http;
import { Service, ServiceGroup } from '@sane/service';

let sg = new ServiceGroup([
    new Service(http.createServer(), { port: 31337 }),
    new Service(http.createServer(), { port: 31338 })
]);
await sg.start();
// Do stuff; both services are running now
```


Api
---

See [src/index.ts](src/index.ts). New services should implement
IService (just stop and start, no args, returning Promise<void>).

Compatibility
-------------

* Requires Node >= v4.0.0

Release
-------

1. Bump up the version number in package.json
1. Add a section for the new release in CHANGELOG.md
1. Run npm run prepublish to ensure it builds
1. Commit
1. Run npm publish
1. Create a git tag for the new release and push it
npm package: @sanedefaults/prettier-config
Description: Sane Default Prettier config
Author: Martin Meredith
Latest version: 1.0.0

# `@sane-defaults/prettier-config`

> A Sane default [Prettier](https://prettier.io) config.

## Usage

**Install**:

```bash
$ yarn add --dev @sane-defaults/prettier-config
```

**Edit `package.json`**:

```jsonc
{
  // ...
  "prettier": "@sane-defaults/prettier-config"
}
```
npm package: @saneef/observable-framework-utils
Description: Collection of tools and utilities to use with Observable Framework.
Author: Saneef Ansari
Latest version: 0.1.1

# Observable Framework Utils

Utilities and tools for [Observable Framework](https://observablehq.com/framework/).

## Usage

You can import the utility using `npm:` protocol.

```js
import { prettyTable } from "npm:@saneef/observable-framework-utils";

// Recommended to use with version
import { prettyTable } from "npm:@saneef/observable-framework-utils@0.0.3";
```

## Development

```
$ npm install
$ npm run dev # Start Observable Framework locale development server of documentation and testing pages
```
npm package: @saneksa/babel-plugin-function-transform
Description: ```js // babel.config.js
Author: Alexandr Petyaykin
Latest version: 1.0.0

```js
// babel.config.js

module.exports = {
  sourceType: "unambiguous",
  plugins: [
    "@saneksa/babel-plugin-function-transform",
    {
      fieldName: "intity",
      functionName: "execute",
    },
  ],
};
```
npm package: @saneksa/gql-query-transformer
Description: `gql-query-transformer` is a TypeScript library that converts GraphQL query strings into code using `GraphQlQuery` objects from the [@saneksa/graphql-query-builder](https://www.npmjs.com/package/@saneksa/graphql-query-builder) library. This library helps 
Author: Alexandr Petyaykin
Latest version: 1.2.0

# gql-query-transformer

`gql-query-transformer` is a TypeScript library that converts GraphQL query strings into code using `GraphQlQuery` objects from the [@saneksa/graphql-query-builder](https://www.npmjs.com/package/@saneksa/graphql-query-builder) library. This library helps you dynamically build GraphQL queries in a programmatic way, making it easier to manage and construct complex queries in your projects.

<a href="https://www.npmjs.com/package/@saneksa/gql-query-transformer">
    <img alt="npm" src="https://img.shields.io/npm/v/@saneksa/gql-query-transformer?style=for-the-badge">
</a>

## Installation

Install the library via npm:

```sh
npm install @saneksa/gql-query-transformer
```

## Usage

Here's how you can use the `gql-query-transformer` library in your project:

### Converting to GraphQlQuery Code

```ts
import { graphqlQueryToCode } from "@saneksa/gql-query-transformer";
import gql from "graphql-tag";

const query = gql`
  query GetHero {
    hero {
      name
      friends(first: 2) {
        totalCount
        edges {
          node {
            name
          }
          cursor
        }
        pageInfo {
          endCursor
          hasNextPage
        }
      }
    }
  }
`;

const code = graphqlQueryToCode(query);
console.log(code);
```

### Output

The above code will output the following TypeScript code, which uses GraphQlQuery objects:

```ts
new GraphQlQuery("hero").select(
  "name",
  new GraphQlQuery("friends", { first: 2 }).select(
    "totalCount",
    new GraphQlQuery("edges").select(
      new GraphQlQuery("node").select("name"),
      "cursor"
    ),
    new GraphQlQuery("pageInfo").select("endCursor", "hasNextPage")
  )
);
```

## API

`graphqlQueryToCode(query: string | DocumentNode): string`
Converts a GraphQL query string or DocumentNode into TypeScript code that constructs GraphQlQuery objects.

- `query`: The GraphQL query string or DocumentNode to convert.

## Contributing

Contributions are welcome! Feel free to open issues or submit pull requests on GitHub.

## License

This project is licensed under the MIT License.
npm package: @saneksa/graphql-query-builder
Description: a simple but powerful graphQL query builder
Author: Brian Shannon
Latest version: 3.1.1

# graphql-query-builder

a simple but powerful graphQL query builder

<a href="https://www.npmjs.com/package/@saneksa/graphql-query-builder">
    <img alt="npm" src="https://img.shields.io/npm/v/@saneksa/graphql-query-builder?style=for-the-badge">
</a>

# Install

`npm install @saneksa/graphql-query-builder`

`yarn add @saneksa/graphql-query-builder`

# Example

```js
import { GraphQlQuery } from "@saneksa/graphql-query-builder";

// example of nesting Querys
/*
{
 user( id:3500401 ) {
    id,
    nickname : name,
    isViewerFriend,

    image: profilePicture( size:50 ) {
        uri,
        width,
        height
    }
  }
}
*/

let profilePicture = new GraphQlQuery("profilePicture", { size: 50 }).select(
  "uri",
  "width",
  "height"
);

let user = new GraphQlQuery("user", { id: 3500401 }).select(
  "id",
  { nickname: "name" },
  "isViewerFriend",
  { image: profilePicture }
);

console.log("user", user.toString());
```
npm package: @saneksa/react-context-composer
Description: [![NPM](https://img.shields.io/npm/v/@saneksa/react-context-composer?style=plastic&color=red)](https://npmjs.com/package/@saneksa/react-context-composer/) [![GitHub license](https://img.shields.io/npm/l/@saneksa/react-context-composer?style=plastic)](http
Latest version: 2.2.0

[![NPM](https://img.shields.io/npm/v/@saneksa/react-context-composer?style=plastic&color=red)](https://npmjs.com/package/@saneksa/react-context-composer/) [![GitHub license](https://img.shields.io/npm/l/@saneksa/react-context-composer?style=plastic)](https://github.com/saneksa/react-context-composer/blob/main/LICENSE)

### Installation

```sh
yarn add @saneksa/react-context-composer
```

## The Problem

In projects on react there are a lot of contexts, it becomes very difficult to read such things

```jsx
<ContextA.Provider>
  <ContextB.Provider>
    <ContextC.Provider>...</ContextC.Provider>
  </ContextB.Provider>
</ContextA.Provider>
```

## Usage

See it in action at [codesandbox](https://codesandbox.io/p/sandbox/nostalgic-platform-z7dsrt)

```jsx
function App() {
  return composeContexts([
    [ThemeContext, theme[Theme.red]],
    [LanguageContext, Languages.cn],
  ])(
    <div>
      <Children />
      <br />
      ...child elements using contexts
    </div>
  );
}
```

In my proposed variant, the check of context value types works correctly
npm package: @saneksa/react-flex
Description: [![NPM](https://img.shields.io/npm/v/@saneksa/react-flex?style=plastic&color=red)](https://npmjs.com/package/@saneksa/react-flex/) [![GitHub license](https://img.shields.io/npm/l/@saneksa/react-flex?style=plastic)](https://github.com/saneksa/react-flex/bl
Author: Alexandr Petyaykin
Latest version: 2.0.3
npm package: @sanemat/generator-nm
Description: A Cross-Platform Node.js ES5 Module Generator For OS X, Linux And Windows.
Author: Sanemat
Latest version: 2.0.7

# generator-nm

[![NPM version][npm-image]][npm-url] [![Travis-CI Status][travis-image]][travis-url] [![Appveyor Status][appveyor-image]][appveyor-url] [![Daviddm Status][daviddm-image]][daviddm-url]

> Scaffold out a [node module](https://github.com/sindresorhus/node-module-boilerplate)

Optionally with a [CLI](http://en.wikipedia.org/wiki/Command-line_interface).

This is what I use for [my own modules](https://www.npmjs.com/~sanemat).

![](screenshot.png)

A Cross-Platform Node.js ES5 Module Generator For OS X, Linux And Windows.


## Install

```
$ npm install --global @sanemat/generator-nm
```


## Usage

With [yo](https://github.com/yeoman/yo):

```
$ yo @sanemat/nm
```


## Example

[Build example](./example).


## Tip

Use [chalk](https://github.com/sindresorhus/chalk) if you want colors in your CLI.


## Features

Currently, it uses :

* Lint
    * eslint
    * eclint - editorconfig
* CI
    * travis-ci - Test on Ubuntu
    * appveyor - Test on Windows
    * tachikoma - Dependency Update as a Service. http://tachikoma.io
* Test
    * mocha
    * power-assert
* Utility
    * fixpack - Sort package.json
    * conventional-changelog - Changelog
    * david - Dependency Update


## Changelog

[changelog.md](./changelog.md).


## License

### Forked @sanemat/generator-nm

MIT © [Sanemat](http://sane.jp)

### Original [generator-nm](https://github.com/sindresorhus/generator-nm)

MIT © [Sindre Sorhus](http://sindresorhus.com)


[travis-url]: https://travis-ci.org/pandawing/generator-nm
[travis-image]: https://img.shields.io/travis/pandawing/generator-nm/master.svg?style=flat-square&label=travis
[appveyor-url]: https://ci.appveyor.com/project/sanemat/generator-nm/branch/master
[appveyor-image]: https://img.shields.io/appveyor/ci/sanemat/generator-nm/master.svg?style=flat-square&label=appveyor
[npm-url]: https://npmjs.org/package/@sanemat/generator-nm
[npm-image]: https://img.shields.io/npm/v/@sanemat/generator-nm.svg?style=flat-square
[daviddm-url]: https://david-dm.org/pandawing/generator-nm
[daviddm-image]: https://img.shields.io/david/pandawing/generator-nm.svg?style=flat-square