@kadconsulting/dry/dist/src/components/Document/Document.stories.js

KAD Reusable Component Library

import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { inferThemeType, ThemeAwareStory } from '~internal/index';
import Document from './Document';
import darkTheme from '~themes/default/palette/dark';
import lightTheme from '~themes/default/palette/light';
import { ThemeProvider, ThemeTypes } from '~components/ThemeProvider';
import { LayoutProvider } from '~components/LayoutProvider';
import FancyCustomComponent from './FancyCustomComponent';
// TODO-DRY: icon needs to be easer to use
import Icon from '../Icons/Icon/Icon';
import { FaceFrown, FaceHappy, Instagram } from '../Icons/paths';
import { IconSizes } from '../Icons/Icon/IconTypes';
const themes = {
    [ThemeTypes.LIGHT]: lightTheme,
    [ThemeTypes.DARK]: darkTheme,
};
export default {
    title: 'Components/Document',
    tags: ['autodocs'],
    component: Document,
    argTypes: {
        content: {
            control: 'text',
            description: 'Content for the checkbox label',
        },
        iconsDirectory: {
            control: 'text',
            description: 'Content for the checkbox label',
        },
        imagesDirectory: {
            control: 'text',
            description: 'Content for the checkbox label',
        },
    },
};
const layout = [
    {
        contentType: 'div',
        children: _jsx("div", { children: " div" }),
    },
    {
        hierarchy: 'h2',
        contentType: 'heading',
        text: 'The Adventures of Young Explorer Tim',
    },
    {
        contentType: 'paragraph',
        text: 'Once upon a time in a small suburban town, lived Tim—a young boy with an insatiable curiosity and a love for adventure.',
    },
    {
        contentType: 'paragraph',
        text: 'Tim always dreamed of exploring uncharted territories, discovering hidden treasures, and solving unsolved mysteries.',
    },
    {
        contentType: 'paragraph',
        text: 'His backpack was always ready with essentials—a flashlight, a notebook, a pen, and a small magnifying glass.',
    },
    {
        contentType: 'image',
        src: 'Test.svg',
    },
    {
        hierarchy: 'h2',
        contentType: 'heading',
        text: 'The Mysterious Old Mansion',
        style: {
            marginTop: '48px',
        },
    },
    {
        contentType: 'paragraph',
        text: 'One fine day, Tim heard about an old mansion at the end of the town that was said to be haunted. People spoke of hidden rooms and mysterious shadows.',
    },
    {
        contentType: 'paragraph',
        text: 'Undeterred by the stories and armed with courage, Tim decided it was time to unravel the mystery of the old mansion.',
    },
    {
        contentType: 'paragraph',
        text: 'After a lot of searching, map-reading, and a few wrong turns, Tim finally arrived at the mansion. It was grander and more mysterious than he had imagined.',
    },
    {
        contentType: 'paragraph',
        text: 'What happens next is an adventure filled with twists and turns, spooky corners, and hidden clues. But Tim is ready, are you?',
    },
    {
        contentType: 'button',
        text: 'Test Buttton text',
        isLoading: false,
        isError: false,
        disabled: false,
        buttonType: 'primary',
        size: 'medium',
        fullWidth: false,
        closeButton: false,
        socialText: false,
        destructive: false,
        adornmentLeft: (_jsx(Icon, { color: 'light-contrast', Path: FaceFrown, size: IconSizes.SMALL })),
        adornmentRight: (_jsx(Icon, { color: '#6c2d91', Path: FaceHappy, size: IconSizes.SMALL })),
    },
];
const buttonLayout = [
    {
        contentType: 'button',
        text: 'Test Buttton text',
        isLoading: false,
        isError: false,
        disabled: false,
        buttonType: 'primary',
        onClick: () => {
            alert('clicked!');
        },
        size: 'medium',
        fullWidth: false,
        closeButton: false,
        socialText: false,
        destructive: false,
        adornmentLeft: (_jsx(Icon, { color: 'light-contrast', Path: FaceFrown, size: IconSizes.SMALL })),
        adornmentRight: (_jsx(Icon, { color: '#6c2d91', Path: FaceHappy, size: IconSizes.SMALL })),
    },
    {
        contentType: 'button',
        text: 'Test Buttton text',
        isLoading: false,
        isError: false,
        disabled: true,
        buttonType: 'primary',
        size: 'small',
        fullWidth: false,
        closeButton: false,
        socialText: false,
        destructive: true,
        adornmentLeft: (_jsx(Icon, { color: 'light-contrast', Path: Instagram, size: IconSizes.SMALL })),
    },
    {
        contentType: 'button',
        text: 'Test Buttton text',
        isLoading: false,
        isError: false,
        disabled: false,
        buttonType: 'primary',
        size: 'small',
        fullWidth: false,
        closeButton: false,
        socialText: false,
        destructive: false,
    },
];
const checkboxLayout = [
    {
        contentType: 'checkbox',
        LabelContent: 'I am a checkbox',
        color: 'light-contrast',
    },
    {
        contentType: 'paragraph',
        text: 'text inbetween',
    },
    {
        contentType: 'checkbox',
        LabelContent: 'Another checkbox!',
        color: 'light-contrast',
    },
];
const datePickerLayout = [
    {
        contentType: 'datePicker',
    },
    // Text below gets hidden when date picker is expanded
    {
        contentType: 'paragraph',
        text: 'Text',
    },
];
const badgeLayout = [
    // Badge cannot accept text as a prop
    {
        contentType: 'badge',
        children: 'badge text',
    },
];
const toggleLayout = [
    {
        contentType: 'toggle',
    },
    {
        contentType: 'toggle',
        text: 'with text',
    },
];
const accordionLayout = [
    {
        contentType: 'accordion',
        parentContent: 'Accordion Title',
        children: 'Accordion Content',
        initialOpenState: false,
        collapsible: true,
    },
];
const customLayout = [
    {
        contentType: 'element',
        content: _jsx(FancyCustomComponent, {}),
    },
];
const DefaultStory = (args, context) => {
    const themeType = inferThemeType(context);
    return (_jsx(_Fragment, { children: _jsx(LayoutProvider, { theme: themes[themeType], children: _jsx(ThemeAwareStory, { id: context.id, children: _jsx(Document, { ...args }) }) }) }));
};
export const Default = {
    // TODO-p1: fix the image path and icon path
    args: {
        content: layout,
        iconsDirectory: 'icon',
        imagesDirectory: './images',
    },
    render: (args, context) => {
        const themeType = inferThemeType(context);
        return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(DefaultStory, { ...args }) }));
    },
};
export const Button = {
    // TODO-p1: fix the image path and icon path
    args: {
        content: buttonLayout,
        iconsDirectory: 'icon',
        imagesDirectory: './images',
    },
    render: (args, context) => {
        const themeType = inferThemeType(context);
        return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(DefaultStory, { ...args }) }));
    },
};
export const Checkbox = {
    // TODO-p1: fix the image path and icon path
    args: {
        content: checkboxLayout,
        iconsDirectory: 'icon',
        imagesDirectory: './images',
    },
    render: (args, context) => {
        const themeType = inferThemeType(context);
        return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(DefaultStory, { ...args }) }));
    },
};
export const DatePicker = {
    // TODO-p1: fix the image path and icon path
    args: {
        content: datePickerLayout,
        iconsDirectory: 'icon',
        imagesDirectory: './images',
    },
    render: (args, context) => {
        const themeType = inferThemeType(context);
        return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(DefaultStory, { ...args }) }));
    },
};
export const Badge = {
    // TODO-p1: fix the image path and icon path
    args: {
        content: badgeLayout,
        iconsDirectory: 'icon',
        imagesDirectory: './images',
    },
    render: (args, context) => {
        const themeType = inferThemeType(context);
        return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(DefaultStory, { ...args }) }));
    },
};
export const Toggle = {
    // TODO-p1: fix the image path and icon path
    args: {
        content: toggleLayout,
        iconsDirectory: 'icon',
        imagesDirectory: './images',
    },
    render: (args, context) => {
        const themeType = inferThemeType(context);
        return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(DefaultStory, { ...args }) }));
    },
};
export const Accordion = {
    // TODO-p1: fix the image path and icon path
    args: {
        content: accordionLayout,
        iconsDirectory: 'icon',
        imagesDirectory: './images',
    },
    render: (args, context) => {
        const themeType = inferThemeType(context);
        return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(DefaultStory, { ...args }) }));
    },
};
export const Custom = {
    // TODO-p1: fix the image path and icon path
    args: {
        content: customLayout,
        iconsDirectory: 'icon',
        imagesDirectory: './images',
        style: {
            backgroundColor: 'red',
        },
    },
    render: (args, context) => {
        const themeType = inferThemeType(context);
        return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(DefaultStory, { ...args }) }));
    },
};
//# sourceMappingURL=Document.stories.js.map