@developer_tribe/react-builder 0.1.23 → 0.1.25

package/src/build-components/Button/getDefaults.ts

@@ -0,0 +1,11 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { ButtonPropsGenerated } from './ButtonProps.generated';
+
+export type ButtonDefaults = Partial<ButtonPropsGenerated['attributes']>;
+
+export function getDefaults(): ButtonDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as ButtonDefaults;
+}

package/src/build-components/Carousel/getDefaults.ts

@@ -0,0 +1,11 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { CarouselPropsGenerated } from './CarouselProps.generated';
+
+export type CarouselDefaults = Partial<CarouselPropsGenerated['attributes']>;
+
+export function getDefaults(): CarouselDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as CarouselDefaults;
+}

package/src/build-components/CarouselButtons/getDefaults.ts

@@ -0,0 +1,13 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { CarouselButtonsPropsGenerated } from './CarouselButtonsProps.generated';
+
+export type CarouselButtonsDefaults = Partial<
+  CarouselButtonsPropsGenerated['attributes']
+>;
+
+export function getDefaults(): CarouselButtonsDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as CarouselButtonsDefaults;
+}

package/src/build-components/CarouselDots/getDefaults.ts

@@ -0,0 +1,13 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { CarouselDotsPropsGenerated } from './CarouselDotsProps.generated';
+
+export type CarouselDotsDefaults = Partial<
+  CarouselDotsPropsGenerated['attributes']
+>;
+
+export function getDefaults(): CarouselDotsDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as CarouselDotsDefaults;
+}

package/src/build-components/CarouselItem/getDefaults.ts

@@ -0,0 +1,13 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { CarouselItemPropsGenerated } from './CarouselItemProps.generated';
+
+export type CarouselItemDefaults = Partial<
+  CarouselItemPropsGenerated['attributes']
+>;
+
+export function getDefaults(): CarouselItemDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as CarouselItemDefaults;
+}

package/src/build-components/CarouselProvider/getDefaults.ts

@@ -0,0 +1,13 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { CarouselProviderPropsGenerated } from './CarouselProviderProps.generated';
+
+export type CarouselProviderDefaults = Partial<
+  CarouselProviderPropsGenerated['attributes']
+>;
+
+export function getDefaults(): CarouselProviderDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as CarouselProviderDefaults;
+}

package/src/build-components/Image/getDefaults.ts

@@ -0,0 +1,11 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { ImagePropsGenerated } from './ImageProps.generated';
+
+export type ImageDefaults = Partial<ImagePropsGenerated['attributes']>;
+
+export function getDefaults(): ImageDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as ImageDefaults;
+}

package/src/build-components/Onboard/getDefaults.ts

@@ -0,0 +1,11 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { OnboardPropsGenerated } from './OnboardProps.generated';
+
+export type OnboardDefaults = Partial<OnboardPropsGenerated['attributes']>;
+
+export function getDefaults(): OnboardDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as OnboardDefaults;
+}

package/src/build-components/OnboardButton/getDefaults.ts

@@ -0,0 +1,13 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { OnboardButtonPropsGenerated } from './OnboardButtonProps.generated';
+
+export type OnboardButtonDefaults = Partial<
+  OnboardButtonPropsGenerated['attributes']
+>;
+
+export function getDefaults(): OnboardButtonDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as OnboardButtonDefaults;
+}

package/src/build-components/OnboardButtons/getDefaults.ts

@@ -0,0 +1,13 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { OnboardButtonsPropsGenerated } from './OnboardButtonsProps.generated';
+
+export type OnboardButtonsDefaults = Partial<
+  OnboardButtonsPropsGenerated['attributes']
+>;
+
+export function getDefaults(): OnboardButtonsDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as OnboardButtonsDefaults;
+}

package/src/build-components/OnboardDot/getDefaults.ts

@@ -0,0 +1,13 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { OnboardDotPropsGenerated } from './OnboardDotProps.generated';
+
+export type OnboardDotDefaults = Partial<
+  OnboardDotPropsGenerated['attributes']
+>;
+
+export function getDefaults(): OnboardDotDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as OnboardDotDefaults;
+}

package/src/build-components/OnboardFooter/OnboardFooter.tsx

@@ -2,8 +2,89 @@ import React, { useContext } from 'react';
 import type { OnboardFooterComponentProps } from './OnboardFooterProps.generated';
 import { mainNodeContext } from '../../RenderMainNode';
 
