create react app - Storybook och AntDesign-komponenter - hur man ställer in med CRA & Typescript?

Jag vill ställa in Storybook med komponenter byggda ovanpå AntDesign-komponenter i mitt CRA-projekt med Typescript.

CRA - v3 Storybook - v5.25 AntDesign - v3.23.2

Jag lyckas med att sätta upp CRA + AntDesign, sätta upp Storybook, mina AntDesign-komponenter renderas i Storybook med AntD css-klasser, men stilen saknas

Jag försökte

• att skapa en webpack.config.js-fil i .stories-mappen och använda konfigurationen från Storybook förstår inte import vid behov för antd-komponenter och https://github.com/storybookjs/storybook/issues/3949/
• skapa en .babelrc-fil och importera babel import och ant där
• med samma konfiguration som beskrivs i Advanced AntD-dokumentationen: https://ant.design/docs/react/use-with-create-react-app

Ingen av metoderna tillåter mig att rendera AntD-komponenten med styling

// .stories/webpack.config.js

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        loader: "babel-loader",
        exclude: /node_modules/,
        test: /\.js$/,
        options: {
          presets: ["@babel/react"],
          plugins: [["import", { libraryName: "antd", style: true }]]
        }
      },
      {
        test: /\.less$/,
        loaders: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",

            options: {
              modifyVars: { "@primary-color": "#d8df19" },
              javascriptEnabled: true
            }
          }
        ],
        include: path.resolve(__dirname, "../")
      }
    ]
  }
};

// .stories/.babelrc

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

// min komponent baserad på AntDesign

import { Menu } from "antd";
import React, { FC } from "react";
import { RouteComponentProps, withRouter } from "react-router";
import { styled } from "styletron-react";

export const Sidebar: FC<RouteComponentProps> = ({ history }) => {
  const SidebarLayout = styled(Menu, {
    height: "100vh",
    width: "100%"
  });

  return (
    <SidebarLayout
      onSelect={item => {
        history.push(item.key);
      }}
      defaultSelectedKeys={["/"]}
      selectedKeys={[history.location.pathname]}
      mode="inline"
      theme="dark"
    >
      <Menu.Item key="/">Table View</Menu.Item>
      <Menu.Item key="/dashboard">Dashboard</Menu.Item>
    </SidebarLayout>
  );
};

export default withRouter(Sidebar);

// min berättelse

import { storiesOf } from "@storybook/react";
import { Button } from "antd";
import React from "react";
import { MemoryRouter } from "react-router";
import Sidebar from ".";

storiesOf("Sidebar", module).add("Renders a regular menu", () => {
  return (
    <MemoryRouter initialEntries={["/"]}>
      <Sidebar />
      <Button type="primary">Button</Button>
    </MemoryRouter>
  );
});

// att köra storybook visar detta: resultat av att köra storybook

Jag skulle förvänta mig att ha den AntD-baserade komponenten renderad i mitt storybook på samma sätt som den är i mitt CRA-projekt: resultatet av att köra ett CRA-baserat projekt

Svar #1

Så här kunde jag få det att fungera med Storybook v6

Steg 1: Installera ett förinställt paket för Ant design. Källa

npm i -D @storybook/preset-ant-design

Steg 2: I din .storybook/main.js lägg till ovanstående preset-referens. Observera också hur alternativen för @storybook/preset-create-react-app överstyrdes.

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-ant-design",
    {
      "name": "@storybook/preset-create-react-app",
      "options": {
        "craOverrides": {
          "fileLoaderExcludes": ["less"]
        }
      }
    }
  ],
}

Det verkar som att Storybook 6.0 tar hand om resten av sakerna och inga förändringar krävdes förutom dessa två, i mitt fall.

Svar #2

Importera antd-stilar import 'antd/dist/antd.css'; i storybooks config.js-fil:

// @ .storybook/config.js 
import { configure } from '@storybook/react';
import 'antd/dist/antd.css';

function loadStories() {
  const req = require.context('stories', true, /\.stories\.js$/);
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Se CSS-stöd i storybook-dokumentationen.