Storybook: Addon-docs: suporte para o bloco de documentos de origem Typescript

Obrigado @ enagy27! Existem pelo menos algumas opções aqui:

1) source-loader pode gerar um código mais amigável para a digitação
2) o usuário pode configurar o typescript de forma diferente (não vi isso em nosso monorepo)
3) source-loader pode produzir @ts-ignore para contornar

Estou pensando que a terceira opção é a mais simples de começar, a primeira é provavelmente a melhor a longo prazo

O fantasma do Grande César !! Acabei de lançar https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.39 contendo PR # 7831 que faz referência a esse problema. Atualize hoje para experimentar!

Você pode encontrar este pré-lançamento na tag @next NPM.

Fechando esta questão. Por favor, reabra se você acha que ainda há mais a fazer.

@ enagy27 não tem um repro, então seria ótimo se você pudesse tentar e me avisar se funciona

@shilman com certeza! Dando uma chance agora. Obrigado!

@shilman ainda está vendo esses erros em beta.39 😞

ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx
./src/elements/tag/tag.stories.tsx
[tsl] ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx(69,52)
      TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx
./src/elements/tag/tag.stories.tsx
[tsl] ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx(74,3)
      TS2300: Duplicate identifier 'parameters'.

Resultados de npx -p @storybook/cli<strong i="10">@next</strong> sb info

Environment Info:

  System:
    OS: macOS 10.14.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 10.16.0 - /usr/local/opt/node@10/bin/node
    Yarn: 1.17.3 - ~/workspace/component-library/node_modules/.bin/yarn
    npm: 6.9.0 - /usr/local/opt/node@10/bin/npm
  Browsers:
    Chrome: 76.0.3809.100
    Safari: 12.1.1
  npmPackages:
    @storybook/addon-a11y: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-actions: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-docs: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-knobs: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-links: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-viewport: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addons: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/preset-scss: 1.0.2 => 1.0.2 
    @storybook/preset-typescript: 1.1.0 => 1.1.0 
    @storybook/react: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/theming: ^5.2.0-beta.39 => 5.2.0-beta.39

Visto que está no carregador de origem, ele precisa ser instalado separadamente e, em seguida, é retomado pelo preset, ou é necessária uma nova versão do preset?

@ enagy27 você pode dar uma olhada na fonte carregada usando as instruções aqui e ver se a fonte carregada inclui a alteração em # 7831? (substitua .mdx por .tsx e o resto deve ser aplicado)

https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/faq.md#how -do-i-debug-my-mdx-story

@shilman Só consigo iniciar o servidor quando sourceLoaderOptions: null está em vigor 😞 caso contrário, uma compilação com falha interrompe a inicialização do servidor e não consigo inspecionar o código-fonte no navegador. Existe talvez uma opção de linha de comando para ignorar e iniciar o servidor de qualquer maneira na primeira compilação com falha?

Uau !! Acabei de lançar https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.40 contendo PR # 7845 que faz referência a esse problema. Atualize hoje para experimentar!

Você pode encontrar este pré-lançamento na tag @next NPM.

@ enagy27 Mesclou e divulgou suas alterações. De uma chance?

@shilman sem essa sorte 😞 Estou experimentando localmente e não consigo pegar o jeito. Eu até trapacei e marquei todos eles como as any mas parece que ele reclama sobre a variável duplicada parameters , o que me faz pensar se __STORY__ não está sendo escapado corretamente? Mas então eu não consigo ver como funcionaria para JS e não TS ... Estou perplexo

Também estou enfrentando esse problema, mas infelizmente não tenho muito contexto adicional.

Outra solução aqui é substituir todas as regras "estritas" de verificação de tipo no arquivo tsconfig.js que o livro de histórias carrega (o tsconfig do seu projeto ou .storybook/tsconfig.js (eu acho)).

Acho que estes são os únicos a ter certeza de que não estão ativados:

@libetl Sei que você está muito ocupado, mas seria incrível se você pudesse dar uma olhada neste.

@JonKrone quando você faz isso, você vê o código-fonte na guia de documentos? Fiz essas modificações e ainda não estou vendo a fonte 😞

Uma solução temporária se você usar o awesome-typescript-loader:

/* tsconfig.json */
{
  "compilerOptions": { },
  "awesomeTypescriptLoaderOptions": {
    "ignoreDiagnostics": [7005]
  }
}

Não é o ideal, mas funciona.

@shilman É isso que você está procurando? Para sua informação, isso não seria construído sem ignorar o TS7005 (nenhum implícito).

  // @ts-ignore
  var withSourceLoader = require('@storybook/source-loader/preview').withSource;
  // @ts-ignore
  var __SOURCE_PREFIX__ = "/home/user/projects/real/ts/my-blog-react/src/graphql";
  // @ts-ignore
  var __STORY__ = "import React from \"react\";\n\nimport { ApolloProvider } from \"@apollo/react-hooks\";\nimport { storiesOf } from \"@storybook/react\";\n\nimport { Posts } from \"../views/Posts/index\"; // ! Fix coupling\nimport { PostContent } from \"../views/PostContent\"; // ! Fix coupling\nimport { withPostContentQuery } from \"./components/withPostContentQuery\";\nimport { withPostsQuery } from \"./components/withPostsQuery\";\nimport * as fakeQl from \"./fakeql/fakeql-endpoints\";\nimport apolloClientFactory from \"./apollo\";\n\n// FIXME: #coupling - find a way to not depend on Post and Container, probably fakes - but not good enough.\n\nconst apolloClient = apolloClientFactory(fakeQl.normalApiEndpoint);\nconst PostContentQuery = withPostContentQuery(PostContent);\nconst PostsQuery = withPostsQuery(Posts);\n\n// ~~~ Posts ~~~\nstoriesOf(\"GraphQL\", module).add(\"PostsQuery\", () => (\n  <ApolloProvider client={apolloClient}>\n    <PostsQuery routeHandler={() => null} />\n  </ApolloProvider>\n));\n\n// ~~~ PostContent ~~~\nstoriesOf(\"GraphQL\", module).add(\"PostContentQuery\", () => (\n  <ApolloProvider client={apolloClient}>\n    <PostContentQuery postId=\"1\" />\n  </ApolloProvider>\n));\n";
  // @ts-ignore
  var __ADDS_MAP__ = {"graphql--postsquery":{"startLoc":{"col":33,"line":20},"endLoc":{"col":1,"line":24},"startBody":{"col":47,"line":20},"endBody":{"col":1,"line":24}},"graphql--postcontentquery":{"startLoc":{"col":33,"line":27},"endLoc":{"col":1,"line":31},"startBody":{"col":53,"line":27},"endBody":{"col":1,"line":31}}};
  // @ts-ignore
  var __MAIN_FILE_LOCATION__ = "/root.stories.tsx";
  // @ts-ignore
  var __MODULE_DEPENDENCIES__ = [];
  // @ts-ignore
  var __LOCAL_DEPENDENCIES__ = {};
  // @ts-ignore
  var __IDS_TO_FRAMEWORKS__ = {};

  import React from "react";

import { ApolloProvider } from "@apollo/react-hooks";
import { storiesOf } from "@storybook/react";

import { Posts } from "../views/Posts/index"; // ! Fix coupling
import { PostContent } from "../views/PostContent"; // ! Fix coupling
import { withPostContentQuery } from "./components/withPostContentQuery";
import { withPostsQuery } from "./components/withPostsQuery";
import * as fakeQl from "./fakeql/fakeql-endpoints";
import apolloClientFactory from "./apollo";

// FIXME: #coupling - find a way to not depend on Post and Container, probably fakes - but not good enough.

const apolloClient = apolloClientFactory(fakeQl.normalApiEndpoint);
const PostContentQuery = withPostContentQuery(PostContent);
const PostsQuery = withPostsQuery(Posts);

