feat: add card-news-coffee (#90)

blocks/card-news-coffee/src/CardNewsCoffee.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import storyDialog from "../../../.storybook/decorators/storyDialog";
+import Usage from "../usage.mdx";
+import CardNewsCoffee from "./CardNewsCoffee";
+
+const meta = {
+  title: "Card/News/Coffee",
+  component: CardNewsCoffee,
+  parameters: {
+    layout: "centered",
+    githubUsername: "wwasuu", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar
+  },
+  decorators: [storyDialog(Usage)],
+} satisfies Meta<typeof CardNewsCoffee>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Coffee: Story = {
+  render: () => (
+    <div 
+      style={{
+        width: 340,
+        padding: 20,
+        maxWidth: "100%",
+        resize: "horizontal",
+        overflow: "auto",
+      }}
+    >
+      <CardNewsCoffee />
+    </div>
+  ),
+};
+
+

blocks/card-news-coffee/src/CardNewsCoffee.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import AspectRatio from "@mui/joy/AspectRatio";
+import Avatar from "@mui/joy/Avatar";
+import Box from "@mui/joy/Box";
+import Card from "@mui/joy/Card";
+import CardContent from "@mui/joy/CardContent";
+import Link from "@mui/joy/Link";
+import Typography from "@mui/joy/Typography";
+
+export default function CardNewsCoffee() {
+  return <Card>
+    <AspectRatio
+      sx={{
+        borderBottomLeftRadius: "var(--Card-radius)",
+        borderBottomRightRadius: "var(--Card-radius)",
+      }}
+    >
+      <img src="https://images.squarespace-cdn.com/content/v1/574ca6dac2ea517f706dfb89/e3978b8b-a830-4510-bc80-7132f933b270/xviiizz-3b_tjW24pDk-unsplash.jpg?format=1500w" />
+    </AspectRatio>
+    <CardContent>
+      <Typography level="h4" component="h2">
+        <Link href="#" overlay underline="none" textColor="inherit">
+          How to make perfect morning coffee, according to the Science
+        </Link>
+      </Typography>
+    </CardContent>
+    <CardContent orientation="horizontal" sx={{ alignItems: "center" }}>
+      <Avatar src="https://i.pravatar.cc/300?img=1" />
+      <Box>
+        <Typography fontWeight="lg">
+          Tara Gibson
+        </Typography>
+        <Typography level="body-sm" textColor="text.tertiary">
+          Jul 13, 2019
+        </Typography>
+      </Box>
+    </CardContent>
+  </Card>
+}

blocks/card-news-coffee/src/index.ts

@@ -0,0 +1 @@
+export { default as CardNewsCoffee } from "./CardNewsCoffee";

blocks/card-news-coffee/usage.mdx

@@ -0,0 +1,14 @@
+import { Meta, Source } from "@storybook/blocks";
+import raw from "./src/CardNewsCoffee?raw";
+
+<Meta title="Card/News/Coffee" />
+
+## CLI
+
+```sh
+npx joy-treasury@latest clone card-news-coffee
+```
+
+## CardNewsCoffee
+
+<Source code={raw} language="tsx" />

yarn.lock

@@ -1350,10 +1350,10 @@
   resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
-"@esbuild/win32-x64@0.18.20":
+"@esbuild/darwin-arm64@0.18.20":
   version "0.18.20"
-  resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz"
-  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
+  resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz"
+  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
 
 "@fal-works/esbuild-plugin-global-externals@^2.1.2":
   version "2.1.2"
@@ -3172,10 +3172,10 @@
     "@types/express" "^4.7.0"
     file-system-cache "2.3.0"
 
-"@swc/core-win32-x64-msvc@1.3.76":
+"@swc/core-darwin-arm64@1.3.76":
   version "1.3.76"
-  resolved "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.76.tgz"
-  integrity sha512-CiMpWLLlR3Cew9067E7XxaLBwYYJ90r9EhGSO6V1pvYSWj7ET/Ppmtj1ZhzPJMqRXAP6xflfl5R5o4ee1m4WLA==
+  resolved "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.76.tgz"
+  integrity sha512-ovviEhZ/1E81Z9OGrO0ivLWk4VCa3I3ZzM+cd3gugglRRwVwtlIaoIYqY5S3KiCAupDd1+UCl5X7Vbio7a/V8g==
 
 "@swc/core@^1", "@swc/core@^1.2.147", "@swc/core@^1.3.49", "@swc/core@>=1.2.50":
   version "1.3.76"
@@ -6313,6 +6313,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@^2.3.2, fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"