feat: Chatを作成

packages/tailwindcss/chat.js

@@ -0,0 +1,66 @@
+const plugin = require("tailwindcss/plugin");
+const theme = require("./theme");
+
+module.exports = plugin.withOptions(
+  () => {
+    return ({ addComponents, theme }) => {
+      addComponents([
+        {
+          ".chat": {
+            ".message-content": {
+              display: "inline-block",
+              padding: `${theme("spacing.2")} ${theme("spacing.4")}`,
+              backgroundColor: `${theme("colors.gray.100")}`,
+              borderRadius: `${theme("borderRadius.2xl")}`,
+              maxWidth: "80%",
+            },
+            "&.align-right": {
+              display: "flex",
+              justifyContent: "flex-end",
+            },
+            ".message-image": {
+              display: "inline-block",
+              borderRadius: `${theme("borderRadius.2xl")}`,
+              border: `${theme("spacing.4")} solid ${theme("colors.gray.100")}`,
+              maxWidth: "80%",
+            },
+            ".message-share": {
+              maxWidth: "80%",
+              img: {
+                border: `1px solid ${theme("colors.gray.100")}`,
+                borderRadius: `${theme("borderRadius.md")}`,
+                marginBottom: theme("spacing.1"),
+              },
+              "&__title": {
+                fontWeight: "bold",
+                a: {
+                  padding: `${theme("spacing.2")} 0`,
+                  display: "inline-block",
+                  "&:hover": {
+                    textDecoration: "underline",
+                  },
+                },
+              },
+              "&__description": {
+                fontSize: theme("fontSize.xs"),
+                color: theme("colors.gray.600"),
+                marginBottom: theme("spacing.1"),
+              },
+              "&__url": {
+                fontSize: theme("fontSize.xs"),
+                color: theme("colors.gray.400"),
+              },
+            },
+          },
+          ".chat-date": {
+            fontSize: theme("fontSize.xs"),
+            color: theme("colors.gray.600"),
+            textAlign: "center",
+            padding: `${theme("spacing.2")} ${theme("spacing.4")}`,
+          },
+        },
+      ]);
+    };
+  },
+  () => ({ theme })
+);

packages/tailwindcss/index.js

@@ -9,6 +9,7 @@ const Avatar = require("./Avatar");
 const Accordion = require("./Accordion");
 const Tag = require("./Tag");
 const Tab = require("./Tab");
+const Chat = require("./Chat");
 
 module.exports = [
   button,
@@ -22,4 +23,5 @@ module.exports = [
   Accordion,
   Tag,
   Tab,
+  Chat,
 ];

packages/tailwindcss/stories/Chat.stories.js

@@ -0,0 +1,64 @@
+export default {
+  title: "Chat",
+};
+
+const Template = () => {
+  return `
+    <div class="chat">
+        <div class="message-content">
+        あっという間の時間でしたが困難の多かった東京オリンピックの一番最後の式典で選手の方々、関係者の方々の労をねぎらう役目を頂けて光栄でした
+        </div>
+    </div>
+    `;
+};
+export const Default = Template.bind({});
+
+const RightTemplate = () => {
+  return `
+      <div class="chat align-right">
+          <div class="message-content">
+          あっという間の時間でしたが困難の多かった東京オリンピックの一番最後の式典で選手の方々、関係者の方々の労をねぎらう役目を頂けて光栄でした
+          </div>
+      </div>
+      `;
+};
+export const Right = RightTemplate.bind({});
+
+const ShareTemplate = () => {
+  return `
+      <div class="chat">
+          <div class="message-share">
+            <img src="https://tuqulore.com/image/ogp.png" alt="株式会社 ツクロア" />
+            <div class="message-share__content">
+                <div class="message-share__title">
+                   <a href="https://tuqulore.com/">つくり・つたえるUIデザイン | 株式会社ツクロア</a>
+                </div>
+                <div class="message-share__description">業務: 行動デザインとUIデザイン, 所在地: バーチャルオフィス, 業態: リモートワーク, メッセージ: 人の行動を理解しUIデザインを行う、プロジェクトを成功に近づけビジネスに貢献する</div>
+                <div class="message-share__url">tuqulore.com</div>
+            </div>
+          </div>
+      </div>
+      `;
+};
+export const Share = ShareTemplate.bind({});
+
+const PhotoTemplate = () => {
+  return `
+    <div class="chat mb-4">
+        <img src="${require("./assets/chat-photo.jpg")}" alt="photo" class="message-image" />
+    </div>
+    <div class="chat mb-4">
+        <img src="${require("./assets/chat-photo-2.jpg")}" alt="photo" class="message-image" />
+    </div>
+    `;
+};
+export const Photo = PhotoTemplate.bind({});
+
+const DateTemplate = () => {
+  return `
+      <div class="chat-date">
+          3日前
+      </div>
+      `;
+};
+export const Date = DateTemplate.bind({});