diff --git a/packages/calendars/CHANGELOG.md b/packages/calendars/CHANGELOG.md index dbcd69591..63163cf05 100644 --- a/packages/calendars/CHANGELOG.md +++ b/packages/calendars/CHANGELOG.md @@ -1,5 +1,95 @@ # @bubbles-ui/calendars +## 1.2.135 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.135 + - @bubbles-ui/icons@1.2.135 + +## 1.2.134 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.134 + - @bubbles-ui/icons@1.2.134 + +## 1.2.133 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.133 + - @bubbles-ui/icons@1.2.133 + +## 1.2.132 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.132 + - @bubbles-ui/icons@1.2.132 + +## 1.2.131 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.131 + - @bubbles-ui/icons@1.2.131 + +## 1.2.130 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.130 + - @bubbles-ui/icons@1.2.130 + +## 1.2.129 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.129 + - @bubbles-ui/icons@1.2.129 + +## 1.2.128 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.128 + - @bubbles-ui/icons@1.2.128 + +## 1.2.127 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.127 + - @bubbles-ui/icons@1.2.127 + +## 1.2.126 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.126 + - @bubbles-ui/icons@1.2.126 + ## 1.2.125 ### Patch Changes diff --git a/packages/calendars/package.json b/packages/calendars/package.json index 4c1a83505..5419d4c98 100644 --- a/packages/calendars/package.json +++ b/packages/calendars/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/calendars", - "version": "1.2.125", + "version": "1.2.135", "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.", "main": "lib/index.js", "module": "es/index.js", @@ -59,8 +59,8 @@ "rrule": "^2.6.8" }, "peerDependencies": { - "@bubbles-ui/components": "^1.2.125", - "@bubbles-ui/icons": "^1.2.125", + "@bubbles-ui/components": "^1.2.135", + "@bubbles-ui/icons": "^1.2.135", "react": "^17.0.1", "react-dom": "^17.0.1", "webpack": "*" diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 694128397..3f74ef5e4 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,85 @@ # @bubbles-ui/components +## 1.2.135 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/icons@1.2.135 + +## 1.2.134 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/icons@1.2.134 + +## 1.2.133 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/icons@1.2.133 + +## 1.2.132 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/icons@1.2.132 + +## 1.2.131 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/icons@1.2.131 + +## 1.2.130 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/icons@1.2.130 + +## 1.2.129 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/icons@1.2.129 + +## 1.2.128 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/icons@1.2.128 + +## 1.2.127 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/icons@1.2.127 + +## 1.2.126 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/icons@1.2.126 + ## 1.2.125 ### Patch Changes diff --git a/packages/components/package.json b/packages/components/package.json index 3ab291e68..2c8309b68 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/components", - "version": "1.2.125", + "version": "1.2.135", "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.", "main": "lib/index.js", "module": "es/index.js", @@ -61,7 +61,7 @@ "chromatic": "npx chromatic --project-token=7b10302a7b6b --build-script-name=build:storybook:raw" }, "dependencies": { - "@bubbles-ui/icons": "^1.2.125", + "@bubbles-ui/icons": "^1.2.135", "@emotion/react": "^11.10.0", "@heroicons/react": "^1.0.5", "@hookform/resolvers": "^3.3.2", diff --git a/packages/components/src/form/FileUpload/FileUpload.js b/packages/components/src/form/FileUpload/FileUpload.js index edac4713b..0ad5f96e4 100644 --- a/packages/components/src/form/FileUpload/FileUpload.js +++ b/packages/components/src/form/FileUpload/FileUpload.js @@ -1,14 +1,10 @@ -import React, { useEffect, useMemo, useRef } from 'react'; +import React, { useMemo, useRef } from 'react'; import PropTypes from 'prop-types'; import { Group, Text } from '@mantine/core'; import { Dropzone as MantineDropzone } from '@mantine/dropzone'; -import { - DeleteBinIcon, - SynchronizeArrowIcon, - RemoveCircleIcon, - CheckCircleIcon, -} from '@bubbles-ui/icons/outline/'; -import { isEmpty, isFunction, isString } from 'lodash'; +import { SynchronizeArrowIcon, RemoveCircleIcon, CheckCircleIcon } from '@bubbles-ui/icons/outline'; +import { DeleteBinIcon } from '@bubbles-ui/icons/solid'; +import { isEmpty, isFunction } from 'lodash'; import { FileUploadStyles } from './FileUpload.styles'; import { Stack, Box } from '../../layout'; import { FileItemDisplay } from '../../informative/FileItemDisplay'; @@ -17,6 +13,16 @@ import { InputWrapper, INPUT_WRAPPER_PROP_TYPES } from '../InputWrapper'; import { Button } from '../Button'; import { Loader } from '../../../lib/feedback/Loader/Loader'; +function getRemoveButtonLabel(label) { + // return label or "Remove" in brower language + return label || navigator.language === 'es' ? 'Borrar' : 'Remove'; +} + +function getUploadButtonLabel(label) { + // return label or "Upload" in brower language + return label || navigator.language === 'es' ? 'Subir' : 'Upload'; +} + export const FILE_UPLOAD_DEFAULT_PROPS = { disabled: false, loading: false, @@ -27,6 +33,8 @@ export const FILE_UPLOAD_DEFAULT_PROPS = { initialFiles: [], inputWrapperProps: {}, useAria: true, + fullWidth: false, + labels: {}, }; export const FILE_UPLOAD_PROP_TYPES = { @@ -42,12 +50,17 @@ export const FILE_UPLOAD_PROP_TYPES = { title: PropTypes.string, message: PropTypes.string, }), + labels: PropTypes.shape({ + removeButton: PropTypes.string, + uploadButton: PropTypes.string, + }), hideUploadButton: PropTypes.bool, single: PropTypes.bool, inputWrapperProps: PropTypes.shape(INPUT_WRAPPER_PROP_TYPES), initialFiles: PropTypes.arrayOf(PropTypes.object), accept: PropTypes.arrayOf(PropTypes.string), useAria: PropTypes.bool, + fullWidth: PropTypes.bool, }; const FileUpload = ({ @@ -66,6 +79,8 @@ const FileUpload = ({ initialFiles, accept, useAria, + labels, + fullWidth, ...props }) => { const openRef = useRef(); @@ -101,7 +116,7 @@ const FileUpload = ({ }, [initialFiles]); const { classes, theme } = FileUploadStyles( - { disabled, single, files, hasError }, + { disabled, single, files, hasError, fullWidth }, { name: 'FileUpload' }, ); @@ -123,6 +138,7 @@ const FileUpload = ({ {...props} accept={accept} loading={loading} + disabled={disabled || loading} multiple={multipleUpload} onDrop={onDropHandler} classNames={classes} @@ -159,7 +175,12 @@ const FileUpload = ({ {files.length > 0 && ( {files.map((file, index) => ( - + )} - - - + {!disabled && ( + + + + )} ))} )} {!hideUploadButton && ( - + )} diff --git a/packages/components/src/form/FileUpload/FileUpload.styles.js b/packages/components/src/form/FileUpload/FileUpload.styles.js index e753c7850..b8de80fef 100644 --- a/packages/components/src/form/FileUpload/FileUpload.styles.js +++ b/packages/components/src/form/FileUpload/FileUpload.styles.js @@ -29,7 +29,7 @@ const getDisabledStyles = (disabled, theme) => { }; }; -const FileUploadStyles = createStyles((theme, { disabled, single, files, hasError }) => { +const FileUploadStyles = createStyles((theme, { disabled, single, files, hasError, fullWidth }) => { const hideDropzone = single && files.length > 0; const dropzoneTheme = theme.other.dropzone; @@ -72,13 +72,12 @@ const FileUploadStyles = createStyles((theme, { disabled, single, files, hasErro color: dropzoneTheme.content.color['default--subtle'], }, droppedFile: { - minWidth: 500, + // minWidth: 500, // padding: `${pxToRem(28)} ${pxToRem(16)} ${pxToRem(28)} ${pxToRem(28)}`, }, fileList: { marginTop: !hideDropzone && pxToRem(theme.spacing[4]), - // border: `1px solid ${theme.colors.interactive01h}`, - // borderRadius: pxToRem(2), + width: 'min-content', }, errorAlert: { marginTop: pxToRem(theme.spacing[4]), diff --git a/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js b/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js index 6418c0a22..e89671d9f 100644 --- a/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js +++ b/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js @@ -115,6 +115,7 @@ const ImagePreviewInput = ({ style={{ ...previewStyle }} useAria={useAria} bordered + forceImage /> {!readonly && !disabled ? ( diff --git a/packages/components/src/form/RadioGroup/RadioGroup.js b/packages/components/src/form/RadioGroup/RadioGroup.js index f30efb5dd..149695c53 100644 --- a/packages/components/src/form/RadioGroup/RadioGroup.js +++ b/packages/components/src/form/RadioGroup/RadioGroup.js @@ -1,6 +1,6 @@ import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react'; import PropTypes from 'prop-types'; -import { isEmpty, map } from 'lodash'; +import { isEmpty, map, noop } from 'lodash'; import { Box, SegmentedControl as MantineSegmentedControl } from '@mantine/core'; import { useId } from '@mantine/hooks'; import { RadioGroupStyles } from './RadioGroup.styles'; @@ -11,7 +11,6 @@ import { INPUT_WRAPPER_SIZES, InputWrapper, } from '../InputWrapper'; -import { isFunction } from 'lodash'; export const RADIOGROUP_DIRECTIONS = ['column', 'row']; @@ -66,9 +65,10 @@ const RadioGroup = forwardRef( imageHeight, fullWidth, useAria, + onChange = noop, ...props }, - ref + ref, ) => { const [value, setValue] = useState(props.value); const [activePosition, setActivePosition] = useState({ height: 0, translate: 0 }); @@ -83,7 +83,7 @@ const RadioGroup = forwardRef( const { classes, cx } = RadioGroupStyles( { variant, value, direction, fullWidth, activePosition, hasError, rounded }, - { name: 'RadioGroup' } + { name: 'RadioGroup' }, ); if (!direction) { @@ -97,11 +97,11 @@ const RadioGroup = forwardRef( direction = 'row'; } - const onChange = (value) => { - const item = data.find((item) => item.value === value); - if (!props.disabled && !item.disabled) { - isFunction(props.onChange) && props.onChange(value); - setValue(value); + const handleOnChange = (val) => { + const option = data.find((item) => item.value === val); + if (!props.disabled && !option.disabled) { + onChange(val); + setValue(val); } }; @@ -141,11 +141,11 @@ const RadioGroup = forwardRef( ref={ref} id={uuid} size={size} - onChange={onChange} + onChange={handleOnChange} classNames={classes} - defaultValue={defaultValue ? defaultValue : ' '} + defaultValue={defaultValue || ' '} value={value} - data={map(data, ({ label, ...item }, index) => ({ + data={map(data, ({ label: itemLabel, ...item }, index) => ({ value: item.value, label: ( - {label} + {itemLabel} ), }))} @@ -171,9 +171,10 @@ const RadioGroup = forwardRef( ); - } + }, ); +RadioGroup.displayName = 'RadioGroup'; RadioGroup.propTypes = RADIOGROUP_PROP_TYPES; RadioGroup.defaultProps = RADIOGROUP_DEFAULT_PROPS; diff --git a/packages/components/src/form/RadioGroup/RadioGroup.styles.js b/packages/components/src/form/RadioGroup/RadioGroup.styles.js index d8a6e13cd..d882cc5b7 100644 --- a/packages/components/src/form/RadioGroup/RadioGroup.styles.js +++ b/packages/components/src/form/RadioGroup/RadioGroup.styles.js @@ -1,14 +1,16 @@ import { createStyles } from '@mantine/styles'; -import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../theme.mixins'; +import { pxToRem, getFontExpressive } from '../../theme.mixins'; -export const RadioGroupStyles = createStyles( +const RadioGroupStyles = createStyles( (theme, { variant, value, direction, fullWidth, activePosition, hasError, rounded }) => { const isColumn = direction === 'column'; - const isDefault = variant == 'default' || variant === 'image'; - const isIcon = variant == 'icon'; + const isDefault = variant === 'default' || variant === 'image'; + const isIcon = variant === 'icon'; const isBoxed = variant === 'boxed'; const isImage = variant === 'image'; + console.log('theme:', theme.other); + return { root: { padding: 0, @@ -35,7 +37,9 @@ export const RadioGroupStyles = createStyles( display: !value || isDefault ? 'none' : null, boxShadow: value && !isDefault - ? `inset 0 0 0 1px ${isIcon ? theme.colors.interactive01d : theme.colors.ui01}` + ? `inset 0 0 0 1px ${ + isIcon ? theme.other.button.border.color.secondary.default : theme.colors.ui01 + }` : null, borderRadius: rounded && !isImage ? 4 : 0, top: 4, @@ -53,5 +57,7 @@ export const RadioGroupStyles = createStyles( }, }, }; - } + }, ); + +export { RadioGroupStyles }; diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js b/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js index 1da08d6a2..3c9e190b3 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js +++ b/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js @@ -13,6 +13,7 @@ const TotalLayoutFooterContainer = ({ children, fullWidth, showFooterBorder: _showFooterBorder, + style, }) => { const [showFooterBorder, setShowFooterBorder] = React.useState(false); const { classes } = TotalLayoutFooterContainerStyles( @@ -51,7 +52,7 @@ const TotalLayoutFooterContainer = ({ return ( - + {leftZone} @@ -75,6 +76,8 @@ TotalLayoutFooterContainer.propTypes = { children: PropTypes.node, fixed: PropTypes.bool, fullWidth: PropTypes.bool, + showFooterBorder: PropTypes.bool, + style: PropTypes.object, }; export { TotalLayoutFooterContainer }; diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js index d19280814..304c04366 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js +++ b/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js @@ -4,7 +4,7 @@ const TotalLayoutFooterContainerStyles = createStyles( (theme, { showFooterBorder, leftOffset, fullWidth, fixed }) => ({ root: {}, footer: { - width: fullWidth ? '100%' : 928, + width: fullWidth ? 'calc(100% - 100px)' : 928, marginLeft: leftOffset, backgroundColor: 'white', borderTop: showFooterBorder && `1px solid ${theme.other.divider.background.color.default}`, diff --git a/packages/components/src/layout/VerticalContainer/VerticalContainer.js b/packages/components/src/layout/VerticalContainer/VerticalContainer.js index f7c920175..dc1480532 100644 --- a/packages/components/src/layout/VerticalContainer/VerticalContainer.js +++ b/packages/components/src/layout/VerticalContainer/VerticalContainer.js @@ -8,7 +8,7 @@ import { } from './VerticalContainer.constants'; const VerticalContainer = forwardRef(({ children, scrollRef, leftZone, ...props }, ref) => { - const { classes } = VerticalContainerStyles({ name: 'VerticalStepperContainer' }); + const { classes } = VerticalContainerStyles({ name: 'VerticalContainer' }); return ( diff --git a/packages/components/src/layout/VerticalContainer/VerticalContainer.mdx b/packages/components/src/layout/VerticalContainer/VerticalContainer.mdx index 57762f3f2..5b8bbae4f 100644 --- a/packages/components/src/layout/VerticalContainer/VerticalContainer.mdx +++ b/packages/components/src/layout/VerticalContainer/VerticalContainer.mdx @@ -4,7 +4,7 @@ import { ThemeProvider } from './../../ThemeProvider'; import { Box, ContextContainer } from '../../layout'; import { Paragraph } from '../../typography'; -# VerticalStepperContainer +# VerticalContainer [Source code](https://github.com/leemonade/bubbles/tree/main/packages/components/src/layout/VerticalStepperContainer/VerticalStepperContainer.js) @@ -23,7 +23,7 @@ import { Paragraph } from '../../typography'; ## Overview -VerticalStepperContainer is component to render a VerticalStepper including the steps. +VerticalContainer is component to render a VerticalStepper including the steps. { - const [open, setOpen] = useState(false); +const ModalZoom = ({ children, canPlay, opened, hideButton, onClose = noop, style }) => { + const [open, setOpen] = useState(opened); const center = useRef(null); const { classes } = ModalZoomStyles({}, { name: 'ModalZoom' }); + React.useEffect(() => { + if(opened !== open) { + setOpen(opened); + center.current?.call(); + } + }, [opened]) + return ( <> - { - if (!canPlay) return; - if (center.current) { - center.current.call(); - } - setOpen(true); - }} - > - {children} - + {!hideButton && ( + { + if (!canPlay) return; + if (center.current) { + center.current.call(); + } + setOpen(true); + }} + > + {children} + + )} + {open && ( @@ -33,6 +44,7 @@ const ModalZoom = ({ children, canPlay, style }) => { className={classes.close} onClick={() => { setOpen(false); + onClose(); }} > diff --git a/packages/editors/CHANGELOG.md b/packages/editors/CHANGELOG.md index b2438a1fa..77fb36221 100644 --- a/packages/editors/CHANGELOG.md +++ b/packages/editors/CHANGELOG.md @@ -1,5 +1,95 @@ # @bubbles-ui/editors +## 1.2.135 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.135 + - @bubbles-ui/icons@1.2.135 + +## 1.2.134 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.134 + - @bubbles-ui/icons@1.2.134 + +## 1.2.133 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.133 + - @bubbles-ui/icons@1.2.133 + +## 1.2.132 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.132 + - @bubbles-ui/icons@1.2.132 + +## 1.2.131 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.131 + - @bubbles-ui/icons@1.2.131 + +## 1.2.130 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.130 + - @bubbles-ui/icons@1.2.130 + +## 1.2.129 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.129 + - @bubbles-ui/icons@1.2.129 + +## 1.2.128 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.128 + - @bubbles-ui/icons@1.2.128 + +## 1.2.127 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.127 + - @bubbles-ui/icons@1.2.127 + +## 1.2.126 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.126 + - @bubbles-ui/icons@1.2.126 + ## 1.2.125 ### Patch Changes diff --git a/packages/editors/package.json b/packages/editors/package.json index 928fbf317..17b00a287 100644 --- a/packages/editors/package.json +++ b/packages/editors/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/editors", - "version": "1.2.125", + "version": "1.2.135", "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.", "main": "lib/index.js", "module": "es/index.js", @@ -79,8 +79,8 @@ "styled-icons": "^10.45.0" }, "peerDependencies": { - "@bubbles-ui/components": "^1.2.125", - "@bubbles-ui/icons": "^1.2.125", + "@bubbles-ui/components": "^1.2.135", + "@bubbles-ui/icons": "^1.2.135", "react": "^17.0.1", "react-dom": "^17.0.1", "webpack": "*" diff --git a/packages/extras/CHANGELOG.md b/packages/extras/CHANGELOG.md index c53f5d769..4c7765baa 100644 --- a/packages/extras/CHANGELOG.md +++ b/packages/extras/CHANGELOG.md @@ -1,5 +1,95 @@ # @bubbles-ui/extras +## 1.2.135 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.135 + - @bubbles-ui/icons@1.2.135 + +## 1.2.134 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.134 + - @bubbles-ui/icons@1.2.134 + +## 1.2.133 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.133 + - @bubbles-ui/icons@1.2.133 + +## 1.2.132 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.132 + - @bubbles-ui/icons@1.2.132 + +## 1.2.131 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.131 + - @bubbles-ui/icons@1.2.131 + +## 1.2.130 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.130 + - @bubbles-ui/icons@1.2.130 + +## 1.2.129 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.129 + - @bubbles-ui/icons@1.2.129 + +## 1.2.128 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.128 + - @bubbles-ui/icons@1.2.128 + +## 1.2.127 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.127 + - @bubbles-ui/icons@1.2.127 + +## 1.2.126 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.126 + - @bubbles-ui/icons@1.2.126 + ## 1.2.125 ### Patch Changes diff --git a/packages/extras/package.json b/packages/extras/package.json index a60e902f1..45152cb69 100644 --- a/packages/extras/package.json +++ b/packages/extras/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/extras", - "version": "1.2.125", + "version": "1.2.135", "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.", "main": "lib/index.js", "module": "es/index.js", @@ -53,8 +53,8 @@ "swiper": "^8.1.4" }, "peerDependencies": { - "@bubbles-ui/components": "^1.2.125", - "@bubbles-ui/icons": "^1.2.125", + "@bubbles-ui/components": "^1.2.135", + "@bubbles-ui/icons": "^1.2.135", "@mantine/core": "5.2.4", "@mantine/hooks": "5.2.4", "react": "^17.0.1", diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 203bcf859..65f7afd8e 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,65 @@ # @bubbles-ui/icons +## 1.2.135 + +### Patch Changes + +- Versions bump + +## 1.2.134 + +### Patch Changes + +- Versions bump + +## 1.2.133 + +### Patch Changes + +- Versions bump + +## 1.2.132 + +### Patch Changes + +- Versions bump + +## 1.2.131 + +### Patch Changes + +- Versions bump + +## 1.2.130 + +### Patch Changes + +- Versions bump + +## 1.2.129 + +### Patch Changes + +- Versions bump + +## 1.2.128 + +### Patch Changes + +- Versions bump + +## 1.2.127 + +### Patch Changes + +- Versions bump + +## 1.2.126 + +### Patch Changes + +- Versions bump + ## 1.2.125 ### Patch Changes diff --git a/packages/icons/optimized/solid/computer-keyboard-next.svg b/packages/icons/optimized/solid/computer-keyboard-next.svg index be82aee85..de3698abc 100644 --- a/packages/icons/optimized/solid/computer-keyboard-next.svg +++ b/packages/icons/optimized/solid/computer-keyboard-next.svg @@ -1,3 +1,3 @@ - - - - ); -} diff --git a/packages/leemons/src/common/AssetPlayer/components/Aframe/load.js b/packages/leemons/src/common/AssetPlayer/components/Aframe/load.js deleted file mode 100644 index 2c920a44d..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/Aframe/load.js +++ /dev/null @@ -1,47 +0,0 @@ -import { loadARHitTest } from './loadARHitTest'; -import { loadARShadows } from './loadARShadows'; -import { loadBackgroundGradient } from './loadBackgroundGradient'; -import { loadHideOnEnterAR } from './loadHideOnEnterAR'; -import { loadModelViewer } from './loadModelViewer'; - -function existHeaderScript(url) { - const scripts = document.getElementsByTagName('script'); - for (let i = 0, l = scripts.length; i < l; i++) { - if (scripts[i].src === url) return true; - } -} - -export function addHeaderScript(url) { - if (!existHeaderScript(url)) { - const jsCode = document.createElement('script'); - jsCode.setAttribute('src', url); - document.body.appendChild(jsCode); - } -} - -function logic(resolve) { - if (window.AFRAME) { - addHeaderScript('https://unpkg.com/aframe-extras@3.3.0/dist/aframe-extras.min.js'); - - if (!window.AFRAME.components['checkpoint-controls']) { - setTimeout(() => loadAframe(resolve), 100); - } else { - loadARShadows(); - loadBackgroundGradient(); - loadARHitTest(); - loadHideOnEnterAR(); - loadModelViewer(); - resolve(); - } - } else { - addHeaderScript('https://aframe.io/releases/1.2.0/aframe.min.js'); - setTimeout(() => loadAframe(resolve), 100); - } -} - -export async function loadAframe(resolve) { - if (!!resolve) logic(resolve); - return new Promise((resolve) => { - logic(resolve); - }); -} diff --git a/packages/leemons/src/common/AssetPlayer/components/Aframe/loadARHitTest.js b/packages/leemons/src/common/AssetPlayer/components/Aframe/loadARHitTest.js deleted file mode 100644 index 02a3b8ad7..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/Aframe/loadARHitTest.js +++ /dev/null @@ -1,100 +0,0 @@ -export function loadARHitTest() { - if (!window.AFRAME.components['ar-hit-test']) { - window.AFRAME.registerComponent('ar-hit-test', { - schema: { targetEl: { type: 'selector' } }, - - init: function () { - var self = this; - var targetEl = this.data.targetEl; - this.xrHitTestSource = null; - this.viewerSpace = null; - this.refSpace = null; - - this.el.sceneEl.renderer.xr.addEventListener(function () { - self.viewerSpace = null; - self.refSpace = null; - self.xrHitTestSource = null; - }); - - this.el.sceneEl.addEventListener('enter-vr', function () { - var el = self.el; - var targetEl = self.data.targetEl; - var session; - - if (!self.el.sceneEl.is('ar-mode')) { - return; - } - - session = self.el.sceneEl.renderer.xr.getSession(); - - self.originalPosition = targetEl.object3D.position.clone(); - self.el.object3D.visible = true; - - session.addEventListener('select', function () { - var position = el.getAttribute('position'); - targetEl.setAttribute('position', position); - document.getElementById('light').setAttribute('position', { - x: position.x - 2, - y: position.y + 4, - z: position.z + 2, - }); - }); - - session.requestReferenceSpace('viewer').then(function (space) { - self.viewerSpace = space; - session - .requestHitTestSource({ space: self.viewerSpace }) - .then(function (hitTestSource) { - self.xrHitTestSource = hitTestSource; - }); - }); - - session.requestReferenceSpace('local-floor').then(function (space) { - self.refSpace = space; - }); - }); - - this.el.sceneEl.addEventListener('exit-vr', function () { - if (self.originalPosition) { - targetEl.object3D.position.copy(self.originalPosition); - } - self.el.object3D.visible = false; - }); - }, - - tick: function () { - var frame; - var xrViewerPose; - var hitTestResults; - var pose; - var inputMat; - var position; - - if (this.el.sceneEl.is('ar-mode')) { - if (!this.viewerSpace) { - return; - } - frame = this.el.sceneEl.frame; - if (!frame) { - return; - } - xrViewerPose = frame.getViewerPose(this.refSpace); - - if (this.xrHitTestSource && xrViewerPose) { - hitTestResults = frame.getHitTestResults(this.xrHitTestSource); - if (hitTestResults.length > 0) { - pose = hitTestResults[0].getPose(this.refSpace); - - inputMat = new THREE.Matrix4(); - inputMat.fromArray(pose.transform.matrix); - - position = new THREE.Vector3(); - position.setFromMatrixPosition(inputMat); - this.el.setAttribute('position', position); - } - } - } - }, - }); - } -} diff --git a/packages/leemons/src/common/AssetPlayer/components/Aframe/loadARShadows.js b/packages/leemons/src/common/AssetPlayer/components/Aframe/loadARShadows.js deleted file mode 100644 index 84478447e..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/Aframe/loadARShadows.js +++ /dev/null @@ -1,31 +0,0 @@ -export function loadARShadows() { - if (!window.AFRAME.components['ar-shadows']) { - window.AFRAME.registerComponent('ar-shadows', { - // Swap an object's material to a transparent shadows-only material while - // in AR mode. Intended for use with a ground plane. The object is also - // set visible while in AR mode, this is useful if it's hidden in other - // modes due to them using a 3D environment. - schema: { - opacity: { default: 0.3 }, - }, - init: function () { - this.el.sceneEl.addEventListener('enter-vr', (ev) => { - this.wasVisible = this.el.getAttribute('visible'); - if (this.el.sceneEl.is('ar-mode')) { - this.savedMaterial = this.el.object3D.children[0].material; - this.el.object3D.children[0].material = new THREE.ShadowMaterial(); - this.el.object3D.children[0].material.opacity = this.data.opacity; - this.el.setAttribute('visible', true); - } - }); - this.el.sceneEl.addEventListener('exit-vr', (ev) => { - if (this.savedMaterial) { - this.el.object3D.children[0].material = this.savedMaterial; - this.savedMaterial = null; - } - if (!this.wasVisible) this.el.setAttribute('visible', false); - }); - }, - }); - } -} diff --git a/packages/leemons/src/common/AssetPlayer/components/Aframe/loadBackgroundGradient.js b/packages/leemons/src/common/AssetPlayer/components/Aframe/loadBackgroundGradient.js deleted file mode 100644 index 2fbd1683a..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/Aframe/loadBackgroundGradient.js +++ /dev/null @@ -1,42 +0,0 @@ -export function loadBackgroundGradient() { - if (!window.AFRAME.shaders['background-gradient']) { - window.AFRAME.registerShader('background-gradient', { - schema: { - colorTop: { type: 'color', default: '#37383c', is: 'uniform' }, - colorBottom: { type: 'color', default: '#757575', is: 'uniform' }, - }, - - vertexShader: [ - 'varying vec3 vWorldPosition;', - - 'void main() {', - - 'vec4 worldPosition = modelMatrix * vec4( position, 1.0 );', - 'vWorldPosition = worldPosition.xyz;', - - 'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', - - '}', - ].join('\n'), - - fragmentShader: [ - 'uniform vec3 colorTop;', - 'uniform vec3 colorBottom;', - - 'varying vec3 vWorldPosition;', - - 'void main()', - - '{', - 'vec3 pointOnSphere = normalize(vWorldPosition.xyz);', - 'float f = 1.0;', - - 'f = sin(pointOnSphere.y * 2.2) + 0.4;', - - 'gl_FragColor = vec4(mix(colorBottom, colorTop, f), 1.0);', - - '}', - ].join('\n'), - }); - } -} diff --git a/packages/leemons/src/common/AssetPlayer/components/Aframe/loadHideOnEnterAR.js b/packages/leemons/src/common/AssetPlayer/components/Aframe/loadHideOnEnterAR.js deleted file mode 100644 index 7bd813bd1..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/Aframe/loadHideOnEnterAR.js +++ /dev/null @@ -1,17 +0,0 @@ -export function loadHideOnEnterAR() { - if (!window.AFRAME.components['hide-on-enter-ar']) { - window.AFRAME.registerComponent('hide-on-enter-ar', { - init: function () { - var self = this; - this.el.sceneEl.addEventListener('enter-vr', function () { - if (self.el.sceneEl.is('ar-mode')) { - self.el.object3D.visible = false; - } - }); - this.el.sceneEl.addEventListener('exit-vr', function () { - self.el.object3D.visible = true; - }); - }, - }); - } -} diff --git a/packages/leemons/src/common/AssetPlayer/components/Aframe/loadModelViewer.js b/packages/leemons/src/common/AssetPlayer/components/Aframe/loadModelViewer.js deleted file mode 100644 index 352c06302..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/Aframe/loadModelViewer.js +++ /dev/null @@ -1,533 +0,0 @@ -export function loadModelViewer() { - if (!window.AFRAME.components['model-viewer']) { - AFRAME.registerComponent('model-viewer', { - schema: { - gltfModel: { default: '' }, - title: { default: '' }, - compact: { default: false }, - uploadUIEnabled: { default: true }, - bgFromColor: { default: '#37383c' }, - bgToColor: { default: '#757575' }, - }, - init: function () { - let el = this.el; - - el.setAttribute('renderer', { colorManagement: true }); - el.setAttribute('cursor', { rayOrigin: 'mouse', fuse: false }); - el.setAttribute('webxr', { optionalFeatures: 'hit-test, local-floor' }); - el.setAttribute('raycaster', { objects: '.raycastable' }); - - this.onModelLoaded = this.onModelLoaded.bind(this); - - this.onMouseUp = this.onMouseUp.bind(this); - this.onMouseMove = this.onMouseMove.bind(this); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseWheel = this.onMouseWheel.bind(this); - - this.onTouchMove = this.onTouchMove.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - - this.submitURLButtonClicked = this.submitURLButtonClicked.bind(this); - - this.onThumbstickMoved = this.onThumbstickMoved.bind(this); - - this.onVR = false; - this.onEnterVR = this.onEnterVR.bind(this); - this.onExitVR = this.onExitVR.bind(this); - - this.onMouseDownLaserHitPanel = this.onMouseDownLaserHitPanel.bind(this); - this.onMouseUpLaserHitPanel = this.onMouseUpLaserHitPanel.bind(this); - - this.onOrientationChange = this.onOrientationChange.bind(this); - - this.initCameraRig(); - this.initEntities(); - this.initBackground(); - - // Disable context menu on canvas when pressing mouse right button; - this.el.sceneEl.canvas.oncontextmenu = function (evt) { - evt.preventDefault(); - }; - - window.addEventListener('orientationchange', this.onOrientationChange); - - // VR controls. - this.laserHitPanelEl.addEventListener('mousedown', this.onMouseDownLaserHitPanel); - this.laserHitPanelEl.addEventListener('mouseup', this.onMouseUpLaserHitPanel); - - this.leftHandEl.addEventListener('thumbstickmoved', this.onThumbstickMoved); - this.rightHandEl.addEventListener('thumbstickmoved', this.onThumbstickMoved); - - // Mouse 2D controls. - document.addEventListener('mouseup', this.onMouseUp); - document.addEventListener('mousemove', this.onMouseMove); - document.addEventListener('mousedown', this.onMouseDown); - document.addEventListener('wheel', this.onMouseWheel); - - // Mobile 2D controls. - document.addEventListener('touchend', this.onTouchEnd); - document.addEventListener('touchmove', this.onTouchMove); - - this.el.sceneEl.addEventListener('enter-vr', this.onEnterVR); - this.el.sceneEl.addEventListener('exit-vr', this.onExitVR); - - this.modelEl.addEventListener('model-loaded', this.onModelLoaded); - }, - - update: function (oldData) { - if (this.data.gltfModel !== oldData.gltfModel) { - this.modelEl.setAttribute('gltf-model', this.data.gltfModel); - } - if (this.data.bgFromColor || this.data.bgToColor) { - this.setBackgroundMaterial(); - } - if (this.data.title !== oldData.title) { - this.titleEl.setAttribute('text', `value: ${this.data.title}; width: 6`); - } - }, - - submitURLButtonClicked: function (evt) { - let modelURL = this.inputEl.value; - if (modelURL === this.inputDefaultValue) { - return; - } - this.el.setAttribute('model-viewer', 'gltfModel', modelURL); - }, - - initCameraRig: function () { - let cameraRigEl = (this.cameraRigEl = document.createElement('a-entity')); - let cameraEl = (this.cameraEl = document.createElement('a-entity')); - let rightHandEl = (this.rightHandEl = document.createElement('a-entity')); - let leftHandEl = (this.leftHandEl = document.createElement('a-entity')); - - cameraEl.setAttribute('camera', { fov: 60 }); - cameraEl.setAttribute('look-controls', { - magicWindowTrackingEnabled: false, - mouseEnabled: false, - touchEnabled: false, - }); - - rightHandEl.setAttribute('rotation', '0 90 0'); - rightHandEl.setAttribute('laser-controls', { hand: 'right' }); - rightHandEl.setAttribute('raycaster', { objects: '.raycastable' }); - rightHandEl.setAttribute('line', { color: '#118A7E' }); - - leftHandEl.setAttribute('rotation', '0 90 0'); - leftHandEl.setAttribute('laser-controls', { hand: 'right' }); - leftHandEl.setAttribute('raycaster', { objects: '.raycastable' }); - leftHandEl.setAttribute('line', { color: '#118A7E' }); - - cameraRigEl.appendChild(cameraEl); - cameraRigEl.appendChild(rightHandEl); - cameraRigEl.appendChild(leftHandEl); - - this.el.appendChild(cameraRigEl); - }, - - initBackground: function () { - let backgroundEl = (this.backgroundEl = document.querySelector('a-entity')); - backgroundEl.setAttribute('geometry', { primitive: 'sphere', radius: 65 }); - backgroundEl.setAttribute('hide-on-enter-ar', ''); - this.setBackgroundMaterial(); - }, - - setBackgroundMaterial: function () { - const materialProps = { - shader: 'background-gradient', - colorTop: this.data.bgFromColor, - colorBottom: this.data.bgToColor, - side: 'back', - }; - this.backgroundEl.setAttribute('material', materialProps); - }, - - initEntities: function () { - // Container for our entities to keep the scene clean and tidy. - let containerEl = (this.containerEl = document.createElement('a-entity')); - // Plane used as a hit target for laser controls when in VR mode - let laserHitPanelEl = (this.laserHitPanelEl = document.createElement('a-entity')); - // Models are often not centered on the 0,0,0. - // We will center the model and rotate a pivot. - let modelPivotEl = (this.modelPivotEl = document.createElement('a-entity')); - // This is our glTF model entity. - let modelEl = (this.modelEl = document.createElement('a-entity')); - // Shadow blurb for 2D and VR modes. Scaled to match the size of the model. - let shadowEl = (this.shadowEl = document.createElement('a-entity')); - // Real time shadow only used in AR mode. - let arShadowEl = (this.arShadowEl = document.createElement('a-entity')); - // The title / legend displayed above the model. - let titleEl = (this.titleEl = document.createElement('a-entity')); - // Reticle model used to position the model in AR mode. - let reticleEl = (this.reticleEl = document.createElement('a-entity')); - // Scene ligthing. - let lightEl = (this.lightEl = document.createElement('a-entity')); - let sceneLightEl = (this.sceneLightEl = document.createElement('a-entity')); - - sceneLightEl.setAttribute('light', { - type: 'hemisphere', - intensity: 1, - }); - - modelPivotEl.id = 'modelPivot'; - - this.el.appendChild(sceneLightEl); - - reticleEl.setAttribute('gltf-model', '#reticle'); - reticleEl.setAttribute('scale', '0.8 0.8 0.8'); - reticleEl.setAttribute('ar-hit-test', { targetEl: '#modelPivot' }); - reticleEl.setAttribute('visible', 'false'); - - modelEl.id = 'model'; - - laserHitPanelEl.id = 'laserHitPanel'; - laserHitPanelEl.setAttribute('position', '0 0 -10'); - laserHitPanelEl.setAttribute('geometry', 'primitive: plane; width: 30; height: 20'); - laserHitPanelEl.setAttribute('material', 'color: red'); - laserHitPanelEl.setAttribute('visible', 'false'); - laserHitPanelEl.classList.add('raycastable'); - - this.containerEl.appendChild(laserHitPanelEl); - - modelEl.setAttribute('rotation', '0 -30 0'); - modelEl.setAttribute('animation-mixer', ''); - modelEl.setAttribute('shadow', 'cast: true; receive: false'); - - modelPivotEl.appendChild(modelEl); - - shadowEl.setAttribute('rotation', '-90 -30 0'); - shadowEl.setAttribute('geometry', 'primitive: plane; width: 1.0; height: 1.0'); - shadowEl.setAttribute('material', 'src: #shadow; transparent: true; opacity: 0.40'); - shadowEl.setAttribute('hide-on-enter-ar', ''); - - modelPivotEl.appendChild(shadowEl); - - arShadowEl.setAttribute('rotation', '-90 0 0'); - arShadowEl.setAttribute('geometry', 'primitive: plane; width: 30.0; height: 30.0'); - arShadowEl.setAttribute('shadow', 'recieve: true'); - arShadowEl.setAttribute('ar-shadows', 'opacity: 0.2'); - arShadowEl.setAttribute('visible', 'false'); - - modelPivotEl.appendChild(arShadowEl); - - titleEl.id = 'title'; - titleEl.setAttribute('text', `value: ${this.data.title}; width: 6`); - titleEl.setAttribute('hide-on-enter-ar', ''); - titleEl.setAttribute('visible', 'false'); - - this.containerEl.appendChild(titleEl); - - lightEl.id = 'light'; - lightEl.setAttribute('position', '-2 4 2'); - lightEl.setAttribute('light', { - type: 'directional', - castShadow: true, - shadowMapHeight: 1024, - shadowMapWidth: 1024, - shadowCameraLeft: -7, - shadowCameraRight: 5, - shadowCameraBottom: -5, - shadowCameraTop: 5, - intensity: 0.5, - target: 'modelPivot', - }); - - this.containerEl.appendChild(lightEl); - this.containerEl.appendChild(modelPivotEl); - - this.el.appendChild(containerEl); - this.el.appendChild(reticleEl); - }, - - onThumbstickMoved: function (evt) { - let modelPivotEl = this.modelPivotEl; - let modelScale = this.modelScale || modelPivotEl.object3D.scale.x; - modelScale -= evt.detail.y / 20; - modelScale = Math.min(Math.max(0.8, modelScale), 2.0); - modelPivotEl.object3D.scale.set(modelScale, modelScale, modelScale); - this.modelScale = modelScale; - }, - - onMouseWheel: function (evt) { - if (this.data.compact) return; - - if (this.onVR) { - let modelPivotEl = this.modelPivotEl; - let modelScale = this.modelScale || modelPivotEl.object3D.scale.x; - modelScale -= evt.deltaY / 100; - modelScale = Math.min(Math.max(0.8, modelScale), 2.0); - // Clamp scale. - modelPivotEl.object3D.scale.set(modelScale, modelScale, modelScale); - this.modelScale = modelScale; - } - }, - - onMouseDownLaserHitPanel: function (evt) { - let cursorEl = evt.detail.cursorEl; - let intersection = cursorEl.components.raycaster.getIntersection(this.laserHitPanelEl); - if (!intersection) { - return; - } - cursorEl.setAttribute('raycaster', 'lineColor', 'white'); - this.activeHandEl = cursorEl; - this.oldHandX = undefined; - this.oldHandY = undefined; - }, - - onMouseUpLaserHitPanel: function (evt) { - let cursorEl = evt.detail.cursorEl; - if (cursorEl === this.leftHandEl) { - this.leftHandPressed = false; - } - if (cursorEl === this.rightHandEl) { - this.rightHandPressed = false; - } - cursorEl.setAttribute('raycaster', 'lineColor', 'white'); - if (this.activeHandEl === cursorEl) { - this.activeHandEl = undefined; - } - }, - - onOrientationChange: function () { - if (AFRAME.utils.device.isLandscape()) { - this.cameraRigEl.object3D.position.z -= 1; - } else { - this.cameraRigEl.object3D.position.z += 1; - } - }, - - tick: function () { - let modelPivotEl = this.modelPivotEl; - let intersection; - let intersectionPosition; - let laserHitPanelEl = this.laserHitPanelEl; - let activeHandEl = this.activeHandEl; - if (!this.el.sceneEl.is('vr-mode')) { - return; - } - if (!activeHandEl) { - return; - } - intersection = activeHandEl.components.raycaster.getIntersection(laserHitPanelEl); - if (!intersection) { - activeHandEl.setAttribute('raycaster', 'lineColor', 'white'); - return; - } - activeHandEl.setAttribute('raycaster', 'lineColor', '#007AFF'); - intersectionPosition = intersection.point; - this.oldHandX = this.oldHandX || intersectionPosition.x; - this.oldHandY = this.oldHandY || intersectionPosition.y; - - modelPivotEl.object3D.rotation.y -= (this.oldHandX - intersectionPosition.x) / 4; - modelPivotEl.object3D.rotation.x += (this.oldHandY - intersectionPosition.y) / 4; - - this.oldHandX = intersectionPosition.x; - this.oldHandY = intersectionPosition.y; - }, - - onEnterVR: function () { - this.onVR = true; - let cameraRigEl = this.cameraRigEl; - - this.cameraRigPosition = cameraRigEl.object3D.position.clone(); - this.cameraRigRotation = cameraRigEl.object3D.rotation.clone(); - - debugger; - if (!this.el.sceneEl.is('ar-mode')) { - cameraRigEl.object3D.position.set(0, 0, 2); - } else { - cameraRigEl.object3D.position.set(0, 0, 0); - } - }, - - onExitVR: function () { - this.onVR = false; - let cameraRigEl = this.cameraRigEl; - - cameraRigEl.object3D.position.copy(this.cameraRigPosition); - cameraRigEl.object3D.rotation.copy(this.cameraRigRotation); - - cameraRigEl.object3D.rotation.set(0, 0, 0); - }, - - onTouchMove: function (evt) { - if (evt.touches.length === 1) { - this.onSingleTouchMove(evt); - } - if (evt.touches.length === 2) { - this.onPinchMove(evt); - } - }, - - onSingleTouchMove: function (evt) { - let dX; - let dY; - let modelPivotEl = this.modelPivotEl; - this.oldClientX = this.oldClientX || evt.touches[0].clientX; - this.oldClientY = this.oldClientY || evt.touches[0].clientY; - - dX = this.oldClientX - evt.touches[0].clientX; - dY = this.oldClientY - evt.touches[0].clientY; - - modelPivotEl.object3D.rotation.y -= dX / 200; - this.oldClientX = evt.touches[0].clientX; - - modelPivotEl.object3D.rotation.x -= dY / 100; - - // Clamp x rotation to [-90,90] - modelPivotEl.object3D.rotation.x = Math.min( - Math.max(-Math.PI / 2, modelPivotEl.object3D.rotation.x), - Math.PI / 2 - ); - this.oldClientY = evt.touches[0].clientY; - }, - - onPinchMove: function (evt) { - let dX = evt.touches[0].clientX - evt.touches[1].clientX; - let dY = evt.touches[0].clientY - evt.touches[1].clientY; - let modelPivotEl = this.modelPivotEl; - let distance = Math.sqrt(dX * dX + dY * dY); - let oldDistance = this.oldDistance || distance; - let distanceDifference = oldDistance - distance; - let modelScale = this.modelScale || modelPivotEl.object3D.scale.x; - - modelScale -= distanceDifference / 500; - modelScale = Math.min(Math.max(0.8, modelScale), 2.0); - // Clamp scale. - modelPivotEl.object3D.scale.set(modelScale, modelScale, modelScale); - - this.modelScale = modelScale; - this.oldDistance = distance; - }, - - onTouchEnd: function (evt) { - this.oldClientX = undefined; - this.oldClientY = undefined; - if (evt.touches.length < 2) { - this.oldDistance = undefined; - } - }, - - onMouseUp: function (evt) { - this.leftRightButtonPressed = false; - if (evt.buttons === undefined || evt.buttons !== 0) { - return; - } - this.oldClientX = undefined; - this.oldClientY = undefined; - }, - - onMouseMove: function (evt) { - if (this.leftRightButtonPressed) { - this.dragModel(evt); - } else { - this.rotateModel(evt); - } - }, - - dragModel: function (evt) { - let dX; - let dY; - let modelPivotEl = this.modelPivotEl; - if (!this.oldClientX) { - return; - } - dX = this.oldClientX - evt.clientX; - dY = this.oldClientY - evt.clientY; - modelPivotEl.object3D.position.y += dY / 200; - modelPivotEl.object3D.position.x -= dX / 200; - this.oldClientX = evt.clientX; - this.oldClientY = evt.clientY; - }, - - rotateModel: function (evt) { - let dX; - let dY; - let modelPivotEl = this.modelPivotEl; - if (!this.oldClientX) { - return; - } - dX = this.oldClientX - evt.clientX; - dY = this.oldClientY - evt.clientY; - modelPivotEl.object3D.rotation.y -= dX / 100; - modelPivotEl.object3D.rotation.x -= dY / 200; - - // Clamp x rotation to [-90,90] - modelPivotEl.object3D.rotation.x = Math.min( - Math.max(-Math.PI / 2, modelPivotEl.object3D.rotation.x), - Math.PI / 2 - ); - - this.oldClientX = evt.clientX; - this.oldClientY = evt.clientY; - }, - - onModelLoaded: function () { - this.centerAndScaleModel(); - // Triggers window onResize to fix the canvas dimensions - window.dispatchEvent(new Event('resize')); - }, - - centerAndScaleModel: function () { - let box; - let size; - let center; - let scale; - let modelEl = this.modelEl; - let shadowEl = this.shadowEl; - let titleEl = this.titleEl; - let gltfObject = modelEl.getObject3D('mesh'); - - // Reset position and scales. - modelEl.object3D.position.set(0, 0, 0); - modelEl.object3D.scale.set(1.0, 1.0, 1.0); - this.cameraRigEl.object3D.position.z = 3.0; - - // Calculate model size. - modelEl.object3D.updateMatrixWorld(); - box = new THREE.Box3().setFromObject(gltfObject); - size = box.getSize(new THREE.Vector3()); - - // Calculate scale factor to resize model to human scale. - scale = 1.6 / size.y; - scale = 2.0 / size.x < scale ? 2.0 / size.x : scale; - scale = 2.0 / size.z < scale ? 2.0 / size.z : scale; - - modelEl.object3D.scale.set(scale, scale, scale); - - // Center model at (0, 0, 0). - modelEl.object3D.updateMatrixWorld(); - box = new THREE.Box3().setFromObject(gltfObject); - center = box.getCenter(new THREE.Vector3()); - size = box.getSize(new THREE.Vector3()); - - shadowEl.object3D.scale.y = size.x; - shadowEl.object3D.scale.x = size.y; - shadowEl.object3D.position.y = -size.y / 2; - shadowEl.object3D.position.z = -center.z; - shadowEl.object3D.position.x = -center.x; - - titleEl.object3D.position.x = 2.2 - center.x; - titleEl.object3D.position.y = size.y + 0.5; - titleEl.object3D.position.z = -2; - titleEl.object3D.visible = true; - - modelEl.object3D.position.x = -center.x; - modelEl.object3D.position.y = -center.y; - modelEl.object3D.position.z = -center.z; - - // When in mobile landscape we want to bring the model a bit closer. - // if (AFRAME.utils.device.isLandscape()) { - this.cameraRigEl.object3D.position.z -= 1; - // } - }, - - onMouseDown: function (evt) { - if (evt.buttons) { - this.leftRightButtonPressed = evt.buttons === 3; - } - this.oldClientX = evt.clientX; - this.oldClientY = evt.clientY; - }, - }); - } -} diff --git a/packages/leemons/src/common/AssetPlayer/components/AudioCardPlayer/AudioCardPlayer.constants.js b/packages/leemons/src/common/AssetPlayer/components/AudioCardPlayer/AudioCardPlayer.constants.js deleted file mode 100644 index 71dfb016c..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/AudioCardPlayer/AudioCardPlayer.constants.js +++ /dev/null @@ -1,4 +0,0 @@ -import PropTypes from 'prop-types'; - -export const AUDIO_CARD_PLAYER_DEFAULT_PROPS = {}; -export const AUDIO_CARD_PLAYER_PROP_TYPES = {}; diff --git a/packages/leemons/src/common/AssetPlayer/components/AudioCardPlayer/AudioCardPlayer.js b/packages/leemons/src/common/AssetPlayer/components/AudioCardPlayer/AudioCardPlayer.js deleted file mode 100644 index 08e6345e8..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/AudioCardPlayer/AudioCardPlayer.js +++ /dev/null @@ -1,96 +0,0 @@ -import React from 'react'; -import ReactPlayer from 'react-player'; -import { Box, ImageLoader } from '@bubbles-ui/components'; -import { - AUDIO_CARD_PLAYER_DEFAULT_PROPS, - AUDIO_CARD_PLAYER_PROP_TYPES, -} from './AudioCardPlayer.constants'; -import { AudioCardPlayerStyles } from './AudioCardPlayer.styles'; -import { AudioProgressBar } from '../AudioProgressBar'; - -const AudioCardPlayer = ({ - url, - loop, - cover, - title, - muted, - onPlay, - onReady, - onStart, - onPause, - onEnded, - onError, - seconds, - subtitle, - seekValue, - isPlaying, - playerRef, - mediaVolume, - getDuration, - setIsPlaying, - onEventHandler, - nativeControls, - handleOnProgress, - progressInterval, - getTotalDuration, - playedPercentage, - handleSeekChange, - handleSeekMouseUp, - handleSeekMouseDown, -}) => { - // ·································································· - // COMPONENT - - const { classes } = AudioCardPlayerStyles({}, { name: 'AudioProgressBar' }); - return ( - - - {cover && } - - - { - handleOnProgress(played, playedSeconds); - }} - onReady={(eventInfo) => onEventHandler(onReady, eventInfo)} - onStart={(eventInfo) => onEventHandler(onStart, eventInfo)} - onPlay={(eventInfo) => onEventHandler(onPlay, eventInfo)} - onPause={(eventInfo) => onEventHandler(onPause, eventInfo)} - onEnded={(eventInfo) => onEventHandler(onEnded, eventInfo)} - onError={(eventInfo) => onEventHandler(onError, eventInfo)} - /> - - ); -}; - -AudioCardPlayer.defaultProps = AUDIO_CARD_PLAYER_DEFAULT_PROPS; -AudioCardPlayer.propTypes = AUDIO_CARD_PLAYER_PROP_TYPES; - -export { AudioCardPlayer }; diff --git a/packages/leemons/src/common/AssetPlayer/components/AudioCardPlayer/AudioCardPlayer.styles.js b/packages/leemons/src/common/AssetPlayer/components/AudioCardPlayer/AudioCardPlayer.styles.js deleted file mode 100644 index c4127c66f..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/AudioCardPlayer/AudioCardPlayer.styles.js +++ /dev/null @@ -1,31 +0,0 @@ -import { createStyles, pxToRem } from '@bubbles-ui/components'; - -export const AudioCardPlayerStyles = createStyles((theme, {}) => { - const globalTheme = theme.other.global; - - return { - audioCardRoot: { - paddingTop: 4, - paddingBottom: 4, - paddingLeft: 4, - paddingRight: 24, - backgroundColor: globalTheme.background.color.surface.subtle, - display: 'flex', - alignItems: 'center', - width: '100%', - position: 'relative', - gap: 14, - }, - audioCardCover: { - width: 165, - height: 158, - marginBlock: 2, - }, - reactPlayer: { - position: 'absolute', - pointerEvents: 'none', - top: 0, - left: 0, - }, - }; -}); diff --git a/packages/leemons/src/common/AssetPlayer/components/AudioCardPlayer/index.js b/packages/leemons/src/common/AssetPlayer/components/AudioCardPlayer/index.js deleted file mode 100644 index b857961c8..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/AudioCardPlayer/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export * from './AudioCardPlayer'; -export * from './AudioCardPlayer.constants'; diff --git a/packages/leemons/src/common/AssetPlayer/components/AudioProgressBar/AudioProgressBar.constants.js b/packages/leemons/src/common/AssetPlayer/components/AudioProgressBar/AudioProgressBar.constants.js deleted file mode 100644 index aaf8f93c4..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/AudioProgressBar/AudioProgressBar.constants.js +++ /dev/null @@ -1,4 +0,0 @@ -import PropTypes from 'prop-types'; - -export const AUDIO_PROGRESS_BAR_DEFAULT_PROPS = {}; -export const AUDIO_PROGRESS_BAR_PROP_TYPES = {}; diff --git a/packages/leemons/src/common/AssetPlayer/components/AudioProgressBar/AudioProgressBar.js b/packages/leemons/src/common/AssetPlayer/components/AudioProgressBar/AudioProgressBar.js deleted file mode 100644 index 24587229b..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/AudioProgressBar/AudioProgressBar.js +++ /dev/null @@ -1,150 +0,0 @@ -import React from 'react'; -import { - AUDIO_PROGRESS_BAR_DEFAULT_PROPS, - AUDIO_PROGRESS_BAR_PROP_TYPES, -} from './AudioProgressBar.constants'; -import { AudioProgressBarStyles } from './AudioProgressBar.styles'; -import { Box, Text, TextClamp } from '@bubbles-ui/components'; -import { ControlsPlayIcon, ControlsPauseIcon } from '@bubbles-ui/icons/solid'; - -const Back15Icon = () => { - return ( - - - - - - - - - - - ); -}; - -const Forward15Icon = () => { - return ( - - - - - - - - - - - ); -}; - -const AudioProgressBar = ({ - title, - subtitle, - seconds, - playerRef, - seekValue, - isPlaying, - getDuration, - setIsPlaying, - getTotalDuration, - playedPercentage, - handleSeekChange, - handleSeekMouseUp, - handleSeekMouseDown, -}) => { - // ·································································· - // HANDLERS - - const handleGoForward = () => { - playerRef.current.seekTo(seconds + 15); - }; - - const handleGoBackward = () => { - playerRef.current.seekTo(seconds - 15); - }; - - // ·································································· - // COMPONENT - - const { classes } = AudioProgressBarStyles( - { useSpaceBetween: title || subtitle }, - { name: 'AudioProgressBar' } - ); - return ( - - - - - - - {(title || subtitle) && ( - - {title && ( - - {title} - - )} - {subtitle && ( - - {subtitle} - - )} - - )} - - - - - - setIsPlaying(!isPlaying)} className={classes.iconWrapper}> - {isPlaying ? ( - - ) : ( - - )} - - - - - - - - {getDuration()} / {getTotalDuration()} - - - - - - ); -}; - -AudioProgressBar.defaultProps = AUDIO_PROGRESS_BAR_DEFAULT_PROPS; -AudioProgressBar.propTypes = AUDIO_PROGRESS_BAR_PROP_TYPES; - -export { AudioProgressBar }; diff --git a/packages/leemons/src/common/AssetPlayer/components/AudioProgressBar/AudioProgressBar.styles.js b/packages/leemons/src/common/AssetPlayer/components/AudioProgressBar/AudioProgressBar.styles.js deleted file mode 100644 index cb2b487c9..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/AudioProgressBar/AudioProgressBar.styles.js +++ /dev/null @@ -1,103 +0,0 @@ -import { createStyles, pxToRem } from '@bubbles-ui/components'; - -export const AudioProgressBarStyles = createStyles((theme, { useSpaceBetween }) => { - const globalTheme = theme.other.global; - - return { - progressBarWrapper: { - flex: 1, - display: 'flex', - flexDirection: 'column', - gap: globalTheme.spacing.gap.md, - padding: globalTheme.spacing.padding.md, - paddingInline: 0, - }, - progressBar: { - WebkitAppearance: 'none', - height: 8, - width: '100%', - backgroundColor: globalTheme.background.color.surface.emphasis, - borderRadius: 4, - overflow: 'hidden', - position: 'relative', - marginBlock: 2, - }, - progressBarValue: { - height: '100%', - backgroundColor: globalTheme.background.color.primary.default, - transition: 'width 0.1s linear', - position: 'relative', - }, - progressBarSeekSlider: { - WebkitAppearance: 'none', - MozAppearance: 'none', - width: '100%', - position: 'absolute', - backgroundColor: 'transparent', - height: 8, - top: 0, - right: 0, - bottom: 0, - left: 0, - margin: 0, - cursor: 'pointer', - '::-webkit-slider-thumb': { - visibility: 'hidden', - WebkitAppearance: 'none', - appearance: 'none', - width: pxToRem(8), - height: pxToRem(8), - borderRadius: '50%', - backgroundColor: theme.colors.mainBlack, - cursor: 'pointer', - }, - '::-moz-range-thumb': { - visibility: 'hidden', - MozAppearance: 'none', - appearance: 'none', - width: pxToRem(8), - height: pxToRem(8), - borderRadius: '50%', - backgroundColor: theme.colors.mainBlack, - cursor: 'pointer', - }, - }, - buttonDurationWrapper: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - }, - durationWrapper: { - color: globalTheme.content.color.icon.muted, - minWidth: pxToRem(46), - }, - controlBar: { - display: 'flex', - gap: globalTheme.spacing.gap.xlg, - justifyContent: useSpaceBetween ? 'space-between' : 'flex-end', - }, - buttonWrapper: { - display: 'flex', - alignItems: 'center', - gap: 16, - userSelect: 'none', - }, - iconWrapper: { - display: 'flex', - alignItems: 'center', - cursor: 'pointer', - }, - controlIcon: { - color: globalTheme.content.color.icon.emphasis, - }, - title: { - ...globalTheme.content.typo.heading.sm, - color: globalTheme.content.color.text.default, - marginTop: 8, - }, - subtitle: { - ...globalTheme.content.typo.body.sm, - color: globalTheme.content.color.text.subtle, - }, - }; -}); diff --git a/packages/leemons/src/common/AssetPlayer/components/AudioProgressBar/index.js b/packages/leemons/src/common/AssetPlayer/components/AudioProgressBar/index.js deleted file mode 100644 index aa6adf83f..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/AudioProgressBar/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export * from './AudioProgressBar'; -export * from './AudioProgressBar.constants'; diff --git a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.constants.js b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.constants.js deleted file mode 100644 index 0057d3a8f..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.constants.js +++ /dev/null @@ -1,9 +0,0 @@ -import propTypes from 'prop-types'; - -export const BUTTONICON_DEFAULT_PROPS = { - fileType: '', -}; - -export const BUTTONICON_PROP_TYPES = { - fileType: propTypes.string, -}; diff --git a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.js b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.js deleted file mode 100644 index 9251bbfee..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { Box } from '@bubbles-ui/components'; -import { DownloadIcon, OpenIcon, SearchPlusIcon } from '@bubbles-ui/icons/outline'; -import { ControlsPlayIcon } from '@bubbles-ui/icons/solid'; - -import { ButtonIconStyles } from './ButtonIcon.styles'; -import { BUTTONICON_DEFAULT_PROPS, BUTTONICON_PROP_TYPES } from './ButtonIcon.constants'; - -const ButtonIcon = ({ fileType }) => { - const { classes } = ButtonIconStyles({}); - const fileTypeIcon = { - image: ( - - ), - file: , - document: , - video: , - }; - - return ( - { - e.preventDefault(); - e.stopPropagation(); - }} - > - {fileType && fileTypeIcon[fileType]} - - ); -}; - -ButtonIcon.popTypes = BUTTONICON_PROP_TYPES; -ButtonIcon.defaultProps = BUTTONICON_DEFAULT_PROPS; -ButtonIcon.displayName = 'ButtonIcon'; - -export { ButtonIcon }; diff --git a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.styles.js b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.styles.js deleted file mode 100644 index 83f9fdc23..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.styles.js +++ /dev/null @@ -1,19 +0,0 @@ -import { createStyles } from '@bubbles-ui/components'; - -const ButtonIconStyles = createStyles((theme) => ({ - root: { - display: 'flex', - width: '40px', - maxHeight: '40px', - padding: '12px 16px 8px 16px', - justifyContent: 'center', - alignItems: 'center', - borderRadius: '4px', - backgroundColor: theme.other.buttonIconCard.background.color.primary.default, - '&:hover': { - backgroundColor: theme.other.buttonIconCard.background.color.primary.hover, - }, - }, -})); - -export { ButtonIconStyles }; diff --git a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/index.js b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/index.js deleted file mode 100644 index d016c203e..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './ButtonIcon'; diff --git a/packages/leemons/src/common/AssetPlayer/components/PDFPlayer/PDFPlayer.constants.js b/packages/leemons/src/common/AssetPlayer/components/PDFPlayer/PDFPlayer.constants.js deleted file mode 100644 index 13338c43f..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/PDFPlayer/PDFPlayer.constants.js +++ /dev/null @@ -1,16 +0,0 @@ -import PropTypes from 'prop-types'; - -export const PDF_PLAYER_DEFAULT_PROPS = { - labels: { - pageLabel: '', - paginatorLabel: '', - }, - useSchema: true, -}; -export const PDF_PLAYER_PROP_TYPES = { - labels: PropTypes.shape({ - pageLabel: PropTypes.string, - paginatorLabel: PropTypes.string, - }), - useSchema: PropTypes.bool, -}; diff --git a/packages/leemons/src/common/AssetPlayer/components/PDFPlayer/PDFPlayer.js b/packages/leemons/src/common/AssetPlayer/components/PDFPlayer/PDFPlayer.js deleted file mode 100644 index 613082007..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/PDFPlayer/PDFPlayer.js +++ /dev/null @@ -1,137 +0,0 @@ -import React, { useState } from 'react'; -import { Box, RadioGroup } from '@bubbles-ui/components'; -import { Document, Page } from 'react-pdf/dist/esm/entry.webpack5'; -import { PDF_PLAYER_DEFAULT_PROPS, PDF_PLAYER_PROP_TYPES } from './PDFPlayer.constants'; -import { PDFPlayerStyles } from './PDFPlayer.styles'; -import { ArrowRightIcon, ChevLeftIcon, ChevRightIcon } from '@bubbles-ui/icons/outline'; -import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; -import 'react-pdf/dist/esm/Page/TextLayer.css'; -import { StarIcon } from '@bubbles-ui/icons/solid'; - -const PDFPlayer = ({ pdf, labels, useSchema, className }) => { - const [activePage, setActivePage] = useState(1); - const [totalPages, setTotalPages] = useState(0); - const [isThumbnailOpen, setIsThumbnailOpen] = useState(true); - const [thumbnailMode, setThumbnailMode] = useState('thumbnail'); - const [isCurrentPageRendered, setIsCurrentPageRendered] = useState(false); - - const changePage = (page) => { - setActivePage(page); - setIsCurrentPageRendered(false); - }; - - const pageBackward = () => { - if (activePage === 1) return; - setActivePage((prev) => prev - 1); - setIsCurrentPageRendered(false); - }; - - const pageForward = () => { - if (activePage === totalPages) return; - setActivePage((prev) => prev + 1); - setIsCurrentPageRendered(false); - }; - - const modeChangeHandler = (mode) => { - setThumbnailMode(mode); - }; - - const onLoadSuccessHandler = ({ numPages }) => { - setTotalPages(numPages); - }; - - const { classes, cx } = PDFPlayerStyles( - { isThumbnailOpen, isCurrentPageRendered, thumbnailMode }, - { name: 'PDFPlayer' } - ); - return ( - - {useSchema && ( - - - - {labels.schemaLabel} - setIsThumbnailOpen(!isThumbnailOpen)} - /> - - - , value: 'thumbnail' }, - { icon: , value: 'schema' }, - ]} - variant="icon" - onChange={modeChangeHandler} - /> - - - {Array.from(new Array(totalPages), (el, index) => { - const currentPage = index + 1; - return ( - - {thumbnailMode === 'thumbnail' && ( - changePage(currentPage)} - /> - )} - changePage(currentPage) : null} - >{`${labels.pageLabel} ${currentPage}`} - - ); - })} - - - - )} - - setIsCurrentPageRendered(true)} - /> - - pageBackward()} - /> - {`${activePage} ${labels.paginatorLabel} ${totalPages}`} - pageForward()} - /> - - - - ); -}; - -PDFPlayer.defaultProps = PDF_PLAYER_DEFAULT_PROPS; -PDFPlayer.propTypes = PDF_PLAYER_PROP_TYPES; - -export { PDFPlayer }; diff --git a/packages/leemons/src/common/AssetPlayer/components/PDFPlayer/PDFPlayer.styles.js b/packages/leemons/src/common/AssetPlayer/components/PDFPlayer/PDFPlayer.styles.js deleted file mode 100644 index 81288b6a2..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/PDFPlayer/PDFPlayer.styles.js +++ /dev/null @@ -1,151 +0,0 @@ -import { createStyles, pxToRem } from '@bubbles-ui/components'; - -export const PDFPlayerStyles = createStyles( - (theme, { isThumbnailOpen, isCurrentPageRendered, thumbnailMode }) => { - const globalTheme = theme.other.global; - const borderColor = globalTheme.border.color.line.muted; - return { - document: { - display: 'flex', - marginBottom: 24, - backgroundColor: globalTheme.background.color.surface.subtle, - height: '100%', - overflow: 'hidden', - }, - thumbnailContainer: { - position: 'relative', - minWidth: isThumbnailOpen ? 218 : 52, - maxWidth: isThumbnailOpen ? 218 : 52, - flex: 1, - overflow: 'hidden', - border: `1px solid ${borderColor}`, - borderRight: 'none', - transition: 'max-width 0.2s, min-width 0.2s', - backgroundColor: globalTheme.background.color.surface.default, - }, - thumbnailTranslate: { - position: 'absolute', - top: 0, - bottom: 0, - minWidth: 218, - maxWidth: 218, - transform: isThumbnailOpen ? 'translateX(0%)' : 'translateX(calc(-100% + 52px))', - transition: 'transform 0.2s', - }, - thumbnailHeader: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - borderBottom: `1px solid ${borderColor}`, - padding: 16, - }, - schemaLabel: { - color: globalTheme.content.color.text.emphasis, - ...globalTheme.content.typo.heading.xsm, - }, - thumbnails: { - display: 'flex', - flexDirection: thumbnailMode === 'thumbnail' ? 'row' : 'column', - gap: 4, - rowGap: 16, - flexWrap: 'wrap', - alignContent: 'flex-start', - padding: 16, - transform: isThumbnailOpen ? 'translateX(0%)' : 'translateX(calc(-52px))', - transition: 'transform 0.2s', - }, - modeWrapper: { - display: 'flex', - justifyContent: 'flex-end', - alignItems: 'center', - padding: 16, - paddingRight: isThumbnailOpen ? 16 : 52, - borderBottom: `1px solid ${borderColor}`, - transition: 'padding 0.2s', - }, - thumbnailWrapper: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - width: thumbnailMode === 'thumbnail' && 90, - gap: 12, - }, - thumbnailPage: { - cursor: 'pointer', - }, - pageLabel: { - ...globalTheme.content.typo.body.md, - color: globalTheme.content.color.text.default, - lineHeight: '16px', - cursor: thumbnailMode !== 'thumbnail' && 'pointer', - }, - activeThumbnail: { - boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.4)', - }, - activePageContainer: { - flex: 2, - position: 'relative', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - border: `1px solid ${borderColor}`, - padding: 24, - paddingBlock: 32, - gap: 32, - overflowY: 'auto', - '::-webkit-scrollbar': { - width: '12px', - }, - '::-webkit-scrollbar-track': { - backgroundColor: globalTheme.background.color.surface.default, - }, - '::-webkit-scrollbar-thumb': { - backgroundColor: globalTheme.background.color.surface.muted, - borderRadius: 8, - }, - }, - activePage: { - visibility: !isCurrentPageRendered && 'hidden', - '& canvas': { - borderRadius: 4, - backgroundColor: 'white', - }, - }, - paginator: { - paddingBlock: 8, - paddingInline: 16, - backgroundColor: globalTheme.background.color.surface.default, - height: 52, - display: 'flex', - gap: 22, - alignItems: 'center', - borderRadius: 4, - boxShadow: '0px 2px 0px rgba(217, 225, 237, 0.16), 0px 10px 36px rgba(26, 32, 43, 0.12)', - userSelect: 'none', - }, - paginatorIcon: { - color: globalTheme.content.color.icon.default, - cursor: 'pointer', - '&:active': { - transform: 'translateY(2px)', - }, - }, - disabledIcon: { - cursor: 'not-allowed', - color: globalTheme.content.color.icon.muted, - }, - paginatorLabel: { - ...globalTheme.content.typo.heading.xsm, - color: globalTheme.content.color.text.default, - }, - arrowIcon: { - color: globalTheme.content.color.text.subtle, - cursor: 'pointer', - transform: isThumbnailOpen && 'rotate(-180deg)', - transition: 'transform 300ms', - minHeight: 20, - minWidth: 20, - }, - }; - } -); diff --git a/packages/leemons/src/common/AssetPlayer/components/PDFPlayer/index.js b/packages/leemons/src/common/AssetPlayer/components/PDFPlayer/index.js deleted file mode 100644 index c2a9f2ae5..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/PDFPlayer/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export * from './PDFPlayer'; -export * from './PDFPlayer.constants'; diff --git a/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.constants.js b/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.constants.js deleted file mode 100644 index 3afb101f6..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.constants.js +++ /dev/null @@ -1,4 +0,0 @@ -import PropTypes from 'prop-types'; - -export const PROGRESS_BAR_DEFAULT_PROPS = {}; -export const PROGRESS_BAR_PROP_TYPES = {}; diff --git a/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.js b/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.js deleted file mode 100644 index 972a92329..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.js +++ /dev/null @@ -1,111 +0,0 @@ -import React, { useEffect } from 'react'; -import { Box, Text } from '@bubbles-ui/components'; -import { - ExpandIcon, - ControlsPlayIcon, - ControlsPauseIcon, - VolumeControlLowIcon, - VolumeControlOffIcon, -} from '@bubbles-ui/icons/solid'; -import { ShrinkIcon } from '@bubbles-ui/icons/outline'; -import { ProgressBarStyles } from './ProgressBar.styles'; -import { PROGRESS_BAR_DEFAULT_PROPS, PROGRESS_BAR_PROP_TYPES } from './ProgressBar.constants'; - -const ProgressBar = ({ - seekValue, - isPlaying, - mediaVolume, - getDuration, - setIsPlaying, - fullScreenMode, - setMediaVolume, - getTotalDuration, - playedPercentage, - handleSeekChange, - handleSeekMouseUp, - setFullScreenMode, - handleSeekMouseDown, -}) => { - // ·································································· - // HANDLERS - - const handleVolumeChange = () => { - if (mediaVolume <= 1 && mediaVolume !== 0) { - setMediaVolume(0); - return; - } - if (mediaVolume === 0) setMediaVolume(1); - }; - - const handleFullscreenChange = () => { - setFullScreenMode(!fullScreenMode); - }; - - // ·································································· - // COMPONENT - - const { classes } = ProgressBarStyles({}, { name: 'ProgressBar' }); - return ( - - - setIsPlaying(!isPlaying)} className={classes.iconWrapper}> - {isPlaying ? ( - - ) : ( - - )} - - - {mediaVolume > 0 ? ( - - ) : ( - - )} - - - {getDuration()} / {getTotalDuration()} - - - - - - - {fullScreenMode ? ( - - ) : ( - - )} - - - - ); -}; - -ProgressBar.defaultProps = PROGRESS_BAR_DEFAULT_PROPS; -ProgressBar.propTypes = PROGRESS_BAR_PROP_TYPES; - -export { ProgressBar }; diff --git a/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.styles.js b/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.styles.js deleted file mode 100644 index 79be98dec..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.styles.js +++ /dev/null @@ -1,94 +0,0 @@ -import { createStyles, pxToRem } from '@bubbles-ui/components'; - -const ProgressBarStyles = createStyles((theme, {}) => { - const globalTheme = theme.other.global; - - return { - progressBarWrapper: { - position: 'absolute', - display: 'flex', - flexDirection: 'column', - gap: globalTheme.spacing.gap.lg, - padding: globalTheme.spacing.padding.md, - left: 16, - right: 16, - bottom: 5, - zIndex: 2, - borderRadius: 4, - backgroundColor: theme.other.buttonIconCard.background.color.primary.default, - '&:hover': { - backgroundColor: theme.other.buttonIconCard.background.color.primary.hover, - }, - }, - progressBar: { - WebkitAppearance: 'none', - height: 5, - width: '100%', - backgroundColor: '#FFF', - borderRadius: 4, - overflow: 'hidden', - position: 'relative', - marginRight: 14, - }, - progressBarValue: { - height: '100%', - backgroundColor: globalTheme.background.color.primary.default, - transition: 'width 0.1s linear', - position: 'relative', - }, - progressBarSeekSlider: { - WebkitAppearance: 'none', - MozAppearance: 'none', - width: '100%', - position: 'absolute', - backgroundColor: 'transparent', - height: 5, - top: 0, - right: 0, - bottom: 0, - left: 0, - margin: 0, - cursor: 'pointer', - '::-webkit-slider-thumb': { - visibility: 'hidden', - WebkitAppearance: 'none', - appearance: 'none', - width: pxToRem(5), - height: pxToRem(5), - borderRadius: '50%', - backgroundColor: theme.colors.mainBlack, - cursor: 'pointer', - }, - '::-moz-range-thumb': { - visibility: 'hidden', - MozAppearance: 'none', - appearance: 'none', - width: pxToRem(5), - height: pxToRem(5), - borderRadius: '50%', - backgroundColor: theme.colors.mainBlack, - cursor: 'pointer', - }, - }, - duration: { - color: theme.colors.mainWhite, - minWidth: pxToRem(46), - }, - controlBar: { - display: 'flex', - gap: globalTheme.spacing.gap.lg, - alignItems: 'center', - }, - iconWrapper: { - display: 'flex', - alignItems: 'center', - userSelect: 'none', - }, - whiteIcon: { - color: 'white', - cursor: 'pointer', - }, - }; -}); - -export { ProgressBarStyles }; diff --git a/packages/leemons/src/common/AssetPlayer/components/ProgressBar/index.js b/packages/leemons/src/common/AssetPlayer/components/ProgressBar/index.js deleted file mode 100644 index 83f0c01a3..000000000 --- a/packages/leemons/src/common/AssetPlayer/components/ProgressBar/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export * from './ProgressBar'; -export * from './ProgressBar.constants'; diff --git a/packages/leemons/src/common/AssetPlayer/index.js b/packages/leemons/src/common/AssetPlayer/index.js deleted file mode 100644 index 36ac984f5..000000000 --- a/packages/leemons/src/common/AssetPlayer/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export * from './AssetPlayer'; -export * from './AssetPlayer.constants'; diff --git a/packages/leemons/src/common/SchedulePicker/ScheduleForm/ScheduleForm.js b/packages/leemons/src/common/SchedulePicker/ScheduleForm/ScheduleForm.js index e4c57cf2c..22264ecad 100644 --- a/packages/leemons/src/common/SchedulePicker/ScheduleForm/ScheduleForm.js +++ b/packages/leemons/src/common/SchedulePicker/ScheduleForm/ScheduleForm.js @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; -import { find, isArray, isFunction } from 'lodash'; +import { find, isArray, isFunction, noop } from 'lodash'; import { Box, Button, @@ -20,6 +20,14 @@ export const SCHEDULE_FORM_DEFAULT_PROPS = { }; export const SCHEDULE_FORM_PROP_TYPES = { displayCustomDays: PropTypes.bool, + onChange: PropTypes.func, + savedSchedule: PropTypes.any, + firstDayOfWeek: PropTypes.number, + localeWeekdays: PropTypes.array, + labels: PropTypes.object, + placeholders: PropTypes.object, + errorMessages: PropTypes.object, + setOpenForm: PropTypes.func, }; // ------------------------------------------------------------------------------------------ @@ -28,12 +36,11 @@ export const SCHEDULE_FORM_PROP_TYPES = { const DAYS = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']; const NOW = new Date(); -const dateToHoursAndMinutes = (date) => { - return date.toLocaleTimeString(navigator.language, { +const dateToHoursAndMinutes = (date) => + date.toLocaleTimeString(navigator.language, { hour: '2-digit', minute: '2-digit', }); -}; function diffMinutes(dt2, dt1) { let diff = (dt2.getTime() - dt1.getTime()) / 1000; @@ -85,11 +92,10 @@ const ScheduleForm = ({ errorMessages, localeWeekdays, setOpenForm, - onChange, firstDayOfWeek, savedSchedule, displayCustomDays, - ...props + onChange = noop, }) => { const { classes, cx } = ScheduleFormStyles({}); @@ -100,7 +106,7 @@ const ScheduleForm = ({ const [invalidDates, setInvalidDates] = useState(false); const [schedule, setSchedule] = useState(savedSchedule || { days: [] }); const [oneScheduleOnly, setOneScheduleOnly] = useState( - !hasMultipleSchedules(savedSchedule?.days) + !hasMultipleSchedules(savedSchedule?.days), ); const [oneDayOnlyValue, setOneDayOnlyValue] = useState({ start: NOW, @@ -124,11 +130,12 @@ const ScheduleForm = ({ for (const position of errorPositions) { selectedDays[position].error = true; } - if (useCustomDates) { - if (startDate > endDate || startDate === endDate || !startDate || !endDate) { - isValid = false; - setInvalidDates(true); - } + if ( + useCustomDates && + (startDate > endDate || startDate === endDate || !startDate || !endDate) + ) { + isValid = false; + setInvalidDates(true); } setSelectedDays([...selectedDays]); return isValid; @@ -136,7 +143,7 @@ const ScheduleForm = ({ const handleOnChange = (sendEmpty) => { if (sendEmpty) { - isFunction(onChange) && onChange({ days: [] }); + onChange({ days: [] }); setOneDayOnlyValue({ start: new Date(), end: new Date(), @@ -146,7 +153,7 @@ const ScheduleForm = ({ } else { if (!validateSchedule()) return; - isFunction(onChange) && onChange(schedule); + onChange(schedule); setOpenForm(false); } }; @@ -157,37 +164,37 @@ const ScheduleForm = ({ ...day, start: day.start || oneDayOnlyValue.start, end: day.end || oneDayOnlyValue.end, - })) + })), ); }, [oneScheduleOnly]); useEffect(() => { - oneScheduleOnly - ? setSchedule({ - days: selectedDays.map((day) => dayToSchedule(day, oneDayOnlyValue, firstDayOfWeek)), - startDate, - endDate, - useCustomDates, - }) - : setSchedule({ - days: selectedDays.map((day) => dayToSchedule(day, day, firstDayOfWeek)), - startDate, - endDate, - useCustomDates, - }); + if (oneScheduleOnly) { + setSchedule({ + days: selectedDays.map((day) => dayToSchedule(day, oneDayOnlyValue, firstDayOfWeek)), + startDate, + endDate, + useCustomDates, + }); + } else { + setSchedule({ + days: selectedDays.map((day) => dayToSchedule(day, day, firstDayOfWeek)), + startDate, + endDate, + useCustomDates, + }); + } }, [selectedDays, oneDayOnlyValue, startDate, endDate, useCustomDates]); useEffect(() => { setSelectedDays( - savedSchedule.days.map((day) => { - return { - id: day.id, - start: new Date(`01/01/1970 ${day.start}`), - end: new Date(`01/01/1970 ${day.end}`), - error: false, - index: day.dayWeek, //(day.dayWeek + firstDayOfWeek) % 6, - }; - }) + savedSchedule.days.map((day) => ({ + id: day.id, + start: new Date(`01/01/1970 ${day.start}`), + end: new Date(`01/01/1970 ${day.end}`), + error: false, + index: day.dayWeek, // (day.dayWeek + firstDayOfWeek) % 6, + })), ); }, [savedSchedule]); @@ -197,29 +204,25 @@ const ScheduleForm = ({ { - return { - ...day, - checked: schedule.days.some((savedDay) => savedDay.dayWeek === day.value.index), - }; - })} + // variant={'boxed'} + data={localeWeekdays.map((day) => ({ + ...day, + checked: schedule.days.some((savedDay) => savedDay.dayWeek === day.value.index), + }))} onChange={(e) => { - const orderedDays = e.map((day) => { - return { - ...day, - id: - selectedDays.find((selectedDay) => selectedDay.index === day.index)?.id || - undefined, - start: - selectedDays.find((selectedDay) => selectedDay.index === day.index)?.start || - oneDayOnlyValue.start, - end: - selectedDays.find((selectedDay) => selectedDay.index === day.index)?.end || - oneDayOnlyValue.end, - error: false, - }; - }); + const orderedDays = e.map((day) => ({ + ...day, + id: + selectedDays.find((selectedDay) => selectedDay.index === day.index)?.id || + undefined, + start: + selectedDays.find((selectedDay) => selectedDay.index === day.index)?.start || + oneDayOnlyValue.start, + end: + selectedDays.find((selectedDay) => selectedDay.index === day.index)?.end || + oneDayOnlyValue.end, + error: false, + })); orderedDays.sort(compareWeekdays); setSelectedDays([...orderedDays]); }} @@ -268,39 +271,37 @@ const ScheduleForm = ({ ) : ( - {selectedDays.map((day, index) => { - return ( - - {`${ - labels.schedule - } ${find(localeWeekdays, { value: { index: day.index } })?.day}`} - - { - selectedDays[index].start = e; - setSelectedDays([...selectedDays]); - }} - /> - - {labels.divider} - - { - selectedDays[index].end = e; - setSelectedDays([...selectedDays]); - }} - /> - - {day.error && } - - ); - })} + {selectedDays.map((day, index) => ( + + {`${labels.schedule} ${ + find(localeWeekdays, { value: { index: day.index } })?.day + }`} + + { + selectedDays[index].start = e; + setSelectedDays([...selectedDays]); + }} + /> + + {labels.divider} + + { + selectedDays[index].end = e; + setSelectedDays([...selectedDays]); + }} + /> + + {day.error && } + + ))} )} @@ -333,14 +334,16 @@ const ScheduleForm = ({ )} - - - - + ({ padding: `0 ${theme.spacing[4]}px ${theme.spacing[4]}px 0` })}> + + + + + ); }; diff --git a/packages/leemons/src/common/SchedulePicker/SchedulePicker.js b/packages/leemons/src/common/SchedulePicker/SchedulePicker.js index 45135cf79..f2f7a1ca9 100644 --- a/packages/leemons/src/common/SchedulePicker/SchedulePicker.js +++ b/packages/leemons/src/common/SchedulePicker/SchedulePicker.js @@ -1,6 +1,6 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; -import { find, forEach, isEmpty, isFunction } from 'lodash'; +import { find, forEach, isEmpty, isFunction, noop } from 'lodash'; import { Badge, Box, @@ -12,7 +12,7 @@ import { useId, } from '@bubbles-ui/components'; import { PluginCalendarIcon } from '@bubbles-ui/icons/outline'; -import { ScheduleForm } from './ScheduleForm/'; +import { ScheduleForm } from './ScheduleForm'; import { SchedulePickerStyles } from './SchedulePicker.styles'; export const SCHEDULE_PICKER_DEFAULT_PROPS = { @@ -44,6 +44,8 @@ export const SCHEDULE_PICKER_PROP_TYPES = { value: PropTypes.object, readOnly: PropTypes.bool, disabled: PropTypes.bool, + firstDayOfWeek: PropTypes.number, + onChange: PropTypes.func, }; const SchedulePicker = forwardRef( @@ -56,19 +58,19 @@ const SchedulePicker = forwardRef( placeholders, helps, errorMessages, - firstDayOfWeek = 1, locale, value, - onChange, readOnly, disabled, + firstDayOfWeek = 1, + onChange = noop, ...props }, - ref + ref, ) => { const [openForm, setOpenForm] = useState(false); const [canOpen, setCanOpen] = useState(!disabled); - const [localeWeekdays, setlocaleWeekdays] = useState([]); + const [localeWeekdays, setLocaleWeekdays] = useState([]); const [schedule, setSchedule] = useState(value || { days: [] }); const inputRef = useRef(null); @@ -84,17 +86,17 @@ const SchedulePicker = forwardRef( import(`dayjs/locale/${locale}.js`).then((e) => { orderedWeekdays = [...e.weekdays]; if (firstDayOfWeek > 0) { - const e = [...Array(firstDayOfWeek).keys()]; - forEach(e, () => { + const days = [...Array(firstDayOfWeek).keys()]; + forEach(days, () => { orderedWeekdays.push(orderedWeekdays.shift()); }); } - setlocaleWeekdays( + setLocaleWeekdays( orderedWeekdays.map((day, index) => { let dayLabel = day.substring(0, 2); dayLabel = dayLabel.charAt(0).toUpperCase() + dayLabel.slice(1); - return { label: dayLabel, value: { index: e.weekdays.indexOf(day) }, day: day }; - }) + return { label: dayLabel, value: { index: e.weekdays.indexOf(day) }, day }; + }), ); }); }, [locale]); @@ -102,7 +104,7 @@ const SchedulePicker = forwardRef( const handleOnChange = (e) => { // if (e.days.length === 0) return; setSchedule(e); - isFunction(onChange) && onChange(e); + onChange(e); }; const uuid = useId(); @@ -133,9 +135,7 @@ const SchedulePicker = forwardRef( onClose={() => { setSchedule({ ...schedule, - days: schedule.days.filter((item) => { - return item.dayWeek !== day.dayWeek; - }), + days: schedule.days.filter((item) => item.dayWeek !== day.dayWeek), }); }} /> @@ -160,7 +160,7 @@ const SchedulePicker = forwardRef( {!isEmpty(localeWeekdays) && schedule.days.map((day) => { - const label = find(localeWeekdays, { value: { index: day.dayWeek } }).label; + const { label } = find(localeWeekdays, { value: { index: day.dayWeek } }); return ( { setSchedule({ ...schedule, - days: schedule.days.filter((item) => { - return item.dayWeek !== day.dayWeek; - }), + days: schedule.days.filter((item) => item.dayWeek !== day.dayWeek), }); }} /> @@ -212,9 +210,10 @@ const SchedulePicker = forwardRef( )} ); - } + }, ); +SchedulePicker.displayName = 'SchedulePicker'; SchedulePicker.defaultProps = SCHEDULE_PICKER_DEFAULT_PROPS; SchedulePicker.propTypes = SCHEDULE_PICKER_PROP_TYPES; diff --git a/packages/leemons/src/common/SchedulePicker/SchedulePicker.styles.js b/packages/leemons/src/common/SchedulePicker/SchedulePicker.styles.js index ae068ff38..19b2ac2ba 100644 --- a/packages/leemons/src/common/SchedulePicker/SchedulePicker.styles.js +++ b/packages/leemons/src/common/SchedulePicker/SchedulePicker.styles.js @@ -1,7 +1,7 @@ import { createStyles } from '@mantine/styles'; import { pxToRem, getFontProductive } from '@bubbles-ui/components'; -export const SchedulePickerStyles = createStyles((theme, {}) => { +const SchedulePickerStyles = createStyles((theme, {}) => { const inputLineHeight = theme.other.input.content.typo.lineHeight; return { root: { @@ -14,7 +14,7 @@ export const SchedulePickerStyles = createStyles((theme, {}) => { wrapper: { display: 'flex', position: 'relative', - paddingRight: 10, + padding: 3, width: '100%', }, values: { @@ -43,3 +43,5 @@ export const SchedulePickerStyles = createStyles((theme, {}) => { }, }; }); + +export { SchedulePickerStyles }; diff --git a/packages/leemons/src/common/index.js b/packages/leemons/src/common/index.js index a7f7007f1..7ac8e1841 100644 --- a/packages/leemons/src/common/index.js +++ b/packages/leemons/src/common/index.js @@ -4,7 +4,6 @@ export * from './HeaderBackground'; export * from './HeaderDropdown'; export * from './TaskDeadlineHeader'; export * from './TaskHeader'; -export * from './AssetPlayer'; export * from './TaskDeadline'; export * from './ClassroomHeaderBar'; export * from './UserDetailModal'; diff --git a/packages/leemons/src/library/LibraryCardEmbed/LibraryCardEmbed.js b/packages/leemons/src/library/LibraryCardEmbed/LibraryCardEmbed.js index d5d061d48..b04e36a42 100644 --- a/packages/leemons/src/library/LibraryCardEmbed/LibraryCardEmbed.js +++ b/packages/leemons/src/library/LibraryCardEmbed/LibraryCardEmbed.js @@ -14,7 +14,6 @@ import { import { capitalize, isEmpty, isFunction } from 'lodash'; import { ControlsPauseIcon, ControlsPlayIcon } from '@bubbles-ui/icons/solid'; import { DownloadIcon, OpenIcon, ExternalLinkIcon } from '@bubbles-ui/icons/outline'; -import { AssetPlayer } from '../../common'; import { LibraryCardEmbedStyles } from './LibraryCardEmbed.styles'; import { LIBRARY_CARD_EMBED_DEFAULT_PROPS, @@ -109,8 +108,7 @@ const LibraryCardEmbed = ({ asset, variant, labels, onDownload, actionIcon, ...p const getMediaHeight = () => { if (!rootRef.current) return; const mediaRatio = getMediaRatio(); - const mediaHeight = width / mediaRatio; - return mediaHeight; + return width / mediaRatio; }; useEffect(() => { @@ -121,7 +119,7 @@ const LibraryCardEmbed = ({ asset, variant, labels, onDownload, actionIcon, ...p const { classes, cx } = LibraryCardEmbedStyles( { showPlayer, fullScreenMode, color, variant, fileType }, - { name: 'LibraryCardEmbed' } + { name: 'LibraryCardEmbed' }, ); return ( @@ -185,7 +183,9 @@ const LibraryCardEmbed = ({ asset, variant, labels, onDownload, actionIcon, ...p ) : ( - + { + /* */ + } )} ); diff --git a/packages/leemons/src/library/LibraryDetailPlayer/LibraryDetailPlayer.js b/packages/leemons/src/library/LibraryDetailPlayer/LibraryDetailPlayer.js index 3d3028c26..53b95c35c 100644 --- a/packages/leemons/src/library/LibraryDetailPlayer/LibraryDetailPlayer.js +++ b/packages/leemons/src/library/LibraryDetailPlayer/LibraryDetailPlayer.js @@ -6,7 +6,6 @@ import { LIBRARY_DETAIL_PLAYER_DEFAULT_PROPS, LIBRARY_DETAIL_PLAYER_PROP_TYPES, } from './LibraryDetailPlayer.constants'; -import { AssetPlayer } from '../../common'; const LibraryDetailPlayer = ({ name, @@ -35,7 +34,7 @@ const LibraryDetailPlayer = ({ const { classes, cx } = LibraryDetailPlayerStyles({ color }, { name: 'LibraryDetailPlayer' }); return ( - + {/* */} diff --git a/packages/leemons/src/pages/TaskOngoingDetail/TaskOngoingDetail.js b/packages/leemons/src/pages/TaskOngoingDetail/TaskOngoingDetail.js index dce1bc2d8..5892e84a8 100644 --- a/packages/leemons/src/pages/TaskOngoingDetail/TaskOngoingDetail.js +++ b/packages/leemons/src/pages/TaskOngoingDetail/TaskOngoingDetail.js @@ -1,6 +1,4 @@ import React from 'react'; -import { mock } from './mock/mock'; -import { TaskHeader, AssetPlayer } from '../../common'; import { ChevLeftIcon } from '@bubbles-ui/icons/outline'; import { TextEditorInput } from '@bubbles-ui/editors'; import { @@ -15,6 +13,8 @@ import { VerticalStepper, ContextContainer, } from '@bubbles-ui/components'; +import { TaskHeader } from '../../common'; +import { mock } from './mock/mock'; import { TaskOngoingDetailStyles } from './TaskOngoingDetail.styles'; import { @@ -80,7 +80,7 @@ const TaskOngoingDetail = ({ ...props }) => { - + {/* */} diff --git a/packages/notifications/CHANGELOG.md b/packages/notifications/CHANGELOG.md index 71ac094fc..9d53dc4cb 100644 --- a/packages/notifications/CHANGELOG.md +++ b/packages/notifications/CHANGELOG.md @@ -1,5 +1,95 @@ # @bubbles-ui/notifications +## 1.2.135 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.135 + - @bubbles-ui/icons@1.2.135 + +## 1.2.134 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.134 + - @bubbles-ui/icons@1.2.134 + +## 1.2.133 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.133 + - @bubbles-ui/icons@1.2.133 + +## 1.2.132 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.132 + - @bubbles-ui/icons@1.2.132 + +## 1.2.131 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.131 + - @bubbles-ui/icons@1.2.131 + +## 1.2.130 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.130 + - @bubbles-ui/icons@1.2.130 + +## 1.2.129 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.129 + - @bubbles-ui/icons@1.2.129 + +## 1.2.128 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.128 + - @bubbles-ui/icons@1.2.128 + +## 1.2.127 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.127 + - @bubbles-ui/icons@1.2.127 + +## 1.2.126 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.126 + - @bubbles-ui/icons@1.2.126 + ## 1.2.125 ### Patch Changes diff --git a/packages/notifications/package.json b/packages/notifications/package.json index 9062e51c1..e7b148a9e 100644 --- a/packages/notifications/package.json +++ b/packages/notifications/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/notifications", - "version": "1.2.125", + "version": "1.2.135", "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.", "main": "lib/index.js", "module": "es/index.js", @@ -52,8 +52,8 @@ "react-transition-group": "^4.4.2" }, "peerDependencies": { - "@bubbles-ui/components": "^1.2.125", - "@bubbles-ui/icons": "^1.2.125", + "@bubbles-ui/components": "^1.2.135", + "@bubbles-ui/icons": "^1.2.135", "@mantine/core": "5.2.4", "@mantine/hooks": "5.2.4", "react": "^17.0.1",