@envive-ai/react-toolkit-v3 0.3.5

package/src/components/DesignTokens/components/PaletteColors.tsx

@@ -0,0 +1,145 @@
+export const PaletteColors = ({ selectedMerchant }: { selectedMerchant: string }) => {
+  const colorCategories = {
+    Text: [
+      {
+        name: 'Text Primary',
+        key: 'text-primary',
+        variable: '--envive-colors-text-primary',
+        tailwindClass: 'envive-tw-bg-[--envive-colors-text-primary]',
+      },
+      {
+        name: 'Text Secondary',
+        key: 'text-secondary',
+        variable: '--envive-colors-text-secondary',
+        tailwindClass: 'envive-tw-bg-[--envive-colors-text-secondary]',
+      },
+      {
+        name: 'Text Accent',
+        key: 'text-accent',
+        variable: '--envive-colors-text-accent',
+        tailwindClass: 'envive-tw-bg-[--envive-colors-text-accent]',
+      },
+      {
+        name: 'Text Link',
+        key: 'text-link',
+        variable: '--envive-colors-text-link',
+        tailwindClass: 'envive-tw-bg-[--envive-colors-text-link]',
+      },
+      {
+        name: 'Text Light',
+        key: 'text-light',
+        variable: '--envive-colors-text-light',
+        tailwindClass: 'envive-tw-bg-[--envive-colors-text-light]',
+      },
+    ],
+    Background: [
+      {
+        name: 'Background Primary',
+        key: 'background-primary',
+        variable: '--envive-colors-background-primary',
+        tailwindClass: 'envive-tw-bg-[--envive-colors-background-primary]',
+      },
+      {
+        name: 'Background Secondary',
+        key: 'background-secondary',
+        variable: '--envive-colors-background-secondary',
+        tailwindClass: 'envive-tw-bg-[--envive-colors-background-secondary]',
+      },
+      {
+        name: 'Background Tertiary',
+        key: 'background-tertiary',
+        variable: '--envive-colors-background-tertiary',
+        tailwindClass: 'envive-tw-bg-[--envive-colors-background-tertiary]',
+      },
+      {
+        name: 'Background Dark',
+        key: 'background-dark',
+        variable: '--envive-colors-background-dark',
+        tailwindClass: 'envive-tw-bg-[--envive-colors-background-dark]',
+      },
+      {
+        name: 'Background Light',
+        key: 'background-light',
+        variable: '--envive-colors-background-light',
+        tailwindClass: 'envive-tw-bg-[--envive-colors-background-light]',
+      },
+    ],
+    Border: [
+      {
+        name: 'Border Light',
+        key: 'border-light',
+        variable: '--envive-colors-border-light',
+        tailwindClass: 'envive-tw-bg-[--envive-colors-border-light]',
+      },
+      {
+        name: 'Border Medium',
+        key: 'border-medium',
+        variable: '--envive-colors-border-medium',
+        tailwindClass: 'envive-tw-bg-[--envive-colors-border-medium]',
+      },
+      {
+        name: 'Border Dark',
+        key: 'border-dark',
+        variable: '--envive-colors-border-dark',
+        tailwindClass: 'envive-tw-bg-[--envive-colors-border-dark]',
+      },
+    ],
+    Accent: [
+      {
+        name: 'Accent Primary',
+        key: 'accent-primary',
+        variable: '--envive-colors-accent-primary',
+        tailwindClass: 'envive-tw-bg-[--envive-colors-accent-primary]',
+      },
+      {
+        name: 'Accent Secondary',
+        key: 'accent-secondary',
+        variable: '--envive-colors-accent-secondary',
+        tailwindClass: 'envive-tw-bg-[--envive-colors-accent-secondary]',
+      },
+    ],
+  };
+
+  return (
+    <section>
+      <h2 className="envive-tw-mb-4 envive-tw-text-2xl envive-tw-font-semibold envive-tw-text-gray-900">
+        Color Palette
+      </h2>
+      <p className="envive-tw-mb-6 envive-tw-text-gray-700">
+        Color Tokens for Merchant:{' '}
+        <span className="envive-tw-font-semibold envive-tw-capitalize">{selectedMerchant}</span>
+      </p>
+      <div className="envive-tw-space-y-8">
+        {Object.entries(colorCategories).map(([category, colors]) => (
+          <div key={category}>
+            <h3 className="envive-tw-mb-4 envive-tw-text-lg envive-tw-font-medium envive-tw-text-gray-800">
+              {category}
+            </h3>
+            <div className="envive-tw-grid envive-tw-grid-cols-1 envive-tw-gap-4 md:envive-tw-grid-cols-2 lg:envive-tw-grid-cols-3">
+              {colors.map(({ name, key, tailwindClass, variable }) => {
+                return (
+                  <div
+                    key={key}
+                    className="envive-tw-rounded-lg envive-tw-flex envive-tw-items-center envive-tw-gap-4 envive-tw-border envive-tw-border-gray-200 envive-tw-p-4"
+                  >
+                    <div
+                      className={`envive-tw-rounded envive-tw-h-16 envive-tw-w-16 envive-tw-flex-shrink-0 envive-tw-border envive-tw-border-gray-300 ${tailwindClass}`}
+                    />
+                    <div className="envive-tw-min-w-0 envive-tw-flex-1">
+                      <div className="envive-tw-mb-1 envive-tw-text-sm envive-tw-font-medium envive-tw-text-gray-900">
+                        {name}
+                      </div>
+                      <div className="envive-tw-font-mono envive-tw-break-all envive-tw-text-xs envive-tw-text-gray-500">
+                        {`var(${variable})`}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};

package/src/components/DesignTokens/components/Purpose.tsx

@@ -0,0 +1,13 @@
+export const Purpose = () => (
+  <section>
+    <h2 className="envive-tw-mb-4 envive-tw-text-2xl envive-tw-font-semibold envive-tw-text-gray-900">
+      Purpose
+    </h2>
+    <p className="envive-tw-leading-relaxed envive-tw-text-gray-700">
+      Design tokens are the foundational design decisions of our design system. They provide a
+      common language for designers and developers, ensuring quality, maintainability, and
+      productivity across all products. By using design tokens, we create consistency in our visual
+      design and make it easier to maintain and scale our design system.
+    </p>
+  </section>
+);

package/src/components/DesignTokens/components/Spacing.tsx

@@ -0,0 +1,41 @@
+type SpacingProps = {
+  spacingTokensArray: {
+    key: string;
+    value: string;
+    numericValue: number;
+  }[];
+};
+
+export const Spacing = ({ spacingTokensArray }: SpacingProps) => (
+  <section>
+    <h2 className="envive-tw-mb-4 envive-tw-text-2xl envive-tw-font-semibold envive-tw-text-gray-900">
+      Spacing
+    </h2>
+    <p className="envive-tw-mb-6 envive-tw-text-gray-700">
+      Spacing tokens define the consistent spacing scale used throughout the design system.
+    </p>
+    <div className="envive-tw-space-y-3">
+      {spacingTokensArray.map(({ key, value, numericValue }) => {
+        const maxWidth = 400;
+        const width = Math.min((numericValue / 384) * maxWidth, maxWidth);
+
+        return (
+          <div
+            key={key}
+            className="envive-tw-flex envive-tw-items-center envive-tw-gap-4"
+          >
+            <div className="envive-tw-font-mono envive-tw-w-20 envive-tw-text-sm envive-tw-text-gray-600">
+              {value}
+            </div>
+            <div className="envive-tw-relative envive-tw-flex-1">
+              <div
+                className="envive-tw-rounded envive-tw-h-8 envive-tw-bg-[#1f5f51]"
+                style={{ width: `${width}px` }}
+              />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  </section>
+);

package/src/components/DesignTokens/components/Typography.tsx

@@ -0,0 +1,128 @@
+import classNames from 'classnames';
+
+export const Typography = () => {
+  const typographyTokens = {
+    Title: {
+      t1: {
+        className: 'envive-tw-text-t1-md',
+        name: 'Text T1 MD',
+      },
+      t2: {
+        className: 'envive-tw-text-t2-md',
+        name: 'Text T2 MD',
+      },
+      t3: {
+        className: 'envive-tw-text-t3-md',
+        name: 'Text T3 MD',
+      },
+    },
+    Header: {
+      h1sb: {
+        className: 'envive-tw-text-h1-sb',
+        name: 'Text H1 SB',
+      },
+      h1md: {
+        className: 'envive-tw-text-h1-md',
+        name: 'Text H1 MD',
+      },
+      h2sb: {
+        className: 'envive-tw-text-h2-sb',
+        name: 'Text H2 SB',
+      },
+      h2md: {
+        className: 'envive-tw-text-h2-md',
+        name: 'Text H2 MD',
+      },
+      h3sb: {
+        className: 'envive-tw-text-h3-sb',
+        name: 'Text H3 SB',
+      },
+      h3md: {
+        className: 'envive-tw-text-h3-md',
+        name: 'Text H3 MD',
+      },
+    },
+    Body: {
+      b1rg: {
+        className: 'envive-tw-text-b1-rg',
+        name: 'Text B1 RG',
+      },
+      b1md: {
+        className: 'envive-tw-text-b1-md',
+        name: 'Text B1 MD',
+      },
+      b2rg: {
+        className: 'envive-tw-text-b2-rg',
+        name: 'Text B2 RG',
+      },
+      b2md: {
+        className: 'envive-tw-text-b2-md',
+        name: 'Text B2 MD',
+      },
+      b3rg: {
+        className: 'envive-tw-text-b3-rg',
+        name: 'Text B3 RG',
+      },
+      b3md: {
+        className: 'envive-tw-text-b3-md',
+        name: 'Text B3 MD',
+      },
+      b4rg: {
+        className: 'envive-tw-text-b4-rg',
+        name: 'Text B4 RG',
+      },
+      b4md: {
+        className: 'envive-tw-text-b4-md',
+        name: 'Text B4 MD',
+      },
+      b5rg: {
+        className: 'envive-tw-text-b5-rg',
+        name: 'Text B5 RG',
+      },
+      b5md: {
+        className: 'envive-tw-text-b5-md',
+        name: 'Text B5 MD',
+      },
+    },
+  };
+
+  return (
+    <section>
+      <h2 className="envive-tw-mb-4 envive-tw-text-2xl envive-tw-font-semibold envive-tw-text-gray-900">
+        Typography
+      </h2>
+      <div className="envive-tw-space-y-8">
+        {Object.entries(typographyTokens).map(([category, tokens]) => (
+          <div key={category}>
+            <h3 className="envive-tw-mb-4 envive-tw-text-lg envive-tw-font-medium envive-tw-text-gray-800">
+              {category}
+            </h3>
+            <div className="envive-tw-space-y-4">
+              {Object.entries(tokens).map(([key, value]) => (
+                <div
+                  className="envive-tw-flex envive-tw-items-baseline envive-tw-gap-6"
+                  key={`${category}-${key}`}
+                >
+                  <div className="envive-tw-flex envive-tw-min-w-[140px] envive-tw-items-center envive-tw-gap-3">
+                    <span className="envive-tw-font-mono envive-tw-text-sm envive-tw-font-medium envive-tw-text-gray-700">
+                      .{value.className}
+                    </span>
+                  </div>
+                  <div
+                    className={classNames(
+                      'envive-tw-flex-1',
+                      value.className,
+                      `envive-tw-text-[var(--envive-colors-text-primary)]`,
+                    )}
+                  >
+                    Envive Design System
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};

package/src/components/DesignTokens/components/index.ts

@@ -0,0 +1,29 @@
+import { Container } from './Container';
+import { Header } from './Header';
+import { Purpose } from './Purpose';
+import { PaletteColors } from './PaletteColors';
+import { Typography } from './Typography';
+import { FontSize } from './FontSize';
+import { LineHeight } from './LineHeight';
+import { FontWeight } from './FontWeight';
+import { FontFamily } from './FontFamily';
+import { LetterSpacing } from './LetterSpacing';
+import { BorderRadius } from './BorderRadius';
+import { Spacing } from './Spacing';
+import { Breakpoints } from './Breakpoints';
+
+export const DesignTokens = {
+  Container,
+  Header,
+  Purpose,
+  PaletteColors,
+  Typography,
+  FontSize,
+  LineHeight,
+  FontWeight,
+  FontFamily,
+  LetterSpacing,
+  BorderRadius,
+  Spacing,
+  Breakpoints,
+};

package/src/components/DesignTokens/components/utils.ts

@@ -0,0 +1,20 @@
+export const getComputedCSSVariable = (variableName: string) => {
+  if (!variableName.startsWith('var(')) return variableName;
+
+  const cssVar = variableName.match(/var\((--[^)]+)\)/)?.[1];
+  if (!cssVar) return variableName;
+
+  if (typeof window === 'undefined') return variableName;
+
+  const documentElementStyle = getComputedStyle(document.documentElement);
+  const bodyStyle = getComputedStyle(document.body);
+
+  const value = documentElementStyle.getPropertyValue(cssVar) || bodyStyle.getPropertyValue(cssVar);
+
+  return value ? value.trim() : variableName;
+};
+
+export const getCSSVariable = (variableName: string): string => {
+  if (typeof window === 'undefined') return '';
+  return getComputedStyle(document.documentElement).getPropertyValue(variableName)?.trim() || '';
+};

package/src/components/DesignTokens/hooks/useGetDesignTokensFromTailwindConfig.ts

@@ -0,0 +1,45 @@
+import type { Config as TailwindConfig } from 'tailwindcss';
+
+export const useGetDesignTokensFromTailwindConfig = ({ config }: { config: TailwindConfig }) => {
+  const theme = config.theme || {};
+  const extend = theme.extend || {};
+
+  const rawSpacingTokens = (theme.spacing || {}) as Record<string, string>;
+  const spacingTokensArray = Object.entries(rawSpacingTokens)
+    .map(([key, value]) => {
+      const numericValue = parseFloat(value);
+      return { key, value, numericValue };
+    })
+    .sort((a, b) => a.numericValue - b.numericValue);
+
+  const rawBorderRadiusTokens = (theme.borderRadius || {}) as Record<string, string>;
+  const borderRadiusTokensArray = Object.entries(rawBorderRadiusTokens)
+    .map(([key, value]) => {
+      const numericValue = parseFloat(value);
+      return { key, value, numericValue };
+    })
+    .sort((a, b) => a.numericValue - b.numericValue);
+
+  const fontSizeTokens = (extend.fontSize || {}) as Record<string, string>;
+
+  const fontWeightTokens = (extend.fontWeight || {}) as Record<string, string>;
+
+  const lineHeightTokens = (extend.lineHeight || {}) as Record<string, string>;
+
+  const fontFamilyTokens = (extend.fontFamily || {}) as Record<string, string | string[]>;
+
+  const breakpointTokens = (theme.screens || {}) as Record<string, string>;
+
+  const letterSpacingTokens = (extend.letterSpacing || {}) as Record<string, string>;
+
+  return {
+    spacingTokensArray,
+    borderRadiusTokensArray,
+    fontSizeTokens,
+    fontWeightTokens,
+    lineHeightTokens,
+    fontFamilyTokens,
+    breakpointTokens,
+    letterSpacingTokens,
+  };
+};

package/src/components/DesignTokens/index.ts

@@ -0,0 +1,2 @@
+export { DesignTokens } from './DesignTokensComponent';
+export type { DesignTokensProps } from './DesignTokensComponent';

package/src/components/DocumentRetrievalCard/DocumentRetrievalCard.tsx

@@ -0,0 +1,61 @@
+import { DocumentRetrievalCardComponents } from './components';
+import { DocumentRetrievalCardProps, DocumentRetrievalCardVariant } from './types';
+import { getVariant } from './utils/functions';
+
+export const DocumentRetrievalCard = ({
+  title,
+  description,
+  imageUrl,
+  imageAlt,
+  theme,
+  id,
+  testId,
+  className: classNameProp,
+  style,
+  articleUrl,
+  onViewArticle,
+  ariaLabel,
+  viewArticleLabel,
+}: DocumentRetrievalCardProps) => {
+  const variant = getVariant(imageUrl);
+  const hasImage = variant === DocumentRetrievalCardVariant.WITH_IMAGE;
+
+  const content = title ? (
+    <DocumentRetrievalCardComponents.Content
+      title={title}
+      description={description}
+      hasImage={hasImage}
+    />
+  ) : null;
+
+  const image = hasImage && imageUrl && (
+    <DocumentRetrievalCardComponents.Image
+      imageUrl={imageUrl}
+      imageAlt={imageAlt}
+    />
+  );
+
+  const viewArticleButton = (
+    <DocumentRetrievalCardComponents.ViewArticleButton
+      articleUrl={articleUrl}
+      onClick={onViewArticle}
+      theme={theme}
+      hasImage={hasImage}
+      viewArticleLabel={viewArticleLabel}
+    />
+  );
+
+  return (
+    <DocumentRetrievalCardComponents.Layout
+      id={id}
+      testId={testId}
+      className={classNameProp}
+      style={style}
+      theme={theme}
+      content={content}
+      image={image}
+      viewArticleButton={viewArticleButton}
+      ariaLabel={ariaLabel ?? title}
+    />
+  );
+};