@scality/core-ui 0.194.0 → 0.195.0

package/stories/inputlist.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { InputList } from '../src/lib/components/inputlist/InputList.component';
+import { InputList, InputListProps } from '../src/lib/components/inputlist/InputList.component';
 import { Wrapper as StoryWrapper } from './common';
 import { FormSection } from '../src/lib/components/form/Form.component';
 import { Controller, useForm } from 'react-hook-form';
@@ -9,15 +9,27 @@ const meta: Meta<typeof InputList> = {
   tags: ['autodocs'],
   title: 'Components/Inputs/InputList',
   component: InputList,
+  args: {
+    value: [''],
+    size: '1/2',
+  },
+  argTypes: {
+    size: {
+      options: ['1/3', '1/2', '2/3', '1'],
+      control: 'select',
+    },
+  },
 };
 export default meta;
 
+type Story = StoryObj<typeof meta>;
 interface InputListForm {
   firstNames: string[];
   lastNames: string[];
 }
 
-const ExampleList = () => {
+
+const ExampleList = ({ size }: { size?: InputListProps<string>['size'] }) => {
   const { control } = useForm<InputListForm>({
     mode: 'all',
     defaultValues: {
@@ -35,10 +47,11 @@ const ExampleList = () => {
         }}
         render={({ field: { onChange, onBlur, value } }) => (
           <InputList
-            placeholder="First name"
+            placeholder="San Francisco"
             onBlur={onBlur}
             onChange={onChange}
             value={value}
+            size={size}
           />
         )}
         name="firstNames"
@@ -46,12 +59,11 @@ const ExampleList = () => {
     </FormSection>
   );
 };
-type Story = StoryObj<typeof InputList>;
 export const SimpleListOfInputs: Story = {
   name: 'List of inputs',
-  render: () => (
+  render: (args) => (
     <StoryWrapper>
-      <ExampleList />
+      <ExampleList {...args} />
     </StoryWrapper>
   ),
 };

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "exclude": ["src/**/*.test.*", "stories/*", "dist/**/*"],
+  "exclude": ["src/**/*.test.*", "stories/*", "dist/**/*", "src/**/*.spec.*"],
   "compilerOptions": {
     "module": "esnext",
     "declaration": true, // Generate d.ts files

package/dist/components/date/FormattedDateTime.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=FormattedDateTime.spec.d.ts.map

package/dist/components/date/FormattedDateTime.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormattedDateTime.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.spec.tsx"],"names":[],"mappings":""}

package/dist/components/date/FormattedDateTime.spec.js

@@ -1,161 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { render, screen } from '@testing-library/react';
-import { FormattedDateTime } from './FormattedDateTime';
-import userEvent from '@testing-library/user-event';
-describe('FormatttedDateTime', () => {
-    it('should display the date in the expected format', () => {
-        //S
-        render(_jsx(FormattedDateTime, { format: "date", value: new Date('2022-10-01T00:00:00Z') }));
-        //V
-        expect(screen.getByText('2022-10-01')).toBeInTheDocument();
-    });
-    it('should display the date time second in the expected format', () => {
-        //S
-        render(_jsx(FormattedDateTime, { format: "date-time-second", value: new Date('2022-10-01T00:00:00Z') }));
-        //V
-        expect(screen.getByText('2022-10-01 00:00:00')).toBeInTheDocument();
-    });
-    it('should display the date time in the expected format', () => {
-        //S
-        render(_jsx(FormattedDateTime, { format: "date-time", value: new Date('2022-10-01T00:00:00Z') }));
-        //V
-        expect(screen.getByText('2022-10-01 00:00')).toBeInTheDocument();
-    });
-    it('should display the time second in the expected format', () => {
-        //S
-        render(_jsx(FormattedDateTime, { format: "time-second", value: new Date('2022-10-01T00:00:00Z') }));
-        //V
-        expect(screen.getByText('00:00:00')).toBeInTheDocument();
-    });
-    it('should display the time in the expected format', () => {
-        //S
-        render(_jsx(FormattedDateTime, { format: "time", value: new Date('2022-10-01T00:00:00Z') }));
-        //V
-        expect(screen.getByText('00:00')).toBeInTheDocument();
-    });
-    it('should display a relative date with the right format when the date occured few seconds before', async () => {
-        //S
-        const today = new Date('2022-10-10T12:00:00Z');
-        jest.useFakeTimers('modern');
-        jest.setSystemTime(today);
-        render(_jsx(FormattedDateTime, { format: "relative", value: new Date('2022-10-10T11:59:37Z') }));
-        //V
-        expect(screen.getByText('few seconds ago')).toBeInTheDocument();
-        //E
-        await userEvent.hover(screen.getByText('few seconds ago'));
-        //V
-        expect(screen.getByText('2022-10-10 11:59:37')).toBeInTheDocument();
-    });
-    it('should display a relative date with the right format when the date occured 1 minute before', async () => {
-        //S
-        const today = new Date('2022-10-10T12:00:00Z');
-        jest.useFakeTimers('modern');
-        jest.setSystemTime(today);
-        render(_jsx(FormattedDateTime, { format: "relative", value: new Date('2022-10-10T11:59:00Z') }));
-        //V
-        expect(screen.getByText('1 minute ago')).toBeInTheDocument();
-        //E
-        await userEvent.hover(screen.getByText('1 minute ago'));
-        //V
-        expect(screen.getByText('2022-10-10 11:59:00')).toBeInTheDocument();
-    });
-    it('should display a relative date with the right format when the date occured 2 minutes before', async () => {
-        //S
-        const today = new Date('2022-10-10T12:00:00Z');
-        jest.useFakeTimers('modern');
-        jest.setSystemTime(today);
-        render(_jsx(FormattedDateTime, { format: "relative", value: new Date('2022-10-10T11:57:26Z') }));
-        //V
-        expect(screen.getByText('2 minutes ago')).toBeInTheDocument();
-        //E
-        await userEvent.hover(screen.getByText('2 minutes ago'));
-        //V
-        expect(screen.getByText('2022-10-10 11:57:26')).toBeInTheDocument();
-    });
-    it('should display a relative date with the right format when the date occured 1 day before', async () => {
-        //S
-        const today = new Date('2022-10-10T12:00:00Z');
-        jest.useFakeTimers('modern');
-        jest.setSystemTime(today);
-        render(_jsx(FormattedDateTime, { format: "relative", value: new Date('2022-10-09T11:57:26Z') }));
-        //V
-        expect(screen.getByText('1 day ago')).toBeInTheDocument();
-        //E
-        await userEvent.hover(screen.getByText('1 day ago'));
-        //V
-        expect(screen.getByText('2022-10-09 11:57:26')).toBeInTheDocument();
-    });
-    it('should display a relative date with the right format when the date occured 2 days before', async () => {
-        //S
-        const today = new Date('2022-10-10T12:00:00Z');
-        jest.useFakeTimers('modern');
-        jest.setSystemTime(today);
-        render(_jsx(FormattedDateTime, { format: "relative", value: new Date('2022-10-08T11:57:26Z') }));
-        //V
-        expect(screen.getByText('2 days ago')).toBeInTheDocument();
-        //E
-        await userEvent.hover(screen.getByText('2 days ago'));
-        //V
-        expect(screen.getByText('2022-10-08 11:57:26')).toBeInTheDocument();
-    });
-    it('should display a relative date with the right format when the date occured 1 month before', async () => {
-        //S
-        const today = new Date('2022-10-10T12:00:00Z');
-        jest.useFakeTimers('modern');
-        jest.setSystemTime(today);
-        render(_jsx(FormattedDateTime, { format: "relative", value: new Date('2022-09-08T11:57:26Z') }));
-        //V
-        expect(screen.getByText('32 days ago')).toBeInTheDocument();
-        //E
-        await userEvent.hover(screen.getByText('32 days ago'));
-        //V
-        expect(screen.getByText('2022-09-08 11:57:26')).toBeInTheDocument();
-    });
-    it('should display a relative date with the right format when the date occured 2 months before', async () => {
-        //S
-        const today = new Date('2022-10-10T12:00:00Z');
-        jest.useFakeTimers('modern');
-        jest.setSystemTime(today);
-        render(_jsx(FormattedDateTime, { format: "relative", value: new Date('2022-08-08T11:57:26Z') }));
-        //V
-        expect(screen.getByText('63 days ago')).toBeInTheDocument();
-        //E
-        await userEvent.hover(screen.getByText('63 days ago'));
-        //V
-        expect(screen.getByText('2022-08-08 11:57:26')).toBeInTheDocument();
-    });
-    it('should display a relative date with the right format when the date occured 2 months after', async () => {
-        //S
-        const today = new Date('2022-10-10T12:00:00Z');
-        jest.useFakeTimers('modern');
-        jest.setSystemTime(today);
-        render(_jsx(FormattedDateTime, { format: "relative", value: new Date('2022-12-12T11:57:26Z') }));
-        //V
-        expect(screen.getByText('in 63 days')).toBeInTheDocument();
-        //E
-        await userEvent.hover(screen.getByText('in 63 days'));
-        //V
-        expect(screen.getByText('2022-12-12 11:57:26')).toBeInTheDocument();
-    });
-    it('should display the date in the expected format of the xaxis tick in the chart', () => {
-        //S
-        render(_jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute", value: new Date('2022-10-06T18:33:00Z') }));
-        //V
-        expect(screen.getByText('06 Oct 18:33')).toBeInTheDocument();
-    });
-    it('should display the date in the expected format of date in the chart', () => {
-        //S
-        render(_jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute-second", value: new Date('2022-10-06T18:33:00Z') }));
-        //V
-        expect(screen.getByText('06 Oct 18:33:00')).toBeInTheDocument();
-    });
-    it('should display 3 letter month for September date', () => {
-        //S
-        render(_jsxs(_Fragment, { children: [_jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute", value: new Date('2022-09-06T18:33:00Z') }), _jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute-second", value: new Date('2022-09-06T18:33:00Z') }), _jsx(FormattedDateTime, { format: "chart-date", value: new Date('2022-09-06T18:33:00Z') })] }));
-        //V
-        expect(screen.getByText(/06 Sep 18:33/)).toBeInTheDocument();
-        expect(screen.getByText(/06 Sep 18:33:00/)).toBeInTheDocument();
-        expect(screen.getByText(/Tue06Sep/)).toBeInTheDocument();
-        expect(screen.queryByText(/Sept/)).not.toBeInTheDocument();
-    });
-});

package/dist/components/date/dateDiffer.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=dateDiffer.spec.d.ts.map

package/dist/components/date/dateDiffer.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dateDiffer.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/dateDiffer.spec.ts"],"names":[],"mappings":""}

package/dist/components/date/dateDiffer.spec.js

@@ -1,6 +0,0 @@
-import { getDateDaysDiff } from './dateDiffer';
-describe('Date Differ', () => {
-    it('should computes the difference of days between 2 dates', () => {
-        expect(getDateDaysDiff(new Date('2022-10-10T20:10:39Z'), new Date('2022-11-29T15:14:39Z'), 'days')).toBe(49);
-    });
-});