@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
41 lines (40 loc) • 5.01 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { useEffect, useMemo, useRef, useState, } from 'react';
import { useUIDSeed } from 'react-uid';
import { Button, Container, Disclosure, Grid, IconButton, Menu, ProductCard, Snackbar, Stack, Text, useBreakpoints, useBreakpointsConfig, useSSR, } from '..';
import * as style from './shell.module.css';
const story = {
title: 'Examples/Wireframe',
component: Container,
};
export default story;
const Template = () => {
const [isLeftOpen, setIsLeftOpen] = useState(false);
const [isRightOpen, setIsRightOpen] = useState(false);
const ref = useRef(null);
const seed = useUIDSeed();
const { isBrowser } = useSSR();
const { matches, size } = useBreakpoints();
const linkIcons = useMemo(() => ['accessibility', 'astronomy', 'crown', 'megaphone', 'thumbs-up'], []);
const { value: containerValue, matches: containerMatches, size: containerSize, } = useBreakpointsConfig({
sm: { gutter: 16, col: 2, dimension: 'extra-large' },
md: { gutter: 24, col: 3, dimension: 'extra-large' },
lg: { gutter: 24, col: 4, dimension: 'extra-large' },
xl: { gutter: 32, col: 6, dimension: 'extra-large' },
fallback: { gutter: 16, col: 1, dimension: 'extra-large' },
}, ref);
useEffect(() => {
if (isBrowser) {
document.body.style.padding = '0px';
return () => {
document.body.style.padding = '1rem';
};
}
return undefined;
}, [isBrowser]);
return (_jsx(Container, { dimension: "full", padding: false, className: style.MainContainer, children: _jsxs(Stack, { direction: "row", children: [_jsxs(Stack, { id: "LeftMenu", rowGap: 16, className: style.LeftMenu, "data-is-open": isLeftOpen, children: [_jsx("div", { className: style.LeftMenuInner, "data-is-open": isLeftOpen }), isLeftOpen
? (_jsx("div", { children: linkIcons.map((e, i) => (_jsx(Menu.Item, { disabled: true, value: `${e}`, icon: linkIcons[i], children: e }, seed(`linkMenu${i}`)))) }))
: (_jsx(Stack, { inline: true, hAlign: "center", rowGap: 8, children: linkIcons.map((e, i) => (_jsx(IconButton, { disabled: true, icon: linkIcons[i], kind: "flat" }, `${e} ${seed(`icons${i}`)}`))) }))] }), _jsxs(Stack, { children: [_jsxs(Stack, { id: "MainMenu", direction: "row", vAlign: "center", hAlign: "space-between", columnGap: 16, className: style.MainMenu, children: [_jsx(Stack, { inline: true, children: _jsx(Button, { kind: "secondary", dimension: "regular", fullWidth: false, onClick: () => setIsLeftOpen(!isLeftOpen), children: "Menu" }) }), _jsx(Stack, { inline: true, children: _jsx(Button, { kind: "secondary", dimension: "regular", fullWidth: false, onClick: () => setIsRightOpen(!isRightOpen), children: "Filters" }) })] }), _jsx(Container, { ref: ref, dimension: containerValue.dimension, className: clsx(style.Container, 'ContainerEx'), children: _jsxs(Stack, { rowGap: 32, vPadding: 32, children: [_jsxs(Snackbar, { title: "Product Card Container", children: [_jsx(Text, { as: "span", variant: "body-2", children: `Window Width: ${size}px - Breakpoints Match: ${matches.toUpperCase()}` }), _jsx(Text, { as: "span", variant: "body-2", children: `Container Width: ${containerSize}px - Grid Columns: ${containerValue.col} - Grid Gutter: ${containerValue.gutter}px` }), _jsx(Text, { as: "span", variant: "body-2", children: `useBreakpointsConfig.value: ${JSON.stringify(containerValue)} - useBreakpointsConfig.matches: ${containerMatches.toUpperCase()}` })] }), _jsx(Grid, { colMinWidth: "1rem", columns: containerValue.col, rowGap: containerValue.gutter, columnGap: containerValue.gutter, filling: false, children: Array(12).fill('Card').map((e, i) => (_jsx(Grid.Item, { children: _jsx(ProductCard, { source: ['https://storage.googleapis.com/wonderflow-product-images/KITCHENAID%20CLASSIC%20SERIES.png'], subtitle: "brand name", title: `Product-${e} ${i + 1}`, sentiment: 0.51, rating: 4.51, feedbackCount: 3251, footer: "01 Aug 2023", menuActions: (_jsx(Menu, { children: _jsx(Menu.Item, { autoFocus: true, icon: "news", value: "1", children: "Stats" }) })), highlightOnHover: true }) }, seed(`cards${i}`)))) })] }) })] }), _jsxs(Stack, { id: "RightMenu", className: style.RightMenu, "data-is-open": isRightOpen, children: [_jsx("div", { className: style.RightMenuInner }), _jsx("div", { className: style.Filter, children: Array(10).fill('Filter').map((e, i) => (_jsxs(Disclosure, { summary: `${e} ${String.fromCharCode(i + 65)}`, children: [_jsx(Menu.Item, { value: "1", subtext: "Hint Text", children: "Menu Item 1" }), _jsx(Menu.Item, { value: "2", subtext: "Hint Text", children: "Menu Item 2" }), _jsx(Menu.Item, { value: "3", subtext: "Hint Text", children: "Menu Item 3" }), _jsx(Menu.Item, { value: "4", subtext: "Hint Text", children: "Menu Item 4" })] }, seed(`filters${i}`)))) })] })] }) }));
};
export const Shell = Template.bind({});