open-index/open-npm huggingface dataset:
npm package: @shimyshack/calendar
Description: This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Latest version: 0.0.21

# Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
npm package: @shimyshack/uid
Description: An SSR-friendly Vue directive that generates a unique ID for elements.
Latest version: 0.1.9

# vue-uid

An SSR-friendly Vue directive that generates a unique ID for elements.

## Quick Start

Install `@shimyshack/uid`:

```bash
npm install @shimyshack/uid --save

# or yarn
# yarn add @shimyshack/uid
```

## Register Directive

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import { Uid, UidPlugin } from '@shimyshack/uid'

createApp(App)
  .use(UidPlugin)
  // or .directive('uid', Uid)
  .mount('#app')
```

In Nuxt, create a plugin to take advantage of SSR-support:

```javascript
import { UidPlugin } from '@shimyshack/uid'

export default defineNuxtPlugin(({ vueApp }) => {
  vueApp.use(UidPlugin)
})
```

## Usage

You can now use the directive on any element in which you need to register a unique id.

### Single Element

```vue
<script setup lang="ts">
import { ref } from 'vue'
const input = ref<HTMLElement>()
</script>

<template>
  <div>
    <label :for="input?.id">Input label</label>
    <input v-uid ref="input" type="text">
  </div>
</template>
```

### Array of Elements

```vue
<script setup lang="ts">
import { ref } from 'vue'
const formInputRefs = ref<HTMLElement[]>([])
const form_fields = [
  { label: 'Field 1', name: 'field_1' },
  { label: 'Field 2', name: 'field_2' },
]
</script>

<template>
  <div v-for="(field, index) in form_fields">
    <label :for="formInputRefs[index]?.id">
      {{ field.label }}
    </label>
    <input v-uid ref="formInputRefs" :name="field.name" />
  </div>
</template>
```

This will work on both server and client re-hydration.

## Contributors

This was inspired by the work of Daniel Roe on [`vue-bind-once`](https://github.com/danielroe/vue-bind-once), but simplified to fit my needs.

For more advanced use cases, I suggest you check out his work.

## License

MIT License - Copyright &copy; Jason Shimkoski
npm package: @shin-chan/kypes
Description: Type definitions for the `kintone` namespace
Author: Shintaro Nagata
Latest version: 0.0.7

# kypes

Type definitions for the `kintone` namespace

## Install

```console
npm install --save-dev @shin-chan/kypes
```

## Usage

```ts
// index.ts
import "@shin-chan/kypes";

// Write your customization codes by TypeScript!
```

## Disclaimer

This OSS is my own personal work and does not have any relationship with Cybozu Inc. or any other organization which I belong to.

## License

kypes is [MIT Licensed](LICENSE)
npm package: @shin-chan/kypes-rest
Description: Type definitions for the Kintone REST APIs
Author: Shintaro Nagata
Latest version: 0.0.4

# kypes-rest

Type definitions for the Kintone REST APIs.

## Install

```console
npm install --save-dev @shin-chan/kypes-rest
```

## Usage

```ts
import { KintoneApi } from "@shin-chan/kypes-rest";

const recordJsonParam: KintoneApi.RecordsJson["GET"]["request"] = {
  app: 1,
  fields: ["Date", "Title" /* ... */],
};

const response = await kintone.api(
  "/k/v1/records.json",
  "GET",
  recordJsonParam
);

/* ... */
```

## Disclaimer

This OSS is my own personal work and does not have any relationship with Cybozu Inc. or any other organization which I belong to.

## License

kypes-rest is [MIT Licensed](LICENSE)
npm package: @shin0602/react-table
Description: ## Install ```sh yarn add @shin0602/react-table ``` OR ```sh npm -i @shin0602/react-table ```
Author: shin0602
Latest version: 1.0.9

# React Table 

## Install
```sh
yarn add @shin0602/react-table
```
OR
```sh
npm -i @shin0602/react-table
```




## Preview

![react_table](https://user-images.githubusercontent.com/6999412/184323564-a70d3b2e-bfde-46bc-bede-50cbcb836ba2.gif)







### Example
```tsx
import React from 'react'
import TableView from '@shin0602/react-table'

