created wrapper truncate

src/shared/ui/wrapper-truncate/index.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { Typography } from "../typography";
+import styles from "./styles.module.css"
+
+type WrapperTruncateProps = {
+  symbolsForCutting: number;
+  textButtonForReading: string;
+  textButtonForCollapsing: string;
+  text: string;
+}
+
+export const WrapperTruncate = ({ symbolsForCutting, textButtonForReading, textButtonForCollapsing, text }: WrapperTruncateProps) => {
+  const [openedText, setOpenedText] = useState(false);
+
+  const handleLimitation = (text: string, numberOfSymbols: number) => {
+    let newText = text;
+    if (!openedText) {
+      newText = text.slice(0, numberOfSymbols) + "...";
+    }
+
+    return newText + " "
+  }
+
+  return (
+
+    <Typography>
+      {text.length < symbolsForCutting ? text : (
+        <>
+          {handleLimitation(text, symbolsForCutting)}
+          <button onClick={() => setOpenedText(!openedText)} className={styles.button}>{openedText ? textButtonForCollapsing : textButtonForReading}</button>
+        </>
+      )}
+    </Typography>
+
+  )
+}

src/shared/ui/wrapper-truncate/styles.module.css

@@ -0,0 +1,18 @@
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.button {
+  display: inline;
+  border: none;
+  background-color: transparent;
+  color: var(--colors-interface-primary);
+  border-radius: 5px;
+}
+
+.button:hover {
+  color: white;
+  background-color: var(--colors-interface-primary);
+  transition: 0.2s;
+}

src/shared/ui/wrapper-truncate/wrapper-truncate.stories.ts

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from "@storybook/react/*";
+import { WrapperTruncate } from "./";
+
+const meta: Meta<typeof WrapperTruncate> = {
+  title: 'shared/ui/WrapperTruncate',
+  component: WrapperTruncate,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof WrapperTruncate>;
+
+export const MoreSymbols: Story = {
+  args: {
+    symbolsForCutting: 50,
+    textButtonForReading: "Читать",
+    textButtonForCollapsing: "Свернуть",
+    text: "Пожалуйста, погуляйте с моей собакой, я не смогу ее выгуливать с 12.06 по 24.06 потому что уеду на обследование к врачу. Если есть желающие помочь в выгуле собаки, то звоните."
+  },
+};
+
+export const LessSymbols: Story = {
+  args: {
+    symbolsForCutting: 50,
+    textButtonForReading: "Читать",
+    textButtonForCollapsing: "Свернуть",
+    text: "Пожалуйста, погуляйте с моей собакой"
+  },
+};