@scality/core-ui 0.115.0

package/dist/components/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/lib/components/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,EAAE;KAAG,GAAG,IAAI,IAAI,GAAG,GAAG;CAQ7C,CAAC;AACF,MAAM,MAAM,IAAI,GACZ,SAAS,GACT,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GAAI,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAG9E,eAAO,MAAM,qBAAqB,WAAW,CAAC;AAC9C,eAAO,MAAM,4BAA4B,YAAY,CAAC;AACtD,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAE5C,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,eAAO,MAAM,sBAAsB,kBAAkB,CAAC;AACtD,eAAO,MAAM,aAAa,gBAAgB,CAAC;AAE3C,eAAO,MAAM,+BAA+B,QAAmB,CAAC;AAChE,eAAO,MAAM,sCAAsC,QAAe,CAAC;AACnE,eAAO,MAAM,6BAA6B,QAAU,CAAC;AAErD,eAAO,MAAM,gCAAgC,QAAU,CAAC;AACxD,eAAO,MAAM,uCAAuC,MAAM,CAAC;AAC3D,eAAO,MAAM,8BAA8B,KAAK,CAAC;AACjD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,CAAC;IAEd,QAAQ,EAAE,MAAM,CAAC;IAEjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,eAAO,MAAM,mBAAmB,EAAE,aAAa,EAmB9C,CAAC;AACF,eAAO,MAAM,UAAU,QAAQ,CAAC;AAChC,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC"}

package/dist/components/constants.js

@@ -0,0 +1,47 @@
+export const LOADER_SIZE = {
+    smaller: 'smaller',
+    small: 'small',
+    base: 'base',
+    large: 'large',
+    larger: 'larger',
+    huge: 'huge',
+    massive: 'massive',
+};
+// metric chart
+// url query
+export const QUERY_LAST_SEVEN_DAYS = 'now-7d';
+export const QUERY_LAST_TWENTY_FOUR_HOURS = 'now-24h';
+export const QUERY_LAST_ONE_HOUR = 'now-1h';
+// label in timespan selector
+export const LAST_SEVEN_DAYS = 'Last 7 days';
+export const LAST_TWENTY_FOUR_HOURS = 'Last 24 hours';
+export const LAST_ONE_HOUR = 'Last 1 hour';
+// sample duration
+export const SAMPLE_DURATION_LAST_SEVEN_DAYS = 7 * 24 * 60 * 60;
+export const SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS = 24 * 60 * 60;
+export const SAMPLE_DURATION_LAST_ONE_HOUR = 60 * 60;
+// sample frequency
+export const SAMPLE_FREQUENCY_LAST_SEVEN_DAYS = 60 * 60;
+export const SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS = 720;
+export const SAMPLE_FREQUENCY_LAST_ONE_HOUR = 30;
+export const queryTimeSpansCodes = [
+    {
+        query: QUERY_LAST_SEVEN_DAYS,
+        label: LAST_SEVEN_DAYS,
+        duration: SAMPLE_DURATION_LAST_SEVEN_DAYS,
+        frequency: SAMPLE_FREQUENCY_LAST_SEVEN_DAYS,
+    },
+    {
+        query: QUERY_LAST_TWENTY_FOUR_HOURS,
+        label: LAST_TWENTY_FOUR_HOURS,
+        duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
+        frequency: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
+    },
+    {
+        query: QUERY_LAST_ONE_HOUR,
+        label: LAST_ONE_HOUR,
+        duration: SAMPLE_DURATION_LAST_ONE_HOUR,
+        frequency: SAMPLE_FREQUENCY_LAST_ONE_HOUR,
+    },
+];
+export const NAN_STRING = 'NAN';