const sampleDatas = [
  {
    id: 1,
    name: 'John Doe',
    age: 32,
    address: {
      postalCode: '12345',
      city: 'New York',
    },
  },
  ...
]


function App() {
  const [page, setPage] = React.useState(1)
  const limit = 5
  return (
    <TableView
      // customClassName='my-table' // if you want to use custom className
      data={sampleDatas}
      // data={[] as typeof sampleDatas}
      page={page}
      limit={limit}
      minWidth={960} // minWidth (px)
      minHeight={'10rem'}
      maxHeight={'10rem'}
      onChangePage={async (page) => setPage(page)}
      columns={{ // display columns
        id: {
          label: 'ID', // display label
          width: 100,  // optional display width (px)
          // align: 'right', // optional display align (left, right, center)
          // render: (value: data[index], index: number, row) => <div>{value}</div>, // optional display render function
        },
        name: {
          label: 'Name',
        },
        age: {
          label: 'Age',
          align: 'right',
        },
        // dot path is supported
        'address.postalCode': {
          label: 'Address',
            render: (_value, _i,row) => (
              <div>
                <p>{row.address.postalCode}</p>
                <p>{row.address.city}</p>
              </div>
            ),
        },
      }}
    />
  )
}

```
### Custom Styles

```stylesheet
// <TableView 
// customClassName='my-table' // class name

.my-table-header {
  background-color: #555;
  color: #fff;
}

.my-table-body {
  background-color: #f3f3f3;
}

.my-table-row {
  background-color: #f9f9f9;
  border: 1px solid gray;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
}

.my-table-row:hover {
  background-color: #fafafa;
}

.my-table-colum:hover {
  background-color: #fff;
}

.my-table-footer {
  background-color: #f3f3f3;
}

.my-table-page-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid;
  border-color: color-2;
  transition: all 0.2s ease-in-out;
}
```
npm package: @shin_dev/gcsm
Description: GCのsecretmanagerをnodeでアクセスするモジュール
Latest version: 1.0.3

# プロジェクト

GCのsecretmanagerをnodeでアクセスするモジュール

### 概要

既存のGoのパッケージ( https://github.com/days365/gcpsm )のnodeバージョンを作成

### 使用技術、環境

```mermaid
flowchart LR
A([local]) -->  l(localのjsonファイル, local.jsonなど)
B([local以外]) --> d(local以外はsecretmanagerをみる)
subgraph GCP
subgraph SecretManager
d
end
end
```

```sh
node: ^22.13.4
ts-node: ^10.9.2
typescript: ^5.7.3

