Skip to content

Commit

Permalink
Merge pull request #137 from thisdot/chore-storybook-not-working
Browse files Browse the repository at this point in the history
Fix storybook
  • Loading branch information
hdJerry authored Jul 21, 2023
2 parents 98f3697 + 5d53270 commit 7ff3417
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 65 deletions.
3 changes: 3 additions & 0 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import '../app/custom-font.css';

const preview: Preview = {
parameters: {
nextjs: {
appDirectory: true,
},
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
Expand Down
75 changes: 40 additions & 35 deletions components/stories/AccountForm.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,43 +1,48 @@
import { Meta, StoryFn } from '@storybook/react';
import AccountForm from '../AccountForm';
// import AccountForm from '../AccountForm';

export default {
title: 'Components/AccountForm',
component: AccountForm,
// component: AccountForm,
} as Meta;

const mockedCustomer = {
firstName: 'Mattia',
lastName: 'Magi',
phone: '333333333',
email: '[email protected]',
defaultAddress: null,
addresses: {
edges: [],
nodes: [],
pageInfo: {
hasNextPage: false,
hasPreviousPage: false,
},
},
orders: {
edges: [],
nodes: [],
pageInfo: {
hasNextPage: false,
hasPreviousPage: false,
},
totalCount: '0',
},
metafields: [],
acceptsMarketing: false,
createdAt: '2022-05-10T15:03:01.000Z',
displayName: 'Megio',
id: 'id',
numberOfOrders: '0',
tags: [],
updatedAt: '2022-05-10T15:03:01.000Z',
};
const Template: StoryFn = () => <AccountForm customer={mockedCustomer} />;
// const mockedCustomer = {
// firstName: 'Mattia',
// lastName: 'Magi',
// phone: '333333333',
// email: '[email protected]',
// defaultAddress: null,
// addresses: {
// edges: [],
// nodes: [],
// pageInfo: {
// hasNextPage: false,
// hasPreviousPage: false,
// },
// },
// orders: {
// edges: [],
// nodes: [],
// pageInfo: {
// hasNextPage: false,
// hasPreviousPage: false,
// },
// totalCount: '0',
// },
// metafields: [],
// acceptsMarketing: false,
// createdAt: '2022-05-10T15:03:01.000Z',
// displayName: 'Megio',
// id: 'id',
// numberOfOrders: '0',
// tags: [],
// updatedAt: '2022-05-10T15:03:01.000Z',
// };
const Template: StoryFn = () => (
<p className="text-red-500">
This story has compatibility issue with the latest Next version
</p>
);
// const Template: StoryFn = () => <AccountForm customer={mockedCustomer} />;

export const Default = Template.bind({});
13 changes: 9 additions & 4 deletions components/stories/AddressCard.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import { Meta, StoryFn } from '@storybook/react';
import AddressCard from '../AddressCard';
import { address } from './data';
// import AddressCard from '../AddressCard';
// import { address } from './data';

export default {
title: 'Components/AddressCard',
component: AddressCard,
// component: AddressCard,
} as Meta;

const Template: StoryFn = () => (
<AddressCard address={address} defaultAddress={true} />
<p className="text-red-500">
This story has compatibility issue with the latest Next version
</p>
);
// const Template: StoryFn = () => (
// <AddressCard address={address} defaultAddress={true} />
// );

export const Default = Template.bind({});
31 changes: 18 additions & 13 deletions components/stories/AddressForm.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,31 @@
import { Meta, StoryFn } from '@storybook/react';
import AddressForm from '../AddressForm';
import { address } from './data';
// import AddressForm from '../AddressForm';
// import { address } from './data';

export default {
title: 'Components/AddressForm',
component: AddressForm,
// component: AddressForm,
} as Meta;

const defaultAddress = {
...address,
};
// const defaultAddress = {
// ...address,
// };

const Template: StoryFn = () => (
<AddressForm
address={address}
defaultAddress={defaultAddress}
isNewAddress={false}
/>
<p className="text-red-500">
This story has compatibility issue with the latest Next version
</p>
);
// const Template: StoryFn = () => (
// <AddressForm
// address={address}
// defaultAddress={defaultAddress}
// isNewAddress={false}
// />
// );

export const Default = Template.bind({});

const NewTemplate: StoryFn = () => <AddressForm isNewAddress={true} />;
// const NewTemplate: StoryFn = () => <AddressForm isNewAddress={true} />;

export const AddAddress = NewTemplate.bind({});
// export const AddAddress = NewTemplate.bind({});
23 changes: 10 additions & 13 deletions components/stories/ProductListBox.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,16 @@ export default {

const Template: StoryFn = () => (
<ProductListBox
//@ts-expect-error is just a story
options={[
{ optionName: 'Material', optionValue: 'Carbon-fiber' },
{ optionName: 'Material', optionValue: 'Polycarbonate' },
{ optionName: 'Material', optionValue: 'Fiberglass' },
{ optionName: 'Material', optionValue: 'Kevlar®' },
{ optionName: 'Material', optionValue: 'Polyethylene' },
{ optionName: 'Material', optionValue: 'Vectran®' },
{
optionName: 'Material',
optionValue: 'Ultra-high-molecular-weight polyethylene',
},
{ optionName: 'Material', optionValue: 'Wood-composite' },
name="Material"
values={[
'Carbon-fiber',
'Polycarbonate',
'Fiberglass',
'Kevlar®',
'Polyethylene',
'Vectran®',
'Ultra-high-molecular-weight polyethylene',
'Wood-composite',
]}
/>
);
Expand Down

0 comments on commit 7ff3417

Please sign in to comment.