// ~~~ Posts ~~~
storiesOf("GraphQL", module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add("PostsQuery", () => (
  <ApolloProvider client={apolloClient}>
    <PostsQuery routeHandler={() => null} />
  </ApolloProvider>
));

// ~~~ PostContent ~~~
storiesOf("GraphQL", module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add("PostContentQuery", () => (
  <ApolloProvider client={apolloClient}>
    <PostContentQuery postId="1" />
  </ApolloProvider>
));

@ 0b10 Vou tentar, obrigado! No momento, estamos ignorando todas essas linhas, mas não pensei em mudar meu tsconfig.json também 🤔

Eu estava recebendo erros aqui depois de atualizar storybook-react-router para 1.0.6, que tem um problema aberto: gvaldambrini / storybook-router # 42 Não estou recebendo erros aqui (erros de storybook-roteador provavelmente não foram relacionados, veja o comentário abaixo )

"Nenhum código disponível" nas minhas histórias de TSX, MDX funciona bem, o resultado é semelhante / exatamente como a história de @ 0b10

  // @ts-ignore
  var withSourceLoader = require('@storybook/source-loader/preview').withSource;
  // @ts-ignore
  var __SOURCE_PREFIX__ = "C:\\Workspace\\application-ui\\src\\components\\atoms\\container";
  // @ts-ignore
  var __STORY__ = "import { storiesOf } from \"@storybook/react\";\nimport React, { ReactElement } from \"react\";\n\nimport { Container } from \"components\";\n\nconst stories = storiesOf(\"Atoms/Container\", module).addParameters({ component: Container });\n\nstories.add(\"Default\", (): ReactElement => <Container>Hello</Container>);\n";
  // @ts-ignore
  var __ADDS_MAP__ = {};
  // @ts-ignore
  var __MAIN_FILE_LOCATION__ = "/Container.stories.tsx";
  // @ts-ignore
  var __MODULE_DEPENDENCIES__ = [];
  // @ts-ignore
  var __LOCAL_DEPENDENCIES__ = {};
  // @ts-ignore
  var __IDS_TO_FRAMEWORKS__ = {};

  import { storiesOf } from "@storybook/react";
import React, { ReactElement } from "react";

import { Container } from "components";

const stories = storiesOf("Atoms/Container", module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).addParameters({ component: Container });

stories.add("Default", (): ReactElement => <Container>Hello</Container>);

Atualizou config.js, pois era apenas docs: DocsPage

    docs: {
        container: DocsContainer,
        page: DocsPage,
    },

Predefinições:

module.exports = [
    {
        name: "@storybook/addon-docs/react/preset",
        options: {
            configureJSX: true,
        },
    },
];

Configuração do Webpack, possivelmente não necessária?

    config.module.rules.push({
        exclude: /node_modules/,
        test: /\.(ts|tsx)$/,
        use: [
            {
                loader: require.resolve("babel-loader"),
                options: {
                    presets: [["react-app", { flow: false, typescript: true }]],
                },
            },
            {
                loader: require.resolve("react-docgen-typescript-loader"),
            },
        ],
    });

    config.module.rules.push({
        enforce: "pre",
        include: [path.resolve(__dirname, "../src")],
        loader: require.resolve("@storybook/source-loader"),
        test: /\.(stories|story)\.[tj]sx?$/,
    });

tsconfig.json inclui "noImplicitAny": true e não ignoreDiagnostics 😕

Não vejo mais problemas com rc.4 , mas sem fonte 😞 Embora pareça que isso também esteja marcado em # 6641, agora que os erros não estão mais presentes, este problema pode ser uma duplicata

Eu encontrei uma solução alternativa!

• Em vez de usar sourceLoaderOptions: null , usei transpileOnly: true no meu tsLoaderOptions
• Siga a solução alternativa em # 8055, onde não pode haver uma variável parameters de nível superior
• Por alguma razão, o uso de instruções do lado direito como as 'optionA' | 'optionB' falhou aqui e teve que ser convertido para declarações do tipo do lado esquerdo.

Isso falha:

const colors = {
  primary: 'primary',
  secondary: 'secondary',
};

const color = radios('color', colors, colors.primary) as ButtonColor;

Isso funciona:

const colors: Record<string, ButtonColor> = {
  primary: 'primary',
  secondary: 'secondary',
};

const color = radios('color', colors, colors.primary);

Em retrospecto, isso parece um problema source-loader com a inferência de tipo 🤔 de qualquer maneira, espero que isso ajude!

@ enagy27 Você é @libetl volte a ficar online em algum ponto da source-loader para que essas soluções alternativas não sejam necessárias. Dedos cruzados! 🤞

Oi. Alguém pode fornecer um exemplo de repositório em que o livro de histórias com texto datilografado e os documentos de reação estejam funcionando?

@simonhoss, essa é uma ótima ideia, estou realmente me esforçando para fazer isso funcionar.

eu também 😄

As instruções do TS apontam para react-docgen-typescript-loader que diz para instalar addon-info mas no início da documentação não diz que addon-docs é um substituto para addon-info ? Seria muito útil ver uma configuração de funcionamento disso com TS ou algumas instruções claras em um lugar especificamente para configurar addon-docs com TS.

Fico feliz em contribuir e ajudar, mas primeiro preciso entender como essas peças se encaixam! 👍

Agora que os documentos foram lançados, posso levar algum tempo para atualizar cra-ts-kitchen-sink para ter certeza de que estamos todos na mesma página para configuração 🙂 pode demorar mais ou menos uma semana ... por enquanto Vou fornecer minha configuração:

.storybook / addons.js

import '@storybook/addon-knobs/register';
import '@storybook/addon-a11y/register';
import '@storybook/addon-actions/register';

.storybook / config.js

import { configure, addDecorator, addParameters } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';

import theme from './theme';
import '../stylesheets/gusto.scss';

// This file overrides styles from the global Gusto
// styles which interfere with Storybook styles
import './storybook.scss';

// Is your addon not showing up? Try looking for a `register` function
// and add it to .storybook/addons.js
addDecorator(withA11y);
addDecorator(withKnobs);

addParameters({
  // storybook built-in
  // more info available here:
  // https://storybook.js.org/docs/configurations/options-parameter/
  options: {
    showPanel: true,
    panelPosition: 'right',
    // https://storybook.js.org/docs/configurations/theming/
    theme,
  },
  knobs: {
    escapeHTML: false,
  },
  // viewport structure here:
  // https://github.com/storybookjs/storybook/tree/master/addons/viewport#use-custom-set-of-devices
  // viewport: {
  //   defaultViewport: 'iphone6',
  //   type: 'mobile',
  // },
});

configure(require.context('../src', true, /\.stories\.(js|jsx|ts|tsx|mdx)$/), module);

.storybook / presets.js

const path = require('path');

module.exports = [
  '@storybook/preset-scss',
  {
    name: '@storybook/preset-typescript',
    options: {
      // Point the loader here to override the root "noEmit" compilerOption
      tsLoaderOptions: {
        // Transpile only means no type-checking from storybook, which greatly speeds up
        // builds. Types will be checked as part of the normal build process. This may also
        // be necessary for loading story source
        transpileOnly: true,
        configFile: path.resolve(__dirname, 'tsconfig.json'),
      },
      // We must use our config to ensure props and their comments are loaded
      tsDocgenLoaderOptions: {
        tsconfigPath: path.resolve(__dirname, 'tsconfig.json'),
        // https://github.com/styleguidist/react-docgen-typescript#parseroptions
        propFilter: prop => {
          if (prop.parent) {
            return !prop.parent.fileName.includes('node_modules/@types/react/');
          }

          return true;
        },
      },
    },
  },
  '@storybook/addon-docs/react/preset',
];

.storybook / theme.js

Não posso compartilhar isso porque é interno à minha empresa, mas é referenciado em config.js .

.storybook / tsconfig.json

Este arquivo serve apenas para remover configurações na raiz tsconfig.json que não fariam sentido aqui no livro de histórias.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "noEmit": false
  }
}

