@aveonline/ui-react 0.0.2-alpha.0 → 1.0.0

package/README.md

@@ -2,6 +2,7 @@
   <img height="100" src="https://user-images.githubusercontent.com/38017835/197309416-fd4390a0-cfb6-41f3-ac26-10d067d92a25.png">
   <h1 align="center">ui ecosystem react</h1>
   <p>The home base for Aveonline design system, ui-react provides essential design resources for our developers to use in the Aveonline-branded interfaces that they create.</p>
+  <a href="https://ui-aveonline.vercel.app/">Go Storybook</a>
 </div>
 
 ## Before started
@@ -9,7 +10,7 @@
 For usage with tailwind config, install:
 
 ```shell
-npm i autoprefixer cssnano postcss postcss-import tailwindcss @tailwindcss/forms -D
+npm i
 ```
 
 ## Getting started
@@ -25,7 +26,7 @@ npm i @aveonline/ui-react
 Import things into your JS app from the `@aveonline/ui-react` package.
 
 ```ts
-import { Test } from '@aveonline/ui-react'
+import { Button } from '@aveonline/ui-react'
 ```
 
 `tailwind.config.js`
@@ -92,7 +93,7 @@ Tests
 
 Run `npm run test` to execute all unit test components.
 
-We use `vitest` and `testing-library/react` for unit/integration tests and will soon use [Chromatic](https://www.chromaticqa.com/) for visual regression testing.
+We use `vitest` and `testing-library/react` for unit/integration tests and [Chromatic](https://www.chromaticqa.com/) for visual regression testing.
 
 Open Storybook
 
@@ -111,3 +112,17 @@ Storybook production
 ```shell
 npm run build:storybook
 ```
+
+Run test
+
+```shell
+npm run test
+```
+
+Run regression testing
+
+- [Join](https://www.chromatic.com/library?appId=6362f0c0f36774d17ed0c3a0&inviteToken=4adce6358a9b439f8b636d0599e6db4b)
+
+```shell
+npm run chromatic
+```

package/dist/assets/index.91a8dfaf.css

@@ -0,0 +1 @@
+[type=radio]:checked{background-image:url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D'0%200%2016%2016'%20fill%3D'%232C6ECB'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Ccircle%20cx%3D'8'%20cy%3D'8'%20r%3D'4'%2F%3E%3C%2Fsvg%3E")}[type=radio]:checked:disabled{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}

package/dist/components/atoms/Avatar/IAvatar.d.ts

@@ -0,0 +1,3 @@
+export interface IAvatar {
+    size: 'sm' | 'xs' | 'md' | 'lg';
+}

package/dist/components/atoms/Avatar/index.d.ts

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar';

package/dist/components/atoms/Badge/IBadge.d.ts

@@ -0,0 +1,5 @@
+import { IChildren } from '../../../types';
+export interface IBadge extends IChildren {
+    variant: 'neutral' | 'info' | 'success' | 'warning' | 'critical';
+    size?: 'sm' | 'md';
+}

package/dist/components/atoms/Badge/index.d.ts

@@ -0,0 +1 @@
+export { default as Badge } from './Badge';

package/dist/components/atoms/Button/IButton.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode, MouseEventHandler } from 'react';
+export declare type Variant = 'primary' | 'basic' | 'destructive' | 'plain' | 'plain-monochrome' | 'plain-destructive';
+declare type Size = 'md' | 'sm';
+export declare type Align = 'start' | 'center' | 'end';
+interface IButton {
+    variant?: Variant;
+    children?: ReactNode;
+    size?: Size;
+    fullWidth?: boolean;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    align?: Align;
+    onlyOneIcon?: boolean;
+    onClick?: MouseEventHandler<HTMLButtonElement | HTMLDivElement> | (() => void);
+}
+interface ILoading {
+    variant?: Variant;
+    size?: Size;
+}
+export type { IButton, ILoading };

package/dist/components/atoms/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export * from './IButton';

package/dist/components/atoms/Button/useCSS.d.ts

@@ -0,0 +1,4 @@
+import { IButton } from './IButton';
+export declare function useCSS({ variant, isLoading, size, fullWidth, align, onlyOneIcon }: IButton): {
+    getClass: () => string;
+};

package/dist/components/atoms/Heading/IHeading.d.ts

@@ -0,0 +1,5 @@
+import type { IColorText, IWeight, ILineHeightHeading, IFontSizeHeading, IClassName, IChildren } from '../../../types';
+export interface IHeading extends IChildren, IClassName, IWeight, ILineHeightHeading, IColorText, IFontSizeHeading {
+    variant?: 'subheading' | 'heading' | 'sm' | 'md' | 'lg' | 'xl';
+    as?: Extract<keyof JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+}

package/dist/components/atoms/Heading/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Heading } from './Heading';
+export * from './IHeading';

package/dist/components/atoms/Heading/useCSS.d.ts

@@ -0,0 +1,4 @@
+import { IHeading } from './IHeading';
+export declare function useCSS({ variant, ...props }: IHeading): {
+    getClass: string;
+};

package/dist/components/atoms/Icon/IIcon.d.ts

@@ -0,0 +1,12 @@
+export declare type ISize = 'sm' | 'md' | 'lg';
+export declare type IColor = 'success' | 'warning' | 'disabled' | 'active' | 'hovered' | 'subdued' | 'default' | 'critical' | 'primary';
+export declare type IKind = 'shipping' | 'home' | 'menu' | 'notifications' | 'novelty' | 'help' | 'see-more' | 'info' | 'alert' | 'eye' | 'date' | 'search' | 'delete' | 'more-less' | 'down' | 'up' | 'back' | 'front' | 'major-minor' | 'minor-major' | 'create' | 'success' | 'error' | 'more' | 'less' | undefined;
+interface IconProps {
+    size?: ISize;
+    color?: IColor;
+    kind?: IKind;
+    cursor?: 'pointer' | 'default';
+    onClick?: () => void;
+    className?: string;
+}
+export type { IconProps };

package/dist/components/atoms/Icon/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Icon } from './Icon';
+export * from './IIcon';

package/dist/components/atoms/RadioButton/IRadioButton.d.ts

@@ -0,0 +1,16 @@
+declare type Change = {
+    value: string | number;
+    checked: boolean;
+};
+declare type IPropsRadio = {
+    id?: string;
+    name?: string;
+    isDisabled?: boolean;
+    value?: string | number;
+    defaultChecked?: boolean;
+    label?: string;
+    helpText?: string;
+    onChange?: (value: Change) => void;
+    [rest: string]: any;
+};
+export type { IPropsRadio };

package/dist/components/atoms/RadioButton/index.d.ts

@@ -0,0 +1 @@
+export { default as RadioButton } from './RadioButton';

package/dist/components/atoms/Switch/ISwitch.d.ts

@@ -0,0 +1,7 @@
+interface ISwitch {
+    isSelected: boolean;
+    isDisabled?: boolean;
+    name?: string;
+    onChange(checked: boolean): void;
+}
+export type { ISwitch };

package/dist/components/atoms/Switch/index.d.ts

@@ -0,0 +1 @@
+export { default as Switch } from './Switch';

package/dist/components/atoms/Text/IText.d.ts

@@ -0,0 +1,6 @@
+import type { IColorText, IWeight, ILineHeightText, IFontSizeText, IChildren, IClassName } from '../../../types';
+export interface IText extends IColorText, IWeight, ILineHeightText, IFontSizeText, IChildren, IClassName {
+    variant?: 'button' | 'body' | 'highlight' | 'caption';
+    as?: Extract<keyof JSX.IntrinsicElements, 'span' | 'p' | 'label'>;
+    [rest: string]: any;
+}

package/dist/components/atoms/Text/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Text } from './Text';
+export * from './IText';

