docs: `transcription_text_component` doc and story

lib/medical_transcription_web/components/transcription_text_component.ex

@@ -2,7 +2,7 @@ defmodule MedicalTranscriptionWeb.Components.TranscriptionTextComponent do
   @moduledoc """
   Represents a portion of transcribed text.
 
-  Once rendered, starts tasks to find relevant codes and keywords for the text.
+  Once the initial text is rendered, thie component starts async tasks to find relevant codes and keywords for the text.
   """
   alias MedicalTranscriptionWeb.Components.CodeSelect
   use MedicalTranscriptionWeb, :live_component

storybook/components/transcription_text_component.story.exs

@@ -0,0 +1,54 @@
+defmodule MedicalTranscriptionWeb.Storybook.TranscriptionTextComponent do
+  use PhoenixStorybook.Story, :live_component
+  alias MedicalTranscription.Coding.CodeVectorMatch
+
+  def component, do: MedicalTranscriptionWeb.Components.TranscriptionTextComponent
+
+  def variations do
+    # Instead of allowing the TranscriptionTextComponent to run the model and generate results, we may want to pass a
+    # list of tags into the component:
+    # tags = [
+    #   %CodeVectorMatch{
+    #     id: 1,
+    #     code: "74685",
+    #     description: "Coronary artery anomaly",
+    #     cosine_similarity: 1.07,
+    #     weighting: [:positive, :positive]
+    #   },
+    #   %CodeVectorMatch{
+    #     id: 1,
+    #     code: "41412",
+    #     description: "Dissection of coronary artery",
+    #     cosine_similarity: 0.87,
+    #     weighting: [:positive, :negative]
+    #   },
+    #   %CodeVectorMatch{
+    #     id: 1,
+    #     code: "V717",
+    #     description: "Observation for suspected cardiovascular disease",
+    #     cosine_similarity: 0.84,
+    #     weighting: [:none]
+    #   },
+    #   %CodeVectorMatch{
+    #     id: 1,
+    #     code: "V812",
+    #     description: "Screening for other and unspecified cardiovascular conditions",
+    #     cosine_similarity: 0.84,
+    #     weighting: [:none]
+    #   }
+    # ]
+
+    [
+      %Variation{
+        id: :default,
+        attributes: %{
+          id: 1,
+          start_mark: "00:00:00",
+          end_mark: "00:00:07",
+          text:
+            "This 55-year-old man with known coronary artery disease comes for a follow-up visit today. "
+        }
+      }
+    ]
+  end
+end