Unable to render third party components?

[natdm]

I'm using react semantic UI to design a frontend and wanted to test some of the components (like making a menu) with storybook. It looks like Storybook does not import any of the libraries used to make the menu. For example:

const NavBar = ({ selected, select, onLogin }: { selected: string, select: (x: string) => void, onLogin: () => void }) => (
    <Menu style={{ marginBottom: 0 }}>
        <Menu.Item name="about" active={selected === 'about'} onClick={() => select('about')}>
            About
        </Menu.Item>

        <Menu.Item name="other" active={selected === 'other'} onClick={() => select('other')}>
            Other
        </Menu.Item>
        <Menu.Menu position="right">
            <Menu.Item>
                <Button content="Login/Signup" icon="right arrow" labelPosition="right" onClick={() => onLogin()} />
            </Menu.Item>
        </Menu.Menu>
    </Menu>
);

And tested with:

import React from 'react';
import { storiesOf } from '@kadira/storybook';
import { NavBar } from '../navigation/navbar';

storiesOf('NavBar', module).add('with withAbout', () => <NavBar />);

Renders:

AboutOther

(just text).

[natdm]

Bump?

[xavxyz]

Hey @natdm! Thanks for filing an issue!

Looking at their docs, https://react.semantic-ui.com/usage#javascript:

You'll also need to include a stylesheet to provide the styling for your components.

Are you doing so in the config file (docs, see CSS section) or in a head.html file with a <link stylesheet> tag (docs)?

Esle, can you provide a simple reproduction please?

[agustif]

I tried to use storybook in my boilerplate and didnt succeed too.

Is there anyway to use webpack.config from my main project, or do I need to do a proper config of stories using ../ for routes and such?

I will try and provide a branch with semantic working on homepage but not storybook.

[natdm]

@xavcz , I did not, must have missed that. I will have to try it this weekend. Thanks!

[agustif]

@natdm, linking the stylesheet from a cdn, will give you semantic-ui vanilla,

If you want to be able to apply theming and such, I can recommend semantic-ui-less which I got to work OK with webpack2 and storybook

[natdm]

@agustif how/where did you have to link it? Example code snippet?

[natdm]

Got it.

import { configure } from '@kadira/storybook';
import 'semantic-ui-css/semantic.min.css';
import 'semantic-ui-react';

function loadStories() {
    require('../src/stories');
    require('../src/components/error_modal/story');
}

configure(loadStories, module);

[xavxyz]

Dope!

I believe we can close this issue 😌