Merge pull request #86 from dtran421/fix_storybook

Fix chromatic
dtran421 · Feb 23, 2024 · 1f0b7e8 · 1f0b7e8
2 parents d09d36e + 4bc2e42
commit 1f0b7e8
Show file tree

Hide file tree

Showing 17 changed files with 121 additions and 124 deletions.
diff --git a/.github/workflows/preview.yaml b/.github/workflows/preview.yaml
@@ -69,10 +69,10 @@ jobs:
           max-annotations: 10
           fail-on-error: true
 
-      #- name: Publish to Chromatic
-      #  uses: chromaui/action@v1
-      #  with:
-      #    projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
 
   preview:
     runs-on: ubuntu-latest

diff --git a/package.json b/package.json
@@ -78,7 +78,7 @@
     "@typescript-eslint/parser": "^5.23.0",
     "@vitest/coverage-v8": "^0.34.1",
     "autoprefixer": "^10.4.2",
-    "chromatic": "^6.20.0",
+    "chromatic": "^11.0.0",
     "cypress": "^12.17.4",
     "dotenv": "^16.3.1",
     "eslint": "^8.15.0",

diff --git a/src/app/api/alphavantage/[fn]/[ticker]/route.ts b/src/app/api/alphavantage/[fn]/[ticker]/route.ts
@@ -5,7 +5,7 @@ import { Option } from "utils-toolkit";
 import { logger } from "@/utils/ServerUtil";
 import { AlphavantageFn } from "@/utils/types";
 
