@aveonline/ui-react 1.10.1 → 1.11.0

package/README.md

@@ -1,126 +1,126 @@
-<div align="center">
-  <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.netlify.app/">Go Storybook</a>
-</div>
-
-## Before started
-
-For usage with tailwind config, install:
-
-```shell
-npm i @tailwindcss/forms -D
-```
-
-## Getting started
-
-Working with all config from this library or only components availables
-
-```shell
-npm i @aveonline/ui-react
-```
-
-## Usage with tailwind
-
-Import things into your JS app from the `@aveonline/ui-react` package.
-
-```ts
-import { Button } from '@aveonline/ui-react'
-```
-
-`tailwind.config.js`
-
-```ts
-/** @type {import('tailwindcss').Config} */
-
-const tailwindConfig = require('@aveonline/ui-react/tailwind.config.js')
-const { content, ...all } = tailwindConfig
-
-const config = {
-  content: [
-    ...content,
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './node_modules/@aveonline/ui-react/dist/*.{mjs,js}'
-  ],
-  ...all
-}
-
-module.exports = config
-```
-
-## Usage css
-
-Import things into your JS app from the `@aveonline/ui-react` package.
-
-```css
-/* global.css or tailwind.css local */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-```ts
-// import this lines at main.ts or root
-import './global.css' // Reference tailwind local
-import '@aveonline/ui-react/reset.css' // Only not usage tailwind
-import '@aveonline/ui-react/tokens.css' // Required
-import '@aveonline/ui-react/tailwind.css' // Required
-import '@aveonline/ui-react/index.css' // Required
-```
-
-## Example usage
-
-```html
-<!-- Class from library -->
-<div class="bg-letter-default">
-  <p class="text-letter-subdued">Hello human</p>
-</div>
-```
-
-## Developing @aveonline/ui-react
-
-Developing locally against Storybook is easy; run `npm run storybook`.
-
-```shell
-npm i
-```
-
-Tests
-
-Run `npm run test` to execute all unit test components.
-
-We use `vitest` and `testing-library/react` for unit/integration tests and [Chromatic](https://www.chromaticqa.com/) for visual regression testing.
-
-Open Storybook
-
-```shell
-npm run dev
-```
-
-ui-react production
-
-```shell
-npm run build
-```
-
-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
-```
+<div align="center">
+  <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.netlify.app/">Go Storybook</a>
+</div>
+
+## Before started
+
+For usage with tailwind config, install:
+
+```shell
+npm i @tailwindcss/forms -D
+```
+
+## Getting started
+
+Working with all config from this library or only components availables
+
+```shell
+npm i @aveonline/ui-react
+```
+
+## Usage with tailwind
+
+Import things into your JS app from the `@aveonline/ui-react` package.
+
+```ts
+import { Button } from '@aveonline/ui-react'
+```
+
+`tailwind.config.js`
+
+```ts
+/** @type {import('tailwindcss').Config} */
+
+const tailwindConfig = require('@aveonline/ui-react/tailwind.config.js')
+const { content, ...all } = tailwindConfig
+
+const config = {
+  content: [
+    ...content,
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './node_modules/@aveonline/ui-react/dist/*.{mjs,js}'
+  ],
+  ...all
+}
+
+module.exports = config
+```
+
+## Usage css
+
+Import things into your JS app from the `@aveonline/ui-react` package.
+
+```css
+/* global.css or tailwind.css local */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+```ts
+// import this lines at main.ts or root
+import './global.css' // Reference tailwind local
+import '@aveonline/ui-react/reset.css' // Only not usage tailwind
+import '@aveonline/ui-react/tokens.css' // Required
+import '@aveonline/ui-react/tailwind.css' // Required
+import '@aveonline/ui-react/index.css' // Required
+```
+
+## Example usage
+
+```html
+<!-- Class from library -->
+<div class="bg-letter-default">
+  <p class="text-letter-subdued">Hello human</p>
+</div>
+```
+
+## Developing @aveonline/ui-react
+
+Developing locally against Storybook is easy; run `npm run storybook`.
+
+```shell
+npm i
+```
+
+Tests
+
+Run `npm run test` to execute all unit test components.
+
+We use `vitest` and `testing-library/react` for unit/integration tests and [Chromatic](https://www.chromaticqa.com/) for visual regression testing.
+
+Open Storybook
+
+```shell
+npm run dev
+```
+
+ui-react production
+
+```shell
+npm run build
+```
+
+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/components/index.d.ts

@@ -28,8 +28,9 @@ export * from './molecules/Summary';
 export * from './molecules/Field';
 export * from './molecules/Flag';
 export * from './molecules/DropdownUser';
-export * from './molecules/Card/Select';
 export * from './molecules/Table/Table';
+export * from './molecules/Card/Select';
+export * from './molecules/Filter/FilterSearchMultiple';
 export * from './organisms/Navigation';
 export * from './templates/Main';
 export * from './templates/Shipment';

package/dist/components/molecules/Filter/FilterSearchMultiple/FilterSearchMultiple.d.ts

@@ -0,0 +1,2 @@
+import { IFilterSearchMultiple } from './IFilterSearchMultiple';
+export default function FilterSearchMultiple({ options, title, titleNotFound, onSelected }: IFilterSearchMultiple): JSX.Element;

package/dist/components/molecules/Filter/FilterSearchMultiple/IFilterSearchMultiple.d.ts

@@ -0,0 +1,10 @@
+export declare type IOptionSelect = {
+    label: string;
+    value: string;
+};
+export interface IFilterSearchMultiple {
+    title: string;
+    titleNotFound?: string;
+    options: IOptionSelect[];
+    onSelected: (state: IOptionSelect[]) => void;
+}

package/dist/components/molecules/Filter/FilterSearchMultiple/index.d.ts

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

package/dist/components/molecules/Selectable/AsyncCreatableSelect/AsyncCreatableSelect.d.ts

@@ -3,5 +3,5 @@ import type { IAsyncCreatableSelect } from './IAsyncCreatableSelect';
  * Molecule: AsyncCreatableSelect
  * Async select lets merchants choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface. Data from network. To allow new values
  */
-declare function AsyncCreatableSelect({ placeholder, id, name, error, helpText, hasLabelPlaceholder, isDisabled, isClearable, defaultValue, onChange, isLoading, loadOptions, isError, showErrorText, onBlur, value, menuIsOpen, allowCreateWhileLoading, createOptionPosition, logo, instanceId, loadingMessage, noOptionsMessage, iconTooltip }: IAsyncCreatableSelect): JSX.Element;
+declare function AsyncCreatableSelect({ placeholder, id, name, error, helpText, hasLabelPlaceholder, isDisabled, isClearable, defaultValue, onChange, isLoading, loadOptions, isError, showErrorText, onBlur, value, menuIsOpen, allowCreateWhileLoading, createOptionPosition, logo, instanceId, loadingMessage, noOptionsMessage, iconTooltip, isActiveDropdownIndicator }: IAsyncCreatableSelect): JSX.Element;
 export default AsyncCreatableSelect;

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

@@ -3,5 +3,5 @@ import type { IAsyncSelect } from './IAsyncSelect';
  * Molecule: AsyncSelect
  * Async select lets merchants choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface. Data from network
  */
-declare function AsyncSelect({ placeholder, id, name, error, helpText, hasLabelPlaceholder, isDisabled, isClearable, defaultValue, onChange, isLoading, loadOptions, isError, showErrorText, onBlur, value, menuIsOpen, instanceId, loadingMessage, noOptionsMessage, logo, iconTooltip }: IAsyncSelect): JSX.Element;
+declare function AsyncSelect({ placeholder, id, name, error, helpText, hasLabelPlaceholder, isDisabled, isClearable, defaultValue, onChange, isLoading, loadOptions, isError, showErrorText, onBlur, value, menuIsOpen, instanceId, loadingMessage, noOptionsMessage, logo, iconTooltip, isActiveDropdownIndicator }: IAsyncSelect): JSX.Element;
 export default AsyncSelect;

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

@@ -79,7 +79,11 @@ export interface ISelect {
     noOptionsMessage?: string;
     logo?: IKindLogo;
     /**
-     * Active tooltip for icon right
+     * Active tooltip for icon right verify dropdown indicator - default true
      */
     iconTooltip?: ITooltipSelect;
+    /**
+     * Verify dropdown indicator - default true
+     */
+    isActiveDropdownIndicator?: boolean;
 }

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

@@ -1,7 +1,7 @@
 import type { ISelect } from './ISelect';
 /**
- * Atom: Select
+ * Molecule: Select
  * Select lets merchants choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface.
  */
-declare function Select({ options, placeholder, defaultValue, isDisabled, id, name, helpText, hasLabelPlaceholder, onChange, isSearchable, isClearable, error, isError, showErrorText, onBlur, value, instanceId, menuIsOpen, loadingMessage, noOptionsMessage, logo, iconTooltip }: ISelect): JSX.Element;
+declare function Select({ options, placeholder, defaultValue, isDisabled, id, name, helpText, hasLabelPlaceholder, onChange, isSearchable, isClearable, error, isError, showErrorText, onBlur, value, instanceId, menuIsOpen, loadingMessage, noOptionsMessage, logo, iconTooltip, isActiveDropdownIndicator }: ISelect): JSX.Element;
 export default Select;

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

@@ -3,5 +3,5 @@ import type { ISelectButton } from './ISelectButton';
  * Molecule: SelectButton
  * Select with button for first item lets merchants choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface.
  */
-declare function SelectButton({ options, placeholder, defaultValue, isDisabled, id, error, name, helpText, hasLabelPlaceholder, onChange, isSearchable, isClearable, alignButton, onClickFirstItem, isError, showErrorText, onBlur, menuIsOpen, instanceId, value, loadingMessage, noOptionsMessage, logo, iconTooltip }: ISelectButton): JSX.Element;
+declare function SelectButton({ options, placeholder, defaultValue, isDisabled, id, error, name, helpText, hasLabelPlaceholder, onChange, isSearchable, isClearable, alignButton, onClickFirstItem, isError, showErrorText, onBlur, menuIsOpen, instanceId, value, loadingMessage, noOptionsMessage, logo, iconTooltip, isActiveDropdownIndicator }: ISelectButton): JSX.Element;
 export default SelectButton;

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

@@ -1,4 +1,2 @@
-import { ITooltipSelect } from '../../..';
-export declare const Control: ({ iconTooltip, ...allProps }: {
-    iconTooltip?: ITooltipSelect | undefined;
-}) => JSX.Element;
+import type { ControlProps } from 'react-select';
+export declare const Control: ({ children, ...props }: ControlProps) => JSX.Element;

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

@@ -1,3 +1,2 @@
-export declare const DropdownIndicator: ({ isActive, ...allProps }: {
-    isActive: boolean;
-}) => JSX.Element;
+import type { DropdownIndicatorProps } from 'react-select';
+export declare const DropdownIndicator: (props: DropdownIndicatorProps) => JSX.Element;

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

@@ -1,3 +1,2 @@
-export declare const SingleValue: ({ hasLabelPlaceholder, ...allProps }: {
-    hasLabelPlaceholder?: boolean | undefined;
-}) => JSX.Element;
+import { SingleValueProps } from 'react-select';
+export declare const SingleValue: (props: SingleValueProps) => JSX.Element;

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export * from './components/molecules/Flag';
 export * from './components/molecules/DropdownUser';
 export * from './components/molecules/Table/Table';
 export * from './components/molecules/Card/Select';
+export * from './components/molecules/Filter/FilterSearchMultiple';
 export * from './components/organisms/Navigation';
 export * from './components/templates/Main';
 export * from './components/templates/Shipment';