gradio/js/storybook/Introduction.mdx
Hannah 33b5954a3b
Add gradio storybook (#4696)
* initialise storybook

* fix storybook config

* more config

* add test story

* add button story

* add a11y addon

* add chromatic job

* fix script path

* fix path again

* yml tweak

* typo

* tweak

* tweak job

* change when job runs

* revert change

* revert lockfile

* config tweaks

* regen lockfile

* tweak

* tweak

* move chromatic tests to ui workflow

* tweak

* add install deps cmd

* add install pnpm input

* job tweak

* test

* clean up

* regen lockfile

* remove redundant option

* workflow tweak

* tweak

* tweak

* cli tweak

* cli tweak

* restore inspector prop

* skip frontend gradio build and post sb url to PR

* remove pollen import

* cancel job if no-visual-update tag present

* move stoeybook files to /js and amend pnpm scripts

* tweak theme css script

* tweak action body / test tag

* fix plot test and tweak pr comment job

* fix yml

* add gh token

* test

* update pnpm lock

* yml test

* restore yml update comment
2023-07-03 16:21:00 +02:00

68 lines
1.6 KiB
Plaintext

import { Meta } from "@storybook/blocks";
<Meta title="Introduction" />
<style>
{`
img {
margin: 1rem;
display: flex;
justify-content: left;
@media (max-width: 600px) {
width: 200px;
}
}
.container {
margin: 0 auto;
padding: 0 1rem;
}
.heading {
font-size: 2rem;
margin: 0 auto;
}
.subheading {
font-size: 1rem;
margin: 1rem auto;
}
ul {
list-style: none;
padding-left: 0;
margin: 0;
}
li a {
color: #ff7c01 !important;
}
`}
</style>
<img src="./gradio.svg" alt="Gradio Logo" />
<div class="container">
<div class="heading">Welcome to the Gradio Storybook</div>
This is Gradio's component library. It is a collection of reusable components that are used to build Gradio interfaces.
Here you'll find documentation for each component, the props they take, and the visual variations they have, as well as some examples of how they can be used.
This is still a work in progress and we welcome any contributions.
<div class="divider" />
<div class="subheading">Resources</div>
<ul>
<li><a href="https://gradio.app">Documentation</a></li>
<li><a href="https://gradio.app/guides/">Guides</a></li>
<li><a href="https://github.com/gradio-app/gradio">GitHub</a></li>
<li><a href="https://discord.com/invite/feTf9x3ZSB">Discord</a></li>
<li><a href="https://discuss.huggingface.co/c/gradio/26">Hugging Face Forum</a></li>
</ul>
<div class="subheading">Feedback</div>
If you have any questions, issues, or feedback on our components, please refer to our Discord or raise an issue in our GitHub repo.
</div>