Merge branch 'with-fragment'

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');

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');

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');

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');

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');

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');

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';

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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'

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<ColorInputProps> = ({
+export const ColorInput: React.FC<ColorInputProps> = 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<ColorInputProps> = ({
       )}
     />
   );
-};
+}, 'colorInput');

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<ColorSelectorProps> = ({ values, defaultValue, onValueChange, icon, ...rest }) => {
+export const ColorSelector: React.FC<ColorSelectorProps> = 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<ColorSelectorProps> = ({ values, defaultVal
       ))}
     </div>
   );
-};
+}, 'colorSelector');

src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './base';
+export * from './color-input/ColorInput';
+export * from './color-selector/ColorSelector';