open-index/open-npm huggingface dataset:
npm package: @gsq/vue-simple-datepicker
Description: A simple datepicker component and toast component based on vue
Author: “gusiqi”
Latest version: 1.0.0

# @gsq/vue-simple-datepicker

> A Vue.js project

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
```

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @gsquery/skills
Description: AI coding assistant context files for gas-sheets-query
Author: juhyeonni
Latest version: 0.9.0

# @gsquery/skills

AI coding assistant context files for [gas-sheets-query](https://github.com/juhyeonni/gas-sheets-query).

Provides skill/context files so AI tools (Claude Code, Cursor, Copilot, etc.) can write correct gsquery code with proper types, patterns, and anti-patterns.

## Install

### Claude Code (via openskills — recommended)

```bash
npx openskills install @gsquery/skills
```

This copies skill files to `.claude/skills/gsquery/` automatically.

### Claude Code (manual)

```bash
npx @gsquery/skills install --target claude
```

### Cursor

```bash
npx @gsquery/skills install --target cursor
```

### Other Tools

```bash
npx @gsquery/skills install --target generic
```

## What's Included

### Claude Code / openskills (6 files)

Installed to `.claude/skills/gsquery/`:

| File | Content |
|------|---------|
| `SKILL.md` | Setup, CRUD quick reference, query operators, anti-patterns |
| `references/crud-and-queries.md` | Full Repository & QueryBuilder API |
| `references/joins-and-aggregation.md` | JoinQueryBuilder, groupBy, agg |
| `references/adapters-and-config.md` | DataStore, MockAdapter, SheetsAdapter, Indexes |
| `references/migration-and-cli.md` | MigrationRunner, SchemaBuilder, CLI commands |
| `references/errors-and-viz.md` | Error hierarchy, Visualization API |

### Generic Format (6 files)

For Cursor (`.cursor/rules/`), Copilot, or any tool (`.ai/gsquery/`):

| File | Content |
|------|---------|
| `gsquery-cheatsheet.md` | Single-file complete reference |
| `gsquery-crud.md` | CRUD operations & queries |
| `gsquery-queries.md` | Joins & aggregation |
| `gsquery-config.md` | Adapters & configuration |
| `gsquery-advanced.md` | Migrations, CLI, client |
| `gsquery-errors.md` | Error handling & Viz API |

## CLI

```bash
# Install skill files (interactive)
npx @gsquery/skills install [--target claude|cursor|generic] [--dest <path>]

# Show package info
npx @gsquery/skills info
```

### Auto-Detection

| Detected | Target | Destination |
|----------|--------|-------------|
| `.claude/` exists | Claude Code | `.claude/skills/gsquery/` |
| `.cursor/` exists | Cursor | `.cursor/rules/` |
| Otherwise | Generic | `.ai/gsquery/` |

## Programmatic API

```ts
import {
  getSkillFiles,
  getClaudeSkillFiles,
  getGenericSkillFiles,
  detectTarget,
  getDefaultDest,
  SKILLS_DIR,
  CLAUDE_SKILLS_DIR,
  GENERIC_SKILLS_DIR,
} from '@gsquery/skills'
```

## License

MIT
npm package: @gsrai/cra-template
Description: A Template for Create React App using Typescript, Prettier, ESLint.
Author: Gagan Srai
Latest version: 1.0.0

# cra-template

This is my custom template for [Create React App](https://github.com/facebook/create-react-app).

To use this template, add `--template @gsrai/cra-template` when creating a new app.

For example:

```sh
npx create-react-app my-app --template @gsrai/cra-template

# or

