@axzydev/axzy_ui_system 1.2.13 → 1.2.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +43 -0
- package/dist/index.cjs +6490 -6388
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +169 -110
- package/dist/index.d.ts +169 -110
- package/dist/index.js +6516 -6414
- package/dist/index.js.map +1 -1
- package/package.json +4 -2
- package/src/App.tsx +86 -81
- package/src/components/{avatar → atoms/avatar}/avatar.doc.mdx +2 -2
- package/src/components/{avatar → atoms/avatar}/avatar.stories.tsx +1 -2
- package/src/components/{avatar → atoms/avatar}/avatar.tsx +1 -1
- package/src/components/{badget → atoms/badget}/badget.doc.mdx +4 -4
- package/src/components/{badget → atoms/badget}/badget.props.ts +1 -1
- package/src/components/{badget → atoms/badget}/badget.stories.tsx +1 -2
- package/src/components/{badget → atoms/badget}/badget.tsx +3 -3
- package/src/components/{button → atoms/button}/button.doc.mdx +3 -3
- package/src/components/{button → atoms/button}/button.props.ts +3 -3
- package/src/components/{button → atoms/button}/button.stories.tsx +1 -2
- package/src/components/{button → atoms/button}/button.tsx +7 -7
- package/src/components/{checkbox → atoms/checkbox}/checkbox.doc.mdx +2 -2
- package/src/components/{checkbox → atoms/checkbox}/checkbox.stories.tsx +2 -3
- package/src/components/{checkbox → atoms/checkbox}/checkbox.tsx +1 -1
- package/src/components/{divider → atoms/divider}/divider.doc.mdx +2 -2
- package/src/components/{divider → atoms/divider}/divider.stories.tsx +3 -4
- package/src/components/{flex → atoms/flex}/flex.doc.mdx +2 -2
- package/src/components/{flex → atoms/flex}/flex.stories.tsx +1 -2
- package/src/components/{grid → atoms/grid}/grid.doc.mdx +2 -2
- package/src/components/{grid → atoms/grid}/grid.stories.tsx +1 -2
- package/src/components/{image → atoms/image}/image.doc.mdx +2 -2
- package/src/components/{image → atoms/image}/image.stories.tsx +1 -2
- package/src/components/{input → atoms/input}/input.doc.mdx +3 -3
- package/src/components/{input → atoms/input}/input.props.ts +3 -3
- package/src/components/{input → atoms/input}/input.stories.tsx +2 -4
- package/src/components/{input → atoms/input}/input.tsx +5 -14
- package/src/components/{loader → atoms/loader}/loader.doc.mdx +2 -2
- package/src/components/{loader → atoms/loader}/loader.stories.tsx +2 -3
- package/src/components/{loader → atoms/loader}/loader.tsx +1 -1
- package/src/components/{popover → atoms/popover}/popover.doc.mdx +2 -2
- package/src/components/{popover → atoms/popover}/popover.stories.tsx +3 -4
- package/src/components/{progress → atoms/progress}/progress.doc.mdx +2 -2
- package/src/components/{progress → atoms/progress}/progress.stories.tsx +2 -3
- package/src/components/{radio → atoms/radio}/radio.doc.mdx +2 -2
- package/src/components/{radio → atoms/radio}/radio.stories.tsx +1 -3
- package/src/components/{radio → atoms/radio}/radio.tsx +1 -1
- package/src/components/{segmented-control → atoms/segmented-control}/segmented-control.doc.mdx +2 -2
- package/src/components/{segmented-control → atoms/segmented-control}/segmented-control.stories.tsx +1 -2
- package/src/components/{segmented-control → atoms/segmented-control}/segmented-control.tsx +1 -1
- package/src/components/{skeleton → atoms/skeleton}/skeleton.doc.mdx +2 -2
- package/src/components/{skeleton → atoms/skeleton}/skeleton.stories.tsx +2 -3
- package/src/components/{slide → atoms/slide}/slide.doc.mdx +2 -2
- package/src/components/{slide → atoms/slide}/slide.stories.tsx +1 -2
- package/src/components/{slider → atoms/slider}/slider.doc.mdx +2 -2
- package/src/components/{slider → atoms/slider}/slider.stories.tsx +1 -2
- package/src/components/{slider → atoms/slider}/slider.tsx +1 -1
- package/src/components/{stack → atoms/stack}/stack.doc.mdx +2 -2
- package/src/components/{stack → atoms/stack}/stack.stories.tsx +2 -3
- package/src/components/{text → atoms/text}/text.doc.mdx +2 -2
- package/src/components/{text → atoms/text}/text.stories.tsx +1 -2
- package/src/components/{textarea → atoms/textarea}/textarea.doc.mdx +2 -2
- package/src/components/{textarea → atoms/textarea}/textarea.props.ts +0 -2
- package/src/components/{textarea → atoms/textarea}/textarea.stories.tsx +1 -2
- package/src/components/{textarea → atoms/textarea}/textarea.tsx +1 -1
- package/src/components/{tooltip → atoms/tooltip}/tooltip.doc.mdx +2 -2
- package/src/components/{tooltip → atoms/tooltip}/tooltip.stories.tsx +2 -3
- package/src/components/{tooltip → atoms/tooltip}/tooltip.tsx +1 -1
- package/src/components/isolation/isolation.stories.tsx +202 -0
- package/src/components/{alert → molecules/alert}/alert.doc.mdx +2 -2
- package/src/components/{alert → molecules/alert}/alert.stories.tsx +1 -2
- package/src/components/{alert → molecules/alert}/alert.tsx +1 -2
- package/src/components/{breadcrumbs → molecules/breadcrumbs}/breadcrumbs.doc.mdx +2 -2
- package/src/components/{breadcrumbs → molecules/breadcrumbs}/breadcrumbs.stories.tsx +1 -2
- package/src/components/{breadcrumbs → molecules/breadcrumbs}/breadcrumbs.tsx +1 -1
- package/src/components/{calendar → molecules/calendar}/calendar.doc.mdx +2 -2
- package/src/components/{calendar → molecules/calendar}/calendar.stories.tsx +1 -2
- package/src/components/{calendar → molecules/calendar}/calendar.tsx +42 -42
- package/src/components/molecules/calendar/index.ts +2 -0
- package/src/components/{card → molecules/card}/card.doc.mdx +2 -2
- package/src/components/{card → molecules/card}/card.stories.tsx +2 -3
- package/src/components/{card → molecules/card}/card.tsx +4 -4
- package/src/components/{date-picker → molecules/date-picker}/date-picker.doc.mdx +3 -3
- package/src/components/{date-picker → molecules/date-picker}/date-picker.props.ts +1 -1
- package/src/components/{date-picker → molecules/date-picker}/date-picker.stories.tsx +1 -3
- package/src/components/{date-picker → molecules/date-picker}/datePicker.tsx +3 -3
- package/src/components/{empty-state → molecules/empty-state}/empty-state.doc.mdx +3 -3
- package/src/components/{empty-state → molecules/empty-state}/empty-state.stories.tsx +3 -4
- package/src/components/{empty-state → molecules/empty-state}/empty-state.tsx +1 -1
- package/src/components/{form-header → molecules/form-header}/form-header.doc.mdx +2 -2
- package/src/components/{form-header → molecules/form-header}/form-header.stories.tsx +1 -2
- package/src/components/{form-header → molecules/form-header}/form-header.tsx +2 -2
- package/src/components/{pagination → molecules/pagination}/pagination.doc.mdx +2 -2
- package/src/components/{pagination → molecules/pagination}/pagination.stories.tsx +1 -2
- package/src/components/{pagination → molecules/pagination}/pagination.tsx +8 -8
- package/src/components/{search-select → molecules/search-select}/index.ts +1 -1
- package/src/components/{search-select → molecules/search-select}/search-select.doc.mdx +2 -2
- package/src/components/{search-select → molecules/search-select}/search-select.props.ts +3 -0
- package/src/components/{search-select → molecules/search-select}/search-select.stories.tsx +1 -2
- package/src/components/{search-select → molecules/search-select}/search-select.tsx +8 -6
- package/src/components/{select → molecules/select}/select.doc.mdx +2 -2
- package/src/components/{select → molecules/select}/select.stories.tsx +1 -2
- package/src/components/{select → molecules/select}/select.tsx +8 -16
- package/src/components/{stat-card → molecules/stat-card}/stat-card.doc.mdx +2 -2
- package/src/components/{stat-card → molecules/stat-card}/stat-card.stories.tsx +2 -3
- package/src/components/{stat-card → molecules/stat-card}/stat-card.tsx +1 -1
- package/src/components/{stepper → molecules/stepper}/stepper.doc.mdx +2 -2
- package/src/components/{stepper → molecules/stepper}/stepper.stories.tsx +1 -2
- package/src/components/{stepper → molecules/stepper}/stepper.tsx +9 -10
- package/src/components/{table → molecules/table}/table.doc.mdx +2 -2
- package/src/components/{table → molecules/table}/table.stories.tsx +5 -22
- package/src/components/{table → molecules/table}/table.tsx +5 -15
- package/src/components/{tabs → molecules/tabs}/tabs.doc.mdx +2 -2
- package/src/components/{tabs → molecules/tabs}/tabs.stories.tsx +1 -2
- package/src/components/{tabs → molecules/tabs}/tabs.tsx +1 -1
- package/src/components/{time-picker → molecules/time-picker}/timePicker.doc.mdx +3 -3
- package/src/components/{time-picker → molecules/time-picker}/timePicker.props.ts +4 -2
- package/src/components/{time-picker → molecules/time-picker}/timePicker.stories.tsx +3 -4
- package/src/components/{time-picker → molecules/time-picker}/timePicker.tsx +5 -5
- package/src/components/{confirm-dialog → organisms/confirm-dialog}/confirm-dialog.doc.mdx +2 -2
- package/src/components/{confirm-dialog → organisms/confirm-dialog}/confirm-dialog.stories.tsx +2 -3
- package/src/components/{confirm-dialog → organisms/confirm-dialog}/confirm-dialog.tsx +4 -4
- package/src/components/{data-table → organisms/data-table}/ITDataTable.doc.mdx +2 -2
- package/src/components/{data-table → organisms/data-table}/ITDataTable.stories.tsx +3 -4
- package/src/components/{data-table → organisms/data-table}/dataTable.props.ts +1 -1
- package/src/components/{data-table → organisms/data-table}/dataTable.tsx +7 -8
- package/src/components/{dialog → organisms/dialog}/dialog.doc.mdx +2 -2
- package/src/components/{dialog → organisms/dialog}/dialog.stories.tsx +3 -5
- package/src/components/{dialog → organisms/dialog}/dialog.tsx +2 -2
- package/src/components/{drawer → organisms/drawer}/drawer.doc.mdx +2 -2
- package/src/components/{drawer → organisms/drawer}/drawer.stories.tsx +2 -3
- package/src/components/{drawer → organisms/drawer}/drawer.tsx +1 -1
- package/src/components/{dropfile → organisms/dropfile}/dropfile.doc.mdx +3 -3
- package/src/components/{dropfile → organisms/dropfile}/dropfile.props.ts +8 -4
- package/src/components/{dropfile → organisms/dropfile}/dropfile.stories.tsx +2 -5
- package/src/components/{dropfile → organisms/dropfile}/dropfile.tsx +25 -12
- package/src/components/{form-builder → organisms/form-builder}/fieldRenderer.tsx +30 -20
- package/src/components/{form-builder → organisms/form-builder}/formBuilder.context.tsx +3 -2
- package/src/components/{form-builder → organisms/form-builder}/formBuilder.doc.mdx +2 -2
- package/src/components/{form-builder → organisms/form-builder}/formBuilder.stories.tsx +0 -1
- package/src/components/{form-builder → organisms/form-builder}/formBuilder.tsx +4 -5
- package/src/components/{form-builder → organisms/form-builder}/useFormBuilder.ts +4 -4
- package/src/components/{navbar → organisms/navbar}/navbar.doc.mdx +2 -2
- package/src/components/{navbar → organisms/navbar}/navbar.stories.tsx +1 -2
- package/src/components/{navbar → organisms/navbar}/navbar.tsx +1 -1
- package/src/components/{page-header → organisms/page-header}/page-header.doc.mdx +2 -2
- package/src/components/{page-header → organisms/page-header}/page-header.props.ts +1 -1
- package/src/components/{page-header → organisms/page-header}/page-header.stories.tsx +5 -6
- package/src/components/{page-header → organisms/page-header}/page-header.tsx +2 -2
- package/src/components/{searchTable → organisms/searchTable}/components/EditableCell.tsx +4 -5
- package/src/components/{searchTable → organisms/searchTable}/components/PaginationControls.tsx +6 -6
- package/src/components/{searchTable → organisms/searchTable}/components/PaginationInfo.tsx +1 -1
- package/src/components/{searchTable → organisms/searchTable}/components/SearchAndSortBar.tsx +3 -3
- package/src/components/{searchTable → organisms/searchTable}/components/SearchInput.tsx +1 -1
- package/src/components/{searchTable → organisms/searchTable}/components/SortButton.tsx +1 -1
- package/src/components/{searchTable → organisms/searchTable}/components/TableEmptyState.tsx +1 -1
- package/src/components/{searchTable → organisms/searchTable}/components/TableHeaderCell.tsx +1 -1
- package/src/components/{searchTable → organisms/searchTable}/searchTable.doc.mdx +2 -2
- package/src/components/{searchTable → organisms/searchTable}/searchTable.stories.tsx +1 -2
- package/src/components/{searchTable → organisms/searchTable}/searchTable.tsx +1 -2
- package/src/components/{sidebar → organisms/sidebar}/sidebar.doc.mdx +2 -2
- package/src/components/{sidebar → organisms/sidebar}/sidebar.stories.tsx +1 -2
- package/src/components/{sidebar → organisms/sidebar}/sidebar.tsx +45 -43
- package/src/components/{toast → organisms/toast}/toast.doc.mdx +2 -2
- package/src/components/{toast → organisms/toast}/toast.stories.tsx +2 -3
- package/src/components/{toast → organisms/toast}/toast.tsx +1 -2
- package/src/components/{topbar → organisms/topbar}/topbar.doc.mdx +2 -2
- package/src/components/{topbar → organisms/topbar}/topbar.stories.tsx +1 -2
- package/src/components/{topbar → organisms/topbar}/topbar.tsx +25 -25
- package/src/components/{triple-filter → organisms/triple-filter}/tripleFilter.doc.mdx +2 -2
- package/src/components/{triple-filter → organisms/triple-filter}/tripleFilter.props.ts +0 -1
- package/src/components/{triple-filter → organisms/triple-filter}/tripleFilter.stories.tsx +0 -1
- package/src/components/{triple-filter → organisms/triple-filter}/tripleFilter.tsx +1 -1
- package/src/components/{layout → templates/layout}/layout.doc.mdx +2 -2
- package/src/components/{layout → templates/layout}/layout.props.ts +2 -2
- package/src/components/{layout → templates/layout}/layout.stories.tsx +1 -2
- package/src/components/{layout → templates/layout}/layout.tsx +2 -2
- package/src/components/{page → templates/page}/page.doc.mdx +2 -2
- package/src/components/{page → templates/page}/page.props.ts +1 -1
- package/src/components/{page → templates/page}/page.stories.tsx +6 -7
- package/src/components/{page → templates/page}/page.tsx +6 -6
- package/src/components/theme-provider/themePresets.ts +154 -0
- package/src/components/theme-provider/themeProvider.doc.mdx +10 -2
- package/src/components/theme-provider/themeProvider.props.ts +6 -0
- package/src/components/theme-provider/themeProvider.stories.tsx +3 -4
- package/src/components/theme-provider/themeProvider.tsx +210 -268
- package/src/hooks/useEditableRow.ts +1 -1
- package/src/index.css +36 -86
- package/src/index.ts +97 -97
- package/src/showcases/DataShowcases.tsx +4 -8
- package/src/showcases/FeedbackShowcases.tsx +6 -6
- package/src/showcases/FormShowcases.tsx +7 -7
- package/src/showcases/GettingStartedShowcase.tsx +8 -9
- package/src/showcases/HomeShowcase.tsx +12 -12
- package/src/showcases/LayoutPrimitivesShowcases.tsx +36 -57
- package/src/showcases/PageShowcases.tsx +41 -53
- package/src/showcases/ShowcaseLayout.tsx +1 -2
- package/src/showcases/SizesShowcase.tsx +85 -0
- package/src/showcases/StructureShowcases.tsx +31 -33
- package/src/theme/theme-context.ts +37 -0
- package/src/theme/theme.ts +71 -64
- package/src/theme/theme.types.ts +41 -0
- package/src/types/badget.types.ts +3 -3
- package/src/types/button.types.ts +3 -3
- package/src/types/sizes.types.ts +2 -1
- package/src/utils/styles.ts +37 -0
- package/src/components/calendar/index.ts +0 -3
- package/src/components/stepper/stepper.css +0 -26
- package/src/components/toast/toast.css +0 -32
- package/src/types/input.types.ts +0 -14
- /package/src/components/{avatar → atoms/avatar}/avatar.props.ts +0 -0
- /package/src/components/{checkbox → atoms/checkbox}/checkbox.props.ts +0 -0
- /package/src/components/{divider → atoms/divider}/divider.props.ts +0 -0
- /package/src/components/{divider → atoms/divider}/divider.tsx +0 -0
- /package/src/components/{flex → atoms/flex}/flex.props.ts +0 -0
- /package/src/components/{flex → atoms/flex}/flex.tsx +0 -0
- /package/src/components/{grid → atoms/grid}/grid.props.ts +0 -0
- /package/src/components/{grid → atoms/grid}/grid.tsx +0 -0
- /package/src/components/{image → atoms/image}/image.props.ts +0 -0
- /package/src/components/{image → atoms/image}/image.tsx +0 -0
- /package/src/components/{loader → atoms/loader}/loader.props.ts +0 -0
- /package/src/components/{popover → atoms/popover}/popover.props.ts +0 -0
- /package/src/components/{popover → atoms/popover}/popover.tsx +0 -0
- /package/src/components/{progress → atoms/progress}/progress.props.ts +0 -0
- /package/src/components/{progress → atoms/progress}/progress.tsx +0 -0
- /package/src/components/{radio → atoms/radio}/radio.props.ts +0 -0
- /package/src/components/{segmented-control → atoms/segmented-control}/segmented-control.props.ts +0 -0
- /package/src/components/{skeleton → atoms/skeleton}/skeleton.props.ts +0 -0
- /package/src/components/{skeleton → atoms/skeleton}/skeleton.tsx +0 -0
- /package/src/components/{slide → atoms/slide}/slide.props.ts +0 -0
- /package/src/components/{slide → atoms/slide}/slide.tsx +0 -0
- /package/src/components/{slider → atoms/slider}/slider.props.ts +0 -0
- /package/src/components/{stack → atoms/stack}/stack.props.ts +0 -0
- /package/src/components/{stack → atoms/stack}/stack.tsx +0 -0
- /package/src/components/{text → atoms/text}/text.props.ts +0 -0
- /package/src/components/{text → atoms/text}/text.tsx +0 -0
- /package/src/components/{tooltip → atoms/tooltip}/tooltip.props.ts +0 -0
- /package/src/components/{alert → molecules/alert}/alert.props.ts +0 -0
- /package/src/components/{breadcrumbs → molecules/breadcrumbs}/breadcrumbs.props.ts +0 -0
- /package/src/components/{calendar → molecules/calendar}/calendar.props.ts +0 -0
- /package/src/components/{card → molecules/card}/card.props.ts +0 -0
- /package/src/components/{empty-state → molecules/empty-state}/empty-state.props.ts +0 -0
- /package/src/components/{form-header → molecules/form-header}/form-header.props.ts +0 -0
- /package/src/components/{pagination → molecules/pagination}/pagination.props.ts +0 -0
- /package/src/components/{select → molecules/select}/select.props.ts +0 -0
- /package/src/components/{stat-card → molecules/stat-card}/stat-card.props.ts +0 -0
- /package/src/components/{stepper → molecules/stepper}/stepper.props.ts +0 -0
- /package/src/components/{table → molecules/table}/table.props.ts +0 -0
- /package/src/components/{tabs → molecules/tabs}/tabs.props.ts +0 -0
- /package/src/components/{confirm-dialog → organisms/confirm-dialog}/confirm-dialog.props.ts +0 -0
- /package/src/components/{dialog → organisms/dialog}/dialog.props.ts +0 -0
- /package/src/components/{drawer → organisms/drawer}/drawer.props.ts +0 -0
- /package/src/components/{form-builder → organisms/form-builder}/formBuilder.props.ts +0 -0
- /package/src/components/{navbar → organisms/navbar}/navbar.props.ts +0 -0
- /package/src/components/{searchTable → organisms/searchTable}/components/TableHeader.tsx +0 -0
- /package/src/components/{searchTable → organisms/searchTable}/components/TableRow.tsx +0 -0
- /package/src/components/{searchTable → organisms/searchTable}/searchTable.props.ts +0 -0
- /package/src/components/{sidebar → organisms/sidebar}/sidebar.props.ts +0 -0
- /package/src/components/{toast → organisms/toast}/toast.props.ts +0 -0
- /package/src/components/{topbar → organisms/topbar}/topbar.props.ts +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import type { Meta
|
|
2
|
-
import ITDialog from '
|
|
1
|
+
import type { Meta } from '@storybook/react';
|
|
2
|
+
import ITDialog from '@/components/organisms/dialog/dialog';
|
|
3
3
|
import { useState } from 'react';
|
|
4
|
-
import ITButton from '
|
|
4
|
+
import ITButton from '@/components/atoms/button/button';
|
|
5
5
|
|
|
6
6
|
const meta = {
|
|
7
7
|
title: 'Components/Feedback/ITDialog',
|
|
@@ -9,7 +9,6 @@ const meta = {
|
|
|
9
9
|
parameters: {
|
|
10
10
|
layout: 'centered',
|
|
11
11
|
},
|
|
12
|
-
tags: ['autodocs'],
|
|
13
12
|
argTypes: {
|
|
14
13
|
isOpen: { control: 'boolean' },
|
|
15
14
|
onClose: { action: 'closed' },
|
|
@@ -19,7 +18,6 @@ const meta = {
|
|
|
19
18
|
} satisfies Meta<typeof ITDialog>;
|
|
20
19
|
|
|
21
20
|
export default meta;
|
|
22
|
-
type Story = StoryObj<typeof meta>;
|
|
23
21
|
|
|
24
22
|
// Wrapper to handle open/close state
|
|
25
23
|
const DialogWrapper = (args: any) => {
|
|
@@ -4,8 +4,8 @@ import { useEffect, useRef } from "react";
|
|
|
4
4
|
import { FaRegTimesCircle } from "react-icons/fa";
|
|
5
5
|
import { ITDialogProps } from "./dialog.props";
|
|
6
6
|
import useClickOutside from "@/hooks/useClickOutside";
|
|
7
|
-
import ITFormHeader from "
|
|
8
|
-
import ITText from "@/components/text/text";
|
|
7
|
+
import ITFormHeader from "@/components/molecules/form-header/form-header";
|
|
8
|
+
import ITText from "@/components/atoms/text/text";
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* Modal dialog rendered via React portal with overlay backdrop.
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
2
|
import { useState } from "react";
|
|
3
|
-
import ITDrawer from "
|
|
4
|
-
import ITButton from "
|
|
3
|
+
import ITDrawer from "@/components/organisms/drawer/drawer";
|
|
4
|
+
import ITButton from "@/components/atoms/button/button";
|
|
5
5
|
|
|
6
6
|
const meta: Meta<typeof ITDrawer> = {
|
|
7
7
|
title: "Components/Overlay/ITDrawer",
|
|
8
8
|
component: ITDrawer,
|
|
9
|
-
tags: ["autodocs"],
|
|
10
9
|
};
|
|
11
10
|
|
|
12
11
|
export default meta;
|
|
@@ -3,7 +3,7 @@ import { ITDrawerProps } from "./drawer.props";
|
|
|
3
3
|
import { FaTimes } from "react-icons/fa";
|
|
4
4
|
import useClickOutside from "@/hooks/useClickOutside";
|
|
5
5
|
import { useRef } from "react";
|
|
6
|
-
import ITText from "@/components/text/text";
|
|
6
|
+
import ITText from "@/components/atoms/text/text";
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Sliding panel drawer from the left or right screen edge.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
|
|
2
|
-
import * as
|
|
2
|
+
import * as StoriesData from './dropfile.stories';
|
|
3
3
|
|
|
4
|
-
<Meta of={
|
|
4
|
+
<Meta of={StoriesData} />
|
|
5
5
|
|
|
6
6
|
# ITDropfile
|
|
7
7
|
|
|
@@ -57,7 +57,7 @@ import { ITDropfile, UploadStatus, FileTypeEnum } from '@axzydev/axzy_ui_system'
|
|
|
57
57
|
/>
|
|
58
58
|
```
|
|
59
59
|
|
|
60
|
-
Use this when you'd otherwise write your own button + modal wrapper around `ITDropfile` — it's built in. The button shows the picked file's name (and status badge, if `showStatusBadge`) once one is selected, and reopens the same dropzone/preview to change it.
|
|
60
|
+
Use this when you'd otherwise write your own button + modal wrapper around `ITDropfile` — it's built in. The button shows the picked file's name (and status badge, if `showStatusBadge`) once one is selected, and reopens the same dropzone/preview to change it. ~900ms after a successful confirm the modal closes **and the selection resets**, so the button goes back to `buttonLabel`, ready to upload another file — this mode is built for repeated uploads (e.g. an attachments list), replacing the old pattern of remounting `ITDropfile` with a changing `key` after each upload.
|
|
61
61
|
|
|
62
62
|
## Notes
|
|
63
63
|
|
|
@@ -46,10 +46,14 @@ export interface ITDropfileProps {
|
|
|
46
46
|
initialPreviewUrl?: string | null;
|
|
47
47
|
/**
|
|
48
48
|
* Presentation mode. `"drop"` renders the dropzone/preview inline (default,
|
|
49
|
-
* current behavior). `"button"` renders a
|
|
50
|
-
* clicking it opens the same
|
|
51
|
-
* callers don't need to build
|
|
52
|
-
* `ITDropfile`.
|
|
49
|
+
* current behavior, unaffected by anything below). `"button"` renders a
|
|
50
|
+
* compact trigger button instead — clicking it opens the same
|
|
51
|
+
* dropzone/preview UI inside an `ITDialog`, so callers don't need to build
|
|
52
|
+
* their own "open a modal" button around `ITDropfile`. Meant for repeated
|
|
53
|
+
* uploads (e.g. an attachments list): ~900ms after a successful confirm,
|
|
54
|
+
* the modal closes AND the selection resets, so the trigger goes back to
|
|
55
|
+
* `buttonLabel` ready for the next file — same effect callers previously
|
|
56
|
+
* got by remounting `ITDropfile` with a changing `key`.
|
|
53
57
|
* @default "drop"
|
|
54
58
|
*/
|
|
55
59
|
view?: "drop" | "button";
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import type { Meta
|
|
2
|
-
import ITDropfile, {
|
|
3
|
-
import { useState } from 'react';
|
|
1
|
+
import type { Meta } from '@storybook/react';
|
|
2
|
+
import ITDropfile, { UploadStatus } from '@/components/organisms/dropfile/dropfile';
|
|
4
3
|
|
|
5
4
|
const meta = {
|
|
6
5
|
title: 'Components/Actions/ITDropfile',
|
|
@@ -8,7 +7,6 @@ const meta = {
|
|
|
8
7
|
parameters: {
|
|
9
8
|
layout: 'centered',
|
|
10
9
|
},
|
|
11
|
-
tags: ['autodocs'],
|
|
12
10
|
argTypes: {
|
|
13
11
|
onFileSelect: { action: 'file selected' },
|
|
14
12
|
onCancel: { action: 'cancelled' },
|
|
@@ -26,7 +24,6 @@ const meta = {
|
|
|
26
24
|
} satisfies Meta<typeof ITDropfile>;
|
|
27
25
|
|
|
28
26
|
export default meta;
|
|
29
|
-
type Story = StoryObj<typeof meta>;
|
|
30
27
|
|
|
31
28
|
// Wrapper for stateful file handling in story
|
|
32
29
|
const DropfileWrapper = (args: any) => {
|
|
@@ -2,9 +2,9 @@ import React, { useState, useEffect } from "react";
|
|
|
2
2
|
import { useDropzone } from "react-dropzone";
|
|
3
3
|
// import pdfjsLib from "@/hooks/pdf"; // Disabled as hook is missing
|
|
4
4
|
import clsx from "clsx";
|
|
5
|
-
import ITText from "@/components/text/text";
|
|
6
|
-
import ITButton from "@/components/button/button";
|
|
7
|
-
import ITDialog from "@/components/dialog/dialog";
|
|
5
|
+
import ITText from "@/components/atoms/text/text";
|
|
6
|
+
import ITButton from "@/components/atoms/button/button";
|
|
7
|
+
import ITDialog from "@/components/organisms/dialog/dialog";
|
|
8
8
|
import { ITDropfileProps, FileTypeEnum, UploadStatus } from "./dropfile.props";
|
|
9
9
|
export { FileTypeEnum, UploadStatus } from "./dropfile.props";
|
|
10
10
|
|
|
@@ -292,15 +292,28 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
|
|
|
292
292
|
handleCancel();
|
|
293
293
|
};
|
|
294
294
|
|
|
295
|
-
// In "button" view, close the modal a moment after a successful upload
|
|
296
|
-
// the trigger collapses back to its compact
|
|
297
|
-
//
|
|
295
|
+
// In "button" view, close the modal a moment after a successful upload and
|
|
296
|
+
// clear the selection so the trigger collapses back to its compact,
|
|
297
|
+
// ready-for-the-next-file state — mirrors what consumers previously did by
|
|
298
|
+
// hand (closing their own modal + remounting ITDropfile via a `key`) to
|
|
299
|
+
// upload attachments one after another.
|
|
298
300
|
useEffect(() => {
|
|
299
301
|
if (view === "button" && isConfirmed && uploadStatus === UploadStatus.UPLOADED) {
|
|
300
|
-
const timeout = setTimeout(() =>
|
|
302
|
+
const timeout = setTimeout(() => {
|
|
303
|
+
setIsModalOpen(false);
|
|
304
|
+
setSelectedFile(null);
|
|
305
|
+
setFileType(null);
|
|
306
|
+
setIsConfirmed(false);
|
|
307
|
+
if (externalStatus === undefined) setInternalUploadStatus(UploadStatus.PENDING);
|
|
308
|
+
onStatusChange?.(UploadStatus.PENDING);
|
|
309
|
+
setImagePreview((current) => {
|
|
310
|
+
if (current) URL.revokeObjectURL(current);
|
|
311
|
+
return null;
|
|
312
|
+
});
|
|
313
|
+
}, 900);
|
|
301
314
|
return () => clearTimeout(timeout);
|
|
302
315
|
}
|
|
303
|
-
}, [view, isConfirmed, uploadStatus]);
|
|
316
|
+
}, [view, isConfirmed, uploadStatus, externalStatus, onStatusChange]);
|
|
304
317
|
|
|
305
318
|
const headerRow = (
|
|
306
319
|
<div className="flex items-center justify-between mb-2">
|
|
@@ -396,7 +409,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
|
|
|
396
409
|
type="button"
|
|
397
410
|
variant="outlined"
|
|
398
411
|
color="secondary"
|
|
399
|
-
size="
|
|
412
|
+
size="sm"
|
|
400
413
|
onClick={handleCancel}
|
|
401
414
|
>
|
|
402
415
|
<ITText>Cancelar</ITText>
|
|
@@ -405,7 +418,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
|
|
|
405
418
|
type="button"
|
|
406
419
|
variant="filled"
|
|
407
420
|
color="primary"
|
|
408
|
-
size="
|
|
421
|
+
size="sm"
|
|
409
422
|
onClick={handleConfirm}
|
|
410
423
|
>
|
|
411
424
|
<div className="flex items-center gap-2">
|
|
@@ -421,7 +434,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
|
|
|
421
434
|
type="button"
|
|
422
435
|
variant="outlined"
|
|
423
436
|
color="danger"
|
|
424
|
-
size="
|
|
437
|
+
size="sm"
|
|
425
438
|
onClick={handleDelete}
|
|
426
439
|
>
|
|
427
440
|
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -458,7 +471,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
|
|
|
458
471
|
type="button"
|
|
459
472
|
variant="outlined"
|
|
460
473
|
color={hasFile ? "primary" : "secondary"}
|
|
461
|
-
size="
|
|
474
|
+
size="sm"
|
|
462
475
|
onClick={() => setIsModalOpen(true)}
|
|
463
476
|
>
|
|
464
477
|
<div className="flex items-center gap-2 max-w-[220px]">
|
|
@@ -1,31 +1,36 @@
|
|
|
1
|
-
import React, { memo, useCallback, useEffect, useState } from "react";
|
|
1
|
+
import React, { memo, useCallback, useEffect, useMemo, useState, useRef } from "react";
|
|
2
2
|
import clsx from "clsx";
|
|
3
3
|
import { FieldConfigV2 } from "@/types/field.types";
|
|
4
4
|
import { useITFormBuilderContext } from "./formBuilder.context";
|
|
5
|
-
import ITInput from "
|
|
6
|
-
import ITSelect from "
|
|
7
|
-
import ITDatePicker from "
|
|
8
|
-
import ITTimePicker from "
|
|
9
|
-
import ITSearchSelect from "
|
|
5
|
+
import ITInput from "@/components/atoms/input/input";
|
|
6
|
+
import ITSelect from "@/components/molecules/select/select";
|
|
7
|
+
import ITDatePicker from "@/components/molecules/date-picker/datePicker";
|
|
8
|
+
import ITTimePicker from "@/components/molecules/time-picker/timePicker";
|
|
9
|
+
import ITSearchSelect from "@/components/molecules/search-select/search-select";
|
|
10
10
|
import { useFieldRules } from "./useFormBuilder";
|
|
11
11
|
import { getColSpanClass, getGridColsClass } from "@/utils/styles";
|
|
12
|
-
import ITText from "@/components/text/text";
|
|
12
|
+
import ITText from "@/components/atoms/text/text";
|
|
13
13
|
import { FaSpinner } from "react-icons/fa";
|
|
14
14
|
|
|
15
15
|
function useAsyncOptions(options: FieldConfigV2["options"], depends: any[]) {
|
|
16
16
|
const [resolved, setResolved] = useState<{ value: string; label: string }[]>([]);
|
|
17
17
|
const [loading, setLoading] = useState(false);
|
|
18
|
+
const optionsRef = useRef(options);
|
|
19
|
+
optionsRef.current = options;
|
|
18
20
|
|
|
19
21
|
useEffect(() => {
|
|
20
|
-
|
|
22
|
+
const opts = optionsRef.current;
|
|
23
|
+
if (typeof opts === "function") {
|
|
21
24
|
setLoading(true);
|
|
22
|
-
|
|
25
|
+
opts().then((result) => {
|
|
23
26
|
setResolved(result.map(o => ({ value: String(o.value), label: o.label })));
|
|
24
27
|
setLoading(false);
|
|
25
28
|
});
|
|
26
|
-
} else if (Array.isArray(
|
|
27
|
-
setResolved(
|
|
29
|
+
} else if (Array.isArray(opts)) {
|
|
30
|
+
setResolved(opts.map(o => ({ value: String(o.value), label: o.label })));
|
|
28
31
|
}
|
|
32
|
+
// Dependencias dinámicas por diseño (campos dependientes) — no verificables estáticamente.
|
|
33
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
29
34
|
}, depends);
|
|
30
35
|
|
|
31
36
|
return { options: resolved, loading };
|
|
@@ -61,16 +66,19 @@ const ITFieldRenderer = ({
|
|
|
61
66
|
return () => {
|
|
62
67
|
context.unregisterField(config.name);
|
|
63
68
|
};
|
|
69
|
+
// `config`/`context` son estables en el provider; solo el name define el registro.
|
|
70
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
64
71
|
}, [config.name]);
|
|
65
72
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
73
|
+
const activeConfig = useMemo(
|
|
74
|
+
() => ({
|
|
75
|
+
...config,
|
|
76
|
+
...dynamicProps,
|
|
77
|
+
required: isRequired,
|
|
78
|
+
disabled: isDisabled,
|
|
79
|
+
}),
|
|
80
|
+
[config, dynamicProps, isRequired, isDisabled],
|
|
81
|
+
);
|
|
74
82
|
|
|
75
83
|
const {
|
|
76
84
|
name,
|
|
@@ -96,9 +104,11 @@ const ITFieldRenderer = ({
|
|
|
96
104
|
await activeConfig.onChangeAction(finalValue, context);
|
|
97
105
|
}
|
|
98
106
|
},
|
|
99
|
-
[name, context]
|
|
107
|
+
[name, context, activeConfig]
|
|
100
108
|
);
|
|
101
109
|
|
|
110
|
+
if (!isVisible) return null;
|
|
111
|
+
|
|
102
112
|
const renderField = () => {
|
|
103
113
|
switch (type) {
|
|
104
114
|
case "text":
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import React, { createContext, useContext,
|
|
1
|
+
import React, { createContext, useContext, useState } from 'react';
|
|
2
2
|
import { FieldConfigV2, FieldContextV2 } from '@/types/field.types';
|
|
3
|
-
import * as Yup from 'yup';
|
|
4
3
|
|
|
5
4
|
interface ITFormBuilderContextType extends FieldContextV2 {
|
|
6
5
|
config: FieldConfigV2[];
|
|
@@ -61,6 +60,8 @@ export const ITFormBuilderProvider = ({
|
|
|
61
60
|
);
|
|
62
61
|
};
|
|
63
62
|
|
|
63
|
+
// Hook de acceso al contexto — patrón requerido junto al provider en el mismo archivo.
|
|
64
|
+
// eslint-disable-next-line react-refresh/only-export-components
|
|
64
65
|
export const useITFormBuilderContext = () => {
|
|
65
66
|
const context = useContext(ITFormBuilderContext);
|
|
66
67
|
if (!context) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
|
|
2
|
-
import * as
|
|
2
|
+
import * as StoriesData from './formBuilder.stories';
|
|
3
3
|
|
|
4
|
-
<Meta of={
|
|
4
|
+
<Meta of={StoriesData} />
|
|
5
5
|
|
|
6
6
|
# ITFormBuilder
|
|
7
7
|
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import ITSelect from "../select/select";
|
|
1
|
+
import ITInput from "@/components/atoms/input/input";
|
|
2
|
+
import ITSelect from "@/components/molecules/select/select";
|
|
4
3
|
import { ITFormBuilderProps } from "./formBuilder.props";
|
|
5
|
-
import ITDatePicker from "
|
|
4
|
+
import ITDatePicker from "@/components/molecules/date-picker/datePicker";
|
|
6
5
|
import { useEffect, useState, useMemo } from "react";
|
|
7
6
|
import { ITFormBuilderProvider } from "./formBuilder.context";
|
|
8
7
|
import ITFieldRenderer from "./fieldRenderer";
|
|
@@ -65,7 +64,7 @@ export default function ITFormBuilder({
|
|
|
65
64
|
setFieldError = () => {},
|
|
66
65
|
isSubmitting = false,
|
|
67
66
|
}: ITFormBuilderProps) {
|
|
68
|
-
const [
|
|
67
|
+
const [, setMounted] = useState(false);
|
|
69
68
|
|
|
70
69
|
useEffect(() => {
|
|
71
70
|
setMounted(true);
|
|
@@ -53,12 +53,12 @@ export const useFieldRules = (
|
|
|
53
53
|
const isVisible = useMemo(() => {
|
|
54
54
|
if (!fieldConfig.renderWhen) return true;
|
|
55
55
|
return fieldConfig.renderWhen(dependentValues);
|
|
56
|
-
}, [fieldConfig
|
|
56
|
+
}, [fieldConfig, dependentValues]);
|
|
57
57
|
|
|
58
58
|
const dynamicProps = useMemo(() => {
|
|
59
59
|
if (!fieldConfig.dynamicProps) return {};
|
|
60
60
|
return fieldConfig.dynamicProps(dependentValues);
|
|
61
|
-
}, [fieldConfig
|
|
61
|
+
}, [fieldConfig, dependentValues]);
|
|
62
62
|
|
|
63
63
|
const isRequired = useMemo(() => {
|
|
64
64
|
if (typeof dynamicProps.required !== 'undefined') return dynamicProps.required;
|
|
@@ -66,7 +66,7 @@ export const useFieldRules = (
|
|
|
66
66
|
return fieldConfig.required(dependentValues);
|
|
67
67
|
}
|
|
68
68
|
return fieldConfig.required || false;
|
|
69
|
-
}, [fieldConfig
|
|
69
|
+
}, [fieldConfig, dynamicProps.required, dependentValues]);
|
|
70
70
|
|
|
71
71
|
const isDisabled = useMemo(() => {
|
|
72
72
|
if (typeof dynamicProps.disabled !== 'undefined') return dynamicProps.disabled;
|
|
@@ -74,7 +74,7 @@ export const useFieldRules = (
|
|
|
74
74
|
return fieldConfig.disabled(dependentValues);
|
|
75
75
|
}
|
|
76
76
|
return fieldConfig.disabled || false;
|
|
77
|
-
}, [fieldConfig
|
|
77
|
+
}, [fieldConfig, dynamicProps.disabled, dependentValues]);
|
|
78
78
|
|
|
79
79
|
return { isVisible, dynamicProps, isRequired, isDisabled };
|
|
80
80
|
};
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import ITNavbar from '
|
|
2
|
+
import ITNavbar from '@/components/organisms/navbar/navbar';
|
|
3
3
|
import { FaHome, FaChartBar, FaCog, FaUsers } from 'react-icons/fa';
|
|
4
4
|
|
|
5
5
|
const meta = {
|
|
6
6
|
title: 'Components/Layout & Navigation/ITNavbar',
|
|
7
7
|
component: ITNavbar,
|
|
8
8
|
parameters: { layout: 'fullscreen' },
|
|
9
|
-
tags: ['autodocs'],
|
|
10
9
|
argTypes: {
|
|
11
10
|
logoText: { control: 'text', description: 'Text displayed next to the logo' },
|
|
12
11
|
navigationItems: { control: false, description: 'Navigation items with optional sub-items' },
|
|
@@ -2,7 +2,7 @@ import useClickOutside from "@/hooks/useClickOutside";
|
|
|
2
2
|
import { useRef, useState } from "react";
|
|
3
3
|
import { FaChevronDown, FaChevronRight, FaUserCircle } from "react-icons/fa";
|
|
4
4
|
import { ITNavbarProps, ITNavigationItem } from "./navbar.props";
|
|
5
|
-
import ITText from "@/components/text/text";
|
|
5
|
+
import ITText from "@/components/atoms/text/text";
|
|
6
6
|
import { theme } from "@/theme/theme";
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
|
|
2
|
-
import * as
|
|
2
|
+
import * as StoriesData from './page-header.stories';
|
|
3
3
|
|
|
4
|
-
<Meta of={
|
|
4
|
+
<Meta of={StoriesData} />
|
|
5
5
|
|
|
6
6
|
# ITPageHeader
|
|
7
7
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
|
-
import { ITBreadcrumbItem } from "
|
|
2
|
+
import { ITBreadcrumbItem } from "@/components/molecules/breadcrumbs/breadcrumbs.props";
|
|
3
3
|
|
|
4
4
|
/** Props for the ITPageHeader component. */
|
|
5
5
|
export interface ITPageHeaderProps {
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
2
2
|
import { FaUsers } from "react-icons/fa";
|
|
3
|
-
import ITPageHeader from "
|
|
4
|
-
import ITButton from "
|
|
3
|
+
import ITPageHeader from "@/components/organisms/page-header/page-header";
|
|
4
|
+
import ITButton from "@/components/atoms/button/button";
|
|
5
5
|
|
|
6
6
|
const meta: Meta<typeof ITPageHeader> = {
|
|
7
7
|
title: "Components/Layout/ITPageHeader",
|
|
8
8
|
component: ITPageHeader,
|
|
9
|
-
tags: ["autodocs"],
|
|
10
9
|
};
|
|
11
10
|
|
|
12
11
|
export default meta;
|
|
@@ -41,8 +40,8 @@ export const WithActions: Story = {
|
|
|
41
40
|
],
|
|
42
41
|
actions: (
|
|
43
42
|
<>
|
|
44
|
-
<ITButton label="Exportar" variant="outlined" size="
|
|
45
|
-
<ITButton label="Nueva Orden" size="
|
|
43
|
+
<ITButton label="Exportar" variant="outlined" size="sm" />
|
|
44
|
+
<ITButton label="Nueva Orden" size="sm" />
|
|
46
45
|
</>
|
|
47
46
|
),
|
|
48
47
|
},
|
|
@@ -57,7 +56,7 @@ export const WithBackAction: Story = {
|
|
|
57
56
|
{ label: "Productos", href: "#" },
|
|
58
57
|
{ label: "Detalle" },
|
|
59
58
|
],
|
|
60
|
-
actions: <ITButton label="Editar" size="
|
|
59
|
+
actions: <ITButton label="Editar" size="sm" />,
|
|
61
60
|
},
|
|
62
61
|
};
|
|
63
62
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FaChevronLeft } from "react-icons/fa";
|
|
2
2
|
import { ITPageHeaderProps } from "./page-header.props";
|
|
3
|
-
import ITBreadcrumbs from "
|
|
4
|
-
import ITText from "@/components/text/text";
|
|
3
|
+
import ITBreadcrumbs from "@/components/molecules/breadcrumbs/breadcrumbs";
|
|
4
|
+
import ITText from "@/components/atoms/text/text";
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Page title bar with breadcrumbs, description, back button, and action buttons.
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { SearchColumn } from "../searchTable.props";
|
|
3
|
-
import ITInput from "@/components/input/input";
|
|
4
|
-
import ITSelect from "@/components/select/select";
|
|
5
|
-
import ITDatePicker from "@/components/date-picker/datePicker";
|
|
6
|
-
import ITText from "@/components/text/text";
|
|
3
|
+
import ITInput from "@/components/atoms/input/input";
|
|
4
|
+
import ITSelect from "@/components/molecules/select/select";
|
|
5
|
+
import ITDatePicker from "@/components/molecules/date-picker/datePicker";
|
|
6
|
+
import ITText from "@/components/atoms/text/text";
|
|
7
7
|
|
|
8
8
|
interface EditableCellProps<T> {
|
|
9
9
|
column: SearchColumn<T>;
|
|
@@ -18,7 +18,6 @@ export default function EditableCell<T>({
|
|
|
18
18
|
value,
|
|
19
19
|
onChange,
|
|
20
20
|
error,
|
|
21
|
-
row,
|
|
22
21
|
}: EditableCellProps<T>) {
|
|
23
22
|
const validate = (val: any) => {
|
|
24
23
|
if (column.validation) return column.validation(val);
|
package/src/components/{searchTable → organisms/searchTable}/components/PaginationControls.tsx
RENAMED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
|
|
3
3
|
import PaginationInfo from "./PaginationInfo";
|
|
4
|
-
import ITSelect from "@/components/select/select";
|
|
5
|
-
import ITButton from "@/components/button/button";
|
|
6
|
-
import ITText from "@/components/text/text";
|
|
4
|
+
import ITSelect from "@/components/molecules/select/select";
|
|
5
|
+
import ITButton from "@/components/atoms/button/button";
|
|
6
|
+
import ITText from "@/components/atoms/text/text";
|
|
7
7
|
|
|
8
8
|
interface PaginationControlsProps {
|
|
9
9
|
pageIndex: number;
|
|
@@ -46,7 +46,7 @@ export default function PaginationControls({
|
|
|
46
46
|
value={String(itemsPerPage)}
|
|
47
47
|
onChange={(e) => onItemsPerPageChange(Number(e.target.value))}
|
|
48
48
|
onBlur={() => {}}
|
|
49
|
-
size="
|
|
49
|
+
size="sm"
|
|
50
50
|
className="w-20"
|
|
51
51
|
/>
|
|
52
52
|
</div>
|
|
@@ -55,7 +55,7 @@ export default function PaginationControls({
|
|
|
55
55
|
<div className="flex items-center space-x-2">
|
|
56
56
|
<ITButton
|
|
57
57
|
color="secondary"
|
|
58
|
-
size="
|
|
58
|
+
size="sm"
|
|
59
59
|
onClick={() => onPageChange(pageIndex - 1)}
|
|
60
60
|
disabled={!hasPreviousPage}
|
|
61
61
|
className="min-w-[32px]"
|
|
@@ -70,7 +70,7 @@ export default function PaginationControls({
|
|
|
70
70
|
</ITText>
|
|
71
71
|
|
|
72
72
|
<ITButton
|
|
73
|
-
size="
|
|
73
|
+
size="sm"
|
|
74
74
|
color="secondary"
|
|
75
75
|
onClick={() => onPageChange(pageIndex + 1)}
|
|
76
76
|
disabled={!hasNextPage}
|
package/src/components/{searchTable → organisms/searchTable}/components/SearchAndSortBar.tsx
RENAMED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import SearchInput from "./SearchInput";
|
|
3
3
|
import SortButton from "./SortButton";
|
|
4
|
-
import ITButton from "@/components/button/button";
|
|
5
|
-
import ITText from "@/components/text/text";
|
|
4
|
+
import ITButton from "@/components/atoms/button/button";
|
|
5
|
+
import ITText from "@/components/atoms/text/text";
|
|
6
6
|
|
|
7
7
|
interface SearchAndSortBarProps {
|
|
8
8
|
searchTerm: string;
|
|
@@ -37,7 +37,7 @@ export default function SearchAndSortBar({
|
|
|
37
37
|
|
|
38
38
|
{searchTerm && (
|
|
39
39
|
<ITButton
|
|
40
|
-
size="
|
|
40
|
+
size="sm"
|
|
41
41
|
variant="outlined"
|
|
42
42
|
color="danger"
|
|
43
43
|
onClick={onClearSearch}
|