chore: museum (part 2) (#950)

.storybook/components/icons/MuseumIcon.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MuseumIcon = () => (
+    <svg
+        width='16'
+        height='16'
+        viewBox='0 0 16 16'
+        fill='currentColor'
+        xmlns='http://www.w3.org/2000/svg'
+        className='sidebar-icon'
+    >
+        <path
+            fillRule='evenodd'
+            clipRule='evenodd'
+            d='M8.39783 1.17218C8.1443 1.0624 7.85664 1.0624 7.60311 1.17218L2 3.5984V4.00012H14V3.59799L8.39783 1.17218ZM3 6.00012V11.0001H5V6.00012C5.27614 6.00012 5.5 5.77626 5.5 5.50012V5.00012H5H3H2.5V5.50012C2.5 5.77626 2.72386 6.00012 3 6.00012ZM2.5 12.0001C2.22386 12.0001 2 12.224 2 12.5001V13.5001C2 13.7763 2.22386 14.0001 2.5 14.0001H13.5C13.7761 14.0001 14 13.7763 14 13.5001V12.5001C14 12.224 13.7761 12.0001 13.5 12.0001H2.5ZM7 11.0001V6.00012C6.72386 6.00012 6.5 5.77626 6.5 5.50012V5.00012H7H9H9.5V5.50012C9.5 5.77626 9.27614 6.00012 9 6.00012V11.0001H7ZM11 6.00012V11.0001H13V6.00012C13.2761 6.00012 13.5 5.77626 13.5 5.50012V5.00012H13H11H10.5V5.50012C10.5 5.77626 10.7239 6.00012 11 6.00012Z'
+        />
+    </svg>
+);

.storybook/pages/museum/index.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from 'react';
+import { Typography } from '@alfalab/core-components-typography';
+import { useMatchMedia } from '@alfalab/core-components-mq';
+import { Gap } from '@alfalab/core-components-gap';
+import { Link } from '@alfalab/core-components-link';
+import { Divider } from '@alfalab/core-components-divider';
+
+export const Museum = () => {
+    const [versions, setVersions] = useState<string[]>([]);
+    const [isMobile] = useMatchMedia('--mobile');
+
+    useEffect(() => {
+        const ac = new AbortController();
+        const { signal } = ac;
+
+        fetch('https://core-ds.github.io/core-components/master/archive-versions.json', { signal })
+            .then((res) => res.json())
+            .then((res: string[]) => setVersions(res.sort((a, b) => b.localeCompare(a))))
+            .catch((e) => {
+                if (!signal?.aborted) {
+                    console.error(e);
+                }
+            });
+
+        return () => ac.abort('unmount');
+    }, []);
+
+    const Title = isMobile ? Typography.TitleMobile : Typography.Title;
+
+    const renderItem = (version: string, index: number, showSkeleton: boolean) => (
+        <section key={version}>
+            <Gap size={isMobile ? 'xl' : '2xl'} />
+            <Title tag='h2' view='small' font='styrene' showSkeleton={showSkeleton}>
+                {version.slice(1)}
+            </Title>
+            <Gap size='s' />
+            <Typography.Text view='primary-medium' showSkeleton={showSkeleton}>
+                <Link
+                    view='default'
+                    underline={false}
+                    href={`https://core-ds.github.io/core-components/${version}/`}
+                >
+                    Последняя версия
+                </Link>
+                &nbsp;перед обновлением до версии&nbsp;
+                {version
+                    .slice(1)
+                    .split('.')
+                    .map((part, idx) => (idx === 0 ? Number(part) + 1 : 0))
+                    .join('.')}
+            </Typography.Text>
+            {versions.length - 1 !== index ? (
+                <>
+                    <Gap size={isMobile ? 'xl' : '2xl'} />
+                    <Divider />
+                </>
+            ) : null}
+        </section>
+    );
+
+    return (
+        <div className='sb-unstyled'>
+            <Title tag='h1' view='xlarge' font='styrene'>
+                Музей демок
+            </Title>
+
+            <Gap size='s' />
+
+            <Typography.Text view='primary-medium'>
+                Перед каждой мажоркой мы создаём музейную демку для того, чтобы у вас была
+                возможность посмотреть как работал компонент в прошлых версиях core и почитать его
+                описание. Возможно, ваша версия Core уже в музее, тогда такая демка это единственный
+                способ посмотреть актуальную документацию к компоненту.
+            </Typography.Text>
+
+            {versions.length
+                ? versions.map((v, i) => renderItem(v, i, false))
+                : [...Array(10)].map((_, i) => renderItem(`v${i}.0.0`, i, true))}
+        </div>
+    );
+};

.storybook/preview.js

@@ -105,6 +105,7 @@ export const parameters = {
                 'Components overview',
                 'Icons overview',
                 'Changelog',
+                'Museum',
                 'Sandbox',
                 'Components',
                 'Deprecated components',

.storybook/render-label.js

@@ -8,6 +8,7 @@ import { SandboxIcon } from './components/icons/SandboxIcon.jsx';
 import { OverviewIcon } from './components/icons/OverviewIcon.jsx';
 import { ComponentsOverviewIcon } from './components/icons/ComponentsOverviewIcon.jsx';
 import { DiamondsBlankIcon } from './components/icons/DiamondsBlankIcon.jsx';
+import { MuseumIcon } from './components/icons/MuseumIcon.jsx';
 
 const renderIcon = (item) => {
     const { type, name, parent, depth } = item;
@@ -26,6 +27,9 @@ const renderIcon = (item) => {
             if (name === 'Components overview') {
                 return <ComponentsOverviewIcon />;
             }
+            if (name === 'Museum') {
+                return <MuseumIcon />;
+            }
 
             return (
                 <>

docs/museum.stories.mdx

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/addon-docs';
+import { Museum } from 'storybook/pages/museum';
+
+<Meta title='Museum' parameters={{ previewTabs: { canvas: { hidden: true } } }} id='museum' />
+
+<Museum />