gradio/js/storybook/preview.ts
Hannah 5181957706
Add mobile Chromatic tests (#7222)
* Add mobile story tests

* add layout stories

* add changeset

* configure viewports

* formatting

* Remove tablet stories + add plot story

* add changeset

* add mobile tests to layout stories

* fix story

* fix story

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: pngwn <hello@pngwn.io>
2024-02-02 14:21:48 +00:00

59 lines
1.1 KiB
TypeScript

import type { Preview } from "@storybook/svelte";
import "./theme.css";
import { setupi18n } from "../app/src/i18n";
import { Gradio } from "../app/src/gradio_helper";
import "../theme/src/reset.css";
import "../theme/src/global.css";
import "../theme/src/pollen.css";
// import "../theme/src/tokens.css";
import "../theme/src/typography.css";
setupi18n();
const preview: Preview = {
args: {
gradio: new Gradio(
0,
document.createElement("div"),
"light",
"1.1.1",
"localhost:9876",
false
)
},
argTypes: {
gradio: {
table: {
disable: true
}
}
},
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/
}
},
options: {
storySort: {
order: ["Design System", "Components"]
}
},
viewport: {
viewports: {
mobile: { name: "mobile", styles: { width: "320px", height: "400px" } },
tablet: { name: "tablet", styles: { width: "640px", height: "800px" } },
desktop: {
name: "desktop",
styles: { width: "1024px", height: "1000px" }
}
}
}
}
};
export default preview;