package/dist/components/atoms/Text/useCSS.d.ts

@@ -0,0 +1,4 @@
+import type { IText } from './IText';
+export declare function useCSS({ variant, ...props }: IText): {
+    getClass: string;
+};

package/dist/components/atoms/Tooltip/ITooltip.d.ts

@@ -0,0 +1,10 @@
+import { IChildren } from '../../../types';
+import type { Placement } from '@floating-ui/react-dom-interactions';
+import { useTooltip } from './useTooltip';
+export declare type TooltipState = ReturnType<typeof useTooltip>;
+export declare type ITooltipProps = {
+    placement?: Placement;
+    title?: string;
+    description?: string;
+    initialOpen?: boolean;
+} & IChildren;

package/dist/components/atoms/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip';
+export * from './ITooltip';

package/dist/components/atoms/Tracker/ITracker.d.ts

@@ -0,0 +1,8 @@
+declare type IPropsTracker = {
+    track: string;
+    title?: string;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    [rest: string]: any;
+};
+export type { IPropsTracker };

package/dist/components/atoms/Tracker/index.d.ts

@@ -0,0 +1 @@
+export { default as Tracker } from './Tracker';

package/dist/components/index.d.ts

@@ -1,2 +1,26 @@
-export { default as Button } from './Button/Button';
-//# sourceMappingURL=index.d.ts.map
+export * from './atoms/Button';
+export * from './atoms/Avatar';
+export * from './atoms/Heading';
+export * from './atoms/Text';
+export * from './atoms/Badge';
+export * from './atoms/Switch';
+export * from './atoms/Icon';
+export * from './atoms/Tooltip';
+export * from './atoms/RadioButton';
+export * from './atoms/Tracker';
+export * from './molecules/Selectable/Select';
+export * from './molecules/Selectable/AsyncSelect';
+export * from './molecules/Selectable/SelectButton';
+export * from './molecules/Selectable/SelectCountry';
+export * from './molecules/Tab';
+export * from './molecules/InlineError';
+export * from './molecules/Modal';
+export * from './molecules/Dropdown';
+export * from './molecules/EmptyState';
+export * from './molecules/TabNav';
+export * from './molecules/Header';
+export * from './molecules/Summary';
+export * from './molecules/Card/Select';
+export * from './organisms/Navigation';
+export * from './templates/Main';
+export * from './templates/Shipment';

