@aveonline/ui-react 1.15.4 → 1.15.6

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/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
+  }
+}

package/dist/components/molecules/Table/ITable.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, RowData, Table } from '@tanstack/react-table';
 interface IPropsTable<T> {
     defaultData: Array<T>;
     columns: Array<ColumnDef<any, any>>;
@@ -6,6 +6,8 @@ interface IPropsTable<T> {
     placeholder?: string;
     hasPagination?: boolean;
     paginationOptionList?: Array<number>;
+    sortTable?: boolean;
+    sortItem?: Array<ISortItem>;
 }
 interface IPagination {
     pageIndex: number;
@@ -18,4 +20,13 @@ interface IPagination {
     getCanNextPage: boolean;
     paginationOptionList?: Array<number>;
 }
-export type { IPropsTable, ColumnDef, IPagination };
+interface ISortTable<T extends RowData> {
+    table: Table<T>;
+    sortItem: Array<ISortItem>;
+}
+interface ISortItem {
+    id: string;
+    up: string;
+    down: string;
+}
+export type { IPropsTable, ColumnDef, IPagination, ISortTable };

package/dist/components/molecules/Table/InputSearch.d.ts

@@ -1,7 +1,8 @@
 import { InputHTMLAttributes } from 'react';
-declare function InputSearch({ value: initialValue, onChange, debounce, ...props }: {
+declare function InputSearch({ value: initialValue, onChange, debounce, sortTable, ...props }: {
     value: string | number;
     onChange: (value: string | number) => void;
     debounce?: number;
+    sortTable?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>): JSX.Element;
 export default InputSearch;

package/dist/components/molecules/Table/SortTable.d.ts

@@ -0,0 +1,4 @@
+import { RowData } from '@tanstack/react-table';
+import { ISortTable } from './ITable';
+declare function SortTable<T extends RowData>({ table, sortItem }: ISortTable<T>): JSX.Element;
+export default SortTable;

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

@@ -5,5 +5,5 @@ import { IPropsTable } from './ITable';
  * part of data set, a data table lets merchants view details from the entire set. This helps merchants compare and
  * analyze the data.
  */
-declare function Table<T>({ searchFilter, defaultData, columns, placeholder, hasPagination, paginationOptionList }: IPropsTable<T>): JSX.Element;
+declare function Table<T>({ searchFilter, defaultData, columns, placeholder, hasPagination, paginationOptionList, sortTable, sortItem }: IPropsTable<T>): JSX.Element;
 export default Table;