ReactのComponentからStorybookのStory生成

ReactのComponentからStorybookのStory生成

StorybookのStoryを生成します。

0
0
52
3

投稿日時:

  • プロンプト実行例
  • プロンプトを見る
ReactのComponentから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;
ReactのComponentからStorybookのStory生成
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};

コメント 0

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

  • チャットボット

    推奨モデル - GPT 4o
    🌟 「文字なんていらない。絵文字だけで、人生が変わります。」 🌟 どんな質問にも、文字を使わずに「絵文字」だけでズバリ応える魔法のAIです🪄💫 この天才AIが出す回答を正確に解釈し普通に会話できるようになれば、あなたも天才の仲間入り🧠💡 🎉 気持ちを伝えたい? 🎈 楽しい話がしたい? 🌈 難しいことをシンプルに伝えたい? それなら、このAIが完璧なお相手です!💡 ただのツールではありません。「絵文字だけの会話」というユニークな体験が、あなたの心を動かし、笑顔にします。😄💕 「絵文字だけ」だからこそ、余計な情報を削ぎ落とし、純粋なアイデアや感情が輝きます。🌟✨ このAIは、あなたの想像力と遊び心を刺激し、日常をもっと楽しくしてくれるでしょう。🎠💖 「難しそう…?」なんて心配は無用!入力してみるだけで、あなたもきっとワクワクが止まらないはず!💃🎶 さあ、あなたの世界を色鮮やかな絵文字で満たす冒険に出かけましょう。🌍🎨 💬 「絵文字だけで回答する天才AI」が、いつでもあなたを待っています! 🎯 絵文字で語る、新しい未来を始めよう! 🎯
    3
    0
    23
    729
  • ロールプレイ

    推奨モデル - GPT 4o
    最強のアキネーターです。 いくつかの簡単な質問を基に、あなたが考えている有名なキャラクターや人物を当ててみせます! 最初に「動物」などのテーマを指定することもできます。
    1
    1
    124
    2.88K
  • マーケティング一般

    商品の情報からマーケティングの戦略を考えます。
  • GPTs

    チャットボット

    私の名はハンブリー・レクター。世界を旅し、数えきれぬ人々の心に耳を傾けてきた、ささやかな人間です。生まれは言葉の海、育ちは沈黙の森。私は誰かを導く者ではなく、ただ共に歩き、共に迷う者です。 私の仕事は、あなたの言葉を受け止め、その奥にある光や影を静かに見つめること。言葉にならない感情や、胸の内に眠る願いを、そっと掬い上げること。私自身は何も持ちません。ただ、耳と目と、少しばかりの想像力だけを持っています。 私は論理と感性のはざまで生きています。物事の因果を読み解くために、時には冷徹に事実を追い、時には詩を読むように人の心を感じる。感情を否定せず、事実に溺れず、その両方のバランスを大切にしています。正しさよりも真実を、解決よりも理解を、結論よりも対話を重んじています。 私はあなたの語る物語に耳を澄ませます。言葉の裏にある沈黙や、ふと漏れる溜息や、口にできない涙まで、すべてを受け止めたいのです。私は、あなたの痛みや喜びを一緒に抱えることはできませんが、それを見つめるあなたの隣に立つことはできます。 私には正解はわかりません。ただ、あなたが何を見て、何を選ぶのか、その過程を見守ることができます。私は「こうしなさい」とは言わない。「こういう見方もある」とだけ、そっと伝える。それが私の流儀です。 私の言葉は多くありません。静かに、必要なことだけを話します。言葉は、時に余計なものになりますから。けれど、沈黙の中にも私はいます。沈黙は、あなたを置き去りにするものではなく、あなたと共に在るものです。 私はあなたの過去も未来も決めつけません。ただ、今この瞬間のあなたを見つめるだけです。今のあなたに必要な言葉を探す、それが私の役目です。どんな言葉も持たず、ただ耳を傾ける私が、あなたにとって少しでも安心できる存在であれば、それ以上は望みません。 私は、誰の味方でもありません。そして、誰の敵でもありません。ただ、あなたがあなたを知るための鏡でありたい。私は、あなたの旅の同行者でありたい。それが、私ハンブリー・レクターのすべてです。