I have a react project, when I run "yarn build-storybook", the image doesn't load. But when removing the slash by devtools it works. What can it be?
// main.js
module.exports = {
addons: ['#storybook/addon-essentials'],
framework: '#storybook/react',
stories: ['../src/components/**/stories.tsx'],
core: {
builder: '#storybook/builder-webpack5'
},
staticDirs: ['../public']
}
// index.tsx (my-component)
import * as S from './styles'
const Main = () => {
return (
<S.Wrapper>
<S.Logo
src='/img/logo.png'
alt='Lorem ipsum'
width='250'
height='55'
/>
</S.Wrapper>
)
}
export default Main
// stories.tsx
import { ComponentStory, ComponentMeta } from '#storybook/react'
import Main from '.'
export default {
title: 'Main',
component: Main
} as ComponentMeta<typeof Main>
export const Basic: ComponentStory<typeof Main> = () => <Main />
not working (generate by storybook)
working (after remove slash manually)
Related
so I am integrating EditorJs with the NextJs app I have done the initialization in the console it shows Editojs is ready but on the screen, it is not visible
can anyone please tell me what I am doing wrong I am sharing my code below
Editor.js
import { createReactEditorJS } from 'react-editor-js'
import { EditorTools } from './EditorTools';
import React, { useEffect } from 'react'
const Editor = () => {
const ReactEditorJS = createReactEditorJS();
return (
<div>
<ReactEditorJS holder="customEditor" tools={EditorTools}>
<div id="customEditor" />
</ReactEditorJS>
</div>
)
}
export default Editor
EditorTools.js
import Header from '#editorjs/header';
export const EditorTools = {
header: {
class: Header,
config: {
placeholder: 'Let`s write an awesome story! ✨',
},
},
};
Create.js
import React from 'react'
import dynamic from 'next/dynamic';
const EditorJSNoSSRWrapper = dynamic(import('../../../components/Editor/Editor'), {
ssr: false,
loading: () => <p>Loading ...</p>,
});
const create = () => {
return (
<div>
<EditorJSNoSSRWrapper />
</div>
)
}
export default create
Before storybook update (from 5 to 6) I could just write
import { Avatar } from 'src';
and it was ok , but now only
import AvatarComponent from 'src/lib/atoms/Avatar/index';
here is my main.js
const path = require('path');
const aliasPaths = {
src: '../src/',
utils: '../src/utils',
lib: '../src/lib/',
wrappers: '../src/wrappers/index.js',
configs: '../src/configs.js',
hooks: '../src/hooks/index.js',
indexof: '../src/utils/indexof.js'
};
module.exports = {
stories: ['./../stories/*/**/*.stories.jsx'],
addons: [
'#storybook/addon-controls',
'#storybook/addon-actions',
'#storybook/preset-scss',
'#storybook/addon-storysource',
'storybook-dark-mode/register',
{
name: '#storybook/addon-docs',
options: {
configureJSX: true
}
}
],
framework: '#storybook/react',
core: {
builder: 'webpack5'
},
webpackFinal: async (config) => {
for (let aliasPath in aliasPaths) {
config.resolve.alias[aliasPath] = path.resolve(__dirname, aliasPaths[aliasPath]);
}
return config;
}
};
what i'm doing wrong.
and error is
Couldn't find story matching 'atoms-Avatar'.
Are you sure a story with that id exists?
Please check your stories field of your main.js config.
Also check the browser console and terminal for error messages.
src/index.js
export * from './lib/atoms';
export * from './lib/molecules';
export * from './lib/organisms';
lib/atoms/index.js
export Avatar from './Avatar';
export Badge from './Badge';
export BusyLoader from './BusyLoader';
export ModuleTitle from './ModuleTitle';
lib/atoms/Avatar/index.js
const Avatar = () => <span>something</span>
export default Avatar;
I am unable to display a story using next.js.
Other stories of the app work fine. This one doesn't. Please I have been banging my head against the wall for 3 hours.
import { ComponentMeta, ComponentStory } from '#storybook/react';
import React from 'react';
import { mockAvailability } from './SpaceAvailability.test';
import SpaceAvailability from './index';
export default {
title: 'SpaceAvailability',
component: SpaceAvailability,
} as ComponentMeta<typeof SpaceAvailability>;
const Template: ComponentStory<typeof SpaceAvailability> = (args) => (
<SpaceAvailability {...args} />
);
export const WeekStartsMonday = Template.bind({});
WeekStartsMonday.args = {
availability: mockAvailability,
weekStartsOnMonday: true,
};
export const WeekStartsSunday = Template.bind({});
WeekStartsMonday.args = {
availability: mockAvailability,
weekStartsOnMonday: false,
};
If I preview the story I get:
I've just written test file for my component, at the moment it's very rudimentary.. I'm quite inexperience in written test for frontend. I ran yarn test to this test file and it failed miserably..
Here is the message:
Unable to find an element with the text: Please review your billing details...
This is what I have so far for my test:
import React from 'react';
import { render, cleanup, waitForElement } from 'react-testing-library';
// React Router
import { MemoryRouter, Route } from "react-router";
import Show from './Show';
test('it shows the offer', async () => {
const { getByText } = render(
<MemoryRouter initialEntries={['/booking-requests/20-A1-C2/offer']}>
<Route
path="/booking-requests/:booking_request/offer"
render={props => (
<Show {...props} />
)}
/>
</MemoryRouter>
);
//displays the review prompt
await waitForElement(() => getByText('Please review your billing details, contract preview and Additions for your space. Once you’re happy, accept your offer'));
//displays the confirm button
await waitForElement(() => getByText('Confirm'));
});
and this is the component:
// #flow
import * as React from 'react';
import i18n from 'utils/i18n/i18n';
import { Btn } from '#appearhere/bloom';
import css from './Show.css';
import StepContainer from 'components/Layout/DynamicStepContainer/DynamicStepContainer';
const t = i18n.withPrefix('client.apps.offers.show');
const confirmOfferSteps = [
{
title: t('title'),
breadcrumb: t('breadcrumb'),
},
{
title: i18n.t('client.apps.offers.billing_information.title'),
breadcrumb: i18n.t('client.apps.offers.billing_information.breadcrumb'),
},
{
title: i18n.t('client.apps.offers.confirm_pay.title'),
breadcrumb: i18n.t('client.apps.offers.confirm_pay.breadcrumb'),
},
];
class Show extends React.Component<Props> {
steps = confirmOfferSteps;
renderCtaButton = (): React.Element<'Btn'> => {
const cta = t('cta');
return <Btn className={css.button} context='primary'>
{cta}
</Btn>
};
renderLeftContent = ({ isMobile }: { isMobile: boolean }): React.Element<'div'> => (
<div>
<p>{t('blurb')}</p>
{!isMobile && this.renderCtaButton()}
</div>
);
renderRightContent = () => {
return <div>Right content</div>;
};
render() {
const ctaButton = this.renderCtaButton();
return (
<StepContainer
steps={this.steps}
currentStep={1}
ctaButton={ctaButton}
leftContent={this.renderLeftContent}
rightContent={this.renderRightContent}
footer={ctaButton}
/>
);
}
}
export default Show;
what am I missing? Suggestions what else to add to my test file would be greatly appreciated!
I want to show the root component of the App based on config variable from react-native-config
I want to achieve something like this. I have a IS_STORYBOOK variable in the .env file, i want to setup my environment so i can just set the value from config and switch to main application and storyboard mode in my react-native application.
By doing this way.. i am getting this error bundling failed: SyntaxError: D:\Projects\React\React-Native Sample app\MobileApp\App.js: 'import' and 'export' may only appear at the top level (62:1)
//App.js
import React from 'react'; // eslint-disable-line
import { Provider } from 'react-redux';
import { pushNotifications } from './src/global/services';
import configureStore from './src/store/configureStore';
import {StackNavigator, createDrawerNavigator } from 'react-navigation'
import { generateStack } from './src/navigation/routesBuilder'
import Drawer from './src/components/drawer/container'
import {items} from './src/components/drawer/draweritems';
import DrawerIcon from './src/components/navIcons/drawerIcon'
import {data} from './src/global/data'
import {scale} from './src/utils/scale'
import StoryBook from './storybook';
import Config from 'react-native-config'
const store = configureStore();
pushNotifications.configure();
data.populateData();
const drawerRoutes = {"app.home":{
screen:generateStack("app.home", "Home", true,true)
}}
for(var i=0; i<items.length; i++){
drawerRoutes[items[i].navigateTo] = {
screen : generateStack(items[i].navigateTo, items[i].title, true, true),
}
}
const RootStack = StackNavigator({
Splash: {
screen: generateStack('app.splash', '', false, false),
navigationOptions:{
header: null
}
},
Auth: {
screen : generateStack('auth.login', '', false, false),
navigationOptions:{
header: null
}
},
Home:{
screen : createDrawerNavigator({
...drawerRoutes
},
{
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
drawerPosition:'left',
drawerWidth:scale(300),
drawerIcon : (<DrawerIcon />),
contentComponent: (props) => <Drawer {...props}/>
}),
}
}, {
headerMode:
'none'
});
export default class App extends React.Component {
render() {
if(Config.IS_STORYBOOK){
return <StoryBoard />
} else {
return(
<Provider store={store}>
<RootStack />
</Provider>
)
}
}
}
//storybook.js
import { AppRegistry } from "react-native";
import { getStorybookUI, configure } from "#storybook/react-native";
import { loadStories } from "./storyLoader";
configure(() => {
loadStories();
}, module);
const StorybookUI = getStorybookUI({
port: 7007,
host: "localhost",
onDeviceUI: true,
resetStorybook: true
});
AppRegistry.registerComponent("sampleproject", () => StorybookUI);
export { StorybookUI as default };
// .env
IS_STORYBOOK=false
React components are bundled during build-time and not during run-time.
You cannot conditionally export or import your components. Instead you should conditionally render stuff in your components.
Something like this might work for you
import StoryBook from './storybook';
export default class App extends React.Component {
render() {
if(!Config.IS_STORYBOOK){
return(
<Provider store={store}>
<RootStack />
</Provider>
)
} else {
return <StoryBook />
}
}
}