Add Stack Overflow link components and tests

Co-authored-by: dwjohnston <[email protected]>

Author: Copilot

src/library/GithubPermalink/github-permalink.css

@@ -400,3 +400,94 @@ svg.github-logo{
         margin: 0 2px;
     }
 }
+
+/* Stack Overflow link styles */
+.react-stackoverflow-link {
+    border: 1px solid var(--rgp-color-border);
+    border-radius: 8px;
+    background-color: var(--rgp-color-bg-stark);
+    color: var(--rgp-color-text-stark);
+    font-size: 14px;
+    font-family: "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+}
+
+.react-stackoverflow-link a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.react-stackoverflow-link .header {
+    background-color: var(--rgp-color-bg-frame);
+    padding: 8px;
+}
+
+.react-stackoverflow-link-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.react-stackoverflow-link-header p {
+    margin: 0;
+    font-weight: 600;
+    color: var(--rgp-color-text-frame);
+}
+
+.react-stackoverflow-link-body {
+    padding: 8px;
+}
+
+.react-stackoverflow-link-title {
+    font-weight: 600;
+    color: var(--rgp-color-text-stark);
+    display: block;
+    margin-bottom: 8px;
+}
+
+.react-stackoverflow-link-stats {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 8px;
+    font-size: 12px;
+}
+
+.react-stackoverflow-link-stats .stat-label {
+    color: var(--rgp-color-text-frame);
+}
+
+.react-stackoverflow-link-stats .stat-value {
+    font-weight: 600;
+    color: var(--rgp-color-text-stark);
+}
+
+.react-stackoverflow-link-stats .answered-indicator {
+    color: #2f7d32;
+    font-weight: bold;
+}
+
+.react-stackoverflow-link-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+
+.react-stackoverflow-link-tags .tag {
+    background-color: #e8f4fd;
+    color: #39739d;
+    font-size: 11px;
+    padding: 2px 6px;
+    border-radius: 3px;
+    border: 1px solid #e8f4fd;
+}
+
+@media (prefers-color-scheme: dark) {
+    .react-stackoverflow-link-tags .tag {
+        background-color: #2d4a5a;
+        color: #9cc3d5;
+        border-color: #2d4a5a;
+    }
+}
+
+.react-stackoverflow-link-inline {
+    color: var(--rgp-color-reaction-foreground);
+}

src/library/StackOverflowLink/StackOverflowLink.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import {  useContext, useEffect, useState } from "react";
+
+import {  GithubPermalinkContext, StackOverflowLinkDataResponse } from "../config/GithubPermalinkContext";
+import { StackOverflowLinkBase, StackOverflowLinkBaseProps } from "./StackOverflowLinkBase";
+
+type StackOverflowLinkProps = Omit<StackOverflowLinkBaseProps, "data">;
+
+export function StackOverflowLink(props: StackOverflowLinkProps) {
+
+  const { questionLink } = props;
+  const [data, setData] = useState(null as null | StackOverflowLinkDataResponse)
+  const { getStackOverflowFn, onError} = useContext(GithubPermalinkContext);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    getStackOverflowFn(questionLink, onError).then((v) => {
+      setIsLoading(false);
+      setData(v);
+    })
+  }, [getStackOverflowFn, questionLink, onError])
+
+  if (isLoading) {
+    return null;
+  }
+  if (!data) {
+    throw new Error("Loading is complete, but no data was returned.")
+  }
+
+  return <StackOverflowLinkBase {...props} data={data}/>
+
+}

src/library/StackOverflowLink/StackOverflowLinkBase.stories.tsx

