@fattureincloud/fic-design-system 0.4.30 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## v0.5.0 - 18/10/2022
+
+### 🚀 Added
+
+- A completely new typography
+- SegmentButton
+
+### 💅 Enhancement
+
+- Datepicker input controls
+
+## v0.4.31 - 11/10/2022
+
+### 🚀 Added
+
+- exports:
+  • ButtonPalette,
+  • DropdownItemType,
+  • iconColors,
+  • tagTypes,
+  • BadgePalette,
+  • BannerPalette,
+  • ChipPalette,
+  • FloatingBadgePalette,
+  • LabelPalette,
+  • PaginationPalette,
+  • ProgressBarPalette,
+  • bwColor,
+  • IconButtonPalette
+
 ## v0.4.30 - 29/09/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/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/dropdown/index.d.ts

@@ -1,4 +1,4 @@
 import Dropdown from './dropdown';
 import dropdownPalette, { DropdownPalette } from './dropdownPalette';
-import { closeDropdownType, DropdownItemProps, renderContentType } from './types';
-export { Dropdown, closeDropdownType, renderContentType, dropdownPalette, DropdownPalette, DropdownItemProps };
+import { closeDropdownType, DropdownItemProps, DropdownItemType, renderContentType } from './types';
+export { Dropdown, closeDropdownType, renderContentType, dropdownPalette, DropdownPalette, DropdownItemProps, DropdownItemType, };

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/icon/index.d.ts

@@ -1,4 +1,4 @@
 import { IconBackground, IconBackgroundPalette, iconBackgroundPalette } from './components/iconBackground';
 import Icon, { IconProps } from './Icon';
-import iconPalette, { IconPalette } from './iconPalette';
-export { Icon, IconProps, IconPalette, iconPalette, IconBackground, iconBackgroundPalette, IconBackgroundPalette };
+import iconPalette, { iconColors, IconPalette } from './iconPalette';
+export { Icon, IconProps, IconPalette, iconPalette, IconBackground, iconBackgroundPalette, IconBackgroundPalette, iconColors, };

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 } 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/components/tag/index.d.ts

@@ -1,4 +1,4 @@
 import { Tag } from './Tag';
-import tagPalette, { TagPalette } from './tagPalette';
+import tagPalette, { TagPalette, tagTypes } from './tagPalette';
 import { TagProps } from './types';
-export { Tag, TagProps, tagPalette, TagPalette };
+export { Tag, TagProps, tagPalette, TagPalette, tagTypes };

package/dist/index.d.ts

@@ -1,13 +1,9 @@
 import Spinner from './common/components/Spinner';
 import { Accordion } from './components/accordions';
 import { Avatar } from './components/avatar';
-export { Banner, BannerProps, BannerType } from './components/banner';
-export { Badge, BadgeProps, BadgeType } from './components/badge';
-import { Button, ButtonProps, IconButton, IconButtonProps } from './components/buttons';
-export { Chip, ChipType } from './components/chip';
+import { Button, ButtonPalette, ButtonProps, IconButton, IconButtonPalette, IconButtonProps } from './components/buttons';
 import { Drawer } from './components/drawer';
-import { closeDropdownType, Dropdown, DropdownItemProps, DropdownPalette, renderContentType } from './components/dropdown';
-export { NotificationBadge, WithBadge, FloatingBadgeType } from './components/floatingBadge';
+import { closeDropdownType, Dropdown, DropdownItemProps, DropdownItemType, DropdownPalette, renderContentType } from './components/dropdown';
 import { Checkbox, CheckboxPalette, CheckboxProps, CheckboxStatus, useCheckboxValue } from './components/form/checkbox';
 import { DatePicker, DatePickerPalette, DatePickerProps, timeConversionOptions, useFormattedDate } from './components/form/datepicker';
 import { FileRejection, FileUploader, fileUploaderOnDrop, FileUploaderPalette, FileUploaderProps } from './components/form/fileUploader';
@@ -18,26 +14,33 @@ import { RadioGroup, RadioGroupOptions, RadioGroupProps } from './components/for
 import { AsyncCreatableSelect, AsyncCreatableSelectProps, AsyncSelect, AsyncSelectProps, CreatableSelect, CreatableSelectProps, isSimpleValue, OptionType, Select, SelectComponentsType, SelectPalette, SelectProps, simpleValue, useSelectMultiValues, useSelectSimpleValue, useSelectValue } from './components/form/select';
 import { TextArea, TextAreaPalette, TextAreaProps } from './components/form/textArea';
 import { GroupedList, GroupType, ItemType } from './components/groupedList';
-import { Icon, IconPalette, IconProps } from './components/icon';
+import { Icon, iconColors, IconPalette, IconProps } from './components/icon';
 import { IconBackground, IconBackgroundPalette } from './components/icon/components/iconBackground';
 import { InlineMessage, InlineMessagePalette, InlineMessageProps, InlineMessageType } from './components/inlineMessage';
-export { CustomSidebarItemProps, SidebarItem, sidebarItemHeight, SidebarItemPalette, SidebarItemProps, SidebarBadgeConfigType, SidebarBadgeConfigProps, } from './components/layout';
 import { MicroTag, MicroTagPalette, MicroTagProps } from './components/microTag';
 import { Modal, ModalSearchable } from './components/modals';
 import { ConfirmationModal } from './components/modals/confirmationModal';
 import { ModalBody } from './components/modals/modalStyled';
 import { PageEmptySet } from './components/pageEmptySet';
-export { Pagination, PaginationType } from './components/pagination';
-export { ProgressBar, ProgressBarType } from './components/progressbar';
 import { Stepper, StepperPalette, StepperProps } from './components/stepper';
 import { Column, ManualPagination, OnSelectionChange, OnSort, Row, RowActions, Table, TableData, TablePalette, TableProps, useTableValues } from './components/table';
 import { DropdownTabs, ScrollableTabs, TabsItem } from './components/tabs';
-import { Tag, TagPalette, TagProps } from './components/tag';
+import { Tag, TagPalette, TagProps, tagTypes } from './components/tag';
 import { ThemeProvider } from './components/themeProvider';
-export { ShortcutTip, ShortcutTipProps, Tip, TipPalette, TipProps, TipType } from './components/tip';
 import { Toast, ToastPalette, toastPalette, ToastProps, ToastType } from './components/toast';
 import { Tooltip, TooltipPalette, TooltipProps } from './components/tooltip';
 import { autocompleteYellow } from './styles/defaultPalette/colors/others';
 import { Theme } from './styles/theme';
 import { Palette, paletteColor } from './styles/types';
-export { autocompleteYellow, paletteColor, Avatar, Button, ButtonProps, IconButton, IconButtonProps, Icon, IconProps, IconPalette, 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, 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, InputText, InputTextProps, InputTextPalette, UnitDropdownProps, DatePickerProps, DatePickerPalette, DatePicker, useFormattedDate, timeConversionOptions, InputHelper, InputHelperProps, InputHelperPalette, TextArea, TextAreaProps, TextAreaPalette, FileUploader, FileUploaderProps, FileUploaderPalette, FileRejection, fileUploaderOnDrop, Spinner, };
+export { Badge, BadgeProps, BadgeType, BadgePalette } from './components/badge';
+export { Banner, BannerProps, BannerType, BannerPalette } from './components/banner';
+export { Chip, ChipType, ChipPalette, ChipProps } from './components/chip';
+export { FloatingBadgePalette, FloatingBadgeType, NotificationBadge, WithBadge } from './components/floatingBadge';
+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 { SegmentButton, SegmentButtonPalette } 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, };