package/dist/components/constrainedtext/Constrainedtext.component.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { $PropertyType } from 'utility-types';
+import { Props as TooltipProps } from '../tooltip/Tooltip.component';
+type Props = {
+    text: string | number | JSX.Element | JSX.Element[];
+    tooltipStyle?: $PropertyType<TooltipProps, 'overlayStyle'>;
+    tooltipPlacement?: $PropertyType<TooltipProps, 'placement'>;
+    lineClamp?: number;
+};
+declare function ConstrainedText({ text, tooltipStyle, tooltipPlacement, lineClamp, }: Props): JSX.Element;
+export { ConstrainedText };
+//# sourceMappingURL=Constrainedtext.component.d.ts.map

package/dist/components/constrainedtext/Constrainedtext.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Constrainedtext.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/constrainedtext/Constrainedtext.component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAErE,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACpD,YAAY,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;IAC3D,gBAAgB,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAiDF,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,SAAa,GACd,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAuBrB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/constrainedtext/Constrainedtext.component.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import styled from 'styled-components';
+import { Tooltip } from '../tooltip/Tooltip.component';
+// for lineClamp cf https://css-tricks.com/almanac/properties/l/line-clamp/
+// it should work on all major navigator, despite the --webkit prefix
+// just in case if we don't use line clamp we can just use the classic way
+const ConstrainedTextContainer = styled.div `
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  ${(props) => props.lineClamp > 1
+    ? `
+  display: -webkit-box;
+  -webkit-line-clamp: ${props.lineClamp};
+  -webkit-box-orient: vertical;
+  overflow-wrap: break-word;
+  `
+    : `overflow-wrap: break-word;
+      white-space: nowrap;`}
+}
+
+;
+`;
+const BlockTooltip = styled.div `
+  width: stretch;
+  & > .sc-tooltip {
+    display: block;
+  }
+`;
+function isEllipsisActive(element) {
+    return (element &&
+        (element.offsetWidth < element.scrollWidth ||
+            element.offsetHeight < element.scrollHeight));
+}
+function getConstrainedTextContainer(constrainedTextRef, lineClamp, text) {
+    return (_jsx(ConstrainedTextContainer, { ref: constrainedTextRef, className: "sc-constrainedtext", lineClamp: lineClamp, children: text }));
+}
+function ConstrainedText({ text, tooltipStyle, tooltipPlacement, lineClamp = 1, }) {
+    const [displayToolTip, setDisplayToolTip] = useState(false);
+    const constrainedTextRef = useCallback((element) => {
+        element && text && setDisplayToolTip(isEllipsisActive(element));
+    }, [text]);
+    return (_jsx(BlockTooltip, { children: displayToolTip ? (_jsx(Tooltip, { overlay: text, overlayStyle: tooltipStyle, placement: tooltipPlacement, children: getConstrainedTextContainer(constrainedTextRef, lineClamp, text) })) : (getConstrainedTextContainer(constrainedTextRef, lineClamp, text)) }));
+}
+export { ConstrainedText };

package/dist/components/coreuithemeprovider/CoreUiThemeProvider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CoreUITheme } from '../../style/theme';
+type Props = {
+    theme: CoreUITheme;
+    children: React.ReactNode;
+};
+declare const CoreUiThemeProvider: ({ theme, children }: Props) => JSX.Element;
+export { CoreUiThemeProvider };
+//# sourceMappingURL=CoreUiThemeProvider.d.ts.map

package/dist/components/coreuithemeprovider/CoreUiThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoreUiThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/coreuithemeprovider/CoreUiThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAmB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEjE,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,mBAAmB,wBAAyB,KAAK,gBAStD,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/coreuithemeprovider/CoreUiThemeProvider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider } from 'styled-components';
+import { space, fontSize } from '../../style/theme';
+const CoreUiThemeProvider = ({ theme, children }) => {
+    const newTheme = {
+        ...theme,
+        space,
+        fontSizes: fontSize,
+        colors: { ...theme },
+    };
+    return _jsx(ThemeProvider, { theme: newTheme, children: children });
+};
+export { CoreUiThemeProvider };

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const DATE_FORMATER: Intl.DateTimeFormat;
+export declare const TIME_SECOND_FORMATER: Intl.DateTimeFormat;
+export declare const TIME_FORMATER: Intl.DateTimeFormat;
+type FormattedDateTimeProps = {
+    format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative';
+    value: Date;
+};
+export declare const FormattedDateTime: ({ format, value, }: FormattedDateTimeProps) => JSX.Element;
+export {};
+//# sourceMappingURL=FormattedDateTime.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":";AAGA,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,CAAC;IACf,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,gBAqGxB,CAAC"}

