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

package/src/utils/parser.tsx

@@ -0,0 +1,333 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Button from '../components/Button/Button';
+import Link from '../components/Link/Link';
+import replaceUrlsWithAnchors from './replaceUrlsWithAnchors';
+
+const ColorText = styled.strong<{ color: keyof typeof SupportedColorTags }>`
+  color: ${({ theme, color }) =>
+    color === SupportedColorTags.bold
+      ? 'currentColor'
+      : theme.color.text[color]};
+`;
+
+const ANCHOR_TAG = 'a';
+const BUTTON_TAG = 'button';
+
+enum SupportedColorTags {
+  highlight = 'highlight',
+  bold = 'bold',
+}
+
+interface TagInfo {
+  start: number;
+  end: number;
+  tagName: string;
+  attributes: Record<string, any>;
+  hasClosingTag: boolean;
+  contentStart: number;
+  contentEnd: number;
+}
+
+interface ParserOptions {
+  customElements?: {
+    Component: React.ElementType;
+    props?: Record<string, any>;
+    tag: string;
+  }[];
+  onlyLinks?: boolean;
+  nonInteractive?: boolean; // if true, will render clickable components as plain text
+}
+
+const findTags = (text: string): TagInfo[] => {
+  const tags: TagInfo[] = [];
+  const textLength = text.length;
+  let position = 0;
+
+  while (position < textLength) {
+    const openBracket = text.indexOf('<', position);
+    if (openBracket === -1) break;
+
+    const closeBracket = text.indexOf('>', openBracket);
+    if (closeBracket === -1) break;
+
+    const tagContent = text.substring(openBracket + 1, closeBracket);
+
+    // Check if it's a valid opening tag (starts with letter)
+    if (/^[a-zA-Z]/.test(tagContent)) {
+      const firstSpace = tagContent.indexOf(' ');
+      const tagName =
+        firstSpace === -1 ? tagContent : tagContent.substring(0, firstSpace);
+      const attributesText =
+        firstSpace === -1 ? '' : tagContent.substring(firstSpace + 1);
+
+      // Parse attributes safely
+      let attributes: Record<string, any> = {};
+      if (attributesText.trim()) {
+        try {
+          attributes = JSON.parse(attributesText);
+        } catch {
+          // Invalid JSON - treat as plain text
+          position = closeBracket + 1;
+          continue;
+        }
+      }
+
+      // Look for closing tag
+      const closingTag = `</${tagName}>`;
+      const closingTagIndex = text.indexOf(closingTag, closeBracket + 1);
+
+      if (closingTagIndex !== -1) {
+        // Found complete tag
+        tags.push({
+          start: openBracket,
+          end: closingTagIndex + closingTag.length,
+          tagName,
+          attributes,
+          hasClosingTag: true,
+          contentStart: closeBracket + 1,
+          contentEnd: closingTagIndex,
+        });
+        position = closingTagIndex + closingTag.length;
+      } else {
+        // No closing tag - treat as plain text
+        position = closeBracket + 1;
+      }
+    } else {
+      // Not a valid tag - move past it
+      position = closeBracket + 1;
+    }
+  }
+
+  return tags;
+};
+
+const parseContent = (
+  content: string,
+  options: ParserOptions,
+): Array<string | React.ReactElement> => {
+  const tags = findTags(content);
+
+  if (tags.length === 0) {
+    return [content];
+  }
+
+  const components: Array<string | React.ReactElement> = [];
+  let currentIndex = 0;
+
+  for (const tag of tags) {
+    // Add text before this tag
+    if (tag.start > currentIndex) {
+      components.push(content.substring(currentIndex, tag.start));
+    }
+
+    // Extract content between tags
+    const tagContent = content.substring(tag.contentStart, tag.contentEnd);
+
+    // Process the tag based on type and options
+    if (tag.tagName === ANCHOR_TAG) {
+      // Always process anchor tags
+      const nestedContent = parseContent(tagContent, options);
+      components.push(
+        tag.attributes.href ? (
+          <Link
+            key={`${tag.tagName}-${tag.start}-${tag.end}`}
+            to={tag.attributes.href}
+            {...tag.attributes}
+          >
+            {nestedContent}
+          </Link>
+        ) : (
+          <>{nestedContent}</>
+        ),
+      );
+    } else if (options.onlyLinks) {
+      // In onlyLinks mode, treat all non-anchor tags as plain text
+      components.push(content.substring(tag.start, tag.end));
+    } else if (tag.tagName === BUTTON_TAG) {
+      const nestedContent = parseContent(tagContent, options);
+      components.push(
+        <Button
+          key={`${tag.tagName}-${tag.start}-${tag.end}`}
+          {...tag.attributes}
+        >
+          {nestedContent}
+        </Button>,
+      );
+    } else if (
+      Object.values(SupportedColorTags).includes(
+        tag.tagName as SupportedColorTags,
+      )
+    ) {
+      const nestedContent = parseContent(tagContent, options);
+      components.push(
+        <ColorText
+          key={`${tag.tagName}-${tag.start}-${tag.end}`}
+          color={SupportedColorTags[tag.tagName as SupportedColorTags]}
+        >
+          {nestedContent}
+        </ColorText>,
+      );
+    } else if (options.customElements) {
+      // Check for custom elements
+      const customElement = options.customElements.find(
+        element => element.tag === tag.tagName,
+      );
+      if (customElement) {
+        const nestedContent = parseContent(tagContent, options);
+        components.push(
+          <customElement.Component
+            key={`${tag.tagName}-${tag.start}-${tag.end}`}
+            {...tag.attributes}
+            {...customElement.props}
+          >
+            {nestedContent}
+          </customElement.Component>,
+        );
+      } else {
+        // Unrecognized tag, add as plain text
+        components.push(content.substring(tag.start, tag.end));
+      }
+    } else {
+      // Unrecognized tag, add as plain text
+      components.push(content.substring(tag.start, tag.end));
+    }
+
+    currentIndex = tag.end;
+  }
+
+  // Add remaining text after last tag
+  if (currentIndex < content.length) {
+    components.push(content.substring(currentIndex));
+  }
+
+  return components;
+};
+
+const textParser = (text: string, options: ParserOptions = {}) => {
+  const nonInteractive = options.nonInteractive || false;
+  // First convert HTML links to recognised anchor tags
+  const textWithParsedUrls = nonInteractive
+    ? text
+    : replaceUrlsWithAnchors(text);
+
+  // Find all complete tags
+  const tags = findTags(textWithParsedUrls);
+
+  if (tags.length === 0) {
+    return textWithParsedUrls;
+  }
+
+  const components: Array<string | React.ReactElement> = [];
+  let currentIndex = 0;
+
+  for (const tag of tags) {
+    // Add text before this tag
+    if (tag.start > currentIndex) {
+      components.push(textWithParsedUrls.substring(currentIndex, tag.start));
+    }
+
+    // Extract content between tags
+    const content = textWithParsedUrls.substring(
+      tag.contentStart,
+      tag.contentEnd,
+    );
+
+    // Process the tag based on type
+    if (tag.tagName === ANCHOR_TAG) {
+      // Always process anchor tags (even in onlyLinks mode)
+      const nestedContent = parseContent(content, options);
+      components.push(
+        tag.attributes.href && !nonInteractive ? (
+          <Link
+            key={`${tag.tagName}-${tag.start}-${tag.end}`}
+            to={tag.attributes.href}
+            {...tag.attributes}
+          >
+            {nestedContent}
+          </Link>
+        ) : (
+          <>{nestedContent}</>
+        ),
+      );
+    } else if (options.onlyLinks) {
+      // In onlyLinks mode, treat all non-anchor tags as plain text
+      components.push(textWithParsedUrls.substring(tag.start, tag.end));
+    } else if (tag.tagName === BUTTON_TAG) {
+      const nestedContent = parseContent(content, options);
+      components.push(
+        nonInteractive ? (
+          <>{nestedContent}</>
+        ) : (
+          <Button
+            key={`${tag.tagName}-${tag.start}-${tag.end}`}
+            {...tag.attributes}
+          >
+            {nestedContent}
+          </Button>
+        ),
+      );
+    } else if (
+      Object.values(SupportedColorTags).includes(
+        tag.tagName as SupportedColorTags,
+      )
+    ) {
+      const nestedContent = parseContent(content, options);
+      components.push(
+        nonInteractive ? (
+          <>{nestedContent}</>
+        ) : (
+          <ColorText
+            key={`${tag.tagName}-${tag.start}-${tag.end}`}
+            color={SupportedColorTags[tag.tagName as SupportedColorTags]}
+          >
+            {nestedContent}
+          </ColorText>
+        ),
+      );
+    } else if (options.customElements) {
+      // Check for custom elements
+      const customElement = options.customElements.find(
+        element => element.tag === tag.tagName,
+      );
+      if (customElement) {
+        const nestedContent = parseContent(content, options);
+        components.push(
+          <customElement.Component
+            key={`${tag.tagName}-${tag.start}-${tag.end}`}
+            {...tag.attributes}
+            {...customElement.props}
+          >
+            {nestedContent}
+          </customElement.Component>,
+        );
+      } else {
+        // Unrecognized tag, add as plain text
+        components.push(textWithParsedUrls.substring(tag.start, tag.end));
+      }
+    } else {
+      // Unrecognized tag, add as plain text
+      components.push(textWithParsedUrls.substring(tag.start, tag.end));
+    }
+
+    currentIndex = tag.end;
+  }
+
+  // Add remaining text after last tag
+  if (currentIndex < textWithParsedUrls.length) {
+    components.push(textWithParsedUrls.substring(currentIndex));
+  }
+
+  return (
+    <span>
+      {components.map((section, index) =>
+        typeof section === 'string'
+          ? section
+          : React.cloneElement(section, { key: index }),
+      )}
+    </span>
+  );
+};
+
+export default textParser;

