Merge pull request #205 from Studio-Yandex-Practicum/enhancement-200-…

…change-StoriesBlock-to-fsd

#200-enhancement-changed-StoriesBlock-to-fsd

src/entities/StoryCard/StoryCard.module.scss

@@ -0,0 +1,21 @@
+@use '@/app/styles/index' as var;
+
+.card {  
+  position: relative;
+  transition: transform 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 15px;  
+
+  &:hover {
+    transform: scale(1.1, 1.05);
+    transition: transform 0.3s ease-in-out;      
+  }
+
+  img {
+    border-radius: 6px;
+    transition: transform 0.3s ease-in-out;
+    scroll-snap-align: start;
+  }  
+}

src/entities/StoryCard/StoryCard.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import StoryCard from './StoryCard'
+import Img1 from '@/assets/images/stories/img-stories-01.png'
+
+const meta = {
+  title: 'entities/StoryCard',
+  component: StoryCard,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof StoryCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    card: {
+      id: 1,
+      src: Img1,
+      alt: 'Stock image'
+    }
+  }
+}

src/entities/StoryCard/StoryCard.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react'
+import { TCard } from '@/models/CardModel'
+import styles from './StoryCard.module.scss'
+import Link from '@/shared/ui/Link/Link'
+
+export type Props = {
+  card: TCard
+}
+
+/**
+ * Карточка из блока группы историй
+ * @param {TCard} card - параметры карточки из группы историй
+ */
+
+const StoryCard: FC<Props> = ({ card }) => {
+  return (
+    <Link to={''} className={styles.card}>
+      <img src={card.src} alt={card.alt} draggable="false" />
+    </Link>
+  )
+}
+
+export default StoryCard

src/pages/MainPage/MainPage.tsx

@@ -9,14 +9,15 @@ import ReviewsBlock from '@/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock'
 import Advantages from '@/widgets/Advantages/ui/Advantages/Advantages'
 import NewsBlock from '@/widgets/NewsBlock/ui/NewsBlock'
 import ContainerCards from '@/components/ContainerCards/ContainerCards'
+import StoriesBlock from '@/widgets/StoriesBlock/ui/StoriesBlock'
 import BlogBlock from '@/widgets/BlogBlock/ui/BlogBlock'
 
 const MainPage = () => {
   return (
     <>
       <SliderBlock />
       <WrapperForMainContent>
-        <ContainerCards title={TEXT_STORIES} cards={storiesData} />
+        <StoriesBlock />
         <BlogBlock />
         <NewsBlock />
         <CategoryGrid />

src/widgets/StoriesBlock/ui/StoriesBlock.module.scss

@@ -0,0 +1,48 @@
+@use '@/app/styles/index' as var;
+
+.storybook {
+  width: 1080px;
+}
+
+.wrapper {
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+
+  h2 {
+    font-size: #{'min(max(18px, 1.6vw), 20px)'};
+    line-height: 115%;
+    font-weight: 500;
+  }
+
+  article {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: 0 10px;
+  } 
+
+  ul {
+    display: flex;
+    gap: 20px;
+    padding: 0 10px 20px;
+    overflow: auto hidden;
+    cursor: grab;
+
+    &::-webkit-scrollbar {
+      height: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var.$theme-primary-color;
+      cursor: grab;
+    }
+
+    &::-webkit-scrollbar-track {
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+  }
+}

src/widgets/StoriesBlock/ui/StoriesBlock.stories.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import styles from './StoriesBlock.module.scss'
+import StoriesBlock from './StoriesBlock'
+
+const StorybookWrapper: FC = () => {
+  return (
+    <div className={styles.storybook}>
+      <StoriesBlock />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'widgets/StoriesBlock',
+  component: StorybookWrapper,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof StorybookWrapper>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

src/widgets/StoriesBlock/ui/StoriesBlock.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import styles from './StoriesBlock.module.scss'
+import Scroll from '@/shared/ui/Scroll/Scroll'
+import { storiesData } from '@/mockData/storiesData'
+import StoryCard from '@/entities/StoryCard/StoryCard'
+
+/**
+ * Блок группы историй
+ */
+const StoriesBlock: FC = () => {
+  return (
+    <section className={styles.wrapper}>
+      <article>
+        <Heading type={HeadingType.NORMAL}>Истории</Heading>
+      </article>
+      <Scroll>
+        {storiesData.map(item => (
+          <StoryCard key={item.id} card={item} />
+        ))}
+      </Scroll>
+    </section>
+  )
+}
+
+export default StoriesBlock