matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: lint

Browse Source 
Signed-off-by: mkljczk <git@mkljczk.pl>
This commit is contained in:
mkljczk
2024-12-05 17:16:43 +01:00
parent 4ff23c77e8
commit 329d4e89bd
151 changed files with 233 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/pl-fe/src/components/ui/accordion.tsx
View File

@@ -46,7 +46,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
};
return (
<div className='dark:bg-primary-800 rounded-lg bg-white text-gray-900 shadow dark:text-gray-100 dark:shadow-none'>
<div className='rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none'>
<button
type='button'
onClick={handleToggle}

2
packages/pl-fe/src/components/ui/card.tsx
View File

@@ -71,7 +71,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
return (
<Comp {...backAttributes} className='focus:ring-primary-500 rounded-full text-gray-900 focus:ring-2 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
<Comp {...backAttributes} className='rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
<SvgIcon src={require('@tabler/icons/outline/arrow-left.svg')} className='size-6 rtl:rotate-180' />
<span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
</Comp>

2
packages/pl-fe/src/components/ui/checkbox.tsx
View File

@@ -8,7 +8,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => (
{...props}
ref={ref}
type='checkbox'
className='text-primary-600 focus:ring-primary-500 black:bg-black size-4 rounded border-2 border-gray-300 dark:border-gray-800 dark:bg-gray-900'
className='size-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900'
/>
));

2
packages/pl-fe/src/components/ui/counter.tsx
View File

@@ -11,7 +11,7 @@ interface ICounter {
/** A simple counter for notifications, etc. */
const Counter: React.FC<ICounter> = ({ count, countMax }) => (
<span className='bg-secondary-500 black:ring-black flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full text-xs font-medium text-white ring-2 ring-white dark:ring-gray-800'>
<span className='flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full bg-secondary-500 text-xs font-medium text-white ring-2 ring-white black:ring-black dark:ring-gray-800'>
<AnimatedNumber value={count} max={countMax} />
</span>
);

4
packages/pl-fe/src/components/ui/divider.tsx
View File

@@ -13,12 +13,12 @@ interface IDivider {
const Divider = ({ text, textSize = 'md' }: IDivider) => (
<div className='relative' data-testid='divider'>
<div className='absolute inset-0 flex items-center' aria-hidden='true'>
<div className='black:border-t w-full border-t-2 border-solid border-gray-100 dark:border-gray-800' />
<div className='w-full border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800' />
</div>
{text && (
<div className='relative flex justify-center'>
<span className='black:bg-black bg-white px-2 text-gray-700 dark:bg-gray-900 dark:text-gray-600' data-testid='divider-text'>
<span className='bg-white px-2 text-gray-700 black:bg-black dark:bg-gray-900 dark:text-gray-600' data-testid='divider-text'>
<Text size={textSize} tag='span' theme='inherit'>{text}</Text>
</span>
</div>

4
packages/pl-fe/src/components/ui/form-group.tsx
View File

@@ -57,7 +57,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
<div>
<p
data-testid='form-group-error'
className='form-error bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs'
className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
>
{errors.join(', ')}
</p>
@@ -100,7 +100,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
{hasError && (
<p
data-testid='form-group-error'
className='form-error bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs'
className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
>
{errors.join(', ')}
</p>

2
packages/pl-fe/src/components/ui/icon-button.tsx
View File

@@ -29,7 +29,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
<Component
ref={ref}
type='button'
className={clsx('focus:ring-primary-500 flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0', {
className={clsx('flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0', {
'bg-white dark:bg-transparent': theme === 'seamless',
'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500': theme === 'outlined',
'border-transparent bg-primary-100 dark:bg-primary-800 hover:bg-primary-50 dark:hover:bg-primary-700 focus:bg-primary-100 dark:focus:bg-primary-800 text-primary-500 dark:text-primary-200': theme === 'secondary',

4
packages/pl-fe/src/components/ui/inline-multiselect.tsx
View File

@@ -10,13 +10,13 @@ interface IInlineMultiselect<T extends string> {
/** Allows to select many of available options. */
const InlineMultiselect = <T extends string>({ items, value, onChange, disabled }: IInlineMultiselect<T>) => (
<div className='black:bg-black flex w-fit overflow-auto rounded-md border border-gray-400 bg-white dark:border-gray-800 dark:bg-gray-900'>
<div className='flex w-fit overflow-auto rounded-md border border-gray-400 bg-white black:bg-black dark:border-gray-800 dark:bg-gray-900'>
{Object.entries(items).map(([key, label], i) => {
const checked = value?.includes(key as T);
return (
<label
className={clsx('hover:bg-primary-700 [&:has(:focus-visible)]:bg-primary-700 whitespace-nowrap px-3 py-2 text-white transition-colors', {
className={clsx('whitespace-nowrap px-3 py-2 text-white transition-colors hover:bg-primary-700 [&:has(:focus-visible)]:bg-primary-700', {
'cursor-pointer': !disabled,
'opacity-75': disabled,
'bg-gray-500': !checked,

4
packages/pl-fe/src/components/ui/input.tsx
View File

@@ -87,7 +87,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
{...filteredProps}
type={revealed ? 'text' : type}
ref={ref}
className={clsx('focus:border-primary-500 dark:focus:border-primary-500 block w-full text-base placeholder:text-gray-600 sm:text-sm dark:placeholder:text-gray-600', {
className={clsx('block w-full text-base placeholder:text-gray-600 focus:border-primary-500 dark:placeholder:text-gray-600 dark:focus:border-primary-500 sm:text-sm', {
'ring-1 focus:ring-primary-500 dark:ring-gray-800 dark:focus:ring-primary-500': ['search', 'normal'].includes(theme),
'px-0 border-none !ring-0': theme === 'transparent',
'text-gray-900 dark:text-gray-100': !props.disabled,
@@ -120,7 +120,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
type='button'
onClick={togglePassword}
tabIndex={-1}
className='focus:ring-primary-500 h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 dark:text-gray-600 dark:hover:text-gray-400'
className='h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 dark:text-gray-600 dark:hover:text-gray-400'
>
<SvgIcon
src={revealed ? require('@tabler/icons/outline/eye-off.svg') : require('@tabler/icons/outline/eye.svg')}

2
packages/pl-fe/src/components/ui/layout.tsx
View File

@@ -23,7 +23,7 @@ interface LayoutComponent extends React.FC<ILayout> {
/** Layout container, to hold Sidebar, Main, and Aside. */
const Layout: LayoutComponent = ({ children }) => (
<div className='black:pt-0 relative flex grow flex-col sm:pt-4'>
<div className='relative flex grow flex-col black:pt-0 sm:pt-4'>
<div className='mx-auto w-full max-w-3xl grow sm:px-6 md:grid md:max-w-7xl md:grid-cols-12 md:gap-8 md:px-8 xl:max-w-[1440px]'>
{children}
</div>

8
packages/pl-fe/src/components/ui/modal.tsx
View File

@@ -100,13 +100,13 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
<div
ref={ref}
data-testid='modal'
className={clsx(className, 'black:bg-black dark:bg-primary-900 pointer-events-auto relative mx-auto flex max-h-[90vh] w-full flex-col overflow-auto rounded-2xl bg-white text-start align-middle text-gray-900 shadow-xl transition-all ease-in-out md:max-h-[80vh] dark:text-gray-100', widths[width], {
className={clsx(className, 'pointer-events-auto relative mx-auto flex max-h-[90vh] w-full flex-col overflow-auto rounded-2xl bg-white text-start align-middle text-gray-900 shadow-xl transition-all ease-in-out black:bg-black dark:bg-primary-900 dark:text-gray-100 md:max-h-[80vh]', widths[width], {
'bottom-0': !firstRender,
'no-reduce-motion:-bottom-32': firstRender,
})}
>
{title && (
<div className='black:bg-black/80 dark:bg-primary-900/75 sticky top-0 z-10 bg-white/75 p-6 pb-2 backdrop-blur'>
<div className='sticky top-0 z-10 bg-white/75 p-6 pb-2 backdrop-blur black:bg-black/80 dark:bg-primary-900/75'>
<div
className={clsx('flex w-full items-center gap-2', {
'flex-row-reverse': closePosition === 'left',
@@ -117,7 +117,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
src={require('@tabler/icons/outline/arrow-left.svg')}
title={intl.formatMessage(messages.back)}
onClick={onBack}
className='text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200'
className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
/>
)}
@@ -130,7 +130,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
src={closeIcon}
title={intl.formatMessage(messages.close)}
onClick={onClose}
className='text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200'
className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
/>
)}
</div>

4
packages/pl-fe/src/components/ui/popover.tsx
View File

@@ -107,7 +107,7 @@ const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassN
<div
className={
clsx(
'dark:ring-primary-700 overflow-hidden rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2',
'overflow-hidden rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700',
{ 'p-6': !isFlush },
)
}
@@ -119,7 +119,7 @@ const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassN
<FloatingArrow
ref={arrowRef}
context={context}
className='dark:fill-primary-700 fill-white'
className='fill-white dark:fill-primary-700'
tipRadius={3}
/>
</div>

4
packages/pl-fe/src/components/ui/progress-bar.tsx
View File

@@ -14,7 +14,7 @@ interface IProgressBar {
/** A horizontal meter filled to the given percentage. */
const ProgressBar: React.FC<IProgressBar> = ({ progress, size = 'md' }) => (
<div
className={clsx('dark:bg-primary-800 h-2.5 w-full overflow-hidden rounded-lg bg-gray-300', {
className={clsx('h-2.5 w-full overflow-hidden rounded-lg bg-gray-300 dark:bg-primary-800', {
'h-2.5': size === 'md',
'h-[6px]': size === 'sm',
})}
@@ -22,7 +22,7 @@ const ProgressBar: React.FC<IProgressBar> = ({ progress, size = 'md' }) => (
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress * 100) }}>
{({ width }) => (
<div
className='bg-secondary-500 h-full'
className='h-full bg-secondary-500'
style={{ width: `${width}%` }}
/>
)}

2
packages/pl-fe/src/components/ui/select.tsx
View File

@@ -14,7 +14,7 @@ const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
<select
ref={ref}
className={clsx(
'focus:border-primary-500 focus:ring-primary-500 black:bg-black dark:focus:border-primary-500 dark:focus:ring-primary-500 truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none disabled:opacity-50 sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800',
'truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm',
className,
{
'w-full': full,

6
packages/pl-fe/src/components/ui/slider.tsx
View File

@@ -57,10 +57,10 @@ const Slider: React.FC<ISlider> = ({ value, onChange }) => {
onMouseDown={handleMouseDown}
ref={node}
>
<div className='bg-primary-200 dark:bg-primary-700 absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full' />
<div className='bg-accent-500 absolute top-1/2 h-1 -translate-y-1/2 rounded-full' style={{ width: `${value * 100}%` }} />
<div className='absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700' />
<div className='absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500' style={{ width: `${value * 100}%` }} />
<span
className='bg-accent-500 absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full shadow'
className='absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow'
tabIndex={0}
style={{ left: `${value * 100}%` }}
/>

4
packages/pl-fe/src/components/ui/tabs.tsx
View File

@@ -46,11 +46,11 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
ref={ref}
>
<div
className='bg-primary-200 absolute h-[3px] w-full dark:bg-gray-800'
className='absolute h-[3px] w-full bg-primary-200 dark:bg-gray-800'
style={{ top }}
/>
<div
className={clsx('bg-primary-500 absolute h-[3px] transition-all duration-200', {
className={clsx('absolute h-[3px] bg-primary-500 transition-all duration-200', {
'hidden': top <= 0,
})}
style={{ left, top, width }}

2
packages/pl-fe/src/components/ui/tag-input.tsx
View File

@@ -44,7 +44,7 @@ const TagInput: React.FC<ITagInput> = ({ tags, onChange, placeholder }) => {
return (
<div className='relative mt-1 grow shadow-sm'>
<HStack
className='focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600'
className='block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm'
space={2}
wrap
>

2
packages/pl-fe/src/components/ui/tag.tsx
View File

@@ -12,7 +12,7 @@ interface ITag {
/** A single editable Tag (used by TagInput). */
const Tag: React.FC<ITag> = ({ tag, onDelete }) => (
<div className='bg-primary-500 inline-flex items-center whitespace-nowrap rounded p-1'>
<div className='inline-flex items-center whitespace-nowrap rounded bg-primary-500 p-1'>
<Text theme='white'>{tag}</Text>
<IconButton

2
packages/pl-fe/src/components/ui/textarea.tsx
View File

@@ -91,7 +91,7 @@ const Textarea = React.forwardRef(({
ref={ref}
rows={rows}
onChange={handleChange}
className={clsx('block w-full rounded-md text-gray-900 placeholder:text-gray-600 sm:text-sm dark:text-gray-100 dark:placeholder:text-gray-600', {
className={clsx('block w-full rounded-md text-gray-900 placeholder:text-gray-600 dark:text-gray-100 dark:placeholder:text-gray-600 sm:text-sm', {
'bg-white dark:bg-transparent shadow-sm border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
theme === 'default',
'bg-transparent border-0 focus:border-0 focus:ring-0': theme === 'transparent',

8
packages/pl-fe/src/components/ui/toast.tsx
View File

@@ -43,7 +43,7 @@ const Toast = (props: IToast) => {
return (
<Icon
src={require('@tabler/icons/outline/circle-check.svg')}
className='text-success-500 dark:text-success-400 size-6'
className='size-6 text-success-500 dark:text-success-400'
aria-hidden
/>
);
@@ -51,7 +51,7 @@ const Toast = (props: IToast) => {
return (
<Icon
src={require('@tabler/icons/outline/info-circle.svg')}
className='text-primary-600 dark:text-accent-blue size-6'
className='size-6 text-primary-600 dark:text-accent-blue'
aria-hidden
/>
);
@@ -59,7 +59,7 @@ const Toast = (props: IToast) => {
return (
<Icon
src={require('@tabler/icons/outline/alert-circle.svg')}
className='text-danger-600 size-6'
className='size-6 text-danger-600'
aria-hidden
/>
);
@@ -138,7 +138,7 @@ const Toast = (props: IToast) => {
<div className='flex shrink-0 pt-0.5'>
<button
type='button'
className='focus:ring-primary-500 inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
className='inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
onClick={dismissToast}
data-testid='toast-dismiss'
>

2
packages/pl-fe/src/components/ui/toggle.tsx
View File

@@ -16,7 +16,7 @@ const Toggle: React.FC<IToggle> = ({ id, size = 'md', name, checked = false, onC
return (
<button
className={clsx('focus:ring-primary-500 dark:focus:ring-primary-500 flex-none rounded-full focus:ring-2 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0', {
className={clsx('flex-none rounded-full focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus:ring-primary-500', {
'bg-gray-500': !checked && !disabled,
'bg-primary-600': checked && !disabled,
'bg-gray-200': !checked && disabled,

2
packages/pl-fe/src/components/ui/widget.tsx
View File

@@ -52,7 +52,7 @@ const Widget: React.FC<IWidget> = ({
{title && <WidgetTitle title={title} />}
{action || (onActionClick && (
<IconButton
className='ml-2 size-6 text-black rtl:rotate-180 dark:text-white'
className='ml-2 size-6 text-black dark:text-white rtl:rotate-180'
src={actionIcon}
onClick={onActionClick}
title={actionTitle}