@@ -0,0 +1,77 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { StackOverflowLinkBase } from './StackOverflowLinkBase';
+
+const meta: Meta<typeof StackOverflowLinkBase> = {
+  title: 'Example/StackOverflowLinkBase',
+  component: StackOverflowLinkBase,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['block', 'inline'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockSuccessData = {
+  questionTitle: 'How to create a React component?',
+  questionId: '123456',
+  isAnswered: true,
+  answerCount: 12,
+  score: 45,
+  viewCount: 1250,
+  tags: ['reactjs', 'javascript', 'components'],
+  creationDate: 1640995200,
+  status: 'ok' as const,
+};
+
+const mockErrorData = {
+  status: '404' as const,
+};
+
+export const Default: Story = {
+  args: {
+    questionLink: 'https://stackoverflow.com/questions/123456/how-to-create-react-component',
+    data: mockSuccessData,
+    variant: 'block',
+  },
+};
+
+export const Inline: Story = {
+  args: {
+    questionLink: 'https://stackoverflow.com/questions/123456/how-to-create-react-component',
+    data: mockSuccessData,
+    variant: 'inline',
+  },
+};
+
+export const NotFound: Story = {
+  args: {
+    questionLink: 'https://stackoverflow.com/questions/999999/non-existent-question',
+    data: mockErrorData,
+    variant: 'block',
+  },
+};
+
+export const Unanswered: Story = {
+  args: {
+    questionLink: 'https://stackoverflow.com/questions/789012/unanswered-question',
+    data: {
+      ...mockSuccessData,
+      questionTitle: 'How to solve this complex problem?',
+      questionId: '789012',
+      isAnswered: false,
+      answerCount: 0,
+      score: 2,
+      viewCount: 34,
+      tags: ['algorithm', 'optimization'],
+    },
+    variant: 'block',
+  },
+};

src/library/StackOverflowLink/StackOverflowLinkBase.tsx

@@ -0,0 +1,91 @@
+import { PropsWithChildren } from "react";
+import { StackOverflowSvg } from "../StackOverflowSvg/StackOverflowSvg";
+import { StackOverflowLinkDataResponse } from "../config/GithubPermalinkContext";
+import { ErrorMessages } from "../ErrorMessages/ErrorMessages";
+import { Inline } from "../common/Inline/Inline";
+
+
+export type StackOverflowLinkBaseProps = {
+  className?: string;
+  questionLink: string;
+  data: StackOverflowLinkDataResponse;
+  variant?: "inline" | "block"
+}
+
+
+
+export function StackOverflowLinkBase(props: StackOverflowLinkBaseProps) {
+  const { data, variant ="block", questionLink} = props;
+
+    if (variant === "inline"){
+      if(data.status === "ok"){
+        return <Inline href={questionLink} text={`stackoverflow.com/q/${data.questionId}: ${data.questionTitle}`}/>
+      }
+      else {
+        return <Inline href={questionLink} text={questionLink}/>
+      }
+    }
+
+    if (data.status === "ok") {
+        return <StackOverflowLinkInner {...props} header={<>
+          <div className="react-stackoverflow-link-header">
+            <StackOverflowSvg />
+            <p>
+              Stack Overflow
+            </p>
+          </div>
+    
+          <div className="react-stackoverflow-link-body">
+            <p><span className="react-stackoverflow-link-title">{data.questionTitle}</span></p>
+    
+            <div className="react-stackoverflow-link-stats">
+              <div className="react-stackoverflow-link-score">
+                <span className="stat-label">Score:</span> <span className="stat-value">{data.score}</span>
+              </div>
+              <div className="react-stackoverflow-link-answers">
+                <span className="stat-label">Answers:</span> <span className="stat-value">{data.answerCount}</span>
+                {data.isAnswered && <span className="answered-indicator"> ✓</span>}
+              </div>
+              <div className="react-stackoverflow-link-views">
+                <span className="stat-label">Views:</span> <span className="stat-value">{data.viewCount.toLocaleString()}</span>
+              </div>
+            </div>
+
+            {data.tags && data.tags.length > 0 && (
+              <div className="react-stackoverflow-link-tags">
+                {data.tags.map(tag => (
+                  <span key={tag} className="tag">{tag}</span>
+                ))}
+              </div>
+            )}
+          </div>
+        </>}>
+        </StackOverflowLinkInner>
+    
+      }
+    
+      return <StackOverflowLinkInner {...props}>
+        <ErrorMessages data={data} />
+      </StackOverflowLinkInner>
+
+}
+
+
+function StackOverflowLinkInner(props: PropsWithChildren<{
+  header?: React.ReactNode
+} & {
+  questionLink: string;
+  className?: string;
+}>) {
+
+  const {questionLink, className =''} = props;
+
+  return <div className={`rgp-base react-stackoverflow-link ${className}`}>
+    <a href={questionLink}>
+      <div className="header">
+        {props.header ?? <a href={questionLink} className="file-link">{questionLink}</a>}
+      </div>
+      {props.children}
+    </a>
+  </div>
+}

src/library/StackOverflowLink/StackOverflowLinkRsc.tsx

@@ -0,0 +1,12 @@
+import { githubPermalinkRscConfig } from "../config/GithubPermalinkRscConfig"
+import { StackOverflowLinkBase, StackOverflowLinkBaseProps } from "./StackOverflowLinkBase";
+
+export type StackOverflowLinkRscProps = Omit<StackOverflowLinkBaseProps, "data">;
+
+export async function StackOverflowLinkRsc(props: StackOverflowLinkRscProps) {
+    const dataFn = githubPermalinkRscConfig.getStackOverflowFn();
+    const onError = githubPermalinkRscConfig.getOnError();
+
+    const data = await dataFn(props.questionLink, onError);
+    return <StackOverflowLinkBase {...props} data={data}/>
+}

src/library/StackOverflowSvg/StackOverflowSvg.tsx

@@ -0,0 +1,10 @@
+export function StackOverflowSvg(props: {
+    size?: number
+}) {
+
+    const size = props.size ?? 16; 
+
+    return <svg className="stackoverflow-logo" height={`${size}`} width={`${size}`} aria-hidden="true" viewBox="0 0 24 24" version="1.1">
+        <path fill="#f48024" d="M18.986 21.865v-6.404h2.134V24H1.844v-8.539h2.13v6.404h15.012zM6.111 19.731H16.85v-2.137H6.111v2.137zm.259-4.852l10.48 2.189.451-2.07-10.478-2.187-.453 2.068zm1.359-5.056l9.705 4.53.903-1.95-9.706-4.53-.902 1.95zm2.715-4.785l8.217 6.855 1.359-1.62-8.216-6.853-1.36 1.618zM15.539 0l-1.7 1.265 6.381 8.588 1.7-1.265L15.539 0zM6.369 17.594h10.739v-2.137H6.369v2.137z"/>
+    </svg>
+}

src/library/config/BaseConfiguration.ts

@@ -1,5 +1,5 @@
 import { defaultGetPermalinkFn } from "./defaultFunctions";
-import { defaultGetIssueFn } from "./defaultFunctions";
+import { defaultGetIssueFn, defaultGetStackOverflowFn } from "./defaultFunctions";
 
 
 export type BaseConfiguration = {
@@ -11,6 +11,9 @@ export type BaseConfiguration = {
     /** Function to provide issue data payload */
     getIssueFn: typeof defaultGetIssueFn;
 
+    /** Function to provide Stack Overflow question data payload */
+    getStackOverflowFn: typeof defaultGetStackOverflowFn;
+
     /**
      * A github personal access token - will be passed to the data fetching functions
      */

src/library/config/GithubPermalinkContext.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { PropsWithChildren, createContext } from "react";
 import { BaseConfiguration } from "./BaseConfiguration";
-import { defaultGetIssueFn } from "./defaultFunctions";
+import { defaultGetIssueFn, defaultGetStackOverflowFn } from "./defaultFunctions";
 import { defaultGetPermalinkFn } from "./defaultFunctions";
 
 // Thanks ChatGPT
@@ -56,19 +56,33 @@ export type GithubIssueLinkDataResponse = {
     }
 } | ErrorResponses;
 
+export type StackOverflowLinkDataResponse = {
+    questionTitle: string;
+    questionId: string;
+    isAnswered: boolean;
+    answerCount: number;
+    score: number;
+    viewCount: number;
+    tags: string[];
+    creationDate: number;
+    status: "ok"
+} | ErrorResponses;
+
 
 
 
 
 export const GithubPermalinkContext = createContext<BaseConfiguration>({
     getDataFn: defaultGetPermalinkFn,
     getIssueFn: defaultGetIssueFn,
+    getStackOverflowFn: defaultGetStackOverflowFn,
 });
 
 export function GithubPermalinkProvider(props: PropsWithChildren<Partial<BaseConfiguration>>) {
     return <GithubPermalinkContext.Provider value={{
         getDataFn: props.getDataFn ?? defaultGetPermalinkFn,
         getIssueFn: props.getIssueFn ?? defaultGetIssueFn,
+        getStackOverflowFn: props.getStackOverflowFn ?? defaultGetStackOverflowFn,
         githubToken: props.githubToken,
         onError: props.onError,
     }}>