Olá @ enagy27 - obrigado por isso. Eu meio que tenho isso funcionando com uma configuração de pacote web personalizado. usar a predefinição de digitação por algum motivo estranho me impede de importar recursos no livro de histórias, ou seja, arquivos css.

Um pequeno problema que estou enfrentando é que minha mesa de adereços não é capaz de inferir tipos como este:

SomeType['property'] agora estou vendo any na minha mesa em vez de um sindicato, gostaria de saber se há uma maneira de contornar isso.

Olá, @ enagy27. obrigado por isso. Eu coloquei isso funcionando com a configuração que você compartilhou。mas ainda há algum promble. Ele não pode gerar a descrição do componente e a descrição dos adereços quando escrevo o componente com tsx. mas funciona com jsx。

Olá, @zerofront. eu tive que seguir exatamente este padrão de comentário

Componente desc:

/**
 * This is a component description and should sit directly above your component
 */

Prop desc:

/** I am a prop description and should sit directly above the interface property i am describing */

@ enagy27 na verdade, eu segui o padrão de comentários que você mostrou na minha primeira foto

@zerofront, você precisará de um tipo de export const Button: React.FC<BaseButtonProps> = props => {...}

👆 minha configuração com TS e docgen não funciona com genéricos por algum motivo, criei um problema aqui # 8143 que explica

@zerofront Eu tenho exatamente o seu problema. Nas seções de adereços de seus documentos do Button, o Storybook está imprimindo a interface defaultProps vez da interface BaseButtonProps . E também sinto falta da descrição. Sobre a legenda, você pode adicioná-la ao arquivo da história, desta forma:

export default {
  title: 'Button',
  component: Button,
  parameters: {
    componentSubtitle: 'Handy status label',
  },
}

@zerofront Além do que @ enagy27 disse.
Para trabalhar com * .stories.tsx , você precisa adicionar algo como esta configuração:

.storybook / webpack.config.js

const path = require('path');
const include = path.resolve(__dirname, '../src');

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.ts(x?)$/,
    exclude: /node_modules/,
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
        },
      },
    ],
    include,
  });
  return config;
};

@zerofront, você precisará de um tipo de export const Button: React.FC<BaseButtonProps> = props => {...}

@zerofront @ enagy27 ontem descobri que meu problema (que aparentemente era o mesmo de @zerofront) era causado exatamente pelo tipo de retorno na função.

Isso corrigiu para mim:

- import React from 'react'
+ import React, { FC } from 'react'

- export const Button: React.FC<Props>
+ export const Button: FC<Props>

Fonte:
https://github.com/strothj/react-docgen-typescript-loader/issues/42#issuecomment -535090697
E parcialmente esta nota pode estar relacionada:
https://github.com/strothj/react-docgen-typescript-loader#react -component-class-import

Espero que isso possa ajudar.

@sergiop @ enagy27 obrigado! eventualmente, a mesa de adereços está funcionando.
mas ainda existem alguns problemas.

Se defaultProps não for do tipo string, ele não pode gerar.

@zerofront , posso confirmar que tenho o mesmo problema. Está na minha lista de tarefas a fazer para consertar. ;-)
Se você deseja pesquisar a causa, provavelmente deve começar a tentar entender se ela está relacionada ao livro de histórias em si ou a react-docgen-typescript-loader .

@zerofront talvez seja melhor abrir um exemplar dedicado. ;-)

Tive sorte ao definir adereços padrão enquanto desestruturava os adereços. Certeza de que funcionou com valores não string também.

ie:

const Text = ({
text: 'Hello world'
}: Props) => <p>{text}</p>

Tive sorte ao definir adereços padrão enquanto desestruturava os adereços. Certeza de que funcionou com valores não string também.

ie:

const Text = ({
text: 'Hello world'
}: Props) => <p>{text}</p>

@ sami616 Eu uso adereços padrão da mesma forma que você, mas não vejo padrões para não string como @zerofront já relatado.

Ignore meu comentário, sim, estou tendo o mesmo problema.

@ sami616 , como já disse, quero abrir um relatório de bug sobre isso, mas antes preciso investigar um pouco no codebase, para entender se a origem do problema é storybook ou react-docgen-typescript-loader . Desta forma, irei abrir a edição do projeto certo.

@ sami616 @sergiop
Eu instalo o react-docgen-typescript-loader versão 3.2.1
Encontrei algum código em node_modules / react-docgen-typescript-loader / dist / generateDocgenCodeBlock

var setDefaultValue = function(defaultValue) {
    return typescript_1.default.createPropertyAssignment(
      typescript_1.default.createLiteral('defaultValue'),
      // Use a more extensive check on defaultValue. Sometimes the parser
      // returns an empty object.
      defaultValue != null && typeof defaultValue === 'object' && 'value' in defaultValue && typeof defaultValue.value === 'string'
        ? typescript_1.default.createObjectLiteral([
            typescript_1.default.createPropertyAssignment(
              typescript_1.default.createIdentifier('value'),
              typescript_1.default.createLiteral(defaultValue.value),
            ),
          ])
        : typescript_1.default.createNull(),
    );
  };

