From 7c52ed1729d55eaff7f13723ad7b0c7a20346c9d Mon Sep 17 00:00:00 2001 From: Mikel Madariaga Date: Fri, 22 Dec 2023 10:22:36 +0100 Subject: [PATCH 1/5] enhyanced store/theme types --- library/src/store/theme.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/library/src/store/theme.ts b/library/src/store/theme.ts index a2ac632..26f3d6c 100644 --- a/library/src/store/theme.ts +++ b/library/src/store/theme.ts @@ -12,9 +12,9 @@ export interface ThemeState { } interface ThemeActions { - setName: Action; - setTheme: Action; - setLogo: Action; + setName: Action; + setTheme: Action; + setLogo: Action; } export type ThemeStore = ThemeState & ThemeActions; From de999438c1e20120113d20dfc93e76c70871390e Mon Sep 17 00:00:00 2001 From: Mikel Madariaga Date: Fri, 22 Dec 2023 12:55:53 +0100 Subject: [PATCH 2/5] extract to a function and export StyledListContent's styles --- .../List/Content/ListContent.styles.tsx | 113 +++++++++--------- 1 file changed, 57 insertions(+), 56 deletions(-) diff --git a/library/src/components/List/Content/ListContent.styles.tsx b/library/src/components/List/Content/ListContent.styles.tsx index c01ba66..375dd9f 100644 --- a/library/src/components/List/Content/ListContent.styles.tsx +++ b/library/src/components/List/Content/ListContent.styles.tsx @@ -1,78 +1,79 @@ -import { Fab, Theme } from '@mui/material'; -import { styled } from '@mui/material'; +import { Fab, Theme, styled } from '@mui/material'; +import { forwardRef } from 'react'; import HistoryTrackerLink, { HistoryTrackerLinkProps, } from '../../../components/shared/HistoryTrackerLink'; -import { forwardRef } from 'react'; import ListContent from './ListContent'; -export const StyledListContent = styled(ListContent)( - ({ theme }: { theme: Theme }) => { - return { +export const ListContentStyler = ({ theme }: { theme: Theme }) => { + return { + display: 'flex', + flexDirection: 'column', + gap: 'var(--spacing-md)', + + '& .list-content-header': { display: 'flex', - flexDirection: 'column', - gap: 'var(--spacing-md)', + gap: 'var(--spacing-sm)', + justifyContent: 'space-between', + }, - '& .list-content-header': { - display: 'flex', - gap: 'var(--spacing-sm)', - justifyContent: 'space-between', + '& .buttons': { + display: 'flex', + gap: 'var(--spacing-sm)', + alignItems: 'center', + '&.start': { + flexShrink: 1, + minWidth: 0, }, - - '& .buttons': { - display: 'flex', - gap: 'var(--spacing-sm)', - alignItems: 'center', - '&.start': { - flexShrink: 1, - minWidth: 0, - }, - '&.end': { - flexShrink: 0, - }, + '&.end': { + flexShrink: 0, }, + }, - '.text-field': { - width: 'unset', - }, + '.text-field': { + width: 'unset', + }, - '& .input-field': { - background: 'var(--color-background)', - color: 'var(--color-text)', - [theme.breakpoints.down('md')]: { - background: 'var(--color-background-elevated)', - }, + '& .input-field': { + background: 'var(--color-background)', + color: 'var(--color-text)', + [theme.breakpoints.down('md')]: { + background: 'var(--color-background-elevated)', }, + }, - '.filter-chips': { - display: 'flex', - gap: 'var(--spacing-sm)', - flexShrink: '1', - overflow: 'auto', - paddingBottom: '2px', + '.filter-chips': { + display: 'flex', + gap: 'var(--spacing-sm)', + flexShrink: '1', + overflow: 'auto', + paddingBottom: '2px', - '&::-webkit-scrollbar': { - height: '6px', - }, + '&::-webkit-scrollbar': { + height: '6px', + }, - '&::-webkit-scrollbar-thumb': { - borderRadius: '6px', - background: 'var(--color-button)', - }, + '&::-webkit-scrollbar-thumb': { + borderRadius: '6px', + background: 'var(--color-button)', + }, - '&::-webkit-scrollbar-thumb:hover': { - background: 'var(--color-border)', - }, + '&::-webkit-scrollbar-thumb:hover': { + background: 'var(--color-border)', }, + }, - '& .card': { - paddingBottom: 0, - [theme.breakpoints.down('md')]: { - paddingBlock: 0, - }, + '& .card': { + paddingBottom: 0, + [theme.breakpoints.down('md')]: { + paddingBlock: 0, }, - }; - } + }, + }; +}; + +export const StyledListContent = styled(ListContent)( + ListContentStyler as any ); export const StyledActionButtonContainer = styled('div')(() => { From 08ab45a427b1466cc9a22fff244ff868b087ce80 Mon Sep 17 00:00:00 2001 From: Mikel Madariaga Date: Thu, 28 Dec 2023 09:57:37 +0100 Subject: [PATCH 3/5] added color picker input field --- library/package.json | 2 +- .../services/api/ParsedApiSpecInterface.ts | 2 +- .../form/Field/TextField/TextField.styles.tsx | 11 ++++ .../FormFieldFactory/Factory/ColorFactory.tsx | 64 +++++++++++++++++++ .../form/FormFieldFactory/Factory/index.ts | 2 + .../FormFieldFactory/FormFieldFactory.tsx | 19 ++++++ 6 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 library/src/services/form/FormFieldFactory/Factory/ColorFactory.tsx diff --git a/library/package.json b/library/package.json index 30a9012..1ecc0f7 100644 --- a/library/package.json +++ b/library/package.json @@ -1,6 +1,6 @@ { "name": "@irontec/ivoz-ui", - "version": "1.1.18", + "version": "1.1.19", "description": "UI library used in ivozprovider", "license": "GPL-3.0", "main": "index.js", diff --git a/library/src/services/api/ParsedApiSpecInterface.ts b/library/src/services/api/ParsedApiSpecInterface.ts index 7716d80..b315992 100644 --- a/library/src/services/api/ParsedApiSpecInterface.ts +++ b/library/src/services/api/ParsedApiSpecInterface.ts @@ -56,7 +56,7 @@ export interface visualToggle { } type PropertyType = 'array' | 'file' | 'boolean' | 'integer' | 'string'; -type PropertyFormat = 'date-time' | 'date' | 'time' | 'textarea' | 'password'; +type PropertyFormat = 'date-time' | 'date' | 'time' | 'textarea' | 'password' | 'color'; export interface ScalarProperty { type?: PropertyType; diff --git a/library/src/services/form/Field/TextField/TextField.styles.tsx b/library/src/services/form/Field/TextField/TextField.styles.tsx index 25e394d..9897117 100644 --- a/library/src/services/form/Field/TextField/TextField.styles.tsx +++ b/library/src/services/form/Field/TextField/TextField.styles.tsx @@ -91,6 +91,17 @@ export const StyledTextField = styled(TextField)(() => { }; }); +export const StyledColorField = styled(StyledTextField)(() => { + return { + '& input[type=color]': { + padding: '0 2px', + minHeight: '40px', + borderRadius: '18px', + overflow: 'hidden' + }, + }; +}); + export const StyledAutocompleteTextField = styled(StyledTextField)(() => { return { '& .input-field': { diff --git a/library/src/services/form/FormFieldFactory/Factory/ColorFactory.tsx b/library/src/services/form/FormFieldFactory/Factory/ColorFactory.tsx new file mode 100644 index 0000000..261513d --- /dev/null +++ b/library/src/services/form/FormFieldFactory/Factory/ColorFactory.tsx @@ -0,0 +1,64 @@ +import { InputAdornment, InputBaseComponentProps, OutlinedInputProps } from '@mui/material'; +import { FormOnChangeEvent } from '../../../../entities/DefaultEntityBehavior/Form/Form'; +import { ScalarProperty } from '../../../api'; +import { ScalarEntityValue } from '../../../entity'; +import { StyledColorField } from '../../Field/TextField/TextField.styles'; + +type ColorFactoryPropsType = { + fld: string; + property: ScalarProperty; + disabled: boolean; + value: ScalarEntityValue | Array; + hasChanged: boolean; + error: React.ReactNode; + touched: boolean | undefined; + inputProps: InputBaseComponentProps; + InputProps: Partial; + changeHandler: (event: FormOnChangeEvent) => void; + handleBlur: (event: React.FocusEvent) => void; +}; + +export const ColorFactory = ( + props: ColorFactoryPropsType +): JSX.Element => { + const { + fld, + property, + disabled, + value, + hasChanged, + error, + touched, + inputProps, + InputProps, + changeHandler, + handleBlur, + } = props; + + if (!InputProps.endAdornment) { + InputProps.endAdornment = ( + + {value} + + ); + } + + return ( + + ); +}; diff --git a/library/src/services/form/FormFieldFactory/Factory/index.ts b/library/src/services/form/FormFieldFactory/Factory/index.ts index eb46e9c..c05c310 100644 --- a/library/src/services/form/FormFieldFactory/Factory/index.ts +++ b/library/src/services/form/FormFieldFactory/Factory/index.ts @@ -10,6 +10,7 @@ import { PasswordFactory } from './PasswordFactory'; import { SwitchFactory } from './SwitchFactory'; import { TextareaFactory } from './TextareaFactory'; import { TimeFactory } from './TimeFactory'; +import { ColorFactory } from './ColorFactory'; export { AutocompleteFactory, @@ -24,4 +25,5 @@ export { SwitchFactory, TextareaFactory, TimeFactory, + ColorFactory, }; diff --git a/library/src/services/form/FormFieldFactory/FormFieldFactory.tsx b/library/src/services/form/FormFieldFactory/FormFieldFactory.tsx index 0841b91..bbd0277 100644 --- a/library/src/services/form/FormFieldFactory/FormFieldFactory.tsx +++ b/library/src/services/form/FormFieldFactory/FormFieldFactory.tsx @@ -33,6 +33,7 @@ import { SwitchFactory, TextareaFactory, TimeFactory, + ColorFactory, } from './Factory/index'; export type NullableFormFieldFactoryChoices = null | DropdownChoices; @@ -308,6 +309,24 @@ export default class FormFieldFactory { ); } + if (property.format === 'color') { + return ( + + ); + } + return ( Date: Thu, 28 Dec 2023 10:00:24 +0100 Subject: [PATCH 4/5] added color field example in demo portal --- demo/api/assets/docs.json | 5 +++++ demo/src/entities/Client/Client.tsx | 5 +++++ demo/src/entities/Client/ClientProperties.ts | 1 + demo/src/entities/Client/Form.tsx | 1 + 4 files changed, 12 insertions(+) diff --git a/demo/api/assets/docs.json b/demo/api/assets/docs.json index 11e7f40..010a228 100644 --- a/demo/api/assets/docs.json +++ b/demo/api/assets/docs.json @@ -3566,6 +3566,11 @@ "description": "", "type": "string" }, + "color": { + "maxLength": 15, + "description": "", + "type": "string" + }, "customTabUrl": { "default": "", "maxLength": 512, diff --git a/demo/src/entities/Client/Client.tsx b/demo/src/entities/Client/Client.tsx index 2e71430..d285eab 100644 --- a/demo/src/entities/Client/Client.tsx +++ b/demo/src/entities/Client/Client.tsx @@ -17,6 +17,11 @@ const properties: ClientProperties = { 'Used at login screen in username field after user_name@. Cannot contain whitespaces.' ), }, + color: { + label: _('Color'), + format: 'color', + default: '#000000', + }, domain: { label: _('Domain'), helpText: _( diff --git a/demo/src/entities/Client/ClientProperties.ts b/demo/src/entities/Client/ClientProperties.ts index 02eaf3e..e3c1a24 100644 --- a/demo/src/entities/Client/ClientProperties.ts +++ b/demo/src/entities/Client/ClientProperties.ts @@ -7,6 +7,7 @@ import { export type ClientPropertyList = { id?: T; iden?: T; + color?: T; domain?: T; language?: T; desktopLicences?: T; diff --git a/demo/src/entities/Client/Form.tsx b/demo/src/entities/Client/Form.tsx index 3a095ca..1226138 100644 --- a/demo/src/entities/Client/Form.tsx +++ b/demo/src/entities/Client/Form.tsx @@ -35,6 +35,7 @@ const Form = (props: EntityFormProps): JSX.Element => { create && 'platform', showRemoteId && 'remoteId', 'iden', + 'color', { name: 'description', size: { From fd48a57bc67f6fe576ccb31826472f13d0a7ad60 Mon Sep 17 00:00:00 2001 From: Mikel Madariaga Date: Thu, 28 Dec 2023 10:05:42 +0100 Subject: [PATCH 5/5] fixed linter issues --- demo/src/router/AppRoutes.tsx | 2 +- .../src/components/List/Content/ListContent.styles.tsx | 4 +--- library/src/components/Login/Login.styles.tsx | 1 - library/src/services/api/ParsedApiSpecInterface.ts | 8 +++++++- .../services/form/Field/TextField/TextField.styles.tsx | 2 +- .../form/FormFieldFactory/Factory/ColorFactory.tsx | 10 ++++++---- 6 files changed, 16 insertions(+), 11 deletions(-) diff --git a/demo/src/router/AppRoutes.tsx b/demo/src/router/AppRoutes.tsx index 8613b72..0298c03 100644 --- a/demo/src/router/AppRoutes.tsx +++ b/demo/src/router/AppRoutes.tsx @@ -38,7 +38,7 @@ export default function AppRoutes(props: AppRoutesProps) { routeSpecs.map((route: RouteSpec) => { routes.push({ - path: baseUrl + "/" + route.path.substring(1), + path: `${baseUrl}/${route.path.substring(1)}`, element: ( diff --git a/library/src/components/List/Content/ListContent.styles.tsx b/library/src/components/List/Content/ListContent.styles.tsx index 375dd9f..c5b6e76 100644 --- a/library/src/components/List/Content/ListContent.styles.tsx +++ b/library/src/components/List/Content/ListContent.styles.tsx @@ -72,9 +72,7 @@ export const ListContentStyler = ({ theme }: { theme: Theme }) => { }; }; -export const StyledListContent = styled(ListContent)( - ListContentStyler as any -); +export const StyledListContent = styled(ListContent)(ListContentStyler as any); export const StyledActionButtonContainer = styled('div')(() => { return { diff --git a/library/src/components/Login/Login.styles.tsx b/library/src/components/Login/Login.styles.tsx index a444e81..442b452 100644 --- a/library/src/components/Login/Login.styles.tsx +++ b/library/src/components/Login/Login.styles.tsx @@ -3,7 +3,6 @@ import Login from './Login'; import { styled, Theme } from '@mui/material'; export const StyledLogin = styled(Login)(({ theme }: { theme: Theme }) => { - const baseUrl = process.env.BASE_URL || '/'; return { diff --git a/library/src/services/api/ParsedApiSpecInterface.ts b/library/src/services/api/ParsedApiSpecInterface.ts index b315992..ed32926 100644 --- a/library/src/services/api/ParsedApiSpecInterface.ts +++ b/library/src/services/api/ParsedApiSpecInterface.ts @@ -56,7 +56,13 @@ export interface visualToggle { } type PropertyType = 'array' | 'file' | 'boolean' | 'integer' | 'string'; -type PropertyFormat = 'date-time' | 'date' | 'time' | 'textarea' | 'password' | 'color'; +type PropertyFormat = + | 'date-time' + | 'date' + | 'time' + | 'textarea' + | 'password' + | 'color'; export interface ScalarProperty { type?: PropertyType; diff --git a/library/src/services/form/Field/TextField/TextField.styles.tsx b/library/src/services/form/Field/TextField/TextField.styles.tsx index 9897117..216d6ec 100644 --- a/library/src/services/form/Field/TextField/TextField.styles.tsx +++ b/library/src/services/form/Field/TextField/TextField.styles.tsx @@ -97,7 +97,7 @@ export const StyledColorField = styled(StyledTextField)(() => { padding: '0 2px', minHeight: '40px', borderRadius: '18px', - overflow: 'hidden' + overflow: 'hidden', }, }; }); diff --git a/library/src/services/form/FormFieldFactory/Factory/ColorFactory.tsx b/library/src/services/form/FormFieldFactory/Factory/ColorFactory.tsx index 261513d..b9efa32 100644 --- a/library/src/services/form/FormFieldFactory/Factory/ColorFactory.tsx +++ b/library/src/services/form/FormFieldFactory/Factory/ColorFactory.tsx @@ -1,4 +1,8 @@ -import { InputAdornment, InputBaseComponentProps, OutlinedInputProps } from '@mui/material'; +import { + InputAdornment, + InputBaseComponentProps, + OutlinedInputProps, +} from '@mui/material'; import { FormOnChangeEvent } from '../../../../entities/DefaultEntityBehavior/Form/Form'; import { ScalarProperty } from '../../../api'; import { ScalarEntityValue } from '../../../entity'; @@ -18,9 +22,7 @@ type ColorFactoryPropsType = { handleBlur: (event: React.FocusEvent) => void; }; -export const ColorFactory = ( - props: ColorFactoryPropsType -): JSX.Element => { +export const ColorFactory = (props: ColorFactoryPropsType): JSX.Element => { const { fld, property,