How to use ?

[anhdd-kuro]

I installed and added settings to main.ts, but after run storybook nothing happened at all.

[takuma-ru]

It is designed to run when it detects a file save.
Try saving Test.tsx.

Also, at this time we generate stories based on the type or interface information named {ComponentName}Props in the functional components. (This will be adapted to various names in the future.)

[takuma-ru]

Idea: It would be nice if the Story file is also generated when npm run storybook is run

[anhdd-kuro]

Oh I saw it run , but there are some problems what I have found

• Problem 1

If we write props directly

export const KTest = ({ text }: { text: string }) => {
  return <div>{text}</div>
}

It will throw error

Could not find argTypes

• Problem 2

If the file name is different from Props type name it also throw error
for example:

components path : "/components/Foo/index.tsx" 
// →  Could not find argTypes

components : "/components/Foo.tsx" , type Props = {...} ;
export const Foo = ({ ... } : Props) => {
 ...
}

// →  Could not find argTypes

• Propblem 3
  It also failed for this case when html attributes been passed as props. Look like it has been overwhelmed by the number of props

export type KTestProps = {
  text: string
  count?: number
} & HTMLAttributes<HTMLDivElement>

export const KTest = memo(function MemorizedModal({ text }: KTestProps) {
  return <div>{text}</div>
})

May be I should convert to issue ?

[takuma-ru]

Thanks for investigating!

Problem 1 and 2 are simply because we don't support the 2 writing styles of that program...
I know what the solution is, and I'll fix it after I've done some work on the documentation page.

As for Problem 3, I can't figure out the cause just from that code...
Maybe the error occurred during the conversion to a story after type parsing. However, this writing style is often used, so we will deal with it as soon as possible!

[takuma-ru]

Fixed the above problem!

• problem 1: Update program to retrieve even when defined within function arguments
• problem 2: Updated program to recognize directory names as component names when the file name is index.tsx
• problem 3: Updated program to not include HTMLAttributes in arg in story.

[takuma-ru]

Documentation will be updated at a later date.