&& typeof defaultValue.value === 'string'

esta condição limita o tipo de defaultProps.

E na versão mais recente 3.3.0 react-docgen-typescript-loader, It supoort string 、 número 、 booleano

https://github.com/strothj/react-docgen-typescript-loader/blob/master/src/generateDocgenCodeBlock.ts

const setDefaultValue = (
    defaultValue: { value: string | number | boolean } | null,
  ) =>
    ts.createPropertyAssignment(
      ts.createLiteral("defaultValue"),
      // Use a more extensive check on defaultValue. Sometimes the parser
      // returns an empty object.
      defaultValue != null &&
        typeof defaultValue === "object" &&
        "value" in defaultValue &&
        (typeof defaultValue.value === "string" ||
          typeof defaultValue.value === "number" ||
          typeof defaultValue.value === "boolean")
        ? ts.createObjectLiteral([
            ts.createPropertyAssignment(
              ts.createIdentifier("value"),
              ts.createLiteral(defaultValue!.value),
            ),
          ])
        : ts.createNull(),
    );

@zerofront , bom saber. Eu também tenho 3.2.1. Mais tarde nesta manhã, estou atualizando para 3.3.0 para ver se isso resolverá o problema. Obrigado.

@zerofront , posso confirmar que a atualização de react-docgen-typescript-loader para 3.3.0 resolverá o problema. Obrigado.

Uma solução temporária se você usar o awesome-typescript-loader:

/* tsconfig.json */
{
  "compilerOptions": { },
  "awesomeTypescriptLoaderOptions": {
    "ignoreDiagnostics": [7005]
  }
}

Não é o ideal, mas funciona.

Acabei de atualizar 5.1 para 5.2.5 hoje e comecei a receber este erro, sem instalar addon-docs ainda. Essa solução funcionou para mim, embora eu deva dizer que não está muito claro meu porquê.

Olá a todos! Parece que não tem havido muito nesta edição ultimamente. Se ainda houver perguntas, comentários ou bugs, fique à vontade para continuar a discussão. Infelizmente, não temos tempo para abordar todos os problemas. Estamos sempre abertos a contribuições, portanto, envie-nos uma solicitação de pull se quiser ajudar. Os problemas inativos serão fechados após 30 dias. Obrigado!

Ainda estou recebendo o erro descrito neste problema para a versão "@storybook/react": "5.2.6" e "react-docgen-typescript-loader": "3.6.0" . Não tenho certeza se isso é relevante, mas o único arquivo que foi adicionado // @ts-ignore s a __MODULE_DEPENDENCIES__ nos PRs mencionados aqui é src / server / build.js, embora ainda não seja ignorado em src /client/preview.js .

@jalooc verifique o 5.3 beta. Toneladas de melhorias na mesa de adereços.

@shilman , acredito que tentei isso por último no beta.6 e não estava funcionando sem a solução alternativa. Vou tentar novamente com o mais recente 😄

Ainda tenho esse problema com o livro de histórias 5.3. [email protected] e

A única maneira de consertar para mim era definir "noImplicitAny": false em tsconfig.json que eu realmente não quero fazer.

O erro que estou recebendo é este:
TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Mesmo se eu adicionar um tipo às minhas histórias, o problema não será totalmente resolvido.

Acompanhamento, fiz funcionar usando a opção transpileOnly mencionada por @ enagy27. Estou usando predefinições em vez de configurações completas do webpack; atualmente, esse é o meu presets.js . Sem mudanças no tsconfig.json :

// presets.js
const path = require("path");

module.exports = [
    {
        name: "@storybook/preset-typescript",
        options: {
            tsLoaderOptions: {
                configFile: path.resolve(__dirname, "../tsconfig.json"),
                transpileOnly: true,
            },
            tsDocgenLoaderOptions: {
                tsconfigPath: path.resolve(__dirname, "../tsconfig.json"),
            },
            include: [path.resolve(__dirname, "../src")],
        },
    },
    {
        name: "@storybook/addon-docs/react/preset",
        options: {
            configureJSX: true,
            //sourceLoaderOptions: null,
        },
    },
];