package/dist/components/date/FormattedDateTime.js

@@ -0,0 +1,66 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { getDateDaysDiff } from './dateDiffer';
+import { Tooltip } from '../tooltip/Tooltip.component';
+export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour12: false,
+});
+export const TIME_SECOND_FORMATER = Intl.DateTimeFormat('en-GB', {
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+});
+export const TIME_FORMATER = Intl.DateTimeFormat('en-GB', {
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+});
+const isItFutureOrIsItPast = (timeDiff, stringToBeFormatted) => {
+    if (timeDiff > 0) {
+        return `${stringToBeFormatted} ago`;
+    }
+    else {
+        return `in ${stringToBeFormatted}`;
+    }
+};
+export const FormattedDateTime = ({ format, value, }) => {
+    switch (format) {
+        case 'date':
+            return _jsx(_Fragment, { children: DATE_FORMATER.format(value) });
+        case 'date-time':
+            return (_jsx(_Fragment, { children: DATE_FORMATER.format(value) + ' ' + TIME_FORMATER.format(value) }));
+        case 'date-time-second':
+            return (_jsx(_Fragment, { children: DATE_FORMATER.format(value) +
+                    ' ' +
+                    TIME_SECOND_FORMATER.format(value) }));
+        case 'time':
+            return _jsx(_Fragment, { children: TIME_FORMATER.format(value) });
+        case 'time-second':
+            return _jsx(_Fragment, { children: TIME_SECOND_FORMATER.format(value) });
+        case 'relative':
+            const now = new Date();
+            const monthDiff = getDateDaysDiff(value, now, 'months');
+            const dayDiff = getDateDaysDiff(value, now, 'days');
+            if (monthDiff !== 0 && Math.abs(dayDiff) > 90) {
+                return (_jsx(Tooltip, { overlay: _jsx(FormattedDateTime, { format: "date-time-second", value: value }), children: isItFutureOrIsItPast(monthDiff, `${Math.abs(monthDiff)} month${Math.abs(monthDiff) > 1 ? 's' : ''}`) }));
+            }
+            if (dayDiff !== 0) {
+                return (_jsx(Tooltip, { overlay: _jsx(FormattedDateTime, { format: "date-time-second", value: value }), children: isItFutureOrIsItPast(dayDiff, `${Math.abs(dayDiff)} day${Math.abs(dayDiff) > 1 ? 's' : ''}`) }));
+            }
+            const hourDiff = getDateDaysDiff(value, now, 'hours');
+            if (hourDiff !== 0) {
+                return (_jsx(Tooltip, { overlay: _jsx(FormattedDateTime, { format: "date-time-second", value: value }), children: isItFutureOrIsItPast(hourDiff, `${Math.abs(hourDiff)} hour${Math.abs(hourDiff) > 1 ? 's' : ''}`) }));
+            }
+            const minuteDiff = getDateDaysDiff(value, now, 'minutes');
+            if (minuteDiff !== 0) {
+                return (_jsx(Tooltip, { overlay: _jsx(FormattedDateTime, { format: "date-time-second", value: value }), children: isItFutureOrIsItPast(minuteDiff, `${Math.abs(minuteDiff)} minute${Math.abs(minuteDiff) > 1 ? 's' : ''}`) }));
+            }
+            return (_jsx(Tooltip, { overlay: _jsx(FormattedDateTime, { format: "date-time-second", value: value }), children: "few seconds ago" }));
+        //TO FINISH
+        default:
+            return _jsx(_Fragment, {});
+    }
+};

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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,140 @@
+import { jsx as _jsx } 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();
+    });
+});

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