package/dist/components/molecules/Card/Select/ISelect.d.ts

@@ -0,0 +1,17 @@
+interface ICardSelect {
+    id: string;
+    title: string;
+    subtitle?: string;
+    description?: string;
+    state?: string;
+    img?: JSX.Element;
+    hasRadio?: boolean;
+    isDisabled?: boolean;
+    error?: string;
+}
+declare type IPropsCardSelect = {
+    items: ICardSelect[];
+    checkedItem: ICardSelect | undefined;
+    onChange: (value: ICardSelect) => void;
+};
+export type { IPropsCardSelect, ICardSelect };

package/dist/components/molecules/Card/Select/index.d.ts

@@ -0,0 +1 @@
+export { default as CardSelect } from './Select';

package/dist/components/molecules/Dropdown/IDropdown.d.ts

@@ -0,0 +1,14 @@
+import { IChildren } from '../../../types';
+declare type IElement = string | JSX.Element;
+declare type IContent = {
+    label: IElement;
+    value: IElement;
+};
+interface IPropsDropdown extends IChildren {
+    title?: IElement;
+    subtitle?: IElement[];
+    content?: IContent[];
+    defaultOpen?: boolean;
+    isDisabled?: boolean;
+}
+export type { IPropsDropdown, IElement, IContent };

package/dist/components/molecules/Dropdown/index.d.ts

@@ -0,0 +1 @@
+export { default as Dropdown } from './Dropdown';

package/dist/components/molecules/EmptyState/IEmptyState.d.ts

@@ -0,0 +1,7 @@
+import { IChildren, IClassName } from '../../../types';
+interface IPropsEmptyState extends IChildren, IClassName {
+    title?: string;
+    description?: string;
+    img?: 'box' | 'padlock';
+}
+export type { IPropsEmptyState };

package/dist/components/molecules/EmptyState/index.d.ts

@@ -0,0 +1 @@
+export { default as EmptyState } from './EmptyState';

