@aveonline/ui-react 1.15.1 → 1.15.3

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/atoms/Avatar/Avatar.d.ts

@@ -1,7 +1,7 @@
 import { IAvatar } from './IAvatar';
 /**
- * Atoms: Avatar
+ * Atom: Avatar
  * Are used to show a thumbnail representation of an individual or business in the interface
  */
-declare function Avatar({ size, isActive, url }: IAvatar): JSX.Element;
+declare function Avatar({ size, isActive, imageUrl, className }: IAvatar): JSX.Element;
 export default Avatar;

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

@@ -1,8 +1,11 @@
+export declare type ISizeAvatar = 'sm' | 'xs' | 'md' | 'lg' | 'custom';
 export interface IAvatar {
     /**
      * Adjust size
      */
-    size: 'sm' | 'xs' | 'md' | 'lg';
-    url?: string;
+    size: ISizeAvatar;
+    imageUrl?: string;
     isActive?: boolean;
+    /** className only working with size = custom and imageUrl */
+    className?: string;
 }

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

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

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

@@ -1,10 +1,15 @@
+import { ISizeAvatar } from '../../atoms/Avatar';
 declare type ItemDropdownUser = {
     title: string;
     onClick: () => void;
 };
 interface IDropdownUser {
     name: string;
-    url?: string;
+    avatar?: {
+        imageUrl?: string;
+        sizeMain?: ISizeAvatar;
+        sizeSecondary?: ISizeAvatar;
+    };
     email: string;
     items?: ItemDropdownUser[];
     footer?: {

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

@@ -0,0 +1,27 @@
+import { GroupBase } from 'react-select'
+import { IOptionSelectButton, ITooltipSelect } from '../..'
+
+declare module 'react-select/dist/declarations/src/Select' {
+  export interface Props<
+    Option,
+    IsMulti extends boolean,
+    Group extends GroupBase<Option>
+  > {
+    /**
+     * Our prop for control icon tooltip inside component atom Control
+     */
+    iconTooltip?: ITooltipSelect
+    /**
+     * Our prop for control click first element - SelectButton
+     */
+    addButton?: ((value: IOptionSelectButton) => void) | undefined
+    /**
+     * Our prop for verify inside atom SingleValue show ui
+     */
+    hasLabelPlaceholder?: boolean
+    /**
+     * Our prop for verify dropdown indicator - default true
+     */
+    isActiveDropdownIndicator?: boolean
+  }
+}