open-index/open-npm huggingface dataset:
npm package: @ohsu-itg-risx/common
Description: Constructed from LinusBorg's Starter Profile: https://github.com/LinusBorg/create-vue-ts-eslint-airbnb-example
Latest version: 0.0.7

Constructed from LinusBorg's Starter Profile:
https://github.com/LinusBorg/create-vue-ts-eslint-airbnb-example

After startup, need to enable Volar's "Takeover Mode" and disable built-in typescript extension:

- Run Extensions: Show Built-in Extensions from VSCode's command palette
- Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
- Reload the VSCode window by running Developer: Reload Window from the command palette.

Sample UI Libraries:

- https://github.com/iSPA-io/ispa-element/blob/main/packages/badge/src/index.vue
  \*\* Uses Vue 3 and Tailwind, applys CSS classes in interesting way.
- https://github.com/quatrochan/Equal
- https://www.vue-tailwind.com/docs
- https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui
- https://github.com/oruga-ui/oruga/tree/develop/packages/oruga-next
- https://levelup.gitconnected.com/using-vite-to-publish-a-vue-component-to-npm-7043a56cfa00

typescript libraries referenced:

- https://github.com/sethidden/vue-tsc-component-library-example - this one worked
- https://jivancic.com/posts/build-a-component-library.html#typescript-declarations
- https://github.com/josip2312/typescript-lib-vite/blob/master/src/components/MyButton.vue

Steps for making a component:

- Make sure any props that are suppose to be dynamic are (e.g. if you change the size prop dynamically, make sure refs are set up to auto-adjust on the fly)
npm package: @ohto/bones
Description: This template should help get you started developing with Vue 3 in Vite.
Latest version: 0.0.30

# components

This template should help get you started developing with Vue 3 in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).

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

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.

## Customize configuration

See [Vite Configuration Reference](https://vite.dev/config/).

## Project Setup

```sh
pnpm install
```

### Compile and Hot-Reload for Development

```sh
pnpm dev
```

### Type-Check, Compile and Minify for Production

```sh
pnpm build
```

### Run Unit Tests with [Vitest](https://vitest.dev/)

```sh
pnpm test:unit
```

### Lint with [ESLint](https://eslint.org/)

```sh
pnpm lint
```

You can generate new component scaffolding with the generator like so:

```
pnpm component:build forms Label
```

You can tear it down like so:

```
pnpm component:destroy forms Label
```

By default, your config files will just export the base config, however, you can customise it by overwriting the exports:

Default Grid config

```ts
export * from '@ohto/bones/components/layout/Grid/Grid.base.config.ts'
```

Customised Grid config

```ts
import { EXPOSE as BaseExpose } from '@ohto/bones/components/layout/Grid/Grid.base.config.ts'
import type { TCustomGridProps } from '@ohto/bones/components/layout/Grid/Grid.base.config.ts'
export * from '@ohto/bones/components/layout/Grid/Grid.base.config.ts'

export const EXPOSE: (keyof TCustomGridProps)[] = [...BaseExpose]
```

Breakpoint props can be used like so:

`Input.map.ts`

```ts
import type { TWithBreakpoints } from '@ohto/bones/types/breakpoints.types.ts'

export type TInputProps = HTMLInputElementProps & {
  component?: string
  variant?: 'small' | 'large' | TWithBreakpoints<'small' | 'large'>
}
```

`Input.base.config.ts`

```ts
import type { TInputProps } from '@ohto/bones/components/forms/Input/Input.map.ts'
export type TCustomInputProps = TInputProps & {}

export const DEFAULTS = {} as const satisfies Partial<TCustomInputProps>

export const EXPOSE: (keyof TCustomInputProps)[] = ['variant']
```