Alguma atualização sobre isso? Estamos tentando usar addons de storybook com TS e não podemos superar isso, mesmo com as soluções alternativas. Continue a receber
"Variável '__MODULE_DEPENDENCIES__' implicitamente tem um tipo 'qualquer []'."

No momento, tentei atualizar o livro de histórias para 5.3.0-beta.16 e tentei as outras soluções alternativas mencionadas aqui. Obrigado

Não consigo fazer com que addon-docs de storybook mostrem a tabela de adereços com o texto datilografado. Diz apenas "Nenhum componente encontrado".

addons.js

import '@storybook/addon-knobs/register'
import '@storybook/addon-a11y/register'
import '@storybook/addon-docs/register'

presets.js

module.exports = [
  {
    name: "@storybook/addon-docs/react/preset",
    options: {
      configureJSX: true,
    }
  }
]

webpack.config.js

const path = require('path')
const SRC_PATH = path.join(__dirname, '../src')

module.exports = ({ config }) => {
    config.module.rules.push({
        test: /\.(ts|tsx|js|jsx)$/,
        include: [SRC_PATH],
        use: [
            {
                loader: require.resolve('babel-loader'),
                options: {
                    presets: [['react-app', { flow: false, typescript: true }]],
                    plugins: ['babel-plugin-styled-components']
                },
            },
            {
                loader: require.resolve('react-docgen-typescript-loader'),
                options: {
                    tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
                },
            },
            {
                loader: require.resolve('@storybook/source-loader'),
                options: { parser: 'typescript',  injectParameters: true, },
            },
        ],
        exclude: [/node_modules/],
        enforce: 'pre',

    })

    config.resolve.extensions.push('.ts', '.tsx', '.js', '.jsx')
    return config
}

Livro de histórias 5.2.8
Addon-Docs 5.2.8
react-docgen-typescript-loader 3.6.0
babel-loader 8.0.6
@ storybook / source-loader 5.2.8

Além disso, se eu usar o formato de história do componente, o storybook não encontrará o componente (a tela, os documentos e o menu estão em branco), mas se eu usar o storyOf, ele os exibe.

Como alternativa, você pode apontar a geração de doc para tsconfig.json com regras estritas desativadas. Acho que resolvi assim por enquanto. Posso verificar novamente na próxima semana se houver alguém interessado.

essas são minhas configurações, pode ajudar.
faça funcionar completo.

++ é
export const AccordionItem
e eu não tenho webpack.config.js

Para qualquer outra pessoa que ainda esteja lutando, finalmente consegui fazê-lo funcionar depois de uma dolorosa depuração do react-docgen-typescript-loader.

React-docgen-typescript-loader atribui __docgeninfo usando o nome da pasta, não o nome do componente, então você deve colocar seu componente em uma pasta com o mesmo nome (diferencia maiúsculas de minúsculas).

|__
  CTALink
    |___index.tsx

Não consegui fazer o formato CSF ​​funcionar (sempre em branco), mas ao usar a sintaxe storiesOf , você deve incluir o componente usando a função addParameters do livro de histórias para que a tabela de adereços seja selecionada .

storiesOf('CTALink', module)
  .addParameters({
    component: CTALink,
  })
  .add('default story', () => (
    <CTALink to="/">Click here</CTALink>
  ))

Olá a todos! Parece que não tem havido muito nesta edição ultimamente. Se ainda houver perguntas, comentários ou bugs, fique à vontade para continuar a discussão. Infelizmente, não temos tempo para abordar todos os problemas. Estamos sempre abertos a contribuições, portanto, envie-nos uma solicitação de pull se quiser ajudar. Os problemas inativos serão fechados após 30 dias. Obrigado!

O texto datilografado deve funcionar no bloco de origem em 5.3. Fechando.

