test: add story for chromatic screenshot of datepicker i18n in default size and compact size

packages/semi-ui/locale/_story/locale.stories.jsx

@@ -1,11 +1,26 @@
 import React from 'react';
 import { useState, useMemo } from 'react';
 import {
-  Pagination,
-  Cascader,
-  LocaleProvider,
-  ConfigProvider,
-  Modal, Button, Select, DatePicker, TreeSelect, Table, TimePicker, List, Calendar, Typography, Transfer, ImagePreview, Image, Form, Nav
+    Pagination,
+    Cascader,
+    LocaleProvider,
+    ConfigProvider,
+    Space,
+    Modal,
+    Button,
+    Select,
+    DatePicker,
+    TreeSelect,
+    Table,
+    TimePicker,
+    List,
+    Calendar,
+    Typography,
+    Transfer,
+    ImagePreview,
+    Image,
+    Form,
+    Nav,
 } from '../../index';
 
 import zh_CN from '@douyinfe/semi-ui/locale/source/zh_CN';
@@ -32,12 +47,11 @@ import fr from '@douyinfe/semi-ui/locale/source/fr';
 import ro from '@douyinfe/semi-ui/locale/source/ro';
 import { IconUser, IconSemiLogo, IconStar } from '@douyinfe/semi-icons';
 
-
 const { Option } = Select;
 
 export default {
-  title: 'LocaleProvider'
-}
+    title: 'LocaleProvider',
+};
 // -√ Pagination
 // -√ Modal
 // -× DatePicker
