@moises.ai/design-system 3.4.4 → 3.4.6

package/src/components/ListCards/ListCards.stories.jsx

@@ -0,0 +1,386 @@
+import React, { useState } from 'react'
+import { ListCards } from './ListCards'
+import { Flex, Avatar } from '@radix-ui/themes'
+import { MusicIcon, DrumsIcon, PianoIcon } from '../../icons'
+
+export default {
+  title: 'Components/ListCards',
+  component: ListCards,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+
+
+The \`ListCards\` component provides a responsive, selectable list of cards with consistent styling and behavior.
+
+### Component Variants
+
+This component has two main variants:
+- **ListCards with basic cards** - For simple lists with minimal information
+- **ListCards with CardDetails** - For rich cards with additional functionality (favorite, details, clickable avatars)
+
+## When to use which variant?
+
+- Use **basic ListCards.Card** when you only need simple selection functionality
+- Use **ListCards.CardDetails** when you need:
+  - Favorite/unfavorite functionality
+  - "See details" navigation
+  - Clickable avatars (e.g., for play/pause)
+  - Custom avatar content
+
+## Basic Usage
+
+### Usage
+\`\`\`jsx
+<ListCards 
+  className="custom-list-class"
+>
+  {/* Must contain ListCards.Card or ListCards.CardDetails children */}
+</ListCards>
+\`\`\`
+
+### Simple ListCards
+Use when you only need to display and select basic items:
+
+\`\`\`jsx
+import { ListCards } from '@moises.ai/design-system'
+
+// Simple list with basic cards
+<ListCards>
+  {items.map(item => (
+    <ListCards.Card 
+      key={item.id}
+      item={item}
+      checked={item.id === selectedId}
+      onClick={() => handleItemSelection(item.id)}
+    />
+  ))}
+</ListCards>
+\`\`\`  
+
+### ListCards with CardDetails
+Use when you need additional features like favorite buttons, detail buttons, or clickable avatars:
+> **For more CardDetails variations and examples**, see the [CardDetails documentation](/docs/components-listcards-carddetails--docs).
+
+\`\`\`jsx
+import { ListCards } from '@moises.ai/design-system'
+
+// With CardDetails for rich functionality
+<ListCards>
+  {items.map(item => (
+    <ListCards.CardDetails 
+      key={item.id} 
+      item={item} 
+      favorite={item.isFavorite}
+      onFavorite={() => handleFavorite(item.id)}
+      onSeeDetails={() => handleSeeDetails(item.id)}
+      checked={item.id === selectedId}
+      onClick={() => handleItemSelection(item.id)}
+    />
+  ))}
+</ListCards>
+\`\`\`
+
+
+
+
+## Component API
+
+### ListCards Props
+\`\`\`tsx
+{ 
+  // Styling and layout
+  className?: string; // Optional CSS class to apply to the root element
+  
+  // Children
+  children: React.ReactNode; // Must be ListCards.Card or ListCards.CardDetails components (required)
+
+  // Scrollbar  
+  alwaysShowScrollbar?: boolean; // Whether to always show the scrollbar (default: true)
+}
+\`\`\`
+
+
+### ListCards.Card Props (Basic Card)
+\`\`\`tsx
+  // Base props
+  item?: {
+    id?: string;       // Required unique identifier 
+    name?: string;     // Display name
+    description?: string; // Optional description
+    image?: string;    // Optional image URL
+    icon?: React.ReactNode; // Optional icon component to display instead of image
+  };
+  checked?: boolean; // Whether the card appears checked
+  onClick?: () => void; // Custom click handler for the card
+\`\`\`
+
+### ListCards.CardDetails Props (Enhanced Card)
+\`\`\`tsx
+  item?: {
+    // Base props
+    id?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    // Additional functionality
+    favorite?: boolean; // Whether item is favorited
+    onFavorite?: (event: React.MouseEvent) => void; // Favorite toggle handler
+    onSeeDetails?: (event: React.MouseEvent) => void; // Details button handler
+    seeDetailsText?: string; // Custom text for the details button (default: "Details")
+    onAvatarClick?: (event: React.MouseEvent) => void; // Avatar click handler
+    avatarContent?: React.ReactNode; // Custom avatar content (e.g., play/pause button)
+}
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+const sampleItems = [
+  {
+    id: '1',
+    name: 'Surprise me',
+    description: 'Generates a random preset',
+    isFavorite: true,
+  },
+  {
+    id: '2',
+    name: 'Boom Bap',
+    description:
+      'Classic hip-hop grooves with punchy kicks, crisp snares, and a laid-back swing. Classic hip-hop grooves with punchy kicks, crisp snares, and a laid-back swing.',
+    isFavorite: false,
+  },
+  {
+    id: '3',
+    name: 'Neo Soul',
+    description:
+      'Smooth, syncopated grooves with ghost notes and a warm, organic feel.',
+    isFavorite: false,
+  },
+  {
+    id: '4',
+    name: 'Trap Bounce',
+    description:
+      'Fast hi-hats, heavy sub-kicks, and sharp snare rolls for modern trap energy.',
+    isFavorite: true,
+  },
+  {
+    id: '5',
+    name: 'Funk Groove',
+    description:
+      'Tight, syncopated beats with a focus on snare-funk and rhythmic drive.',
+    isFavorite: false,
+  },
+]
+
+export const Default = {
+  render: (args) => {
+    const [selectedId, setSelectedId] = useState(args.value)
+
+    const handleSelect = (id) => {
+      setSelectedId(id)
+    }
+
+    return (
+      <Flex height="350px" width="328px">
+        <ListCards {...args}>
+          {sampleItems.map((item) => (
+            <ListCards.Card
+              key={item.id}
+              item={item}
+              checked={item.id === selectedId}
+              onClick={() => handleSelect(item.id)}
+            />
+          ))}
+        </ListCards>
+      </Flex>
+    )
+  },
+}
+
+export const WithCardDetails = {
+  render: (args) => {
+    const [favoriteItems, setFavoriteItems] = useState(['1', '4'])
+    const [selectedId, setSelectedId] = useState(args.value)
+
+    const handleFavorite = (id) => {
+      if (favoriteItems.includes(id)) {
+        setFavoriteItems(favoriteItems.filter((item) => item !== id))
+      } else {
+        setFavoriteItems([...favoriteItems, id])
+      }
+    }
+
+    const handleSelect = (id) => {
+      setSelectedId(id)
+    }
+
+    return (
+      <Flex height="350px" width="328px">
+        <ListCards>
+          {sampleItems.map((item) => (
+            <ListCards.CardDetails
+              key={item.id}
+              item={item}
+              favorite={favoriteItems.includes(item.id)}
+              onFavorite={() => handleFavorite(item.id)}
+              onSeeDetails={() =>
+                console.log('See details clicked for', item.name)
+              }
+              seeDetailsText="View details"
+              checked={item.id === selectedId}
+              onClick={() => handleSelect(item.id)}
+            />
+          ))}
+        </ListCards>
+      </Flex>
+    )
+  },
+}
+
+const sampleItemsWithIcons = [
+  {
+    id: '1',
+    name: 'Surprise me',
+    description: 'Generates a random preset',
+    icon: <MusicIcon />,
+  },
+  {
+    id: '2',
+    name: 'Boom Bap',
+    description:
+      'Classic hip-hop grooves with punchy kicks, crisp snares, and a laid-back swing.',
+    icon: <DrumsIcon />,
+  },
+  {
+    id: '3',
+    name: 'Neo Soul',
+    description:
+      'Smooth, syncopated grooves with ghost notes and a warm, organic feel.',
+    icon: <PianoIcon />,
+  },
+]
+
+export const WithIcons = {
+  render: (args) => {
+    const [selectedId, setSelectedId] = useState(args.value)
+
+    const handleSelect = (id) => {
+      setSelectedId(id)
+    }
+
+    return (
+      <Flex height="350px" width="328px">
+        <ListCards>
+          {sampleItemsWithIcons.map((item) => (
+            <ListCards.Card
+              key={item.id}
+              item={item}
+              checked={item.id === selectedId}
+              onClick={() => handleSelect(item.id)}
+            />
+          ))}
+        </ListCards>
+      </Flex>
+    )
+  },
+}
+
+const sampleItemsForSizes = [
+  {
+    id: '1',
+    name: 'Item 1',
+    description: 'Description for item 1',
+  },
+  {
+    id: '2',
+    name: 'Item 2',
+    description: 'Description for item 2',
+  },
+  {
+    id: '3',
+    name: 'Item 3',
+    description: 'Description for item 3',
+  },
+]
+
+export const WithSizes = {
+  render: (args) => {
+    const [selectedId1, setSelectedId1] = useState(null)
+    const [selectedId2, setSelectedId2] = useState(null)
+    const [selectedId3, setSelectedId3] = useState(null)
+
+    return (
+      <Flex
+        gap="4"
+        direction="column"
+        width="100%"
+        style={{ maxWidth: '1200px' }}
+      >
+        <Flex gap="4" direction="row" width="100%">
+          <Flex direction="column" gap="2" flex="1">
+            <h3 style={{ margin: 0, fontSize: '14px', fontWeight: 600 }}>
+              Size 1 (Default - 60px)
+            </h3>
+            <Flex height="250px" width="100%">
+              <ListCards>
+                {sampleItemsForSizes.map((item) => (
+                  <ListCards.Card
+                    key={item.id}
+                    item={item}
+                    size="1"
+                    checked={item.id === selectedId1}
+                    onClick={() => setSelectedId1(item.id)}
+                  />
+                ))}
+              </ListCards>
+            </Flex>
+          </Flex>
+
+          <Flex direction="column" gap="2" flex="1">
+            <h3 style={{ margin: 0, fontSize: '14px', fontWeight: 600 }}>
+              Size 2 (68px)
+            </h3>
+            <Flex height="250px" width="100%">
+              <ListCards>
+                {sampleItemsForSizes.map((item) => (
+                  <ListCards.Card
+                    key={item.id}
+                    item={item}
+                    size="2"
+                    checked={item.id === selectedId2}
+                    onClick={() => setSelectedId2(item.id)}
+                  />
+                ))}
+              </ListCards>
+            </Flex>
+          </Flex>
+
+          <Flex direction="column" gap="2" flex="1">
+            <h3 style={{ margin: 0, fontSize: '14px', fontWeight: 600 }}>
+              Size 3 (80px)
+            </h3>
+            <Flex height="250px" width="100%">
+              <ListCards>
+                {sampleItemsForSizes.map((item) => (
+                  <ListCards.Card
+                    key={item.id}
+                    item={item}
+                    size="3"
+                    checked={item.id === selectedId3}
+                    onClick={() => setSelectedId3(item.id)}
+                  />
+                ))}
+              </ListCards>
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
+    )
+  },
+}

package/src/components/LokalisePoc/LokalisePoc.jsx

@@ -0,0 +1,7 @@
+export const LokalisePoc = ({ i18n, text }) => {
+  return (
+    <span>{i18n._(text)}</span>
+  )
+}
+
+LokalisePoc.displayName = 'LokalisePoc'

package/src/components/LokalisePoc/LokalisePoc.stories.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { LokalisePoc } from './LokalisePoc'
+
+export default {
+  title: 'Components/LokalisePoc',
+  component: LokalisePoc,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+LokalisePoc
+
+## Usage
+
+\`\`\`jsx
+import { LokalisePoc } from '@moises.ai/design-system'
+
+const MyComponent = () => (
+  <LokalisePoc
+    i18n={() => { _: (text) => text }}
+    text="Text"
+  />
+)
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    i18n: {
+      control: 'object',
+      description: 'i18n object',
+      table: {
+        type: { summary: '{ _: (text: string) => string }' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    text: {
+      control: 'text',
+      description: 'Text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '300px', height: '80px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Default = {
+  args: {
+    i18n: { _: (text) => text },
+    text: 'Text',
+  },
+}

package/src/components/MessageWithAction/MessageWithAction.jsx

@@ -0,0 +1,54 @@
+import { InfoIcon } from '../../icons/InfoIcon'
+import { Flex, Callout } from '@radix-ui/themes'
+import { Button } from '../Button/Button'
+import React from 'react'
+import styles from './MessageWithAction.module.css'
+import classNames from 'classnames'
+
+export const MessageWithAction = ({
+  type,
+  message,
+  ctaLabel,
+  onClick,
+  className,
+  showBackground = true,
+  showIcon = true,
+  children,
+  ...props
+}) => {
+  const calloutColor =
+    type === 'error' ? 'red' : type === 'warn' ? 'yellow' : 'gray'
+
+  return (
+    <Callout.Root
+      size="1"
+      color={calloutColor}
+      className={classNames(className, {
+        [styles.messageWithActionInfo]: !showBackground,
+        [styles.messageWithAction]: showBackground,
+      })}
+      {...props}
+    >
+      <Flex align="center" width="100%" gap="2" justify="between">
+        <Flex align="center" gap="2">
+          {showIcon && (
+            <Callout.Icon>
+              <InfoIcon />
+            </Callout.Icon>
+          )}
+          {message && <Callout.Text>{message}</Callout.Text>}
+          {children && children}
+        </Flex>
+        <Flex>
+          {ctaLabel && (
+            <Button size="1" variant="soft" color="gray" onClick={onClick}>
+              {ctaLabel}
+            </Button>
+          )}
+        </Flex>
+      </Flex>
+    </Callout.Root>
+  )
+}
+
+MessageWithAction.displayName = 'MessageWithAction'

package/src/components/MessageWithAction/MessageWithAction.module.css

@@ -0,0 +1,16 @@
+.messageWithActionInfo {
+  background-color: transparent;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  padding: 0;
+}
+
+.messageWithAction {
+  padding: 5px 10px;
+  border-radius: 2px;
+  display: flex;
+  width: 100%;
+}