@linktr.ee/messaging-react 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",
@@ -14,7 +14,8 @@
   },
   "license": "UNLICENSED",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
     "build": "vite build",
@@ -60,7 +61,7 @@
     "react-dom": "^18.3.1",
     "storybook": "^8.5.0",
     "stream-chat": "^9.22.1",
-    "tailwindcss": "3.2.7",
+    "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.9.2",
     "vite": "^6.0.7",
@@ -74,4 +75,4 @@
     "stream-chat": "^9.22.1",
     "stream-chat-react": "^13.9.0"
   }
-}
+}

package/src/components/ActionButton/ActionButton.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import ActionButton from '.'
+import React from 'react'
+
+
+type ComponentProps = React.ComponentProps<typeof ActionButton>
+
+const meta: Meta<ComponentProps> = {
+  title: 'ActionButton',
+  component: ActionButton,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    onClick: { action: 'clicked' },
+  },
+}
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => {
+  return (
+    <div className="p-12">
+      <ActionButton {...args} />
+    </div>
+  )
+}
+
+export const Default: StoryFn<ComponentProps> = Template.bind({})
+Default.args = {
+  children: 'Default Button',
+  variant: 'default',
+}
+
+export const Danger: StoryFn<ComponentProps> = Template.bind({})
+Danger.args = {
+  children: 'Delete',
+  variant: 'danger',
+}
+
+export const Disabled: StoryFn<ComponentProps> = Template.bind({})
+Disabled.args = {
+  children: 'Disabled Button',
+  variant: 'default',
+  disabled: true,
+}
+

package/src/components/ActionButton/ActionButton.test.tsx

