Merge pull request #41 from ckomop0x/feaure/add-storybook

Add storybook to the project

.storybook/main.js

@@ -0,0 +1,36 @@
+const path = require('path');
+
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ],
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          /**
+           * Map our module path aliases, so that Storybook can understand modules loaded using "@/common" and load the proper file.
+           * Required, or Storybook will fail to import dependencies from Stories.
+           *
+           * XXX The below list must match `tsconfig.json:compilerOptions.paths`, so the Next.js app and Storybook resolve all aliases the same way.
+           *  The paths mapping must also match the `jsconfig.json:compilerOptions.paths` file, which is necessary for WebStorm to understand them for .js files.
+           *
+           * @see https://nextjs.org/docs/advanced-features/module-path-aliases
+           * @see https://intellij-support.jetbrains.com/hc/en-us/community/posts/360003361399/comments/360002636080
+           */
+          "components": path.resolve(__dirname, "../src/components"),
+          "utils": path.resolve(__dirname, "../src/utils"),
+          "styles": path.resolve(__dirname, "../src/styles")
+        },
+      },
+    };
+  },
+}

.storybook/preview.js

@@ -0,0 +1,16 @@
+import './assets/bootstrap.min.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  options: {
+    theme: {
+      brandTitle: 'Ckomop0x.me'
+    }
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

README.md

