feat(storybook): Refactor Storybook to use Typescript (#3341)

* feat(storybook): Refactor Storybook to use Typescript

This commit updates the Storybook configuration to use Typescript, including renaming `main.js` to `main.ts`, updating `core.builder` and `framework.name` to use `@storybook/builder-webpack5` and `@storybook/react-webpack5`, respectively. The code also adds options to `addon-docs` to enable adding GFM support to the generated docs. Additionally, the commit modifies `staticDir`, removes outdated addons, and makes various devDependencies and PostCSS updates to align with Storybook 7.x.x. Finally, the commit removes some unused code and relocates `Button` and `AboutModal` story files.

* apply review comments

* update yarn lock
This commit is contained in:
Alireza authored and GitHub committed 2023-04-27 12:13:27 -04:00
1 parent 51cb0519fc
commit dd3944a87c
9 files changed
+3007 -3567

No files matched your search

@@ -1,4 +1,4 @@
import AboutModal from '../AboutModal';
import AboutModal from '../../AboutModal';
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import {
createComponentTemplate,
@@ -123,7 +123,6 @@ You can add an icon to the start of the button. It accepts an icon component.
};
return <Button startIcon={<Github />}>Start Icon Button</Button>;
}}
}}
</Story>
</Canvas>
@@ -157,7 +156,6 @@ End Icon is the same as start icon, but for the end of the button.
</Button>
);
}}
}}
</Story>
</Canvas>
@@ -23,14 +23,14 @@ function GitHubLogo() {
export const Heading = ({ title, componentRelativePath }) => {
return (
<div className="flex items-center w-full">
<div className="flex items-center w-full space-x-2">
<div>
<h1 className="text-4xl font-normal text-blue-600 font-inter">
{title}
</h1>
</div>
{componentRelativePath && (
<div className="ml-4">
<div>
<a
href={`https://github.com/OHIF/Viewers/blob/v3-stable/platform/ui/src/components/${componentRelativePath}`}
className="text-sm font-normal text-blue-600"