@fragment-build/ui 1.0.0

package/LICENSE.md

@@ -0,0 +1,194 @@
+Apache License
+==============
+
+_Version 2.0, January 2004_  
+_&lt;<http://www.apache.org/licenses/>&gt;_
+
+### Terms and Conditions for use, reproduction, and distribution
+
+#### 1. Definitions
+
+“License” shall mean the terms and conditions for use, reproduction, and
+distribution as defined by Sections 1 through 9 of this document.
+
+“Licensor” shall mean the copyright owner or entity authorized by the copyright
+owner that is granting the License.
+
+“Legal Entity” shall mean the union of the acting entity and all other entities
+that control, are controlled by, or are under common control with that entity.
+For the purposes of this definition, “control” means **(i)** the power, direct or
+indirect, to cause the direction or management of such entity, whether by
+contract or otherwise, or **(ii)** ownership of fifty percent (50%) or more of the
+outstanding shares, or **(iii)** beneficial ownership of such entity.
+
+“You” (or “Your”) shall mean an individual or Legal Entity exercising
+permissions granted by this License.
+
+“Source” form shall mean the preferred form for making modifications, including
+but not limited to software source code, documentation source, and configuration
+files.
+
+“Object” form shall mean any form resulting from mechanical transformation or
+translation of a Source form, including but not limited to compiled object code,
+generated documentation, and conversions to other media types.
+
+“Work” shall mean the work of authorship, whether in Source or Object form, made
+available under the License, as indicated by a copyright notice that is included
+in or attached to the work (an example is provided in the Appendix below).
+
+“Derivative Works” shall mean any work, whether in Source or Object form, that
+is based on (or derived from) the Work and for which the editorial revisions,
+annotations, elaborations, or other modifications represent, as a whole, an
+original work of authorship. For the purposes of this License, Derivative Works
+shall not include works that remain separable from, or merely link (or bind by
+name) to the interfaces of, the Work and Derivative Works thereof.
+
+“Contribution” shall mean any work of authorship, including the original version
+of the Work and any modifications or additions to that Work or Derivative Works
+thereof, that is intentionally submitted to Licensor for inclusion in the Work
+by the copyright owner or by an individual or Legal Entity authorized to submit
+on behalf of the copyright owner. For the purposes of this definition,
+“submitted” means any form of electronic, verbal, or written communication sent
+to the Licensor or its representatives, including but not limited to
+communication on electronic mailing lists, source code control systems, and
+issue tracking systems that are managed by, or on behalf of, the Licensor for
+the purpose of discussing and improving the Work, but excluding communication
+that is conspicuously marked or otherwise designated in writing by the copyright
+owner as “Not a Contribution.”
+
+“Contributor” shall mean Licensor and any individual or Legal Entity on behalf
+of whom a Contribution has been received by Licensor and subsequently
+incorporated within the Work.
+
+#### 2. Grant of Copyright License
+
+Subject to the terms and conditions of this License, each Contributor hereby
+grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
+irrevocable copyright license to reproduce, prepare Derivative Works of,
+publicly display, publicly perform, sublicense, and distribute the Work and such
+Derivative Works in Source or Object form.
+
+#### 3. Grant of Patent License
+
+Subject to the terms and conditions of this License, each Contributor hereby
+grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
+irrevocable (except as stated in this section) patent license to make, have
+made, use, offer to sell, sell, import, and otherwise transfer the Work, where
+such license applies only to those patent claims licensable by such Contributor
+that are necessarily infringed by their Contribution(s) alone or by combination
+of their Contribution(s) with the Work to which such Contribution(s) was
+submitted. If You institute patent litigation against any entity (including a
+cross-claim or counterclaim in a lawsuit) alleging that the Work or a
+Contribution incorporated within the Work constitutes direct or contributory
+patent infringement, then any patent licenses granted to You under this License
+for that Work shall terminate as of the date such litigation is filed.
+
+#### 4. Redistribution
+
+You may reproduce and distribute copies of the Work or Derivative Works thereof
+in any medium, with or without modifications, and in Source or Object form,
+provided that You meet the following conditions:
+
+* **(a)** You must give any other recipients of the Work or Derivative Works a copy of
+this License; and
+* **(b)** You must cause any modified files to carry prominent notices stating that You
+changed the files; and
+* **(c)** You must retain, in the Source form of any Derivative Works that You distribute,
+all copyright, patent, trademark, and attribution notices from the Source form
+of the Work, excluding those notices that do not pertain to any part of the
+Derivative Works; and
+* **(d)** If the Work includes a “NOTICE” text file as part of its distribution, then any
+Derivative Works that You distribute must include a readable copy of the
+attribution notices contained within such NOTICE file, excluding those notices
+that do not pertain to any part of the Derivative Works, in at least one of the
+following places: within a NOTICE text file distributed as part of the
+Derivative Works; within the Source form or documentation, if provided along
+with the Derivative Works; or, within a display generated by the Derivative
+Works, if and wherever such third-party notices normally appear. The contents of
+the NOTICE file are for informational purposes only and do not modify the
+License. You may add Your own attribution notices within Derivative Works that
+You distribute, alongside or as an addendum to the NOTICE text from the Work,
+provided that such additional attribution notices cannot be construed as
+modifying the License.
+
+You may add Your own copyright statement to Your modifications and may provide
+additional or different license terms and conditions for use, reproduction, or
+distribution of Your modifications, or for any such Derivative Works as a whole,
+provided Your use, reproduction, and distribution of the Work otherwise complies
+with the conditions stated in this License.
+
+#### 5. Submission of Contributions
+
+Unless You explicitly state otherwise, any Contribution intentionally submitted
+for inclusion in the Work by You to the Licensor shall be under the terms and
+conditions of this License, without any additional terms or conditions.
+Notwithstanding the above, nothing herein shall supersede or modify the terms of
+any separate license agreement you may have executed with Licensor regarding
+such Contributions.
+
+#### 6. Trademarks
+
+This License does not grant permission to use the trade names, trademarks,
+service marks, or product names of the Licensor, except as required for
+reasonable and customary use in describing the origin of the Work and
+reproducing the content of the NOTICE file.
+
+#### 7. Disclaimer of Warranty
+
+Unless required by applicable law or agreed to in writing, Licensor provides the
+Work (and each Contributor provides its Contributions) on an “AS IS” BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied,
+including, without limitation, any warranties or conditions of TITLE,
+NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are
+solely responsible for determining the appropriateness of using or
+redistributing the Work and assume any risks associated with Your exercise of
+permissions under this License.
+
+#### 8. Limitation of Liability
+
+In no event and under no legal theory, whether in tort (including negligence),
+contract, or otherwise, unless required by applicable law (such as deliberate
+and grossly negligent acts) or agreed to in writing, shall any Contributor be
+liable to You for damages, including any direct, indirect, special, incidental,
+or consequential damages of any character arising as a result of this License or
+out of the use or inability to use the Work (including but not limited to
+damages for loss of goodwill, work stoppage, computer failure or malfunction, or
+any and all other commercial damages or losses), even if such Contributor has
+been advised of the possibility of such damages.
+
+#### 9. Accepting Warranty or Additional Liability
+
+While redistributing the Work or Derivative Works thereof, You may choose to
+offer, and charge a fee for, acceptance of support, warranty, indemnity, or
+other liability obligations and/or rights consistent with this License. However,
+in accepting such obligations, You may act only on Your own behalf and on Your
+sole responsibility, not on behalf of any other Contributor, and only if You
+agree to indemnify, defend, and hold each Contributor harmless for any liability
+incurred by, or claims asserted against, such Contributor by reason of your
+accepting any such warranty or additional liability.
+
+_END OF TERMS AND CONDITIONS_
+
+### APPENDIX: How to apply the Apache License to your work
+
+To apply the Apache License to your work, attach the following boilerplate
+notice, with the fields enclosed by brackets `[]` replaced with your own
+identifying information. (Don't include the brackets!) The text should be
+enclosed in the appropriate comment syntax for the file format. We also
+recommend that a file or class name and description of purpose be included on
+the same “printed page” as the copyright notice for easier identification within
+third-party archives.
+
+    Copyright [yyyy] [name of copyright owner]
+    
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+    
+      http://www.apache.org/licenses/LICENSE-2.0
+    
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.

package/README.md

@@ -0,0 +1,114 @@
+<div align="center">
+  <img style="height: 100px; margin-bottom: 10px;" src="public/assets/logo.svg" alt="Logo - Fragment UI" />
+</div>
+<div align="center">
+  <h1>Fragment UI (Work in Progress)</h1>
+  <p>Create SaaS UIs with a simple and straightforward design system and component library</p>
+  <a href="https://www.npmjs.org/package/@fragment-build/ui">
+    <img alt="NPM package version" src="https://img.shields.io/github/package-json/v/@fragment-build/ui?label=npm&logo=npm">
+  </a>
+  <a href="https://fragment-build.github.io/fragment-ui/">
+    <img alt="Fragment UI Storybook" src="https://raw.githubusercontent.com/storybookjs/brand/main/badge/badge-storybook.svg">
+  </a>
+</div>
+<div align="center" style="margin: 20px">
+  <a href="https://discord.gg/A4GrRkgpym">
+    <img alt="Fragment UI Discord Server" src="https://img.shields.io/badge/join_discord_-7289da.svg?style=for-the-badge&logo=discord&logoColor=white">
+  </a>
+</div>
+
+---
+
+Fragment UI is a design system and React component library which provides already compositioned views for many SaaS apps which are completely customizable with our powerful theme system.
+
+### Table of Contents
+- [✨ Features](#-features)
+- [✨ Components](#-components)
+- [⏳ Installation](#-installation)
+- [🔧 Configuration](#-configuration)
+- [🤝 Contributing](#-contributing)
+- [👨‍💻 Development](#-development)
+- [🤝 Community support](#-community-support)
+- [📝 License](#-license)
+- [🔧 Built with](#-built-with)
+
+## ✨ Features
+
+- **Global theme file** with design tokens for colors, padding, margin, border-radius
+- **Global event system:** Hook into every click event to trigger analytics/tracking events. All events are already pre-labeled but can be customized.
+- **Accessibility:** All components are already prepared using aria labels and you can also easily use tab to navigate through them
+- **Light / Dark mode compatible:** By design we're supporting ☀️ Light / 🌙 Dark modes
+- **Interactive Theme Builder (soon):** A user interface to create your custom theme file with a real-time preview
+- **Native i18n support (soon):** All components are localized by default but o course you can override this behavior
+
+## ✨ Components
+
+- Roles- & Permission Management
+- User Management
+- Team/Organization management with Invites
+- Payment/Subscription Management
+- Auth pages: Login, Signup, Password reset, Email confirmation
+- Dashboard View with Sidebar and Topbar
+- User Settings
+
+## ⏳ Installation
+
+```bash
+# Yarn
+yarn add @fragment-build/ui
+
+# npm
+npm install -S @fragment-build/ui
+```
+
+As a next step you must configure the library the way you want to. See [**Configuration**](#🔧-configuration) section.
+
+All done. Enjoy 🎉
+
+## 🔧 Configuration
+
+Coming soon.
+
+## 🤝 Contributing
+
+Feel free to fork and make a Pull Request to this project. All the input is warmly welcome!
+
+To increase the amount of PRs being merged asap, we have some guidelines:
+
+1. **Bugfixes**: If it's just a small fix you can just create a PR for it and explain your thoughts if necessary, otherwise use GitHub or Discord to start a discussion before you put a lot of effort into code changes.
+2. **Features**: If you want to add new features, please use GitHub or Discord to start a discussion and we can figure out design and architectural decisions together.
+3. **Breaking Changes**: Please use the `next-major` branch as your base and target branch for your contributions.
+
+
+## 👨‍💻 Development
+- Clone repository
+
+    ```bash
+    git clone git@github.com:fragment-build/fragment-ui.git
+    cd fragment-ui
+    npm install
+    ```
+
+- Run storybook
+
+    ```bash
+    npm run storybook
+    ```
+
+## 🤝 Community support
+
+For additional help, you can use one of these channels to ask a question:
+
+- [Discord](https://discord.gg/A4GrRkgpym) We're present on official Fragment UI Discord. Feel free to use our channels or reach out to us directly.
+- [GitHub](https://github.com/fragment-build/fragment-ui) (Bug reports, Contributions, Questions and Discussions)
+
+## 📝 License
+
+[Apollo 2.0 License](LICENSE.md) Copyright (c) solyd GmbH
+
+## 🔧 Built with
+
+![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
+![NextUI](https://img.shields.io/badge/nextui-000000.svg?style=for-the-badge)
+![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
+![TailwindVariants](https://img.shields.io/badge/tailwind_variants_-000000.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)

package/dist/components/color-input/ColorInput.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { InputProps } from '@nextui-org/react';
+/**
+ * Primary UI component for selecting a color
+ */
+interface ColorInputProps extends InputProps {
+}
+export declare const ColorInput: React.FC<ColorInputProps>;
+export {};

package/dist/components/color-input/ColorInput.jsx

@@ -0,0 +1,26 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Avatar, Input } from '@nextui-org/react';
+import { useEffect, useMemo, useState } from 'react';
+export const ColorInput = (_a) => {
+    var { defaultValue, label = 'Color', errorMessage = "Please enter a valid color in hex format e.g. #f3f or #ff33ff", onValueChange, isInvalid } = _a, rest = __rest(_a, ["defaultValue", "label", "errorMessage", "onValueChange", "isInvalid"]);
+    const [value, setValue] = useState(defaultValue || '#7d7d7d');
+    useEffect(() => onValueChange && onValueChange(value), [value, onValueChange]);
+    const validateHexColor = (value) => value.match(/^#(?:[0-9a-fA-F]{3}){1,2}$/i);
+    const invalid = useMemo(() => {
+        if (value === "")
+            return false;
+        return validateHexColor(value) && !isInvalid ? false : true;
+    }, [value, isInvalid]);
+    return (<Input {...rest} label={label} type="text" value={value} onValueChange={setValue} isInvalid={invalid} errorMessage={invalid && errorMessage} endContent={(<Avatar as="button" size="sm" showFallback fallback={<input type='color' className="w-full h-full opacity-0 cursor-pointer" onChange={(e) => setValue(e.currentTarget.value)}/>} style={{ backgroundColor: value }} classNames={{ base: 'shrink-0', fallback: 'w-full h-full' }}/>)}/>);
+};

package/dist/components/color-input/ColorInput.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ColorInput } from "./ColorInput";
+declare const meta: Meta<typeof ColorInput>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/color-input/ColorInput.stories.jsx

@@ -0,0 +1,14 @@
+import { ColorInput } from "./ColorInput";
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+    title: "components/ColorInput",
+    component: ColorInput,
+    tags: ["autodocs"],
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary = {
+    args: {
+        onValueChange: console.log,
+    },
+};

package/dist/components/color-selector/ColorSelector.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { AvatarProps } from '@nextui-org/react';
+/**
+ * Primary UI component for selecting a color
+ */
+interface ColorSelectorProps {
+    values: string[];
+    defaultValue?: string;
+    onValueChange: (color: string) => void;
+    color?: AvatarProps['color'];
+    size?: AvatarProps['size'];
+    icon?: React.ReactNode;
+}
+export declare const ColorSelector: React.FC<ColorSelectorProps>;
+export {};

package/dist/components/color-selector/ColorSelector.jsx

@@ -0,0 +1,22 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Avatar } from '@nextui-org/react';
+import { useEffect, useState } from 'react';
+export const ColorSelector = (_a) => {
+    var { values, defaultValue, onValueChange, icon } = _a, rest = __rest(_a, ["values", "defaultValue", "onValueChange", "icon"]);
+    const [value, setValue] = useState(defaultValue && values.includes(defaultValue) ? defaultValue : values[0]);
+    useEffect(() => onValueChange(value), [value, onValueChange]);
+    return (<div className='flex gap-4'>
+      {values.map((color) => (<Avatar as="button" showFallback fallback={value === color && icon ? icon : <></>} style={{ backgroundColor: color }} classNames={{ base: 'shrink-0' }} isBordered={value === color} onClick={() => setValue(color)} {...rest}/>))}
+    </div>);
+};

package/dist/components/color-selector/ColorSelector.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ColorSelector } from "./ColorSelector";
+declare const meta: Meta<typeof ColorSelector>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const WithIcon: Story;

package/dist/components/color-selector/ColorSelector.stories.jsx

@@ -0,0 +1,25 @@
+import { ColorSelector } from "./ColorSelector";
+import { IconCheck } from "@tabler/icons-react";
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+    title: "components/ColorSelector",
+    component: ColorSelector,
+    tags: ["autodocs"],
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary = {
+    args: {
+        values: ['red', 'green', 'blue'],
+        onValueChange: console.log,
+        color: 'primary',
+    },
+};
+export const WithIcon = {
+    args: {
+        values: ['red', 'green', 'blue'],
+        onValueChange: console.log,
+        color: 'primary',
+        icon: <IconCheck size={24} stroke={1.5}/>
+    },
+};

package/dist/fragments/shell/Shell.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { SidebarProps } from '../sidebar/Sidebar';
+/**
+ * Primary UI component for Dashboard App Shell
+ */
+interface ShellProps {
+    sidebar: SidebarProps;
+    children: React.ReactNode;
+}
+export declare const Shell: React.FC<ShellProps>;
+export {};

package/dist/fragments/shell/Shell.jsx

@@ -0,0 +1,10 @@
+'use client';
+import { Sidebar } from '../sidebar/Sidebar';
+export const Shell = ({ sidebar, children }) => {
+    return (<div className={`flex min-h-screen`}>
+      <Sidebar {...sidebar}/>
+      <main className="flex-1 px-6 lg:px-12 xl:px-20 py-14 max-w-screen-2xl">
+        {children}
+      </main>
+    </div>);
+};

package/dist/fragments/shell/Shell.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Shell } from "./Shell";
+declare const meta: Meta<typeof Shell>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Collapsed: Story;
+export declare const Auto: Story;
+export declare const WithTable: Story;

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

@@ -0,0 +1,170 @@
+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.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { AvatarProps, DropdownItemProps, DropdownProps, ListboxProps } from '@nextui-org/react';
+/**
+ * Primary UI component for Dashboard Sidebars
+ */
+interface SidebarNavigationItem {
+    label: string;
+    link: string;
+    onClick?: React.MouseEventHandler;
+    icon?: React.ReactNode;
+    endContent?: React.ReactNode;
+    items?: SidebarItemVariants[];
+}
+interface SidebarItem {
+    key: string;
+    align?: 'top' | 'center' | 'bottom';
+}
+interface SidebarItemNavigation extends SidebarItem {
+    type: 'navigation';
+    label?: string;
+    navigation: SidebarNavigationItem[];
+    listboxProps?: Omit<ListboxProps, 'children'>;
+}
+interface SidebarItemUser extends SidebarItem {
+    type: 'user';
+    avatar?: AvatarProps;
+    name: string;
+    description?: string;
+    dropdown?: Omit<DropdownProps, 'children'>;
+    dropdownItems?: (Omit<DropdownItemProps, 'children'> & {
+        label: string;
+    })[];
+}
+interface SidebarItemCustom extends SidebarItem {
+    type: 'custom';
+    render: React.ReactNode;
+    showCollapsed?: boolean;
+}
+type SidebarItemVariants = SidebarItemNavigation | SidebarItemUser | SidebarItemCustom;
+export interface SidebarProps {
+    items: SidebarItemVariants[];
+    layout?: 'collapsed' | 'expanded';
+    autoLayout?: boolean;
+    currentPath?: string;
+}
+export declare const Sidebar: React.FC<SidebarProps>;
+export {};

package/dist/fragments/sidebar/Sidebar.jsx

@@ -0,0 +1,129 @@
+'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>);
+};

package/dist/fragments/sidebar/Sidebar.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Sidebar } from "./Sidebar";
+declare const meta: Meta<typeof Sidebar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Collapsed: Story;
+export declare const Auto: Story;

package/dist/fragments/sidebar/Sidebar.stories.jsx

@@ -0,0 +1,132 @@
+import { Button, Card, Input } from "@nextui-org/react";
+import { IconBox, IconBoxMultiple, IconCirclePlus, IconHome, IconMessageCircle, } from "@tabler/icons-react";
+import { Sidebar } from "./Sidebar";
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+    title: "components/Sidebar",
+    component: Sidebar,
+    // 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: {
+        currentPath: "/projects",
+        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}/>,
+                        endContent: (<Button size="sm" variant="light" isIconOnly>
+                <IconCirclePlus size={18}/>
+              </Button>),
+                        items: [
+                            {
+                                type: "navigation",
+                                key: "navigation-projects",
+                                navigation: [
+                                    {
+                                        label: "Project 1",
+                                        link: "/projects/1",
+                                    },
+                                    {
+                                        label: "Project 2",
+                                        link: "/projects/2",
+                                    },
+                                    {
+                                        label: "Project 3",
+                                        link: "/projects/3",
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        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",
+            },
+        ],
+    },
+};
+export const Collapsed = {
+    args: Object.assign(Object.assign({}, Primary.args), { layout: "collapsed" }),
+};
+export const Auto = {
+    args: Object.assign(Object.assign({}, Primary.args), { autoLayout: true }),
+};

package/dist/hooks/breakpoints.d.ts

@@ -0,0 +1 @@
+export declare const useGreater: (k: "sm" | "md" | "lg" | "xl" | "2xl") => boolean, useBetween: (a: "sm" | "md" | "lg" | "xl" | "2xl", b: "sm" | "md" | "lg" | "xl" | "2xl") => boolean, useSmaller: (k: "sm" | "md" | "lg" | "xl" | "2xl") => boolean;

package/dist/hooks/breakpoints.js

@@ -0,0 +1,2 @@
+import { BreakPointHooks, breakpointsTailwind } from '@react-hooks-library/core';
+export const { useGreater, useBetween, useSmaller } = BreakPointHooks(breakpointsTailwind);

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from '@nextui-org/react';
+export * from './components/color-input/ColorInput';
+export * from './fragments/shell/Shell';
+export * from './fragments/sidebar/Sidebar';

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from '@nextui-org/react';
+export * from './components/color-input/ColorInput';
+export * from './fragments/shell/Shell';
+export * from './fragments/sidebar/Sidebar';

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@fragment-build/ui",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fragment-build/fragment-ui.git"
+  },
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@storybook/addon-a11y": "8.0.0",
+    "@storybook/addon-essentials": "8.0.0",
+    "@storybook/addon-interactions": "8.0.0",
+    "@storybook/addon-links": "8.0.0",
+    "@storybook/addon-styling": "1.3.7",
+    "@storybook/blocks": "8.0.0",
+    "@storybook/react": "8.0.0",
+    "@storybook/react-vite": "8.0.0",
+    "@types/react": "18.2.65",
+    "@types/react-dom": "18.2.21",
+    "@typescript-eslint/eslint-plugin": "7.2.0",
+    "@typescript-eslint/parser": "7.2.0",
+    "@vitejs/plugin-react": "4.2.1",
+    "@vitejs/plugin-react-swc": "3.6.0",
+    "autoprefixer": "10.4.18",
+    "eslint": "8.57.0",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-refresh": "0.4.5",
+    "eslint-plugin-storybook": "0.8.0",
+    "postcss": "8.4.35",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "storybook": "8.0.0",
+    "storybook-dark-mode": "4.0.0",
+    "typescript": "5.4.2",
+    "vite": "5.1.6"
+  },
+  "scripts": {
+    "build": "tsc",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@nextui-org/react": "2.2.10",
+    "@react-hooks-library/core": "0.6.2",
+    "@storybook/test": "8.0.0",
+    "@tabler/icons-react": "3.0.1",
+    "framer-motion": "10.18.0",
+    "react-color-palette": "7.1.0",
+    "tailwindcss": "3.4.1"
+  }
+}