@fragments-sdk/ui 0.6.4 → 0.7.0

package/src/components/Chip/Chip.module.scss

@@ -0,0 +1,174 @@
+@use '../../tokens/variables' as *;
+@use '../../tokens/mixins' as *;
+
+.chip {
+  @include button-reset;
+  @include interactive-base;
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--fui-space-1, $fui-space-1);
+  border-radius: var(--fui-radius-full, $fui-radius-full);
+  font-family: var(--fui-font-sans, $fui-font-sans);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+}
+
+// Sizes
+.sm {
+  height: var(--fui-button-height-sm, $fui-button-height-sm);
+  padding: 0 var(--fui-space-2, $fui-space-2);
+  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+}
+
+.md {
+  height: var(--fui-button-height-md, $fui-button-height-md);
+  padding: 0 var(--fui-space-3, $fui-space-3);
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+}
+
+// Variants
+.filled {
+  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+  color: var(--fui-text-primary, $fui-text-primary);
+
+  &:hover:not(:disabled) {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--fui-bg-active, $fui-bg-active);
+  }
+
+  &.selected {
+    background-color: var(--fui-color-accent, $fui-color-accent);
+    color: var(--fui-text-inverse, $fui-text-inverse);
+
+    &:hover:not(:disabled) {
+      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--fui-color-accent-active, $fui-color-accent-active);
+    }
+  }
+}
+
+.outlined {
+  background-color: transparent;
+  color: var(--fui-text-primary, $fui-text-primary);
+  border: 1px solid var(--fui-border, $fui-border);
+
+  &:hover:not(:disabled) {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    border-color: var(--fui-border-strong, $fui-border-strong);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--fui-bg-active, $fui-bg-active);
+  }
+
+  &.selected {
+    background-color: var(--fui-color-accent, $fui-color-accent);
+    color: var(--fui-text-inverse, $fui-text-inverse);
+    border-color: var(--fui-color-accent, $fui-color-accent);
+
+    &:hover:not(:disabled) {
+      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+      border-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--fui-color-accent-active, $fui-color-accent-active);
+      border-color: var(--fui-color-accent-active, $fui-color-accent-active);
+    }
+  }
+}
+
+.soft {
+  background-color: var(--fui-color-info-bg, $fui-color-info-bg);
+  color: var(--fui-color-info, $fui-color-info);
+
+  &:hover:not(:disabled) {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--fui-bg-active, $fui-bg-active);
+  }
+
+  &.selected {
+    background-color: var(--fui-color-accent, $fui-color-accent);
+    color: var(--fui-text-inverse, $fui-text-inverse);
+
+    &:hover:not(:disabled) {
+      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--fui-color-accent-active, $fui-color-accent-active);
+    }
+  }
+}
+
+// Avatar slot
+.avatar {
+  display: flex;
+  align-items: center;
+  margin-left: calc(-1 * var(--fui-space-1, $fui-space-1));
+
+  img {
+    width: var(--fui-icon-md, $fui-icon-md);
+    height: var(--fui-icon-md, $fui-icon-md);
+    border-radius: var(--fui-radius-full, $fui-radius-full);
+    object-fit: cover;
+  }
+
+  .sm & {
+    img {
+      width: var(--fui-icon-sm, $fui-icon-sm);
+      height: var(--fui-icon-sm, $fui-icon-sm);
+    }
+  }
+}
+
+// Icon slot
+.icon {
+  display: flex;
+  align-items: center;
+}
+
+// Remove button
+.remove {
+  @include button-reset;
+  @include interactive-base;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: calc(-1 * var(--fui-space-1, $fui-space-1));
+  padding: var(--fui-space-0-5, $fui-space-0-5);
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  color: inherit;
+  opacity: 0.6;
+  line-height: 1;
+  border-radius: var(--fui-radius-full, $fui-radius-full);
+
+  .sm & {
+    font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  }
+
+  &:hover {
+    opacity: 1;
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+}
+
+// Chip.Group
+.group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--fui-space-2, $fui-space-2);
+}