package/dist/components/molecules/Header/IHeader.d.ts

@@ -0,0 +1,6 @@
+declare type IHeader = {
+    hasLogo?: boolean;
+    className?: string;
+    [rest: string]: any;
+};
+export type { IHeader };

package/dist/components/molecules/Header/index.d.ts

@@ -0,0 +1 @@
+export { default as Header } from './Header';

package/dist/components/molecules/InlineError/IInlineError.d.ts

@@ -0,0 +1,7 @@
+import type { IChildren, IClassName } from '../../../types';
+import { IColor, IKind } from '../../atoms/Icon';
+export interface IInlineError extends IChildren, IClassName {
+    size?: 'lg' | 'sm';
+    icon?: IKind;
+    colorIcon?: IColor;
+}

package/dist/components/molecules/InlineError/index.d.ts

@@ -0,0 +1 @@
+export { default as InlineError } from './InlineError';

package/dist/components/molecules/Modal/IModal.d.ts

@@ -0,0 +1,12 @@
+import { IChildren } from '../../../types';
+interface IPropsModal extends IChildren {
+    isOpen?: boolean;
+    title?: string;
+    iconTitle?: JSX.Element;
+    subtitle?: string;
+    footer?: JSX.Element;
+    hasBorder?: Array<'top' | 'bottom'>;
+    showClose?: boolean;
+    onClose?: (value: boolean) => void;
+}
+export type { IPropsModal };

package/dist/components/molecules/Modal/index.d.ts

@@ -0,0 +1 @@
+export { default as Modal } from './Modal';

package/dist/components/molecules/Selectable/AsyncSelect/IAsyncSelect.d.ts

@@ -0,0 +1,4 @@
+import type { ISelect, IOption } from '../Select';
+export interface IAsyncSelect extends Omit<ISelect, 'options'> {
+    loadOptions?: (inputValue: string) => Promise<IOption[]> | undefined;
+}

package/dist/components/molecules/Selectable/AsyncSelect/index.d.ts

@@ -0,0 +1 @@
+export { default as AsyncSelect } from './AsyncSelect';

package/dist/components/molecules/Selectable/Select/ISelect.d.ts

@@ -0,0 +1,18 @@
+export declare type IOption = {
+    label: string | number;
+    value: string | number;
+};
+export interface ISelect {
+    options?: IOption[];
+    isDisabled?: boolean;
+    placeholder?: string;
+    defaultValue?: IOption;
+    error?: string;
+    id?: string;
+    name?: string;
+    onChange?: (value: IOption) => void;
+    helpText?: string;
+    hasLabelPlaceholder?: boolean;
+    isSearchable?: boolean;
+    isClearable?: boolean;
+}

package/dist/components/molecules/Selectable/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Select } from './Select';
+export * from './ISelect';

package/dist/components/molecules/Selectable/SelectButton/ISelectButton.d.ts

@@ -0,0 +1,16 @@
+import type { ISelect, IOption } from '../Select';
+import type { IKind } from '../../../atoms/Icon';
+import type { Align } from '../../../atoms/Button';
+export interface IOptionSelectButton extends IOption {
+    notSelect?: boolean;
+    icon?: IKind;
+}
+export interface IOptionSelectButtonGroup {
+    label: string;
+    options: IOption[];
+}
+export interface ISelectButton extends Omit<ISelect, 'options'> {
+    options: IOptionSelectButton[] | IOptionSelectButtonGroup[];
+    onClickFirstItem?: (value: IOptionSelectButton) => void;
+    alignButton?: Align;
+}

package/dist/components/molecules/Selectable/SelectButton/index.d.ts

@@ -0,0 +1 @@
+export { default as SelectButton } from './SelectButton';

package/dist/components/molecules/Selectable/SelectCountry/index.d.ts

@@ -0,0 +1 @@
+export { default as SelectCountry } from './SelectCountry';

package/dist/components/molecules/Selectable/atoms/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ClearIndicator';
+export * from './Container';
+export * from './DropdownIndicator';
+export * from './Option';
+export * from './Placeholder';
+export * from './SingleValue';