+type Segment =
+  | { type: 'text'; value: string }
+  | {
+      type: 'match';
+      value: string;
+      color?: string;
+      page?: string;
+    };
+
+function escapeRegExp(str: string) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function buildSegments(
+  text: string,
+  patterns: { value: string; color?: string; page?: string }[],
+): { segments: Segment[]; matchCount: number } {
+  type RawMatch = {
+    start: number;
+    end: number;
+    value: string;
+    color?: string;
+    page?: string;
+  };
+
+  const rawMatches: RawMatch[] = [];
+
+  for (const p of patterns) {
+    if (!p.value) continue;
+    const re = new RegExp(escapeRegExp(p.value), 'gi');
+    for (const m of text.matchAll(re)) {
+      if (m.index == null) continue;
+      const matched = m[0];
+      if (!matched) continue;
+      rawMatches.push({
+        start: m.index,
+        end: m.index + matched.length,
+        value: matched,
+        color: p.color,
+        page: p.page,
+      });
+    }
+  }
+
+  if (rawMatches.length === 0) {
+    return { segments: [{ type: 'text', value: text }], matchCount: 0 };
+  }
+
+  rawMatches.sort((a, b) => {
+    if (a.start !== b.start) return a.start - b.start;
+    const lenA = a.end - a.start;
+    const lenB = b.end - b.start;
+    return lenB - lenA;
+  });
+
+  const kept: RawMatch[] = [];
+  let lastEnd = -1;
+  for (const m of rawMatches) {
+    if (m.start >= lastEnd) {
+      kept.push(m);
+      lastEnd = m.end;
+    }
+  }
+
+  const segments: Segment[] = [];
+  let cursor = 0;
+  for (const { start, end, value, color, page } of kept) {
+    if (start > cursor) {
+      segments.push({ type: 'text', value: text.slice(cursor, start) });
+    }
+    segments.push({ type: 'match', value, color, page });
+    cursor = end;
+  }
+  if (cursor < text.length) {
+    segments.push({ type: 'text', value: text.slice(cursor) });
+  }
+
+  return { segments, matchCount: kept.length };
+}
+
 function OnboardFooter({ node }: OnboardFooterComponentProps) {
-  const { localication, defaultLanguage } = useContext(mainNodeContext) ?? {};
+  const { localication, defaultLanguage, setWarning } =
+    useContext(mainNodeContext) ?? {};
   const t = (key?: string) =>
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
@@ -44,19 +125,81 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
 
   return (
     <div className="primitive primitive-footer" style={style}>
-      {!!text && <p style={{ color: node?.attributes?.textColor }}>{text}</p>}
-      <div style={{ display: 'flex', gap: 8 }}>
-        {node?.attributes?.linkedWordFirstLocalizationKey && (
-          <span style={linkStyle(node?.attributes?.linkedWordFirstColor)}>
-            {t(node?.attributes?.linkedWordFirstLocalizationKey)}
-          </span>
-        )}
-        {node?.attributes?.linkedWordSecondLocalizationKey && (
-          <span style={linkStyle(node?.attributes?.linkedWordSecondColor)}>
-            {t(node?.attributes?.linkedWordSecondLocalizationKey)}
-          </span>
-        )}
-      </div>
+      {!!text &&
+        (() => {
+          const firstText = t(node?.attributes?.linkedWordFirstLocalizationKey);
+          const secondText = t(
+            node?.attributes?.linkedWordSecondLocalizationKey,
+          );
+          const { segments, matchCount } = buildSegments(text, [
+            {
+              value: firstText,
+              color: node?.attributes?.linkedWordFirstColor,
+              page: (node?.attributes as any)?.linkedWordFirstPage,
+            },
+            {
+              value: secondText,
+              color: node?.attributes?.linkedWordSecondColor,
+              page: (node?.attributes as any)?.linkedWordSecondPage,
+            },
+          ]);
+
+          const textColor = node?.attributes?.textColor;
+
+          const handleClick = (page?: string) => {
+            if (!page) return;
+            // Demo environment: surface intent via warning banner if available
+            if (setWarning) setWarning(`Navigate to page: ${page}`);
+          };
+
+          return (
+            <>
+              <p style={{ color: textColor }}>
+                {segments.map((seg, i) =>
+                  seg.type === 'text' ? (
+                    <span key={i}>{seg.value}</span>
+                  ) : (
+                    <span
+                      key={i}
+                      style={linkStyle(seg.color)}
+                      onClick={() => handleClick(seg.page)}
+                    >
+                      {seg.value}
+                    </span>
+                  ),
+                )}
+              </p>
+              {matchCount === 0 && (
+                <div style={{ display: 'flex', gap: 8 }}>
+                  {node?.attributes?.linkedWordFirstLocalizationKey && (
+                    <span
+                      style={linkStyle(node?.attributes?.linkedWordFirstColor)}
+                      onClick={() =>
+                        handleClick(
+                          (node?.attributes as any)?.linkedWordFirstPage,
+                        )
+                      }
+                    >
+                      {firstText}
+                    </span>
+                  )}
+                  {node?.attributes?.linkedWordSecondLocalizationKey && (
+                    <span
+                      style={linkStyle(node?.attributes?.linkedWordSecondColor)}
+                      onClick={() =>
+                        handleClick(
+                          (node?.attributes as any)?.linkedWordSecondPage,
+                        )
+                      }
+                    >
+                      {secondText}
+                    </span>
+                  )}
+                </div>
+              )}
+            </>
+          );
+        })()}
     </div>
   );
 }