package/src/components/Chip/index.tsx

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import styles from './Chip.module.scss';
+import '../../styles/globals.scss';
+
+export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  children: React.ReactNode;
+  /** Visual style variant */
+  variant?: 'filled' | 'outlined' | 'soft';
+  /** Size of the chip */
+  size?: 'sm' | 'md';
+  /** Whether the chip is selected */
+  selected?: boolean;
+  /** Icon element rendered before the label */
+  icon?: React.ReactNode;
+  /** Avatar element rendered before the label */
+  avatar?: React.ReactNode;
+  /** Makes chip removable. Called when X is clicked. */
+  onRemove?: () => void;
+  /** Value identifier used by Chip.Group */
+  value?: string;
+}
+
+export interface ChipGroupProps {
+  children: React.ReactNode;
+  /** Controlled selected values */
+  value?: string[];
+  /** Default selected values (uncontrolled) */
+  defaultValue?: string[];
+  /** Called when selection changes */
+  onChange?: (value: string[]) => void;
+  className?: string;
+}
+
+const ChipBase = React.forwardRef<HTMLButtonElement, ChipProps>(
+  function Chip(
+    {
+      children,
+      variant = 'filled',
+      size = 'md',
+      selected = false,
+      disabled = false,
+      icon,
+      avatar,
+      onRemove,
+      className,
+      onClick,
+      value: _value,
+      ...htmlProps
+    },
+    ref
+  ) {
+    const classes = [
+      styles.chip,
+      styles[size],
+      styles[variant],
+      selected && styles.selected,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="option"
+        aria-selected={selected}
+        disabled={disabled}
+        className={classes}
+        onClick={onClick}
+        {...htmlProps}
+      >
+        {avatar && (
+          <span className={styles.avatar} aria-hidden="true">
+            {avatar}
+          </span>
+        )}
+        {icon && (
+          <span className={styles.icon} aria-hidden="true">
+            {icon}
+          </span>
+        )}
+        <span>{children}</span>
+        {onRemove && (
+          <span
+            role="button"
+            tabIndex={0}
+            aria-label={`Remove ${typeof children === 'string' ? children : 'chip'}`}
+            className={styles.remove}
+            onClick={(e) => {
+              e.stopPropagation();
+              onRemove();
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                e.stopPropagation();
+                onRemove();
+              }
+            }}
+          >
+            &times;
+          </span>
+        )}
+      </button>
+    );
+  }
+);
+
+function ChipGroupInner(
+  { children, value: controlledValue, defaultValue = [], onChange, className }: ChipGroupProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+
+  const toggle = React.useCallback(
+    (chipValue: string) => {
+      const next = currentValue.includes(chipValue)
+        ? currentValue.filter((v) => v !== chipValue)
+        : [...currentValue, chipValue];
+
+      if (!isControlled) {
+        setInternalValue(next);
+      }
+      onChange?.(next);
+    },
+    [currentValue, isControlled, onChange]
+  );
+
+  const classes = [styles.group, className].filter(Boolean).join(' ');
+
+  return (
+    <div ref={ref} role="listbox" aria-multiselectable="true" className={classes}>
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement<ChipProps>(child)) return child;
+        const chipValue = child.props.value ?? (typeof child.props.children === 'string' ? child.props.children : '');
+        return React.cloneElement(child, {
+          selected: currentValue.includes(chipValue),
+          onClick: () => toggle(chipValue),
+        } as Partial<ChipProps>);
+      })}
+    </div>
+  );
+}
+
+const ChipGroup = React.forwardRef<HTMLDivElement, ChipGroupProps>(ChipGroupInner);
+
+// Compose Chip with static Group property
+export const Chip = Object.assign(ChipBase, { Group: ChipGroup });

package/src/components/Markdown/Markdown.fragment.tsx

