Merge pull request #579 from CSSSR/release/blog-17

release: BLOG-17

Author: ArtyomResh

.github/kuberta.yaml

@@ -0,0 +1,14 @@
+version: 1-alpha.1
+
+releases:
+  csssr-blog-storybook:
+    name: csssr-blog-storybook
+    autodeploy-on: default
+    chart: csssr/static-site@~1.1.0
+    static-params:
+      projectID: csssr-blog-storybook
+      tlsSecret: csssr-blog-storybook-tls
+    builds:
+      - workflow: build-storybook.yaml
+        values:
+          buildID: build-{{ .Build.RunID }}

.github/workflows/build-storybook.yaml

@@ -0,0 +1,46 @@
+name: Storybook
+on:
+  workflow_dispatch:
+    inputs:
+      kuberta_system:
+
+jobs:
+  build:
+    name: Build Storybook
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: docker://quay.csssr.cloud/csssr/kuberta-init-workflow:v1
+
+      - uses: docker://quay.csssr.cloud/csssr/github-info:v1
+        id: gh
+
+      - name: Download CSSSR actions
+        uses: actions/checkout@v2
+        with:
+          repository: CSSSR/actions
+          ssh-key: ${{ secrets.DOWNLOAD_ACTIONS_SSH_KEY }}
+          path: actions
+
+      - uses: actions/checkout@v2
+        with:
+          path: blog
+
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+
+      - run: yarn install --frozen-lockfile
+        working-directory: blog
+
+      - run: yarn build-storybook
+        working-directory: blog
+        env:
+          BLOG_HOST: https://${{ steps.gh.outputs.releaseID }}.csssr-blog-storybook.csssr.cloud/
+
+      - uses: ./actions/upload-static/v1beta1
+        with:
+          project-id: csssr-blog-storybook
+          files: ./blog/storybook-static
+          auth: ${{ secrets.CDN_UPLOAD_SECRET }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -2,6 +2,8 @@
 /node_modules
 /.next
 /out
+.yalc
+yalc.lock
 
 # IDEs and editors
 .idea/*

.storybook/main.js

@@ -0,0 +1,36 @@
+const { getImagesLoaderRules } = require('../utils/getImagesLoaderRules');
+const { Plugin } = require('@csssr/csssr.images/dist/webpack/plugin');
+
+module.exports = {
+  stories: [
+    '../stories/**/*.stories.mdx',
+    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  webpackFinal: (config, { configType }) => {
+    const isDev = configType === 'DEVELOPMENT';
+
+    config.module.rules = config.module.rules.map((rule) => {
+      // Редактируем существующее правило для избежания конфликтов с @csssr/csssr.images
+      if (
+        rule.test.toString() ===
+        '/\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\?.*)?$/'
+      ) {
+        rule.test = /\\.(svg|ico|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\?.*)?$/;
+      }
+
+      return rule;
+    });
+
+    config.module.rules.push(
+      ...getImagesLoaderRules(isDev, true)
+    );
+
+    if (!isDev) {
+      // TODO подключить позже, нужен для обхода всех картинок проекта перед выкладкой на прод
+      config.plugins.push(new Plugin());
+    }
+
+    return config;
+  },
+};

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  showPanel: true,
+  panelPosition: 'right',
+});

.storybook/preview.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Global, ThemeProvider, css } from '@emotion/react';
+import { Root, Fonts, defaultTheme } from '@csssr/core-design';
+import { getTransformSource } from './utils/getTransformSource';
+
+import { Grid } from '../components/Grid';
+
+import stylesBody from '../components/Post/Body/Body.styles';
+import stylesLayout from '../components/Layout/Layout.styles';
+
+const customViewports = {
+  mobile: {
+    name: 'mobile.all 360px',
+    styles: {
+      width: '360px',
+      height: '640px',
+    },
+  },
+  tablet: {
+    name: 'tablet.all 1024px',
+    styles: {
+      width: '1024px',
+      height: '768px',
+    },
+  },
+  desktopM: {
+    name: 'desktop.m 1360px',
+    styles: {
+      width: '1360px',
+      height: '1000px',
+    },
+  },
+  desktopL: {
+    name: 'desktop.l 1920px',
+    styles: {
+      width: '1920px',
+      height: '1000px',
+    },
+  },
+};
+
+export const parameters = {
+  viewport: { viewports: customViewports },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  docs: {
+    transformSource: (_src, storyContext) => {
+      const { args, kind } = storyContext;
+      return getTransformSource(kind, args);
+    },
+  },
+};
+export const decorators = [
+  (Story) => (
+    <Root>
+      <ThemeProvider theme={defaultTheme}>
+        <Grid>
+          <Fonts preset="blog" />
+          <Story />
+          <Global styles={stylesLayout} />
+          <Global styles={(theme) => stylesBody({ theme })} />
+          {/* Для переопределения стилей блога, иначе код code source в одну строку */}
+          <Global styles={css`code {
+            white-space: pre;
+          }`}/>
+        </Grid>
+      </ThemeProvider>
+    </Root>
+  ),
+];

