diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 5f4c6c4..a0c4f65 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -6,7 +6,9 @@ import i18n from './i18n'; import themeLight from './astrea-theme-light'; import themeDark from './astrea-theme-dark'; import { theme as nsTheme } from '../src/themes/NetServiceTheme'; -import { theme as blueChia } from '../src/themes/BlueChia'; +import { BlueChiaTheme as blueChia } from '../src/themes/BlueChiaTheme'; +import { GoldMinaTheme as goldMina } from '../src/themes/GoldMinaTheme'; +import { AstreaTheme as astrea } from '../src/themes/AstreaTheme'; import './styles.scss'; const isDark = typeof window !== `undefined` ? window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches : null; @@ -21,8 +23,10 @@ export const globalTypes = { icon: 'paintbrush', dynamicTitle: true, items: [ - { value: 'nsTheme', left: '๐ŸŒŠ', title: 'Green NS' }, - { value: 'blueChia', left: '๐Ÿƒ', title: 'Blue Chia' } + { value: 'nsTheme', left: '๐Ÿƒ', title: 'Green NS' }, + { value: 'blueChia', left: '๐ŸŒŠ', title: 'Blue Chia' }, + { value: 'goldMina', left: '๐ŸŒŸ', title: 'Gold Mina' }, + { value: 'astrea', left: '๐ŸŒš', title: 'Astrea' } ], }, }, @@ -45,6 +49,8 @@ export const globalTypes = { const THEMES = { nsTheme, blueChia, + goldMina, + astrea }; // Wrap stories in the I18nextProvider component @@ -100,11 +106,9 @@ const preview: Preview = { 'Welcome', 'Styles', 'Components', - 'Navigation', - 'Form', - 'Wrappers', - 'Docs', - 'Example', + 'Patterns', + 'Layouts', + 'Tools', ], locales: 'en-US', }, @@ -121,7 +125,11 @@ const preview: Preview = { lightClass: 'light-theme', stylePreview: true }, - showCode: true, + docs: { + canvas: { + sourceState: 'shown' + } + } }, globals: { locale: 'en', diff --git a/README.md b/README.md index a5b4a3e..c48ca0c 100644 --- a/README.md +++ b/README.md @@ -9,5 +9,5 @@ Install @netservice/astrea-react-ds using yarn, npm or pnpm: ``` -yarn add @netservice/astrea-react-ds +pnpm add @netservice/astrea-react-ds ``` diff --git a/package.json b/package.json index 1226d89..e550f17 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@netservice/astrea-react-ds", - "version": "1.8.1", + "version": "1.9.0", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", "license": "Apache-2.0", diff --git a/src/components/components/Dropdown/NsDropDown.tsx b/src/components/components/Dropdown/NsDropDown.tsx index 1d3a3fb..d1c7a53 100644 --- a/src/components/components/Dropdown/NsDropDown.tsx +++ b/src/components/components/Dropdown/NsDropDown.tsx @@ -8,7 +8,7 @@ import { } from '@mui/material'; import HomeIcon from '@mui/icons-material/Home'; import LogoutIcon from '@mui/icons-material/Logout'; -import { DynamicLinkProps, IDropDown } from 'src/util/types'; +import { DynamicLinkProps, IDropDown } from '../../../util/types'; /** * DynamicLink/ Dropdown Component diff --git a/src/components/components/DragDrop.tsx b/src/components/components/NsDragAndDrop.tsx similarity index 97% rename from src/components/components/DragDrop.tsx rename to src/components/components/NsDragAndDrop.tsx index f27e500..ed54264 100644 --- a/src/components/components/DragDrop.tsx +++ b/src/components/components/NsDragAndDrop.tsx @@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next'; import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; import FileUploadIcon from '@mui/icons-material/FileUpload'; import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'; -import { ValidatedSelect } from './form/fields/ValidatedSelect'; +import { NsSelect } from './form/fields/NsSelect'; import { required } from './form/validators'; -export interface DragDropProps { +export interface NsDragAndDropProps { value?: File[]; onChange?: (e: any[]) => void; loadText?: string; @@ -28,7 +28,7 @@ export interface DragDropProps { defaultValue?: any; } -export function DragDrop({ +export function NsDragAndDrop({ value, onChange, loadText, @@ -37,7 +37,7 @@ export function DragDrop({ validationFile, displayForm, onFileLoaded, -}: DragDropProps) { +}: NsDragAndDropProps) { const theme = useTheme(); const [images, setImages] = React.useState(value ?? []); const [showCarica, setShowCarica] = React.useState( @@ -254,7 +254,7 @@ export function DragDrop({ {attachmentTypes ? ( - ))} - + ) : ( <> )} diff --git a/src/components/components/Errors.tsx b/src/components/components/NsErrors.tsx similarity index 93% rename from src/components/components/Errors.tsx rename to src/components/components/NsErrors.tsx index 8b1c3e8..1bc58f3 100644 --- a/src/components/components/Errors.tsx +++ b/src/components/components/NsErrors.tsx @@ -2,7 +2,7 @@ import { useFormState } from 'relay-forms'; import React from 'react'; import { Alert, Box, Stack } from '@mui/material'; -export const Errors: React.FC = () => { +export const NsErrors: React.FC = () => { const { errors, isSubmitting, isValidating } = useFormState(); return ( <> diff --git a/src/components/components/FileUpload.tsx b/src/components/components/NsInputFile.tsx similarity index 72% rename from src/components/components/FileUpload.tsx rename to src/components/components/NsInputFile.tsx index c94646b..2b12b86 100644 --- a/src/components/components/FileUpload.tsx +++ b/src/components/components/NsInputFile.tsx @@ -3,21 +3,15 @@ import { Button, Input } from '@mui/material'; import { Box } from '@mui/system'; import { useTranslation } from 'react-i18next'; -/** - * File Upload Component - * @author vadim.chilinciuc - * - */ - -export interface FileUploadProps { +export interface NsInputFileProps { value?: File; onChange?: (e: any) => void; } -export function FileUpload({ onChange, value }: FileUploadProps) { +export function NsInputFile({ onChange, value }: NsInputFileProps) { const inputRef = useRef(null); const [selectedFile, setSelectedFile] = useState(value); - const {t} = useTranslation(); + const { t } = useTranslation(); const inputId = useId(); // Function to handle file selection @@ -58,9 +52,18 @@ export function FileUpload({ onChange, value }: FileUploadProps) { ref={inputRef} /> - {value?.name ? value.name : t('form.fileUpload.noFileSelected')} + + {value?.name ? value.name : t('form.fileUpload.noFileSelected')}{' '} + ); -} \ No newline at end of file +} diff --git a/src/components/components/LabelInput.tsx b/src/components/components/NsLabelInput.tsx similarity index 64% rename from src/components/components/LabelInput.tsx rename to src/components/components/NsLabelInput.tsx index 5d26cbf..03d2e82 100644 --- a/src/components/components/LabelInput.tsx +++ b/src/components/components/NsLabelInput.tsx @@ -1,25 +1,29 @@ import React from 'react'; -import { Box, FormLabel, Typography } from '@mui/material'; +import { Box, Typography } from '@mui/material'; import uniqueId from '../../util/uniqueId'; -export interface LabelProps { +export interface NsLabelProps { nameHtml?: string; label?: React.ReactNode; } -export const LabelInput: React.FC> = ({ +export const NsLabelInput: React.FC> = ({ nameHtml, label, children, }) => { const id = React.useMemo(() => nameHtml || uniqueId('u_label-'), [nameHtml]); - const isRequired = React.Children.toArray(children).some((child) => - React.isValidElement(child) && child.props.required + const isRequired = React.Children.toArray(children).some( + (child) => React.isValidElement(child) && child.props.required ); return ( - + {isRequired && *} {label} diff --git a/src/components/components/NsModal.tsx b/src/components/components/NsModal.tsx index bb1cd4c..1c6113f 100644 --- a/src/components/components/NsModal.tsx +++ b/src/components/components/NsModal.tsx @@ -4,190 +4,231 @@ import Drawer, { DrawerProps } from '@mui/material/Drawer'; import { Typography } from '@mui/material'; import { Box, styled } from '@mui/system'; import { NsButton } from './NsButton'; -import CloseIcon from '@mui/icons-material/Close'; import { useTranslation } from 'react-i18next'; export interface NsModalProps { - title: string; - content: string | React.ReactNode; - onConfirm?: () => void; - showCancelButton?: boolean; - showConfirmButton?: boolean; - fullScreen?: boolean; - useDrawer?: boolean; - drawerPosition?: 'left' | 'right' | 'top' | 'bottom'; - drawerProps?: Omit; - otherProps?: React.ComponentProps; - externalOpen?: boolean; - openFromParent?: boolean; - onOpen?: () => void; - onClose?: () => void; + title: string; + content: string | React.ReactNode; + onConfirm?: () => void; + showCancelButton?: boolean; + showConfirmButton?: boolean; + fullScreen?: boolean; + useDrawer?: boolean; + drawerPosition?: 'left' | 'right' | 'top' | 'bottom'; + drawerProps?: Omit; + otherProps?: React.ComponentProps; + externalOpen?: boolean; + openFromParent?: boolean; + onOpen?: () => void; + onClose?: () => void; } const boxStyle = { - position: 'absolute' as 'absolute', - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - width: 500, - bgcolor: 'background.paper', - boxShadow: 24, + position: 'absolute' as 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 500, + bgcolor: 'background.paper', + boxShadow: 24, }; const StyledModalContent = styled(Box)({ - padding: '1rem', + padding: '1rem', }); const StyledModalActions = styled(Box)({ - marginTop: '1rem', - display: 'flex', - justifyContent: 'space-between', - backgroundColor: '#ebefef', - padding: '10px', + marginTop: '1rem', + display: 'flex', + justifyContent: 'space-between', + backgroundColor: '#ebefef', + padding: '10px', +}); +const CloseLinkStyle = styled(Typography)(({ theme }) => ({ + position: 'absolute' as 'absolute', + top: '10px', + right: '14px', + cursor: 'pointer', + textDecoration: 'underline', + color: theme.palette.primary.main, +})); +const StyledModalTitle = styled(Typography)({ + fontSize: '1.8rem', }); -const closeLinkStyle = { - position: 'absolute' as 'absolute', - top: '10px', - right: '14px', - cursor: 'pointer', - textDecoration: 'underline', - fontSize: '1rem !important' -}; /* FULLSCREEN */ const fullScreenStyle = { - width: '100%', - height: '100%', - top: '0%', - left: '0%', - transform: 'none', - overflow: 'auto', - backgroundColor: 'white', + width: '100%', + height: '100%', + top: '0%', + left: '0%', + transform: 'none', + overflow: 'auto', + backgroundColor: 'white', }; const fullScreenHeaderStyle = { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - backgroundColor: 'black', - color: 'white', - padding: '1rem', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + backgroundColor: 'black', + color: 'white', + padding: '1rem', }; const fullScreenActionsStyle = { - display: 'flex', - gap: '1rem', + display: 'flex', + gap: '1rem', }; /* DRAWER */ const drawerStyle = { - width: '400px', - maxWidth: '100%', + width: '400px', + maxWidth: '100%', }; export const NsModal: React.FC = ({ - title, - content, - onConfirm, - showCancelButton, - showConfirmButton, - fullScreen, - useDrawer = false, - drawerPosition = 'right', - drawerProps, - otherProps, - externalOpen, - openFromParent = false, - onOpen = () => {}, - onClose = () => {} + title, + content, + onConfirm, + showCancelButton, + showConfirmButton, + fullScreen, + useDrawer = false, + drawerPosition = 'right', + drawerProps, + otherProps, + externalOpen, + openFromParent = false, + onOpen = () => {}, + onClose = () => {}, }) => { - const [internalOpen, setInternalOpen] = React.useState(false); + const [internalOpen, setInternalOpen] = React.useState(false); - const isOpen = openFromParent ? (externalOpen ?? false) : internalOpen; + const isOpen = openFromParent ? externalOpen ?? false : internalOpen; - const handleOpen = () => { - if (!openFromParent) { - setInternalOpen(true); - } - onOpen(); - }; + const handleOpen = () => { + if (!openFromParent) { + setInternalOpen(true); + } + onOpen(); + }; - const handleClose = () => { - if (!openFromParent) { - setInternalOpen(false); - } - onClose(); - }; + const handleClose = () => { + if (!openFromParent) { + setInternalOpen(false); + } + onClose(); + }; - const handleConfirm = () => { - onConfirm?.(); - handleClose(); - }; + const handleConfirm = () => { + onConfirm?.(); + handleClose(); + }; - const {t} = useTranslation(); - const renderContent = () => ( + const { t } = useTranslation(); + const renderContent = () => ( + <> + {fullScreen ? ( <> - {fullScreen ? ( - <> - - {title} - {(showCancelButton || showConfirmButton) && ( - - {showCancelButton && {t('modal.buttons.cancel')}} - {showConfirmButton && {t('modal.buttons.confirm')}} - - )} - - - {content} - - - ) : ( - <> - {t('modal.close')} - - {title} - {content} - - - )} - - {!fullScreen && (showCancelButton || showConfirmButton) && ( - - {showCancelButton && {t('modal.buttons.cancel')}} - {showConfirmButton && {t('modal.buttons.confirm')}} - + + + {title} + + {(showCancelButton || showConfirmButton) && ( + + {showCancelButton && ( + + {t('modal.buttons.cancel')} + + )} + {showConfirmButton && ( + + {t('modal.buttons.confirm')} + + )} + )} + + + + {content} + + - ); + ) : ( + <> + + {t('modal.close')} + + + + {title} + + + {content} + + + + )} - if (useDrawer) { - return ( -
- {!openFromParent && (Open)} - - - {renderContent()} - - -
- ); - } + {!fullScreen && (showCancelButton || showConfirmButton) && ( + + {showCancelButton && ( + + {t('modal.buttons.cancel')} + + )} + {showConfirmButton && ( + + {t('modal.buttons.confirm')} + + )} + + )} + + ); + if (useDrawer) { return ( -
- {!openFromParent && (Open modal)} - - {renderContent()} - -
+
+ {!openFromParent && Open} + + {renderContent()} + +
); -} \ No newline at end of file + } + + return ( +
+ {!openFromParent && Open modal} + + + {renderContent()} + + +
+ ); +}; diff --git a/src/components/components/PageHeader/NsPageHeader.tsx b/src/components/components/PageHeader/NsPageHeader.tsx index 8746c8b..fcab48c 100644 --- a/src/components/components/PageHeader/NsPageHeader.tsx +++ b/src/components/components/PageHeader/NsPageHeader.tsx @@ -112,7 +112,7 @@ export interface PageHeaderProps { export const NsPageHeader = ({ pageData, configuration }: PageHeaderProps) => { return ( - +