@@ -0,0 +1,2 @@
+export declare function getDateDaysDiff(startDate: Date, endDate: Date, unit: 'months' | 'days' | 'hours' | 'minutes'): number;
+//# sourceMappingURL=dateDiffer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dateDiffer.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/dateDiffer.ts"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,CAC7B,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,IAAI,EACb,IAAI,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,UAM9C"}

package/dist/components/date/dateDiffer.js

@@ -0,0 +1,7 @@
+import { Temporal } from '@js-temporal/polyfill';
+export function getDateDaysDiff(startDate, endDate, unit) {
+    const diff = Temporal.Duration.from({
+        milliseconds: endDate.getTime() - startDate.getTime(),
+    }).total({ unit: unit, relativeTo: startDate.toISOString().split('T')[0] });
+    return diff > 0 ? Math.floor(diff) : Math.round(diff);
+}

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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,6 @@
+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);
+    });
+});

package/dist/components/dropdown/Dropdown.component.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export type Item = {
+    label: string;
+    name?: string;
+    selected?: boolean;
+    onClick: (arg0: any) => void;
+};
+type Items = Array<Item>;
+type Props = {
+    text?: string;
+    size?: string;
+    variant?: string;
+    title?: string;
+    items: Items;
+    icon?: JSX.Element;
+    caret?: boolean;
+};
+declare function Dropdown({ items, text, icon, size, variant, title, caret, ...rest }: Props): JSX.Element;
+export { Dropdown };
+//# sourceMappingURL=Dropdown.component.d.ts.map

package/dist/components/dropdown/Dropdown.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dropdown/Dropdown.component.tsx"],"names":[],"mappings":";AAcA,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9B,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AA0EF,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,IAAa,EACb,OAA2B,EAC3B,KAAK,EACL,KAAY,EACZ,GAAG,IAAI,EACR,EAAE,KAAK,eAqEP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/dropdown/Dropdown.component.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import { useState, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import { ButtonStyled, ButtonIcon, ButtonText, } from '../button/Button.component';
+import { zIndex } from '../../style/theme';
+import { spacing } from '../../spacing';
+import { fontSize } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Icon } from '../icon/Icon.component';
+const DropdownStyled = styled.div `
+  position: relative;
+  user-select: none;
+  cursor: pointer;
+  .trigger {
+    margin: 0;
+    border-radius: 0;
+  }
+`;
+const DropdownMenuStyled = styled.ul `
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  border: 1px solid ${getThemePropSelector('backgroundLevel1')};
+  z-index: ${zIndex.dropdown};
+  max-height: 200px;
+  min-width: 100%;
+  overflow: auto;
+  border-bottom: 0.3px solid ${getThemePropSelector('border')};
+  ${(props) => {
+    if (props.size &&
+        props.triggerSize &&
+        props.triggerSize.x + props.size.width > window.innerWidth) {
+        return css `
+        right: 0;
+        top: 100%;
+      `;
+    }
+    else if (props.size &&
+        props.triggerSize &&
+        props.triggerSize.y + props.size.height > window.innerHeight) {
+        return css `
+        left: 0;
+        bottom: ${props.triggerSize.height + 'px'};
+      `;
+    }
+    else {
+        return css `
+        left: 0;
+        top: 100%;
+      `;
+    }
+}};
+`;
+const DropdownMenuItemStyled = styled.li `
+  display: flex;
+  align-items: center;
+  padding: ${spacing.r16};
+  white-space: nowrap;
+  cursor: pointer;
+  font-size: ${fontSize.base};
+
+  ${css `
+    background-color: ${getThemePropSelector('backgroundLevel1')};
+    color: ${getThemePropSelector('textPrimary')};
+    border-top: 0.3px solid ${getThemePropSelector('border')};
+    border-left: 0.3px solid ${getThemePropSelector('border')};
+    border-right: 0.3px solid ${getThemePropSelector('border')};
+    &:hover {
+      background-color: ${getThemePropSelector('highlight')};
+    }
+    &:active {
+      background-color: ${getThemePropSelector('highlight')};
+    }
+  `};
+`;
+const Caret = styled.span `
+  margin-left: ${spacing.r16};
+`;
+const TriggerStyled = ButtonStyled.withComponent('div');
+function Dropdown({ items, text, icon, size = 'base', variant = 'buttonSecondary', title, caret = true, ...rest }) {
+    const [open, setOpen] = useState(false);
+    const [menuSize, setMenuSize] = useState();
+    const [triggerSize, setTriggerSize] = useState();
+    const refMenuCallback = useCallback((node) => {
+        if (node !== null) {
+            setMenuSize(node.getBoundingClientRect());
+        }
+    }, []);
+    const refTriggerCallback = useCallback((node) => {
+        if (node !== null) {
+            setTriggerSize(node.getBoundingClientRect());
+        }
+    }, []);
+    return (_jsx(DropdownStyled, { active: open, variant: variant, className: "sc-dropdown", ...rest, children: _jsxs(TriggerStyled, { variant: variant, size: size, className: "trigger", onBlur: () => setOpen(!open), onFocus: () => setOpen(!open), onClick: (event) => event.stopPropagation(), tabIndex: "0", title: title, ref: refTriggerCallback, children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), text && _jsx(ButtonText, { className: "sc-trigger-text", children: text }), caret && (_jsx(Caret, { children: _jsx(Icon, { name: "Dropdown-down" }) })), open && (_jsx(DropdownMenuStyled, { className: "menu-item", postion: 'right', ref: refMenuCallback, size: menuSize, triggerSize: triggerSize, children: items.map(({ label, onClick, ...itemRest }) => {
+                        return (_jsx(DropdownMenuItemStyled, { className: "menu-item-label", onClick: onClick, variant: variant, ...itemRest, children: label }, label));
+                    }) }))] }) }));
+}
+export { Dropdown };

