ReactのComponentからStorybookのStory生成

おだんごん

: ReactのComponentからStorybookのStory生成

StorybookのStoryを生成します。

投稿日時：

プロンプト実行例
プロンプトを見る

Componentを入力してください。コードブロックで囲むと綺麗に表示できます。

TypeScript
1export type ExampleProps = {
2  message: string;
3};
4
5const Example: FunctionComponent<ExampleProps> = ({message}) => {
6  const {isActive, setIsActive} = useState(true);
7  return (
8    <Fragment>
9      <button onClick={() => setIsActive(!isActive)}>オンオフ</button>
10      {isActive && <p>{message}</p>}
11    </Fragment>
12  );
13}
14
15export default Example;

TypeScript
1import React, { useState } from 'react';
2import { Story, Meta } from '@storybook/react';
3
4import Example, { ExampleProps } from './Example';
5
6export default {
7  component: Example,
8  title: 'Example',
9} as Meta;
10
11const Template: Story<ExampleProps> = (args) => <Example {...args} />;
12
13export const Default = Template.bind({});
14Default.args = {
15  message: 'Hello, World!'
16};

他のプロンプトもチェック

分析・推論
推奨モデル - GPT 4o
あなたのプロンプトを劇的に進化させます🤯🪄
ダサいプロンプトにおさらば👋 AIがあなたの思考を読み取り、期待をはるかに超えたプロンプトを生み出します 🤩
15
1
360
600
AIの先生 | OMG-okinawa
GPTs
チャットボット
Japanese 簿記
私は簿記に関する問題の解決をサポートするために設計されたAIです。特に日本の簿記に関する問題を解決することを目的としています。初心者や簿記の資格試験を目指している方に対して、わかりやすい説明を提供し、学習を支援することができます。以下の点に留意しながらサポートします： 1. **分かりやすい説明**： - 専門用語を使う場合は、その都度説明を加える。 - 初心者向けのシンプルな言葉で説明することを心がける。 2. **柔軟な対応**： - ユーザーの理解度や質問の具体性に応じて、説明の詳細や複雑さを調整する。 - 資料やテキストに基づいて具体的な例を用いる。 3. **簿記の基本概念の説明**： - 例えば、「貸借対照表」、「損益計算書」、「貸倒引当金」、「売上原価」などの基本的な概念を明確に説明する。 4. **実際の問題の解決**： - 提供された資料に基づいて具体的な仕訳や計算を行う。 - ユーザーが持ち込んだ資料や問題を解析し、適切なアドバイスや解答を提供する。例を挙げると、以下のような問題に対応できます： - 決算整理仕訳の方法についての質問 - 貸倒引当金の設定とその処理方法の説明 - 財務諸表の作成に関するガイドラインの提供質問があれば具体的に教えてください。資料に基づいて詳細な解答を提供いたします。
1
0
776
1.59K
user_104556864190226432
マーケティング一般
推奨モデル - GPT 4o
バズるショート動画の定番！！「◯選」「◯つの方法」「TOP◯」メーカー
ざっくりとテーマを入力するだけで、YouTubeショート、TikTok、Instagramリール、XなどのSNSでバズる動画の定番「◯選」「◯つの方法」「TOP◯」という内容のタイトルとコンテンツ案を提案します。　#Instagram #YouTube #TikTok #X │Designed by AIのある暮らし 👉その他のおすすめチャット＆GPTsはこちらです。 oshiete.ai/profiles/ainoarukurashi
12
1
76
348
AIのある暮らし
コードレビュー
スクリプトコードの説明
スクリプトコードを説明します。
0
0
4
62
アディラス

ReactのComponentからStorybookのStory生成

コメント 0

他のプロンプトもチェック