package/dist/components/molecules/Selectable/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useCSS';

package/dist/components/molecules/Selectable/hooks/useCSS.d.ts

@@ -0,0 +1,5 @@
+import type { StylesConfig } from 'react-select';
+import type { ISelect } from '../Select';
+export declare function useCSS({ error, helpText }: ISelect): {
+    styles: StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>>;
+};

package/dist/components/molecules/Summary/index.d.ts

@@ -0,0 +1 @@
+export { default as Summary } from './Summary';

package/dist/components/molecules/Tab/ITab.d.ts

@@ -0,0 +1,13 @@
+export interface ITab {
+    children?: string | number | JSX.Element;
+    isDisabled?: boolean;
+    total?: number;
+}
+export declare type IState = {
+    selected: boolean;
+    isDisabled: boolean | undefined;
+};
+export interface ITabs {
+    tabs: Record<string, ITab>;
+    variant?: 'default' | 'fitted';
+}

package/dist/components/molecules/Tab/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tab } from './Tab';
+export * from './Tab';

package/dist/components/molecules/TabNav/ITabNav.d.ts

@@ -0,0 +1,10 @@
+import { IKind } from '../../atoms/Icon';
+declare type ITabNav = {
+    isSelected?: boolean;
+    title?: string;
+    icon?: IKind;
+    total?: number;
+    isSmall?: boolean;
+    [rest: string]: any;
+};
+export type { ITabNav };

package/dist/components/molecules/TabNav/index.d.ts

@@ -0,0 +1 @@
+export { default as TabNav } from './TabNav';

package/dist/components/organisms/Navigation/INavigation.d.ts

@@ -0,0 +1,8 @@
+import { IChildren } from '@/types';
+interface INavigation extends IChildren {
+    isSmall?: boolean;
+    [rest: string]: any;
+    className?: string;
+    onClick?: () => void;
+}
+export type { INavigation };

package/dist/components/organisms/Navigation/index.d.ts

@@ -0,0 +1 @@
+export { default as Navigation } from './Navigation';

package/dist/components/templates/Main/index.d.ts

@@ -0,0 +1 @@
+export { default as Main } from './Main';

package/dist/components/templates/Shipment/index.d.ts

@@ -0,0 +1 @@
+export { default as Shipment } from './Shipment';

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useTokens';

package/dist/hooks/useTokens.d.ts

@@ -0,0 +1,10 @@
+import type { IHeading, IText } from '../components';
+declare type Response = {
+    getWeight: () => string;
+    getFontSize: () => string;
+    getLineHeight: () => string;
+    getColorText: () => string;
+    getClassName: () => string;
+};
+export declare function useTokens(props: IHeading | IText): Response;
+export {};

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-import { Button } from './components';
-export { Button };
-//# sourceMappingURL=index.d.ts.map
+import { Button, Avatar, Heading, Text, Badge, Switch, Tab, InlineError, Icon, Select, AsyncSelect, SelectButton, SelectCountry, CardSelect, Dropdown, EmptyState, TabNav, RadioButton, Tracker, Modal, Tooltip, Navigation } from './components';
+export { Button, Avatar, Heading, Text, Badge, Switch, Tab, InlineError, Icon, Select, AsyncSelect, SelectButton, SelectCountry, CardSelect, Dropdown, EmptyState, TabNav, RadioButton, Tracker, Modal, Tooltip, Navigation };

package/dist/postcss.config.js

@@ -1,6 +1,3 @@
-/* eslint-env es6 */
-/* eslint-disable */
-
 const cssnano = require('cssnano')
 const tailwindcss = require('tailwindcss')
 
@@ -9,6 +6,8 @@ module.exports = {
     require('postcss-import'),
     tailwindcss('./tailwind.config.js'),
     process.env.NODE_ENV === 'production' ? require('autoprefixer') : null,
-    process.env.NODE_ENV === 'production' ? cssnano({preset: 'default'}) : null,
-  ],
+    process.env.NODE_ENV === 'production'
+      ? cssnano({ preset: 'default' })
+      : null
+  ]
 }