@@ -49,45 +63,45 @@ export default {
 const TableDemo = () => {};
 
 const CascaderDemo = () => {
-  const treeData = [
-    {
-      label: '亚洲',
-      value: 'yazhou',
-      children: [
+    const treeData = [
         {
-          label: '中国',
-          value: 'zhongguo',
-          children: [
-            {
-              label: '北京',
-              value: 'beijing',
-            },
-            {
-              label: '上海',
-              value: 'shanghai',
-            },
-          ],
-        },
-        {
-          label: '日本',
-          value: 'riben',
-          children: [
-            {
-              label: '大阪',
-              value: 'daban',
-            },
-          ],
+            label: '亚洲',
+            value: 'yazhou',
+            children: [
+                {
+                    label: '中国',
+                    value: 'zhongguo',
+                    children: [
+                        {
+                            label: '北京',
+                            value: 'beijing',
+                        },
+                        {
+                            label: '上海',
+                            value: 'shanghai',
+                        },
+                    ],
+                },
+                {
+                    label: '日本',
+                    value: 'riben',
+                    children: [
+                        {
+                            label: '大阪',
+                            value: 'daban',
+                        },
+                    ],
+                },
+            ],
         },
-      ],
-    },
-  ];
-  return <Cascader style={{ width: 300, margin: 10 }} treeData={treeData} filterTreeNode />;
+    ];
+    return <Cascader style={{ width: 300, margin: 10 }} treeData={treeData} filterTreeNode />;
 };
 
 const I18nComponent = () => {
-  const [modalVisible, setModalVisible] = useState(false);
-  const style = { margin: 10 };
-  const presets = [
+    const [modalVisible, setModalVisible] = useState(false);
+    const style = { margin: 10 };
+    const presets = [
         {
             text: 'Today',
             start: new Date(),
@@ -99,114 +113,194 @@ const I18nComponent = () => {
             end: new Date(new Date().valueOf() + 1000 * 3600 * 24),
         },
     ];
+    const columns = useMemo(() => [
+        {
+            title: 'Name',
+            width: 250,
+            dataIndex: 'name',
+        },
+        {
+            title: 'Age',
+            width: 150,
+            dataIndex: 'age',
+        },
+        {
+            title: 'Address',
+            dataIndex: 'address',
+        },
+    ]);
+    const dataSource = useMemo(() => {
+        const data = [];
+        for (let i = 0; i < 1; i++) {
+            data.push({
+                key: '' + i,
+                name: `Bytedance ${i}`,
+                age: 32,
+                address: `Beijing, Haidian. Zhichun Road ${i}`,
+            });
+        }
+        return data;
+    });
 
-  return (
-    <>
-      <Pagination total={100} showTotal showSizeChanger style={style} />
-      <div style={style}>
-        <Button onClick={() => setModalVisible(true)}>Show Modal</Button>
-      </div>
-      <div style={style}>
-        <Select filter style={{ width: '180px' }}>
-          <Option value="abc">abc</Option>
-          <Option value="vigo" disabled>
-            vigo
-          </Option>
-          <Option value="hotsoon">hotsoon</Option>
-        </Select>
-        <CascaderDemo />
-      </div>
-      <Modal
-        title="Modal"
-        visible={modalVisible}
-        onOk={() => setModalVisible(false)}
-        onCancel={() => setModalVisible(false)}
-      >
-        <p>This is the content of a basic modal.</p>
-        <p>More content...</p>
-      </Modal>
-      <DatePicker style={{ ...style, width: 200 }} />
-      <DatePicker style={{ ...style, width: 250 }} type="dateTime" presets={presets} presetPosition="left"/>
-      <DatePicker style={{ ...style, width: 250 }} type="dateRange" />
-      <DatePicker style={{ ...style, width: 400 }} type="dateTimeRange" />
-      <TimePicker style={style} />
-      <TimePicker use12Hours style={style} />
-      <br />
-      <br />
-    </>
-  );
+
+
+    return (
+        <>
+            <Pagination total={100} showTotal showSizeChanger style={style} />
+            <Table columns={columns} dataSource={dataSource} scroll={{ y: 320 }} />
+
+            <div style={style}>
+                <Button onClick={() => setModalVisible(true)}>Show Modal</Button>
+            </div>
+            <div style={style}>
+                <Select filter style={{ width: '180px' }}>
+                    <Option value="abc">abc</Option>
+                    <Option value="vigo" disabled>
+                        vigo
+                    </Option>
+                    <Option value="hotsoon">hotsoon</Option>
+                </Select>
+                <CascaderDemo />
+            </div>
+            <Modal
+                title="Modal"
+                visible={modalVisible}
+                onOk={() => setModalVisible(false)}
+                onCancel={() => setModalVisible(false)}
+            >
+                <p>This is the content of a basic modal.</p>
+                <p>More content...</p>
+            </Modal>
+            <div>
+              <DatePicker style={{ ...style, width: 200 }} open />
+              <DatePicker style={{ ...style,marginLeft:120, width: 250 }} open type="dateTime" presets={presets} presetPosition="left" />
+              {/* <DatePicker style={{ ...style, width: 250 }} type="dateRange" /> */}
+              <DatePicker style={{ ...style, marginLeft:240, width: 400 }} open type="dateTimeRange" />
+            </div>
+            <div style={{ marginTop: 400 }}>
+              <DatePicker style={{ ...style, width: 200 }} open autoAdjustOverflow={false} position='bottomLeft' density='compact' />
+              <DatePicker style={{ ...style,marginLeft:120, width: 250 }} open type="dateTime" presets={presets} presetPosition="left" autoAdjustOverflow={false} position='bottomLeft' density='compact' />
+              {/* <DatePicker style={{ ...style, width: 250 }} type="dateRange" /> */}
+              <DatePicker style={{ ...style, marginLeft:240, width: 400 }} open type="dateTimeRange" autoAdjustOverflow={false} position='bottomLeft' density='compact' />
+            </div>
+            <br />
+            <br />
+            <div style={{ marginTop: 400 }}>
+              <TimePicker style={style} />
+              <TimePicker use12Hours style={style} />
+            </div>
+            <br />
+            <br />
+        </>
+    );
 };
 
 export const LocaleZhCn = () => (
-  <LocaleProvider locale={zh_CN}>
-    <I18nComponent />
-  </LocaleProvider>
+    <LocaleProvider locale={zh_CN}>
+        <I18nComponent />
+    </LocaleProvider>
 );
 
-LocaleZhCn.story = {
-  name: 'Locale zh_CN',
-};
-
 export const LocaleEnGb = () => (
-  <LocaleProvider locale={en_GB}>
-    <I18nComponent />
-  </LocaleProvider>
+    <LocaleProvider locale={en_GB}>
+        <I18nComponent />
+    </LocaleProvider>
 );
 
-LocaleEnGb.story = {
-  name: 'Locale en-GB',
-};
-
 export const LocaleEnUs = () => (
-  <LocaleProvider locale={en_US}>
-    <I18nComponent />
-  </LocaleProvider>
+    <LocaleProvider locale={en_US}>
+        <I18nComponent />
+    </LocaleProvider>
 );
 
-LocaleEnUs.story = {
-  name: 'Locale en-US',
-};
-
 export const LocaleJaJp = () => (
-  <LocaleProvider locale={ja_JP}>
-    <I18nComponent />
-  </LocaleProvider>
+    <LocaleProvider locale={ja_JP}>
+        <I18nComponent />
+    </LocaleProvider>
 );
 
-LocaleJaJp.story = {
-  name: 'Locale ja_JP',
-};
-
 export const LocaleKoKr = () => (
-  <LocaleProvider locale={ko_KR}>
-    <I18nComponent />
-  </LocaleProvider>
+    <LocaleProvider locale={ko_KR}>
+        <I18nComponent />
+    </LocaleProvider>
 );
 
-LocaleKoKr.story = {
-  name: 'Locale ko_KR',
-};
+export const LocaleAr = () => (
+    <LocaleProvider locale={ar}>
+        <I18nComponent />
+    </LocaleProvider>
+);
 
+export const LocaleViVn = () => (
+    <LocaleProvider locale={vi_VN}>
+        <I18nComponent />
+    </LocaleProvider>
+);
 export const LocaleRuRu = () => (
-  <LocaleProvider locale={ru_RU}>
-    <I18nComponent />
-  </LocaleProvider>
+    <LocaleProvider locale={ru_RU}>
+        <I18nComponent />
+    </LocaleProvider>
 );
 
-LocaleRuRu.story = {
-  name: 'Locale ru_RU',
-};
+export const LocaleIdID = () => (
+    <LocaleProvider locale={id_ID}>
+        <I18nComponent />
+    </LocaleProvider>
+);
 
-export const LocaleViVn = () => (
-  <LocaleProvider locale={vi_VN}>
-    <I18nComponent />
-  </LocaleProvider>
+export const LocaleMsMY = () => (
+    <LocaleProvider locale={ms_MY}>
+        <I18nComponent />
+    </LocaleProvider>
 );
 
-LocaleViVn.story = {
-  name: 'Locale vi_VN',
-};
+export const LocaleThTH = () => (
+    <LocaleProvider locale={th_TH}>
+        <I18nComponent />
+    </LocaleProvider>
+);
+
+export const LocaleTrTR = () => (
+    <LocaleProvider locale={tr_TR}>
+        <I18nComponent />
+    </LocaleProvider>
+);
 
+export const LocalePtBR = () => (
+    <LocaleProvider locale={pt_BR}>
+        <I18nComponent />
+    </LocaleProvider>
+);
+
+export const LocaleES = () => (
+    <LocaleProvider locale={es}>
+        <I18nComponent />
+    </LocaleProvider>
+);
+
+export const LocaleDe = () => (
+    <LocaleProvider locale={de}>
+        <I18nComponent />
+    </LocaleProvider>
+);
+
+export const LocaleIt = () => (
+    <LocaleProvider locale={it}>
+        <I18nComponent />
+    </LocaleProvider>
+);
+
+export const LocaleFr = () => (
+    <LocaleProvider locale={fr}>
+        <I18nComponent />
+    </LocaleProvider>
+);
+
+export const LocaleRo = () => (
+    <LocaleProvider locale={ro}>
+        <I18nComponent />
+    </LocaleProvider>
+);
 class I18nDemo extends React.Component {
     constructor(props) {
         super(props);
@@ -219,27 +313,27 @@ class I18nDemo extends React.Component {
 
     onLanguageChange(code) {
         let language = {
-            'zh_CN': zh_CN,
-            'en_GB': en_GB,
-            'ko_KR': ko_KR,
-            'ja_JP': ja_JP,
-            'ar': ar,
-            'vi_VN': vi_VN,
-            'ru_RU': ru_RU,
-            'id_ID': id_ID,
-            'ms_MY': ms_MY,
-            'th_TH': th_TH,
-            'tr_TR': tr_TR,
-            'pt_BR': pt_BR,
-            'zh_TW': zh_TW,
-            'es': es,
-            'sv_SE': sv_SE,
-            'pl_PL': pl_PL,
-            'nl_NL': nl_NL,
+            zh_CN: zh_CN,
+            en_GB: en_GB,
+            ko_KR: ko_KR,
+            ja_JP: ja_JP,
+            ar: ar,
+            vi_VN: vi_VN,
+            ru_RU: ru_RU,
+            id_ID: id_ID,
+            ms_MY: ms_MY,
+            th_TH: th_TH,
+            tr_TR: tr_TR,
+            pt_BR: pt_BR,
+            zh_TW: zh_TW,
+            es: es,
+            sv_SE: sv_SE,
+            pl_PL: pl_PL,
+            nl_NL: nl_NL,
             de,
             it,
             fr,
-            ro
+            ro,
         };
         this.setState({ locale: language[code], localeCode: code });
     }
@@ -265,10 +359,10 @@ class I18nDemo extends React.Component {
                         label: 'Japan',
                         value: 'japan',
                         key: '1-1',
-                        children: [ { label: 'Osaka', value: 'osaka', key: '1-1-0' } ]
+                        children: [{ label: 'Osaka', value: 'osaka', key: '1-1-0' }],
                     },
-                ]
-            }
+                ],
+            },
         ];
         const I18nComponent = () => {
             const [modalVisible, setModalVisible] = useState(false);
@@ -310,12 +404,15 @@ class I18nDemo extends React.Component {
                     };
                 });
             });