package/src/utils/replaceUrlsWithAnchors.test.ts

@@ -0,0 +1,42 @@
+import replaceUrlsWithAnchors from './replaceUrlsWithAnchors';
+
+const ANCHOR_ENTITY_CODE = '<a';
+
+const positiveTestCases = [
+  'Check out google.com for more info',
+  'Visit www.google.com and https://example.com',
+  'Link at start: mozilla.org is first',
+  'https://complex-url.com/path?param=value#section',
+];
+
+const negativeTestCases = [
+  'prefix:google.com should not match',
+  'href:little-world.com should not match but google.com should',
+  'email@google.com should not match',
+  '<a {"href":"little-world.com", "target":"_blank"}>little-world.com</a>',
+];
+
+it('should replace html link with anchor link if valid', () => {
+  positiveTestCases.forEach(text => {
+    const result = replaceUrlsWithAnchors(text);
+    expect(result.includes(ANCHOR_ENTITY_CODE));
+  });
+});
+
+it('should also include text before and after link', () => {
+  const result = replaceUrlsWithAnchors(positiveTestCases[0]);
+  expect(result.includes('Check out '));
+  expect(result.includes(' for more info'));
+});
+
+it('should also include text between links', () => {
+  const result = replaceUrlsWithAnchors(positiveTestCases[1]);
+  expect(result.includes(' and '));
+});
+
+it('should not replace html link with anchor link if not valid', () => {
+  negativeTestCases.forEach(text => {
+    const result = replaceUrlsWithAnchors(text);
+    expect(result.includes(ANCHOR_ENTITY_CODE) === false);
+  });
+});

