@fragment-build/ui 1.0.0 → 1.1.0

package/dist/fragments/shell/Shell.stories.jsx

@@ -1,170 +0,0 @@
-var _a, _b;
-import { Card, CardBody, Divider, Input, Tab, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tabs, } from "@nextui-org/react";
-import { IconBox, IconBoxMultiple, IconHome, IconMessageCircle, } from "@tabler/icons-react";
-import { Shell } from "./Shell";
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-const meta = {
-    title: "components/Shell",
-    component: Shell,
-    tags: ["autodocs"],
-    parameters: {
-        layout: "fullscreen",
-    },
-};
-export default meta;
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Primary = {
-    args: {
-        sidebar: {
-            items: [
-                {
-                    type: "user",
-                    key: "user",
-                    name: "Tony Reichert",
-                    description: "ACME Inc.",
-                    avatar: {
-                        src: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
-                    },
-                    dropdownItems: [
-                        {
-                            label: "My Profile",
-                        },
-                        {
-                            label: "Settings",
-                        },
-                        {
-                            label: "Organization Settings",
-                            showDivider: true,
-                        },
-                        {
-                            label: "Logout",
-                            color: "danger",
-                        },
-                    ],
-                },
-                {
-                    type: "custom",
-                    key: "search",
-                    render: <Input label="Search..."/>,
-                },
-                {
-                    type: "navigation",
-                    key: "navigation-overview",
-                    label: "Overview",
-                    navigation: [
-                        {
-                            label: "Home",
-                            link: "/",
-                            icon: <IconHome stroke={1.5}/>,
-                        },
-                        {
-                            label: "My Projects",
-                            link: "/projects",
-                            icon: <IconBoxMultiple stroke={1.5}/>,
-                        },
-                        {
-                            label: "Chat",
-                            link: "/chat",
-                            icon: <IconMessageCircle stroke={1.5}/>,
-                        },
-                    ],
-                },
-                {
-                    type: "navigation",
-                    key: "navigation-projects",
-                    label: "Projects",
-                    navigation: [
-                        {
-                            label: "Project 1",
-                            link: "/projects/1",
-                            icon: <IconBox stroke={1.5}/>,
-                        },
-                        {
-                            label: "Project 2",
-                            link: "/projects/2",
-                            icon: <IconBox stroke={1.5}/>,
-                        },
-                        {
-                            label: "Project 3",
-                            link: "/projects/3",
-                            icon: <IconBox stroke={1.5}/>,
-                        },
-                    ],
-                },
-                {
-                    type: "custom",
-                    key: "bottom-banner",
-                    render: (<Card radius="lg" className="border-none">
-              <img alt="Woman listing to music" className="object-cover w-full" height={200} src="https://nextui.org/images/hero-card.jpeg" width={200}/>
-            </Card>),
-                    align: "bottom",
-                },
-            ],
-        },
-        children: "CONTENT",
-    },
-};
-export const Collapsed = {
-    args: Object.assign(Object.assign({}, Primary.args), { sidebar: ((_a = Primary.args) === null || _a === void 0 ? void 0 : _a.sidebar) ? Object.assign(Object.assign({}, Primary.args.sidebar), { layout: "collapsed" }) : undefined }),
-};
-export const Auto = {
-    args: Object.assign(Object.assign({}, Primary.args), { sidebar: ((_b = Primary.args) === null || _b === void 0 ? void 0 : _b.sidebar) ? Object.assign(Object.assign({}, Primary.args.sidebar), { autoLayout: true }) : undefined }),
-};
-export const WithTable = {
-    args: Object.assign(Object.assign({}, Primary.args), { children: (<>
-        <h1>Customers</h1>
-        <p className="mt-2 text-foreground-500">Blablabla</p>
-        <Divider className="my-4"/>
-        <Tabs aria-label="Options">
-          <Tab key="table" title="Table">
-            <Table aria-label="Example static collection table" selectionMode="multiple" removeWrapper>
-              <TableHeader>
-                <TableColumn>NAME</TableColumn>
-                <TableColumn>ROLE</TableColumn>
-                <TableColumn>STATUS</TableColumn>
-              </TableHeader>
-              <TableBody>
-                <TableRow key="1">
-                  <TableCell>Tony Reichert</TableCell>
-                  <TableCell>CEO</TableCell>
-                  <TableCell>Active</TableCell>
-                </TableRow>
-                <TableRow key="2">
-                  <TableCell>Zoey Lang</TableCell>
-                  <TableCell>Technical Lead</TableCell>
-                  <TableCell>Paused</TableCell>
-                </TableRow>
-                <TableRow key="3">
-                  <TableCell>Jane Fisher</TableCell>
-                  <TableCell>Senior Developer</TableCell>
-                  <TableCell>Active</TableCell>
-                </TableRow>
-                <TableRow key="4">
-                  <TableCell>William Howard</TableCell>
-                  <TableCell>Community Manager</TableCell>
-                  <TableCell>Vacation</TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </Tab>
-          <Tab key="music" title="Music">
-            <Card>
-              <CardBody>
-                Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
-                dolor in reprehenderit in voluptate velit esse cillum dolore eu
-                fugiat nulla pariatur.
-              </CardBody>
-            </Card>
-          </Tab>
-          <Tab key="videos" title="Videos">
-            <Card>
-              <CardBody>
-                Excepteur sint occaecat cupidatat non proident, sunt in culpa
-                qui officia deserunt mollit anim id est laborum.
-              </CardBody>
-            </Card>
-          </Tab>
-        </Tabs>
-      </>) }),
-};

