fix: fixes in storycard primitive

Author: nl-rishabh

.changeset/curvy-gifts-shout.md

@@ -0,0 +1,5 @@
+---
+"@newsable/react": patch
+---
+
+fixes in storycard primitive and tsup config

.eslintignore

@@ -1,4 +1,5 @@
 dist
 node_modules
 build
-.env
+.env
+pnpm-lock.yaml

.prettierignore

@@ -1,4 +1,5 @@
 dist
 node_modules
 build
-.env
+.env
+pnpm-lock.yaml

package.json

@@ -73,6 +73,7 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-visually-hidden": "^1.0.3",
+    "class-variance-authority": "^0.7.0",
     "lucide-react": "^0.292.0"
   },
   "devDependencies": {
@@ -103,7 +104,6 @@
     "@typescript-eslint/parser": "^6.9.1",
     "@vitejs/plugin-react": "^4.1.1",
     "autoprefixer": "^10.4.16",
-    "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",

pnpm-lock.yaml

@@ -1,10 +1,13 @@
 import React from "react";
 
+import "@radix-ui/react-accordion";
+
 import { VariantProps, cva } from "class-variance-authority";
 import { Loader2 as Spinner } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
+// ! TO FIX - variants are not getting exported
 export const buttonVariants = cva(
   "pointer-events-auto flex cursor-pointer items-center justify-center gap-2 rounded outline-none transition-all disabled:cursor-not-allowed disabled:opacity-75",
   {

src/components/button/Button.tsx

@@ -44,7 +44,7 @@ const StoryCardImage = React.forwardRef<HTMLImageElement, StoryCardImageProps>(
     const storyData = useStoryCardContext();
 
     return (
-      <Link href={storyData.slug} className="mb-2 w-full">
+      <Link href={`/story/${storyData.id}`} className="mb-2 w-full">
         <AspectRatio ratio={16 / 9}>
           <img
             ref={forwardedRef}
@@ -76,10 +76,10 @@ StoryCardSection.displayName = "StoryCardSection";
 
 const StoryCardTitle = React.forwardRef<React.ElementRef<typeof Heading>, HeadingBaseProps>(
   ({ className, weight = "h3", ...props }, forwardedRef) => {
-    const { headline, slug } = useStoryCardContext();
+    const { headline, id } = useStoryCardContext();
 
     return (
-      <Link href={`https://www.newslaundry.com/${slug}`} className="line-clamp-2">
+      <Link href={`/story/${id}`} className="line-clamp-2">
         <Heading
           ref={forwardedRef}
           weight={weight}
@@ -138,12 +138,7 @@ const Authors = ({ authors }: { authors: StoryCardProps["authors"] }) => {
       <Text className="line-clamp-1 w-full text-sm font-medium">
         {authors.map(author => {
           return (
-            <Link
-              key={author.id}
-              href={`https://www.newslaundry.com/${author.slug}`}
-              title={author.name}
-              className="inline-block"
-            >
+            <Link key={author.id} href={`/author/${author.id}`} title={author.name} className="inline-block">
               {author.name}
             </Link>
           );
@@ -155,19 +150,11 @@ const Authors = ({ authors }: { authors: StoryCardProps["authors"] }) => {
   if (authors.length === 2) {
     return (
       <Text className="line-clamp-1 w-full text-sm font-medium">
-        <Link
-          href={`https://www.newslaundry.com/${authors[0].slug}`}
-          title={authors[0].name}
-          className="inline-block"
-        >
+        <Link href={`/author/${authors[0].id}`} title={authors[0].name} className="inline-block">
           {authors[0].name}
         </Link>
         <span className="mx-1">&</span>
-        <Link
-          href={`https://www.newslaundry.com/${authors[1].slug}`}
-          title={authors[1].name}
-          className="inline-block"
-        >
+        <Link href={`/author/${authors[1].id}`} title={authors[1].name} className="inline-block">
           {authors[1].name}
         </Link>
       </Text>
@@ -179,11 +166,7 @@ const Authors = ({ authors }: { authors: StoryCardProps["authors"] }) => {
       {authors.slice(0, authors.length - 1).map((author, i) => {
         return (
           <React.Fragment key={author.id}>
-            <Link
-              href={`https://www.newslaundry.com/${author.slug}`}
-              title={author.name}
-              className="inline-block"
-            >
+            <Link href={`/author/${author.id}`} title={author.name} className="inline-block">
               {author.name}
             </Link>
             {i !== authors.length - 2 ? <span className="mr-1">,</span> : null}
@@ -192,7 +175,7 @@ const Authors = ({ authors }: { authors: StoryCardProps["authors"] }) => {
       })}
       <span className="mx-1">&</span>
       <Link
-        href={`https://www.newslaundry.com/${authors[authors.length - 1].slug}`}
+        href={`/author/${authors[authors.length - 1].id}`}
         title={authors[authors.length - 1].name}
         className="inline-block"
       >

src/components/story-card/StoryCard.tsx

@@ -8,6 +8,6 @@ export default defineConfig({
   target: "esnext",
   external: ["react"],
   clean: true,
-  splitting: true,
-  minify: true
+  splitting: true
+  // minify: true
 });