@@ -0,0 +1,112 @@
+import { describe, it, expect, vi } from 'vitest';
+import { renderWithProviders, screen, userEvent } from '../../test/utils';
+import ActionButton from '.';
+
+describe('ActionButton', () => {
+  describe('Rendering', () => {
+    it('renders with children text', () => {
+      renderWithProviders(<ActionButton>Click me</ActionButton>);
+      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+    });
+
+    it('renders with default variant', () => {
+      renderWithProviders(<ActionButton>Default</ActionButton>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('text-charcoal');
+    });
+
+    it('renders with danger variant', () => {
+      renderWithProviders(<ActionButton variant="danger">Delete</ActionButton>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('text-danger');
+    });
+
+    it('has full width by default', () => {
+      renderWithProviders(<ActionButton>Full Width</ActionButton>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('w-full');
+    });
+  });
+
+  describe('Disabled State', () => {
+    it('is disabled when disabled prop is true', () => {
+      renderWithProviders(<ActionButton disabled>Disabled</ActionButton>);
+      const button = screen.getByRole('button');
+      expect(button).toBeDisabled();
+    });
+
+    it('does not trigger onClick when disabled', async () => {
+      const handleClick = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <ActionButton disabled onClick={handleClick}>
+          Disabled
+        </ActionButton>
+      );
+
+      const button = screen.getByRole('button');
+      await user.click(button);
+
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+
+    it('applies disabled styles', () => {
+      renderWithProviders(<ActionButton disabled>Disabled</ActionButton>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('disabled:opacity-60');
+      expect(button).toHaveClass('disabled:cursor-not-allowed');
+    });
+  });
+
+  describe('Click Handling', () => {
+    it('calls onClick when clicked', async () => {
+      const handleClick = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<ActionButton onClick={handleClick}>Click me</ActionButton>);
+
+      const button = screen.getByRole('button');
+      await user.click(button);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Type Attribute', () => {
+    it('has button type by default', () => {
+      renderWithProviders(<ActionButton>Default Type</ActionButton>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('type', 'button');
+    });
+
+    it('can have submit type', () => {
+      renderWithProviders(<ActionButton type="submit">Submit</ActionButton>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('type', 'submit');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('is keyboard accessible', async () => {
+      const handleClick = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<ActionButton onClick={handleClick}>Press me</ActionButton>);
+
+      const button = screen.getByRole('button');
+      button.focus();
+      await user.keyboard('{Enter}');
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('can be focused', () => {
+      renderWithProviders(<ActionButton>Focus me</ActionButton>);
+      const button = screen.getByRole('button');
+      button.focus();
+      expect(button).toHaveFocus();
+    });
+  });
+});
+

package/src/components/ActionButton/index.tsx

@@ -0,0 +1,33 @@
+import classNames from "classnames";
+import React from "react";
+
+interface ActionButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "danger";
+}
+
+const ActionButton = ({
+  variant = "default",
+  className,
+  children,
+  ...rest
+}: ActionButtonProps) => {
+  const isDanger = variant === "danger";
+  return (
+    <button
+      type="button"
+      className={classNames(
+        "flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm transition-colors focus-ring disabled:cursor-not-allowed disabled:opacity-60",
+        isDanger
+          ? "text-danger hover:bg-danger/50"
+          : "text-charcoal hover:bg-sand",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default ActionButton;

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,144 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { Avatar } from './index'
+import React from 'react'
+
+type ComponentProps = React.ComponentProps<typeof Avatar>
+
+const meta: Meta<ComponentProps> = {
+  title: 'Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered'
+  }
+}
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => {
+  return (
+    <div className="p-12">
+      <Avatar {...args} />
+    </div>
+  )
+}
+
+export const Default: StoryFn<ComponentProps> = Template.bind({})
+Default.args = {
+  id: 'user-1',
+  name: 'Alice Johnson',
+  image: 'https://i.pravatar.cc/150?img=1',
+}
+
+export const WithoutImage: StoryFn<ComponentProps> = Template.bind({})
+WithoutImage.args = {
+  id: 'user-2',
+  name: 'Bob Smith',
+}
+
+export const SmallSize: StoryFn<ComponentProps> = Template.bind({})
+SmallSize.args = {
+  id: 'user-3',
+  name: 'Carol Williams',
+  size: 20,
+}
+
+export const MediumSize: StoryFn<ComponentProps> = Template.bind({})
+MediumSize.args = {
+  id: 'user-4',
+  name: 'David Brown',
+  size: 32,
+}
+
+export const DefaultSize: StoryFn<ComponentProps> = Template.bind({})
+DefaultSize.args = {
+  id: 'user-5',
+  name: 'Emma Davis',
+  size: 40,
+}
+
+export const LargeSize: StoryFn<ComponentProps> = Template.bind({})
+LargeSize.args = {
+  id: 'user-6',
+  name: 'Frank Miller',
+  size: 56,
+}
+
+export const ExtraLargeSize: StoryFn<ComponentProps> = Template.bind({})
+ExtraLargeSize.args = {
+  id: 'user-7',
+  name: 'Grace Lee',
+  size: 80,
+}
+
+export const LongName: StoryFn<ComponentProps> = Template.bind({})
+LongName.args = {
+  id: 'user-8',
+  name: 'Alexander Christopher Wellington-Montgomery III',
+}
+
+export const DifferentColors: StoryFn = () => {
+  const users = [
+    { id: 'user-1', name: 'Alice Anderson' },
+    { id: 'user-2', name: 'Bob Brown' },
+    { id: 'user-3', name: 'Carol Chen' },
+    { id: 'user-4', name: 'David Davis' },
+    { id: 'user-5', name: 'Emma Evans' },
+    { id: 'user-6', name: 'Frank Foster' },
+    { id: 'user-7', name: 'Grace Green' },
+    { id: 'user-8', name: 'Henry Harris' },
+  ]
+
+  return (
+    <div className="p-12">
+      <div className="flex gap-4 flex-wrap">
+        {users.map((user) => (
+          <div key={user.id} className="flex flex-col items-center gap-2">
+            <Avatar id={user.id} name={user.name} />
+            <span className="text-xs text-stone">{user.name}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export const MixedAvatars: StoryFn = () => {
+  const users = [
+    { id: 'user-1', name: 'Alice Anderson', image: 'https://i.pravatar.cc/150?img=1' },
+    { id: 'user-2', name: 'Bob Brown' },
+    { id: 'user-3', name: 'Carol Chen', image: 'https://i.pravatar.cc/150?img=3' },
+    { id: 'user-4', name: 'David Davis' },
+    { id: 'user-5', name: 'Emma Evans', image: 'https://i.pravatar.cc/150?img=5' },
+    { id: 'user-6', name: 'Frank Foster' },
+  ]
+
+  return (
+    <div className="p-12">
+      <div className="flex gap-4 flex-wrap items-center">
+        {users.map((user) => (
+          <div key={user.id} className="flex flex-col items-center gap-2">
+            <Avatar id={user.id} name={user.name} image={user.image} />
+            <span className="text-xs text-stone">{user.name}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export const VariousSizes: StoryFn = () => {
+  const sizes = [20, 32, 40, 56, 80]
+
+  return (
+    <div className="p-12">
+      <div className="flex gap-6 items-end">
+        {sizes.map((size) => (
+          <div key={size} className="flex flex-col items-center gap-2">
+            <Avatar id="user-consistent" name="Sarah Johnson" size={size} />
+            <span className="text-xs text-stone">{size}px</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+

package/src/components/Avatar/avatarColors.ts

@@ -0,0 +1,35 @@
+/**
+ * Generate avatar background and text colors based on a string
+ * Uses the ID to deterministically select from design system colors
+ */
+export function getAvatarColors(id: string): {
+  bgColor: string
+  textColor: string
+} {
+  // Map of color combinations from Linktree design system
+  // Selected for good contrast at 20% opacity
+  const colorPairs = [
+    { bgColor: 'bg-primary/20', textColor: 'text-primary' }, // #8129D9 - purple
+    { bgColor: 'bg-forest/20', textColor: 'text-forest' }, // #254f1a - dark green
+    { bgColor: 'bg-iris/20', textColor: 'text-iris' }, // #061492 - dark blue
+    { bgColor: 'bg-shade/20', textColor: 'text-shade' }, // #1e2330 - dark blue-gray
+    { bgColor: 'bg-dahlia/20', textColor: 'text-dahlia' }, // #502274 - dark purple
+    { bgColor: 'bg-orchid/20', textColor: 'text-orchid' }, // #d717e7 - magenta
+    { bgColor: 'bg-currant/20', textColor: 'text-currant' }, // #780016 - dark red
+    { bgColor: 'bg-apple/20', textColor: 'text-apple' }, // #c41500 - red
+    { bgColor: 'bg-rose/20', textColor: 'text-rose' }, // #fc3e4b - pink
+    { bgColor: 'bg-root/20', textColor: 'text-root' }, // #4c2e05 - brown
+    { bgColor: 'bg-poppy/20', textColor: 'text-poppy' }, // #ff6c02 - orange
+    { bgColor: 'bg-moss/20', textColor: 'text-moss' }, // #70764d - olive green
+  ]
+
+  // Simple hash function to get consistent index
+  let hash = 0
+  for (let i = 0; i < id.length; i++) {
+    hash = (hash << 5) - hash + id.charCodeAt(i)
+    hash = hash & hash // Convert to 32bit integer
+  }
+
+  const index = Math.abs(hash) % colorPairs.length
+  return colorPairs[index]
+}

package/src/components/Avatar/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import classNames from 'classnames';
+import { getAvatarColors } from './avatarColors';
+
+export interface AvatarProps {
+  id: string;
+  name: string;
+  image?: string;
+  size?: number;
+  className?: string;
+}
+
+/**
+ * Avatar component that displays a user image or colored initial fallback
+ */
+export const Avatar: React.FC<AvatarProps> = ({
+  id,
+  name,
+  image,
+  size = 40,
+  className,
+}) => {
+  const { bgColor, textColor } = getAvatarColors(id);
+  const initial = name.charAt(0).toUpperCase();
+
+  // Determine font size based on avatar size
+  const getFontSizeClass = () => {
+    if (size < 32) return 'text-xs';
+    if (size < 56) return 'text-sm';
+    return 'text-lg';
+  };
+
+  const fontSizeClass = getFontSizeClass();
+
+  return (
+    <div
+      className={classNames(
+        'flex-shrink-0 overflow-hidden rounded-full',
+        className
+      )}
+      style={{ width: `${size}px`, height: `${size}px` }}
+    >
+      {image ? (
+        <img
+          src={image}
+          alt=""
+          className="h-full w-full object-cover aspect-square"
+        />
+      ) : (
+        <div
+          className={classNames(
+            'flex h-full w-full items-center justify-center font-semibold',
+            bgColor,
+            textColor,
+            fontSizeClass
+          )}
+        >
+          {initial}
+        </div>
+      )}
+    </div>
+  );
+};
+

package/src/components/ChannelList/ChannelList.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { ChannelList } from '.'
+import { MockChatProvider } from '../../stories/mocks'
+
+import React from 'react'
+
+type ComponentProps = React.ComponentProps<typeof ChannelList>
+
+const meta: Meta<ComponentProps> = {
+  title: 'ChannelList',
+  component: ChannelList,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <MockChatProvider>
+        <Story />
+      </MockChatProvider>
+    ),
+  ],
+}
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => {
+  return (
+    <div className="h-screen w-full md:w-[360px] bg-chalk">
+      <ChannelList {...args} />
+    </div>
+  )
+}
+
+export const Default: StoryFn<ComponentProps> = Template.bind({})
+Default.args = {
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+  participantLabel: 'participants',
+}
+
+export const WithStartConversation: StoryFn<ComponentProps> = Template.bind({})
+WithStartConversation.args = {
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+  showStartConversation: true,
+  onStartConversation: () => console.log('Start conversation clicked'),
+  participantLabel: 'followers',
+}
+
+
+