-type CompanyQR = {
+interface CompanyQR {
   Name: string;
   Exchange: string;
   Sector: string;
@@ -15,16 +15,16 @@ type CompanyQR = {
   EPS: string;
   "52WeekHigh": string;
   "52WeekLow": string;
-};
+}
 
-type QuoteQR = {
+interface QuoteQR {
   "Global Quote": {
     "05. price": string;
     "07. latest trading day": string;
     "09. change": string;
     "10. change percent": string;
   };
-};
+}
 
 /**
  * Get base Alphavantage url

diff --git a/src/app/blog/[slug]/blog-post-page.tsx b/src/app/blog/[slug]/blog-post-page.tsx
@@ -13,14 +13,14 @@ import Body from "@/components/BlogPost/Body";
 import FetchError from "@/components/Global/FetchError";
 import { BlogPost } from "@/utils/types";
 
-type ProfileHeaderProps = {
+interface ProfileHeaderProps {
   publishDate: string;
   inspectorProps: ReturnType<
     typeof useContentfulInspectorMode<{
       entryId: string;
     }>
   >;
-};
+}
 
 const ProfileHeader = ({ publishDate, inspectorProps }: ProfileHeaderProps) => (
   <div className="flex flex-col md:flex-row justify-between items-start md:items-center text-slate-700 dark:text-slate-300 space-y-2 md:space-y-0">
@@ -49,9 +49,9 @@ const ProfileHeader = ({ publishDate, inspectorProps }: ProfileHeaderProps) => (
   </div>
 );
 
-type BlogPostProps = {
+interface BlogPostProps {
   blogPost: BlogPost;
-};
+}
 
 const BlogPostPage = ({ blogPost }: BlogPostProps) => {
   const inspectorProps = useContentfulInspectorMode({ entryId: blogPost.sys.id });
@@ -110,7 +110,7 @@ const BlogPostPage = ({ blogPost }: BlogPostProps) => {
             ))}
           </div>
         </div>
-        <Body document={body.json} links={body?.links} />
+        <Body document={body?.json} links={body?.links} />
       </div>
     </main>
   );

diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
@@ -11,9 +11,9 @@ import { logger } from "@/utils/ServerUtil";
 import BlogPostPage from "./blog-post-page";
 import { getBlogPost } from "./query";
 
-type Props = {
+interface Props {
   params: { slug: string };
-};
+}
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   // read route params

diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
@@ -8,9 +8,9 @@ import { queryContentful } from "@/utils/Contentful";
 import { logger } from "@/utils/ServerUtil";
 import { BlogPost } from "@/utils/types";
 
-type BlogQR = {
+interface BlogQR {
   blogPosts: BlogPost[];
-};
+}
 
 export const revalidate = 3600; // revalidate the data at most every hour
 

diff --git a/src/app/main-layout.tsx b/src/app/main-layout.tsx
@@ -13,12 +13,12 @@ import { ThemeContext } from "@/contexts/theme-context";
 
 const queryClient = new QueryClient();
 
-type MainLayoutProps = {
+interface Props {
   debug: boolean;
   children: ReactNode;
-};
+}
 
-const MainLayout = ({ debug, children }: MainLayoutProps) => {
+const MainLayout = ({ debug, children }: Props) => {
   const { darkMode } = useContext(ThemeContext);
 
   return (

diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
@@ -25,10 +25,10 @@ export const metadata: Metadata = {
   openGraph,
 };
 
-type PortfolioQR = {
+interface PortfolioQR {
   timelineEvents: TimelineEvent[];
   languageGroups: LanguageGroup[];
-};
+}
 
 export const revalidate = 3600; // revalidate the data at most every hour
 

diff --git a/src/app/projects/(project-pages)/(app-demo)/app-demo-layout.tsx b/src/app/projects/(project-pages)/(app-demo)/app-demo-layout.tsx
@@ -54,11 +54,11 @@ const SplashScreen = (segment: string) => {
   }
 };
 
-type AppDemoLayoutProps = {
+interface Props {
   children: ReactNode;
-};
+}
 
-const AppDemoLayout = ({ children }: AppDemoLayoutProps) => {
+const AppDemoLayout = ({ children }: Props) => {
   const segment = useSelectedLayoutSegment() as string;
 
   const paragraphs = getParagraphs(segment);

diff --git a/src/app/projects/(project-pages)/(finance)/finance-layout.tsx b/src/app/projects/(project-pages)/(finance)/finance-layout.tsx
@@ -71,11 +71,11 @@ const getClassProfileData = (segment: string | null) => {
   }
 };
 
-type FinanceLayoutProps = {
+interface Props {
   children: ReactNode;
-};
+}
 
-const FinanceLayout = ({ children }: FinanceLayoutProps) => {
+const FinanceLayout = ({ children }: Props) => {
   const segment = useSelectedLayoutSegment();
 
   const { symbol, purchasePrice } = getStockData(segment);

diff --git a/src/app/projects/(project-pages)/(repo)/repo-layout.tsx b/src/app/projects/(project-pages)/(repo)/repo-layout.tsx
@@ -43,11 +43,11 @@ const getRepoData = (segment: string | null) => {
   }
 };
 
-type RepoPageProps = {
+interface Props {
   children: ReactNode;
-};
+}
 
-const RepoLayout = ({ children }: RepoPageProps) => {
+const RepoLayout = ({ children }: Props) => {
   const segment = useSelectedLayoutSegment();
   const { accentColor } = useProjectData(segment) || { accentColor: "#fff" };
 

diff --git a/src/app/projects/(project-pages)/projects-layout.tsx b/src/app/projects/(project-pages)/projects-layout.tsx
@@ -7,11 +7,11 @@ import ProjectsBackButton from "@/components/Projects/ProjectsBackButton";
 import ProjectsBanner from "@/components/Projects/ProjectsBanner";
 import { useProjectData } from "@/hooks/useProjectData";
 
-type ProjectLayoutProps = {
+interface Props {
   children: ReactNode;
-};
+}
 
-const ProjectLayout = ({ children }: ProjectLayoutProps) => {
+const ProjectLayout = ({ children }: Props) => {
   const segment = useSelectedLayoutSegments().at(-1);
   const projectData = useProjectData(segment);
 

diff --git a/src/components/Blog/BlogPostCard.tsx b/src/components/Blog/BlogPostCard.tsx
@@ -9,9 +9,9 @@ import { cn } from "utils-toolkit";
 import useEstimateReadingTime from "@/hooks/useEstimateReadingTime";
 import { BlogPost } from "@/utils/types";
 
-type TagsProps = {
+interface TagsProps {
   tags: string[];
-};
+}
 
 const Tags = ({ tags }: TagsProps) => (
   <div className="flex flex-wrap gap-2">

diff --git a/src/components/BlogPost/Body.tsx b/src/components/BlogPost/Body.tsx
@@ -4,12 +4,12 @@ import { Document } from "@contentful/rich-text-types";
 import useRichTextRenderOptions from "@/hooks/useRichTextRenderOptions";
 import { Links } from "@/utils/types";
 
-type BodyProps = {
-  document: Document | undefined;
-  links: Links | undefined;
-};
+interface Props {
+  document?: Document;
+  links?: Links;
+}
 
-const Body = ({ document, links }: BodyProps) => {
+const Body = ({ document, links }: Props) => {
   const { renderOptions } = useRichTextRenderOptions(links);
 
   if (!document) {

diff --git a/src/components/Global/Emoji.tsx b/src/components/Global/Emoji.tsx
@@ -1,10 +1,10 @@
-type EmojiProps = {
+interface Props {
   label: string;
   symbol: string;
   className?: string;
-};
+}
 
-const Emoji = ({ label, symbol, className }: EmojiProps) => (
+const Emoji = ({ label, symbol, className }: Props) => (
   <span className={className || ""} role="img" aria-label={label || ""} aria-hidden={label ? "false" : "true"}>
     {symbol}
   </span>

diff --git a/src/components/Portfolio/LearnMore.stories.tsx b/src/components/Portfolio/LearnMore.stories.tsx
@@ -10,5 +10,17 @@ export default meta;
 type Story = StoryObj<typeof LearnMore>;
 
 export const Primary: Story = {
-  render: () => <LearnMore />,
+  render: () => (
+    <div className="h-screen flex flex-col justify-end pb-10">
+      <LearnMore />
+    </div>
+  ),
+};
+
+export const Hidden: Story = {
+  render: () => (
+    <div className="h-screen flex flex-col justify-center pb-10">
+      <LearnMore />
+    </div>
+  ),
 };