@zealicsolutions/web-ui 0.0.1

package/dist/atoms/index.d.ts

@@ -0,0 +1,213 @@
+/// <reference types="react" />
+import { Callback, StylesType } from 'typescript';
+import * as react from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
+import * as styled_components from 'styled-components';
+import { CSSProperties } from 'styled-components';
+import { IconNames as IconNames$1 } from 'atoms/Icon/Icon';
+import { InputFieldTypes } from 'fieldsConfiguration/types';
+import { SizesTypes as SizesTypes$1, ThemeColors as ThemeColors$1 } from 'theme/types';
+import { SizesTypes as SizesTypes$2, ThemeColors as ThemeColors$2 } from 'theme';
+import { TooltipProps as TooltipProps$1 } from 'rc-tooltip/lib/Tooltip';
+
+declare type BaseButtonProps = {
+    onClick?: Callback;
+    variant?: 'primary' | 'secondary';
+    disabled?: boolean;
+    fullWidth?: boolean;
+};
+declare type ButtonProps = BaseButtonProps & {
+    fullWidth?: boolean;
+    text?: string;
+    loading?: boolean;
+};
+declare const Button: ({ text, onClick, loading, disabled, variant, fullWidth, }: ButtonProps) => JSX.Element;
+
+declare type TouchableOpacityProps = PropsWithChildren<{
+    activeOpacity?: number;
+    withoutOpacityEffect?: boolean;
+    disabled?: boolean;
+}>;
+declare const TouchableOpacity: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
+    activeOpacity?: number | undefined;
+    withoutOpacityEffect?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & {
+    children?: react.ReactNode;
+}, never>;
+
+declare type CheckBoxProps = {
+    value: boolean;
+    onClick: (value: boolean) => void;
+    disabled?: boolean;
+    error?: boolean;
+    label?: string;
+};
+declare const Checkbox: ({ label, onClick, value, disabled, error }: CheckBoxProps) => JSX.Element;
+
+declare type SelectOption = {
+    id: string;
+    label: string;
+};
+declare type SelectProps = {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    options: SelectOption[];
+    isError?: boolean;
+    isEditMode?: boolean;
+};
+
+declare const Select: ({ onChange, value, placeholder, options, disabled, isError, }: SelectProps) => JSX.Element;
+
+declare type InputIconProps = {
+    name: IconNames$1;
+    onClick?: Callback;
+};
+declare type InputProps = {
+    value?: string;
+    leftIcon?: InputIconProps;
+    rightIcon?: InputIconProps;
+    onBlur?: Callback;
+    type?: InputFieldTypes;
+    placeholder?: string;
+    disabled?: boolean;
+    isEditMode?: boolean;
+    isError?: boolean;
+    maxLength?: number;
+    onChange?: (value: string) => void;
+};
+declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, ...rest }: InputProps) => JSX.Element;
+
+declare type TextTypes = 'primary' | 'secondary' | 'error' | 'success';
+declare type TextWrapperProps = {
+    children: ReactNode;
+    variant: SizesTypes$1;
+    layout?: 'div' | 'span';
+    type?: TextTypes;
+    styles?: StylesType;
+    color?: ThemeColors$1 | string;
+};
+declare const TextWrapper: styled_components.StyledComponent<"div", styled_components.DefaultTheme, TextWrapperProps, never>;
+
+declare type ThemeColors = 'primary' | 'secondary' | 'background' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'indigo' | 'blue' | 'white' | 'black' | 'indigoTint' | 'indigoTint2' | 'success' | 'error' | 'warning';
+declare type SizesTypes = '2XL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
+
+declare type IconProps = {
+    name: IconNames;
+    size?: number;
+    color?: ThemeColors | string;
+    pointerEvents?: 'auto' | 'none';
+};
+declare const availableIcons: {
+    CaretDown: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    CaretUp: ({ color, ...props }: Omit<IconProps, "name">) => JSX.Element;
+    Filter: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Check: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Info: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    View: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Hide: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Close: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Minus: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    InfoBoxIcon: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Warning: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Bell: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Mobile: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Mail: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+};
+declare type IconNames = keyof typeof availableIcons;
+declare const Icon: ({ name, color, ...props }: IconProps) => JSX.Element;
+
+declare type SpacerProps = {
+    width?: SizesTypes$2 | number;
+    height?: SizesTypes$2 | number;
+    layout?: 'div' | 'span';
+};
+declare const Spacer: styled_components.StyledComponent<"div", styled_components.DefaultTheme, SpacerProps, never>;
+
+declare const Spinner: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
+    color?: ThemeColors$1 | undefined;
+    size?: SizesTypes$1 | undefined;
+}, never>;
+
+declare type ImageProps = {
+    src: string;
+    alt?: string;
+    styles?: CSSProperties;
+};
+declare const Image: (props: ImageProps) => JSX.Element;
+
+declare type LinkButtonProps = PropsWithChildren<{
+    activeOpacity?: number;
+    withoutOpacityEffect?: boolean;
+    disabled?: boolean;
+    onClick?: Callback;
+}>;
+declare const LinkButton: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
+    activeOpacity?: number | undefined;
+    withoutOpacityEffect?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & {
+    children?: react.ReactNode;
+} & {
+    activeOpacity?: number | undefined;
+    withoutOpacityEffect?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onClick?: Callback | undefined;
+}, never>;
+
+declare type ValidationTagStatus = 'DEFAULT' | 'ERROR' | 'SUCCESS';
+declare type ValidationTagProps = {
+    status: ValidationTagStatus;
+    text: string;
+};
+declare const ValidationTag: ({ text, status }: ValidationTagProps) => JSX.Element;
+
+declare type TooltipProps = Pick<TooltipProps$1, 'overlay' | 'placement' | 'trigger' | 'visible' | 'children'>;
+declare const StyleWrapper: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
+declare const Tooltip: ({ trigger, placement, ...props }: TooltipProps) => JSX.Element;
+
+declare type ToastType = 'success' | 'infoTierOne' | 'infoTierTwo' | 'warning' | 'error';
+declare type ToastParams = {
+    message: string;
+    type?: ToastType;
+    duration?: number;
+};
+
+declare const toast: ({ message, type, duration }: ToastParams) => void | undefined;
+
+declare type AvatarProps = {
+    size?: SizesTypes | number;
+    withShadow?: boolean;
+    label?: string;
+    backgroundColor?: ThemeColors;
+    textConfig?: {
+        color?: ThemeColors;
+        font?: SizesTypes;
+    };
+    content: {
+        initials?: string;
+        iconName?: IconNames;
+        imageUrl?: string;
+    };
+    onPress?: Callback;
+};
+declare const Avatar: ({ size, withShadow, label, backgroundColor, onPress, content: { initials, iconName, imageUrl }, textConfig: { color, font }, }: AvatarProps) => JSX.Element;
+
+declare type HorizontalPaddingProps = {
+    padding: SizesTypes$2 | number;
+};
+declare const HorizontalPadding: styled_components.StyledComponent<"div", styled_components.DefaultTheme, HorizontalPaddingProps, never>;
+declare const VerticalPadding: styled_components.StyledComponent<"div", styled_components.DefaultTheme, HorizontalPaddingProps, never>;
+
+declare type DividerProps = {
+    type?: 'horizontal' | 'vertical';
+    color?: ThemeColors$2 | string;
+    marginVertical?: SizesTypes$2 | number;
+    marginHorizontal?: SizesTypes$2 | number;
+    weight?: number;
+};
+declare const Divider: styled_components.StyledComponent<"div", styled_components.DefaultTheme, DividerProps, never>;
+
+export { Avatar, AvatarProps, BaseButtonProps, Button, ButtonProps, CheckBoxProps, Checkbox, Divider, DividerProps, HorizontalPadding, HorizontalPaddingProps, Icon, IconNames, IconProps, Image, ImageProps, Input, InputIconProps, InputProps, LinkButton, LinkButtonProps, Select, Spacer, SpacerProps, Spinner, StyleWrapper, TextTypes, TextWrapper, TextWrapperProps, Tooltip, TooltipProps, TouchableOpacity, TouchableOpacityProps, ValidationTag, ValidationTagProps, ValidationTagStatus, VerticalPadding, toast };