# 必要なパッケージ
@google-cloud/secret-manager: ^5.6.0
```

### インストール

```
npm install @shin_dev/gcsm
```

### サンプルコード

- 事前用意するもの

  - 環境変数
    > localの場合
    >
    > APP_ENV=local
  - `${appEnv}`.json
    > appEnvには環境変数で定義した値が入る
    >
    > 例)
    > local.json
  - config.json

- `${appEnv}`.json

  secretmanagerから取得したい対象の情報をjsonで定義

```json
{
  "secret_manager": {
    "name": "name", # 対象のsecretID
    "version": "latest", # 取得したいversion
    "project_id": "project_id" # 対象のプロジェクトID
  }
}
```

- config.json

  localの場合はここからデータを取得する

```json
{
  "db": {
    "host": "localhost",
    "password": "root",
    "user": "root",
    "name": "sample"
  }
}
```

- サンプル(src/example/example.js)

サンプルでは、local環境はlocalに置いてある`config.json`を取得し、
local以外のとき、secretmanagerをみるようにしている。その際、`${appEnv}.json`の形式でファイルを用意しておき、
環境変数によって対象のjsonファイルを分けるようにした。

1. 環境変数(APP_ENV)がlocalであれば、isFileはtrue、local以外であれば、falseを返す
2. `isFile`によってlocalから取得するか、secretmanagerから取得するかを分岐
   - local : `config.json`から取得する
   - local以外 : `${appEnv}.json`からアクセスに必要な情報を取得し、secretmanagerから取得する

```ts
import { SecretConfig, newSecret } from '..'
import * as fs from 'fs'
;(async () => {
  try {
    const appEnv: string = process.env.APP_ENV ? process.env.APP_ENV : 'local'
    let isFile: boolean = false
    let conf: SecretConfig = {
      Version: '',
      ProjectID: '',
      Name: '',
      IsFile: true,
      File: 'config.json',
    }

    switch (appEnv) {
      case 'local':
        isFile = true
        break
      default:
        const file = fs.readFileSync(`${appEnv}.json`, 'utf-8')
        const jsonData = JSON.parse(file)
        conf = {
          Version: jsonData.secret_manager.version,
          ProjectID: jsonData.secret_manager.project_id,
          Name: jsonData.secret_manager.name,
          IsFile: isFile,
          File: 'config.json',
        }
    }

    const s: SecretConfig = {
      Version: conf.Version,
      ProjectID: conf.ProjectID,
      Name: conf.Name,
      IsFile: conf.IsFile,
      File: conf.File,
    }

    const secret = await newSecret(s, conf)
    console.log('Secret:', secret)
  } catch (err) {
    console.error(err)
  }
})()
```

### 検証、本番環境について

- 実行方法

**事前に`local.json`と`config.json`を作成する必要あり**

localのjsonファイルからデータを取得する

```
make local/get
```

secretmanagerからデータを取得する

```
make dev/get
```
npm package: @shinabr2/react-admin-date-inputs
Description: react-admin-date-inputs
Author: vascofg
Latest version: 3.1.30

# Please read first

Read [this github issue](https://github.com/vascofg/react-admin-date-inputs/issues/42) first to understand that everything I did was just publishing this module.

# react-admin-date-inputs

\<DateInput>, \<TimeInput>, \<DateTimeInput> \<KeyboardDateInput/>, \<KeyboardDateTimeInput/> and <KeyboardTimeInput/> components for [React-Admin](https://github.com/marmelab/react-admin).

![date-time-picker.gif](date-time-picker.gif)

## Installation

```
npm install @shinabr2/react-admin-date-inputs --save
```

## Usage

You have to include an icon font to display the icons on the picker. This is mentioned on the bottom of the [material-ui-pickers installation page](https://material-ui-pickers.firebaseapp.com/installation).

```html
// on index.html
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
```

```jsx
import React from 'react';
import { Edit, TextInput, TabbedForm, FormTab } from 'react-admin';
import {
  DateInput,
  TimeInput,
  DateTimeInput,
  KeyBoardDateInput
} from 'react-admin-date-inputs';

export const NewsEdit = (props) => (
  <Edit title={<NewsTitle />} {...props}>
    <TabbedForm>
      <FormTab>
        <LongTextInput source="title" validate={required} />
        <DateInput
          source="startDate"
          label="Start date"
          options={{ format: 'DD/MM/YYYY' }}
        />
        <TimeInput
          source="startTime"
          label="Start time"
          options={{ format: 'HH:mm:ss' }}
        />
        <DateTimeInput
          source="endDate"
          label="End time"
          options={{
            format: 'DD/MM/YYYY, HH:mm:ss',
            ampm: false,
            clearable: true
          }}
        />
      </FormTab>
    </TabbedForm>
  </Edit>
);
```

## Options prop

The options prop is passed down to the pickers. Documentation for these options can be found in the [material-ui-pickers documentation](https://material-ui-pickers.firebaseapp.com/demo/datepicker) for the component you're trying to use.

## providerOptions prop

If you want to use a date parser utils library other than `date-fns` or you want a locale other than english, you can pass the `providerOptions` prop:

```jsx
import DateFnsUtils from '@date-io/date-fns';
import MomentUtils from 'material-ui-pickers/utils/moment-utils';
import frLocale from "date-fns/locale/fr";

