feat: add storybook and remove id

opentrons-ai-client/src/molecules/PromptPreview/PromptPreview.stories.tsx

@@ -0,0 +1,65 @@
+import { I18nextProvider } from 'react-i18next'
+import { COLORS, Flex, SPACING } from '@opentrons/components'
+import { i18n } from '../../i18n'
+import type { Meta, StoryObj } from '@storybook/react'
+import { PromptPreview } from '.'
+
+const meta: Meta<typeof PromptPreview> = {
+  title: 'AI/molecules/PromptPreview',
+  component: PromptPreview,
+  decorators: [
+    Story => (
+      <I18nextProvider i18n={i18n}>
+        <Flex backgroundColor={COLORS.grey10} padding={SPACING.spacing40}>
+          <Story />
+        </Flex>
+      </I18nextProvider>
+    ),
+  ],
+}
+export default meta
+type Story = StoryObj<typeof PromptPreview>
+
+export const PromptPreviewExample: Story = {
+  args: {
+    isSubmitButtonEnabled: false,
+    promptPreviewData: [
+      {
+        title: 'Application',
+        items: [
+          'Cherrypicking',
+          'I have a Chlorine Reagent Set (Total), Ultra Low Range...',
+        ],
+      },
+      {
+        title: 'Instruments',
+        items: [
+          'Opentrons Flex',
+          'Flex 1-Channel 50 uL',
+          'Flex 8-Channel 1000 uL',
+        ],
+      },
+      {
+        title: 'Modules',
+        items: [
+          'Thermocycler GEN2',
+          'Heater-Shaker with Universal Flat Adaptor',
+        ],
+      },
+      {
+        title: 'Labware and Liquids',
+        items: [
+          'Opentrons 96 Well Plate',
+          'Thermocycler GEN2',
+          'Opentrons 96 Deep Well Plate',
+          'Liquid 1: These are my samples, the...',
+          'Liquid 2: This is the reagent in my ...',
+        ],
+      },
+      {
+        title: 'Steps',
+        items: ['Fill the first column of a Elisa...'],
+      },
+    ],
+  },
+}

opentrons-ai-client/src/molecules/PromptPreview/index.tsx

@@ -6,7 +6,6 @@ const PROMPT_PREVIEW_PLACEHOLDER_MESSAGE =
   'As you complete the sections on the left, your prompt will be built here. When all requirements are met you will be able to generate the protocol.'
 
 interface PromptPreviewProps {
-  id?: string
   isSubmitButtonEnabled?: boolean
   handleSubmit: () => void
   promptPreviewData: PromptPreviewSectionProps[]
@@ -33,7 +32,6 @@ const PromptPreviewPlaceholderMessage = styled(StyledText)`
 `
 
 export function PromptPreview({
-  id,
   isSubmitButtonEnabled = false,
   handleSubmit,
   promptPreviewData,
@@ -43,7 +41,7 @@ export function PromptPreview({
   }
 
   return (
-    <PromptPreviewContainer id={id}>
+    <PromptPreviewContainer>
       <PromptPreviewHeading>
         <StyledText desktopStyle="headingLargeBold">Prompt</StyledText>
         <LargeButton
@@ -52,6 +50,7 @@ export function PromptPreview({
           onClick={handleSubmit}
         />
       </PromptPreviewHeading>
+
       {areAllSectionsEmpty() && (
         <PromptPreviewPlaceholderMessage desktopStyle="headingSmallRegular">
           {PROMPT_PREVIEW_PLACEHOLDER_MESSAGE}