homework3 Add types for base components

src/shared/header/Header.stories.ts

@@ -0,0 +1,11 @@
+import { Header } from './Header';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Header> = {
+  title: 'Otus/Common/Header',
+  component: Header,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Header> = {};

src/shared/header/Header.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './header.css';
+import { Logo } from '../logo/Logo';
+
+export const Header = (): React.ReactElement => {
+  return (
+    <header className="appheader">
+      <div className="appheader-content">
+        <Logo></Logo>
+      </div>
+    </header>
+  );
+};

src/shared/layout/Layout.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Layout } from './Layout';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Layout> = {
+  title: 'Otus/Common/Layout',
+  component: Layout,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Layout> = {
+  args: {
+    children: [<div key={1} style={{ margin: 0, height: '500px' }} />],
+  },
+};

src/shared/layout/Layout.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import './layout.css';
+import { Header } from '../header/Header';
+
+interface LayoutContent {
+  children: React.ReactNode;
+}
+
+export const Layout = ({ children }: LayoutContent): React.ReactElement => {
+  return (
+    <div className="layout">
+      <Header></Header>
+      {children}
+    </div>
+  );
+};

src/shared/logo/Logo.stories.ts

@@ -0,0 +1,11 @@
+import { Logo } from './Logo';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Logo> = {
+  title: 'Otus/Common/Logo',
+  component: Logo,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Logo> = {};

src/shared/logo/Logo.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import './logo.css';
+
+export const Logo = (): React.ReactElement => {
+  return <div className="logo" />;
+};

src/shared/modal/Modal.stories.js → src/shared/modal/Modal.stories.tsx

@@ -1,7 +1,8 @@
-import { React } from 'react';
+import React from 'react';
 import { Modal } from './Modal';
+import type { Meta, StoryObj } from '@storybook/react';
 
-const meta = {
+const meta: Meta<typeof Modal> = {
   title: 'Otus/Common/Modal',
   component: Modal,
   argTypes: {
@@ -11,7 +12,7 @@ const meta = {
 
 export default meta;
 
-export const Default = {
+export const Default: StoryObj<typeof Modal> = {
   args: {
     visible: true,
     children: [

src/shared/modal/Modal.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import './modal.css';
+
+interface ModalProps {
+  visible: boolean;
+  children: React.ReactNode;
+}
+
+export const Modal = ({ visible, children }: ModalProps): React.ReactElement => {
+  if (!visible) return null;
+  return (
+    <div className="modal-background">
+      <div className="modal-dialog">
+        <span className="modal-close">&times;</span>
+        <div className="modal-body">{children}</div>
+      </div>
+    </div>
+  );
+};

src/shared/shopping/cartitem/CartItem.stories.js → src/shared/shopping/cartitem/CartItem.stories.ts

@@ -1,6 +1,7 @@
 import { CartItem } from './CartItem';
+import type { Meta, StoryObj } from '@storybook/react';
 
-const meta = {
+const meta: Meta<typeof CartItem> = {
   title: 'Otus/Shopping/CartItem',
   component: CartItem,
   tags: ['autodocs'],
@@ -13,7 +14,7 @@ const meta = {
 
 export default meta;
 
-export const Default = {
+export const Default: StoryObj<typeof CartItem> = {
   args: {
     title: 'Awesome thing',
   },

src/shared/shopping/cartitem/CartItem.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Trash2 } from 'lucide-react';
+import './cartitem.css';
+
+interface CartItemProps {
+  title: string;
+}
+
+export const CartItem = ({ title }: CartItemProps): React.ReactElement => {
+  return (
+    <div className="cart-item">
+      <p className="cart-item__title">{title}</p>
+      <div className="cart-item__remove-button">
+        <Trash2 color="red" />
+      </div>
+    </div>
+  );
+};

src/shared/shopping/itemcard/ItemCard.stories.js → src/shared/shopping/itemcard/ItemCard.stories.ts

@@ -1,6 +1,7 @@
 import { ItemCard } from './ItemCard';
+import { Meta, StoryObj } from '@storybook/react';
 
-const meta = {
+const meta: Meta<typeof ItemCard> = {
   title: 'Otus/Shopping/ItemCard',
   component: ItemCard,
   tags: ['autodocs'],
@@ -19,7 +20,7 @@ const meta = {
 
 export default meta;
 
-export const Default = {
+export const Default: StoryObj<typeof ItemCard> = {
   args: {
     price: 100,
     title: 'Awesome thing',

src/shared/shopping/itemcard/ItemCard.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { PurchaseButton } from '../purchasebutton/PurchaseButton';
+import './itemcard.css';
+
+interface ItemCardProps {
+  price: number;
+  title: string;
+  desc: string;
+}
+
+export const ItemCard = ({ price, title, desc }: ItemCardProps): React.ReactElement => {
+  return (
+    <div className="card">
+      <img className="card__image" src="https://prd.place/200/200" />
+      <p className="card__text card__title">{title}</p>
+      <p className="card__text card__description">{desc}</p>
+      <div className="card__price-group">
+        <p className="card__price">{price}</p>
+        <PurchaseButton additionalClass="card__button" />
+      </div>
+    </div>
+  );
+};

src/shared/shopping/itempage/ItemPage.stories.js → src/shared/shopping/itempage/ItemPage.stories.ts

@@ -1,14 +1,15 @@
 import { ItemPage } from './ItemPage';
+import { Meta, StoryObj } from '@storybook/react';
 
-const meta = {
+const meta: Meta<typeof ItemPage> = {
   title: 'Otus/Shopping/ItemPage',
   component: ItemPage,
   tags: ['autodocs'],
 };
 
 export default meta;
 
-export const Default = {
+export const Default: StoryObj<typeof ItemPage> = {
   args: {
     price: 100,
     title: 'Awesome thing',

src/shared/shopping/itempage/ItemPage.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { PurchaseButton } from '../purchasebutton/PurchaseButton';
+import './itempage.css';
+
+interface ItemPageProps {
+  price: number;
+  images: Array<number>;
+  category: string;
+  title: string;
+  desc: string;
+}
+
+export const ItemPage = ({ price, images, category, title, desc }: ItemPageProps) => {
+  return (
+    <div>
+      <div className="page__images">
+        {images.map((imageId) => {
+          return <img key={imageId} src={`https://prd.place/200/200?id=${imageId}`}></img>;
+        })}
+      </div>
+      <p>Item: {title}</p>
+      <p>Description: {desc}</p>
+      <p>Category: {category}</p>
+      <p>Price: {price}</p>
+      <PurchaseButton />
+    </div>
+  );
+};