credit-dialog

hedgehogサービスのクレジットポップアップ用リポジトリです。

使い方

$ touch .npmrc → package.jsonと同じ階層に作成 & 中に情報を記載
$ yarn add @softdevice-arsaga/credit-dialog@version
or
$ npm install @softdevice-arsaga/credit-dialog@version

このpackageはVueプラグインとして使うことを想定しています。 そのため一例ですが、以下のような形で使用してください。

index.ts（エントリーポイント）
import {createApp} from "vue"
const app = createApp({
  setup() {
  },
  render() {
    return h(App);
  },
});
app.use(CreditDialog) // <CreditDialog />として使えます。

propsなどを含めた記述例
<CreditDialog
  class="box"
  v-model:isActive="isActive" // モーダルがactiveがどうかのBoolean
  :event="events" // eventsデータ（型情報は下部をご覧ください。）
  :ticket="tickets" // ticketデータ（型情報は下部をご覧ください。）
  :height="height" // モーダルの高さを指定してください。
  :stripePublicKey="stripePublicKey" // stripeのpublicKey
  :graphqlURL="graphqlURL" // サーバー側のURL。 /graphqlは必要ありません。
  @closeModal="closeModal" // modalをcloseする際のemitです。
/>

型情報について
events = {
  id: number | string;
  startDate: string;
}

tickets = {
  id: number | string;
  title: string;
  amount: number;
  stripeUser: {
    stripeId: string;
  }
}

storybook

本リポジトリにはstorybookを導入しております。以下のコマンドでデザインの確認を行うことができます。
yarn storybook