fix(component): Add displayNames for syntax highlighter, resolving #70

Adds `displayName` fields to compound components.
This is essential for the syntax highlighter we
use to display the code needed for each component.

For example, `<ButtonComponent>`, which is invalid,
now becomes `<Button>`, which is ready to copy-paste.

src/components/Avatar/AvatarGroup.tsx

@@ -4,6 +4,9 @@ export type AvatarGroupProps = PropsWithChildren<{
   children: ReactNode;
 }>;
 
-export const AvatarGroup: React.FC<AvatarGroupProps> = ({ children }) => {
+const AvatarGroup: React.FC<AvatarGroupProps> = ({ children }) => {
   return <div className="mb-5 flex -space-x-4">{children}</div>;
 };
+
+AvatarGroup.displayName = 'Avatar.Group';
+export default AvatarGroup;

src/components/Avatar/AvatarGroupCounter.tsx

@@ -5,7 +5,7 @@ export type AvatarGroupdCounterProps = PropsWithChildren<{
   href: string;
 }>;
 
-export const AvatarGroupCounter: React.FC<AvatarGroupdCounterProps> = ({ total, href }) => {
+const AvatarGroupCounter: React.FC<AvatarGroupdCounterProps> = ({ total, href }) => {
   return (
     <a
       className="relative flex h-10 w-10 items-center justify-center rounded-full bg-gray-700 text-xs font-medium text-white ring-2 ring-gray-300 hover:bg-gray-600  dark:ring-gray-500 "
@@ -15,3 +15,6 @@ export const AvatarGroupCounter: React.FC<AvatarGroupdCounterProps> = ({ total,
     </a>
   );
 };
+
+AvatarGroupCounter.displayName = 'Avatar.GroupCounter';
+export default AvatarGroupCounter;

src/components/Avatar/index.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { FC, PropsWithChildren } from 'react';
-import { AvatarGroup } from './AvatarGroup';
-import { AvatarGroupCounter } from './AvatarGroupCounter';
+import AvatarGroup from './AvatarGroup';
+import AvatarGroupCounter from './AvatarGroupCounter';
 
 export type AvatarProps = PropsWithChildren<{
   alt?: string;
@@ -99,6 +99,7 @@ const AvatarComponent: FC<AvatarProps> = ({
   );
 };
 
+AvatarComponent.displayName = 'Avatar';
 export const Avatar = Object.assign(AvatarComponent, {
   Group: AvatarGroup,
   Counter: AvatarGroupCounter,

src/components/Button/ButtonGroup.tsx

@@ -7,7 +7,7 @@ export type ButtonGroupProps = PropsWithChildren<{
   outline?: boolean;
 }>;
 
-export const ButtonGroup: FC<ButtonGroupProps> = ({ children, pill, outline }) => {
+const ButtonGroup: FC<ButtonGroupProps> = ({ children, pill, outline }) => {
   const items = useMemo(
     () =>
       Children.map(children as ReactElement<ButtonComponentProps>[], (child, index) =>
@@ -31,3 +31,6 @@ export const ButtonGroup: FC<ButtonGroupProps> = ({ children, pill, outline }) =
     </div>
   );
 };
+
+ButtonGroup.displayName = 'Button.Group';
+export default ButtonGroup;

src/components/Button/index.tsx

@@ -1,6 +1,6 @@
 import { ComponentProps, FC, ReactNode } from 'react';
 import classNames from 'classnames';
-import { ButtonGroup } from './ButtonGroup';
+import ButtonGroup from './ButtonGroup';
 
 type Color = 'blue' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple';
 type GradientMonochrome = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple';
@@ -152,6 +152,7 @@ const ButtonComponent: FC<ButtonComponentProps> = ({
   </button>
 );
 
+ButtonComponent.displayName = 'Button';
 export const Button = Object.assign(ButtonComponent, {
   Group: ButtonGroup,
 });