@a-little-world/little-world-design-system 2.10.0

package/src/components/Tags/Tags.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { TagAppearance } from '@a-little-world/little-world-design-system-core';
+import Tags, { Tag } from './Tags';
+
+export default {
+  component: Tags,
+  title: 'Components/Tags',
+};
+
+export const Default = args => {
+  return <Tags {...args} />;
+};
+
+export const SingleTag = args => {
+  return <Tag {...args}>Volunteer</Tag>;
+};
+
+export const ColorTest = () => {
+  return (
+    <div style={{ padding: '20px' }}>
+      <Tag color="red" appearance={TagAppearance.filled}>Red Filled</Tag>
+      <br />
+      <Tag color="blue" appearance={TagAppearance.outline}>Blue Outline</Tag>
+      <br />
+      <Tag color="#00ff00" appearance={TagAppearance.filled}>Green Filled</Tag>
+      <br />
+      <Tag appearance={TagAppearance.error}>Error Tag</Tag>
+      <br />
+      <Tag appearance={TagAppearance.success}>Success Tag</Tag>
+    </div>
+  );
+};
+
+Default.args = {
+  content: [
+    'Coffee',
+    'Mocha',
+    'Tea',
+    'Flat white',
+    'Capuccino',
+    'Hot Chocolate',
+  ],
+};

package/src/components/Tags/Tags.tsx

@@ -0,0 +1,68 @@
+import React, { FC, PropsWithChildren } from 'react';
+
+import {
+  TagAppearance,
+  TagSizes,
+  TextTypes,
+} from '@a-little-world/little-world-design-system-core';
+import { StyledTag, TagsContainer } from './styles';
+
+interface TagProps {
+  bold?: boolean;
+  className?: string;
+  appearance?: TagAppearance;
+  size?: TagSizes;
+  color?: string;
+}
+interface TagsProps extends TagProps {
+  content: string[];
+}
+
+export const Tag: FC<PropsWithChildren<TagProps>> = ({
+  bold,
+  children,
+  className,
+  size = TagSizes.large,
+  appearance = TagAppearance.outline,
+  color,
+}) => {
+  return (
+    <StyledTag
+      className={className}
+      bold={bold}
+      type={size === TagSizes.small ? TextTypes.Body6 : TextTypes.Body5}
+      $appearance={appearance}
+      $color={color}
+      $size={size}
+    >
+      {children}
+    </StyledTag>
+  );
+};
+
+function Tags({
+  appearance,
+  bold,
+  color,
+  content,
+  className,
+  size,
+}: TagsProps) {
+  return (
+    <TagsContainer className={className}>
+      {content.map(tag => (
+        <Tag
+          key={tag}
+          bold={bold}
+          size={size}
+          color={color}
+          appearance={appearance}
+        >
+          {tag}
+        </Tag>
+      ))}
+    </TagsContainer>
+  );
+}
+
+export default Tags;

package/src/components/Tags/styles.tsx

