open-index/open-npm huggingface dataset:
npm package: @ginpei/react-nice-markdown
Description: Markdown component with my flavor
Author: Ginpei Takanashi
Latest version: 0.4.0

# @ginpei/react-nice-markdown

## Install

```console
$ npm i @ginpei/react-nice-markdown
```

## Usage

```tsx
import NiceMarkdown from '@ginpei/react-nice-markdown';
```

```tsx
render () {
  const content = `
    # Hello World!

    This is a [React](http://reactjs.org/) component.
  `;
  return <NiceMarkdown content={content} />;
}
```
npm package: @ginreo/zip
Description: packaging archiver & yauzl for zip unzip.
Author: dingiyan
Latest version: 1.1.0

# zip

#### 介绍

封装简化 node 的压缩解压库，提供简洁 api

#### 软件架构

对 archiver 和 yauzl 库封装的，压缩解压库

#### 安装教程

```
npm i @ginreo/zip
```

#### 使用说明

-   zip

```ts
import { Ziper } from "@ginreo/zip";
const ziper = Ziper.init("./test.zip");
ziper.addFile("./package.json");
ziper.addFile("./tsconfig.json", "tsconfig2.json");
ziper.addFile("./.gitignore", ".gitignore");
await ziper.zip();
if (fs.existsSync("./test.zip")) {
}
```

-   unzip

```ts
import { Unziper, Ziper } from "@ginreo/zip";
const ziper = Ziper.init("./test2.zip");
ziper.addFile("./package.json");
ziper.addFile("./tsconfig.json", "tsconfig2.json");
await ziper.zip();
if (!fs.existsSync("./test2.zip")) {
	assert.fail(`create zip file fail`);
}
const unziper = Unziper.init("./test2.zip", "./test2");
await unziper.unzip();
if (fs.existsSync("./test2/package.json") && fs.existsSync("./test2/tsconfig2.json")) {
	assert.ok(true);
	// 清理测试文件
	fs.unlinkSync("./test2.zip");
	setTimeout(() => {
		fs.rmSync("./test2", { recursive: true, force: true });
	}, 10);

	return;
}
```

-   unzip extract one file

```ts
import { Unziper, Ziper } from "@ginreo/zip";
const ziper = Ziper.init("./test2.zip");
ziper.addFile("./package.json");
const ziper = Ziper.init("./test3.zip");
ziper.addFile("./package.json");
ziper.addFile("./tsconfig.json", "a/b/c/tsconfig2.json");
await ziper.zip();
if (!fs.existsSync("./test3.zip")) {
	assert.fail(`create zip file fail`);
}
const unziper = Unziper.init("./test3.zip", "./test3");

// 提取以config2.json结尾的文件 返回提取出的文件的路径
const unzipFilePath = await unziper.extractOne("config2.json");
// console.log(unzipFilePath);

if (fs.existsSync(unzipFilePath)) {
	assert.ok(true);
	// 清理测试文件
	fs.unlinkSync("./test3.zip");
	setTimeout(() => {
		fs.rmSync("./test3", { recursive: true, force: true });
	}, 10);

	return;
}
assert.fail(`unzip extract one file fail`);
```

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request
npm package: @ginseng/types
Description: Type definitions for Ginseng applications
Author: Ginseng Team
Latest version: 0.1.0

# @ginseng/types

Type definitions for Ginseng applications.

## Installation

```bash
npm install @ginseng/types
# or
yarn add @ginseng/types
# or
pnpm add @ginseng/types
```

## Usage

```typescript
import { User, UserRole, UserStatus } from '@ginseng/types';

// Use the types in your code
const user: User = {
  USER_ID: 'user123',
  PROFILE: 'USER',
  email: 'user@example.com',
  firstName: 'John',
  lastName: 'Doe',
  role: UserRole.PI,
  status: UserStatus.ACTIVE,
  createdAt: new Date().toISOString(),
  updatedAt: new Date().toISOString()
};
```

## Development

1. Install dependencies
```bash
pnpm install
```

2. Build the package
```bash
pnpm build
```

3. Run in development mode
```bash
pnpm dev
```

## Publishing

To publish a new version:

1. Update version in `package.json`
2. Run `pnpm publish`

## License

MIT
npm package: @ginterdev/endpoints
Description: Useful TypeScript types and utils for axios fetching
Latest version: 0.1.0-rc.2

# @ginterdev/endpoints

> Useful TypeScript types and utils for axios fetching

## Warning :warning:

**For now I am just experimenting.**

This package makes some assumptions:

- you are using **axios** (^0.21)

## Installation

```bash
yarn add @ginterdev/endpoints

# or

npm i @ginterdev/endpoints
```

## Examples

Let's define types for our API. For simplicity there's two endpoints only.

```ts
type Endpoints {
  'POST /companies': {
    body: {
      name: string;
    };
    response: {
      success: boolean;
    };
  };

  'GET /companies': {
    query?: {
      searchPhrase?: string;
    };
    response: {
      success: boolean,
      companies: {
        id: string;
        name: string;
      };
    };
  };

  'GET /company/{id}': {
    params: {
      id: string;
    };
    response: {
      success: boolean,
      company: {
        id: string;
        name: string;
      };
    };
  };
};
```

### Calling a request

To have all the typechecking in place for our endpoints we just wrap a fetcher (currently only `axios` instance is supported) with a `forEndpoints`. From now on we can execute requests with a guarantee that all required things are passed correctly.

```ts
import axios from 'axios';
import { forEndpoints } from '@ginterdev/endpoints';

const request = forEndpoints<Endpoints>(axios.create());

// execute a request:
request('GET /companies', {
  query: {
    searchPhrase: 'github',
  },
});

// URL params are automatically injected:
request('GET /companies/{id}', {
  params: {
    id: 'foobar',
  },
});
```

### Extracting types

Now we can easily extract types of specific properties for each endpoint:

<!-- prettier-ignore -->
```ts
import { EndpointOptions, EndpointProp } from '@ginterdev/endpoints';

type EndpointUrl = keyof Endpoints;

type Options<Url extends EndpointUrl> = EndpointOptions<Endpoints, Url>;
type Body<Url extends EndpointUrl> = EndpointProp<Endpoints, Url, 'body'>;
type Params<Url extends EndpointUrl> = EndpointProp<Endpoints, Url, 'params'>;
type Query<Url extends EndpointUrl> = EndpointProp<Endpoints, Url, 'query'>;
type Response<Url extends EndpointUrl> = EndpointProp<Endpoints, Url, 'response'>;

type CreateCompanyBody = Body<'POST /companies'>;
// { name: string }

type CreateCompanyResponse = Response<'POST /companies'>;
// { success: true }

type GetCompaniesQuery = Query<'GET /companies'>;
// { searchPhrase?: string }

type GetCompanyParams = Params<'GET /companies/{id}'>;
// { id: string }
```

<!-- prettier-ignore -->
npm package: @ginterdev/next-showcase
Description: Very simple and basic alternative for Storybook working on Next.js
Author: Jędrzej Ginter
Latest version: 0.1.0-rc.16

# @ginterdev/next-showcase

> Very simple and basic alternative for Storybook working on Next.js.

![Next Showcase Screenshot](./screenshot.png)

## Warning :warning:

1. **This tool is completely Next.js-based, so it cannot be used without it (for now).** It has potential for working with non-Next.js apps, though.
2. **For now I am just experimenting. I DO NOT recommend using it for anything that is not just having fun after hours.**
3. **If you have questions or proposals** use GitHub issues.

This package makes some assumptions:

- you are using **Next.js** (>= 9)
- you are using **Typescript** (>= 3.9)
- your pages directory is `process.cwd()/pages`

## Installation

```bash
yarn add --dev @ginterdev/next-showcase

# or

npm i -D @ginterdev/next-showcase
```

## Usage

### Step 1

Start your Next.js application in watch mode.

```bash
next dev -p 3000
```

### Step 2 (optional)

:warning: This has to be done ONLY if you have [custom `App` component](https://nextjs.org/docs/advanced-features/custom-app).

Wrap you custom `App` component with `withShowcase`. This will skip all specific stuff for your project implemented inside `getInitialProps` as well and your custom component. You don't want to render header or footer as part of showcase page.

```tsx
import { withShowcase } from '@ginterdev/next-showcase';

function App() {
  // Implementation ommitted.
  return ...;
}

export default withShowcase(App);
```

### Step 3

Create your first stories file inside `src` directory (relative to `process.cwd()`).

```tsx
import type { ShowcaseStories } from '@ginterdev/next-showcase';

// Import of `Button` is ommitted.

const stories: ShowcaseStories = {
  'My First Story': () => <Button />,
  'My Story With Dark Mode': {
    dark: true,
    Story: () => <Button />,
  },
};

// Default export is important.
export default stories;
```

### Step 4

Finally run a watch server that will automatically update the showcase page whenever you add or modify some `*.stories.tsx` files.

```bash
npx @ginterdev/next-showcase

# Now go to http://localhost:3000/_next-showcase 🚀
```

---

Make sure to add `pages/_next-showcase` to your `.gitignore`.

## Customizing

You can set your own pathname instead of default `/_next-showcase` by specifying a configuration option in `.ginterdevrc.js` file:

```js
// .ginterdevrc.js

module.exports = {
  'next-showcase': {
    entryDir: 'ui-kit',
  },
};
```

Now your stories will be accessible under `/ui-kit`.\
<small>(Notice that now you have to _gitignore_ `pages/ui-kit` instead of `pages/_next-showcase`).</small>
npm package: @ginterdev/toolkit
Description: Complete toolkit for setting up a new project with a single command
Author: Jedrzej Ginter
Latest version: 0.1.0-rc.12

# @ginterdev/toolkit

> Fully-featured toolkit for [my](https://github.com/jedrzejginter) projects. Includes CLI for generating complete project boilerplate.

![npm version](https://img.shields.io/npm/v/@ginterdev/toolkit.svg?style=flat-square)

## Installation

This library requires Node v12 or newer.

```console
npm add --save-exact @ginterdev/toolkit

# or

yarn add --exact @ginterdev/toolkit
```

## Usage

```console
npx @ginterdev/toolkit [options]
```

### Options

This CLI has some default features that will always be installed:

- ESLint (with config),
- Husky v4 (pre-commit hook),
- lint-staged (with config),
- Prettier (with config).

```bash
npx @ginterdev/toolkit

  # add Dockerfile and .dockerignore for building basic Node.js image
  --docker

  # install dependencies versions that don't support IE11 (like Tailwind v2)
  --drop-ie11

  # add 'jest' for testing
  --jest

  # add .github with workflow running basic checks (linters, type checking)
  --github-ci

  # specify exact node version to use for the project
  # notice, that <version> must be valid semver: <major>.<minor>.<patch>
  # when this option is not specified, default version will be used (12.20.1)
  --node <version>

  # use 'npm' instead of 'yarn' for commands
  --npm

  # add 'react' and 'react-dom' along with some basic components
  --react

  # add Next.js configuration
  # (notice that --react doesn't have to be specified because this option
  # indicates using of React)
  --nextjs

  # don't install dependencies as part of this CLI execution
  --skip-install

  # add Tailwind support
  # - creates config files
  # - add 'tailwindcss' as dependency
  --tailwind

  # add Typescript support
  --typescript

  # add simple .vscode directory with couple of settings
  --vscode
```

## Example usage

_Create project with Tailwind, Typescript and Next.js. Don't include Github Actions workflows or Docker support. Use Node v14._

```console
npx @ginterdev/toolkit --node 14.15.4 --tailwind --nextjs --typescript
```
npm package: @ginterdev/use-question
Description: React hook for user action confirmation based on promises.
Author: Jedrzej Ginter
Latest version: 0.1.0-rc.3

# @ginterdev/use-question

> React hook for user action confirmation based on promises.

## Installation

```bash
yarn add --dev @ginterdev/use-question

# or

npm i -D @ginterdev/use-question
```

## Usage

```tsx
import * as React from 'react';
import useQuestion from '@ginterdev/use-question';

function Component() {
  const { ask,...question } = useQuestion<{ message: string }>();

  const handleClick = React.useCallback(async () => {
    if (await ask({ message: 'Are you sure you want to do this?' })) {
      console.log('CONFIRMED ✅');
    } else {
      console.log('CANCELLED ❌');
    }
  }, [ask]);

  return (
    <>
      <button onClick={() => handleClick()}>Ask question</button>
      {question.isActive(question) && (
        <div>
          {question.data.message}
          <hr />
          <button onClick={() => question.onReject()}>CANCEL</button>
          <button onClick={() => question.onConfirm()}>CONFIRM</button>
        </div>
      )}
    </>
  );
}
```