Stripe のUI拡張機能 SDK をアップグレードする

このページでは、@stripe/ui-extension-sdk の各メジャーバージョンで導入された重大な変更点を理解するのに役立つ包括的なガイドを提供し、アプリケーションのアップグレードに必要な変更点の概要を示します。

@stripe/ui-extension-sdk バージョンを更新する前に、stripe plugin upgrade apps を実行して Stripe Apps CLI プラグインをアップグレードすることをお勧めします。これにより、最適な互換性、最新機能の実装、セキュリティ修正が保証されます。

@stripe/ui-extension-sdk v9

v9 の新機能

@stripe/ui-extension-sdk のバージョン 9 では、すべてのコンポーネントのプロパティ検証が導入されています。このバージョンはより安全で、バグを軽減し、コーディングのベストプラクティスの遵守を促進します。インストール後は、無効なプロパティ値から発生する TypeScript エラーに注意してください。検証エラーが発生し、アプリケーションがクラッシュする可能性があります。

コンポーネントの変更

一部のコンポーネントの表示を更新しました。最新バージョンをインストールしたら、アプリを確認して、コンポーネントが適切に表示されていることを確認してください。

変更ログ

9.0.0

• Add PropertyList and PropertyListItem components.
• Add TaskList and TaskListItem components.
• Add PlatformConfigurationView component to enable setup for embedded apps.
• 型安全なプロパティを保証するためにランタイムコンポーネントのプロパティ検証を追加しました。
• Button コンポーネントに pending プロパティを追加しました。
• Badge コンポーネントの type プロパティに new のバリアント値を追加しました。
• Add more format options to BarChart and LineChart components:
  • decimal の形式スタイルを追加しました。
  • より適切な軸制限を設定するために nice オプションを追加しました。
  • 軸上の市場数を指定するために ticks を追加しました。
  • 目盛ラベルの表記を変更するために tickFormat を追加しました。
  • ゼロ値の表示をコントロールするために zero を追加しました。
  • 数値の精度をコントロールするため、通貨の形式に fractionalDigits オプションを追加しました。
• Remove deprecated tabKey prop from Tab and TabPanel components. Use the id prop instead.
• Box および Inline コンポーネントの css プロパティから非推奨の background プロパティを削除しました。代わりに backgroundColor プロパティを使用します。
• Button および Link コンポーネントから非推奨の className プロパティを削除しました。
• FormFieldGroup コンポーネントから非推奨の invalid プロパティを削除しました。
• Box および Inline コンポーネントの css プロパティから非推奨の layout プロパティを削除しました。代わりに stack プロパティを使用します。
• Remove deprecated onClose prop from FocusView component. Use the setShown prop instead.
• TextArea および TextField コンポーネントから非推奨の onKeyPress プロパティを削除しました。
• DateField コンポーネントの onChange プロパティが、変更イベントではなく値を直接受け取るようになりました。
• FormFieldGroup コンポーネントの layout プロパティ値が、row と column から horizontal と vertical に変更されました。

8.9.3

• Fix the type definition for SignInView’s onPress callback argument to match its actual runtime value.
• Upgrade @remote-ui dependencies.

8.9.2

• Fix minTileWidth prop types to accept only compatible values.
• Remove React.RefObject type from the Tooltip component’s trigger prop, as it is not supported at runtime.
• Add id prop to Tab and TabPanel components to replace tabKey.
• Remove deprecation notice from border color properties (borderColor, borderBottomColor, borderLeftColor, borderRightColor, borderTopColor) in the css prop of Box and Inline components.
• Add border style and width properties (borderStyle, borderWidth, borderBottomStyle, borderBottomWidth, borderLeftStyle, borderLeftWidth, borderRightStyle, borderRightWidth, borderTopStyle, borderTopWidth) to the css prop of Box and Inline components.
• Add literal types to the name prop on the Icon component.

8.9.1

• 修正済みの依存関係バージョンを使用します。
• テストラッパーの検索メソッドを修正しました。

8.9.0