@@ -0,0 +1,89 @@
+import styled, { css } from 'styled-components';
+import Text from '../Text/Text';
+import {
+  TagAppearance,
+  TagSizes,
+} from '@a-little-world/little-world-design-system-core';
+
+export const StyledTag = styled(Text)<{
+  $size: TagSizes;
+  $appearance?: TagAppearance;
+  $color?: string;
+}>`
+  font-family: 'Signika Negative';
+  line-height: 1;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  background: ${({ theme }) => theme.color.surface.primary};
+  border: 2px solid currentColor;
+  border-radius: ${({ theme }) => theme.radius.large};
+  min-width: 60px;
+  width: fit-content;
+  text-wrap: nowrap;
+  filter: drop-shadow(0px 1px 3px rgb(0 0 0 / 22%));
+
+  ${({ theme, $size }) => {
+    if ($size === TagSizes.small) {
+      return css`
+        height: 30px;
+        padding: ${theme.spacing.xsmall};
+      `;
+    }
+    if ($size === TagSizes.large) {
+      return css`
+        height: 33px;
+        padding: ${theme.spacing.xxsmall} ${theme.spacing.xsmall};
+
+        @media (min-width: ${theme.breakpoints.small}) {
+          padding: ${theme.spacing.xxsmall} ${theme.spacing.small};
+          min-width: 80px;
+          height: 40px;
+        }
+      `;
+    }
+    return '';
+  }}
+
+  ${({ theme, $appearance, $color }) => {
+    if ($appearance === TagAppearance.outline) {
+      return css`
+        color: ${$color || theme.color.text.primary};
+        border: 2px solid ${$color || theme.color.border.selected};
+      `;
+    }
+    if ($appearance === TagAppearance.filled) {
+      return css`
+        color: ${theme.color.text.reversed};
+        background: ${$color || theme.color.text.bold};
+        border: 2px solid ${$color || theme.color.border.contrast};
+      `;
+    }
+    if ($appearance === TagAppearance.error) {
+      return css`
+        color: ${theme.color.text.error};
+        background: ${theme.color.surface.error};
+        border: 0px;
+        filter: none;
+      `;
+    }
+    if ($appearance === TagAppearance.success) {
+      return css`
+        color: ${theme.color.text.success};
+        background: ${theme.color.surface.success};
+        border: 0px;
+        filter: none;
+      `;
+    }
+    return '';
+  }}
+`;
+
+export const TagsContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing.xsmall};
+  padding-top: ${({ theme }) => theme.spacing.xxxsmall};
+`;

package/src/components/Text/Text.stories.tsx

@@ -0,0 +1,288 @@
+import React from 'react';
+
+import Text from './Text';
+import CallWidget from '../Widget/CallWidget';
+import AttachmentWidget from '../Widget/AttachmentWidget';
+import textParser from '../../utils/parser';
+
+export default {
+  component: Text,
+  title: 'Components/Text',
+  argTypes: {
+    text: { control: 'text' },
+  },
+};
+
+export const Default = ({ text, ...rest }) => <Text {...rest}>{text}</Text>;
+
+Default.args = {
+  text: 'Little World for a better society',
+};
+
+// Comprehensive visual test for the textParser
+export const ParserShowcase = () => {
+  // Configure custom elements using actual Widget components
+  const customElements = [
+    {
+      Component: CallWidget,
+      tag: 'CallWidget',
+      props: { isPreview: false },
+    },
+    {
+      Component: AttachmentWidget,
+      tag: 'AttachmentWidget',
+      props: { isPreview: false },
+    },
+  ];
+
+  const showcaseText = `Welcome to the Little World Text Parser showcase! This story demonstrates all the powerful features of our text parser.
+
+🔗 AUTOMATIC LINK DETECTION:
+
+Visit our website at https://little-world.com or check out little-world.com for more information.
+
+📝 BASIC STYLING TAGS:
+
+This text contains <highlight>highlighted content</highlight> and <bold>bold text</bold> for emphasis.
+
+🔗 CUSTOM ANCHOR TAGS:
+
+Click this <a {"href": "https://little-world.com", "target": "_blank"}>external link</a> or this <a {"href": "/internal-page"}>internal link</a>.
+
+🔘 INTERACTIVE BUTTONS:
+
+<button {"className": "custom-button"}>Click me!</button>
+<button {"appearance": "secondary"}>Secondary Button</button>
+<button {"data-cal-link": "www.calendly.com/example", "data-cal-config": "{'layout': 'stacked'}"}>Schedule Meeting</button>
+
+🧩 CUSTOM WIDGET COMPONENTS (Real Components):
+
+<CallWidget {"isMissed": false, "header": "Video Anruf", "description": "Incoming video call", "isPreview": false, "isOutgoing": false}>
+  Call content
+</CallWidget>
+
+<CallWidget {"isMissed": true, "header": "Anruf Verpasst", "description": "Zurück Rufen", "isPreview": false, "isOutgoing": false}>
+  Missed call with description
+</CallWidget>
+
+<AttachmentWidget {"attachmentTitle": "Photo", "caption": "Beautiful sunset", "imageSrc": "https://picsum.photos/200/150", "isPreview": false}>
+  Attachment content
+</AttachmentWidget>
+
+🔄 NESTED CONTENT WITH CUSTOM ELEMENTS:
+
+<CallWidget {"isMissed": false, "header": "Mixed Content Call", "isPreview": false}>
+  This call widget contains <highlight>highlighted text</highlight> and <a {"href": "https://example.com"}>a link</a>!
+</CallWidget>
+
+🎨 MIXED CONTENT:
+
+You can combine <highlight>highlighted text</highlight> with <a {"href": "https://example.com"}>clickable links</a> and <bold>bold formatting</bold> in the same paragraph.
+
+⚠️ EDGE CASES THAT DON'T BREAK THE PARSER:
+
+This text has incomplete tags like <incomplete and <missing> without closing tags.
+It also handles special characters: <30min, <100% success rate, and other HTML-like content.
+
+📧 REAL-WORLD EXAMPLE (German text that previously caused hanging):
+
+Hallo Andreas, auch die anderen bekommen diese Email typischerweise innerhalb von <30min - in Ausnahmefällen auch mal in ein paar Stunden (Server-Verzögerungen).
+
+Bei manchen landen diese Systemnachrichten im Spam-Ordner und wenn der Nutzer dann den Absender nicht als "kein Spam" bzw "zulassen" markiert, passiert das immer wieder.
+
+🔄 NESTED AND COMPLEX SCENARIOS:
+
+<highlight>This highlighted text contains a <a {"href": "/nested-link"}>nested link</a> inside it</highlight>.
+
+Multiple links: <a {"href": "/first"}>First link</a> and <a {"href": "/second"}>Second link</a> in the same paragraph.
+
+📊 PERFORMANCE TEST:
+
+This paragraph contains many elements: <bold>bold</bold>, <highlight>highlight</highlight>, <a {"href": "/link1"}>link1</a>, <button>button1</button>, <a {"href": "/link2"}>link2</a>, <highlight>more highlighting</highlight>, and <bold>more bold text</bold>.
+
+✅ ALL FEATURES WORKING:
+
+- ✓ Automatic URL detection
+- ✓ Custom anchor tags with JSON attributes  
+- ✓ Interactive buttons with data attributes
+- ✓ Text styling (bold, highlight)
+- ✓ Custom Widget components (CallWidget, AttachmentWidget)
+- ✓ Nested content support
+- ✓ Graceful handling of malformed content
+- ✓ No hanging on complex text
+- ✓ Performance with multiple elements
+- ✓ Non-interactive mode (buttons/links as plain text)
+- ✓ Only-links mode (only anchor tags processed)`;
+
+  return (
+    <div style={{ maxWidth: '800px', lineHeight: '1.6', padding: '20px' }}>
+      {/* Main showcase with all features */}
+      <div style={{ marginBottom: '40px' }}>
+        <Text tag="h2" type="Body3" bold style={{ marginBottom: '20px' }}>
+          🎯 Complete Parser Showcase
+        </Text>
+
+        <div
+          style={{
+            padding: '16px',
+            backgroundColor: '#e3f2fd',
+            borderRadius: '8px',
+            border: '1px solid #2196f3',
+            marginBottom: '20px',
+          }}
+        >
+          <Text style={{ color: '#1565c0', fontSize: '14px' }}>
+            💡 <strong>Visual Testing:</strong> This showcase demonstrates all
+            parser features including custom widgets, styling tags, buttons, and
+            links. Test the onlyLinks, nonInteractive, and parser disabled modes
+            below.
+          </Text>
+        </div>
+        <Text>{textParser(showcaseText, { customElements })}</Text>
+      </div>
+
+      {/* onlyLinks demonstration */}
+      <div
+        style={{
+          marginBottom: '40px',
+          padding: '24px',
+          backgroundColor: '#f5f5f5',
+          borderRadius: '12px',
+          border: '1px solid #e0e0e0',
+        }}
+      >
+        <Text tag="h3" bold style={{ marginBottom: '16px', color: '#333' }}>
+          🔗 Parser with onlyLinks Option
+        </Text>
+        <div style={{ marginTop: '24px' }}>
+          <Text
+            style={{ fontSize: '14px', color: '#666', marginBottom: '16px' }}
+          >
+            💡 <strong>Test:</strong> Notice that only the &lt;a&gt; tag renders
+            as a clickable link, while &lt;button&gt; and &lt;highlight&gt; tags
+            are displayed as plain text. This demonstrates the onlyLinks
+            functionality.
+          </Text>
+          <Text disableParser>
+            {textParser(
+              `This text has <highlight>highlighted content</highlight>, <button>a button</button>, and <a {"href": "/test"}>a link</a>.`,
+              { onlyLinks: true },
+            )}
+          </Text>
+        </div>
+      </div>
+
+      {/* nonInteractive demonstration */}
+      <div
+        style={{
+          marginBottom: '40px',
+          padding: '24px',
+          backgroundColor: '#fff3cd',
+          borderRadius: '12px',
+          border: '1px solid #ffeaa7',
+        }}
+      >
+        <Text tag="h3" bold style={{ marginBottom: '16px', color: '#856404' }}>
+          🔒 Parser with nonInteractive Option
+        </Text>
+        <div style={{ marginTop: '24px' }}>
+          <Text
+            style={{ fontSize: '14px', color: '#856404', marginBottom: '16px' }}
+          >
+            💡 <strong>Test:</strong> Interactive elements (buttons, links) are
+            rendered as plain text, but styling tags (bold, highlight) are
+            preserved. URLs are not converted to clickable links.
+          </Text>
+          <Text disableParser>
+            {textParser(
+              `This text demonstrates nonInteractive mode:
+
+🔗 URLs stay as plain text: https://little-world.com and little-world.com
+
+🎨 Styling tags still work: <highlight>highlighted content</highlight> and <bold>bold text</bold>
+
+🔘 Buttons become plain text: <button {"appearance": "secondary"}>Click me!</button>
+
+🔗 Links become plain text: <a {"href": "https://example.com"}>External link</a>
+
+🧩 Custom widgets still render: <CallWidget {"isMissed": false, "header": "Non-Interactive Call", "isPreview": false}>Call content</CallWidget>
+
+📝 Mixed content: <highlight>Highlighted text</highlight> with <a {"href": "/test"}>plain link text</a> and <button>plain button text</button>.`,
+              { nonInteractive: true, customElements },
+            )}
+          </Text>
+        </div>
+      </div>
+
+      {/* Parser disabled demonstration */}
+      <div
+        style={{
+          marginBottom: '40px',
+          padding: '24px',
+          backgroundColor: '#e8f4f8',
+          borderRadius: '12px',
+          border: '1px solid #b3d9e6',
+        }}
+      >
+        <Text tag="h3" bold style={{ marginBottom: '16px', color: '#0c5460' }}>
+          🚫 Parser Completely Disabled
+        </Text>
+        <Text
+          disableParser
+          style={{
+            backgroundColor: '#f8f9fa',
+            padding: '16px',
+            borderRadius: '8px',
+            border: '1px solid #dee2e6',
+            fontFamily: 'monospace',
+            fontSize: '14px',
+          }}
+        >
+          {`Raw text with no parsing: <highlight>not highlighted</highlight> 
+          Links not converted: https://little-world.com
+          Buttons not created: <button>Just text</button>`}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+ParserShowcase.parameters = {
+  docs: {
+    description: {
+      story: `This story showcases all the features of the Little World Text Parser:
+
+**Automatic Features:**
+- Converts URLs to clickable links automatically
+- Handles both HTTP/HTTPS and domain-only formats
+
+**Custom Tags:**
+- \`<a {"href": "url"}>\` - Creates clickable links with JSON attributes
+- \`<button {"appearance": "secondary"}\` - Creates interactive buttons with styling
+- \`<highlight>\` - Applies highlight styling
+- \`<bold>\` - Applies bold formatting
+
+**Parser Options:**
+- \`onlyLinks: true\` - Only processes anchor tags, treats other tags as plain text
+- \`nonInteractive: true\` - Renders interactive elements (buttons, links) as plain text while preserving styling
+
+**Custom Widget Components:**
+- \`<CallWidget>\` - Renders call widgets with missed/incoming call states
+- \`<AttachmentWidget>\` - Renders file/photo attachments with previews
+- Full JSON attribute support and nested content handling
+
+**Robust Parsing:**
+- Gracefully handles malformed HTML-like content
+- Won't hang on complex or problematic text
+- Safely parses JSON attributes with fallback
+- Ignores incomplete or invalid tags
+
+**Performance:**
+- Uses zero regex for maximum reliability
+- Fast string-based parsing
+- Handles large text efficiently
+
+The parser is used automatically in all Text components unless \`disableParser={true}\` is set.`,
+    },
+  },
+};

