open-index/open-npm huggingface dataset:
npm package: @gongyy123/story_ui
Description: React components library
Author: Viking Zhang
Latest version: 0.1.5

### 创建项目文档	
    1.npx create-react-app my-app --template typescript => npm run start => 项目创建成功
	2.npx -p @storybook/cli sb init --type react_scripts(告诉storybook安装react相关依赖) => npm run storybook =>storybook引入成功 
	3.引入antd并支持less
		npm install antd --save => import { Button } from 'antd'; import { ButtonProps } from 'antd/lib/button';
		=>引入antd组件并能成功将其属性转换到自己定义的属性上
		=>npm install less less-loader -save-dev => 遇到问题引入less文件失败 => 经查发现是less-loader版本过高 
		=> 将less-loader从最新10.x版本降为^7.3.0 | npm install less-loader@^7.3.0
		=> 引入less文件成功 
	4.可自定义切换主题颜色：https://ant.design/docs/react/use-with-create-react-app-cn （自定义配置主题颜色）
		在.storybook/main.js中配置webpack相关内容
	5.引入@storybook/addinfo，并在main.js中配置preview.js中进行全局配置，通过注释生成文档
		未实现：将antd中的参数也自动生成到文档中
npm package: @gongzza/vue-property-decorator
Description: property decorators for Vue Component
Author: kaorun343
Latest version: 6.0.0

# Vue Property Decorator

[![npm](https://img.shields.io/npm/v/@gongzza/vue-property-decorator.svg)](https://www.npmjs.com/package/@gongzza/vue-property-decorator)

This library fully depends on [vue-class-component](https://github.com/vuejs/vue-class-component).

## License

MIT License

## Install

```bash
npm i -S @gongzza/vue-property-decorator
```

## Usage

There are 7 decorators:

* `@Emit`
* `@Inject`
* `@Model`
* `@Prop`
* `@Provide`
* `@Watch`
* `@Component` (**exported from** `vue-class-component`)

```typescript
import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

const s = Symbol('baz')

@Component
export class MyComponent extends Vue {

  @Emit()
  addToCount(n: number){ this.count += n }

  @Emit('reset')
  resetCount(){ this.count = 0 }

  @Inject foo: string
  @Inject('bar') bar: string
  @Inject(s) baz: string

  @Model('change') checked: boolean

  @Prop
  propA: number

  @Prop('default value')
  propB: string

  @Prop([String, Boolean])
  propC: string | boolean

  @Prop({ type: null })
  propD: any

  @Provide foo = 'foo'
  @Provide('bar') baz = 'bar'

  @Watch('child')
  onChildChanged(val: string, oldVal: string) { }

  @Watch('person', { immediate: true, deep: true })
  onPersonChanged(val: Person, oldVal: Person) { }
}

```

is equivalent to

```js
const s = Symbol('baz')

export const MyComponent = Vue.extend({
  name: 'MyComponent',
  inject: {
    foo: 'foo',
    bar: 'bar',
    [s]: s
  },
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean,
    propA: Number,
    propB: {
      type: String,
      default: 'default value'
    },
    propC: [String, Boolean],
  },
  data () {
    return {
      foo: 'foo',
      baz: 'bar'
    }
  },
  provide () {
    return {
      foo: this.foo,
      bar: this.baz
    }
  },
  methods: {
    addToCount(n){
      this.count += n
      this.$emit("add-to-count", n)
    },
    resetCount(){
      this.count = 0
      this.$emit("reset")
    },
    onChildChanged(val, oldVal) { },
    onPersonChanged(val, oldVal) { }
  },
  watch: {
    'child': {
      handler: 'onChildChanged',
      immediate: false,
      deep: false
    },
    'person': {
      handler: 'onPersonChanged',
      immediate: true,
      deep: true
    }
  }
})
```

## emitDecoratorMetadata

As you can see at `propA` and `propB`, the type can be inferred automatically when it's a simple type. For more complex types like enums you do need to specify it specifically.
Also this library needs to have `emitDecoratorMetadata` set to `true` for this to work.

## See also

[vuex-class](https://github.com/ktsn/vuex-class/)