Eu atualizei @storybook/react e @storybook/addon-docs para 5.3.0-rc.4, mas continuo recebendo a mensagem de erro TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Não estou usando o preset e também sou novo no webpack, então provavelmente cometi alguns erros.
Aqui está meu webpack.config.js:
`` `const path = require ('path');

module.exports = {
nó: {
fs: 'vazio',
child_process: 'vazio'
},
resolver: {
módulos: [
'node_modules',
],
extensões: [".ts", ".tsx"],
links simbólicos: verdadeiro
},
módulo: {
as regras: [
{
teste: /.(ts|tsx)$/,
usar: [
{
loader: require.resolve ('awesome-typescript-loader')
},
{
carregador: require.resolve ('react-docgen-typescript-loader')
},
]
},
{
teste: /.(stories|story).[tj]sx?$/,
loader: require.resolve ('@ storybook / source-loader')
}
]
},
externos: {
'transformador de classe': 'transformador de classe'
}
};
`` `

Yo-ho-ho !! Acabei de lançar https://github.com/storybookjs/storybook/releases/tag/v5.3.0-rc.5 contendo PR # 9272 que faz referência a esse problema. Atualize hoje para experimentar!

Você pode encontrar este pré-lançamento na tag @next NPM.

@JacopoBonta você pode tentar a versão mais recente 5.3.0-rc.5 ?

Olá @shilman Obrigado pelo incrível suporte para documentos combinados com livro de histórias.
Eu atualizei para 5.3.0-rc.5 e ainda recebo o erro TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Funciona apenas se eu adicionar ignoreDiagnostics: [7005] à configuração ts-loader conforme mostrado abaixo.

arquivo main.js :

const { addons } = require('@storybook/addons');
const path = require('path');
const tsImportPluginFactory = require('ts-import-plugin')

module.exports = {
  stories: ['../packages/**/*.stories.(tsx|mdx)'],
  presets: [
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, 'tsconfig.json'),
          ignoreDiagnostics: [7005],
          getCustomTransformers: () => ({
            before: [ tsImportPluginFactory(
              {
                libraryName: 'antd',
                style: 'css',
                libraryDirectory: 'es'
              }
            ) ]
          }),
        },
        tsDocgenLoaderOptions: {
          tsconfigPath: path.resolve(__dirname, 'tsconfig.json'),
        },
        forkTsCheckerWebpackPluginOptions: {
          colors: false, // disables built-in colors in logger messages
        },
        include: [path.resolve(__dirname, "../packages")]
      },
    },
    {
      name: '@storybook/addon-docs/preset',
      options: {
      }
    }],
  addons: [
    '@storybook/addon-docs/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-actions/register',
    '@storybook/addon-links/register'
  ],
};

@JacopoBonta você pode tentar a versão mais recente 5.3.0-rc.5 ?

Lamento, mas a atualização para 5.3.0-rc.5 não funcionou.
Atualizei @storybook/react e @storybook/addon-docs mas continuo recebendo o mesmo erro.

AcJacopoBonta você pode @esakal ?

@JacopoBonta Vejo que você está usando awesome-typescript-loader . Atualmente estou usando outro carregador, mas quando usei aquele há um mês, fiz uma solução alternativa semelhante. para awesome-typescript-loader você deve fazer o seguinte:

/* tsconfig.json */
{
  "compilerOptions": { },
  "awesomeTypescriptLoaderOptions": {
    "ignoreDiagnostics": [7005]
  }
}

tirado daqui

Sim, funciona. Eu já estava usando essa solução alternativa antes, mas estava procurando uma maneira sem ela.

De qualquer forma, obrigado pelas ajudas tenho apreciado muito e feliz ano novo 🎉

Obrigado @esakal, sua solução é a melhor (para mim) até agora. Eu costumava definir transpileOnly: true para corrigir os problemas do TypeScript, mas isso ofc tinha o efeito de permitir que mais erros do TypeScript passassem despercebidos.

Minha configuração mínima atual ( presets.js ) se parece com isto:

const path = require("path");

module.exports = [
    {
        name: "@storybook/preset-typescript",
        options: {
            tsLoaderOptions: {
                configFile: path.resolve(__dirname, "../tsconfig.json"),
                ignoreDiagnostics: [7005],
            },
        },
    },
    {
        name: "@storybook/addon-docs/preset",
        options: {
            configureJSX: true,
        },
    },
];

Obrigado!