• DateField コンポーネントに value プロパティを追加しました。
• Box および Inline コンポーネントの background プロパティに非推奨通知を追加しました。代わりに backgroundColor プロパティを使用します。
• Button および Link コンポーネントの className プロパティに非推奨通知を追加しました。
• FormFieldGroup コンポーネントの invalid プロパティに非推奨通知を追加しました。
• Box および Inline コンポーネントの css プロパティの layout プロパティに非推奨通知を追加しました。代わりに stack プロパティを使用します。
• Tab および TabPanel コンポーネントの tabKey プロパティに非推奨通知を追加しました。
• Box および Inline コンポーネントの css プロパティのボーダーカラープロパティ (borderColor、borderTopColor、borderRightColor、borderBottomColor、borderLeftColor) に非推奨通知を追加しました。ボーダーのスタイルを設定する場合は、代わりに keyline プロパティを使用します。
• value および checked プロパティから非推奨通知を削除しました。

8.8.0

• Add StripeFileUploader component.
• Add platform prop to environment context.
• Add appContext to the ExtensionContextValue type.
• Add types for AuthorizedPermission and AuthorizedContentSecurityPolicy.
• Add some utility functions for interacting with appContext:
  • getUserAuthorizedPermissions: アプリの承認済みの権限と、ダッシュボードの現在のユーザーの権限の共通部分を取得します。
  • isPermissionAuthorized: 権限がアプリの承認済みの権限に含まれているかどうかを表示します。
  • isSourceInAuthorizedCSP: URL がアプリの承認済みの連結ソースまたは画像ソースに存在するかどうかを表示します。

8.7.0

• Add roles to the account passed to extensions in the userContext property.

8.6.0

• Add secondaryAction prop to SignInView.
• Add target to SignInView action props.
• Allow both href and onPress on SignInView action props.

8.5.0

• Add constants prop to environment context.

8.4.1

• Add SignInView component.

8.3.0

• Remove unsupported contentUses property from TableCell and TableHeaderCell typing.
• Updated useToast to return show and dismiss utility methods.

8.2.0

• StripeAppsHttpResponse.prototype.toJSON() now returns a rejected promise if the HTTP response body was empty.
• Add support for calling fetchStripeSignature with nested JSON.
• Fix debug to filter props according to all option.
• Add tabKey to Tab and TabPanel.
• Upgrade stripe package dependency to ^9.11.0.
• Add external to Link.
• Add setShown prop to FocusView.
• Add showToast utility function for rendering toast notifications at the bottom of an app’s view.

8.1.0

• Fix ExtensionContextValue typing to mark name and objectContext values as possibly null.
• Add textAlign to Box css.
• Make onSave prop optional for SettingsView components.
• Upgrade to @remote-ui/react 4.5.2.
• Add Sparkline component.

8.0.0

• Add deprecation notice to the value prop on TextArea, TextField, and Select components.
• Add deprecation notice to the checked prop on Checkbox, Radio, and Switch components.
• Remove unsupported outerRef props from inputs.

7.1.0

• Add brandIcon and brandColor to ContextView.

7.0.0

• Deprecate Notice component; use Banner instead.
• Add overflowX and overflowY to Box css.

6.3.1

• Internal update, no user-facing changes.

6.3.0

• Add Banner component.
• Add deprecation warning for Notice component.
• Add locale to ExtensionContextValue['oauthContext'].
• Add overflowWrap and wordBreak to Box css properties.
• Add textTransform to Box and Inline css properties.
• ContextView に primaryAction、secondaryAction、footerContent プロパティを追加しました。
• Add whiteSpace to Box css properties.

6.2.0

• BarChart および LineChart の改善:
  • Configurable axis formatting.
  • Configurable value formatting.
  • Configurable channel domains.
  • Configurable channel ranges.
  • Show/hide axis labels and ticks in charts.
  • Show/hide grid lines in charts.
  • Show/hide tooltips in chart presets.
  • Show/hide legends in chart presets.

6.1.0

• Add a confirmation dialog to FocusView.
• Add Chip and ChipList components.
• Update the getDashboardUserEmail utility to return the email directly and reject the promise if there’s an error.
• Fix React components not being accepted in the label prop of form elements.
• Expose text-overflow: ellipsis and word-wrap: normal | break-word on Box css.
• Add country to the account passed to extensions in the userContext property.
• Img コンポーネントに data: URL サポートを追加しました。詳しくは、Img コンポーネントをご覧ください。

