From bcc9496d37a7db44536927c425be53ed74e8c482 Mon Sep 17 00:00:00 2001 From: Tlezip Date: Sun, 22 Oct 2023 16:24:56 +0700 Subject: [PATCH 1/4] Add card social comment component --- .../src/CardSocialComment.stories.tsx | 36 +++++ .../src/CardSocialComment.tsx | 106 +++++++++++++++ blocks/card-social-comment/src/index.ts | 1 + blocks/card-social-comment/usage.mdx | 14 ++ package.json | 2 + yarn.lock | 123 ++++++++++++++++++ 6 files changed, 282 insertions(+) create mode 100644 blocks/card-social-comment/src/CardSocialComment.stories.tsx create mode 100644 blocks/card-social-comment/src/CardSocialComment.tsx create mode 100644 blocks/card-social-comment/src/index.ts create mode 100644 blocks/card-social-comment/usage.mdx diff --git a/blocks/card-social-comment/src/CardSocialComment.stories.tsx b/blocks/card-social-comment/src/CardSocialComment.stories.tsx new file mode 100644 index 0000000..55e2a54 --- /dev/null +++ b/blocks/card-social-comment/src/CardSocialComment.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 CardSocialComment from "./CardSocialComment"; + +const meta = { + title: "Card/Social/Comment", + component: CardSocialComment, + parameters: { + layout: "centered", + githubUsername: "", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar + }, + decorators: [storyDialog(Usage)], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Comment: Story = { + render: () => ( +
+ +
+ ), +}; + + diff --git a/blocks/card-social-comment/src/CardSocialComment.tsx b/blocks/card-social-comment/src/CardSocialComment.tsx new file mode 100644 index 0000000..d926a35 --- /dev/null +++ b/blocks/card-social-comment/src/CardSocialComment.tsx @@ -0,0 +1,106 @@ +import React from "react"; +import { ArrowForward, TurnRight, StarBorder, MoreHoriz } from "@mui/icons-material" +import { + Card, + CardContent, + Box, + Avatar, + List, + ListItem, + Link, + ButtonGroup, + IconButton, + Typography, + ColorPaletteProp +} from "@mui/joy"; + +export default function CardSocialComment() { + const comments = [ + { + commentor: 'Edward Clark', + commentAt: '14:07', + comments: [ + The biggest change of design in 2019 will be the makeup of the people doing the actual design work., + @Steve please read this. + ], + color: 'success', + }, + { + commentor: 'Albert Ox', + commentAt: '13:37', + comments: [ + We absolutely need to get smarter about privacy. Society is creeped out by big tech and big data. + ], + color: 'warning', + } + ] + + const convertNameToAvatarText = (name: string) => name.split(" ").reduce((acc, word) => `${acc}${word[0] || ''}`, '') + + return ( + + + + { + comments.map(({ commentor, commentAt, comments, color }) => ( + + + {convertNameToAvatarText(commentor)} + + + {commentor} + {commentAt} + + + {comments} + + + + + + + + + + + + + + + + + + + )) + } + + + + ); +} diff --git a/blocks/card-social-comment/src/index.ts b/blocks/card-social-comment/src/index.ts new file mode 100644 index 0000000..d4373a7 --- /dev/null +++ b/blocks/card-social-comment/src/index.ts @@ -0,0 +1 @@ +export { default as CardSocialComment } from "./CardSocialComment"; diff --git a/blocks/card-social-comment/usage.mdx b/blocks/card-social-comment/usage.mdx new file mode 100644 index 0000000..670801d --- /dev/null +++ b/blocks/card-social-comment/usage.mdx @@ -0,0 +1,14 @@ +import { Meta, Source } from "@storybook/blocks"; +import raw from "./src/CardSocialComment?raw"; + + + +## CLI + +```sh +npx joy-treasury@latest clone card-social-comment +``` + +## CardSocialComment + + diff --git a/package.json b/package.json index a6eb798..06d82b4 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,8 @@ "jackspeak": "2.1.1" }, "dependencies": { + "@mui/icons-material": "^5.14.14", + "@mui/material": "^5.14.14", "@types/got": "9.6.11", "@types/rimraf": "3.0.0", "@types/tar": "4.0.4", diff --git a/yarn.lock b/yarn.lock index 937f0b3..35950f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1187,6 +1187,13 @@ dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.8.7": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885" + integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/standalone@^7.4.5": version "7.22.10" resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.22.10.tgz#0a39a85488d61d301751cc074ea77c44aacb9d07" @@ -1941,11 +1948,36 @@ clsx "^2.0.0" prop-types "^15.8.1" +"@mui/base@5.0.0-beta.20": + version "5.0.0-beta.20" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.20.tgz#14fcdfe0350f2aad06ab6c37c4c91dacaab8f600" + integrity sha512-CS2pUuqxST7ch9VNDCklRYDbJ3rru20Tx7na92QvVVKfu3RL4z/QLuVIc8jYGsdCnauMaeUSlFNLAJNb0yXe6w== + dependencies: + "@babel/runtime" "^7.23.1" + "@floating-ui/react-dom" "^2.0.2" + "@mui/types" "^7.2.6" + "@mui/utils" "^5.14.13" + "@popperjs/core" "^2.11.8" + clsx "^2.0.0" + prop-types "^15.8.1" + "@mui/core-downloads-tracker@^5.14.12": version "5.14.12" resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.12.tgz#7be13094ef0c2fc7c3854da2b90a7eae456ebefd" integrity sha512-WZhCkKqhrXaSVBzoC6LNcVkIawS000OOt7gmnp4g9HhyvN0PSclRXc/JrkC7EwfzUAZJh+hiK2LaVsbtOpNuOg== +"@mui/core-downloads-tracker@^5.14.14": + version "5.14.14" + resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.14.tgz#a54894e9b4dc908ab2d59eac543219d9018448e6" + integrity sha512-Rw/xKiTOUgXD8hdKqj60aC6QcGprMipG7ne2giK6Mz7b4PlhL/xog9xLeclY3BxsRLkZQ05egFnIEY1CSibTbw== + +"@mui/icons-material@^5.14.14": + version "5.14.14" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.14.tgz#02d33f51f0b9de238d5c47b0a31ff330144393c4" + integrity sha512-vwuaMsKvI7AWTeYqR8wYbpXijuU8PzMAJWRAq2DDIuOZPxjKyHlr8WQ25+azZYkIXtJ7AqnVb1ZmHdEyB4/kug== + dependencies: + "@babel/runtime" "^7.23.1" + "@mui/joy@5.0.0-beta.9": version "5.0.0-beta.9" resolved "https://registry.yarnpkg.com/@mui/joy/-/joy-5.0.0-beta.9.tgz#66c7038a20d4adfeaec40008ec9a23f8fdd3bf0c" @@ -1960,6 +1992,24 @@ clsx "^2.0.0" prop-types "^15.8.1" +"@mui/material@^5.14.14": + version "5.14.14" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.14.tgz#e47f3992b609002cd57a71f70e829dc2d286028c" + integrity sha512-cAmCwAHFQXxb44kWbVFkhKATN8tACgMsFwrXo8ro6WzYW73U/qsR5AcCiJIhCyYYg+gcftfkmNcpRaV3JjhHCg== + dependencies: + "@babel/runtime" "^7.23.1" + "@mui/base" "5.0.0-beta.20" + "@mui/core-downloads-tracker" "^5.14.14" + "@mui/system" "^5.14.14" + "@mui/types" "^7.2.6" + "@mui/utils" "^5.14.13" + "@types/react-transition-group" "^4.4.7" + clsx "^2.0.0" + csstype "^3.1.2" + prop-types "^15.8.1" + react-is "^18.2.0" + react-transition-group "^4.4.5" + "@mui/private-theming@^5.14.12": version "5.14.12" resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.12.tgz#b07f710b9794c928052ee4c91bf67fc3e0a442ea" @@ -1969,6 +2019,15 @@ "@mui/utils" "^5.14.12" prop-types "^15.8.1" +"@mui/private-theming@^5.14.14": + version "5.14.14" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.14.tgz#035dde1eb30c896c69a12b7dee1dce3a323c66e9" + integrity sha512-n77au3CQj9uu16hak2Y+rvbGSBaJKxziG/gEbOLVGrAuqZ+ycVSkorCfN6Y/4XgYOpG/xvmuiY3JwhAEOzY3iA== + dependencies: + "@babel/runtime" "^7.23.1" + "@mui/utils" "^5.14.13" + prop-types "^15.8.1" + "@mui/styled-engine@^5.14.12": version "5.14.12" resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.12.tgz#bfacc045f14f8f8bef735c76ecfd90bc99427c43" @@ -1979,6 +2038,16 @@ csstype "^3.1.2" prop-types "^15.8.1" +"@mui/styled-engine@^5.14.13": + version "5.14.14" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.14.tgz#b0ededf531fff1ef110f7b263c2d3d95a0b8ec9a" + integrity sha512-sF3DS2PVG+cFWvkVHQQaGFpL1h6gSwOW3L91pdxPLQDHDZ5mZ/X0SlXU5XA+WjypoysG4urdAQC7CH/BRvUiqg== + dependencies: + "@babel/runtime" "^7.23.1" + "@emotion/cache" "^11.11.0" + csstype "^3.1.2" + prop-types "^15.8.1" + "@mui/system@^5.14.12": version "5.14.12" resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.12.tgz#da5b32c2a10bbe58f8b4839c5d5de449dc35e425" @@ -1993,11 +2062,30 @@ csstype "^3.1.2" prop-types "^15.8.1" +"@mui/system@^5.14.14": + version "5.14.14" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.14.tgz#f33327e74230523169107ace960e8bb51cbdbab7" + integrity sha512-y4InFmCgGGWXnz+iK4jRTWVikY0HgYnABjz4wgiUgEa2W1H8M4ow+27BegExUWPkj4TWthQ2qG9FOGSMtI+PKA== + dependencies: + "@babel/runtime" "^7.23.1" + "@mui/private-theming" "^5.14.14" + "@mui/styled-engine" "^5.14.13" + "@mui/types" "^7.2.6" + "@mui/utils" "^5.14.13" + clsx "^2.0.0" + csstype "^3.1.2" + prop-types "^15.8.1" + "@mui/types@^7.2.5": version "7.2.5" resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.5.tgz#cd62a1fc5eb1044137ccab2053b431dd7cfc3cb8" integrity sha512-S2BwfNczr7VwS6ki8GoAXJyARoeSJDLuxOEPs3vEMyTALlf9PrdHv+sluX7kk3iKrCg/ML2mIWwapZvWbkMCQA== +"@mui/types@^7.2.6": + version "7.2.6" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.6.tgz#d72b9e9eb0032e107e76033932d65c3f731d2608" + integrity sha512-7sjLQrUmBwufm/M7jw/quNiPK/oor2+pGUQP2CULRcFCArYTq78oJ3D5esTaL0UMkXKJvDqXn6Ike69yAOBQng== + "@mui/utils@^5.14.12": version "5.14.12" resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.12.tgz#58b570839e22e0fba71e17d37d9c083fe233704d" @@ -2008,6 +2096,16 @@ prop-types "^15.8.1" react-is "^18.2.0" +"@mui/utils@^5.14.13": + version "5.14.14" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.14.tgz#7b2a0bcfb44c3376fc81f85500f9bd01706682ac" + integrity sha512-3AKp8uksje5sRfVrtgG9Q/2TBsHWVBUtA0NaXliZqGcXo8J+A+Agp0qUW2rJ+ivgPWTCCubz9FZVT2IQZ3bGsw== + dependencies: + "@babel/runtime" "^7.23.1" + "@types/prop-types" "^15.7.7" + prop-types "^15.8.1" + react-is "^18.2.0" + "@ndelangen/get-tarball@^3.0.7": version "3.0.9" resolved "https://registry.yarnpkg.com/@ndelangen/get-tarball/-/get-tarball-3.0.9.tgz#727ff4454e65f34707e742a59e5e6b1f525d8964" @@ -3878,6 +3976,13 @@ dependencies: "@types/react" "*" +"@types/react-transition-group@^4.4.7": + version "4.4.8" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.8.tgz#46f87d80512959cac793ecc610a93d80ef241ccf" + integrity sha512-QmQ22q+Pb+HQSn04NL3HtrqHwYMf4h3QKArOy5F8U5nEVMaihBs3SR10WiOM1iwPz5jIo8x/u11al+iEGZZrvg== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@>=16": version "18.2.20" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.20.tgz#1605557a83df5c8a2cc4eeb743b3dfc0eb6aaeb2" @@ -5721,6 +5826,14 @@ dom-converter@^0.2.0: dependencies: utila "~0.4" +dom-helpers@^5.0.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + dom-serializer@^1.0.1: version "1.4.1" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30" @@ -10024,6 +10137,16 @@ react-textarea-autosize@^7.1.0: "@babel/runtime" "^7.1.2" prop-types "^15.6.0" +react-transition-group@^4.4.5: + version "4.4.5" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" + integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" From d4c674b7098e09c7963482e0ac93e0ece1bdf222 Mon Sep 17 00:00:00 2001 From: Tlezip Date: Sun, 22 Oct 2023 16:50:43 +0700 Subject: [PATCH 2/4] Add full width for content --- blocks/card-social-comment/src/CardSocialComment.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/card-social-comment/src/CardSocialComment.tsx b/blocks/card-social-comment/src/CardSocialComment.tsx index d926a35..5a58435 100644 --- a/blocks/card-social-comment/src/CardSocialComment.tsx +++ b/blocks/card-social-comment/src/CardSocialComment.tsx @@ -44,9 +44,9 @@ export default function CardSocialComment() { { comments.map(({ commentor, commentAt, comments, color }) => ( - + {convertNameToAvatarText(commentor)} - + {commentor} {commentAt} From 90d27e11e93d48649da3da2562cc9c59dc9421dc Mon Sep 17 00:00:00 2001 From: Tlezip Date: Mon, 23 Oct 2023 10:48:55 +0700 Subject: [PATCH 3/4] - use pure svg tag for icon - remove unnecessary @mui/icons-material, @mui/material - add github username - use const assertion instead of type casting - change name, time position --- .../src/CardSocialComment.stories.tsx | 2 +- .../src/CardSocialComment.tsx | 77 +++++++++-- package.json | 2 - yarn.lock | 123 ------------------ 4 files changed, 69 insertions(+), 135 deletions(-) diff --git a/blocks/card-social-comment/src/CardSocialComment.stories.tsx b/blocks/card-social-comment/src/CardSocialComment.stories.tsx index 55e2a54..b30f9f7 100644 --- a/blocks/card-social-comment/src/CardSocialComment.stories.tsx +++ b/blocks/card-social-comment/src/CardSocialComment.stories.tsx @@ -9,7 +9,7 @@ const meta = { component: CardSocialComment, parameters: { layout: "centered", - githubUsername: "", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar + githubUsername: "Tlezip", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar }, decorators: [storyDialog(Usage)], } satisfies Meta; diff --git a/blocks/card-social-comment/src/CardSocialComment.tsx b/blocks/card-social-comment/src/CardSocialComment.tsx index 5a58435..ee50407 100644 --- a/blocks/card-social-comment/src/CardSocialComment.tsx +++ b/blocks/card-social-comment/src/CardSocialComment.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { ArrowForward, TurnRight, StarBorder, MoreHoriz } from "@mui/icons-material" import { Card, CardContent, @@ -9,9 +8,9 @@ import { ListItem, Link, ButtonGroup, + SvgIcon, IconButton, Typography, - ColorPaletteProp } from "@mui/joy"; export default function CardSocialComment() { @@ -33,7 +32,7 @@ export default function CardSocialComment() { ], color: 'warning', } - ] + ] as const const convertNameToAvatarText = (name: string) => name.split(" ").reduce((acc, word) => `${acc}${word[0] || ''}`, '') @@ -45,9 +44,9 @@ export default function CardSocialComment() { comments.map(({ commentor, commentAt, comments, color }) => ( - {convertNameToAvatarText(commentor)} + {convertNameToAvatarText(commentor)} - + {commentor} {commentAt} @@ -81,16 +80,76 @@ export default function CardSocialComment() { }} > - + + + + + + - + + + + + + - + + + + + - + + + + + + + diff --git a/package.json b/package.json index 06d82b4..a6eb798 100644 --- a/package.json +++ b/package.json @@ -32,8 +32,6 @@ "jackspeak": "2.1.1" }, "dependencies": { - "@mui/icons-material": "^5.14.14", - "@mui/material": "^5.14.14", "@types/got": "9.6.11", "@types/rimraf": "3.0.0", "@types/tar": "4.0.4", diff --git a/yarn.lock b/yarn.lock index 35950f8..937f0b3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1187,13 +1187,6 @@ dependencies: regenerator-runtime "^0.14.0" -"@babel/runtime@^7.8.7": - version "7.23.2" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885" - integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg== - dependencies: - regenerator-runtime "^0.14.0" - "@babel/standalone@^7.4.5": version "7.22.10" resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.22.10.tgz#0a39a85488d61d301751cc074ea77c44aacb9d07" @@ -1948,36 +1941,11 @@ clsx "^2.0.0" prop-types "^15.8.1" -"@mui/base@5.0.0-beta.20": - version "5.0.0-beta.20" - resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.20.tgz#14fcdfe0350f2aad06ab6c37c4c91dacaab8f600" - integrity sha512-CS2pUuqxST7ch9VNDCklRYDbJ3rru20Tx7na92QvVVKfu3RL4z/QLuVIc8jYGsdCnauMaeUSlFNLAJNb0yXe6w== - dependencies: - "@babel/runtime" "^7.23.1" - "@floating-ui/react-dom" "^2.0.2" - "@mui/types" "^7.2.6" - "@mui/utils" "^5.14.13" - "@popperjs/core" "^2.11.8" - clsx "^2.0.0" - prop-types "^15.8.1" - "@mui/core-downloads-tracker@^5.14.12": version "5.14.12" resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.12.tgz#7be13094ef0c2fc7c3854da2b90a7eae456ebefd" integrity sha512-WZhCkKqhrXaSVBzoC6LNcVkIawS000OOt7gmnp4g9HhyvN0PSclRXc/JrkC7EwfzUAZJh+hiK2LaVsbtOpNuOg== -"@mui/core-downloads-tracker@^5.14.14": - version "5.14.14" - resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.14.tgz#a54894e9b4dc908ab2d59eac543219d9018448e6" - integrity sha512-Rw/xKiTOUgXD8hdKqj60aC6QcGprMipG7ne2giK6Mz7b4PlhL/xog9xLeclY3BxsRLkZQ05egFnIEY1CSibTbw== - -"@mui/icons-material@^5.14.14": - version "5.14.14" - resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.14.tgz#02d33f51f0b9de238d5c47b0a31ff330144393c4" - integrity sha512-vwuaMsKvI7AWTeYqR8wYbpXijuU8PzMAJWRAq2DDIuOZPxjKyHlr8WQ25+azZYkIXtJ7AqnVb1ZmHdEyB4/kug== - dependencies: - "@babel/runtime" "^7.23.1" - "@mui/joy@5.0.0-beta.9": version "5.0.0-beta.9" resolved "https://registry.yarnpkg.com/@mui/joy/-/joy-5.0.0-beta.9.tgz#66c7038a20d4adfeaec40008ec9a23f8fdd3bf0c" @@ -1992,24 +1960,6 @@ clsx "^2.0.0" prop-types "^15.8.1" -"@mui/material@^5.14.14": - version "5.14.14" - resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.14.tgz#e47f3992b609002cd57a71f70e829dc2d286028c" - integrity sha512-cAmCwAHFQXxb44kWbVFkhKATN8tACgMsFwrXo8ro6WzYW73U/qsR5AcCiJIhCyYYg+gcftfkmNcpRaV3JjhHCg== - dependencies: - "@babel/runtime" "^7.23.1" - "@mui/base" "5.0.0-beta.20" - "@mui/core-downloads-tracker" "^5.14.14" - "@mui/system" "^5.14.14" - "@mui/types" "^7.2.6" - "@mui/utils" "^5.14.13" - "@types/react-transition-group" "^4.4.7" - clsx "^2.0.0" - csstype "^3.1.2" - prop-types "^15.8.1" - react-is "^18.2.0" - react-transition-group "^4.4.5" - "@mui/private-theming@^5.14.12": version "5.14.12" resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.12.tgz#b07f710b9794c928052ee4c91bf67fc3e0a442ea" @@ -2019,15 +1969,6 @@ "@mui/utils" "^5.14.12" prop-types "^15.8.1" -"@mui/private-theming@^5.14.14": - version "5.14.14" - resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.14.tgz#035dde1eb30c896c69a12b7dee1dce3a323c66e9" - integrity sha512-n77au3CQj9uu16hak2Y+rvbGSBaJKxziG/gEbOLVGrAuqZ+ycVSkorCfN6Y/4XgYOpG/xvmuiY3JwhAEOzY3iA== - dependencies: - "@babel/runtime" "^7.23.1" - "@mui/utils" "^5.14.13" - prop-types "^15.8.1" - "@mui/styled-engine@^5.14.12": version "5.14.12" resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.12.tgz#bfacc045f14f8f8bef735c76ecfd90bc99427c43" @@ -2038,16 +1979,6 @@ csstype "^3.1.2" prop-types "^15.8.1" -"@mui/styled-engine@^5.14.13": - version "5.14.14" - resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.14.tgz#b0ededf531fff1ef110f7b263c2d3d95a0b8ec9a" - integrity sha512-sF3DS2PVG+cFWvkVHQQaGFpL1h6gSwOW3L91pdxPLQDHDZ5mZ/X0SlXU5XA+WjypoysG4urdAQC7CH/BRvUiqg== - dependencies: - "@babel/runtime" "^7.23.1" - "@emotion/cache" "^11.11.0" - csstype "^3.1.2" - prop-types "^15.8.1" - "@mui/system@^5.14.12": version "5.14.12" resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.12.tgz#da5b32c2a10bbe58f8b4839c5d5de449dc35e425" @@ -2062,30 +1993,11 @@ csstype "^3.1.2" prop-types "^15.8.1" -"@mui/system@^5.14.14": - version "5.14.14" - resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.14.tgz#f33327e74230523169107ace960e8bb51cbdbab7" - integrity sha512-y4InFmCgGGWXnz+iK4jRTWVikY0HgYnABjz4wgiUgEa2W1H8M4ow+27BegExUWPkj4TWthQ2qG9FOGSMtI+PKA== - dependencies: - "@babel/runtime" "^7.23.1" - "@mui/private-theming" "^5.14.14" - "@mui/styled-engine" "^5.14.13" - "@mui/types" "^7.2.6" - "@mui/utils" "^5.14.13" - clsx "^2.0.0" - csstype "^3.1.2" - prop-types "^15.8.1" - "@mui/types@^7.2.5": version "7.2.5" resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.5.tgz#cd62a1fc5eb1044137ccab2053b431dd7cfc3cb8" integrity sha512-S2BwfNczr7VwS6ki8GoAXJyARoeSJDLuxOEPs3vEMyTALlf9PrdHv+sluX7kk3iKrCg/ML2mIWwapZvWbkMCQA== -"@mui/types@^7.2.6": - version "7.2.6" - resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.6.tgz#d72b9e9eb0032e107e76033932d65c3f731d2608" - integrity sha512-7sjLQrUmBwufm/M7jw/quNiPK/oor2+pGUQP2CULRcFCArYTq78oJ3D5esTaL0UMkXKJvDqXn6Ike69yAOBQng== - "@mui/utils@^5.14.12": version "5.14.12" resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.12.tgz#58b570839e22e0fba71e17d37d9c083fe233704d" @@ -2096,16 +2008,6 @@ prop-types "^15.8.1" react-is "^18.2.0" -"@mui/utils@^5.14.13": - version "5.14.14" - resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.14.tgz#7b2a0bcfb44c3376fc81f85500f9bd01706682ac" - integrity sha512-3AKp8uksje5sRfVrtgG9Q/2TBsHWVBUtA0NaXliZqGcXo8J+A+Agp0qUW2rJ+ivgPWTCCubz9FZVT2IQZ3bGsw== - dependencies: - "@babel/runtime" "^7.23.1" - "@types/prop-types" "^15.7.7" - prop-types "^15.8.1" - react-is "^18.2.0" - "@ndelangen/get-tarball@^3.0.7": version "3.0.9" resolved "https://registry.yarnpkg.com/@ndelangen/get-tarball/-/get-tarball-3.0.9.tgz#727ff4454e65f34707e742a59e5e6b1f525d8964" @@ -3976,13 +3878,6 @@ dependencies: "@types/react" "*" -"@types/react-transition-group@^4.4.7": - version "4.4.8" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.8.tgz#46f87d80512959cac793ecc610a93d80ef241ccf" - integrity sha512-QmQ22q+Pb+HQSn04NL3HtrqHwYMf4h3QKArOy5F8U5nEVMaihBs3SR10WiOM1iwPz5jIo8x/u11al+iEGZZrvg== - dependencies: - "@types/react" "*" - "@types/react@*", "@types/react@>=16": version "18.2.20" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.20.tgz#1605557a83df5c8a2cc4eeb743b3dfc0eb6aaeb2" @@ -5826,14 +5721,6 @@ dom-converter@^0.2.0: dependencies: utila "~0.4" -dom-helpers@^5.0.1: - version "5.2.1" - resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" - integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== - dependencies: - "@babel/runtime" "^7.8.7" - csstype "^3.0.2" - dom-serializer@^1.0.1: version "1.4.1" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30" @@ -10137,16 +10024,6 @@ react-textarea-autosize@^7.1.0: "@babel/runtime" "^7.1.2" prop-types "^15.6.0" -react-transition-group@^4.4.5: - version "4.4.5" - resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" - integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== - dependencies: - "@babel/runtime" "^7.5.5" - dom-helpers "^5.0.1" - loose-envify "^1.4.0" - prop-types "^15.6.2" - react@18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" From af43556fcf86f4126f8201b645f2edcb25b512a9 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 24 Oct 2023 22:02:54 +0700 Subject: [PATCH 4/4] simplify structure and add transition --- .../src/CardSocialComment.tsx | 297 ++++++++++-------- 1 file changed, 162 insertions(+), 135 deletions(-) diff --git a/blocks/card-social-comment/src/CardSocialComment.tsx b/blocks/card-social-comment/src/CardSocialComment.tsx index ee50407..7846c7d 100644 --- a/blocks/card-social-comment/src/CardSocialComment.tsx +++ b/blocks/card-social-comment/src/CardSocialComment.tsx @@ -1,163 +1,190 @@ import React from "react"; import { + Avatar, + Box, + ButtonGroup, Card, CardContent, - Box, - Avatar, + IconButton, + Link, List, ListItem, - Link, - ButtonGroup, SvgIcon, - IconButton, Typography, } from "@mui/joy"; export default function CardSocialComment() { const comments = [ { - commentor: 'Edward Clark', - commentAt: '14:07', + commentor: "Edward Clark", + commentAt: "14:07", comments: [ - The biggest change of design in 2019 will be the makeup of the people doing the actual design work., - @Steve please read this. + + The biggest change of design in 2019 will be the makeup of the people + doing the actual design work. + , + + + @Steve + {" "} + please read this. + , ], - color: 'success', + color: "success", }, { - commentor: 'Albert Ox', - commentAt: '13:37', + commentor: "Albert Ox", + commentAt: "13:37", comments: [ - We absolutely need to get smarter about privacy. Society is creeped out by big tech and big data. + + We absolutely need to get smarter about privacy. Society is creeped + out by big tech and big data. + , ], - color: 'warning', - } - ] as const + color: "warning", + }, + ] as const; - const convertNameToAvatarText = (name: string) => name.split(" ").reduce((acc, word) => `${acc}${word[0] || ''}`, '') + const convertNameToAvatarText = (name: string) => + name.split(" ").reduce((acc, word) => `${acc}${word[0] || ""}`, ""); return ( - - { - comments.map(({ commentor, commentAt, comments, color }) => ( - - - {convertNameToAvatarText(commentor)} - - - {commentor} - {commentAt} - - - {comments} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + {comments.map(({ commentor, commentAt, comments, color }) => ( + + + {convertNameToAvatarText(commentor)} + + + + {commentor} + {commentAt} + + + {comments} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - )) - } + + + ))}