@@ -1,5 +1,5 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/b694641f-f653-4ac4-91e1-ee0a804cf727/deploy-status)](https://app.netlify.com/sites/webtime-studio/deploys)
-![Version](https://img.shields.io/badge/version-2.4.1-blue.svg?cacheSeconds=2592000)
+![Version](https://img.shields.io/badge/version-2.4.3-blue.svg?cacheSeconds=2592000)
 
 # Pavel Klochkov @ckomop0x blog website
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ckomop0x-me-site-v2",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "description": "Ckomop0x.me site",
   "author": "Pavel Klochkov, [email protected]",
   "license": "MIT",
@@ -12,7 +12,9 @@
     "test": "jest --env=jsdom --ci --verbose --passWithNoTests",
     "pretty": "prettier --check \"./**/*.{ts,tsx,js,jsx,json,md}\"",
     "check-ts": "tsc",
-    "lint": "eslint \"./src/**/*.{ts,tsx,js}\" --fix"
+    "lint": "eslint \"./src/**/*.{ts,tsx,js}\" --fix",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "husky": {
     "hooks": {
@@ -54,10 +56,14 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "styled-components": "^5.3.0",
-    "tsconfig-paths-webpack-plugin": "^3.3.0"
+    "styled-components": "^5.3.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.14.3",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/react": "^6.2.9",
     "@types/enzyme": "^3.10.8",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/graphql": "^14.5.0",
@@ -68,6 +74,7 @@
     "@typescript-eslint/eslint-plugin": "^4.10.0",
     "@typescript-eslint/parser": "^4.10.0",
     "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.2",
     "cross-env": "^7.0.3",
     "dotenv": "^8.2.0",
     "enzyme": "^3.11.0",
@@ -89,6 +96,7 @@
     "prettier": "^2.3.0",
     "ts-graphql-plugin": "^2.1.3",
     "ts-jest": "^26.5.6",
+    "tsconfig-paths-webpack-plugin": "^3.5.1",
     "typescript": "^4.2.4"
   },
   "resolutions": {

src/components/sections/FeaturedPost/FeaturedPost.tsx

@@ -20,15 +20,8 @@ interface IFeaturedPost {
 }
 
 const FeaturedPost: React.FC<IFeaturedPost> = ({ post, categories }) => {
-  const {
-    title,
-    excerpt,
-    published,
-    createdAt,
-    slug,
-    category,
-    image_url,
-  } = post;
+  const { title, excerpt, published, createdAt, slug, category, image_url } =
+    post;
   const formattedDate = moment(createdAt).format('DD.MM.YYYY');
   const categoryData = categories.filter(
     categoryItem => categoryItem.node.slug === category,
@@ -47,17 +40,9 @@ const FeaturedPost: React.FC<IFeaturedPost> = ({ post, categories }) => {
                 <div className="row">
                   <ItemImage
                     className="col-12 col-sm-12 col-md-7"
-                    background={image_url ? image_url : ''}
+                    background={image_url ?? ''}
                   >
-                    <div className="item-image"></div>
-                    {/* <img
-                  className="item-image lazyload"
-                  loading="lazy"
-                  data-src={`${image_url}?tr=w-1080,h-280,fo-top`}
-                  data-srcset={getSrcSet(image_url ? image_url : '')}
-                  data-sizes="(max-width: 600px) 480px, 600px"
-                  alt={title || undefined}
-                /> */}
+                    <div className="item-image" />
                   </ItemImage>
                   <ContentWrapper className="col-12 col-sm-12 col-md-5">
                     <h3 className="title">{title}</h3>

src/components/sections/PostsList/Post/Post.stories.tsx

@@ -0,0 +1,27 @@
+import { Story, Meta } from '@storybook/react';
+import React from 'react';
+
+import Post, { IPostProps } from './Post';
+
+export default {
+  title: 'Components/Post',
+  component: Post,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+
+const Template: Story<IPostProps> = args => <Post {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  id: 'main',
+  publicationDate: 'Завтра',
+  slug: 'Анонс',
+  category: {
+    name: 'Стихи',
+    slug: 'poetry',
+  },
+  image:
+    'https://ik.imagekit.io/ckomop0x/ckomop0x-me/blog/etot-god-slovno-marafon/IMG_2783_2_rCmdP-qXAWT2W.jpg?tr=w-480,h-480,fo-top',
+};

src/components/sections/PostsList/Post/Post.tsx

@@ -9,25 +9,28 @@ import { ItemWrapper, PostTitle, StyledLink, PostContent } from './styles';
 
 import { getSrcSet } from 'utils/image';
 
-interface IPost {
+export interface IPostProps {
+  /**
+   * @id уникальный идентификатор поста
+   */
   id: string | null;
   excerpt: string | null;
   publicationDate: string;
-  title: string | null;
+  title: string;
   slug: string | null;
   category: poetryPageQuery_categories_edges_node;
-  image: string | null;
+  image: string;
   updateDate?: string;
 }
 
-const Post: React.FC<IPost> = ({
+const Post: React.FC<IPostProps> = ({
   publicationDate,
   title,
   slug,
   category,
   excerpt,
   image,
-}: any) => {
+}) => {
   const isWithImage = !!image;
 
   return (
@@ -56,7 +59,9 @@ const Post: React.FC<IPost> = ({
             )}
             <PostTitle>{title}</PostTitle>
             <PostContent>
-              {parse(`<p>${excerpt.split('\n').join('</br>')}</p>`)}
+              {excerpt
+                ? parse(`<p>${excerpt.split('\n').join('</br>')}</p>`)
+                : 'В этом посте ещё нет контента'}
             </PostContent>
           </div>
         </div>

src/components/sections/PostsList/Post/styles.ts

@@ -1,4 +1,4 @@
-import { Link } from 'gatsby';
+import Link from 'gatsby-link';
 import styled, { css } from 'styled-components';
 
 export const Content = styled.div`

src/components/sections/PostsList/PostsList.tsx

@@ -67,10 +67,10 @@ const PostsList: React.FC<IPostsList> = ({
                     id={strapiId}
                     excerpt={excerpt}
                     publicationDate={publicationDate}
-                    title={title}
+                    title={title || ''}
                     slug={slug}
                     category={categoryData}
-                    image={image_url}
+                    image={image_url || ''}
                   />
                 )
               );

src/components/shared/ItemsList/ItemsList.tsx

@@ -54,10 +54,10 @@ const ItemsList: React.FC<IItemsList> = ({ items, categories }) => (
               excerpt={excerpt}
               publicationDate={publicationDate}
               updateDate={updateDate}
-              title={title}
+              title={title || ''}
               slug={slug}
               category={categoryData}
-              image={image_url}
+              image={image_url || ''}
             />
           )
         );

src/stories/Button.stories.tsx

@@ -0,0 +1,37 @@
+import { Story, Meta } from '@storybook/react';
+import React from 'react';
+
+import { Button, ButtonProps } from './Button';
+
+export default {
+  title: 'Example/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+
+const Template: Story<ButtonProps> = args => <Button {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Button',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Button',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Button',
+};

src/stories/Button.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import './button.css';
+
+export interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button: React.FC<ButtonProps> = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

src/stories/Header.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import { Header, HeaderProps } from './Header';
+
+export default {
+  title: 'Example/Header',
+  component: Header,
+} as Meta;
+
+const Template: Story<HeaderProps> = (args) => <Header {...args} />;
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {},
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};