package/src/components/Text/Text.tsx

@@ -0,0 +1,58 @@
+import {
+  TextBaseProps,
+  TextTypes,
+} from '@a-little-world/little-world-design-system-core';
+import React, { CSSProperties } from 'react';
+
+import textParser from '../../utils/parser';
+import { StyledElement } from './styles';
+
+type TextProps = TextBaseProps & {
+  className?: string;
+  disableParser?: boolean;
+  id?: string;
+  style?: CSSProperties;
+  tag?:
+    | 'p'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'li'
+    | 'label'
+    | 'span'
+    | 'strong'
+    | 'div';
+};
+
+const Text = ({
+  bold = false,
+  center = false,
+  children,
+  color,
+  className,
+  disableParser = false,
+  id,
+  style,
+  tag = 'p',
+  type = TextTypes.Body5,
+}: TextProps) => (
+  <StyledElement
+    className={className}
+    style={style}
+    id={id}
+    $bold={bold}
+    $center={center}
+    $color={color}
+    $type={type}
+    as={tag}
+  >
+    {typeof children === 'string' && !disableParser
+      ? (textParser(children) as React.ReactNode)
+      : (children as React.ReactNode)}
+  </StyledElement>
+);
+
+export default Text;

package/src/components/Text/styles.tsx

@@ -0,0 +1,75 @@
+import styled, { css } from 'styled-components';
+import {
+  TextTypes,
+  getTextStyle,
+} from '@a-little-world/little-world-design-system-core';
+
+const BODY_SHARED_STYLES = css`
+  font-family: 'Signika Negative', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  line-height: 1.5;
+`;
+
+const HEADING_SHARED_STYLES = css<{ $color?: string }>`
+  font-family: 'Work Sans', sans-serif;
+  font-weight: bold;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.1;
+`;
+
+export const BODY_5_CSS = css`
+  ${BODY_SHARED_STYLES}
+  font-size: 1rem;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: 1rem;
+  }
+`;
+
+const styles = {
+  [TextTypes.Heading1]: getTextStyle(TextTypes.Heading1),
+  [TextTypes.Heading2]: getTextStyle(TextTypes.Heading2),
+  [TextTypes.Heading3]: getTextStyle(TextTypes.Heading3),
+  [TextTypes.Heading4]: getTextStyle(TextTypes.Heading4),
+  [TextTypes.Heading5]: getTextStyle(TextTypes.Heading5),
+  [TextTypes.Heading6]: getTextStyle(TextTypes.Heading6),
+  [TextTypes.Body1]: getTextStyle(TextTypes.Body1),
+  [TextTypes.Body2]: getTextStyle(TextTypes.Body2),
+  [TextTypes.Body3]: getTextStyle(TextTypes.Body3),
+  [TextTypes.Body4]: getTextStyle(TextTypes.Body4),
+  [TextTypes.Body5]: getTextStyle(TextTypes.Body5),
+  [TextTypes.Body6]: getTextStyle(TextTypes.Body6),
+  [TextTypes.Body7]: getTextStyle(TextTypes.Body7),
+};
+
+export const StyledElement = styled.div<{
+  $bold: boolean;
+  $center: boolean;
+  $color?: string;
+  $type: keyof typeof TextTypes;
+}>`
+  ${({ $bold }) => $bold && 'font-weight: bold;'}
+  ${({ $center }) => $center && 'text-align: center;'}
+  ${({ $color }) => $color && `color: ${$color};`}
+  white-space: pre-line;
+
+  ${({ $type, theme }) => {
+    const style = styles[$type];
+    return css`
+      ${style.styleType === 'body' ? BODY_SHARED_STYLES : HEADING_SHARED_STYLES}
+      font-size: ${style.fontSize}rem;
+      ${style.fontWeight ? `font-weight: ${style.fontWeight};` : ''}
+      ${style.lineHeight ? `line-height: ${style.lineHeight};` : ''}
+
+      ${style.desktopFontSize &&
+      css`
+        @media (min-width: ${theme.breakpoints.small}) {
+          font-size: ${style.desktopFontSize}rem;
+        }
+      `}
+    `;
+  }}
+`;

package/src/components/Text/types.ts

@@ -0,0 +1,9 @@
+export type TextStyleType = 'body' | 'heading';
+
+export interface TextStyle {
+  fontSize: number;
+  desktopFontSize?: number;
+  lineHeight?: number;
+  fontWeight?: 'normal' | 'bold';
+  styleType: TextStyleType;
+}