open-index/open-npm huggingface dataset:
npm package: @littlebadbad/global-component
Description: support some common global component api use react and mui5
Author: littlebadbad@qq.com
Latest version: 0.1.15

# global-component

- 基于react和mui5提供一些可供全局调用的组件接口，可自定义组件
- 可自定义拓展一些全局变量

## 使用

### 自定义全局变量
- 定义
```javascript
import {Global} from "global-component";

function Main({children}) {
    const {setExtend} = useContext(Global)
    useEffect(() => {
        const doSomething = () => {
            // doSomething...
        }
        const someVar = {
            // defineSomthing
        }
        setExtend({doSomething, someVar})
    }, [])
    return children
}
```
- 使用
```javascript
function Component(props) {
    const {extend} = useContext(Global)
    const {doSomething, someVar} = extend
    doSomething()
    return <></>
}

```

### 常用组件

```javascript
import Master, {Global} from "global-component";
import Button from "@mui/material/Button";

function App() {
    const {openTip} = useContext(Global)
    return <Button onClick={() => {
        openTip("好椰")
    }}>
        click
    </Button>
}

ReactDOM.render(
    <React.StrictMode>
        <Master>
            <App/>
        </Master>
    </React.StrictMode>
    ,
    document.getElementById('root')
);
```

![img.png](img/img.png)

默认使用 [mui5](https://github.com/mui/material-ui) 的相关组件，不继承自定义的mui theme，可自定义

```javascript
import Master, {GlobalTip} from "global-component";

function Tip(props: GlobalTip) {
    const {
        open,
        autoHideDuration,
        type,
        info,
        onClose//用于将open set为false的函数 无需定义，使用即可
    } = props
    return <div className={'tip'}>
        {open ? <>content here</> : ""}
        <input type={"button"} onClick={() => onClose()}>关闭</input>
    </div>
}

ReactDOM.render(
    <React.StrictMode>
        <Master Tip={Tip}>
            <App/>
        </Master>
    </React.StrictMode>
    ,
    document.getElementById('root')
);
```
npm package: @littlebigideas/sketchbook
Description: A lightweight React + Tailwind component library
Latest version: 0.0.3

# Sketchbook

A lightweight React + Tailwind component library for little big ideas.

## Installation

```bash
npm install @littlebigideas/sketchbook
```

## Usage

Import the components and styles in your app:

```jsx
import { Button, Card, Input } from '@littlebigideas/sketchbook'
import '@littlebigideas/sketchbook/styles'

function App() {
  return (
    <Card>
      <Button variant="primary">Click me!</Button>
      <Input label="Enter your name" />
    </Card>
  )
}
```

## Development

### Install dependencies
```bash
npm install
```

### Run Storybook for development
```bash
npm run storybook
```

### Build the library
```bash
npm run build
```

### Build Storybook for production
```bash
npm run build-storybook
```

## Components

- **Badge** - A status indicator component with multiple variants and sizes
- **Button** - A versatile button component with multiple variants and sizes
- **Card** - A container component with header and content sections
- **Input** - A form input component with label, error, and helper text support

## Storybook

View the component documentation and playground at [GitHub Pages](https://devgetlittlebigideas.github.io/sketchbook/) (after deployment).

## Publishing & Releases

### Automated Release Process (Recommended)

The package is automatically published to npm when you create a GitHub release.

**Steps:**
1. Update version in package.json:
   ```bash
   npm version patch  # For bug fixes (0.0.1 → 0.0.2)
   npm version minor  # For new features (0.0.2 → 0.1.0)
   npm version major  # For breaking changes (0.1.0 → 1.0.0)
   ```

2. Push changes with tags:
   ```bash
   git push origin main --tags
   ```

3. Create a GitHub release (this triggers auto-publish):
   ```bash
   # Using GitHub CLI
   gh release create v0.0.3 --title "Version 0.0.3" --notes "Description of changes"

   # Or via GitHub UI: Go to Releases → "Create a new release"
   ```

4. The GitHub Action will automatically build and publish to npm!

### Manual Publishing

If you need to publish manually:

1. First authenticate to npm:
   ```bash
   npm login
   ```

2. Update version, build and publish:
   ```bash
   npm version patch  # Update version
   npm publish --access public
   ```

### NPM Token Setup

For automated publishing, you need to add your npm token as a GitHub secret:

1. Create an npm access token at [npmjs.com](https://www.npmjs.com/settings/tokens)
2. In your GitHub repository, go to Settings → Secrets and variables → Actions
3. Add a new secret named `NPM_TOKEN` with your npm token as the value

## GitHub Pages Setup (Already Configured)

The Storybook is automatically deployed to GitHub Pages when you push to main.
View it at: https://devgetlittlebigideas.github.io/sketchbook/

## License

MIT
npm package: @littlebrainz/starwars-names
Description: egghead.io - How to Write an Open Source JavaScript Library (starwars-names - Get random Star Wars names)
Author: Stephen Turner
Latest version: 0.5.1

<!-- README.md -->


[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

# [egghead.io](https://egghead.io) - [How to Write an Open Source JavaScript Library](https://egghead.io/series/how-to-write-an-open-source-javascript-library)

This is the project from [Kent C. Dodds](https://github.com/kentcdodds)' brilliant tutorial on how to write an open source JavaScript library.

## starwars-names

Get random Star Wars names.