package/dist/fragments/sidebar/Sidebar.jsx

@@ -1,129 +0,0 @@
-'use client';
-import { Avatar, Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Listbox, ListboxItem, ListboxSection, ScrollShadow, Tooltip, User, } from '@nextui-org/react';
-import { useSmaller } from '../../hooks/breakpoints';
-import { IconChevronLeft } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
-const getAlignmentClasses = (align) => {
-    switch (align) {
-        case 'center':
-            return 'my-auto';
-        case 'bottom':
-            return 'mt-auto sticky bottom-0 bg-content1';
-        default:
-            return '';
-    }
-};
-const renderItems = (item, options) => {
-    switch (item.type) {
-        case 'navigation':
-            return options.layout === 'expanded' ? (<Listbox variant="flat" aria-label="Listbox menu with sections" itemClasses={{
-                    base: 'h-12 gap-6',
-                }} {...item.listboxProps}>
-          <ListboxSection title={item.label} classNames={{ group: 'flex flex-col gap-1' }}>
-            {item.navigation.map((navItem) => {
-                    var _a;
-                    return (<ListboxItem key={navItem.label} startContent={navItem.icon} endContent={navItem.endContent} href={navItem.link} className={((_a = options.activeNav) === null || _a === void 0 ? void 0 : _a.link) === navItem.link ? "bg-default/40 text-default-foreground" : ''}>
-                {navItem.label}
-              </ListboxItem>);
-                })}
-          </ListboxSection>
-        </Listbox>) : (<nav className="flex flex-col gap-1">
-          {item.navigation.map((navItem) => {
-                    var _a;
-                    return (<Tooltip key={navItem.label} placement="right" content={navItem.label}>
-              <Button variant={((_a = options.activeNav) === null || _a === void 0 ? void 0 : _a.link) === navItem.link ? 'flat' : 'light'} size="lg" as="a" startContent={navItem.icon} href={navItem.link} isIconOnly/>
-            </Tooltip>);
-                })}
-        </nav>);
-        case 'user':
-            return (<Dropdown placement="bottom-start" classNames={{ trigger: options.layout === 'expanded' ? 'justify-start px-2' : 'justify-start' }} {...item.dropdown}>
-          <DropdownTrigger>
-            {options.layout === 'expanded' ? (<User as="button" avatarProps={item.avatar} className="transition-transform" description={item.description} name={item.name}/>) : (<Avatar as="button" className="transition-transform" {...item.avatar}/>)}
-          </DropdownTrigger>
-          <DropdownMenu aria-label="User Actions" color="primary" variant="flat" items={item.dropdownItems || []}>
-            {(dropdownItem) => (<DropdownItem key={dropdownItem.label} {...dropdownItem}>
-                {dropdownItem.label}
-              </DropdownItem>)}
-          </DropdownMenu>
-        </Dropdown>);
-        case 'custom':
-            return options.layout === 'expanded' || item.showCollapsed ? <div className="px-2">{item.render}</div> : null;
-        default:
-            return null;
-    }
-};
-const getActiveNav = (currentPath, items) => {
-    if (!currentPath)
-        return;
-    const navigations = [];
-    items.forEach((item) => {
-        if (item.type !== 'navigation')
-            return;
-        navigations.push(item.navigation);
-    });
-    const possibleMatches = navigations.flat().filter((navItem) => navItem.link.startsWith(currentPath)).sort((a, b) => b.link.length - a.link.length);
-    return possibleMatches.find((pMatch) => pMatch.link === currentPath) || possibleMatches[0];
-};
-export const Sidebar = ({ items, layout = 'expanded', autoLayout, currentPath }) => {
-    const isMobile = useSmaller('xl');
-    const [activeNav, setActiveNav] = useState(getActiveNav(currentPath, items));
-    useEffect(() => setActiveNav(getActiveNav(currentPath, items)), [currentPath, items]);
-    let renderedLayout = autoLayout ? undefined : layout;
-    if (autoLayout) {
-        if (isMobile) {
-            renderedLayout = 'collapsed';
-        }
-        else {
-            renderedLayout = 'expanded';
-        }
-    }
-    const [collapsed, setCollapsed] = useState(renderedLayout === 'collapsed');
-    useEffect(() => { if (autoLayout)
-        setCollapsed(isMobile); }, [isMobile, setCollapsed, autoLayout]);
-    const layoutStyles = collapsed ? 'w-20 opacity-0 pointer-events-none' : 'w-72';
-    const collapseButtonStyles = collapsed ? 'left-20 translate-x-1/2 rotate-180' : 'left-72 -translate-x-1/2';
-    return (<div className='flex border-r-[1px] border-default-100'>
-      <div className={`fixed top-0 left-0 flex flex-col h-screen bg-content1 gap-8 transition-all ${collapsed ? '' : 'opacity-0'}`}>
-        <ScrollShadow className={`w-20 items-center flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1`}>
-          {items.map((item) => {
-            const children = item.align !== 'bottom' ? renderItems(item, { layout: 'collapsed', activeNav }) : null;
-            return children ? (<div key={item.key} className={getAlignmentClasses(item.align)}>
-                {children}
-              </div>) : null;
-        })}
-        </ScrollShadow>
-        <div className={`w-20 items-center flex flex-col gap-8 px-3 pb-8`}>
-          {items.map((item) => {
-            const children = item.align === 'bottom' ? renderItems(item, { layout: 'collapsed', activeNav }) : null;
-            return children ? (<div key={item.key} className={getAlignmentClasses(item.align)}>
-                {children}
-              </div>) : null;
-        })}
-        </div>
-      </div>
-      <div className={`${layoutStyles} fixed top-0 left-0 flex flex-col h-screen bg-content1 gap-8 overflow-hidden transition-all`}>
-        <ScrollShadow className={`w-72 flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1`}>
-          {items.map((item) => {
-            const children = item.align !== 'bottom' ? renderItems(item, { layout: 'expanded', activeNav }) : null;
-            return children ? (<div key={item.key} className={getAlignmentClasses(item.align)}>
-                {children}
-              </div>) : null;
-        })}
-        </ScrollShadow>
-        <div className={`w-72 flex flex-col gap-8 px-3 pb-8`}>
-          {items.map((item) => {
-            const children = item.align === 'bottom' ? renderItems(item, { layout: 'expanded', activeNav }) : null;
-            return children ? (<div key={item.key} className={getAlignmentClasses(item.align)}>
-                {children}
-              </div>) : null;
-        })}
-        </div>
-      </div>
-      <div className={`${layoutStyles} transition-all h-screen`}/>
-      <div className={`fixed top-6 transition-all ${collapseButtonStyles}`}>
-        <Button size="sm" isIconOnly radius="full" className="h-unit-6 w-unit-6 min-w-unit-6 bg-default-100" onClick={() => setCollapsed(!collapsed)}>
-          <IconChevronLeft size={14}/>
-        </Button>
-      </div>
-    </div>);
-};