...
<DateInput source="date" label="Date using moment" providerOptions={{ utils: MomentUtils }} />
<DateInput source="date" label="Date in French!" providerOptions={{ utils: DateFnsUtils, locale: frLocale }} />
```

**NOTE:** When specifying a locale you must also specify the utils, even if it's the default `DateFnsUtils`.

## Development

You can build sources:

```
npm run build
```

## License

This library is licensed under the [MIT Licence](https://github.com/vascofg/react-admin-date-inputs/blob/master/LICENSE).
npm package: @shinabr2/react-material-daterange-picker
Description: A react date range picker using Material Design
Author: ShinaBR2
Latest version: 1.0.10

# react-daterange-picker 
A react date range picker using material-ui components.

<a href='https://www.npmjs.com/package/@shinabr2/react-material-daterange-picker'>
    <img src='https://img.shields.io/npm/v/@shinabr2/react-material-daterange-picker?logo=v1.0.0' alt='react-material-daterange-picker npm version'>
</a>

## <a href="https://shinabr2.github.io/react-material-daterange-picker/" target="_blank">Live Demo</a>




## Usage

```bash
npm install @shinabr2/react-material-daterange-picker --save
# or with yarn
yarn add @shinabr2/react-material-daterange-picker
```

## Basic Example
```tsx
import React from "react";
import { DateRangePicker, DateRange } from "@shinabr2/react-material-daterange-picker";

type Props = {}
type State = {
    open: boolean,
    dateRange: DateRange
}

class App extends React.Component<Props, State> {
  state = {
    open: true,
    dateRange: {}
  };
  
  render() {
    return (
      <DateRangePicker
        open={this.state.open}
        onChange={range => this.setState({ dateRange: range })}
      />
    );
  }
}

export default App;
```

## Basic example using hooks
```tsx
import React from "react";
import { DateRangePicker, DateRange } from "@shinabr2/react-material-daterange-picker";

type Props = {}

const App: React.FunctionComponent<Props> = props => {
  const [open, setOpen] = React.useState(false);
  const [dateRange, setDateRange] = React.useState<DateRange>({});

  return (
    <DateRangePicker
      open={open}
      onChange={range => setDateRange(range)}
    />
  );
}

export default App;
```

## Types 
```ts
interface DateRange {
    startDate?: Date,
    endDate?: Date
}

interface DefinedRange {
    label: string,
    startDate: Date,
    endDate: Date
}
```

## Props

Name | Type | Required | Default value | Description
:--- | :--- | :--- | :--- | :---
`initialDateRange` | `DateRange` | | `{}` | initially selected date range
`minDate` | `Date | string` | | 10 years ago | min date allowed in range
`maxDate` | `Date | string` | | 10 years from now | max date allowed in range
`onChange` | `(DateRange) => void` | _required_ | - | handler function for providing selected date range
`definedRanges` | `DefinedRange[]` | | - | custom defined ranges to show in the list
npm package: @shinagawa-web/gomarklint
Description: A fast, extensible Markdown linter written in Go
Latest version: 2.7.2

# gomarklint

[![npm](https://img.shields.io/npm/v/@shinagawa-web/gomarklint)](https://www.npmjs.com/package/@shinagawa-web/gomarklint)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/shinagawa-web/gomarklint/blob/main/LICENSE)

> A fast, opinionated Markdown linter. Built in Go, designed for CI.

- Catch broken links and headings before your docs ship.
- Enforce predictable structure (no more "why is this H4 under H2?").
- Output that's friendly for both humans and machines (JSON).
- Process **100,000+ lines in ~170ms** — fast enough for local dev, robust enough for CI.

## Installation

```sh
npm install -g @shinagawa-web/gomarklint
```

The postinstall script automatically downloads the correct binary for your platform.

### Supported platforms

| OS      | x64 | arm64 |
|---------|-----|-------|
| macOS   | o   | o     |
| Linux   | o   | o     |
| Windows | o   | o     |

## Usage

```sh
# Lint all Markdown files in current directory
gomarklint

