feat(СhangelogDialog): make date and description optional, add date f…

…ormat (#65)
gravity-ui · Mar 19, 2024 · 261f7ca · 261f7ca
1 parent d97305f
commit 261f7ca
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 22 deletions.
diff --git a/.storybook/decorators/withLang.tsx b/.storybook/decorators/withLang.tsx
@@ -1,11 +1,20 @@
 import React from 'react';
 
+import {settings} from '@gravity-ui/date-utils';
 import {configure} from '@gravity-ui/uikit';
 import type {Decorator} from '@storybook/react';
 
 export const withLang: Decorator = (Story, context) => {
     const lang = context.globals.lang;
     configure({lang});
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+        (async () => {
+            await settings.loadLocale(lang);
+            settings.setLocale(lang);
+        })();
+    }, [lang]);
+
     return <Story key={lang} {...context} />;
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
+    "@gravity-ui/date-utils": "^2.1.0",
     "@gravity-ui/i18n": "^1.2.0",
     "@gravity-ui/icons": "^2.8.1",
     "lodash": "^4.17.21",
@@ -56,12 +57,12 @@
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^6.0.0",
-    "@storybook/addons": "^7.6.12",
+    "@gravity-ui/uikit": "^6.3.0",
     "@storybook/addon-actions": "^7.6.12",
     "@storybook/addon-docs": "^7.6.12",
     "@storybook/addon-essentials": "^7.6.12",
     "@storybook/addon-viewport": "7.6.12",
+    "@storybook/addons": "^7.6.12",
     "@storybook/api": "^7.6.12",
     "@storybook/cli": "^7.6.12",
     "@storybook/client-api": "^7.6.12",

diff --git a/src/components/ChangelogDialog/README.md b/src/components/ChangelogDialog/README.md
@@ -19,11 +19,11 @@ Component for displaying the changelog. It looks like a list of versions in a mo
 
 | Field       | Type        | Required | Default | Description                 |
 | ----------- | ----------- | -------- | ------- | --------------------------- |
-| date        | `String`    | ✓        |         | Version release date        |
+| date        | `String`    |          |         | Version release date        |
 | isNew       | `Boolean`   |          |         | If `true`, show "New" label |
 | title       | `String`    | ✓        |         | Version title               |
 | image       | `ImageData` |          |         | Version image info          |
-| description | `String`    | ✓        |         | Version description         |
+| description | `ReactNode` |          |         | Version description         |
 | storyId     | `String`    |          |         | Version related story       |
 
 ### ImageData object

diff --git a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
@@ -19,7 +19,7 @@ export default {
 
 const items: ChangelogItem[] = [
     {
-        date: '03 Jul 2022',
+        date: '2022-07-03',
         isNew: true,
         title: 'New navigation',
         image: {
@@ -33,21 +33,21 @@ const items: ChangelogItem[] = [
         link: 'https://github.com/gravity-ui/uikit',
     },
     {
-        date: '23 Jun 2022',
+        date: '2022-06-23',
         isNew: true,
         title: 'New components',
         description:
             'At the top of the panel is the service navigation for each service. Below are common navigation elements: a component for switching between accounts and organizations, settings, help center, search, notifications, favorites.',
         link: 'https://github.com/gravity-ui/uikit',
     },
     {
-        date: '15 Jun 2022',
+        date: '2022-06-15',
         title: 'Dark theme is now available',
         description:
             'At the top of the panel is the service navigation for each service. Below are common navigation elements: a component for switching between accounts and organizations, settings, help center, search, notifications, favorites.',
     },
     {
-        date: '12 Jun 2022',
+        date: '2022-05-12',
         title: 'Minor fixes',
         image: {
             src: 'https://storage.yandexcloud.net/uikit-storybook-assets/changelog-dialog-picture-2.png',
@@ -58,7 +58,7 @@ const items: ChangelogItem[] = [
         storyId: 'someStoryId2',
     },
     {
-        date: '10 Jun 2022',
+        date: '2022-05',
         title: 'New features',
         image: {
             src: 'broken-url',
@@ -70,7 +70,7 @@ const items: ChangelogItem[] = [
         link: 'https://github.com/gravity-ui/uikit',
     },
     {
-        date: '10 May 2022',
+        date: '2022',
         title: 'Fix basis components behavior',
         description:
             'At the top of the panel is the service navigation for each service. Below are common navigation elements: a component for switching between accounts and organizations, settings, help center, search, notifications, favorites.',

diff --git a/src/components/ChangelogDialog/components/Item/Item.tsx b/src/components/ChangelogDialog/components/Item/Item.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
+import {dateTimeParse} from '@gravity-ui/date-utils';
 import {CirclePlay} from '@gravity-ui/icons';
-import {Button, Icon, Label} from '@gravity-ui/uikit';
+import {Button, Icon, Label, getConfig} from '@gravity-ui/uikit';
 
 import {block} from '../../../utils/cn';
 import {i18n} from '../../i18n';
@@ -19,6 +20,19 @@ export interface ItemProps {
     onLinkClick?: (link: string) => void;
 }
 
+const formatLangDisplay = {
+    'YYYY-MM-DD': {
+        en: 'D MMMM YYYY',
+    },
+    'YYYY-MM': {
+        en: 'MMMM YYYY',
+    },
+    YYYY: {
+        ru: 'YYYY год',
+        en: 'YYYY',
+    },
+};
+
 export function Item({className, data, onStoryClick, onLinkClick}: ItemProps) {
     const handleLinkClick = React.useCallback(() => {
         if (onLinkClick && data.link) {
@@ -32,10 +46,28 @@ export function Item({className, data, onStoryClick, onLinkClick}: ItemProps) {
         }
     }, [data.storyId, onStoryClick]);
 
+    const formattedDate = React.useMemo(() => {
+        let value;
+        if (!data.date) return value;
+
+        const {lang} = getConfig();
+        Object.keys(formatLangDisplay).some((format) => {
+            const langFormat = formatLangDisplay[format as keyof typeof formatLangDisplay];
+            const dt = dateTimeParse(data.date, {format});
+            if (dt?.isValid()) {
+                value = dt.format(langFormat[lang as keyof typeof langFormat] || langFormat.en);
+                return true;
+            }
+            return false;
+        });
+
+        return value;
+    }, [data.date]);
+
     return (
         <article className={b(null, className)}>
             <div className={b('meta')}>
-                <div className={b('date')}>{data.date}</div>
+                {formattedDate ? <div className={b('date')}>{formattedDate}</div> : null}
                 {data.isNew ? (
                     <Label className={b('label-new')} theme="info">
                         {i18n('label_new')}

diff --git a/src/components/ChangelogDialog/types.ts b/src/components/ChangelogDialog/types.ts
@@ -7,11 +7,11 @@ interface ImageData {
 }
 
 export interface ChangelogItem {
-    date: string;
+    date?: string;
     isNew?: boolean;
     title: string;
     image?: ImageData;
-    description: React.ReactNode;
+    description?: React.ReactNode;
     storyId?: string;
     link?: string;
 }