@@ -0,0 +1,226 @@
+import React from 'react';
+import { defineSegment } from '@fragments/core';
+import { Markdown } from '.';
+
+const defaultContent = `# Hello World
+
+This is a paragraph with **bold text** and *italic text*.
+
+Here is some \`inline code\` within a sentence.
+
+- First item
+- Second item
+- Third item
+
+> A blockquote for emphasis.
+`;
+
+const gfmTableContent = `## Data Overview
+
+| Feature    | Status    | Priority |
+|------------|-----------|----------|
+| Markdown   | Done      | High     |
+| Tables     | Done      | Medium   |
+| Task Lists | Planned   | Low      |
+
+Notes:
+- [x] Support GFM tables
+- [x] Support task lists
+- [ ] Syntax highlighting
+`;
+
+const codeBlockContent = `## Code Example
+
+Here is a JavaScript function:
+
+\`\`\`js
+function greet(name) {
+  return \\\`Hello, \\\${name}!\\\`;
+}
+
+console.log(greet('World'));
+\`\`\`
+
+And some inline code: \`const x = 42;\`
+`;
+
+const mixedContent = `# Project Update
+
+## Summary
+
+The project is progressing well. Here are the **key highlights**:
+
+1. Completed the *design system* components
+2. Added markdown rendering support
+3. Integrated with the documentation site
+
+### Performance Metrics
+
+| Metric       | Before | After  |
+|-------------|--------|--------|
+| Bundle Size | 142kb  | 98kb   |
+| Load Time   | 1.2s   | 0.8s   |
+| Lighthouse  | 72     | 95     |
+
+> These improvements were achieved through tree-shaking and code splitting.
+
+### Next Steps
+
+- [ ] Add syntax highlighting
+- [ ] Support custom themes
+- [x] GFM table support
+
+---
+
+For more details, see the [documentation](#).
+`;
+
+export default defineSegment({
+  component: Markdown,
+
+  meta: {
+    name: 'Markdown',
+    description: 'Renders markdown strings as styled prose using react-markdown and remark-gfm. Supports headings, lists, tables, code blocks, blockquotes, and more.',
+    category: 'display',
+    status: 'stable',
+    tags: ['markdown', 'prose', 'content', 'text', 'ai', 'chat'],
+    since: '0.7.0',
+  },
+
+  usage: {
+    when: [
+      'Rendering AI/LLM response content',
+      'Displaying user-authored markdown text',
+      'Showing documentation or readme content',
+      'Rich text display without a WYSIWYG editor',
+    ],
+    whenNot: [
+      'Plain text without formatting (use Text)',
+      'Editing markdown (use a markdown editor component)',
+      'Rendering trusted HTML directly (use dangerouslySetInnerHTML)',
+    ],
+    guidelines: [
+      'Install react-markdown and remark-gfm as peer dependencies',
+      'Use the components prop to override default element rendering',
+      'Content is sanitized by react-markdown by default',
+      'Falls back to plain text paragraphs if react-markdown is not installed',
+    ],
+    accessibility: [
+      'Rendered HTML follows semantic structure (headings, lists, tables)',
+      'Links are rendered as proper anchor elements',
+      'Images include alt text from markdown syntax',
+      'Tables use proper th/td structure for screen readers',
+    ],
+  },
+
+  props: {
+    content: {
+      type: 'string',
+      description: 'Markdown string to render',
+      required: true,
+    },
+    components: {
+      type: 'object',
+      description: 'Override map for markdown element components (e.g., { h1: MyHeading })',
+    },
+    className: {
+      type: 'string',
+      description: 'Additional CSS class name',
+    },
+  },
+
+  relations: [
+    { component: 'Text', relationship: 'alternative', note: 'Use Text for plain, non-markdown text' },
+    { component: 'CodeBlock', relationship: 'complementary', note: 'CodeBlock can be used via components prop for syntax highlighting' },
+    { component: 'Message', relationship: 'parent', note: 'Message wraps Markdown when markdown prop is true' },
+  ],
+
+  contract: {
+    propsSummary: [
+      'content: string - Markdown string to render',
+      'components: object - Override map for element components',
+      'className: string - Additional CSS class',
+    ],
+    scenarioTags: [
+      'content.markdown',
+      'content.prose',
+      'ai.response',
+    ],
+    a11yRules: ['A11Y_SEMANTIC_HTML'],
+  },
+
+  variants: [
+    {
+      name: 'Default',
+      description: 'Basic markdown with headings, paragraphs, inline code, lists, and blockquote',
+      code: `<Markdown content={\`# Hello World
+
+This is a paragraph with **bold text** and *italic text*.
+
+Here is some \\\`inline code\\\` within a sentence.
+
+- First item
+- Second item
+- Third item
+
+> A blockquote for emphasis.
+\`} />`,
+      render: () => <Markdown content={defaultContent} />,
+    },
+    {
+      name: 'GFM Table',
+      description: 'GitHub Flavored Markdown with tables and task lists',
+      code: `<Markdown content={\`## Data Overview
+
+| Feature    | Status    | Priority |
+|------------|-----------|----------|
+| Markdown   | Done      | High     |
+| Tables     | Done      | Medium   |
+| Task Lists | Planned   | Low      |
+
+Notes:
+- [x] Support GFM tables
+- [x] Support task lists
+- [ ] Syntax highlighting
+\`} />`,
+      render: () => <Markdown content={gfmTableContent} />,
+    },
+    {
+      name: 'Code Block',
+      description: 'Markdown with fenced code blocks and inline code',
+      code: '<Markdown content={`## Code Example\\n\\nHere is a JavaScript function:\\n\\n```js\\nfunction greet(name) {\\n  return \\`Hello, ${name}!\\`;\\n}\\n```\\n\\nAnd some inline code: \\`const x = 42;\\``} />',
+      render: () => <Markdown content={codeBlockContent} />,
+    },
+    {
+      name: 'Mixed Content',
+      description: 'Complex markdown mixing headings, lists, tables, blockquotes, and task lists',
+      code: `<Markdown content={\`# Project Update
+
+## Summary
+
+The project is progressing well. Here are the **key highlights**:
+
+1. Completed the *design system* components
+2. Added markdown rendering support
+3. Integrated with the documentation site
+
+### Performance Metrics
+
+| Metric      | Before | After |
+|-------------|--------|-------|
+| Bundle Size | 142kb  | 98kb  |
+| Load Time   | 1.2s   | 0.8s  |
+| Lighthouse  | 72     | 95    |
+
+> These improvements were achieved through tree-shaking and code splitting.
+
+### Next Steps
+
+- [ ] Add syntax highlighting
+- [ ] Support custom themes
+- [x] GFM table support
+\`} />`,
+      render: () => <Markdown content={mixedContent} />,
+    },
+  ],
+});