-            const srcList = useMemo(() => ([
-                "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg",
-                "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/sky.jpg",
-                "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/greenleaf.jpg",
-                "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/colorful.jpg",
-            ]), []);
+            const srcList = useMemo(
+                () => [
+                    'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg',
+                    'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/sky.jpg',
+                    'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/greenleaf.jpg',
+                    'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/colorful.jpg',
+                ],
+                []
+            );
             const style = { margin: 10 };
             return (
                 <>
@@ -324,9 +421,7 @@ class I18nDemo extends React.Component {
                     <h5>Modal</h5>
 
                     <div style={style}>
-                        <Button onClick={() => setModalVisible(true)}>
-                            Show Modal
-                        </Button>
+                        <Button onClick={() => setModalVisible(true)}>Show Modal</Button>
                         <Modal
                             title="Modal"
                             visible={modalVisible}
@@ -340,25 +435,29 @@ class I18nDemo extends React.Component {
                     <h5>Select & Cascader</h5>
                     <div style={style}>
                         <Select filter style={{ width: '180px' }}>
-                            <Select.Option value='abc'>abc</Select.Option>
-                            <Select.Option value='vigo' disabled>vigo</Select.Option>
-                            <Select.Option value='hotsoon'>hotsoon</Select.Option>
+                            <Select.Option value="abc">abc</Select.Option>
+                            <Select.Option value="vigo" disabled>
+                                vigo
+                            </Select.Option>
+                            <Select.Option value="hotsoon">hotsoon</Select.Option>
                         </Select>
                         <Cascader
                             style={{ width: 300, margin: 10 }}
                             treeData={treeData}
                             filterTreeNode
-                            insetLabel='Cascader'
+                            insetLabel="Cascader"
                         />
                     </div>
                     <h5>DatePicker</h5>
                     <DatePicker style={{ ...style, width: 250 }} />
-                    <DatePicker style={{ ...style, width: 300 }} type='dateTime' />
-                    <DatePicker style={{ ...style, width: 300 }} type='dateRange' />
-                    <DatePicker style={{ ...style, width: 450 }} type='dateTimeRange' />
+                    <DatePicker style={{ ...style, width: 300 }} type="dateTime" />
+                    <DatePicker style={{ ...style, width: 300 }} type="dateRange" />
+                    <DatePicker style={{ ...style, width: 450 }} type="dateTimeRange" />
                     <h5>TimePicker</h5>
                     <TimePicker style={style} />
-                    <TimePicker use12Hours style={style} /><br/><br/>
+                    <TimePicker use12Hours style={style} />
+                    <br />
+                    <br />
                     <h5>TreeSelect</h5>
                     <TreeSelect
                         style={{ ...style, width: 300 }}
@@ -371,37 +470,39 @@ class I18nDemo extends React.Component {
                     <h5>Table - Empty</h5>
                     <Table columns={columns} dataSource={[]} scroll={{ y: 320 }} />
                     <h5>List - Empty</h5>
-                    <List header={<div>List</div>} dataSource={[]}/>
+                    <List header={<div>List</div>} dataSource={[]} />
                     <h5>Calendar</h5>
-                    <Calendar mode='month' displayValue={new Date('2024-02-01')} />
+                    <Calendar mode="month" displayValue={new Date('2024-02-01')} />
                     <h5>Typography - Copyable</h5>
                     <Typography.Paragraph copyable>Click to copy text.</Typography.Paragraph>
                     <h5>Typography - Collapsible</h5>
-                    <Typography.Paragraph ellipsis={{ rows: 3, expandable: true, collapsible: true }} style={{ width: 300 }}>
-                        支持展开和折叠：Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
+                    <Typography.Paragraph
+                        ellipsis={{ rows: 3, expandable: true, collapsible: true }}
+                        style={{ width: 300 }}
+                    >
+                        支持展开和折叠：Semi Design 是由抖音前端团队与 UED
+                        团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
+                        Web 应用。
                     </Typography.Paragraph>
                     <h5>Transfer</h5>
-                    <Transfer
-                        style={{ width: 568, height: 416 }}
-                        dataSource={transferData}
-                    />
+                    <Transfer style={{ width: 568, height: 416 }} dataSource={transferData} />
                     <h5>Image</h5>
                     <ImagePreview showTooltip>
                         {srcList.map((src, index) => {
                             return (
-                                <Image 
-                                    key={index} 
-                                    src={src} 
-                                    width={200} 
-                                    alt={`lamp${index + 1}`} 
+                                <Image
+                                    key={index}
+                                    src={src}
+                                    width={200}
+                                    alt={`lamp${index + 1}`}
                                     style={{ marginRight: 5 }}
                                 />
                             );
                         })}
                     </ImagePreview>
                     <h5>Form</h5>
-                    <Form layout='horizontal' onValueChange={values=>console.log(values)}>
-                        <Form.Input field='UserName' label={{ text: '角色', optional: true }} style={{ width: 200 }} />
+                    <Form layout="horizontal" onValueChange={values => console.log(values)}>
+                        <Form.Input field="UserName" label={{ text: '角色', optional: true }} style={{ width: 200 }} />
                     </Form>
                     <h5>Navigation</h5>
                     <Nav
@@ -412,7 +513,7 @@ class I18nDemo extends React.Component {
                         ]}
                         header={{
                             logo: <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />,
-                            text: 'Semi 数据后台'
+                            text: 'Semi 数据后台',
                         }}
                         footer={{
                             collapseButton: true,
@@ -424,25 +525,30 @@ class I18nDemo extends React.Component {
         return (
             <>
                 <div style={{ borderBottom: '1px solid var(--semi-color-border)', paddingBottom: 20 }}>
-                    <Select onChange={this.onLanguageChange} insetLabel='切换语言' style={{ width: 250 }} defaultValue='zh_CN'>
-                        <Select.Option value='zh_CN'>简体中文</Select.Option>
-                        <Select.Option value='en_GB'>英语（英）</Select.Option>
-                        <Select.Option value='ja_JP'>日语</Select.Option>
-                        <Select.Option value='ko_KR'>韩语</Select.Option>
-                        <Select.Option value='ar'>阿拉伯语</Select.Option>
-                        <Select.Option value='vi_VN'>越南语</Select.Option>
-                        <Select.Option value='ru_RU'>俄罗斯语</Select.Option>
-                        <Select.Option value='id_ID'>印尼语</Select.Option>
-                        <Select.Option value='ms_MY'>马来语</Select.Option>
-                        <Select.Option value='th_TH'>泰语</Select.Option>
-                        <Select.Option value='tr_TR'>土耳其语</Select.Option>
-                        <Select.Option value='pt_BR'>葡萄牙语（巴西）</Select.Option>
-                        <Select.Option value='zh_TW'>繁体中文</Select.Option>
-                        <Select.Option value='es'>西班牙语</Select.Option>
-                        <Select.Option value='de'>德语</Select.Option>
-                        <Select.Option value='it'>意大利语</Select.Option>
-                        <Select.Option value='fr'>法语</Select.Option>
-                        <Select.Option value='ro'>罗马尼亚语</Select.Option>
+                    <Select
+                        onChange={this.onLanguageChange}
+                        insetLabel="切换语言"
+                        style={{ width: 250 }}
+                        defaultValue="zh_CN"
+                    >
+                        <Select.Option value="zh_CN">简体中文</Select.Option>
+                        <Select.Option value="en_GB">英语（英）</Select.Option>
+                        <Select.Option value="ja_JP">日语</Select.Option>
+                        <Select.Option value="ko_KR">韩语</Select.Option>
+                        <Select.Option value="ar">阿拉伯语</Select.Option>
+                        <Select.Option value="vi_VN">越南语</Select.Option>
+                        <Select.Option value="ru_RU">俄罗斯语</Select.Option>
+                        <Select.Option value="id_ID">印尼语</Select.Option>
+                        <Select.Option value="ms_MY">马来语</Select.Option>
+                        <Select.Option value="th_TH">泰语</Select.Option>
+                        <Select.Option value="tr_TR">土耳其语</Select.Option>
+                        <Select.Option value="pt_BR">葡萄牙语（巴西）</Select.Option>
+                        <Select.Option value="zh_TW">繁体中文</Select.Option>
+                        <Select.Option value="es">西班牙语</Select.Option>
+                        <Select.Option value="de">德语</Select.Option>
+                        <Select.Option value="it">意大利语</Select.Option>
+                        <Select.Option value="fr">法语</Select.Option>
+                        <Select.Option value="ro">罗马尼亚语</Select.Option>
                     </Select>
                 </div>
                 <LocaleProvider locale={locale}>