package/dist/components/dropzone/Dropzone.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { DropzoneOptions } from 'react-dropzone';
+declare const defaultDropzoneLabels: {
+    doesnt_meet_our_requirements: string;
+    or: string;
+    label: string;
+    buttonLabel: string;
+    buttonAddMoreLabel: string;
+};
+export declare function Dropzone({ labels, onChange, variant, ...dropzoneOptions }: DropzoneOptions & {
+    variant: 'inline' | 'large';
+    labels?: Partial<typeof defaultDropzoneLabels>;
+    onChange?: (files: File[]) => void;
+}): JSX.Element;
+export {};
+//# sourceMappingURL=Dropzone.d.ts.map

package/dist/components/dropzone/Dropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropzone.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dropzone/Dropzone.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAe,MAAM,gBAAgB,CAAC;AAoC9D,QAAA,MAAM,qBAAqB;;;;;;CAM1B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,GAAG,eAAe,EACnB,EAAE,eAAe,GAAG;IACnB,OAAO,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC,OAAO,qBAAqB,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;CACpC,eA8HA"}

package/dist/components/dropzone/Dropzone.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import styled from 'styled-components';
+import { spacing, Stack, Wrap } from '../../spacing';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+import { Text } from '../text/Text.component';
+const DropzoneContainer = styled.div `
+  padding: ${spacing.r24};
+  border: ${spacing.f2} dashed
+    ${(props) => !props.isDragActive
+    ? props.theme.textSecondary
+    : props.theme.selectedActive};
+  box-sizing: border-box;
+  display: flex;
+  ${(props) => (props.variant === 'large' ? `text-align: center;` : ``)}
+`;
+const FileList = styled.div `
+  max-height: 100px;
+  overflow-y: auto;
+  flex: 1;
+  width: 100%;
+`;
+const FileListItem = styled(Wrap) `
+  align-items: baseline;
+  &:hover {
+    background: ${(props) => props.theme.selectedActive};
+  }
+`;
+const defaultDropzoneLabels = {
+    doesnt_meet_our_requirements: "doesn't meet our requirements",
+    or: 'OR',
+    label: 'Drag and drop files and folders here',
+    buttonLabel: 'Add files',
+    buttonAddMoreLabel: 'Add more files',
+};
+export function Dropzone({ labels, onChange, variant, ...dropzoneOptions }) {
+    labels = { ...defaultDropzoneLabels, ...labels };
+    const [acceptedFiles, setAcceptedFiles] = useState([]);
+    const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
+        ...dropzoneOptions,
+        onDrop: (acceptedFiles, rejectedFiles, e) => {
+            const { multiple } = dropzoneOptions;
+            setAcceptedFiles((alreadyAcceptedFiles) => {
+                const singleFileAlreadyHasFile = !multiple && alreadyAcceptedFiles.length === 1;
+                const newAcceptedFiles = singleFileAlreadyHasFile
+                    ? alreadyAcceptedFiles
+                    : [...alreadyAcceptedFiles, ...acceptedFiles];
+                if (onChange) {
+                    onChange(newAcceptedFiles);
+                }
+                return newAcceptedFiles;
+            });
+            if (dropzoneOptions.onDrop) {
+                dropzoneOptions.onDrop(acceptedFiles, rejectedFiles, e);
+            }
+        },
+    });
+    const { multiple } = dropzoneOptions;
+    const { onClick, ...rootProps } = getRootProps();
+    const removeFile = (fileIndex) => {
+        setAcceptedFiles((alreadyAcceptedFiles) => {
+            const newAcceptedFiles = [...alreadyAcceptedFiles];
+            newAcceptedFiles.splice(fileIndex, 1);
+            if (onChange) {
+                onChange(newAcceptedFiles);
+            }
+            return newAcceptedFiles;
+        });
+    };
+    return (_jsxs(Stack, { direction: "vertical", children: [_jsxs(DropzoneContainer, { ...rootProps, isDragActive: isDragActive, variant: variant, children: [_jsx("input", { ...getInputProps() }), _jsx("div", { style: { flex: '1' }, children: !multiple && acceptedFiles.length === 1 ? (_jsxs(FileListItem, { children: [_jsx(Text, { children: acceptedFiles[0].name }), _jsx(Button, { icon: _jsx(Icon, { name: "Close" }), tooltip: { overlay: 'Remove' }, "aria-label": `Remove ${acceptedFiles[0].name}`, type: "button", onClick: () => {
+                                        removeFile(0);
+                                    } })] })) : multiple && acceptedFiles.length > 0 ? (_jsxs(Stack, { direction: "vertical", children: [_jsx(Button, { icon: variant === 'large' ? _jsx(Icon, { name: "Create-add" }) : undefined, variant: "secondary", type: "button", label: labels.buttonAddMoreLabel, onClick: onClick }), _jsx(FileList, { children: acceptedFiles.map((file, index) => (_jsxs(FileListItem, { children: [_jsx(Text, { children: file.name }), _jsx(Button, { icon: _jsx(Icon, { name: "Close" }), tooltip: { overlay: 'Remove' }, "aria-label": `Remove ${file.name}`, type: "button", onClick: () => {
+                                                    removeFile(index);
+                                                } })] }, index))) })] })) : (_jsxs(Stack, { direction: variant === 'large' ? 'vertical' : 'horizontal', gap: 'f16', children: [_jsx(Text, { children: _jsx(Icon, { name: "Upload", size: "3x" }) }), _jsx(Text, { children: labels.label }), variant === 'large' && _jsx(Text, { children: labels.or }), _jsx(Button, { icon: variant === 'large' ? _jsx(Icon, { name: "Create-add" }) : undefined, label: labels.buttonLabel, variant: "secondary", type: "button", onClick: onClick })] })) })] }), _jsx(Text, { variant: "Smaller", isEmphazed: true, color: "statusCritical", children: fileRejections.length > 0 ? (fileRejections.map((rejection) => rejection.file.name) +
+                    ' ' +
+                    labels.doesnt_meet_our_requirements) : (_jsx(_Fragment, { children: "\u00A0" })) })] }));
+}