chore: add ImageUploader in storybook (CALCOM-10760) (#10865)
Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: Keith Williams <keithwillcode@gmail.com>pull/10705/head
parent
1e4c20073c
commit
990441295c
|
@ -18,6 +18,7 @@ export function VariantsTable({
|
||||||
const columns = React.Children.toArray(children) as ReactElement<RowProps>[];
|
const columns = React.Children.toArray(children) as ReactElement<RowProps>[];
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
id="light-variant"
|
||||||
className={classNames(
|
className={classNames(
|
||||||
isDark &&
|
isDark &&
|
||||||
"relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#1C1C1C]"
|
"relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#1C1C1C]"
|
||||||
|
@ -43,7 +44,7 @@ export function VariantsTable({
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
{!isDark && (
|
{!isDark && (
|
||||||
<div data-mode="dark" className="dark">
|
<div id="dark-variant" data-mode="dark" className="dark">
|
||||||
<VariantsTable titles={titles} isDark columnMinWidth={columnMinWidth}>
|
<VariantsTable titles={titles} isDark columnMinWidth={columnMinWidth}>
|
||||||
{children}
|
{children}
|
||||||
</VariantsTable>
|
</VariantsTable>
|
||||||
|
|
|
@ -0,0 +1,57 @@
|
||||||
|
import { Canvas, Meta, Story } from "@storybook/addon-docs";
|
||||||
|
|
||||||
|
import { Title, VariantRow, VariantsTable, CustomArgsTable } from "@calcom/storybook/components";
|
||||||
|
|
||||||
|
import ImageUploader from "./ImageUploader";
|
||||||
|
|
||||||
|
<Meta title="UI/ImageUploader" component={ImageUploader} />
|
||||||
|
|
||||||
|
<Title title="ImageUploader" suffix="Brief" subtitle="Version 1.0 — Last Update: 21 Aug 2023" />
|
||||||
|
|
||||||
|
## Definitions
|
||||||
|
|
||||||
|
`ImageUploader` is used to upload images of all image types
|
||||||
|
|
||||||
|
## Structure
|
||||||
|
|
||||||
|
Below are the props for `Image uploader`
|
||||||
|
|
||||||
|
<CustomArgsTable of={ImageUploader} />
|
||||||
|
|
||||||
|
## ImageUploader Story
|
||||||
|
|
||||||
|
<Canvas>
|
||||||
|
<Story
|
||||||
|
name="ImageUploader"
|
||||||
|
play={({ canvasElement }) => {
|
||||||
|
const darkVariantContainer = canvasElement.querySelector("#dark-variant");
|
||||||
|
const imageUploaderElement = darkVariantContainer.querySelector("button");
|
||||||
|
imageUploaderElement?.addEventListener("click", () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
document.querySelector('[role="dialog"]')?.classList.add("dark");
|
||||||
|
}, 1);
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
args={{
|
||||||
|
id: "image-1",
|
||||||
|
buttonMsg: "upload",
|
||||||
|
target: "target",
|
||||||
|
handleAvatarChange: (src) => {
|
||||||
|
console.debug(src);
|
||||||
|
},
|
||||||
|
}}>
|
||||||
|
{({ id, buttonMsg, handleAvatarChange, imageSrc, target }) => (
|
||||||
|
<VariantsTable titles={["Default"]} columnMinWidth={150}>
|
||||||
|
<VariantRow>
|
||||||
|
<ImageUploader
|
||||||
|
id={id}
|
||||||
|
buttonMsg={buttonMsg}
|
||||||
|
handleAvatarChange={handleAvatarChange}
|
||||||
|
imageSrc={imageSrc}
|
||||||
|
target={target}
|
||||||
|
/>
|
||||||
|
</VariantRow>
|
||||||
|
</VariantsTable>
|
||||||
|
)}
|
||||||
|
</Story>
|
||||||
|
</Canvas>
|
Loading…
Reference in New Issue