package/src/build-components/OnboardFooter/getDefaults.ts

@@ -0,0 +1,13 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { OnboardFooterPropsGenerated } from './OnboardFooterProps.generated';
+
+export type OnboardFooterDefaults = Partial<
+  OnboardFooterPropsGenerated['attributes']
+>;
+
+export function getDefaults(): OnboardFooterDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as OnboardFooterDefaults;
+}

package/src/build-components/OnboardImage/getDefaults.ts

@@ -0,0 +1,13 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { OnboardImagePropsGenerated } from './OnboardImageProps.generated';
+
+export type OnboardImageDefaults = Partial<
+  OnboardImagePropsGenerated['attributes']
+>;
+
+export function getDefaults(): OnboardImageDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as OnboardImageDefaults;
+}

package/src/build-components/OnboardItem/getDefaults.ts

@@ -0,0 +1,13 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { OnboardItemPropsGenerated } from './OnboardItemProps.generated';
+
+export type OnboardItemDefaults = Partial<
+  OnboardItemPropsGenerated['attributes']
+>;
+
+export function getDefaults(): OnboardItemDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as OnboardItemDefaults;
+}

package/src/build-components/OnboardProvider/getDefaults.ts

@@ -0,0 +1,13 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { OnboardProviderPropsGenerated } from './OnboardProviderProps.generated';
+
+export type OnboardProviderDefaults = Partial<
+  OnboardProviderPropsGenerated['attributes']
+>;
+
+export function getDefaults(): OnboardProviderDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as OnboardProviderDefaults;
+}

package/src/build-components/OnboardSubtitle/getDefaults.ts

@@ -0,0 +1,13 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { OnboardSubtitlePropsGenerated } from './OnboardSubtitleProps.generated';
+
+export type OnboardSubtitleDefaults = Partial<
+  OnboardSubtitlePropsGenerated['attributes']
+>;
+
+export function getDefaults(): OnboardSubtitleDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as OnboardSubtitleDefaults;
+}

package/src/build-components/OnboardSubtitle/pattern.json

@@ -21,5 +21,9 @@
         "900"
       ]
     }
+  },
+  "default": {
+    "fontSize": 14,
+    "fontWeight": "600"
   }
 }

package/src/build-components/OnboardTitle/getDefaults.ts

@@ -0,0 +1,13 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { OnboardTitlePropsGenerated } from './OnboardTitleProps.generated';
+
+export type OnboardTitleDefaults = Partial<
+  OnboardTitlePropsGenerated['attributes']
+>;
+
+export function getDefaults(): OnboardTitleDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as OnboardTitleDefaults;
+}

package/src/build-components/OnboardTitle/pattern.json

@@ -21,5 +21,9 @@
         "900"
       ]
     }
+  },
+  "default": {
+    "fontSize": 24,
+    "fontWeight": "700"
   }
 }

package/src/build-components/Text/getDefaults.ts

@@ -0,0 +1,11 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { TextPropsGenerated } from './TextProps.generated';
+
+export type TextDefaults = Partial<TextPropsGenerated['attributes']>;
+
+export function getDefaults(): TextDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as TextDefaults;
+}

