diff --git a/src/components/base/Accordion.ts b/src/components/base/Accordion.ts new file mode 100644 index 0000000..dab0ad1 --- /dev/null +++ b/src/components/base/Accordion.ts @@ -0,0 +1,8 @@ +import { + Accordion as NextAccordion, + AccordionItem as NextAccordionItem, +} from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Accordion = withFragment(NextAccordion, 'accordion'); +export const AccordionItem = withFragment(NextAccordionItem, 'accordionItem'); diff --git a/src/components/base/Autocomplete.ts b/src/components/base/Autocomplete.ts new file mode 100644 index 0000000..67d039d --- /dev/null +++ b/src/components/base/Autocomplete.ts @@ -0,0 +1,10 @@ +import { + Autocomplete as NextAutocomplete, + AutocompleteItem as NextAutocompleteItem, + AutocompleteSection as NextAutocompleteSection, +} from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Autocomplete = withFragment(NextAutocomplete, 'autocomplete'); +export const AutocompleteItem = withFragment(NextAutocompleteItem, 'autocompleteItem'); +export const AutocompleteSection = withFragment(NextAutocompleteSection, 'autocompleteSection'); diff --git a/src/components/base/Avatar.ts b/src/components/base/Avatar.ts new file mode 100644 index 0000000..1214862 --- /dev/null +++ b/src/components/base/Avatar.ts @@ -0,0 +1,8 @@ +import { + Avatar as NextAvatar, + AvatarGroup as NextAvatarGroup, +} from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Avatar = withFragment(NextAvatar, 'avatar'); +export const AvatarGroup = withFragment(NextAvatarGroup, 'avatarGroup'); diff --git a/src/components/base/Badge.ts b/src/components/base/Badge.ts new file mode 100644 index 0000000..57fd4d4 --- /dev/null +++ b/src/components/base/Badge.ts @@ -0,0 +1,4 @@ +import { Badge as NextBadge } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Badge = withFragment(NextBadge, 'badge'); diff --git a/src/components/base/Breadcrumbs.ts b/src/components/base/Breadcrumbs.ts new file mode 100644 index 0000000..4c1f49c --- /dev/null +++ b/src/components/base/Breadcrumbs.ts @@ -0,0 +1,8 @@ +import { + Breadcrumbs as NextBreadcrumbs, + BreadcrumbItem as NextBreadcrumbItem, +} from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Breadcrumbs = withFragment(NextBreadcrumbs, 'breadcrumbs'); +export const BreadcrumbItem = withFragment(NextBreadcrumbItem, 'breadcrumbItem'); diff --git a/src/components/base/Button.ts b/src/components/base/Button.ts new file mode 100644 index 0000000..53defd6 --- /dev/null +++ b/src/components/base/Button.ts @@ -0,0 +1,4 @@ +import { Button as NextButton } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Button = withFragment(NextButton, 'button'); diff --git a/src/components/base/Card.ts b/src/components/base/Card.ts new file mode 100644 index 0000000..13b9ec8 --- /dev/null +++ b/src/components/base/Card.ts @@ -0,0 +1,5 @@ +import { Card as NextCard } from '@nextui-org/react'; +import { withFragment } from '../../withFragment'; + +export const Card = withFragment(NextCard, 'card'); +export { CardBody, CardFooter, CardHeader } from '@nextui-org/react'; diff --git a/src/components/base/Checkbox.ts b/src/components/base/Checkbox.ts new file mode 100644 index 0000000..434651f --- /dev/null +++ b/src/components/base/Checkbox.ts @@ -0,0 +1,8 @@ +import { + Checkbox as NextCheckbox, + Checkbox as NextCheckboxGroup, +} from '@nextui-org/react'; +import { withFragment } from '../../withFragment'; + +export const Checkbox = withFragment(NextCheckbox, 'checkbox'); +export const CheckboxGroup = withFragment(NextCheckboxGroup, 'checkboxGroup'); diff --git a/src/components/base/Chip.ts b/src/components/base/Chip.ts new file mode 100644 index 0000000..b6f157f --- /dev/null +++ b/src/components/base/Chip.ts @@ -0,0 +1,4 @@ +import { Chip as NextChip } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Chip = withFragment(NextChip, 'chip'); diff --git a/src/components/base/CircularProgress.ts b/src/components/base/CircularProgress.ts new file mode 100644 index 0000000..c61dde7 --- /dev/null +++ b/src/components/base/CircularProgress.ts @@ -0,0 +1,4 @@ +import { CircularProgress as NextCircularProgress } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const CircularProgress = withFragment(NextCircularProgress, 'circularProgress'); diff --git a/src/components/base/Code.ts b/src/components/base/Code.ts new file mode 100644 index 0000000..a46ba5a --- /dev/null +++ b/src/components/base/Code.ts @@ -0,0 +1,4 @@ +import { Code as NextCode } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Code = withFragment(NextCode, 'code'); diff --git a/src/components/base/Divider.ts b/src/components/base/Divider.ts new file mode 100644 index 0000000..fcf2f2a --- /dev/null +++ b/src/components/base/Divider.ts @@ -0,0 +1,4 @@ +import { Divider as NextDivider } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Divider = withFragment(NextDivider, 'divider'); diff --git a/src/components/base/Dropdown.ts b/src/components/base/Dropdown.ts new file mode 100644 index 0000000..fd0ae32 --- /dev/null +++ b/src/components/base/Dropdown.ts @@ -0,0 +1,14 @@ +import { + Dropdown as NextDropdown, + DropdownItem as NextDropdownItem, + DropdownMenu as NextDropdownMenu, + DropdownSection as NextDropdownSection, + DropdownTrigger as NextDropdownTrigger, +} from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Dropdown = withFragment(NextDropdown, 'dropdown'); +export const DropdownItem = withFragment(NextDropdownItem, 'dropdownItem'); +export const DropdownMenu = withFragment(NextDropdownMenu, 'dropdownMenu'); +export const DropdownSection = withFragment(NextDropdownSection, 'dropdownSection'); +export const DropdownTrigger = withFragment(NextDropdownTrigger, 'dropdownTrigger'); diff --git a/src/components/base/Image.ts b/src/components/base/Image.ts new file mode 100644 index 0000000..ce93f5e --- /dev/null +++ b/src/components/base/Image.ts @@ -0,0 +1,4 @@ +import { Image as NextImage } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Image = withFragment(NextImage, 'image'); diff --git a/src/components/base/Input.ts b/src/components/base/Input.ts new file mode 100644 index 0000000..d5c5735 --- /dev/null +++ b/src/components/base/Input.ts @@ -0,0 +1,4 @@ +import { Input as NextInput } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Input = withFragment(NextInput, 'input'); diff --git a/src/components/base/Kbd.ts b/src/components/base/Kbd.ts new file mode 100644 index 0000000..9e3837c --- /dev/null +++ b/src/components/base/Kbd.ts @@ -0,0 +1,4 @@ +import { Kbd as NextKbd } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Kbd = withFragment(NextKbd, 'kbd'); diff --git a/src/components/base/Link.ts b/src/components/base/Link.ts new file mode 100644 index 0000000..cb08aa0 --- /dev/null +++ b/src/components/base/Link.ts @@ -0,0 +1,4 @@ +import { Link as NextLink } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Link = withFragment(NextLink, 'link'); diff --git a/src/components/base/Listbox.ts b/src/components/base/Listbox.ts new file mode 100644 index 0000000..e208a93 --- /dev/null +++ b/src/components/base/Listbox.ts @@ -0,0 +1,10 @@ +import { + Listbox as NextListbox, + ListboxItem as NextListboxItem, + ListboxSection as NextListboxSection, +} from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Listbox = withFragment(NextListbox, 'listbox'); +export const ListboxItem = withFragment(NextListboxItem, 'listboxItem'); +export const ListboxSection = withFragment(NextListboxSection, 'listboxSection'); diff --git a/src/components/base/Modal.ts b/src/components/base/Modal.ts new file mode 100644 index 0000000..c3dcc74 --- /dev/null +++ b/src/components/base/Modal.ts @@ -0,0 +1,14 @@ +import { + Modal as NextModal, + ModalBody as NextModalBody, + ModalContent as NextModalContent, + ModalFooter as NextModalFooter, + ModalHeader as NextModalHeader, +} from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Modal = withFragment(NextModal, 'modal'); +export const ModalBody = withFragment(NextModalBody, 'modalBody'); +export const ModalContent = withFragment(NextModalContent, 'modalContent'); +export const ModalFooter = withFragment(NextModalFooter, 'modalFooter'); +export const ModalHeader = withFragment(NextModalHeader, 'modalHeader'); diff --git a/src/components/base/Navbar.ts b/src/components/base/Navbar.ts new file mode 100644 index 0000000..fa6eb19 --- /dev/null +++ b/src/components/base/Navbar.ts @@ -0,0 +1,18 @@ +import { + Navbar as NextNavbar, + NavbarBrand as NextNavbarBrand, + NavbarContent as NextNavbarContent, + NavbarItem as NextNavbarItem, + NavbarMenu as NextNavbarMenu, + NavbarMenuItem as NextNavbarMenuItem, + NavbarMenuToggle as NextNavbarMenuToggle, +} from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Navbar = withFragment(NextNavbar, 'navbar'); +export const NavbarBrand = withFragment(NextNavbarBrand, 'navbarBrand'); +export const NavbarContent = withFragment(NextNavbarContent, 'navbarContent'); +export const NavbarItem = withFragment(NextNavbarItem, 'navbarItem'); +export const NavbarMenu = withFragment(NextNavbarMenu, 'navbarMenu'); +export const NavbarMenuItem = withFragment(NextNavbarMenuItem, 'navbarMenuItem'); +export const NavbarMenuToggle = withFragment(NextNavbarMenuToggle, 'navbarMenuToggle'); diff --git a/src/components/base/Pagination.ts b/src/components/base/Pagination.ts new file mode 100644 index 0000000..9335e57 --- /dev/null +++ b/src/components/base/Pagination.ts @@ -0,0 +1,10 @@ +import { + Pagination as NextPagination, + PaginationItem as NextPaginationItem, + PaginationCursor as NextPaginationCursor, +} from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Pagination = withFragment(NextPagination, 'pagination'); +export const PaginationItem = withFragment(NextPaginationItem, 'paginationItem'); +export const PaginationCursor = withFragment(NextPaginationCursor, 'paginationCursor'); diff --git a/src/components/base/Popover.ts b/src/components/base/Popover.ts new file mode 100644 index 0000000..91a02b2 --- /dev/null +++ b/src/components/base/Popover.ts @@ -0,0 +1,10 @@ +import { + Popover as NextPopover, + PopoverContent as NextPopoverContent, + PopoverTrigger as NextPopoverTrigger, +} from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Popover = withFragment(NextPopover, 'popover'); +export const PopoverContent = withFragment(NextPopoverContent, 'popoverContent'); +export const PopoverTrigger = withFragment(NextPopoverTrigger, 'popoverTrigger'); diff --git a/src/components/base/Progress.ts b/src/components/base/Progress.ts new file mode 100644 index 0000000..b26c86b --- /dev/null +++ b/src/components/base/Progress.ts @@ -0,0 +1,4 @@ +import { Progress as NextProgress } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Progress = withFragment(NextProgress, 'progress'); diff --git a/src/components/base/Radio.ts b/src/components/base/Radio.ts new file mode 100644 index 0000000..f2fa44a --- /dev/null +++ b/src/components/base/Radio.ts @@ -0,0 +1,8 @@ +import { + Radio as NextRadio, + RadioGroup as NextRadioGroup, +} from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Radio = withFragment(NextRadio, 'radio'); +export const RadioGroup = withFragment(NextRadioGroup, 'radioGroup'); diff --git a/src/components/base/ScrollShadow.ts b/src/components/base/ScrollShadow.ts new file mode 100644 index 0000000..1e17a23 --- /dev/null +++ b/src/components/base/ScrollShadow.ts @@ -0,0 +1,4 @@ +import { ScrollShadow as NextScrollShadow } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const ScrollShadow = withFragment(NextScrollShadow, 'scrollShadow'); diff --git a/src/components/base/Select.ts b/src/components/base/Select.ts new file mode 100644 index 0000000..07d8d9c --- /dev/null +++ b/src/components/base/Select.ts @@ -0,0 +1,10 @@ +import { + Select as NextSelect, + SelectItem as NextSelectItem, + SelectSection as NextSelectSection, +} from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Select = withFragment(NextSelect, 'select'); +export const SelectItem = withFragment(NextSelectItem, 'selectItem'); +export const SelectSection = withFragment(NextSelectSection, 'selectSection'); diff --git a/src/components/base/Skeleton.ts b/src/components/base/Skeleton.ts new file mode 100644 index 0000000..f142fb9 --- /dev/null +++ b/src/components/base/Skeleton.ts @@ -0,0 +1,4 @@ +import { Skeleton as NextSkeleton } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Skeleton = withFragment(NextSkeleton, 'skeleton'); diff --git a/src/components/base/Slider.ts b/src/components/base/Slider.ts new file mode 100644 index 0000000..05e7148 --- /dev/null +++ b/src/components/base/Slider.ts @@ -0,0 +1,4 @@ +import { Slider as NextSlider } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Slider = withFragment(NextSlider, 'slider'); diff --git a/src/components/base/Snippet.ts b/src/components/base/Snippet.ts new file mode 100644 index 0000000..dd3815f --- /dev/null +++ b/src/components/base/Snippet.ts @@ -0,0 +1,4 @@ +import { Snippet as NextSnippet } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Snippet = withFragment(NextSnippet, 'snippet'); diff --git a/src/components/base/Spacer.ts b/src/components/base/Spacer.ts new file mode 100644 index 0000000..1bf3547 --- /dev/null +++ b/src/components/base/Spacer.ts @@ -0,0 +1,4 @@ +import { Spacer as NextSpacer } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Spacer = withFragment(NextSpacer, 'spacer'); diff --git a/src/components/base/Spinner.ts b/src/components/base/Spinner.ts new file mode 100644 index 0000000..28f8e05 --- /dev/null +++ b/src/components/base/Spinner.ts @@ -0,0 +1,4 @@ +import { Spinner as NextSpinner } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Spinner = withFragment(NextSpinner, 'spinner'); diff --git a/src/components/base/Switch.ts b/src/components/base/Switch.ts new file mode 100644 index 0000000..b552d71 --- /dev/null +++ b/src/components/base/Switch.ts @@ -0,0 +1,4 @@ +import { Switch as NextSwitch } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Switch = withFragment(NextSwitch, 'switch'); diff --git a/src/components/base/Tab.ts b/src/components/base/Tab.ts new file mode 100644 index 0000000..a59a23a --- /dev/null +++ b/src/components/base/Tab.ts @@ -0,0 +1,8 @@ +import { + Tab as NextTab, + Tabs as NextTabs, +} from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Tab = withFragment(NextTab, 'tab'); +export const Tabs = withFragment(NextTabs, 'tabs'); diff --git a/src/components/table/Table.ts b/src/components/base/Table.ts similarity index 100% rename from src/components/table/Table.ts rename to src/components/base/Table.ts diff --git a/src/components/base/Textarea.ts b/src/components/base/Textarea.ts new file mode 100644 index 0000000..8784dfe --- /dev/null +++ b/src/components/base/Textarea.ts @@ -0,0 +1,4 @@ +import { Textarea as NextTextarea } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Textarea = withFragment(NextTextarea, 'textArea'); diff --git a/src/components/base/Tooltip.ts b/src/components/base/Tooltip.ts new file mode 100644 index 0000000..6f28412 --- /dev/null +++ b/src/components/base/Tooltip.ts @@ -0,0 +1,4 @@ +import { Tooltip as NextTooltip } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const Tooltip = withFragment(NextTooltip, 'tooltip'); diff --git a/src/components/base/User.ts b/src/components/base/User.ts new file mode 100644 index 0000000..99fe402 --- /dev/null +++ b/src/components/base/User.ts @@ -0,0 +1,4 @@ +import { User as NextUser } from '@nextui-org/react' +import { withFragment } from '../../withFragment' + +export const User = withFragment(NextUser, 'user'); diff --git a/src/components/base/index.ts b/src/components/base/index.ts new file mode 100644 index 0000000..f55dc6f --- /dev/null +++ b/src/components/base/index.ts @@ -0,0 +1,37 @@ +export * from './Accordion' +export * from './Autocomplete' +export * from './Avatar' +export * from './Badge' +export * from './Breadcrumbs' +export * from './Button' +export * from './Card' +export * from './Checkbox' +export * from './Chip' +export * from './CircularProgress' +export * from './Code' +export * from './Divider' +export * from './Dropdown' +export * from './Image' +export * from './Input' +export * from './Kbd' +export * from './Link' +export * from './Listbox' +export * from './Modal' +export * from './Navbar' +export * from './Pagination' +export * from './Popover' +export * from './Progress' +export * from './Radio' +export * from './ScrollShadow' +export * from './Select' +export * from './Skeleton' +export * from './Slider' +export * from './Snippet' +export * from './Spacer' +export * from './Spinner' +export * from './Switch' +export * from './Tab' +export * from './Table' +export * from './Textarea' +export * from './Tooltip' +export * from './User' diff --git a/src/components/color-input/ColorInput.tsx b/src/components/color-input/ColorInput.tsx index 396afcc..caf7d1a 100644 --- a/src/components/color-input/ColorInput.tsx +++ b/src/components/color-input/ColorInput.tsx @@ -1,15 +1,15 @@ -'use client'; - -import { Avatar, Input, InputProps } from '@nextui-org/react'; +import type { InputProps } from '@nextui-org/react'; import { useEffect, useMemo, useState } from 'react'; +import { Avatar, Input } from '../base'; +import { withFragment } from '../../withFragment'; /** * Primary UI component for selecting a color */ -interface ColorInputProps extends InputProps {} +export interface ColorInputProps extends InputProps {} -export const ColorInput: React.FC = ({ +export const ColorInput: React.FC = withFragment(({ defaultValue, label = 'Color', errorMessage = "Please enter a valid color in hex format e.g. #f3f or #ff33ff", @@ -50,4 +50,4 @@ export const ColorInput: React.FC = ({ )} /> ); -}; +}, 'colorInput'); diff --git a/src/components/color-selector/ColorSelector.tsx b/src/components/color-selector/ColorSelector.tsx index 652764f..5bbecb6 100644 --- a/src/components/color-selector/ColorSelector.tsx +++ b/src/components/color-selector/ColorSelector.tsx @@ -1,13 +1,13 @@ -'use client'; - -import { Avatar, AvatarProps } from '@nextui-org/react'; +import type { AvatarProps } from '@nextui-org/react'; import { useEffect, useState } from 'react'; +import { Avatar } from '../base'; +import { withFragment } from '../../withFragment'; /** * Primary UI component for selecting a color */ -interface ColorSelectorProps { +export interface ColorSelectorProps { values: string[]; defaultValue?: string; onValueChange: (color: string) => void; @@ -16,7 +16,7 @@ interface ColorSelectorProps { icon?: React.ReactNode; } -export const ColorSelector: React.FC = ({ values, defaultValue, onValueChange, icon, ...rest }) => { +export const ColorSelector: React.FC = withFragment(({ values, defaultValue, onValueChange, icon, ...rest }) => { const [value, setValue] = useState(defaultValue && values.includes(defaultValue) ? defaultValue : values[0]); useEffect(() => onValueChange(value), [value, onValueChange]); @@ -37,4 +37,4 @@ export const ColorSelector: React.FC = ({ values, defaultVal ))} ); -}; +}, 'colorSelector'); diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 0000000..09eafad --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,3 @@ +export * from './base'; +export * from './color-input/ColorInput'; +export * from './color-selector/ColorSelector'; diff --git a/src/context.ts b/src/context.ts index 975950e..aa77a47 100644 --- a/src/context.ts +++ b/src/context.ts @@ -1,23 +1,100 @@ -import { TableBodyProps, TableCellProps, TableColumnProps, TableHeaderProps, TableProps } from "@nextui-org/react"; +import { AccordionItemProps, AccordionProps, AutocompleteItemProps, AutocompleteProps, AutocompleteSectionProps, AvatarGroupProps, AvatarProps, BadgeProps, BreadcrumbItemProps, BreadcrumbsProps, ButtonProps, CardProps, CheckboxGroupProps, CheckboxProps, ChipProps, CircularProgressProps, CodeProps, DividerProps, DropdownItemProps, DropdownMenuProps, DropdownProps, DropdownSectionProps, DropdownTriggerProps, ImageProps, InputProps, KbdProps, LinkProps, ListboxItemProps, ListboxProps, ListboxSectionProps, ModalBodyProps, ModalContentProps, ModalFooterProps, ModalHeaderProps, ModalProps, NavbarBrandProps, NavbarContentProps, NavbarItemProps, NavbarMenuItemProps, NavbarMenuProps, NavbarMenuToggleProps, NavbarProps, PaginationCursorProps, PaginationItemProps, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupProps, RadioProps, ScrollShadowProps, SelectItemProps, SelectProps, SelectSectionProps, SkeletonProps, SliderProps, SnippetProps, SpacerProps, SpinnerProps, SwitchProps, TabItemProps, TableBodyProps, TableCellProps, TableColumnProps, TableHeaderProps, TableProps, TabsProps, TextAreaProps, TooltipProps, UserProps } from "@nextui-org/react"; import { TableRowProps } from "@nextui-org/table/dist/base/table-row"; import { createContext } from "react"; +import { ColorInputProps, ColorSelectorProps } from "./components"; export interface FragmentUIContext { defaults: { + avatar?: Partial; + avatarGroup?: Partial; + accordion?: Partial; + accordionItem?: Partial; + autocomplete?: Partial; + autocompleteItem?: Partial; + autocompleteSection?: Partial; + badge?: Partial; + button?: Partial; + breadcrumbs?: Partial; + breadcrumbItem?: Partial; + card?: Partial; + checkbox?: Partial; + checkboxGroup?: Partial; + chip?: Partial; + circularProgress?: Partial; + code?: Partial; + colorInput?: Partial; + colorSelector?: Partial; + divider?: Partial; + dropdown?: Partial; + dropdownItem?: Partial; + dropdownMenu?: Partial; + dropdownSection?: Partial; + dropdownTrigger?: Partial; + image?: Partial; + input?: Partial; + kbd?: Partial; + link?: Partial; + listbox?: Partial; + listboxItem?: Partial; + listboxSection?: Partial; + modal?: Partial; + modalBody?: Partial; + modalContent?: Partial; + modalFooter?: Partial; + modalHeader?: Partial; + navbar?: Partial; + navbarBrand?: Partial; + navbarContent?: Partial; + navbarItem?: Partial; + navbarMenu?: Partial; + navbarMenuItem?: Partial; + navbarMenuToggle?: Partial; + pagination?: Partial; + paginationItem?: Partial; + paginationCursor?: Partial; + popover?: Partial; + popoverContent?: Partial; + popoverTrigger?: Partial; + progress?: Partial; + radio?: Partial; + radioGroup?: Partial; + select?: Partial; + selectItem?: Partial; + selectSection?: Partial; + skeleton?: Partial; + snippet?: Partial; + scrollShadow?: Partial; + spacer?: Partial; + spinner?: Partial; + switch?: Partial; + slider?: Partial; table?: Partial; tableBody?: Partial>; tableCell?: Partial; tableColumn?: Partial>; tableHeader?: Partial>; tableRow?: Partial; + tab?: Partial; + tabs?: Partial; + textArea?: Partial; + tooltip?: Partial; + user?: Partial; } } export const defaultContext: FragmentUIContext = { defaults: { + avatar: { + radius: 'full', + }, table: { removeWrapper: true, }, + user: { + avatarProps: { + radius: 'full', + }, + }, }, } diff --git a/src/fragments/index.ts b/src/fragments/index.ts new file mode 100644 index 0000000..261954e --- /dev/null +++ b/src/fragments/index.ts @@ -0,0 +1,2 @@ +export * from './shell/Shell'; +export * from './sidebar/Sidebar'; diff --git a/src/fragments/shell/Shell.stories.tsx b/src/fragments/shell/Shell.stories.tsx index ba7fd01..3b4fca9 100644 --- a/src/fragments/shell/Shell.stories.tsx +++ b/src/fragments/shell/Shell.stories.tsx @@ -1,12 +1,4 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { - Card, - CardBody, - Divider, - Input, - Tab, - Tabs, -} from "@nextui-org/react"; import { IconBox, IconBoxMultiple, @@ -15,13 +7,19 @@ import { } from "@tabler/icons-react"; import { Shell } from "./Shell"; import { + Card, + CardBody, + Divider, + Input, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, -} from "../../components/table/Table"; + Tab, + Tabs +} from "../../components/base"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { diff --git a/src/fragments/shell/Shell.tsx b/src/fragments/shell/Shell.tsx index 4cb37c9..0a264d5 100644 --- a/src/fragments/shell/Shell.tsx +++ b/src/fragments/shell/Shell.tsx @@ -1,5 +1,3 @@ -'use client'; - import { Sidebar, SidebarProps } from '../sidebar/Sidebar'; /** diff --git a/src/fragments/sidebar/Sidebar.stories.tsx b/src/fragments/sidebar/Sidebar.stories.tsx index be0faac..b1ef2a9 100644 --- a/src/fragments/sidebar/Sidebar.stories.tsx +++ b/src/fragments/sidebar/Sidebar.stories.tsx @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { Button, Card, Input } from "@nextui-org/react"; import { IconBell, IconBox, @@ -9,6 +8,7 @@ import { IconMessageCircle, } from "@tabler/icons-react"; import { Sidebar } from "./Sidebar"; +import { Button, Card, Input } from "../../components/base"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { diff --git a/src/fragments/sidebar/Sidebar.tsx b/src/fragments/sidebar/Sidebar.tsx index 402f395..000efff 100644 --- a/src/fragments/sidebar/Sidebar.tsx +++ b/src/fragments/sidebar/Sidebar.tsx @@ -1,29 +1,29 @@ -'use client'; +import type { + AvatarProps, + DropdownItemProps, + DropdownProps, + ListboxProps, +} from '@nextui-org/react'; +import { useSmaller } from '../../hooks/breakpoints'; +import { IconChevronLeft } from '@tabler/icons-react'; +import { useEffect, useState } from 'react'; import { - Avatar, - AvatarProps, + Avatar, Badge, Button, Chip, Dropdown, DropdownItem, - DropdownItemProps, DropdownMenu, - DropdownProps, DropdownTrigger, Listbox, ListboxItem, - ListboxProps, ListboxSection, ScrollShadow, Tooltip, User, -} from '@nextui-org/react'; - -import { useSmaller } from '../../hooks/breakpoints'; -import { IconChevronLeft } from '@tabler/icons-react'; -import { useEffect, useState } from 'react'; +} from '../../components/base'; /** * Primary UI component for Dashboard Sidebars diff --git a/src/hooks/index.ts b/src/hooks/index.ts new file mode 100644 index 0000000..781b1e2 --- /dev/null +++ b/src/hooks/index.ts @@ -0,0 +1 @@ +export * from './breakpoints' \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index d70fafd..671ce5f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,13 +1,8 @@ -export * from '@nextui-org/react'; export * from "next-themes"; -export * from './components/color-input/ColorInput'; -export * from './components/color-selector/ColorSelector'; - -export * from './fragments/shell/Shell'; -export * from './fragments/sidebar/Sidebar'; - -export * from './hooks/breakpoints'; +export * from './components'; +export * from './fragments'; +export * from './hooks'; export * from './provider'; export * from './tailwind.plugin'; diff --git a/src/withFragment.tsx b/src/withFragment.tsx index d498928..16833ab 100644 --- a/src/withFragment.tsx +++ b/src/withFragment.tsx @@ -1,16 +1,18 @@ import { useContext } from "react"; +import deepMerge from "deepmerge"; import { FragmentUIContext } from "./context"; -export const withFragment =

(Component: React.ComponentType

, configId: keyof FragmentUIContext['defaults']) => { - const ComponentWithContext = (props: P) => { +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export function withFragment

>(Component: P, configId: keyof FragmentUIContext['defaults']): P { + const ComponentWithContext = (props: React.ComponentProps

) => { const context = useContext(FragmentUIContext); - return + return (context['defaults'][configId] as React.ComponentProps

|| {}, props) as React.ComponentProps

}/> }; // fix react-aria collection if ('getCollectionNode' in Component) { - ComponentWithContext.getCollectionNode = Component.getCollectionNode; + (ComponentWithContext as typeof Component).getCollectionNode = Component.getCollectionNode; } - return ComponentWithContext; -}; + return ComponentWithContext as P; +}