package/src/utils/replaceUrlsWithAnchors.ts

@@ -0,0 +1,32 @@
+import { isValidUrl } from '@a-little-world/little-world-design-system-core';
+
+// Example outputs:
+
+/*
+Input: Check out www.google.com for more info
+Output: Check out <a href="https://www.google.com" target="_blank">www.google.com</a> for more info
+
+Input: Visit little-world.io and https://example.com
+Output: Visit <a href="https://little-world.io" target="_blank">little-world.io</a> and <a href="https://example.com" target="_blank">https://example.com</a>
+*/
+
+const urlPattern =
+  /(?<=^|\s)(?:https?:\/\/)?(?:www\.)?(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}(?:\/[^\s]*)?/g;
+
+/**
+ * Replaces all URLs in a text with HTML anchor tags
+ * @param text - The input text containing URLs
+ * @returns The text with URLs replaced with anchor tags
+ */
+export default function replaceUrlsWithAnchors(text: string): string {
+  return text.replace(urlPattern, match => {
+    // Ensure URL has protocol for href
+    try {
+      if (!isValidUrl(match)) return match;
+      const href = match.startsWith('http') ? match : `https://${match}`;
+      return `<a {"target":"_blank", "href":"${href}"}>${match}</a>`;
+    } catch {
+      return match;
+    }
+  });
+}

