@fattureincloud/fic-design-system 0.4.31 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## v0.5.1 - 25/10/2022
+
+### 🐛 Bug Fix
+
+- DatePicker format
+- InlineMessage onActionClick
+- Confirmation modal buttons position
+
+### 💅 Enhancement
+
+- Avatar refactor
+
+## v0.5.0 - 18/10/2022
+
+### 🚀 Added
+
+- A completely new typography
+- SegmentButton
+
+### 💅 Enhancement
+
+- Datepicker input controls
+
 ## v0.4.31 - 11/10/2022
 
 ### 🚀 Added

package/dist/common/components/typography/Typography.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { MapTextColorReturn, TextProps } from './types';
+export declare const Body: ({ children, type, ...otherProps }: TextProps) => JSX.Element;
+export declare const TextImpl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, MapTextColorReturn & TextProps, "color">;
+export declare const Title1: import("styled-components").StyledComponent<({ children, type, ...otherProps }: TextProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const Title2: import("styled-components").StyledComponent<({ children, type, ...otherProps }: TextProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const Title3: import("styled-components").StyledComponent<({ children, type, ...otherProps }: TextProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const Title4: import("styled-components").StyledComponent<({ children, type, ...otherProps }: TextProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const Title5: import("styled-components").StyledComponent<({ children, type, ...otherProps }: TextProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const Title6: import("styled-components").StyledComponent<({ children, type, ...otherProps }: TextProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const Headline: import("styled-components").StyledComponent<({ children, type, ...otherProps }: TextProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const Caption: import("styled-components").StyledComponent<({ children, type, ...otherProps }: TextProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const TableText: import("styled-components").StyledComponent<({ children, type, ...otherProps }: TextProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;

package/dist/common/components/typography/index.d.ts

@@ -0,0 +1 @@
+export { Body, Caption, Headline, Title1, Title2, Title3, Title4, Title5, Title6 } from './Typography';

package/dist/common/components/typography/types.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { DefaultTheme } from 'styled-components';
+import { colors } from '../../../styles/types';
+import { paletteColor } from '../../../styles/types';
+export declare type TextProps = {
+    bold?: boolean;
+    centered?: boolean;
+    children: React.ReactNode | React.ReactNode[] | undefined | null;
+    clamp?: number;
+    className?: string;
+    color?: colors | paletteColor;
+    type?: 'date' | 'currency';
+    style?: React.CSSProperties;
+};
+export declare type MapTextColorParams = {
+    color?: TextProps['color'];
+    theme: DefaultTheme;
+};
+export declare type MapTextColorReturn = {
+    color: paletteColor | undefined;
+};

package/dist/common/components/typography/utils.d.ts

@@ -0,0 +1,2 @@
+import { MapTextColorParams, MapTextColorReturn } from './types';
+export declare const mapTextColor: ({ color, theme }: MapTextColorParams) => MapTextColorReturn;

package/dist/common/types/dateTypes.d.ts

@@ -0,0 +1,5 @@
+export declare const dateFormatsArray: [string, ...string[]];
+export declare const timeFormat = "HH:mm:ss";
+export declare const datetimeFormatsArray: [string, ...string[]];
+export declare type DateFormat = typeof dateFormatsArray[number];
+export declare type DateFormats = [DateFormat, ...DateFormat[]];

package/dist/common/utils/dateUtils.d.ts

@@ -0,0 +1,3 @@
+export declare const parseDate: (date: string) => Date | null;
+export declare const format: (date: string, format: string) => string;
+export declare const formatITDate: (date: string) => string;

package/dist/common/utils/dsUtils.d.ts

@@ -1,3 +1,11 @@
 export declare const isNumber: (n: number | string | undefined) => boolean;
 export declare const parseDimension: (d: number | string) => string;
 export declare const generateRandomId: () => string;
+export declare const stringToFloat: (n: string) => number;
+export declare const isNumeric: (n: string) => boolean;
+/**
+ * Convert a number into italian currency value with euro symbol
+ * @param {number} number
+ * @returns {string} string
+ */
+export declare const currency: (number: number | string) => string;

package/dist/components/avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { AvatarProps } from './types';
-declare const Avatar: import("styled-components").StyledComponent<(props: AvatarProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+declare const Avatar: ({ backgroundColor, className, icon, image, onClick, placeholder, randomColor, size, style, text, textColor, }: AvatarProps) => JSX.Element;
 export default Avatar;

package/dist/components/avatar/avatar.stories.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { Meta } from '@storybook/react';
 import { AvatarProps } from './types';
-export declare const Generic: () => JSX.Element;
 export declare const Initials: () => JSX.Element;
-export declare const Placeholder: () => JSX.Element;
+export declare const RandomColor: () => JSX.Element;
 export declare const Image: () => JSX.Element;
+export declare const Icon: () => JSX.Element;
 declare const AvatarStories: Meta<AvatarProps>;
 export default AvatarStories;

package/dist/components/avatar/index.d.ts

@@ -1,2 +1,2 @@
-import Avatar from './Avatar';
-export { Avatar };
+export { default as Avatar } from './Avatar';
+export { AvatarProps } from './types';

package/dist/components/avatar/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const AvatarContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<import("./types").AvatarProps, "size" | "backgroundColor" | "image" | "placeholder" | "onClick" | "textColor"> & {
+    textLenght: number;
+}, never>;

package/dist/components/avatar/types.d.ts

@@ -1,8 +1,20 @@
-export interface AvatarProps {
+import { MouseEvent } from 'react';
+import { CSSObject } from 'styled-components';
+import { paletteColor } from '../../styles/types';
+import { IconProps } from '../icon';
+export declare type AvatarProps = {
+    backgroundColor?: paletteColor;
     className?: string;
-    initials?: string;
-    size: AvatarAllowedSizes;
-    placeholder?: string;
+    icon?: IconProps;
     image?: string;
-}
-export declare type AvatarAllowedSizes = 'xs' | 's' | 'm' | 'l';
+    onClick?: (e: MouseEvent) => void;
+    placeholder?: string;
+    randomColor?: boolean;
+    size: number;
+    style?: CSSObject;
+    text?: string;
+    textColor?: paletteColor;
+};
+export declare type AvatarContainerProps = Pick<AvatarProps, 'backgroundColor' | 'image' | 'onClick' | 'placeholder' | 'size' | 'textColor'> & {
+    textLenght: number;
+};

package/dist/components/avatar/utils.d.ts

@@ -0,0 +1,4 @@
+import { DefaultTheme } from 'styled-components';
+import { paletteColor } from '../../styles/types';
+export declare const scalingFactor: (l: number) => number;
+export declare const pseudoRandomColor: (text: string | undefined, theme: DefaultTheme) => paletteColor;

package/dist/components/badge/Badge.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { BadgeProps } from './';
 /**
  * Component Props:
@@ -10,4 +10,4 @@ import { BadgeProps } from './';
  * @param {IconProps} rightIcon Configuration of the right icon
  * @param {function} handleRightIconClick Callback called on right icon click
  */
-export declare const Badge: (props: BadgeProps) => JSX.Element;
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/dropdown/types.d.ts

@@ -1,6 +1,5 @@
 import { Placement } from '@popperjs/core/lib/enums';
 import React, { CSSProperties, MouseEventHandler } from 'react';
-import { AvatarAllowedSizes } from '../avatar/types';
 import { IconProps } from '../icon';
 export declare type TitleProps = {
     text: string;
@@ -42,7 +41,7 @@ export interface DropdownItemProps {
 export interface UserListItemProps {
     img?: string;
     placeholder?: string;
-    avatarSize?: AvatarAllowedSizes;
+    avatarSize?: number;
     noText?: string;
     text?: string;
     renderText?: JSX.Element;

package/dist/components/form/datepicker/hooks/useFormattedDate.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-import { DateFormats } from '../types';
+import { DateFormats } from '../../../../common/types/dateTypes';
 declare type ReturnType = [Date | null, Dispatch<SetStateAction<Date | null>>, string | null, string];
 /**
  * Hook to manage a date in string format

package/dist/components/form/datepicker/types.d.ts

@@ -3,9 +3,6 @@ import { ReactDatePickerProps } from 'react-datepicker';
 import { CommonFormTypes } from '../common/types';
 import { LabelProps } from '../label';
 export declare type DatePickerStatus = 'dayPicker' | 'monthPicker' | 'yearPicker';
-export declare const dateFormatsArray: [string, ...string[]];
-export declare type DateFormat = typeof dateFormatsArray[number];
-export declare type DateFormats = [DateFormat, ...DateFormat[]];
 export declare type RenderCustomFooterType = (props: RenderCustomFooterProps) => ReactChild;
 export declare type CustomButtonProps = {
     text: string;

package/dist/components/form/datepicker/utils.d.ts

@@ -1,3 +1,3 @@
-import { DateFormats } from './types';
+import { DateFormats } from '../../../common/types/dateTypes';
 export declare const timeConversionOptions: Intl.DateTimeFormatOptions;
 export declare const findFormat: (value: string | null | undefined, formats: DateFormats) => string;

package/dist/components/inlineMessage/InlineMessage.d.ts

@@ -18,5 +18,5 @@ import { InlineMessageProps } from './types';
  * @param {'medium' | 'large'} size fake size support
  *
  */
-declare const InlineMessage: (props: InlineMessageProps) => JSX.Element;
+declare const InlineMessage: ({ onActionClick, ...props }: InlineMessageProps) => JSX.Element;
 export default InlineMessage;

package/dist/components/segmentButton/SegmentButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SegmentButtonProps } from './types';
+declare const SegmentButton: ({ onChange, preselected, segments }: SegmentButtonProps) => JSX.Element;
+export default SegmentButton;

package/dist/components/segmentButton/index.d.ts

@@ -0,0 +1,3 @@
+export { default as segmentButtonPalette } from './segmentButtonPalette';
+export { SegmentButtonPalette, SegmentButtonProps, Segment } from './types';
+export { default as SegmentButton } from './SegmentButton';

package/dist/components/segmentButton/segmentButton.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from '@storybook/react';
+import { SegmentButtonProps } from './types';
+export declare const Standard: Story<SegmentButtonProps>;
+declare const SegmentButtonStories: Meta<SegmentButtonProps>;
+export default SegmentButtonStories;

package/dist/components/segmentButton/segmentButtonPalette.d.ts

@@ -0,0 +1,3 @@
+import { SegmentButtonPalette } from './types';
+declare const segmentButtonPalette: SegmentButtonPalette;
+export default segmentButtonPalette;

package/dist/components/segmentButton/styled.d.ts

@@ -0,0 +1,7 @@
+declare type Props = {
+    active: boolean;
+};
+export declare const SegmentButtonContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Segment: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Props, never>;
+export declare const Badge: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Props, never>;
+export {};

package/dist/components/segmentButton/types.d.ts

@@ -0,0 +1,26 @@
+import { paletteColor } from '../../styles/types';
+import { IconProps } from '../icon';
+export declare type SegmentButtonPalette = {
+    selected: {
+        background: paletteColor;
+        border: paletteColor;
+        primary: paletteColor;
+        secondary: paletteColor;
+    };
+    unselected: {
+        background: paletteColor;
+        border: paletteColor;
+        primary: paletteColor;
+        secondary: paletteColor;
+    };
+};
+export declare type Segment = {
+    counter?: number;
+    icon?: IconProps;
+    text: string;
+};
+export declare type SegmentButtonProps = {
+    onChange?: (i: number, s: Segment) => void;
+    preselected?: number;
+    segments: Segment[];
+};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import Spinner from './common/components/Spinner';
+export { Body, Caption, Headline, Title1, Title2, Title3, Title4, Title5, Title6 } from './common/components/typography';
 import { Accordion } from './components/accordions';
 import { Avatar } from './components/avatar';
 import { Button, ButtonPalette, ButtonProps, IconButton, IconButtonPalette, IconButtonProps } from './components/buttons';
@@ -40,6 +41,7 @@ export { LabelPalette } from './components/form/label';
 export { CustomSidebarItemProps, SidebarBadgeConfigProps, SidebarBadgeConfigType, SidebarItem, sidebarItemHeight, SidebarItemPalette, SidebarItemProps, } from './components/layout';
 export { Pagination, PaginationPalette, PaginationType } from './components/pagination';
 export { ProgressBar, ProgressBarPalette, ProgressBarProps, ProgressBarType } from './components/progressbar';
+export { Segment, SegmentButton, SegmentButtonPalette, SegmentButtonProps } from './components/segmentButton';
 export { ShortcutTip, ShortcutTipProps, Tip, TipPalette, TipProps, TipType } from './components/tip';
 export { bwColor } from './styles/types';
 export { autocompleteYellow, paletteColor, Avatar, Button, ButtonProps, ButtonPalette, IconButton, IconButtonProps, IconButtonPalette, Icon, IconProps, IconPalette, iconColors, IconBackground, IconBackgroundPalette, Table, TableProps, TableData, useTableValues, Row, Column, TablePalette, RowActions, ManualPagination, OnSelectionChange, OnSort, Checkbox, useCheckboxValue, CheckboxProps, CheckboxPalette, CheckboxStatus, Select, CreatableSelect, AsyncSelect, AsyncCreatableSelect, SelectProps, AsyncSelectProps, AsyncCreatableSelectProps, useSelectSimpleValue, isSimpleValue, simpleValue, CreatableSelectProps, useSelectValue, useSelectMultiValues, SelectPalette, SelectComponentsType, OptionType, PageEmptySet, Modal, ModalBody, ModalSearchable, Tooltip, TooltipProps, TooltipPalette, Accordion, Drawer, Radio, useRadioValue, RadioProps, RadioPalette, RadioStatus, RadioGroup, RadioGroupProps, RadioGroupOptions, InlineMessage, InlineMessageProps, InlineMessagePalette, InlineMessageType, Dropdown, DropdownItemProps, DropdownPalette, DropdownItemType, closeDropdownType, renderContentType, DropdownTabs, ScrollableTabs, TabsItem, Stepper, StepperProps, StepperPalette, ThemeProvider, Theme, Palette, GroupedList, ItemType, GroupType, Toast, ToastProps, toastPalette, ToastPalette, ToastType, ConfirmationModal, MicroTag, MicroTagProps, MicroTagPalette, Tag, TagProps, TagPalette, tagTypes, InputText, InputTextProps, InputTextPalette, UnitDropdownProps, DatePickerProps, DatePickerPalette, DatePicker, useFormattedDate, timeConversionOptions, InputHelper, InputHelperProps, InputHelperPalette, TextArea, TextAreaProps, TextAreaPalette, FileUploader, FileUploaderProps, FileUploaderPalette, FileRejection, fileUploaderOnDrop, Spinner, };