.storybook/utils/getTransformSource.js

@@ -0,0 +1,49 @@
+import prettier from 'prettier';
+import parserMdx from 'prettier/parser-markdown';
+import parserBabel from 'prettier/parser-babel';
+
+import { getLattices } from '../../stories/utils/getLattices';
+import { getStringAttributes } from '../../stories/utils/getStringAttributes';
+
+export const getSource = (kind, args) => {
+  if (kind === 'Heading') {
+    const { text, headingLevel } = args;
+
+    return `${getLattices(headingLevel)} ${text}`;
+  }
+
+  if (kind === 'Img' || kind === 'Separator') {
+    return `<${kind} ${getStringAttributes(args)}/>`;
+  }
+
+  if (kind === 'Note' || kind === 'Subtitle') {
+    const { contentMdx } = args;
+
+    return `<${kind}>${contentMdx}</${kind}>`;
+  }
+
+  if (
+    kind === 'Caption' ||
+    kind === 'ParagraphWithImage' ||
+    kind === 'Quote' ||
+    kind === 'Table'
+  ) {
+    const { contentMdx, ...rest } = args;
+
+    return `<${kind} ${getStringAttributes(rest)}>${contentMdx}</${kind}>`;
+  }
+
+  if (kind === 'Video') {
+    const { content, ...rest } = args || {};
+
+    return content
+      ? `<Video ${getStringAttributes(rest)}>${content}</Video>`
+      : `<Video ${getStringAttributes(rest)} />`;
+  }
+};
+
+export const getTransformSource = (kind, args) =>
+  prettier.format(getSource(kind, args), {
+    parser: 'mdx',
+    plugins: [parserMdx, parserBabel],
+  });

.storybook/webpack.config.js

@@ -0,0 +1,42 @@
+const fs = require('fs');
+const path = require('path');
+
+function getPackageDir(filepath) {
+    let currDir = path.dirname(require.resolve(filepath));
+    while (true) {
+        if (fs.existsSync(path.join(currDir, 'package.json'))) {
+            return currDir;
+        }
+        const { dir, root } = path.parse(currDir);
+        if (dir === root) {
+            throw new Error(`Could not find package.json in the parent directories starting from ${filepath}.`);
+        }
+        currDir = dir;
+    }
+}
+
+module.exports = async ({ config, mode }) => {
+  if (mode === 'PRODUCTION' && process.env.PUBLIC_PATH) {
+    config.output.publicPath = process.env.PUBLIC_PATH
+  }
+
+  /**
+   * Map Emotion 10 libraries to Emotion 11 libraries.
+   *
+   * Otherwise Storybook fails to compile with "Module not found: Error: Can't resolve '@emotion/styled/base'", etc.
+   * It wasn't necessary to do this until we imported React component using "@emotion/styled".
+   * This issue is probably caused because Storybook uses Emotion 10 while we have Emotion 11 used by the Next.js app.
+   *
+   * @see https://github.com/storybookjs/storybook/issues/13277#issuecomment-751747964
+   * @see https://github.com/storybookjs/storybook/issues/13277#issuecomment-765525245
+   */
+
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    "@emotion/core": getPackageDir("@emotion/react"),
+    "@emotion/styled": getPackageDir("@emotion/styled"),
+    "emotion-theming": getPackageDir("@emotion/react"),
+  }
+
+  return config
+}

_posts/news512/news-130.md

@@ -7,10 +7,6 @@ tag: 'news'
 author: 'Ислам Виндижев'
 ---
 
-<Note>
-  [RSS подкаста](https://radio.csssr.com/rss/news512.rss), [Apple Podcasts](https://podcasts.apple.com/us/podcast/id1370045815), [Google Podcasts](https://podcasts.google.com/?feed=aHR0cHM6Ly9yYWRpby5jc3Nzci5jb20vcnNzL25ld3M1MTIucnNz&ep=14), [SoundCloud](https://soundcloud.com/csssr/sets/512-news), [Я.Музыка](https://music.yandex.ru/album/7040324/track/54795992)
-</Note>
-
 <ParagraphWithImage imageName="manWithLaptop" imageSide="right">
   ### Интересные публикации
 

_posts/news512/news-131.md

@@ -7,10 +7,6 @@ tag: 'news'
 author: 'Ислам Виндижев'
 ---
 
-<Note>
-  [RSS подкаста](https://radio.csssr.com/rss/news512.rss), [Apple Podcasts](https://podcasts.apple.com/us/podcast/id1370045815), [Google Podcasts](https://podcasts.google.com/?feed=aHR0cHM6Ly9yYWRpby5jc3Nzci5jb20vcnNzL25ld3M1MTIucnNz&ep=14), [SoundCloud](https://soundcloud.com/csssr/sets/512-news), [Я.Музыка](https://music.yandex.ru/album/7040324/track/54795992)
-</Note>
-
 <ParagraphWithImage imageName="manWithLaptop" imageSide="right">
   ### Интересные публикации