yarn create react-app my-app --template @gsrai/cra-template
```

For more information, please refer to:

- [Getting Started](https://create-react-app.dev/docs/getting-started) – How to create a new app.
- [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped with Create React App.
- [Github Repo](https://github.com/gsrai/cra-template)

## TODO

- setup tailwind and styled-components
- have an example of a todo application, with `useReducer` and `useContext`
- add husky
- add storybook
npm package: @gsretail.com/gui-core
Description: A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook
Author: GSRetail
Latest version: 2.5.72

# Gsshop React UI Component Library

## Install @gsretail.com/gui-core

### 1. 필수 모듈 설치

> @gsretail.com/gui-core는 다음 모듈과 함께 설치합니다.

```
npm i @emotion/react @emotion/styled @mui/lab @mui/material date-fns mobx mobx-react node-sass@7.0.1 @gsretail.com/gui-core
```

## 사용법

> 최신 버젼의 @gsretail.com/gui-core는 React 17.0.2 와 @mui/material@5.X 기준으로 제작되어 업데이트 되고 있습니다.

### Material-UI 버젼별 @gsretail.com/gui-core 버전 정보

> 모든 버젼은 ReactJS 17.X 을 사용하고 있습니다.

- @gui/core v2.1.0 ----> ag-grid ---> toastUI
- @gui/core v2.0.86 ----> @gui/core 내부망 중단, @gsretail.com/gui-core 퍼블릭 배포
- @gui/core v1.4.0 <----> Air/gui 통합 ---> gui-v3 v2.0.0
- Material-Ui : 5.X <----> @gui/core 1.4.0 (방송 MSA 진행 전 최종 버전)
- Material-Ui : 5.X <----> @gui/core 1.3.1
- Material-Ui : 5.0.0-alpha.37 <---> @gui/core v1.2.337
- Material-Ui : 4.X <----> @gui/core v0.8.3

### 1. @gsretail.com/gui-core Theme 설정

> 프로젝트 생성을 `npx create-react-app project-name`으로 생성을 전제로 진행합니다.

src 밑에 `index.js`를 다음과 같이 변경합니다.

`index.css`는 `@gsretail.com/gui-core`에서 제공됩니다.

```
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { createGuiTheme } from '@gsretail.com/gui-core';
import '@gsretail.com/gui-core/build/index.css';

// 공통 테마 적용
const guiTheme = createGuiTheme();

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={guiTheme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

```

### 2. @gsretail.com/gui-core 사용 예제

다음은 `GuiButton`을 사용한 예제입니다.

```
import { GuiButton } from '@gsretail.com/gui-core';

function App() {

  return (
    <div className="App">
      <GuiButton label="Button" />
    </div>
  );
}

export default App;
```

더 많은 사용법은 [기간계 디자인 시스템](https://design.itgsshop.com/) 을 참고하여 주세요.

## 기간계 디자인 시스템 담당자

- 이민기(lee.mk@gsretail.com)
- special guest 김석중(kim.sj2@gsretail.com)
npm package: @gsretail.com/gui_core
Description: A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook
Author: gsretail
Latest version: 2.0.1

# Gsshop React UI Component Library

## Install @gsretail.com/gui_core

### 1. 필수 모듈 설치

> @gui/core는 다음 모듈과 함께 설치합니다.

```
npm i @emotion/react @emotion/styled @mui/material@5.0.6 @mui/lab node-sass@6.0.1 @gsretail.com/gui_core date-fns react-date-range @types/react-date-range
```

## 사용법 

> 최신 버젼의 @gui/core는 React 17.0.2 와 @mui/material@5.X 기준으로 제작되어 업데이트 되고 있습니다.

### Material-UI 버젼별 @gui/core 버전 정보

> 모든 버젼은 ReactJS 17.X 을 사용하고 있습니다.

- @gui/core 1.4.0 < ---- > Air/gui 통합 --> gui-v3 v2.0.0
- Material-Ui : 5.X < ---- > @gui/core 1.4.0(방송 MSA 진행 전 최종 버전)
- Material-Ui : 5.X < ---- > @gui/core 1.3.1
- Material-Ui : 5.0.0-alpha.37  < ---- > @gui/core 1.2.337
- Material-Ui : 4.X < ---- > @gui/core 0.8.3

### 1. @gui/core Theme 설정

> 프로젝트 생성을 ```npx create-react-app project-name```으로 생성을 전제로 진행합니다.

src 밑에 ```index.js```를 다음과 같이 변경합니다.

```index.css```는 ```@gui/core```에서 제공됩니다.

```
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { createGuiTheme } from '@gui/core';
import '@gui/core/build/index.css';

// 공통 테마 적용
const guiTheme = createGuiTheme();
  
ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={guiTheme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

```

### 2. @gui/core 사용 예제

다음은 ```GuiButton```을 사용한 예제입니다.

```
import { GuiButton } from '@gui/core';

function App() {

  return (
    <div className="App">
      <GuiButton label="Button" />
    </div>
  );
}

export default App;
```

더 많은 사용법은 [기간계 디자인 시스템](https://design.itgsshop.com/) 을 참고하여 주세요.

## 기간계 디자인 시스템 담당자

- 김헌기(kim.hk@gsretail.com)
- 이민기(lee.mk@gsretail.com)
- special guest 김석중(kim.sj2@gsretail.com)