React Storybook problem z ThemeProviderem

Witam

Używając themeProvidera napotkałem na problem chcąc go zaimplementować do storybooka.

ThemeProvider sam w sobie działa jak najbardziej ale chcę aby w storybooku theme również był dostępny.

Implementacja od mojej strony wygląda tak w pliku .storybook/preview.js

import React from 'react'
import { configure, addCreator } from '@storybook/react'
import{ themeProvider } from 'styles-components'

import { theme } from '../src/theme/mainTheme.js'

addCreator(story => <ThemeProvider theme={theme}>{story()}</ThemeProvider>)
configure(loadStories, module)

Odkąd wyszedł react 18 same problemy z niektórymi rzeczami.

Nie wiem już co tutaj może być nie tak.
Zgodnie z kodem powyżej każdy nowo utworzony komponent dodany do storybooka powinien mieć propagowany theme przez themeProvidera.

Zamiast tego po użyciu npm run storybook odpala się owszem ale ciągle kręci ładowanie i tak cały czas aż do zamknięcia.

Ktoś ma na to jakiś sposób ?

Dodam, że czy implementuje theme w jakimś pliku xxxx.stories.js to nie ma znaczenia. Czy dodaję czy nie to i tak nie może wczytac.

Jakiej wersji storybooka używasz?

Bo w dokumentacji (https://storybook.js.org/docs/react/writing-stories/decorators) znalazłem coś takiego

// .storybook/preview.js

import React from 'react';

export const decorators = [
  (Story) => (
    <div style={{ margin: '3em' }}>
      <Story />
    </div>
  ),
];

Z najnowszej

To spróbuj przetestować ten drugi zapis, który podałem.

Ok zrobiłem to w ten sposób ale nie wiem do końca jak się do tego odwołać już w konkretnym pliku np. button.stories.js

zrobiłem to tak w pliku preview.js

import React from 'react';

import { ThemeProvider } from 'styled-components';
import { theme } from '../src/theme/mainTheme.js'

export const decorators = [
  (Story) => (
    <ThemeProvider theme={theme}>
      {Story()}
    </ThemeProvider>
  ),
]

a tak wygląda przykładowy plik button.stories.js

import React from 'react'
import { storiesOf } from '@storybook/react'
import { withKnobs, select } from '@storybook/addon-knobs'

import Button from './Button'

storiesOf('Button', module)
  .addDecorator(withKnobs)
  .add('Primary', () => {
    const label = 'Colors'
    const options = {
      Primary: 'hsl(49, 100%, 58%)',
      Secondary: 'hsl(196, 83%, 75%)',
      Tertiary: 'hsl(106, 47%, 64%)'
    }
    const defualtValue = 'hsl(49, 100%, 58%)'
    const groupId = 'GROUP-ID1'
    const value = select(label, options, defualtValue, groupId)
    return <Button color={value}>Hello</Button>
  })
  .add('Secondary', () => <Button secondary>Hello vscode</Button>)

mam to do obiektu options dodawać z wcześniejszego importu czyli importować tą zmienną "decorators" z pliku preview.js i po niej się odwoływać czy w button.stories.js wystarczy w button.stories.js zrobić tak

storiesOf('Button', module)
  .addDecorator(withKnobs)
  .add('Primary', ({ theme }) => {
    const label = 'Colors'
    const options = {
      Primary: theme.color.yellow,
      Secondary: theme.color.grey,
      Tertiary: 'theme.color.tertiary'
    }

i powinno wtedy działać ?

czy powinienem odwoływać się z tej wyeksportowanej zmiennej "decorations" ?

Krzysztof Wąsik napisał(a):

czy powinienem odwoływać się z tej wyeksportowanej zmiennej "decorations"

Nie jestem do końca pewien, ale ten export w pliku preview jest raczej jedynie po to, żeby storybook sam sobie to zaimportował.

Nie odpowiedziałeś mi do końca "jaka jest ta najnowsza wersja storybooka z której korzystasz ", bo z tego co sprawdzam to funkcje storiesOf, addDecorator, add itd od wersji 5.2 (teraz niedługo wychodzi wersja 7) robią się powoli przestarzałe, więc nie mam pewności, czy ten nowy zapis, który podałem zadziała z tym starszym, którego używasz.

Tutaj źródło z githuba: https://github.com/storybookjs/storybook/blob/next/lib/core/docs/storiesOf.md

Nigdy nie korzystałem z tej starszej składni, więc nie wiem jak ona do końca działa, ale proponowałbym jeszcze raz sprawdzić wersję paczki w pliku package.json i na podstawie wersji przejrzeć odpowiednią dokumentację od początku do końca i przepisać wszystkie pliki ze storybooka.

Bo w najnowszych wersjach stories powinno wyglądać mniej więcej tak

// Button.stories.js|jsx

import React from 'react';

import { Button } from './Button';

export default {
  /* 👇 The title prop is optional.
  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
  * to learn how to generate automatic titles
  */
  title: 'Button',
  component: Button,
};

export const Primary = () => <Button primary>Button</Button>;

Link do dokumentacji: https://storybook.js.org/docs/react/get-started/whats-a-story

EDIT:

Zauważyłem jeszcze, że w preview.js użyłeś story() zamiast <Story />

Tak ten drugi zapis działa jak najbardziej.
Faktycznie korzystałem ze starszego zapisu, zrobiłem zgodnie z poradą teraz chociaż storybook się nie wysypuje ale nadal jak próbuję przechwycić theme z themeProvidera mam undefined.

Tylko jak teraz dla select w dodatku Knobs podać jako options wartości z naszego Theme ?
Teoretycznie ThemeProvider powinien działać ale nie działa. Każdy tworzony nowy story powinien mieć dostęp ale jednak nie ma.

Chodzi mi teraz o sytuację jak teraz w kodzie poniżej do theme się odwołać ?

import React from 'react'
import { withKnobs, select } from '@storybook/addon-knobs'
import Heading from  './Heading'

export default {

  title: 'Headings',
  component: Heading,
  decorators: [withKnobs]

}

export const heading = () => {
  const label = 'FontWeight'
  const options = {
    light: 300,
    bold: 600
  }
  const defualtValue = '#3c3c3';
  const groupId = 'FontWeight'
  const value = select(label, options, defualtValue, groupId)

  return <Heading fontWeight={value}>Hello</Heading>
}

Dodam, że stories jak najbardziej ostylowują się jak należy tyko chciałbym np. przez Knobs i select móc do tego theme mieć dostep i móc sobie zmieniać w storybooku kolor tekstu np czy co tam sobie innego wymyślę pdoczas projektowania komponentu.