@aveonline/ui-react 1.6.12 → 1.7.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

@@ -27,6 +27,7 @@ export * from './molecules/Header';
 export * from './molecules/Summary';
 export * from './molecules/Field';
 export * from './molecules/Flag';
+export * from './molecules/DropdownUser';
 export * from './molecules/Card/Select';
 export * from './organisms/Navigation';
 export * from './templates/Main';

package/dist/components/molecules/DropdownUser/DropdownUser.d.ts

@@ -0,0 +1,3 @@
+import { IDropdownUser } from './IDropdownUser';
+declare function DropdownUser({ name, email, items, onExit }: IDropdownUser): JSX.Element;
+export default DropdownUser;

package/dist/components/molecules/DropdownUser/IDropdownUser.d.ts

@@ -0,0 +1,11 @@
+declare type ItemDropdownUser = {
+    title: string;
+    onClick: () => void;
+};
+interface IDropdownUser {
+    name: string;
+    email: string;
+    items: ItemDropdownUser[];
+    onExit: () => void;
+}
+export type { IDropdownUser, ItemDropdownUser };

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

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

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

@@ -3,5 +3,5 @@ import { IHeader } from './IHeader';
  * Atom: Header
  * The top bar is a header component that allows merchants to access menus, and navigate by clicking on the logo. It’s always visible at the top of interfaces.
  */
-declare function Header({ hasLogo, className, ...rest }: IHeader): JSX.Element;
+declare function Header({ hasLogo, className, dropdownUser, ...rest }: IHeader): JSX.Element;
 export default Header;

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

@@ -1,6 +1,8 @@
+import { IDropdownUser } from '../DropdownUser';
 declare type IHeader = {
     hasLogo?: boolean;
     className?: string;
+    dropdownUser: IDropdownUser;
     [rest: string]: any;
 };
 export type { IHeader };

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 }: 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 }: 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 }: IAsyncSelect): JSX.Element;
+declare function AsyncSelect({ placeholder, id, name, error, helpText, hasLabelPlaceholder, isDisabled, isClearable, defaultValue, onChange, isLoading, loadOptions, isError, showErrorText, onBlur, value, menuIsOpen, instanceId }: IAsyncSelect): JSX.Element;
 export default AsyncSelect;

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

@@ -66,6 +66,8 @@ export interface ISelect {
      * Open close menu
      */
     menuIsOpen?: boolean;
+    /** Define an id prefix for the select components e.g. {your-id}-value */
+    instanceId?: number | string;
     ref?: any;
     value?: any;
 }

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

@@ -3,5 +3,5 @@ import type { ISelect } from './ISelect';
  * Atom: 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, menuIsOpen }: ISelect): JSX.Element;
+declare function Select({ options, placeholder, defaultValue, isDisabled, id, name, helpText, hasLabelPlaceholder, onChange, isSearchable, isClearable, error, isError, showErrorText, onBlur, value, instanceId, menuIsOpen }: 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, value }: 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 }: ISelectButton): JSX.Element;
 export default SelectButton;

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

@@ -3,5 +3,5 @@ import { ISelect } from '../Select/ISelect';
  * Molecule: SelectCountry
  * 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 SelectCountry({ id, name, placeholder, options, defaultValue, isDisabled, error, isSearchable, helpText, onChange, isClearable, isError, showErrorText, onBlur, menuIsOpen, value }: ISelect): JSX.Element;
+declare function SelectCountry({ id, name, placeholder, options, defaultValue, isDisabled, error, isSearchable, helpText, onChange, isClearable, isError, showErrorText, onBlur, menuIsOpen, value, instanceId }: ISelect): JSX.Element;
 export default SelectCountry;

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export * from './components/molecules/Header';
 export * from './components/molecules/Summary';
 export * from './components/molecules/Field';
 export * from './components/molecules/Flag';
+export * from './components/molecules/DropdownUser';
 export * from './components/molecules/Card/Select';
 export * from './components/organisms/Navigation';
 export * from './components/templates/Main';