@sqrzro/ui 4.0.0-alpha.13 → 4.0.0-alpha.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/dist/components/buttons/Button/index.d.ts +1 -1
- package/dist/components/buttons/Button/index.js +4 -14
- package/dist/components/collections/DataTable/index.d.ts +1 -1
- package/dist/components/collections/DataTable/index.js +3 -3
- package/dist/components/collections/EmptyMessage/index.d.ts +1 -1
- package/dist/components/collections/EmptyMessage/index.js +3 -4
- package/dist/components/collections/ListItem/index.d.ts +1 -1
- package/dist/components/collections/ListItem/index.js +5 -5
- package/dist/components/collections/ListItemMeta/index.d.ts +1 -1
- package/dist/components/collections/ListItemMeta/index.js +3 -4
- package/dist/components/collections/ListItemSecondary/index.d.ts +1 -1
- package/dist/components/collections/ListItemSecondary/index.js +3 -4
- package/dist/components/collections/Pagination/index.d.ts +1 -1
- package/dist/components/collections/Pagination/index.js +5 -6
- package/dist/components/collections/PaginationLink/index.d.ts +9 -0
- package/dist/components/collections/PaginationLink/index.js +8 -0
- package/dist/components/collections/TableClientComponent/index.d.ts +1 -1
- package/dist/components/collections/TableClientComponent/index.js +4 -7
- package/dist/components/collections/TableRow/index.d.ts +12 -0
- package/dist/components/collections/TableRow/index.js +9 -0
- package/dist/components/errors/AppError/index.d.ts +19 -0
- package/dist/components/errors/AppError/index.js +8 -0
- package/dist/components/errors/AppForbiddenError/index.d.ts +7 -0
- package/dist/components/errors/AppForbiddenError/index.js +6 -0
- package/dist/components/errors/AppNotFoundError/index.d.ts +7 -0
- package/dist/components/errors/AppNotFoundError/index.js +6 -0
- package/dist/components/errors/AppServerError/index.d.ts +8 -0
- package/dist/components/errors/AppServerError/index.js +17 -0
- package/dist/components/index.d.ts +6 -0
- package/dist/components/index.js +3 -0
- package/dist/components/modals/Modal/index.d.ts +1 -1
- package/dist/components/modals/Modal/index.js +3 -3
- package/dist/components/modals/ModalActions/index.d.ts +1 -1
- package/dist/components/modals/ModalActions/index.js +3 -3
- package/dist/components/utility/ActionList/index.d.ts +1 -1
- package/dist/components/utility/ActionList/index.js +2 -2
- package/dist/components/utility/ClassNamesClientComponent/index.d.ts +6 -0
- package/dist/components/utility/ClassNamesClientComponent/index.js +7 -0
- package/dist/components/utility/Container/index.d.ts +1 -1
- package/dist/components/utility/Container/index.js +2 -2
- package/dist/components/utility/Link/index.d.ts +1 -1
- package/dist/components/utility/Link/index.js +3 -3
- package/dist/components/utility/Loader/index.d.ts +1 -1
- package/dist/components/utility/Loader/index.js +4 -4
- package/dist/components/utility/Popover/index.d.ts +1 -1
- package/dist/components/utility/Popover/index.js +4 -4
- package/dist/components/utility/RootLayout/index.d.ts +2 -2
- package/dist/components/utility/RootLayout/index.js +6 -5
- package/dist/components/utility/Toast/index.d.ts +1 -1
- package/dist/components/utility/Toast/index.js +2 -2
- package/dist/filters/components/FilterBarClientComponent/index.d.ts +1 -1
- package/dist/filters/components/FilterBarClientComponent/index.js +2 -2
- package/dist/filters/components/FilterControl/index.d.ts +1 -1
- package/dist/filters/components/FilterControl/index.js +7 -4
- package/dist/filters/components/FilterItem/index.d.ts +1 -1
- package/dist/filters/components/FilterItem/index.js +2 -2
- package/dist/filters/components/FilterPanel/index.d.ts +1 -1
- package/dist/filters/filters/Filter/index.d.ts +1 -1
- package/dist/filters/filters/Filter/index.js +3 -4
- package/dist/filters/filters/SearchFilter/index.js +1 -1
- package/dist/forms/components/Autocomplete/index.d.ts +1 -1
- package/dist/forms/components/Dropdown/index.d.ts +1 -1
- package/dist/forms/components/Dropdown/index.js +7 -4
- package/dist/forms/components/DropdownItem/index.d.ts +9 -0
- package/dist/forms/components/DropdownItem/index.js +8 -0
- package/dist/forms/components/DropdownList/index.d.ts +1 -1
- package/dist/forms/components/DropdownList/index.js +5 -10
- package/dist/forms/components/EditableForm/index.d.ts +1 -1
- package/dist/forms/components/EditableForm/index.js +3 -4
- package/dist/forms/components/EditableFormField/index.d.ts +1 -1
- package/dist/forms/components/EditableFormField/index.js +2 -2
- package/dist/forms/components/Form/index.d.ts +1 -1
- package/dist/forms/components/Form/index.js +3 -3
- package/dist/forms/components/FormError/index.d.ts +1 -1
- package/dist/forms/components/FormError/index.js +3 -3
- package/dist/forms/components/FormField/index.d.ts +2 -2
- package/dist/forms/components/FormField/index.js +7 -6
- package/dist/forms/components/FormLabel/index.d.ts +1 -1
- package/dist/forms/components/FormLabel/index.js +3 -3
- package/dist/forms/components/NumberInput/index.d.ts +1 -1
- package/dist/forms/components/PasswordComplexity/index.d.ts +9 -0
- package/dist/forms/components/PasswordComplexity/index.js +10 -0
- package/dist/forms/components/PasswordInput/index.d.ts +1 -1
- package/dist/forms/components/PasswordInput/index.js +4 -5
- package/dist/forms/components/StaticTextInput/index.d.ts +1 -1
- package/dist/forms/components/StaticTextInput/index.js +4 -7
- package/dist/forms/components/Switch/index.d.ts +1 -1
- package/dist/forms/components/Switch/index.js +4 -4
- package/dist/forms/components/TextInput/index.d.ts +1 -1
- package/dist/forms/components/TextInput/index.js +4 -4
- package/dist/forms/hooks/useForm.js +1 -1
- package/dist/forms/index.d.ts +4 -2
- package/dist/forms/index.js +2 -1
- package/dist/navigation/components/AppNavigation/index.d.ts +1 -1
- package/dist/navigation/components/AppNavigation/index.js +2 -2
- package/dist/navigation/components/AppNavigationItem/index.d.ts +1 -1
- package/dist/navigation/components/AppNavigationItem/index.js +3 -4
- package/dist/navigation/components/Tabs/index.js +2 -2
- package/dist/navigation/hooks/useNavigation.js +5 -5
- package/dist/styles/classnames/config.d.ts +65 -0
- package/dist/styles/classnames/index.d.ts +7 -0
- package/dist/styles/classnames/index.js +37 -0
- package/dist/styles/classnames/interfaces.d.ts +47 -0
- package/dist/styles/classnames/interfaces.js +1 -0
- package/dist/styles/classnames/utility/is-classname-object.d.ts +3 -0
- package/dist/styles/classnames/utility/is-classname-object.js +7 -0
- package/dist/styles/icons/config.d.ts +9 -0
- package/dist/styles/icons/config.js +1 -0
- package/dist/styles/icons/index.d.ts +4 -0
- package/dist/styles/icons/interfaces.d.ts +4 -0
- package/dist/styles/icons/interfaces.js +1 -0
- package/dist/styles/index.d.ts +2 -2
- package/dist/styles/index.js +1 -1
- package/package.json +2 -2
- package/dist/components/utility/ClassNames/index.d.ts +0 -6
- package/dist/components/utility/ClassNames/index.js +0 -7
- package/dist/styles/config.d.ts +0 -66
- package/dist/styles/config.js +0 -43
- package/dist/styles/icons.d.ts +0 -15
- package/dist/styles/interfaces.d.ts +0 -41
- /package/dist/styles/{interfaces.js → classnames/config.js} +0 -0
- /package/dist/styles/{tw.d.ts → classnames/tw.d.ts} +0 -0
- /package/dist/styles/{tw.js → classnames/tw.js} +0 -0
- /package/dist/styles/{icons.js → icons/index.js} +0 -0
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Fragment } from 'react';
|
|
3
|
-
import { getClassNames } from '../../../styles/
|
|
4
|
-
import tw from '../../../styles/tw';
|
|
3
|
+
import { getClassNames } from '../../../styles/classnames';
|
|
4
|
+
import tw from '../../../styles/classnames/tw';
|
|
5
5
|
function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, value, }) {
|
|
6
|
-
const componentClassNames =
|
|
6
|
+
const componentClassNames = getClassNames('switch', { props: classNameProps, states: { isChecked: Boolean(value) } }, classNames);
|
|
7
7
|
function handleChange(event) {
|
|
8
8
|
if (onChange) {
|
|
9
9
|
const inputEvent = {
|
|
@@ -12,6 +12,6 @@ function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, va
|
|
|
12
12
|
onChange(inputEvent);
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
return (_jsxs(Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: "false" }), _jsx("div", { className: tw('block', componentClassNames?.root), children: _jsxs("div", { className: tw('relative', componentClassNames?.control), children: [_jsx("input", { "aria-checked": Boolean(value), checked: Boolean(value), className: tw('appearance-none', componentClassNames?.input
|
|
15
|
+
return (_jsxs(Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: "false" }), _jsx("div", { className: tw('block', componentClassNames?.root), children: _jsxs("div", { className: tw('relative', componentClassNames?.control), children: [_jsx("input", { "aria-checked": Boolean(value), checked: Boolean(value), className: tw('appearance-none', componentClassNames?.input), disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: "checkbox", value: "true" }), _jsx("i", { className: componentClassNames?.icon })] }) })] }));
|
|
16
16
|
}
|
|
17
17
|
export default Switch;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { InputProps } from '../../../forms/interfaces';
|
|
2
|
-
import type { ClassNameProps, ErrorableClassName } from '../../../styles/interfaces';
|
|
2
|
+
import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
|
|
3
3
|
export interface TextInputClassNames {
|
|
4
4
|
loading: string;
|
|
5
5
|
prefix: ErrorableClassName;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { getClassNames } from '../../../styles/
|
|
3
|
-
import tw from '../../../styles/tw';
|
|
2
|
+
import { getClassNames } from '../../../styles/classnames';
|
|
3
|
+
import tw from '../../../styles/classnames/tw';
|
|
4
4
|
/**
|
|
5
5
|
*
|
|
6
6
|
* ## ClassNames
|
|
@@ -14,7 +14,7 @@ import tw from '../../../styles/tw';
|
|
|
14
14
|
* button itself is handled by the `renderClear` prop. | `string` |
|
|
15
15
|
*/
|
|
16
16
|
function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, prefix, ref, suffix, type, value, }) {
|
|
17
|
-
const componentClassNames =
|
|
17
|
+
const componentClassNames = getClassNames('textInput', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);
|
|
18
18
|
function handleChange(event) {
|
|
19
19
|
if (onChange) {
|
|
20
20
|
const target = { name, value: event.target.value };
|
|
@@ -25,6 +25,6 @@ function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, i
|
|
|
25
25
|
? `${id || name}_err`
|
|
26
26
|
: undefined /* eslint-disable-line no-undefined */, autoComplete: isAutocomplete === false
|
|
27
27
|
? 'one-time-code'
|
|
28
|
-
: undefined /* eslint-disable-line no-undefined */, className: tw('peer w-full focus-visible:outline-0', prefix ? 'border-l-0' : null, (!prefix && suffix) || value ? 'border-r-0' : null, componentClassNames?.root
|
|
28
|
+
: undefined /* eslint-disable-line no-undefined */, className: tw('peer w-full focus-visible:outline-0', prefix ? 'border-l-0' : null, (!prefix && suffix) || value ? 'border-r-0' : null, componentClassNames?.root), disabled: isDisabled, formNoValidate: true, id: id || name, name: name, onBlur: onBlur, onChange: handleChange, onFocus: onFocus, onKeyDown: onKeyDown, placeholder: placeholder, type: type, value: value || '' }), suffix ? _jsx("div", { children: suffix }) : null] }));
|
|
29
29
|
}
|
|
30
30
|
export default TextInput;
|
|
@@ -168,7 +168,7 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
|
|
|
168
168
|
if (fnReturn.validation) {
|
|
169
169
|
return handleValidation(fnReturn.validation);
|
|
170
170
|
}
|
|
171
|
-
if (fnReturn.data) {
|
|
171
|
+
if (fnReturn.data !== null) {
|
|
172
172
|
return handleSuccess(fnReturn.data);
|
|
173
173
|
}
|
|
174
174
|
}
|
package/dist/forms/index.d.ts
CHANGED
|
@@ -15,12 +15,14 @@ export type { FormSubmitProps } from './components/FormSubmit';
|
|
|
15
15
|
export { default as FormSubmit } from './components/FormSubmit';
|
|
16
16
|
export type { ModalFormProps } from './components/ModalForm';
|
|
17
17
|
export { default as ModalForm } from './components/ModalForm';
|
|
18
|
-
export type {
|
|
19
|
-
export { default as
|
|
18
|
+
export type { PasswordComplexityProps } from './components/PasswordComplexity';
|
|
19
|
+
export { default as PasswordComplexity } from './components/PasswordComplexity';
|
|
20
20
|
export type { NumberInputProps } from './components/NumberInput';
|
|
21
21
|
export { default as NumberInput } from './components/NumberInput';
|
|
22
22
|
export type { PasswordInputClassNames, PasswordInputProps } from './components/PasswordInput';
|
|
23
23
|
export { default as PasswordInput } from './components/PasswordInput';
|
|
24
|
+
export type { PointsInputProps } from './components/PointsInput';
|
|
25
|
+
export { default as PointsInput } from './components/PointsInput';
|
|
24
26
|
export type { StaticTextInputClassNames, StaticTextInputProps } from './components/StaticTextInput';
|
|
25
27
|
export { default as StaticTextInput } from './components/StaticTextInput';
|
|
26
28
|
export type { TextInputClassNames, TextInputProps } from './components/TextInput';
|
package/dist/forms/index.js
CHANGED
|
@@ -7,9 +7,10 @@ export { default as Form } from './components/Form';
|
|
|
7
7
|
export { default as FormField } from './components/FormField';
|
|
8
8
|
export { default as FormSubmit } from './components/FormSubmit';
|
|
9
9
|
export { default as ModalForm } from './components/ModalForm';
|
|
10
|
-
export { default as
|
|
10
|
+
export { default as PasswordComplexity } from './components/PasswordComplexity';
|
|
11
11
|
export { default as NumberInput } from './components/NumberInput';
|
|
12
12
|
export { default as PasswordInput } from './components/PasswordInput';
|
|
13
|
+
export { default as PointsInput } from './components/PointsInput';
|
|
13
14
|
export { default as StaticTextInput } from './components/StaticTextInput';
|
|
14
15
|
export { default as TextInput } from './components/TextInput';
|
|
15
16
|
export { EditableDropdownFormField, EditableTextFormField } from './components/EditableFormFields';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ClassNameProps, HighlightableClassName } from '../../../styles/interfaces';
|
|
1
|
+
import type { ClassNameProps, HighlightableClassName } from '../../../styles/classnames/interfaces';
|
|
2
2
|
import type { NavigationObject } from '../../interfaces';
|
|
3
3
|
export interface AppNavigationClassNames {
|
|
4
4
|
root: string;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Suspense } from 'react';
|
|
4
|
-
import { getClassNames } from '../../../styles/
|
|
4
|
+
import { getClassNames } from '../../../styles/classnames';
|
|
5
5
|
import useNavigation from '../../hooks/useNavigation';
|
|
6
6
|
import AppNavigationItem from '../AppNavigationItem';
|
|
7
7
|
function AppNavigationComponent({ classNameProps, classNames, data, }) {
|
|
8
|
-
const componentClassNames =
|
|
8
|
+
const componentClassNames = getClassNames('appNavigation', { props: classNameProps }, classNames);
|
|
9
9
|
const navigation = useNavigation(data);
|
|
10
10
|
return (_jsx("nav", { className: componentClassNames?.root, children: _jsx("ul", { className: componentClassNames?.list, children: navigation.map((item, index) => (_jsx(AppNavigationItem, { classNames: classNames, ...item }, index))) }) }));
|
|
11
11
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { NavigationObject } from '../../../navigation/interfaces';
|
|
2
|
-
import type { ClassNameProps } from '../../../styles/interfaces';
|
|
2
|
+
import type { ClassNameProps } from '../../../styles/classnames/interfaces';
|
|
3
3
|
import type { AppNavigationClassNames } from '../AppNavigation';
|
|
4
4
|
export type AppNavigationItemProps = NavigationObject & ClassNameProps<AppNavigationClassNames>;
|
|
5
5
|
declare function AppNavigationItem({ classNameProps, classNames, href, isActive, label, }: Readonly<AppNavigationItemProps>): React.ReactElement;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import Link from '../../../components/utility/Link';
|
|
3
|
-
import { getClassNames } from '../../../styles/
|
|
4
|
-
import tw from '../../../styles/tw';
|
|
3
|
+
import { getClassNames } from '../../../styles/classnames';
|
|
5
4
|
function AppNavigationItem({ classNameProps, classNames, href, isActive, label, }) {
|
|
6
|
-
const componentClassNames =
|
|
7
|
-
return (_jsx("li", { className:
|
|
5
|
+
const componentClassNames = getClassNames('appNavigation', { props: classNameProps, states: { isHighlighted: isActive ?? false } }, classNames);
|
|
6
|
+
return (_jsx("li", { className: componentClassNames?.item, children: _jsx(Link, { className: componentClassNames?.link, href: href, children: label }) }));
|
|
8
7
|
}
|
|
9
8
|
export default AppNavigationItem;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { getClassNames } from '../../../styles/
|
|
3
|
+
import { getClassNames } from '../../../styles/classnames';
|
|
4
4
|
import AppNavigation from '../AppNavigation';
|
|
5
5
|
function Tabs({ classNameProps, classNames, ...props }) {
|
|
6
|
-
const componentClassNames =
|
|
6
|
+
const componentClassNames = getClassNames('tabs', { props: classNameProps }, classNames);
|
|
7
7
|
return _jsx(AppNavigation, { classNames: componentClassNames ?? {}, ...props });
|
|
8
8
|
}
|
|
9
9
|
export default Tabs;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { joinURL } from '@sqrzro/utility';
|
|
2
2
|
import { usePathname, useSelectedLayoutSegments } from 'next/navigation';
|
|
3
3
|
function getActivePath(pathname, hrefs) {
|
|
4
4
|
return (hrefs
|
|
@@ -18,7 +18,7 @@ function getBasePath(pathname, segments) {
|
|
|
18
18
|
function transformChildren(children, basePath) {
|
|
19
19
|
return children.map(({ details, href, label }) => ({
|
|
20
20
|
details,
|
|
21
|
-
href:
|
|
21
|
+
href: joinURL(basePath, href),
|
|
22
22
|
label,
|
|
23
23
|
}));
|
|
24
24
|
}
|
|
@@ -26,13 +26,13 @@ function useNavigation(data, options) {
|
|
|
26
26
|
const pathname = usePathname();
|
|
27
27
|
const segments = useSelectedLayoutSegments();
|
|
28
28
|
const basePath = getBasePath(pathname, segments);
|
|
29
|
-
const hrefs = data.map(({ href }) =>
|
|
29
|
+
const hrefs = data.map(({ href }) => joinURL(basePath, href));
|
|
30
30
|
const activePath = getActivePath(pathname, hrefs);
|
|
31
31
|
return data.map((item) => ({
|
|
32
32
|
...item,
|
|
33
33
|
children: transformChildren(item.children || [], item.href),
|
|
34
|
-
href:
|
|
35
|
-
isActive:
|
|
34
|
+
href: joinURL(basePath, item.href),
|
|
35
|
+
isActive: joinURL(basePath, item.href) === activePath,
|
|
36
36
|
}));
|
|
37
37
|
}
|
|
38
38
|
export default useNavigation;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import type { ButtonClassNames } from '../../components/buttons/Button';
|
|
2
|
+
import type { TextButtonClassNames } from '../../components/buttons/TextButton';
|
|
3
|
+
import type { DataTableClassNames } from '../../components/collections/DataTable';
|
|
4
|
+
import type { EmptyMessageClassNames } from '../../components/collections/EmptyMessage';
|
|
5
|
+
import type { ListItemClassNames } from '../../components/collections/ListItem';
|
|
6
|
+
import type { ListItemMetaClassNames } from '../../components/collections/ListItemMeta';
|
|
7
|
+
import type { PaginationClassNames } from '../../components/collections/Pagination';
|
|
8
|
+
import type { TableClassNames } from '../../components/collections/Table';
|
|
9
|
+
import type { AppErrorClassNames } from '../../components/errors/AppError';
|
|
10
|
+
import type { ModalClassNames } from '../../components/modals/Modal';
|
|
11
|
+
import type { ActionListClassNames } from '../../components/utility/ActionList';
|
|
12
|
+
import type { ContainerClassNames } from '../../components/utility/Container';
|
|
13
|
+
import type { LinkClassNames } from '../../components/utility/Link';
|
|
14
|
+
import type { LoaderClassNames } from '../../components/utility/Loader';
|
|
15
|
+
import type { PopoverClassNames } from '../../components/utility/Popover';
|
|
16
|
+
import type { RootLayoutClassNames } from '../../components/utility/RootLayout';
|
|
17
|
+
import type { ToastClassNames } from '../../components/utility/Toast';
|
|
18
|
+
import type { FilterBarClassNames } from '../../filters/components/FilterBar';
|
|
19
|
+
import type { FilterItemClassNames } from '../../filters/components/FilterItem';
|
|
20
|
+
import type { FilterPanelClassNames } from '../../filters/components/FilterPanel';
|
|
21
|
+
import type { DropdownClassNames } from '../../forms/components/Dropdown';
|
|
22
|
+
import type { EditableFormClassNames } from '../../forms/components/EditableForm';
|
|
23
|
+
import type { EditableFormFieldClassNames } from '../../forms/components/EditableFormField';
|
|
24
|
+
import type { FormClassNames } from '../../forms/components/Form';
|
|
25
|
+
import type { FormFieldClassNames } from '../../forms/components/FormField';
|
|
26
|
+
import type { PasswordInputClassNames } from '../../forms/components/PasswordInput';
|
|
27
|
+
import type { StaticTextInputClassNames } from '../../forms/components/StaticTextInput';
|
|
28
|
+
import type { SwitchClassNames } from '../../forms/components/Switch';
|
|
29
|
+
import type { TextInputClassNames } from '../../forms/components/TextInput';
|
|
30
|
+
import type { AppNavigationClassNames } from '../../navigation/components/AppNavigation';
|
|
31
|
+
import type { TabsClassNames } from '../../navigation/components/Tabs';
|
|
32
|
+
import type { ComponentClassNames } from './interfaces';
|
|
33
|
+
export interface RegisteredClassNames {
|
|
34
|
+
actionList?: ComponentClassNames<ActionListClassNames>;
|
|
35
|
+
appError?: ComponentClassNames<AppErrorClassNames>;
|
|
36
|
+
appNavigation?: ComponentClassNames<AppNavigationClassNames>;
|
|
37
|
+
button?: ComponentClassNames<ButtonClassNames>;
|
|
38
|
+
container?: ComponentClassNames<ContainerClassNames>;
|
|
39
|
+
dataTable?: ComponentClassNames<DataTableClassNames>;
|
|
40
|
+
dropdown?: ComponentClassNames<DropdownClassNames>;
|
|
41
|
+
editableForm?: ComponentClassNames<EditableFormClassNames>;
|
|
42
|
+
editableFormField?: ComponentClassNames<EditableFormFieldClassNames>;
|
|
43
|
+
emptyMessage?: ComponentClassNames<EmptyMessageClassNames>;
|
|
44
|
+
filterBar?: ComponentClassNames<FilterBarClassNames>;
|
|
45
|
+
filterItem?: ComponentClassNames<FilterItemClassNames>;
|
|
46
|
+
filterPanel?: ComponentClassNames<FilterPanelClassNames>;
|
|
47
|
+
form?: ComponentClassNames<FormClassNames>;
|
|
48
|
+
formField?: ComponentClassNames<FormFieldClassNames>;
|
|
49
|
+
link?: ComponentClassNames<LinkClassNames>;
|
|
50
|
+
listItem?: ComponentClassNames<ListItemClassNames>;
|
|
51
|
+
listItemMeta?: ComponentClassNames<ListItemMetaClassNames>;
|
|
52
|
+
loader?: ComponentClassNames<LoaderClassNames>;
|
|
53
|
+
modal?: ComponentClassNames<ModalClassNames>;
|
|
54
|
+
pagination?: ComponentClassNames<PaginationClassNames>;
|
|
55
|
+
passwordInput?: ComponentClassNames<PasswordInputClassNames>;
|
|
56
|
+
popover?: ComponentClassNames<PopoverClassNames>;
|
|
57
|
+
rootLayout?: ComponentClassNames<RootLayoutClassNames>;
|
|
58
|
+
staticTextInput?: ComponentClassNames<StaticTextInputClassNames>;
|
|
59
|
+
switch?: ComponentClassNames<SwitchClassNames>;
|
|
60
|
+
table?: ComponentClassNames<TableClassNames>;
|
|
61
|
+
tabs?: ComponentClassNames<TabsClassNames>;
|
|
62
|
+
textButton?: ComponentClassNames<TextButtonClassNames>;
|
|
63
|
+
textInput?: ComponentClassNames<TextInputClassNames>;
|
|
64
|
+
toast?: ComponentClassNames<ToastClassNames>;
|
|
65
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { RegisteredClassNames } from './config';
|
|
2
|
+
import type { ExtractClassNames } from './interfaces';
|
|
3
|
+
export declare function registerClassNames(data: RegisteredClassNames): void;
|
|
4
|
+
export declare function getClassNames<K extends keyof RegisteredClassNames>(component: K, config?: {
|
|
5
|
+
props?: Record<string, boolean>;
|
|
6
|
+
states?: Record<string, boolean>;
|
|
7
|
+
}, overrides?: RegisteredClassNames[K]): ExtractClassNames<RegisteredClassNames[K]>;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { getEntries } from '@sqrzro/utility';
|
|
2
|
+
import tw from './tw';
|
|
3
|
+
import isClassNameObject from './utility/is-classname-object';
|
|
4
|
+
let registeredClassNames = {};
|
|
5
|
+
export function registerClassNames(data) {
|
|
6
|
+
registeredClassNames = { ...registeredClassNames, ...data };
|
|
7
|
+
}
|
|
8
|
+
export function getClassNames(component, config, overrides) {
|
|
9
|
+
const componentClassNames = registeredClassNames[component];
|
|
10
|
+
if (!componentClassNames) {
|
|
11
|
+
return {};
|
|
12
|
+
}
|
|
13
|
+
const overridden = { ...componentClassNames, ...overrides };
|
|
14
|
+
return getEntries(overridden).reduce((acc, [key, value]) => {
|
|
15
|
+
if (typeof value === 'string') {
|
|
16
|
+
return { ...acc, [key]: value };
|
|
17
|
+
}
|
|
18
|
+
if (isClassNameObject(value)) {
|
|
19
|
+
const { default: defaultClassName, props, states } = value;
|
|
20
|
+
const propClassNames = props
|
|
21
|
+
? Object.keys(props)
|
|
22
|
+
.filter((key) => config?.props?.[key])
|
|
23
|
+
.map((key) => props[key])
|
|
24
|
+
: [];
|
|
25
|
+
const stateClassNames = states
|
|
26
|
+
? Object.keys(states)
|
|
27
|
+
.filter((key) => config?.states?.[key])
|
|
28
|
+
.map((key) => states[key])
|
|
29
|
+
: [];
|
|
30
|
+
return {
|
|
31
|
+
...acc,
|
|
32
|
+
[key]: tw(defaultClassName, ...propClassNames, ...stateClassNames),
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
return acc;
|
|
36
|
+
}, {});
|
|
37
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
type ComponentClassNamesValue<T> = T extends string ? string | StatefulClassName : T extends StatefulClassName<infer U> ? StatefulClassName<U> : never;
|
|
2
|
+
export type ComponentClassNames<T> = {
|
|
3
|
+
[K in keyof T]?: ComponentClassNamesValue<T[K]>;
|
|
4
|
+
};
|
|
5
|
+
export type ExtractClassNames<T> = {
|
|
6
|
+
[K in keyof T]?: string;
|
|
7
|
+
};
|
|
8
|
+
export interface ClassNameObject {
|
|
9
|
+
default: string;
|
|
10
|
+
props?: Record<string, string>;
|
|
11
|
+
states?: Record<string, string>;
|
|
12
|
+
}
|
|
13
|
+
export interface ClassNameProps<T> {
|
|
14
|
+
classNames?: Partial<T>;
|
|
15
|
+
classNameProps?: Record<string, boolean>;
|
|
16
|
+
}
|
|
17
|
+
interface StatefulClassName<T = null> {
|
|
18
|
+
default: string;
|
|
19
|
+
props?: Record<string, string>;
|
|
20
|
+
states?: T;
|
|
21
|
+
}
|
|
22
|
+
export type CheckableClassName = string | StatefulClassName<{
|
|
23
|
+
isChecked?: string;
|
|
24
|
+
}>;
|
|
25
|
+
export type ErrorableClassName = string | StatefulClassName<{
|
|
26
|
+
isError?: string;
|
|
27
|
+
}>;
|
|
28
|
+
export type FocusableClassName = string | StatefulClassName<{
|
|
29
|
+
isFocused?: string;
|
|
30
|
+
}>;
|
|
31
|
+
export type HighlightableClassName = string | StatefulClassName<{
|
|
32
|
+
isHighlighted?: string;
|
|
33
|
+
}>;
|
|
34
|
+
export type LoadableClassName = string | StatefulClassName<{
|
|
35
|
+
isLoading?: string;
|
|
36
|
+
}>;
|
|
37
|
+
export type SelectableClassName = string | StatefulClassName<{
|
|
38
|
+
isSelected?: string;
|
|
39
|
+
}>;
|
|
40
|
+
export type SizableClassName = string | StatefulClassName<{
|
|
41
|
+
isLarge?: string;
|
|
42
|
+
isMedium?: string;
|
|
43
|
+
isSmall?: string;
|
|
44
|
+
}>;
|
|
45
|
+
export type StylableClassName = string | StatefulClassName;
|
|
46
|
+
export type StylableButtonClassName = string | StatefulClassName;
|
|
47
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { IconComponent } from './interfaces';
|
|
2
|
+
export interface RegisteredIcons {
|
|
3
|
+
'collection.empty'?: IconComponent;
|
|
4
|
+
'filter.panel'?: IconComponent;
|
|
5
|
+
'filter.search'?: IconComponent;
|
|
6
|
+
password?: IconComponent;
|
|
7
|
+
'utility.success'?: IconComponent;
|
|
8
|
+
'utility.error'?: IconComponent;
|
|
9
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/styles/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export type { RegisteredClassNames } from './config';
|
|
2
|
-
export { default as tw, twx } from './tw';
|
|
1
|
+
export type { RegisteredClassNames } from './classnames/config';
|
|
2
|
+
export { default as tw, twx } from './classnames/tw';
|
package/dist/styles/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as tw, twx } from './tw';
|
|
1
|
+
export { default as tw, twx } from './classnames/tw';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqrzro/ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "4.0.0-alpha.
|
|
4
|
+
"version": "4.0.0-alpha.14",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"license": "ISC",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"react-dom": "^19.2.1",
|
|
46
46
|
"tailwind-merge": "^3.4.0",
|
|
47
47
|
"use-deep-compare-effect": "^1.8.1",
|
|
48
|
-
"@sqrzro/utility": "^4.0.0-alpha.
|
|
48
|
+
"@sqrzro/utility": "^4.0.0-alpha.3"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@storybook/addon-a11y": "^10.1.7",
|
package/dist/styles/config.d.ts
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import type { ButtonClassNames } from '../components/buttons/Button';
|
|
2
|
-
import type { TextButtonClassNames } from '../components/buttons/TextButton';
|
|
3
|
-
import type { DataTableClassNames } from '../components/collections/DataTable';
|
|
4
|
-
import type { EmptyMessageClassNames } from '../components/collections/EmptyMessage';
|
|
5
|
-
import type { ListItemClassNames } from '../components/collections/ListItem';
|
|
6
|
-
import type { ListItemMetaClassNames } from '../components/collections/ListItemMeta';
|
|
7
|
-
import type { PaginationClassNames } from '../components/collections/Pagination';
|
|
8
|
-
import type { TableClassNames } from '../components/collections/Table';
|
|
9
|
-
import type { ModalClassNames } from '../components/modals/Modal';
|
|
10
|
-
import type { ActionListClassNames } from '../components/utility/ActionList';
|
|
11
|
-
import type { ContainerClassNames } from '../components/utility/Container';
|
|
12
|
-
import type { LinkClassNames } from '../components/utility/Link';
|
|
13
|
-
import type { LoaderClassNames } from '../components/utility/Loader';
|
|
14
|
-
import type { PopoverClassNames } from '../components/utility/Popover';
|
|
15
|
-
import type { RootLayoutClassNames } from '../components/utility/RootLayout';
|
|
16
|
-
import type { ToastClassNames } from '../components/utility/Toast';
|
|
17
|
-
import type { FilterBarClassNames } from '../filters/components/FilterBar';
|
|
18
|
-
import type { FilterItemClassNames } from '../filters/components/FilterItem';
|
|
19
|
-
import type { FilterPanelClassNames } from '../filters/components/FilterPanel';
|
|
20
|
-
import type { DropdownClassNames } from '../forms/components/Dropdown';
|
|
21
|
-
import type { EditableFormClassNames } from '../forms/components/EditableForm';
|
|
22
|
-
import type { EditableFormFieldClassNames } from '../forms/components/EditableFormField';
|
|
23
|
-
import type { FormClassNames } from '../forms/components/Form';
|
|
24
|
-
import type { FormFieldClassNames } from '../forms/components/FormField';
|
|
25
|
-
import type { PasswordInputClassNames } from '../forms/components/PasswordInput';
|
|
26
|
-
import type { StaticTextInputClassNames } from '../forms/components/StaticTextInput';
|
|
27
|
-
import type { SwitchClassNames } from '../forms/components/Switch';
|
|
28
|
-
import type { TextInputClassNames } from '../forms/components/TextInput';
|
|
29
|
-
import type { AppNavigationClassNames } from '../navigation/components/AppNavigation';
|
|
30
|
-
import type { TabsClassNames } from '../navigation/components/Tabs';
|
|
31
|
-
type ComponentClassNames<T> = Partial<T>;
|
|
32
|
-
export interface RegisteredClassNames {
|
|
33
|
-
actionList?: ComponentClassNames<ActionListClassNames>;
|
|
34
|
-
appNavigation?: ComponentClassNames<AppNavigationClassNames>;
|
|
35
|
-
button?: ComponentClassNames<ButtonClassNames>;
|
|
36
|
-
container?: ComponentClassNames<ContainerClassNames>;
|
|
37
|
-
dataTable?: ComponentClassNames<DataTableClassNames>;
|
|
38
|
-
dropdown?: ComponentClassNames<DropdownClassNames>;
|
|
39
|
-
editableForm?: ComponentClassNames<EditableFormClassNames>;
|
|
40
|
-
editableFormField?: ComponentClassNames<EditableFormFieldClassNames>;
|
|
41
|
-
emptyMessage?: ComponentClassNames<EmptyMessageClassNames>;
|
|
42
|
-
filterBar?: ComponentClassNames<FilterBarClassNames>;
|
|
43
|
-
filterItem?: ComponentClassNames<FilterItemClassNames>;
|
|
44
|
-
filterPanel?: ComponentClassNames<FilterPanelClassNames>;
|
|
45
|
-
form?: ComponentClassNames<FormClassNames>;
|
|
46
|
-
formField?: ComponentClassNames<FormFieldClassNames>;
|
|
47
|
-
link?: ComponentClassNames<LinkClassNames>;
|
|
48
|
-
listItem?: ComponentClassNames<ListItemClassNames>;
|
|
49
|
-
listItemMeta?: ComponentClassNames<ListItemMetaClassNames>;
|
|
50
|
-
loader?: ComponentClassNames<LoaderClassNames>;
|
|
51
|
-
modal?: ComponentClassNames<ModalClassNames>;
|
|
52
|
-
pagination?: ComponentClassNames<PaginationClassNames>;
|
|
53
|
-
passwordInput?: ComponentClassNames<PasswordInputClassNames>;
|
|
54
|
-
popover?: ComponentClassNames<PopoverClassNames>;
|
|
55
|
-
rootLayout?: ComponentClassNames<RootLayoutClassNames>;
|
|
56
|
-
staticTextInput?: ComponentClassNames<StaticTextInputClassNames>;
|
|
57
|
-
switch?: ComponentClassNames<SwitchClassNames>;
|
|
58
|
-
table?: ComponentClassNames<TableClassNames>;
|
|
59
|
-
tabs?: ComponentClassNames<TabsClassNames>;
|
|
60
|
-
textButton?: ComponentClassNames<TextButtonClassNames>;
|
|
61
|
-
textInput?: ComponentClassNames<TextInputClassNames>;
|
|
62
|
-
toast?: ComponentClassNames<ToastClassNames>;
|
|
63
|
-
}
|
|
64
|
-
export declare function registerClassNames(data: RegisteredClassNames): void;
|
|
65
|
-
export declare function getClassNames<K extends keyof RegisteredClassNames>(componentName: K): (props?: Record<string, unknown>) => RegisteredClassNames[K];
|
|
66
|
-
export {};
|
package/dist/styles/config.js
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
// import type { ActionListClassNames } from '../elements/ActionList';
|
|
2
|
-
// import type { AppNavigationClassNames } from '../navigation/components/AppNavigation';
|
|
3
|
-
// import type { BadgeClassNames } from '../elements/Badge';
|
|
4
|
-
// import type { CalendarClassNames } from '../forms/Calendar';
|
|
5
|
-
// import type { CalendarInputClassNames } from '../forms/CalendarInput';
|
|
6
|
-
// import type { CalendarNavigationClassNames } from '../forms/CalendarNavigation';
|
|
7
|
-
// import type { CheckboxInputClassNames } from '../forms/CheckboxInput';
|
|
8
|
-
// import type { CodeInputClassNames } from '../forms/CodeInput';
|
|
9
|
-
// import type { ColorInputClassNames } from '../forms/ColorInput';
|
|
10
|
-
// import type { CSVInputClassNames } from '../forms/CSVInput';
|
|
11
|
-
// import type { DefinitionListClassNames } from '../elements/DefinitionList';
|
|
12
|
-
// import type { DropdownClassNames } from '../forms/Dropdown';
|
|
13
|
-
// import type { EditableFormClassNames } from '../forms/EditableForm';
|
|
14
|
-
// import type { EditableFormFieldClassNames } from '../forms/EditableFormField';
|
|
15
|
-
// import type { FieldsetClassNames } from '../forms/Fieldset';
|
|
16
|
-
// import type { FilterBarClassNames } from '../filters/components/FilterBar';
|
|
17
|
-
// import type { FilterItemClassNames } from '../filters/components/FilterItem';
|
|
18
|
-
// import type { FilterPanelClassNames } from '../filters/components/FilterPanel';
|
|
19
|
-
// import type { FormClassNames } from '../forms/Form';
|
|
20
|
-
// import type { ImageInputClassNames } from '../forms/ImageInput';
|
|
21
|
-
// import type { InfoPanelClassNames } from '../elements/InfoPanel';
|
|
22
|
-
// import type { ListMenuClassNames } from '../lists/ListMenu';
|
|
23
|
-
// import type { ListMenuButtonClassNames } from '../lists/ListMenuButton';
|
|
24
|
-
// import type { LoadingModalClassNames } from '../modals/LoadingModal';
|
|
25
|
-
// import type { ModalClassNames } from '../modals/Modal';
|
|
26
|
-
// import type { MultiInputClassNames } from '../forms/MultiInput';
|
|
27
|
-
// import type { ObjectInputClassNames } from '../forms/ObjectInput';
|
|
28
|
-
// import type { RadioInputClassNames } from '../forms/RadioInput';
|
|
29
|
-
// import type { StaticTextInputClassNames } from '../forms/StaticTextInput';
|
|
30
|
-
// import type { SwitchClassNames } from '../forms/Switch';
|
|
31
|
-
// import type { PasswordInputClassNames } from '../forms/PasswordInput';
|
|
32
|
-
// import type { TableClassNames } from '../tables/Table';
|
|
33
|
-
// import type { TextAreaClassNames } from '../forms/TextArea';
|
|
34
|
-
// import type { TextInputClassNames } from '../forms/TextInput';
|
|
35
|
-
// import type { ToastClassNames } from '../elements/Toast';
|
|
36
|
-
// import type { TooltipClassNames } from '../elements/Tooltip';
|
|
37
|
-
let registeredClassNames = {};
|
|
38
|
-
export function registerClassNames(data) {
|
|
39
|
-
registeredClassNames = { ...registeredClassNames, ...data };
|
|
40
|
-
}
|
|
41
|
-
export function getClassNames(componentName) {
|
|
42
|
-
return () => registeredClassNames[componentName];
|
|
43
|
-
}
|
package/dist/styles/icons.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
type IconComponent = React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & {
|
|
2
|
-
title?: string;
|
|
3
|
-
titleId?: string;
|
|
4
|
-
} & React.RefAttributes<SVGSVGElement>>;
|
|
5
|
-
export interface RegisteredIcons {
|
|
6
|
-
'collection.empty'?: IconComponent;
|
|
7
|
-
'filter.panel'?: IconComponent;
|
|
8
|
-
'filter.search'?: IconComponent;
|
|
9
|
-
password?: IconComponent;
|
|
10
|
-
'utility.success'?: IconComponent;
|
|
11
|
-
'utility.error'?: IconComponent;
|
|
12
|
-
}
|
|
13
|
-
export declare function registerIcons(data: RegisteredIcons): void;
|
|
14
|
-
export declare function getIcon(componentName: keyof RegisteredIcons): IconComponent | null;
|
|
15
|
-
export {};
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import type { ButtonVariant, StyleVariant } from "../utility/interfaces";
|
|
2
|
-
export interface ClassNameProps<T> {
|
|
3
|
-
classNames?: Partial<T>;
|
|
4
|
-
classNameProps?: Record<string, unknown>;
|
|
5
|
-
}
|
|
6
|
-
export interface CheckableClassName {
|
|
7
|
-
default?: string;
|
|
8
|
-
checked?: string;
|
|
9
|
-
}
|
|
10
|
-
export interface ErrorableClassName {
|
|
11
|
-
default?: string;
|
|
12
|
-
error?: string;
|
|
13
|
-
}
|
|
14
|
-
export interface FocusableClassName {
|
|
15
|
-
default?: string;
|
|
16
|
-
focused?: string;
|
|
17
|
-
}
|
|
18
|
-
export interface HighlightableClassName {
|
|
19
|
-
default?: string;
|
|
20
|
-
highlighted?: string;
|
|
21
|
-
}
|
|
22
|
-
export interface LoadableClassName {
|
|
23
|
-
default?: string;
|
|
24
|
-
loading?: string;
|
|
25
|
-
}
|
|
26
|
-
export interface SelectableClassName {
|
|
27
|
-
default?: string;
|
|
28
|
-
selected?: string;
|
|
29
|
-
}
|
|
30
|
-
export interface SizableClassName {
|
|
31
|
-
default?: string;
|
|
32
|
-
lg?: string;
|
|
33
|
-
md?: string;
|
|
34
|
-
sm?: string;
|
|
35
|
-
}
|
|
36
|
-
export type StylableClassName = Partial<Record<StyleVariant, string>> & {
|
|
37
|
-
default?: string;
|
|
38
|
-
};
|
|
39
|
-
export type StylableButtonClassName = Partial<Record<ButtonVariant, string>> & {
|
|
40
|
-
default?: string;
|
|
41
|
-
};
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|