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;
Related
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)
I want to get the locale as a global variable in any component of my app without using any other external libraries.
I have json files for translations en.js and es.js:
es.js
export default {
home: 'Inicio',
signin: 'Iniciar Sesion',
welcome: 'Bienvenido',
};
I have already set next.config.js:
i18n: {
locales: ['en', 'es'],
defaultLocale: 'es',
},
And I can get the locale in any component by router.locale:
home.js
import en from "../lib/i18n/en";
import es from "../lib/i18n/es";
const HomePage = () => {
const router = useRouter()
const { locale } = router;
const t = locale === 'en' ? en : es;
return (
<div>t.home</div>
)
}
All good, the question is, how can I replicate this in all the components without having to call the router all the time and replicating the logic to get t. A solution that would allow me something like this:
home.js
import t from "../lib/i18n/t";
const HomePage = () => {
return (
<div>t.home</div>
)
}
Making t a global variable or that all the components have the context to use it.
I am doing it generally different:
//localized.js
import { useRouter } from 'next/router';
export const words = {
login: {
de: 'Login',
en: 'Login',
},
register: {
de: 'Register',
en: 'Registrieren',
},
includeUpdate: {
de: 'Update Link anhängen.',
en: 'Include update link.',
},
// ......
}
export default function t(text) {
const { locale } = useRouter();
return text?.[locale] || text;
}
Nor you can use it like so:
import {words, t} from 'path/to/localized.js'
cont Test = () => {
return (
<div>{t(words.login)}</div>
<div>{t({de: "Ein anderer Text.", en: "Some other text."})}</div>
)
}
I'm trying to follow https://storybook.js.org/docs/react/writing-stories/introduction and hitting a snag when trying to do the Template example. My code is:
import { ComponentMeta, ComponentStory } from '#storybook/react';
import React, { FC } from 'react';
interface FooProps {
myArg: string;
}
const Foo: FC<FooProps> = ({ myArg }) => <p>{myArg}</p>;
Foo.displayName = 'Foo';
export default {
component: Foo,
title: 'Foo',
} as ComponentMeta<typeof Foo>;
const Template: ComponentStory<typeof Foo> = (args) => {
console.log(args);
return <Foo {...args} />;
};
export const Default = Template.bind({});
Default.args = { myArg: 'Foo' };
However, the args argument that's passed to Template is a complex object that describes the story and has nested under it args.args which is what I'd want to pass to my component. Trying to use that throws a TS error though, but also from looking at the docs and GH issues, it seems like people are successfully using this paradigm, so I'm not sure why it's failing for me.
I'm using the latest storybook version that's been released (6.5.13), and my configuration is:
module.exports = {
stories: [
'./**/*.stories.#(js|jsx|ts|tsx)',
],
addons: [
{
name: '#storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss'),
},
},
},
],
framework: '#storybook/react',
};
I have a below query
export const GET_ALL_ADVERT_CUSTOM_FIELD = gql(`
query advertCustomFields {
advertCustomFields {
nodes {
slug
valueType
displayName
description
canRead
}
}
}
`)
And I would like to get the list filtered of nodes like this
import { Props as SelectProps } from 'react-select'
import React, { FC, useState } from 'react'
import ObjectSelector from 'components/Common/ObjectSelector'
import OptionWithDescription from './OptionWithDescription'
import { useQuery } from '#apollo/client'
import { AdvertCustomFieldsDocument } from '__generated__/graphql'
export const AdvertCustomFieldSelector: FC<SelectProps> = (props) => {
const [data, setData] = useState<NodeType[]>()
useQuery(AdvertCustomFieldsDocument, {
onCompleted: (res) => {
const filterData = res.advertCustomFields?.nodes?.filter((e) => e.canRead)
setData(filterData)
},
})
return (
<ObjectSelector<Node>
name={props.name}
onChange={props.onChange}
options={data as any}
getOptionLabel={(option) => option?.displayName as string}
getOptionValue={(option) => `${option.slug}`}
components={{ Option: OptionWithDescription }}
/>
)
}
The thing is #graphql-codegen/cli does not export type for the NodeType.
This is my codegen config
import { CodegenConfig } from '#graphql-codegen/cli'
const config: CodegenConfig = {
schema: './app/graphql/schema.graphql',
documents: ['./facerberus/components/**/*.ts'],
ignoreNoDocuments: true, // for better experience with the watcher
generates: {
'./facerberus/__generated__/': {
preset: 'client',
plugins: [],
presetConfig: {
gqlTagName: 'gql',
},
},
},
}
export default config
which config to make codegen export type of NodeType or how to achieve it via ts
Codegen doesn't generate a standalone type for every part of the operaation.
But you can easily extract the needed part from the operation type. Should be something like this:
type NodeType = AdvertCustomFieldsQuery['advertCustomFields']['nodes'][number]
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: