Migrate component docs

[thien-do]

At the develop branch, the Button component is migrated as an example. Let's migrate the rest of them.

Use the guide below to migrate them.

Migration Guide

1. To define stories, use object (StoryObj) instead of function (StoryFn):

// Before
export const Foo = (): JSX.Element => { ... }

// After
export const Foo: StoryObj = {
  render: () => {
    return ...
  }
}

2. For the return type, use ReactElement instead of JSX.Element. However, if the function is already typed, such as via StoryObj.render, then we don't need to provide an explicit return type:

export const Foo: StoryObj = {
  // Already typed
  render: () => {
    return ...
  }
}

3. For story description, use JSDoc instead of Utils.story. Remember to unescape the grave accent ("`") character:

// Before
export const Foo = () => ...

Utils.story(Foo, { desc: `
Hello \`world\`
` });

// After
/**
 * Hello `world`
 */
export const Foo: StoryObj = { render }

4. When writing descriptions, manually break lines at sentences or clauses, not at arbitrary fixed column like 80 or 100:

// Before
`
This is a sentence. This is
another sentence, with 2 clauses.
`

// After
/**
 * This is a sentence.
 * This is another sentence,
 * with 2 clauses.
 */

5. In meta, use docsMetaParameters instead of Utils.page.component:

// Before
const meta = {}

Utils.page.component(meta, {
  shots
})

// After
const meta = {
  parameters: docsMetaParameters({
    gallery
  })
}

6. In meta, use docsMetaArgTypes instead of Utils.arg:

// Before
const meta = {
  argTypes: {
    size: Utils.arg(Button.sizes, "Visual"),
    disabled: Utils.arg("boolean", "Functional"),
    id: Utils.arg(null, "Functional"),
  }
}

// After
const meta = {
  argTypes: docsMetaArgTypes({
    Visual: {
      size: Button.sizes,
    },
    Functional: {
      disabled: "boolean",
      id: false
    },
  })
}

7. For primary story, provide the component type
   instead of defining the props interface again:

// Before
interface Props { }

export const Primary = (props: Props) => { }

// After
export const Primary: StoryObj<typeof Button> = {
  render: (props) => { }
}

[thien-do]

@ngocnhi123 new link for old docs https://moai-docs-5fayal75n-thien-do.vercel.app/?path=/docs/components-dialog--primary