React Cosmos チュートリアル

# Using npm
npm i -D react-cosmos
# or Yarn
yarn add --dev react-cosmos

"scripts": {
   "cosmos": "cosmos",
   "cosmos:export": "cosmos-export"
}

# Using npm
npm run cosmos
# or Yarn
yarn cosmos

// (例)
// cosmos.config.json
{
  "webpack":{
    "configPath": "./webpack.config.js"
  },
  "globalImports": [
    // (例)
    "./common/reset.css", 
  ],
  "staticPath": "public",
  "publicUrl": "./",
}

// cosmos.config.json
{
  "staticPath": "src",
  "watchDirs": ["src"],
  "globalImports": ["src/index.css"],
  "webpack": {
    "configPath": "react-scripts/config/webpack.config"
  }
}

// cosmos.config.json
{
  "globalImports": ["styles/globals.css"],
  "staticPath": "public"
}

// .babelrc
{
  "presets": ["next/babel"],
  "plugins": []
}

// webpack.config.js
const webpack = require('webpack');
const path = require('path');

/**
 * (S)CSS 用のローダー設定。
 */
const cssRules = {
  test: /\.s?css/,
  use: [
    { loader: require.resolve('style-loader') },
    { loader: require.resolve('css-loader'),
      options: {
      url: false,
      importLoaders: 1,
      sourceMap: true
    }},
  ],
  exclude: /node_modules/,
};

/**
 * Image 画像用のローダー設定
*/
const imageRules = {
  test: /\.(jpg|png|gif|svg|eot)$/,
  loader: require.resolve('file-loader'),
  options: {
    name: '[name].[ext]'
  }
}

/**
 * Font用のローダー設定
*/
const fontRules = {
  test: /\.(woff|woff2|ttf)$/,
  loader: require.resolve('file-loader'),
  options: {
    name: '[name].[ext]',
  }
}

/**
 * TypeScript 用のローダー設定。
 */
const tsRules = {
  exclude: /node_modules/,
  test:  /\.tsx?$/,
  use: [
    {
      loader: require.resolve('ts-loader'),
      options: {
        transpileOnly: true,
        compilerOptions: { jsx: 'react', module: 'commonjs' }
      }
    },
    {
      loader: require.resolve('babel-loader'),
      options: {
        configFile: path.resolve(__dirname, `.babelrc`)
      }
    }
  ]
};

/**
 * Webpackの設定をカスタマイズ
 */
const config = {
  mode: 'development',
  target: 'web',
  optimization: {
    minimize: false
  },
  module: {
    rules: [
      tsRules, imageRules, cssRules
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  plugins: [
    new webpack.ProvidePlugin({
      React:'react',
    })
  ]
}

module.exports = config;

{
  "globalImports": [],
  "staticPath": "public",
  "publicUrl": "./",
  "webpack": {
    "configPath": "./webpack.config.js"
  }
}

// .babelrc
{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": []
}

xxx.fixture.{js,jsx,ts,tsx}
/__fixtures__/xxx.{js,jsx,ts,tsx}


例)
Text.fixture.tsx
/__fixtures__/Text.tsx

// Text.fixture.tsx
export default <Text>Hoge!!!</Text>

// CounterButton.fixture.tsx
export default () => {
  const [count, setCount] = useState(0);
  const handleCounter = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);
  return <CounterButton count={count} onClick={handleCounter}/>; 
};

// AlertBox.fixture.tsx
import AlertBox from './AlertBox';

export default {
  Info: <AlertBox type="info" message="ログインしました" />,
  Success: <AlertBox type="success" message="ログイン成功しました" />,
  Warning: <AlertBox type="warning" message="パスワード変更してください" />,
  Error: <AlertBox type="error" message="ただいま大変混み合っています。" />,
};

import React from 'react';
import { useValue } from 'react-cosmos/fixture';
import Modal, { BoxWithTitle } from './Modal';

export default () => {
  const [isActive, setIsActive] = useValue('モーダルを表示するかどうか', { defaultValue: false });

  return (
    <div id="parent">
      <Modal
        isActive={isActive}
      >
        <BoxWithTitle title="タイトル">
          <p>説明</p>
          <p>コンテンツ</p>
          <p>文章</p>
        </BoxWithTitle>
      </Modal>
    </div>
  );
};

import { useSelect } from 'react-cosmos/fixture';
import DisplayNumberSelector from './DisplayNumberSelector';

export default () => {
  const [displayedNumber] = useSelect('表示数', {
    options: ['48', '120'],
  });

  return (
    <DisplayNumberSelector
      displayedNumber={displayedNumber}
      onClickCallBack={() => {}} // mock
    />
  );
};