# Lint specific files
gomarklint README.md docs/**/*.md

# Output as JSON
gomarklint --format json
```

## Documentation

Full documentation is available at **[shinagawa-web.github.io/gomarklint](https://shinagawa-web.github.io/gomarklint/)**

- [Quick Start](https://shinagawa-web.github.io/gomarklint/docs/quick-start/)
- [Rules](https://shinagawa-web.github.io/gomarklint/docs/rules/)
- [CLI Reference](https://shinagawa-web.github.io/gomarklint/docs/cli/)
- [Configuration](https://shinagawa-web.github.io/gomarklint/docs/configuration/)
- [GitHub Actions Integration](https://shinagawa-web.github.io/gomarklint/docs/github-actions/)

## Other installation methods

- **Shell:** `curl -fsSL https://raw.githubusercontent.com/shinagawa-web/gomarklint/main/install.sh | sh`
- **Homebrew:** `brew install shinagawa-web/tap/gomarklint`
- **Go:** `go install github.com/shinagawa-web/gomarklint@latest`
- **Binary:** Download from [GitHub Releases](https://github.com/shinagawa-web/gomarklint/releases/latest)

## License

MIT License
npm package: @shindiogo/api
Description: Humanbox Core
Author: Diogo Marcelo
Latest version: 1.1.1

Este boilerplate servirá de Core a todas os serviços em NodeJS utilizando framework NESTJS

## Installation

Para implementar este código corra o seguinte comando num projeto NestJS

```bash
npm install -s @shindiogo/api
```

## Variáveis ambiente

### Authentication

```
USE_AUTH=false
AUTH_SERVER=https://identity.humanbox.pt
AUTH_JWKS_URL=https://identity.humanbox.pt/.well-known/openid-configuration/jwks
AUTH_CLIENT_ID=humanboxapp
AUTH_EXPIRATION_TIME=3600
AUTH_WHITELIST=::1
```

### TypeORM

```
USE_TYPEORM=true
*TYPEORM_TYPE=mariadb
*TYPEORM_HOST=xxx.humanbox.pt
*TYPEORM_USERNAME=root
*TYPEORM_PASSWORD=x
*TYPEORM_NAME=boilerplate
*TYPEORM_PORT=0000
TYPEORM_LOGGING=true
TYPEORM_MIGRATIONS_RUN=false
TYPEORM_MIGRATIONS=lib/app/migrations/**/*{.ts,.js}
TYPEORM_MIGRATIONSDIR=dist/app/migrations
```

### GraphQL

```
USE_GRAPHQL=true
*GRAPHQL_PLAYGROUND=true
*GRAPHQL_DEBUG=true
*GRAPHQL_SCHEMA_DIR=dist/app/schema/schema.gql
```

### Logger

```
USE_LOGGER=true
*LOGGER_CONSOLE=true
*LOGGER_FILE=true
*LOGGER_SUMOLOGIC=false
*LOGGER_SENTRY=true
*LOGGER_SENTRY_LEVEL=warn
*LOGGER_ENDPOINT=https://3df09....002fc425d588f@sentry.io/1870181
```

### Bull Queue

```
USE_BULL=true
BULL_QUEUE=
BULL_REDIS_HOST=
BULL_REDIS_PORT=
BULL_REDIS_PASSWORD=
```

### Minio

```
USE_MINIO=true
MINIO_ENDPOINT=storage.humanbox.pt
MINIO_PORT=443
MINIO_SSL=true
MINIO_ACCESSKEY=xxx
MINIO_SECRETKEY=xx
```

### Swagger

```
USE_SWAGGER=true
```