「React」カテゴリーアーカイブ

Storybookなれるまでやっかいだなー

ReactのUI見本帳、testerとしてStorybookを使ってみている
つまづきのめも

ほぼすべてのブログ記事が古い

現状バージョンで記事書いている人いない
それだけ昔から使われているのか、メジャーバージョンアップがおおいのか、もはや誰も使っていないのか・・・

themeやグローバルのcssが読み込まれない

なんじゃこら
コンポーネントごとなので、上位階層で指定していた上記が読み込まれない。
そうか・・・
config.jsでcssを読み込む記述しか見当たらない・・・ので

この記事で書いていた

Storybook による UI & Unit Testing のススメ – Mercari Engineering Blog

if (process.env.NODE_ENV !== 'test') {
  addDecorator(story => (
    <React.Fragment>
      <GlobalStyle />
      {story()}
    </React.Fragment>
  ));
}

を参考にした。
ラッパーを入れればいいらしい
そのラッパーはデコレーターと呼ぶらしい

公式サイト
Intro to Addons
https://storybook.js.org/docs/addons/introduction/#storybook-decorators

公式の記述の感じでdecoratorsが毎回使われるように設定を追記した。

import Layout from '../../containers/LayoutForStory';
import SimpleTable from './Table';

export default {
  component: SimpleTable,
  title: 'SimpleTable',
  // Our exports that end in "Data" are not stories.
  excludeStories: /.*Data$/,
  decorators: [storyFn => <Layout>{storyFn()}</Layout>],
};

...

classじゃなくてclassNameだよと怒られる

webアプリ本体ではbabel-plugin-react-html-attrsを使っているのだけど、それをStorybookは知らないからめっちゃおこってくる

Storybook v5 を TypeScript × React 環境に導入する | blog.kwst.site
https://blog.kwst.site/201907293042/

このなかの記述のようにwebpackでbabelの設定すれば良さそう
とおもって、
.storybook/webpack.config.js
をつくってbabelのことだけ追加して配置したらこんどはcssの記述がキモいって怒り出した。

Can’t import css · Issue #1603 · storybookjs/storybook
https://github.com/storybookjs/storybook/issues/1603

自分のにしたからデフォの設定がなくなったのか・・・
これをみて最終的にこうなった

var webpack = require('webpack');
var path    = require('path');
const includePath = path.resolve(__dirname, '..');

module.exports = {
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      use: [{
        loader: 'babel-loader',
        options: {
          plugins: [
            'react-html-attrs',
            'babel-plugin-styled-components',
            [require('@babel/plugin-proposal-decorators'), {legacy: true}]
          ],
          presets: ['@babel/preset-react', '@babel/preset-env']
        }
      }]
    },
    {
      test: /\.css$/,
      include: includePath,
      use: [
        {
          loader: 'style-loader',
        },
        {
          loader: 'css-loader',
          options: {
            sourceMap: true,
          },
        },
      ],
    },
    {
      test: /\.(woff|woff2|eot|ttf|svg)$/,
      include: includePath,
      use: 'url-loader'
    }
  ]
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  }
};

これでええかは知らない。resolveのあたりこれでええんか?とおもうけど、動いたのでいったんメモ。

[add 2020.0206]

画像のパスがあわない

静的においている画像をcss in jsで呼ぼうとしたらそんなの無いって怒られた

Serving Static Files
https://storybook.js.org/docs/configurations/serving-static-files/

npm scriptsに基準となるディレクトリを指定してパスをあわせる。

    "storybook": "start-storybook -s ./public -p 6006",

[//add 2020.0206]

tab退避ーStorybook polished styled-components

Storybook

プロダクト間共通の React コンポーネントライブラリを運用する話 – SmartHR Tech Blog

Storybook for React
https://storybook.js.org/docs/guides/guide-react/

Writing Stories
https://storybook.js.org/docs/basics/writing-stories/

StoryBook(React)最初の1歩 – Qiita
https://qiita.com/sugasaki/items/66d260f9602921196b07

polished

Sass(SCSS)の関数をstyled-componentsでも使いたい
https://diff001a.netlify.com/sass-styled-components/

polished | Documentation
https://polished.js.org/docs/#rgba

styled-components

styled-componentsを使ったCSS設計 – Qiita
https://qiita.com/taneba/items/4547830b461d11a69a20#%E5%AE%9A%E6%95%B0%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B

Reactでstyled-componentを使ってベースとなるstyleを当てる方法 – Qiita
https://qiita.com/102Design/items/e9f3ede130999d3a1061
テーマや共通cssを使いたかったけどよくわからんかった。

次の記事で書いているようにThemeProviderを読み込む必要があった。

How to use Themes in styled-components – DEV Community 👩‍💻👨‍💻
https://dev.to/aromanarguello/how-to-use-themes-in-styled-components-49h

これでリセットcssと共通のベースcssが読み込めた。