package/src/utils/status.tsx

@@ -0,0 +1,85 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  margin: ${({ theme }) => theme.spacing.medium}; 0 ${({ theme }) => theme.spacing.xsmall}; 0;
+`;
+
+const ReactStatus = styled.div`
+  border-radius: 4px;
+  padding: ${({ theme }) => theme.spacing.xxsmall}
+    ${({ theme }) => theme.spacing.xsmall};
+  font-family: monospace;
+  background: #20232a;
+  color: #61dafb;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  align-items: center;
+  font-size: 1rem;
+`;
+
+const FigmaStatus = styled.a`
+  border-radius: 4px;
+  padding: ${({ theme }) => theme.spacing.xxsmall}
+    ${({ theme }) => theme.spacing.xsmall};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing.xsmall};
+  align-items: center;
+  background: #000;
+  text-decoration: none;
+  color: #fff;
+  font-size: 0.9rem;
+
+  &:hover {
+    background: #333;
+  }
+`;
+
+type StatusProps = {
+  React: string;
+  Figma: string;
+};
+
+const Status = ({ React, Figma }: StatusProps) => {
+  return (
+    <Wrapper>
+      {React && (
+        <ReactStatus>
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K"
+            alt=""
+            height="20"
+          />
+          <div>{React}</div>
+        </ReactStatus>
+      )}
+      {Figma && (
+        <FigmaStatus href={Figma}>
+          <svg height="20px" viewBox="0 0 38 57">
+            <path
+              fill="#1abcfe"
+              d="M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z"
+            ></path>
+            <path
+              fill="#0acf83"
+              d="M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z"
+            ></path>
+            <path fill="#ff7262" d="M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z"></path>
+            <path
+              fill="#f24e1e"
+              d="M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z"
+            ></path>
+            <path
+              fill="#a259ff"
+              d="M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z"
+            ></path>
+          </svg>
+          <div>Link</div>
+        </FigmaStatus>
+      )}
+    </Wrapper>
+  );
+};
+
+export default Status;

package/src/utils/styles.ts

@@ -0,0 +1 @@
+export const pixelate = (value: number) => `${value}px`;

package/src/utils/types.ts

@@ -0,0 +1 @@
+export type ValueOf<T> = T[keyof T];

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "lib": ["es2022", "DOM", "DOM.Iterable"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "target": "ES2022",
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": false,
+    "moduleDetection": "force"
+  },
+  "include": ["src"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.config.js",
+    "**/*.config.ts",
+    "**/*.stories.tsx",
+    "**/*.stories.ts",
+    "**/*.test.tsx",
+    "**/*.test.ts",
+    "**/testUtils.tsx",
+    "**/setupTests.ts"
+  ],
+  "types": ["@testing-library/jest-dom"],
+  "typeRoots": ["./node_modules/@types"]
+}

package/tsconfig.test.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "types": ["jest", "@testing-library/jest-dom"]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx",
+    "src/setupTests.ts",
+    "src/testUtils.tsx"
+  ],
+  "exclude": ["node_modules", "dist"]
+}