@fattureincloud/fic-design-system 0.4.31 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 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/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/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/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/index.d.ts

@@ -40,6 +40,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 { 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, };