package/dist/cjs/index.css

@@ -0,0 +1,257 @@
+.rc-tooltip.rc-tooltip-zoom-appear,
+.rc-tooltip.rc-tooltip-zoom-enter {
+  opacity: 0;
+}
+.rc-tooltip.rc-tooltip-zoom-enter,
+.rc-tooltip.rc-tooltip-zoom-leave {
+  display: block;
+}
+.rc-tooltip-zoom-enter,
+.rc-tooltip-zoom-appear {
+  opacity: 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  animation-play-state: paused;
+}
+.rc-tooltip-zoom-leave {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+  animation-play-state: paused;
+}
+.rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active,
+.rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active {
+  animation-name: rcToolTipZoomIn;
+  animation-play-state: running;
+}
+.rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
+  animation-name: rcToolTipZoomOut;
+  animation-play-state: running;
+}
+@keyframes rcToolTipZoomIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+}
+@keyframes rcToolTipZoomOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0);
+  }
+}
+.rc-tooltip {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  visibility: visible;
+  font-size: 12px;
+  line-height: 1.5;
+  opacity: 0.9;
+}
+.rc-tooltip-hidden {
+  display: none;
+}
+.rc-tooltip-placement-top,
+.rc-tooltip-placement-topLeft,
+.rc-tooltip-placement-topRight {
+  padding: 5px 0 9px 0;
+}
+.rc-tooltip-placement-right,
+.rc-tooltip-placement-rightTop,
+.rc-tooltip-placement-rightBottom {
+  padding: 0 5px 0 9px;
+}
+.rc-tooltip-placement-bottom,
+.rc-tooltip-placement-bottomLeft,
+.rc-tooltip-placement-bottomRight {
+  padding: 9px 0 5px 0;
+}
+.rc-tooltip-placement-left,
+.rc-tooltip-placement-leftTop,
+.rc-tooltip-placement-leftBottom {
+  padding: 0 9px 0 5px;
+}
+.rc-tooltip-inner {
+  padding: 8px 10px;
+  color: #fff;
+  text-align: left;
+  text-decoration: none;
+  background-color: #373737;
+  border-radius: 6px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
+  min-height: 34px;
+}
+.rc-tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.rc-tooltip-placement-top .rc-tooltip-arrow,
+.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
+.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+  bottom: 4px;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  border-top-color: #373737;
+}
+.rc-tooltip-placement-top .rc-tooltip-arrow {
+  left: 50%;
+}
+.rc-tooltip-placement-topLeft .rc-tooltip-arrow {
+  left: 15%;
+}
+.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+  right: 15%;
+}
+.rc-tooltip-placement-right .rc-tooltip-arrow,
+.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
+.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+  left: 4px;
+  margin-top: -5px;
+  border-width: 5px 5px 5px 0;
+  border-right-color: #373737;
+}
+.rc-tooltip-placement-right .rc-tooltip-arrow {
+  top: 50%;
+}
+.rc-tooltip-placement-rightTop .rc-tooltip-arrow {
+  top: 15%;
+  margin-top: 0;
+}
+.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+  bottom: 15%;
+}
+.rc-tooltip-placement-left .rc-tooltip-arrow,
+.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
+.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+  right: 4px;
+  margin-top: -5px;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #373737;
+}
+.rc-tooltip-placement-left .rc-tooltip-arrow {
+  top: 50%;
+}
+.rc-tooltip-placement-leftTop .rc-tooltip-arrow {
+  top: 15%;
+  margin-top: 0;
+}
+.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+  bottom: 15%;
+}
+.rc-tooltip-placement-bottom .rc-tooltip-arrow,
+.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
+.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+  top: 4px;
+  margin-left: -5px;
+  border-width: 0 5px 5px;
+  border-bottom-color: #373737;
+}
+.rc-tooltip-placement-bottom .rc-tooltip-arrow {
+  left: 50%;
+}
+.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
+  left: 15%;
+}
+.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+  right: 15%;
+}
+
+.rc-notification {
+  position: fixed;
+  z-index: 1000;
+}
+.rc-notification-notice {
+  padding: 7px 20px 7px 10px;
+  border-radius: 3px 3px;
+  border: 1px solid #999;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  border: 0px solid rgba(0, 0, 0, 0);
+  background: #fff;
+  display: block;
+  width: auto;
+  line-height: 1.5;
+  position: relative;
+  margin: 10px 0;
+}
+.rc-notification-notice-closable {
+  padding-right: 20px;
+}
+.rc-notification-notice-close {
+  position: absolute;
+  right: 5px;
+  top: 3px;
+  color: #000;
+  cursor: pointer;
+  outline: none;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  text-shadow: 0 1px 0 #fff;
+  filter: alpha(opacity=20);
+  opacity: 0.2;
+  text-decoration: none;
+}
+.rc-notification-notice-close-x:after {
+  content: '×';
+}
+.rc-notification-notice-close:hover {
+  opacity: 1;
+  filter: alpha(opacity=100);
+  text-decoration: none;
+}
+.rc-notification-fade-appear,
+.rc-notification-fade-enter {
+  opacity: 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  animation-play-state: paused;
+}
+.rc-notification-fade-leave {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  animation-play-state: paused;
+}
+.rc-notification-fade-appear.rc-notification-fade-appear-active,
+.rc-notification-fade-enter.rc-notification-fade-enter-active {
+  animation-name: rcNotificationFadeIn;
+  animation-play-state: running;
+}
+.rc-notification-fade-leave.rc-notification-fade-leave-active {
+  animation-name: rcDialogFadeOut;
+  animation-play-state: running;
+}
+@keyframes rcNotificationFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes rcDialogFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}