search

tuqulore / jumpu-ui

ユーティリティフレンドリーな UI コンポーネントライブラリー
https://tuqulore.github.io/jumpu-ui/
MIT License
5 stars 0 forks source link

Storyのmdx形式への移行 #78

Closed knokmki612 closed 3 years ago

knokmki612 commented 3 years ago

TODO: 移行するStoryのリストアップ

knokmki612 commented 3 years ago

コンフリクトなど考慮せずやってみる

knokmki612 commented 3 years ago

JSXとしては解釈してくれないので、結局のところテンプレートリテラルでストーリーに渡すHTML構造を書く必要がある

<Canvas>
  <Story name="Default">
    {`
      <div class="accordion">
        <button type="button" aria-expanded="true" aria-controls="accordion-body-1">人間失格</button>
        <div id="accordion-body-1" aria-hidden="false">
          <p class="mt-4">恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて>見たのは、よほど大きくなってからでした。自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず>、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。</p>
          <p>しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚め>ました。</p>
        </div>
      </div>
    `}
  </Story>
</Canvas>

参考: https://github.com/storybookjs/storybook/issues/12527#issuecomment-696520185

Hidetaro7 commented 3 years ago

jsのときに整形がかかり、それをmdxにして作業すると整形された状態で読み込まれない仕様になっているようで、

Hidetaro7 commented 3 years ago

VSCodeで作業する際、フォーマットを「プレーンテキスト」に手動で変換して作業している

Hidetaro7 commented 3 years ago

https://marketplace.visualstudio.com/items?itemName=silvenon.mdx

導入した

Hidetaro7 commented 3 years ago

ProfileCard.stories.mdx 記述は正しいはずなのに表示されない TextButton.stories.js argsの指定方法がドキュメントを見ても例がないので少し調べる

それ以外の積み残しは、見出しをつけることと、Meta titleが間違っていないか、などミスがないかを総点検。

Hidetaro7 commented 3 years ago

以下のようなargsの渡し方ができることがわかった。 この件は必要に応じて別issueで対応する。

export const Template = (args) => html`<div class="tag ">${args.label}</div>`;
<Canvas>
  <Story
    name="Test"
    args={{
      label: "ラベル",
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>
knokmki612 commented 3 years ago

103 で完了した