package/src/build-components/View/getDefaults.ts

@@ -0,0 +1,11 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import pattern from './pattern.json';
+import type { ViewPropsGenerated } from './ViewProps.generated';
+
+export type ViewDefaults = Partial<ViewPropsGenerated['attributes']>;
+
+export function getDefaults(): ViewDefaults {
+  return ((pattern as unknown as { default?: unknown })?.default ??
+    {}) as ViewDefaults;
+}

package/src/build-components/getDefaults.ts

@@ -0,0 +1,149 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import { getDefaults as getButtonDefaults } from './Button/getDefaults';
+import { getDefaults as getCarouselDefaults } from './Carousel/getDefaults';
+import { getDefaults as getCarouselButtonsDefaults } from './CarouselButtons/getDefaults';
+import { getDefaults as getCarouselDotsDefaults } from './CarouselDots/getDefaults';
+import { getDefaults as getCarouselItemDefaults } from './CarouselItem/getDefaults';
+import { getDefaults as getCarouselProviderDefaults } from './CarouselProvider/getDefaults';
+import { getDefaults as getImageDefaults } from './Image/getDefaults';
+import { getDefaults as getOnboardDefaults } from './Onboard/getDefaults';
+import { getDefaults as getOnboardButtonDefaults } from './OnboardButton/getDefaults';
+import { getDefaults as getOnboardButtonsDefaults } from './OnboardButtons/getDefaults';
+import { getDefaults as getOnboardDotDefaults } from './OnboardDot/getDefaults';
+import { getDefaults as getOnboardFooterDefaults } from './OnboardFooter/getDefaults';
+import { getDefaults as getOnboardImageDefaults } from './OnboardImage/getDefaults';
+import { getDefaults as getOnboardItemDefaults } from './OnboardItem/getDefaults';
+import { getDefaults as getOnboardProviderDefaults } from './OnboardProvider/getDefaults';
+import { getDefaults as getOnboardSubtitleDefaults } from './OnboardSubtitle/getDefaults';
+import { getDefaults as getOnboardTitleDefaults } from './OnboardTitle/getDefaults';
+import { getDefaults as getTextDefaults } from './Text/getDefaults';
+import { getDefaults as getViewDefaults } from './View/getDefaults';
+import type {
+  ButtonPropsGenerated,
+  CarouselPropsGenerated,
+  CarouselButtonsPropsGenerated,
+  CarouselDotsPropsGenerated,
+  CarouselItemPropsGenerated,
+  CarouselProviderPropsGenerated,
+  ImagePropsGenerated,
+  OnboardPropsGenerated,
+  OnboardButtonPropsGenerated,
+  OnboardButtonsPropsGenerated,
+  OnboardDotPropsGenerated,
+  OnboardFooterPropsGenerated,
+  OnboardImagePropsGenerated,
+  OnboardItemPropsGenerated,
+  OnboardProviderPropsGenerated,
+  OnboardSubtitlePropsGenerated,
+  OnboardTitlePropsGenerated,
+  TextPropsGenerated,
+  ViewPropsGenerated,
+} from './index';
+import type { NodeData } from '../types/Node';
+
+export type Types = {
+  button: ButtonPropsGenerated['attributes'];
+  carousel: CarouselPropsGenerated['attributes'];
+  carouselButtons: CarouselButtonsPropsGenerated['attributes'];
+  carouselDots: CarouselDotsPropsGenerated['attributes'];
+  carouselItem: CarouselItemPropsGenerated['attributes'];
+  carouselProvider: CarouselProviderPropsGenerated['attributes'];
+  image: ImagePropsGenerated['attributes'];
+  Onboard: OnboardPropsGenerated['attributes'];
+  OnboardButton: OnboardButtonPropsGenerated['attributes'];
+  OnboardButtons: OnboardButtonsPropsGenerated['attributes'];
+  OnboardDot: OnboardDotPropsGenerated['attributes'];
+  OnboardFooter: OnboardFooterPropsGenerated['attributes'];
+  OnboardImage: OnboardImagePropsGenerated['attributes'];
+  OnboardItem: OnboardItemPropsGenerated['attributes'];
+  OnboardProvider: OnboardProviderPropsGenerated['attributes'];
+  OnboardSubtitle: OnboardSubtitlePropsGenerated['attributes'];
+  OnboardTitle: OnboardTitlePropsGenerated['attributes'];
+  text: TextPropsGenerated['attributes'];
+  view: ViewPropsGenerated['attributes'];
+};
+
+export type List<T> = T extends keyof Types ? Types[T] : never;
+
+export function getDefaults<T extends keyof Types>(
+  type: T,
+  node: NodeData<List<T>>,
+): Partial<Types[T]> {
+  let defaults: Partial<Types[T]> = {};
+
+  switch (type as unknown as string) {
+    case 'button':
+      defaults = getButtonDefaults() as Partial<Types[T]>;
+      break;
+    case 'carousel':
+      defaults = getCarouselDefaults() as Partial<Types[T]>;
+      break;
+    case 'carouselButtons':
+      defaults = getCarouselButtonsDefaults() as Partial<Types[T]>;
+      break;
+    case 'carouselDots':
+      defaults = getCarouselDotsDefaults() as Partial<Types[T]>;
+      break;
+    case 'carouselItem':
+      defaults = getCarouselItemDefaults() as Partial<Types[T]>;
+      break;
+    case 'carouselProvider':
+      defaults = getCarouselProviderDefaults() as Partial<Types[T]>;
+      break;
+    case 'image':
+      defaults = getImageDefaults() as Partial<Types[T]>;
+      break;
+    case 'Onboard':
+      defaults = getOnboardDefaults() as Partial<Types[T]>;
+      break;
+    case 'OnboardButton':
+      defaults = getOnboardButtonDefaults() as Partial<Types[T]>;
+      break;
+    case 'OnboardButtons':
+      defaults = getOnboardButtonsDefaults() as Partial<Types[T]>;
+      break;
+    case 'OnboardDot':
+      defaults = getOnboardDotDefaults() as Partial<Types[T]>;
+      break;
+    case 'OnboardFooter':
+      defaults = getOnboardFooterDefaults() as Partial<Types[T]>;
+      break;
+    case 'OnboardImage':
+      defaults = getOnboardImageDefaults() as Partial<Types[T]>;
+      break;
+    case 'OnboardItem':
+      defaults = getOnboardItemDefaults() as Partial<Types[T]>;
+      break;
+    case 'OnboardProvider':
+      defaults = getOnboardProviderDefaults() as Partial<Types[T]>;
+      break;
+    case 'OnboardSubtitle':
+      defaults = getOnboardSubtitleDefaults() as Partial<Types[T]>;
+      break;
+    case 'OnboardTitle':
+      defaults = getOnboardTitleDefaults() as Partial<Types[T]>;
+      break;
+    case 'text':
+      defaults = getTextDefaults() as Partial<Types[T]>;
+      break;
+    case 'view':
+      defaults = getViewDefaults() as Partial<Types[T]>;
+      break;
+    default:
+      defaults = {} as Partial<Types[T]>;
+  }
+
+  if (
+    (node as unknown as { type?: string })?.type !== (type as unknown as string)
+  ) {
+    throw new Error(
+      `getDefaults: node.type mismatch; expected ${String(type)}, received ${(node as unknown as { type?: string })?.type ?? 'undefined'}`,
+    );
+  }
+
+  (node as unknown as { attributes?: unknown }).attributes =
+    defaults as Types[T];
+
+  return defaults;
+}

package/src/build-components/index.ts

@@ -2,6 +2,8 @@
 
 export { default as RenderNode } from './RenderNode.generated';
 
+export { getDefaults } from './getDefaults';
+
 export type {
   ButtonPropsGenerated,
   ButtonComponentProps,

package/src/types/Device.ts

@@ -6,7 +6,7 @@ export interface Device {
   type: 'phone' | 'tablet';
   /**
    * Relative importance for generic targeting and display ordering.
-   * 1 = highest importance, 5 = lowest importance
+   * 1 = highest importance, 100 = lowest importance
    */
-  importance?: 1 | 2 | 3 | 4 | 5;
+  importance?: number;
 }

package/src/utils/getDevices.ts

@@ -2,5 +2,11 @@ import { Device } from '../types/Device';
 import devices from '../assets/devices.json';
 
 export function getDevices(): Device[] {
-  return devices as Device[];
+  const deviceList = (devices as Device[]).slice();
+  deviceList.sort((a, b) => {
+    const ai = a.importance ?? 999;
+    const bi = b.importance ?? 999;
+    return ai - bi;
+  });
+  return deviceList;
 }