Wizard translations redux

.storybook/preview.tsx

@@ -1,17 +1,14 @@
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import type { Preview } from '@storybook/react';
-import React, { lazy, Suspense, useEffect, useState } from 'react';
 import { type AbstractIntlMessages } from 'next-intl';
-import {
-  SUPPORTED_LOCALE_OBJECTS,
-  type Locale,
-} from '~/lib/localisation/config';
+import { Lexend, Roboto_Mono } from 'next/font/google';
+import { lazy, Suspense, useEffect, useState } from 'react';
 import { getLangDir } from 'rtl-detect';
-import { withThemeByDataAttribute } from '@storybook/addon-themes';
-import '~/styles/global.css';
-import '~/styles/themes/default.css';
 import Providers from '~/app/_components/Providers';
-import { Lexend, Roboto_Mono } from 'next/font/google';
 import { cn } from '~/lib/utils';
+import { type Locale, SUPPORTED_LOCALE_OBJECTS } from '~/schemas/protocol/i18n';
+import '~/styles/global.css';
+import '~/styles/themes/default.css';
 
 const LazyInterviewTheme = lazy(() => import('./InterviewTheme'));
 
@@ -127,8 +124,6 @@ const preview: Preview = {
         (context.parameters.forceTheme as string) ??
         (context.globals.visualTheme as string);
 
-      console.log('theme', theme);
-
       return (
         <div
           className={cn(

.vscode/settings.json

@@ -4,5 +4,15 @@
     ".vscode/tailwind.json"
   ],
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "i18n-ally.localesPaths": [
+    "lib/localisation/messages",
+    "app/api/interview/[interviewId]/languages",
+    "app/api/interview/[interviewId]/messages"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit",
+    "source.addMissingImports": "explicit",
+    "source.fixAll": "explicit",
+  },
 }

components/interview/ActionButton.stories.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
 import { type Meta, type StoryFn } from '@storybook/react';
 import ActionButton from '~/components/interview/ActionButton';
 import {
   type NodeColor,
   NodeColors,
   type NodeIcon,
   NodeIcons,
-} from '~/schemas/protocol/codebook/entities';
+} from '~/schemas/protocol/entities';
 
 export default {
   title: 'Interview/ActionButton',

components/interview/ActionButton.tsx

@@ -1,7 +1,7 @@
-import type { NodeColor, NodeIcon } from '~/schemas/protocol/codebook/entities';
 import { PlusIcon } from 'lucide-react';
-import DynamicLucideIcon from '../DynamicLucideIcon';
 import { cn } from '~/lib/utils';
+import type { NodeColor, NodeIcon } from '~/schemas/protocol/entities';
+import DynamicLucideIcon from '../DynamicLucideIcon';
 
 type ActionButtonProps = React.ComponentProps<'button'> & {
   iconName: NodeIcon;

components/interview/NodeList.tsx

@@ -1,21 +1,17 @@
 import Node from '~/components/Node';
-
-export type Node = {
-  id: string;
-  label: string;
-};
+import { type TNode } from '~/schemas/network/network';
 
 export default function NodeList({
   items,
   nodeSize = 'lg',
 }: {
-  items: Node[];
+  items: TNode[];
   nodeSize?: 'sm' | 'lg';
 }) {
   return (
     <div className="flex w-full flex-wrap items-start justify-center gap-2 p-2">
       {items.map((node, index) => (
-        <Node key={index} label={node.label} size={nodeSize} />
+        <Node key={index} label="Node" size={nodeSize} />
       ))}
     </div>
   );

components/interview/Prompts/Prompts.tsx

@@ -1,32 +1,26 @@
 'use client';
 
-import Prompt from './Prompt';
-import Pips from './Pips';
-import type { TPrompts } from '~/schemas/protocol/shared/prompt';
 import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import type { Prompt as PromptType } from '~/schemas/protocol/prompt';
+import Pips from './Pips';
+import Prompt from './Prompt';
 
 export default function Prompts({
   prompts,
-  currentPromptId,
   ...props
 }: {
-  prompts: TPrompts;
-  currentPromptId: string;
+  prompts: PromptType[];
 } & React.HTMLProps<HTMLDivElement>) {
-  const currentIndex = prompts.findIndex(({ id }) => id === currentPromptId);
+  const [currentPromptIndex] = useState(0);
   const t = useTranslations(`Protocol.Prompts`);
 
+  const { id } = prompts[currentPromptIndex]!;
+
   return (
     <div {...props} className="flex flex-col items-center justify-center">
-      <Pips count={prompts.length} currentIndex={currentIndex} />
-      <div className="">
-        {prompts.map(
-          ({ id }) =>
-            prompts[currentIndex]?.id === id && (
-              <Prompt key={id} text={t(`${currentPromptId}`)} />
-            ),
-        )}
-      </div>
+      <Pips count={prompts.length} currentIndex={currentPromptIndex} />
+      <Prompt text={t(`${id}`)} />
     </div>
   );
 }