6.0.0

• Deprecate email in view context.
• Consolidated utilities in /utils path.
• Fixed react-reconciler dependency issue affecting unit tests.

5.0.1

• Fix prop types for Switch, Checkbox and Radio.

5.0.0

• Adds the Accordion, Icon, Spinner, and Tooltip components.
• Adds tooltips to BarChart and LineChart.
• Fix prop typing for BarChart and LineChart.
• Deprecates legacy view context parameters.
• Enables setting width through css={{ width: .. }} on Select, TextArea, TextField, Button, and Link.
• Enables setting internal horizontal alignment through css={{ alignX: .. }} on Button and Link.
• Adds the clipboardWriteText function.
• Adds the getDashboardUserEmail function.

4.0.0

• Deprecates the slot property.

3.2.0

• Adds the createOAuthState function.
• Adds oauthContext to the ExtensionContextValue type.

3.1.0

• Adds the Img component.

3.0.0

• Adds support for the Notice, Charts, and Tabs components.
• 対応処理が必要な変更:
  • ListItem: 以前までは、子として渡されたコンテンツが、コンポーネントに表示される主要なコンテンツでした。現在は title プロパティに主要なコンテンツが渡されます。description スロットも secondaryTitle プロパティに再割り当てされるようになっています。
  • MenuTrigger: このコンポーネントは廃止され、代わりに Menu コンポーネントの trigger プロパティが使用されるようになりました。Slot API の使用も廃止されています。
• ユーザーコンテキストに渡される権限を削除しました。

2.2.1

• Expose docs.json files in dist.

2.2.0

• ContextView に actions プロパティを追加しました。

2.1.0

• ButtonGroup コンポーネントを導入しました。
• フォーム管理から margin-bottom を削除しました。
• ボタンに white-space: nowrap と alignY: center をデフォルトで追加しました。
• ボタンテーマですべてのサイズバリアントに min-height を設定できるようになりました。
• Link および Button をコンテンツに合わせて縮小しました。
• TextField および TextArea の defaultValue 属性を公開しました。
• hiddenElements プロパティを使用して、フォーム管理で error と description を非表示にできるようになりました。
• Select と TextArea の invalid および size プロパティを公開しました。
• Radio の defaultChecked 属性を公開しました。
• TextArea の resizeable および rows プロパティを公開しました。
• コントロールコンポーネントの無効状態を修正しました。
• Chip の onDropdown が 2 回起動する問題を修正しました。
• Divider の表示を修正しました。

2.0.3

• ダッシュボードのデータが更新されることで解決する useRefreshDashboardData のプロミスを返します。
• 追加のリクエストペイロードを必要に応じて受け付ける fetchStripeSignature メソッドを追加しました。署名を使用して、アプリのバックエンドに対する認証済みリクエストが可能になります。
• テスト要素のチェックメソッド .is がコンポーネントの識別に失敗する問題を修正しました。

2.0.2

• Fixes an issue with the testing package in which comopnents with fragment props were not findable using wrapper.find().

2.0.1

• Pulls in updated dependency that fixes #55 and #161.

2.0.0

• Fixes a render error with SettingsView.
• Updates SettingsView types to match the available component props.
• テスト用の getMockContextProps ヘルパーを追加しました。詳しくは、コンテキストプロパティをご覧ください。
• List コンポーネントで string だけでなくReact.ReactNode も value プロパティの有効なタイプとして受け付けられるようになりました。
• Adds hover state to ListItem components.
• Updates ListItem component such that hover state is only visible when there is an action associated.
• Fix Select rendering when multiple is true.
• Fix Checkbox onChange firing twice.

1.1.7

• アプリの Jest テストを作成するためのヘルパーを含む「テスト」モジュールを追加しました。詳しくは、UI テストをご覧ください。
• Fixes some components that take React nodes as props:
  • MenuGroup now supports the title prop.
  • FocusView now supports the footerContent prop.
  • SettingsView now supports the headerActions prop.
• タイプの修正と文法の更新を行いました。

1.1.6

• Added types for FocusView, SettingsView, and ContextView.
• Stripe API クライアントの初期化時に使用する新しい定数 STRIPE_API_KEY を http_client からエクスポートします。