diff --git a/package.json b/package.json index 701a0be443..7a98ef0248 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "test:ci": "nyc --silent lerna run --parallel test:ci" }, "engines": { - "node": ">=16.18" + "node": ">=20.5" }, "nyc": { "exclude": [ diff --git a/packages/app-project/.babelrc b/packages/app-project/.babelrc index 2642a86e38..75d7023a0c 100644 --- a/packages/app-project/.babelrc +++ b/packages/app-project/.babelrc @@ -2,6 +2,7 @@ "env": { "test": { "plugins": [ + "babel-plugin-styled-components", [ "babel-plugin-webpack-alias", { "config": "./webpack.config.test.js" } ] ], "presets": ["next/babel"] diff --git a/packages/app-project/package.json b/packages/app-project/package.json index 0d937e516f..4e952e6e88 100644 --- a/packages/app-project/package.json +++ b/packages/app-project/package.json @@ -49,7 +49,7 @@ "react-dom": "~18.2.0", "react-i18next": "~14.1.3", "react-resize-detector": "~9.1.0", - "styled-components": "~5.3.3", + "styled-components": "~6.1.13", "swr": "~2.2.0", "validator": "~13.12.0" }, diff --git a/packages/app-project/src/helpers/theme/README.md b/packages/app-project/src/helpers/theme/README.md index ab4e92bef4..c95c71fd58 100644 --- a/packages/app-project/src/helpers/theme/README.md +++ b/packages/app-project/src/helpers/theme/README.md @@ -1,5 +1,3 @@ # Theme Creates a Grommet theme by performing a deep merge of the Grommet base theme with the Zooniverse custom Grommet theme. - -This was originally done in the `GrommetWrapper` theme, but was moved here so it can be reused with `@artsy/fresnel` to extract the breakpoints for responsive sizing. diff --git a/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/Background/Background.js b/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/Background/Background.js index ae9e288377..42de21502a 100644 --- a/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/Background/Background.js +++ b/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/Background/Background.js @@ -1,45 +1,30 @@ -import { number, shape, string } from 'prop-types' -import styled, { css, withTheme } from 'styled-components' +import { string } from 'prop-types' +import styled from 'styled-components' const Img = styled.img` - height: 230px; - min-height: inherit; - object-fit: cover; - width: 100%; + height: 230px; + min-height: inherit; + object-fit: cover; + width: 100%; - ${props => css` - @media (min-width: ${props.breakpoint}px) { - flex: 1 1 auto; - object-position: 0 50%; - } - `} + // Grommet small breakpoint + @media (width > 769px) { + flex: 1 1 auto; + object-position: 0 50%; + } ` -function Background ({ - backgroundSrc, - theme -}) { - const breakpoint = theme.global.breakpoints.small.value +function Background ({ backgroundSrc }) { return ( ) } Background.propTypes = { - backgroundSrc: string.isRequired, - theme: shape({ - global: shape({ - breakpoints: shape({ - small: shape({ - value: number.isRequired - }).isRequired - }).isRequired - }).isRequired - }).isRequired + backgroundSrc: string.isRequired } -export default withTheme(Background) +export default Background diff --git a/packages/app-root/next.config.mjs b/packages/app-root/next.config.mjs index 3b85835259..e920901115 100644 --- a/packages/app-root/next.config.mjs +++ b/packages/app-root/next.config.mjs @@ -16,6 +16,9 @@ function commitID() { const COMMIT_ID = process.env.COMMIT_ID || commitID() const nextConfig = { + compiler: { + styledComponents: true + }, compress: false, env: { COMMIT_ID diff --git a/packages/app-root/package.json b/packages/app-root/package.json index cefbf327ff..0b8c7815d2 100644 --- a/packages/app-root/package.json +++ b/packages/app-root/package.json @@ -32,7 +32,7 @@ "panoptes-client": "~5.6.0", "react": "~18.2.0", "react-dom": "~18.2.0", - "styled-components": "~5.3.10", + "styled-components": "~6.1.13", "swr": "~2.2.4" }, "devDependencies": { diff --git a/packages/app-root/src/app/style-registry.js b/packages/app-root/src/app/style-registry.js index eb4a9645bb..ae849a4a1e 100644 --- a/packages/app-root/src/app/style-registry.js +++ b/packages/app-root/src/app/style-registry.js @@ -22,7 +22,7 @@ export default function StyledComponentsRegistry({ if (typeof window !== 'undefined') return <>{children} return ( - + {children} ) diff --git a/packages/lib-classifier/.babelrc b/packages/lib-classifier/.babelrc index 3c4735c135..2e55aac328 100644 --- a/packages/lib-classifier/.babelrc +++ b/packages/lib-classifier/.babelrc @@ -1,5 +1,6 @@ { "plugins": [ + "babel-plugin-styled-components", ["@babel/plugin-transform-runtime", { "helpers": false }], diff --git a/packages/lib-classifier/package.json b/packages/lib-classifier/package.json index b982e62608..47fbfc4f85 100644 --- a/packages/lib-classifier/package.json +++ b/packages/lib-classifier/package.json @@ -59,7 +59,7 @@ "grommet-icons": "~4.x.x", "react": ">= 16.14", "react-dom": ">= 16.14", - "styled-components": "~5.x.x" + "styled-components": "6.x.x" }, "devDependencies": { "@babel/cli": "~7.25.9", @@ -84,6 +84,7 @@ "@zooniverse/standard": "~2.0.0", "babel-loader": "~9.2.1", "babel-plugin-module-resolver": "~5.0.0", + "babel-plugin-styled-components": "~2.1.4", "babel-plugin-transform-imports": "~2.0.0", "chai": "~4.5.0", "chai-dom": "~1.12.0", @@ -95,7 +96,6 @@ "grommet": "~2.41.0", "grommet-icons": "~4.12.0", "html-webpack-plugin": "~5.6.0", - "ignore-styles": "~5.0.1", "jsdom": "~25.0.1", "million": "~3.1.11", "mobx": "~6.12.0", @@ -118,7 +118,6 @@ "storybook": "~7.6.11", "storybook-react-i18next": "~2.0.1", "style-loader": "~4.0.0", - "styled-components": "~5.3.3", "superagent": "~8.1.0", "webpack": "~5.96.1", "webpack-cli": "~5.1.0", diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/components/DrawingToolMarks/DrawingToolMarks.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/components/DrawingToolMarks/DrawingToolMarks.spec.js index 6b4763faa2..d8f522470f 100644 --- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/components/DrawingToolMarks/DrawingToolMarks.spec.js +++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/components/DrawingToolMarks/DrawingToolMarks.spec.js @@ -1,5 +1,8 @@ import { mount, shallow } from 'enzyme' import sinon from 'sinon' +import { Grommet } from 'grommet' +import zooTheme from '@zooniverse/grommet-theme' + import { PointTool, LineTool } from '@plugins/drawingTools/models/tools' import { Mark } from '@plugins/drawingTools/components' import SVGContext from '@plugins/drawingTools/shared/SVGContext' @@ -87,16 +90,18 @@ describe('Components > DrawingToolMarks', function () { onDelete = sinon.stub() onFinish = sinon.stub() const wrapper = mount( - - - - - + + + + + + + ) dragEnd = wrapper.find(Mark).at(1).prop('dragEnd') }) diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/components/PreviousMarks/PreviousMarks.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/components/PreviousMarks/PreviousMarks.spec.js index 634d3b976f..19dc7f82bd 100644 --- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/components/PreviousMarks/PreviousMarks.spec.js +++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/components/PreviousMarks/PreviousMarks.spec.js @@ -1,5 +1,7 @@ import { render, waitFor } from '@testing-library/react' import { Provider } from 'mobx-react' +import { Grommet } from 'grommet' +import zooTheme from '@zooniverse/grommet-theme' import SHOWN_MARKS from '@helpers/shownMarks' import { WorkflowFactory } from '@test/factories' @@ -60,11 +62,13 @@ describe('Component > PreviousMarks', function () { function withStore(store) { return function Wrapper({ children }) { return ( - - - {children} - - + + + + {children} + + + ) } } diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/components/TranscribedLines/TranscribedLines.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/components/TranscribedLines/TranscribedLines.spec.js index 0aaba43ac1..25fec1b9ee 100644 --- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/components/TranscribedLines/TranscribedLines.spec.js +++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/components/TranscribedLines/TranscribedLines.spec.js @@ -1,4 +1,3 @@ -import { within } from '@testing-library/dom' import { render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import zooTheme from '@zooniverse/grommet-theme' @@ -10,16 +9,12 @@ import sinon from 'sinon' import SHOWN_MARKS from '@helpers/shownMarks' import * as tasks from '@plugins/tasks' -import RootStore from '@store' -import TranscriptionReductions from '@store/subjects/Subject/TranscriptionReductions' import { reducedSubject } from '@store/subjects/Subject/TranscriptionReductions/mocks' -import { WorkflowFactory, SubjectFactory } from '@test/factories' -import mockStore, { defaultClient } from '@test/mockStore/mockStore.js' +import { WorkflowFactory } from '@test/factories' +import mockStore from '@test/mockStore/mockStore.js' import TranscribedLines from '.' -import { expect } from 'chai' - describe('Component > TranscribedLines', function () { function withStore(store) { return function Wrapper({ children }) { diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SVGComponents/VisXZoom/VisXZoom.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SVGComponents/VisXZoom/VisXZoom.spec.js index 13cd3c3e75..cd3a7489ad 100644 --- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SVGComponents/VisXZoom/VisXZoom.spec.js +++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SVGComponents/VisXZoom/VisXZoom.spec.js @@ -2,6 +2,8 @@ import { mount } from 'enzyme' import { Provider } from 'mobx-react' import sinon from 'sinon' import { Zoom } from '@visx/zoom' +import { Grommet } from 'grommet' +import zooTheme from '@zooniverse/grommet-theme' import mockStore from '@test/mockStore' import { @@ -36,31 +38,35 @@ describe('Component > VisXZoom', function () { it('should render without crashing', function () { const wrapper = mount( - - - - ) - expect(wrapper).to.be.ok() - }) - - describe('instantiation', function () { - it('should call props.setOnZoom callback', function () { - const setOnZoomSpy = sinon.spy() - mount( + + + ) + expect(wrapper).to.be.ok() + }) + + describe('instantiation', function () { + it('should call props.setOnZoom callback', function () { + const setOnZoomSpy = sinon.spy() + mount( + + + + + ) expect(setOnZoomSpy).to.have.been.calledOnce() }) @@ -77,15 +83,17 @@ describe('Component > VisXZoom', function () { } const wrapper = mount( - - - + + + + + ) expect(wrapper.find(Zoom).props().scaleXMin).to.equal(zoomConfiguration.minZoom) @@ -96,20 +104,32 @@ describe('Component > VisXZoom', function () { it('should set the height and width using props', function () { const wrapper = mount( - - - + + + + + ) expect(wrapper.find(Zoom).props().height).to.equal(height) expect(wrapper.find(Zoom).props().width).to.equal(width) }) it('should set the left and top position using props', function () { + function StoreAndGrommet({ children }) { + return ( + + + {children} + + + ) + } + const wrapper = mount( VisXZoom', function () { zoomingComponent={StubComponent} />, { - wrappingComponent: Provider, - wrappingComponentProps: { classifierStore: store } + wrappingComponent: StoreAndGrommet } ) expect(wrapper.find(Zoom).props().left).to.equal(0) @@ -132,15 +151,17 @@ describe('Component > VisXZoom', function () { it('should pass along the constrain function set in props', function () { const constrainSpy = sinon.spy() const wrapper = mount( - - - + + + + + ) expect(wrapper.find(Zoom).props().constrain).to.equal(constrainSpy) }) @@ -149,14 +170,16 @@ describe('Component > VisXZoom', function () { describe('zooming component', function () { it('should render the zooming component', function () { const wrapper = mount( - - - + + + + + ) expect(wrapper.find(StubComponent)).to.have.lengthOf(1) @@ -164,14 +187,16 @@ describe('Component > VisXZoom', function () { it('should pass the Zoom child function return value transformMatrix as a prop', function () { const wrapper = mount( - - - + + + + + ) const { transformMatrix } = wrapper.find(StubComponent).props() @@ -190,14 +215,16 @@ describe('Component > VisXZoom', function () { describe('ZoomEventLayer', function () { it('should render ZoomEventLayer as a child', function () { const wrapper = mount( - - - + + + + + ) expect(wrapper.find(StubComponent).find(ZoomEventLayer)).to.have.lengthOf(1) @@ -205,14 +232,16 @@ describe('Component > VisXZoom', function () { it('should set the height and width by props', function () { const wrapper = mount( - - - + + + + + ) const zoomEventLayer = wrapper.find(StubComponent).find(ZoomEventLayer) @@ -223,8 +252,6 @@ describe('Component > VisXZoom', function () { }) describe('zooming', function () { - let zoomCallback - function testNoZoom ({ currentTransformMatrix, previousTransformMatrix }) { expect(currentTransformMatrix).to.deep.equal(previousTransformMatrix) } @@ -241,14 +268,16 @@ describe('Component > VisXZoom', function () { it('should not scale the transform matrix on mouse wheel', function () { const wrapper = mount( - - - + + + + + ) testEventPrevention({ wrapper, type: 'wheel' }) @@ -256,28 +285,32 @@ describe('Component > VisXZoom', function () { it('should not scale the transform matrix on double click', function () { const wrapper = mount( - - - + + + + + ) testEventPrevention({ wrapper, type: 'dblclick', event: { preventDefault: sinon.spy() } }) }) it('should not scale the transform matrix on key down', function () { const wrapper = mount( - - - + + + + + ) testEventPrevention({ wrapper, type: 'keydown' }) }) @@ -320,15 +353,17 @@ describe('Component > VisXZoom', function () { } const wrapper = mount( - - - + + + + + ) const { initialTransformMatrix, transformMatrix } = wrapper.find(StubComponent).props() const zoomTypes = ['zoomin', 'zoomout', 'zoomto'] @@ -368,15 +403,17 @@ describe('Component > VisXZoom', function () { it('should define overflow styles on the document body on pointer enter and on pointer leave', function () { const wrapper = mount( - - - + + + + + ) expect(document.body.style.overflow).to.be.empty() @@ -388,15 +425,17 @@ describe('Component > VisXZoom', function () { it('should scale in the transform matrix on mouse wheel', function () { const wrapper = mount( - - - + + + + + ) const { initialTransformMatrix, transformMatrix } = wrapper.find(StubComponent).props() @@ -407,15 +446,17 @@ describe('Component > VisXZoom', function () { it('should scale out the transform matrix on mouse wheel', function () { const wrapper = mount( - - - + + + + + ) const { initialTransformMatrix, transformMatrix } = wrapper.find(StubComponent).props() expect(transformMatrix).to.deep.equal(initialTransformMatrix) @@ -444,15 +485,17 @@ describe('Component > VisXZoom', function () { it('should scale in the transform matrix on double click', function () { const wrapper = mount( - - - + + + + + ) const { initialTransformMatrix, transformMatrix } = wrapper.find(StubComponent).props() expect(transformMatrix).to.deep.equal(initialTransformMatrix) @@ -474,16 +517,18 @@ describe('Component > VisXZoom', function () { } const wrapper = mount( - - - + + + + + ) const { initialTransformMatrix, transformMatrix } = wrapper.find(StubComponent).props() @@ -502,16 +547,18 @@ describe('Component > VisXZoom', function () { } const wrapper = mount( - - - + + + + + ) const { initialTransformMatrix, transformMatrix } = wrapper.find(StubComponent).props() expect(transformMatrix).to.deep.equal(initialTransformMatrix) @@ -536,16 +583,18 @@ describe('Component > VisXZoom', function () { } const wrapper = mount( - - - + + + + + ) const { initialTransformMatrix, transformMatrix } = wrapper.find(StubComponent).props() expect(transformMatrix).to.deep.equal(initialTransformMatrix) @@ -575,16 +624,18 @@ describe('Component > VisXZoom', function () { } const wrapper = mount( - - - + + + + + ) const { initialTransformMatrix, transformMatrix } = wrapper.find(StubComponent).props() expect(transformMatrix).to.deep.equal(initialTransformMatrix) @@ -636,16 +687,18 @@ describe('Component > VisXZoom', function () { it('should scale transform matrix when zooming in', function () { const wrapper = mount( - - - + + + + + ) testZoomCallback({ wrapper, zoomType: 'zoomin' }) @@ -653,16 +706,18 @@ describe('Component > VisXZoom', function () { it('should scale transform matrix when zooming out', function () { const wrapper = mount( - - - + + + + + ) // zoom in first zoomCallback('zoomin') @@ -675,16 +730,18 @@ describe('Component > VisXZoom', function () { it('should scale transform matrix when resetting zoom', function () { const wrapper = mount( - - - + + + + + ) // zooming in first @@ -699,15 +756,17 @@ describe('Component > VisXZoom', function () { describe('when panning is disabled', function () { it('should not translate the SVG position', function () { const wrapper = mount( - - + + + + ) const events = ['keydown', 'mousedown', 'mouseup', 'mousemove', 'mouseleave'] @@ -726,16 +785,18 @@ describe('Component > VisXZoom', function () { describe('when panning is enabled', function () { it('should translate the SVG position using mouse events', function () { const wrapper = mount( - - - + + + + + ) const eventLayer = wrapper.find(ZoomEventLayer) @@ -778,17 +839,19 @@ describe('Component > VisXZoom', function () { let wrapper beforeEach(function () { wrapper = mount( - - - + + + + + ) }) @@ -907,17 +970,19 @@ describe('Component > VisXZoom', function () { zoomOutValue: 0.8 } const wrapper = mount( - - - + + + + + ) const { transformMatrix, initialTransformMatrix } = wrapper.find(StubComponent).props() expect(transformMatrix).to.deep.equal(initialTransformMatrix) @@ -951,17 +1016,19 @@ describe('Component > VisXZoom', function () { zoomOutValue: 0.8 } const wrapper = mount( - - - + + + + + ) const { transformMatrix, initialTransformMatrix } = wrapper.find(StubComponent).props() expect(transformMatrix).to.deep.equal(initialTransformMatrix) diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SVGComponents/ZoomEventLayer/ZoomEventLayer.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SVGComponents/ZoomEventLayer/ZoomEventLayer.spec.js index 6ba5a106fc..8b2c8acdf1 100644 --- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SVGComponents/ZoomEventLayer/ZoomEventLayer.spec.js +++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SVGComponents/ZoomEventLayer/ZoomEventLayer.spec.js @@ -1,5 +1,8 @@ -import { shallow } from 'enzyme' +import { mount } from 'enzyme' import sinon from 'sinon' +import { Grommet } from 'grommet' +import zooTheme from '@zooniverse/grommet-theme' + import ZoomEventLayer from '.' const width = 768 @@ -16,7 +19,7 @@ describe('Component > ZoomEventLayer', function () { onDoubleClickSpy = sinon.spy() onWheelSpy = sinon.spy() - wrapper = shallow( + wrapper = mount( ZoomEventLayer', function () { onWheel={onWheelSpy} height={height} width={width} - /> + />, + { wrappingComponent: Grommet, + wrappingComponentProps: { theme: zooTheme } + } ) }) @@ -45,10 +51,6 @@ describe('Component > ZoomEventLayer', function () { expect(wrapper).to.be.ok() }) - it('should be transparent', function () { - expect(wrapper.props().fill).to.equal('transparent') - }) - it('should be the size of the parent', function () { expect(wrapper.props().height).to.equal(height) expect(wrapper.props().width).to.equal(width) diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/components/ScatterPlot/ScatterPlot.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/components/ScatterPlot/ScatterPlot.spec.js index ae9f74f795..cf222ab380 100644 --- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/components/ScatterPlot/ScatterPlot.spec.js +++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/components/ScatterPlot/ScatterPlot.spec.js @@ -1,4 +1,4 @@ -import { render, screen } from '@testing-library/react' +import { render } from '@testing-library/react' import userEvent from '@testing-library/user-event' import zooTheme from '@zooniverse/grommet-theme' import { Grommet } from 'grommet' diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleImageViewer/SingleImageViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleImageViewer/SingleImageViewer.js index 6829d078a2..5cf940f6af 100644 --- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleImageViewer/SingleImageViewer.js +++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleImageViewer/SingleImageViewer.js @@ -11,8 +11,8 @@ import locationValidator from '../../helpers/locationValidator' const PlaceholderSVG = styled.svg` background: no-repeat center / cover url('https://static.zooniverse.org/www.zooniverse.org/assets/fe-project-subject-placeholder-800x600.png'); touch-action: pinch-zoom; - max-width: ${props => props.maxWidth || '100%'}; - ${props => props.maxHeight && css`max-height: ${props.maxHeight};`} + max-width: ${props => props.$maxWidth || '100%'}; + ${props => props.$maxHeight && css`max-height: ${props.$maxHeight};`} ` const SVGImageCanvas = styled.svg` overflow: visible; @@ -54,8 +54,8 @@ function SingleImageViewer({ > item.index === index) - + if (isThisCellSelected && !toggledValue) { // Remove cell index from annotation values const indexInValue = annotationValue.indexOf(isThisCellSelected) annotationValue.splice(indexInValue, 1) @@ -98,10 +98,10 @@ function SGVGridCell (props) { subject: subjectId, }) } - + if (annotation?.update) annotation.update(annotationValue) } - + // Use an offset to ensure the zoom/scale transform occurs at the centre of // the image, instead of the top-left (0,0) origin point. // This hack is necessary since Safari doesn't support transform-origin to @@ -109,7 +109,7 @@ function SGVGridCell (props) { // transform-origin={`${imageWidth/2}px ${imageHeight/2}px`} const addOriginOffset = `translate(${imageWidth/2}, ${imageHeight/2})` const removeOriginOffset = `translate(${-imageWidth/2}, ${-imageHeight/2})` - + const imageTransform = `${addOriginOffset} scale(${zoom}) ${removeOriginOffset} translate(${panX}, ${panY})` return ( @@ -178,9 +178,9 @@ SGVGridCell.propTypes = { image: PropTypes.object, index: PropTypes.number, subjectId: PropTypes.string, - + dragMove: PropTypes.func, - + cellWidth: PropTypes.number, cellHeight: PropTypes.number, cellStyle: PropTypes.object, @@ -203,9 +203,9 @@ SGVGridCell.defaultProps = { image: undefined, index: 0, subjectId: '', - + dragMove: () => {}, - + cellWidth: 200, cellHeight: 200, cellStyle: {}, diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SubjectGroupViewer/components/SGVGridCell/SGVGridCell.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SubjectGroupViewer/components/SGVGridCell/SGVGridCell.spec.js index 3922431934..0b39e7d90c 100644 --- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SubjectGroupViewer/components/SGVGridCell/SGVGridCell.spec.js +++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SubjectGroupViewer/components/SGVGridCell/SGVGridCell.spec.js @@ -1,7 +1,7 @@ import { shallow } from 'enzyme' import { getSnapshot } from 'mobx-state-tree' -import SGVGridCell from './SGVGridCell' +import SGVGridCell, { DraggableImage } from './SGVGridCell' import { default as Task } from '@plugins/tasks/subjectGroupComparison' const exampleImage = { @@ -17,7 +17,7 @@ const gridColumns = 3 describe('Component > SubjectGroupViewer > SGVGridCell', function () { let wrapper, annotation - + const task = Task.TaskModel.create({ required: true, strings: { @@ -26,16 +26,16 @@ describe('Component > SubjectGroupViewer > SGVGridCell', function () { taskKey: 'init', type: 'subjectGroupComparison' }) - + beforeEach(function () { annotation = task.defaultAnnotation() - + wrapper = shallow( {}} cellWidth={cellWidth} cellHeight={cellHeight} @@ -48,11 +48,11 @@ describe('Component > SubjectGroupViewer > SGVGridCell', function () { }} gridRows={gridRows} gridColumns={gridColumns} - + panX={0} panY={0} zoom={1} - + annotation={annotation} annotationMode={true} cellAnnotated={false} @@ -63,29 +63,29 @@ describe('Component > SubjectGroupViewer > SGVGridCell', function () { it('should render without crashing', function () { expect(wrapper).to.be.ok() }) - + it('should render an image', function () { - const image = wrapper.find('Styled(draggable(image))') + const image = wrapper.find(DraggableImage) expect(image).to.have.lengthOf(1) expect(image.prop('href')).to.equal('https://foo.bar/example.png') }) - + describe('with a pan and zoom', function () { beforeEach(function () { wrapper.setProps({ panX: 10, panY: 50, zoom: 1.5 }) }) it('should be transformed', function () { - const transform = wrapper.find('Styled(draggable(image))').prop('transform') + const transform = wrapper.find(DraggableImage).prop('transform') expect(transform).to.have.string('translate(225, 300) scale(1.5) translate(-225, -300) translate(10, 50)') }) }) - + describe('when given an index', function () { const x = 1 const y = 2 - const index = x + y * gridColumns - + const index = x + y * gridColumns + beforeEach(function () { wrapper.setProps({ index: index }) }) @@ -95,21 +95,21 @@ describe('Component > SubjectGroupViewer > SGVGridCell', function () { expect(transform).to.have.string(`translate(800, 1200)`) }) }) - + describe('when clicked', function () { - + it('should have no reaction if not in annotation mode', function () { wrapper.setProps({ annotationMode: false }) const clickableBit = wrapper.find({tabIndex: 0}) expect(clickableBit).to.be.empty() }) - + it('should add the cell to the annotations (if in annotation mode, and if cell wasn\'t added already)', function () { wrapper.setProps({ annotationMode: true }) annotation.update([ { index: 99, subject: '1099' } ]) - + const clickableBit = wrapper.find({tabIndex: 0}) clickableBit.simulate('click', { preventDefault: () => {} }) expect(annotation.value.length).to.equal(2) diff --git a/packages/lib-classifier/src/plugins/drawingTools/components/Mark/Mark.js b/packages/lib-classifier/src/plugins/drawingTools/components/Mark/Mark.js index 407549dd59..49e9298e23 100644 --- a/packages/lib-classifier/src/plugins/drawingTools/components/Mark/Mark.js +++ b/packages/lib-classifier/src/plugins/drawingTools/components/Mark/Mark.js @@ -45,12 +45,6 @@ function defaultHandler() { return true } -const defaultTheme = { - global: { - colors: {} - } -} - const Mark = forwardRef(function Mark( { children, diff --git a/packages/lib-classifier/src/plugins/drawingTools/components/Mark/Mark.spec.js b/packages/lib-classifier/src/plugins/drawingTools/components/Mark/Mark.spec.js index b1eee18224..40333a62b2 100644 --- a/packages/lib-classifier/src/plugins/drawingTools/components/Mark/Mark.spec.js +++ b/packages/lib-classifier/src/plugins/drawingTools/components/Mark/Mark.spec.js @@ -1,12 +1,24 @@ -import { render, screen, waitFor } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { expect } from 'chai' import { when } from 'mobx' import sinon from 'sinon' +import { Grommet } from 'grommet' +import zooTheme from '@zooniverse/grommet-theme' import { EllipseTool, PointTool } from '@plugins/drawingTools/models/tools' import { Ellipse, Mark, Point } from '@plugins/drawingTools/components' describe('Drawing tools > Mark', function () { + function withGrommetWrapper() { + return function Wrapper({ children }) { + return ( + + {children} + + ) + } + } + const pointTool = PointTool.create({ type: 'point', tasks: [{ @@ -19,7 +31,6 @@ describe('Drawing tools > Mark', function () { const onDelete = sinon.stub() const onFinish = sinon.stub() const onSelect = sinon.stub() - let wrapper let svgPoint describe('default behaviour', function () { @@ -40,7 +51,7 @@ describe('Drawing tools > Mark', function () { > - + , { wrapper: withGrommetWrapper()} ) svgPoint = screen.getByLabelText('Point 1') }) @@ -74,7 +85,7 @@ describe('Drawing tools > Mark', function () { > - + , { wrapper: withGrommetWrapper() } ) await user.tab() }) @@ -104,7 +115,7 @@ describe('Drawing tools > Mark', function () { > - + , { wrapper: withGrommetWrapper() } ) await user.tab() await user.keyboard('{Backspace}') @@ -138,7 +149,7 @@ describe('Drawing tools > Mark', function () { > - + , { wrapper: withGrommetWrapper() } ) point.setSubTaskVisibility(false) await user.keyboard('{Enter}') @@ -177,7 +188,7 @@ describe('Drawing tools > Mark', function () { > - + , { wrapper: withGrommetWrapper() } ) point.setSubTaskVisibility(false) await user.keyboard('{ }') @@ -216,7 +227,7 @@ describe('Drawing tools > Mark', function () { > - + , { wrapper: withGrommetWrapper() } ) point.setSubTaskVisibility(false) await user.tab() @@ -252,7 +263,7 @@ describe('Drawing tools > Mark', function () { > - + , { wrapper: withGrommetWrapper() } ) svgPoint = screen.getByLabelText('Point 1') }) @@ -289,7 +300,7 @@ describe('Drawing tools > Mark', function () { > - + , { wrapper: withGrommetWrapper() } ) svgPoint = screen.getByLabelText('Point 1') }) @@ -324,7 +335,7 @@ describe('Drawing tools > Mark', function () { > - + , { wrapper: withGrommetWrapper() } ) svgEllipse = screen.getByLabelText('Ellipse 1') }) @@ -338,18 +349,20 @@ describe('Drawing tools > Mark', function () { describe('when the active mark is finished', function () { function markWrapper(mark) { return ( - - - - - + + + + + + + ) } @@ -376,18 +389,20 @@ describe('Drawing tools > Mark', function () { describe('when subtasks are closed', function () { function markWrapper(mark) { return ( - - - - - + + + + + + + ) } @@ -435,7 +450,7 @@ describe('Drawing tools > Mark', function () { > - + , { wrapper: withGrommetWrapper() } ) }) diff --git a/packages/lib-classifier/test/.mocharc.json b/packages/lib-classifier/test/.mocharc.json index 985533bfee..6ce5300cf7 100644 --- a/packages/lib-classifier/test/.mocharc.json +++ b/packages/lib-classifier/test/.mocharc.json @@ -6,11 +6,12 @@ "require": [ "@babel/register", "chai/register-expect.js", - "chai/register-should.js", - "ignore-styles", - "./test/setup.js", - "./test/enzyme-config.js" + "chai/register-should.js" ], "reporter": "spec", - "ui": "bdd" -} \ No newline at end of file + "ui": "bdd", + "file": [ + "./test/setup.js", + "./test/enzyme-config.js" + ] +} diff --git a/packages/lib-content/package.json b/packages/lib-content/package.json index 6a4f87cedc..7a60632e70 100644 --- a/packages/lib-content/package.json +++ b/packages/lib-content/package.json @@ -46,7 +46,7 @@ "next": "~13.5.5", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0", - "styled-components": "5.x.x" + "styled-components": "6.x.x" }, "devDependencies": { "@babel/preset-env": "~7.26.0", diff --git a/packages/lib-content/test/.mocharc.json b/packages/lib-content/test/.mocharc.json index 068e2e5147..495dd1c78a 100644 --- a/packages/lib-content/test/.mocharc.json +++ b/packages/lib-content/test/.mocharc.json @@ -5,8 +5,7 @@ ], "require": [ "@babel/register", - "chai/register-expect.js", - "ignore-styles" + "chai/register-expect.js" ], "reporter": "spec", "ui": "bdd", diff --git a/packages/lib-react-components/package.json b/packages/lib-react-components/package.json index 61f13481e8..34bb16941f 100644 --- a/packages/lib-react-components/package.json +++ b/packages/lib-react-components/package.json @@ -63,7 +63,7 @@ "mobx-state-tree": "~5.x.x", "react": "^16.14.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0", - "styled-components": "5.x.x" + "styled-components": "6.x.x" }, "devDependencies": { "@babel/cli": "~7.25.9", @@ -81,6 +81,7 @@ "@wojtekmaj/enzyme-adapter-react-17": "~0.8.0", "@zooniverse/grommet-theme": "~3.2.0", "@zooniverse/standard": "~2.0.0", + "babel-plugin-styled-components": "~2.1.4", "babel-plugin-transform-imports": "~2.0.0", "chai": "~4.5.0", "chai-dom": "~1.12.0", @@ -99,8 +100,7 @@ "sinon-chai": "~3.7.0", "snazzy": "~9.0.0", "storybook": "~7.6.11", - "storybook-react-i18next": "~2.0.1", - "styled-components": "~5.3.3" + "storybook-react-i18next": "~2.0.1" }, "engines": { "node": ">=20.5" diff --git a/packages/lib-react-components/src/Markdownz/Markdownz.js b/packages/lib-react-components/src/Markdownz/Markdownz.js index c8f1ce375d..4104e69696 100644 --- a/packages/lib-react-components/src/Markdownz/Markdownz.js +++ b/packages/lib-react-components/src/Markdownz/Markdownz.js @@ -1,5 +1,4 @@ -import { createElement, Fragment, useCallback } from 'react' -import PropTypes from 'prop-types' +import { bool, object, string } from 'prop-types' import styled from 'styled-components' import { Anchor, @@ -111,7 +110,7 @@ function Markdownz({ project: { slug: projectSlug }, settings }) - + return ( <> {markdownChildren} @@ -120,12 +119,12 @@ function Markdownz({ } Markdownz.propTypes = { - baseURI: PropTypes.string, - children: PropTypes.string.isRequired, - components: PropTypes.object, - inline: PropTypes.bool, - projectSlug: PropTypes.string, - settings: PropTypes.object + baseURI: string, + children: string.isRequired, + components: object, + inline: bool, + projectSlug: string, + settings: object } export { Markdownz } diff --git a/packages/lib-react-components/src/Markdownz/Markdownz.stories.js b/packages/lib-react-components/src/Markdownz/Markdownz.stories.js index 8708271529..7a4d755180 100644 --- a/packages/lib-react-components/src/Markdownz/Markdownz.stories.js +++ b/packages/lib-react-components/src/Markdownz/Markdownz.stories.js @@ -1,5 +1,4 @@ import { Grid, Box, TableRow } from 'grommet' -import styled from 'styled-components' import Markdownz from './Markdownz' import readme from './README.md' @@ -7,11 +6,6 @@ import markdownExample from '../../.storybook/lib/example.md' import { examples } from './helpers/storybookExamples' import markdownInGrid from './markdownGridExample.md' -const TableRowWithBorder = styled(TableRow)` - border-top: solid thin black; - border-bottom: solid thin black; -` - function MarkdownTableRow({ label, content, ...props }) { return ( @@ -57,7 +51,9 @@ function MarkdownExamplesTable(props) { - {examples.map(rowProps => )} + {examples.map((rowProps, id) => ( + + ))} ) @@ -95,10 +91,16 @@ export const InProjectContext = () => ( export const WithCustomComponents = () => ( <> - - - {markdownExample} - + ( + + {children} + + ) + }} + /> + {markdownExample} ) diff --git a/packages/lib-react-components/src/Media/components/Text/Text.spec.js b/packages/lib-react-components/src/Media/components/Text/Text.spec.js index fcd618826f..4964449e40 100644 --- a/packages/lib-react-components/src/Media/components/Text/Text.spec.js +++ b/packages/lib-react-components/src/Media/components/Text/Text.spec.js @@ -1,4 +1,6 @@ -import { render, screen } from '@testing-library/react' +import { render } from '@testing-library/react' +import zooTheme from '@zooniverse/grommet-theme' +import { Grommet } from 'grommet' import Text from './Text.js' @@ -6,27 +8,43 @@ const src = 'https://panoptes-uploads.zooniverse.org/subject_location/f5506d1c-a describe('Text', function () { it('should render without crashing', function () { - render() + render( + + + + ) const text = document.querySelector('pre') expect(text).to.be.ok() }) it('should use alt text to describe the text.', function () { - const alt = "A text" - render() + const alt = 'A text' + render( + + + + ) const textSection = document.querySelector('section') expect(textSection.getAttribute('aria-label')).to.equal(alt) }) it('should render empty if loading', function () { - render() + render( + + + + ) const text = document.querySelector('pre') expect(text.textContent).to.equal('') }) describe('height and width', function () { it('should be set if specified', function () { - render() + render( + + + + ) const textSection = document.querySelector('section') const { maxHeight, maxWidth } = window.getComputedStyle(textSection) expect(maxHeight).to.equal('300px') @@ -34,7 +52,11 @@ describe('Text', function () { }) it('should have a 200px maxHeight by default', function () { - render() + render( + + + + ) const textSection = document.querySelector('section') const { maxHeight } = window.getComputedStyle(textSection) expect(maxHeight).to.equal('200px') diff --git a/packages/lib-react-components/test/.mocharc.json b/packages/lib-react-components/test/.mocharc.json index 68bb9686b2..495dd1c78a 100644 --- a/packages/lib-react-components/test/.mocharc.json +++ b/packages/lib-react-components/test/.mocharc.json @@ -5,12 +5,11 @@ ], "require": [ "@babel/register", - "chai/register-expect.js", - "ignore-styles" + "chai/register-expect.js" ], "reporter": "spec", "ui": "bdd", "file": [ "./test/setup.js" ] -} \ No newline at end of file +} diff --git a/packages/lib-subject-viewers/test/.mocharc.json b/packages/lib-subject-viewers/test/.mocharc.json index 068e2e5147..495dd1c78a 100644 --- a/packages/lib-subject-viewers/test/.mocharc.json +++ b/packages/lib-subject-viewers/test/.mocharc.json @@ -5,8 +5,7 @@ ], "require": [ "@babel/register", - "chai/register-expect.js", - "ignore-styles" + "chai/register-expect.js" ], "reporter": "spec", "ui": "bdd", diff --git a/packages/lib-user/.babelrc b/packages/lib-user/.babelrc index faacca1b41..53aef03f5e 100644 --- a/packages/lib-user/.babelrc +++ b/packages/lib-user/.babelrc @@ -1,5 +1,6 @@ { "plugins": [ + "babel-plugin-styled-components", ["@babel/plugin-transform-runtime", { "helpers": false }], diff --git a/packages/lib-user/package.json b/packages/lib-user/package.json index 40bea052e3..6006d0322b 100644 --- a/packages/lib-user/package.json +++ b/packages/lib-user/package.json @@ -47,7 +47,7 @@ "next": "~14.2.7", "react": "~18.2.0", "react-dom": "~18.2.0", - "styled-components": "~5.x.x" + "styled-components": "6.x.x" }, "devDependencies": { "@babel/cli": "~7.25.9", @@ -68,6 +68,7 @@ "@zooniverse/react-components": "~1.13.0", "babel-loader": "~9.2.1", "babel-plugin-module-resolver": "~5.0.0", + "babel-plugin-styled-components": "~2.1.4", "babel-plugin-transform-imports": "~2.0.0", "chai": "~4.5.0", "chai-dom": "~1.12.0", @@ -76,7 +77,6 @@ "eslint-plugin-jsx-a11y": "~6.10.1", "eslint-plugin-react": "~7.37.2", "html-webpack-plugin": "~5.6.0", - "ignore-styles": "~5.0.1", "jsdom": "~25.0.1", "mocha": "~10.8.2", "nock": "~13.5.4", diff --git a/packages/lib-user/test/.mocharc.json b/packages/lib-user/test/.mocharc.json index 68bb9686b2..495dd1c78a 100644 --- a/packages/lib-user/test/.mocharc.json +++ b/packages/lib-user/test/.mocharc.json @@ -5,12 +5,11 @@ ], "require": [ "@babel/register", - "chai/register-expect.js", - "ignore-styles" + "chai/register-expect.js" ], "reporter": "spec", "ui": "bdd", "file": [ "./test/setup.js" ] -} \ No newline at end of file +} diff --git a/yarn.lock b/yarn.lock index aa0e0f773d..5ae46a4b47 100644 --- a/yarn.lock +++ b/yarn.lock @@ -165,7 +165,7 @@ eslint-visitor-keys "^2.1.0" semver "^6.3.1" -"@babel/generator@^7.23.0", "@babel/generator@^7.23.6", "@babel/generator@^7.24.5": +"@babel/generator@^7.23.0", "@babel/generator@^7.24.5": version "7.24.5" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.24.5.tgz#e5afc068f932f05616b66713e28d0f04e99daeb3" integrity sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA== @@ -206,13 +206,6 @@ "@jridgewell/trace-mapping" "^0.3.25" jsesc "^3.0.2" -"@babel/helper-annotate-as-pure@^7.16.0": - version "7.18.6" - resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz" - integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA== - dependencies: - "@babel/types" "^7.18.6" - "@babel/helper-annotate-as-pure@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882" @@ -338,7 +331,7 @@ "@babel/traverse" "^7.25.9" "@babel/types" "^7.25.9" -"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.24.7", "@babel/helper-module-imports@^7.25.7", "@babel/helper-module-imports@^7.25.9": +"@babel/helper-module-imports@^7.22.5", "@babel/helper-module-imports@^7.24.7", "@babel/helper-module-imports@^7.25.7", "@babel/helper-module-imports@^7.25.9": version "7.25.9" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715" integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw== @@ -460,7 +453,7 @@ "@babel/traverse" "^7.25.9" "@babel/types" "^7.25.9" -"@babel/helper-split-export-declaration@^7.22.6", "@babel/helper-split-export-declaration@^7.24.5": +"@babel/helper-split-export-declaration@^7.24.5": version "7.24.5" resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.5.tgz#b9a67f06a46b0b339323617c8c6213b9055a78b6" integrity sha512-5CHncttXohrHk8GWOFCcCl4oRD9fKosWlIRgWm4ql9VYioKm52Mk2xsmoohvm7f3JoiLSM5ZgJuRaf5QZZYd3Q== @@ -575,11 +568,6 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.5.tgz#4a4d5ab4315579e5398a82dcf636ca80c3392790" integrity sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg== -"@babel/parser@^7.23.6": - version "7.23.9" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b" - integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA== - "@babel/parser@^7.23.9", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.2": version "7.26.2" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.2.tgz#fd7b6f487cfea09889557ef5d4eeb9ff9a5abd11" @@ -680,6 +668,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.25.9" +"@babel/plugin-syntax-jsx@^7.22.5", "@babel/plugin-syntax-jsx@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz#a34313a178ea56f1951599b929c1ceacee719290" + integrity sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA== + dependencies: + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/plugin-syntax-jsx@^7.24.1": version "7.24.1" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.1.tgz#3f6ca04b8c841811dbc3c5c5f837934e0d626c10" @@ -687,13 +682,6 @@ dependencies: "@babel/helper-plugin-utils" "^7.24.0" -"@babel/plugin-syntax-jsx@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz#a34313a178ea56f1951599b929c1ceacee719290" - integrity sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA== - dependencies: - "@babel/helper-plugin-utils" "^7.25.9" - "@babel/plugin-syntax-typescript@^7.24.1": version "7.24.1" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.1.tgz#b3bcc51f396d15f3591683f90239de143c076844" @@ -1391,23 +1379,7 @@ debug "^4.3.1" globals "^11.1.0" -"@babel/traverse@^7.4.5": - version "7.23.7" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.7.tgz#9a7bf285c928cb99b5ead19c3b1ce5b310c9c305" - integrity sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg== - dependencies: - "@babel/code-frame" "^7.23.5" - "@babel/generator" "^7.23.6" - "@babel/helper-environment-visitor" "^7.22.20" - "@babel/helper-function-name" "^7.23.0" - "@babel/helper-hoist-variables" "^7.22.5" - "@babel/helper-split-export-declaration" "^7.22.6" - "@babel/parser" "^7.23.6" - "@babel/types" "^7.23.6" - debug "^4.3.1" - globals "^11.1.0" - -"@babel/types@^7.0.0", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.24.0", "@babel/types@^7.24.5", "@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.4", "@babel/types@^7.4", "@babel/types@^7.4.4": +"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.24.0", "@babel/types@^7.24.5", "@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.4", "@babel/types@^7.4", "@babel/types@^7.4.4": version "7.25.4" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.4.tgz#6bcb46c72fdf1012a209d016c07f769e10adcb5f" integrity sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ== @@ -1513,12 +1485,12 @@ dependencies: tslib "^2.4.0" -"@emotion/is-prop-valid@^1.1.0": - version "1.2.0" - resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz" - integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg== +"@emotion/is-prop-valid@1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz#d4175076679c6a26faa92b03bb786f9e52612337" + integrity sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw== dependencies: - "@emotion/memoize" "^0.8.0" + "@emotion/memoize" "^0.8.1" "@emotion/is-prop-valid@^1.2.1": version "1.3.1" @@ -1527,25 +1499,20 @@ dependencies: "@emotion/memoize" "^0.9.0" -"@emotion/memoize@^0.8.0": - version "0.8.0" - resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz" - integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== +"@emotion/memoize@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" + integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== "@emotion/memoize@^0.9.0": version "0.9.0" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102" integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ== -"@emotion/stylis@^0.8.4": - version "0.8.5" - resolved "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz" - integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== - -"@emotion/unitless@^0.7.4": - version "0.7.5" - resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz" - integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== +"@emotion/unitless@0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" + integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ== "@emotion/use-insertion-effect-with-fallbacks@^1.0.0": version "1.0.1" @@ -5342,6 +5309,11 @@ resolved "https://registry.yarnpkg.com/@types/statuses/-/statuses-2.0.5.tgz#f61ab46d5352fd73c863a1ea4e1cef3b0b51ae63" integrity sha512-jmIUGWrAiwu3dZpxntxieC+1n/5c3mjrImkmOSQ2NC5uP6cYO4aAZDdSmRcI5C1oiTmqlZGHC+/NmJrKogbP5A== +"@types/stylis@4.2.5": + version "4.2.5" + resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.5.tgz#1daa6456f40959d06157698a653a9ab0a70281df" + integrity sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw== + "@types/tedious@^4.0.14": version "4.0.14" resolved "https://registry.yarnpkg.com/@types/tedious/-/tedious-4.0.14.tgz#868118e7a67808258c05158e9cad89ca58a2aec1" @@ -6470,21 +6442,16 @@ babel-plugin-polyfill-regenerator@^0.6.1: dependencies: "@babel/helper-define-polyfill-provider" "^0.6.2" -"babel-plugin-styled-components@>= 1.12.0": - version "2.0.7" - resolved "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz" - integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA== +babel-plugin-styled-components@~2.1.4: + version "2.1.4" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz#9a1f37c7f32ef927b4b008b529feb4a2c82b1092" + integrity sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g== dependencies: - "@babel/helper-annotate-as-pure" "^7.16.0" - "@babel/helper-module-imports" "^7.16.0" - babel-plugin-syntax-jsx "^6.18.0" - lodash "^4.17.11" - picomatch "^2.3.0" - -babel-plugin-syntax-jsx@^6.18.0: - version "6.18.0" - resolved "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz" - integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw== + "@babel/helper-annotate-as-pure" "^7.22.5" + "@babel/helper-module-imports" "^7.22.5" + "@babel/plugin-syntax-jsx" "^7.22.5" + lodash "^4.17.21" + picomatch "^2.3.1" babel-plugin-transform-imports@~2.0.0: version "2.0.0" @@ -7852,10 +7819,10 @@ css-select@^5.1.0: domutils "^3.0.1" nth-check "^2.0.1" -css-to-react-native@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz" - integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== +css-to-react-native@3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32" + integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ== dependencies: camelize "^1.0.0" css-color-keywords "^1.0.0" @@ -7886,7 +7853,7 @@ cssstyle@^4.0.1, cssstyle@^4.1.0: dependencies: rrweb-cssom "^0.7.1" -csstype@^3.0.2: +csstype@3.1.3, csstype@^3.0.2: version "3.1.3" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81" integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw== @@ -10919,7 +10886,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -11221,11 +11188,6 @@ ieee754@^1.1.13, ieee754@^1.2.1: resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA== -ignore-styles@~5.0.1: - version "5.0.1" - resolved "https://registry.npmjs.org/ignore-styles/-/ignore-styles-5.0.1.tgz" - integrity sha512-gQQmIznCETPLEzfg1UH4Cs2oRq+HBPl8quroEUNXT8oybEG7/0lqI3dGgDSRry6B9HcCXw3PVkFFS0FF3CMddg== - ignore-walk@^6.0.4: version "6.0.4" resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-6.0.4.tgz#89950be94b4f522225eb63a13c56badb639190e9" @@ -12756,7 +12718,7 @@ lodash.templatesettings@^4.0.0: dependencies: lodash._reinterpolate "^3.0.0" -lodash@^4.17.11, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@~4.17.11, lodash@~4.17.21: +lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@~4.17.11, lodash@~4.17.21: version "4.17.21" resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -15048,7 +15010,7 @@ postcss@8.4.31: picocolors "^1.0.0" source-map-js "^1.0.2" -postcss@^8.2.14, postcss@^8.4.21, postcss@^8.4.33: +postcss@8.4.38, postcss@^8.2.14, postcss@^8.4.21, postcss@^8.4.33: version "8.4.38" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e" integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A== @@ -16531,7 +16493,7 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" -shallowequal@^1.1.0: +shallowequal@1.1.0: version "1.1.0" resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz" integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== @@ -17261,21 +17223,20 @@ style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" -styled-components@~5.3.10, styled-components@~5.3.3: - version "5.3.11" - resolved "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz" - integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw== - dependencies: - "@babel/helper-module-imports" "^7.0.0" - "@babel/traverse" "^7.4.5" - "@emotion/is-prop-valid" "^1.1.0" - "@emotion/stylis" "^0.8.4" - "@emotion/unitless" "^0.7.4" - babel-plugin-styled-components ">= 1.12.0" - css-to-react-native "^3.0.0" - hoist-non-react-statics "^3.0.0" - shallowequal "^1.1.0" - supports-color "^5.5.0" +styled-components@~6.1.13: + version "6.1.13" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.13.tgz#2d777750b773b31469bd79df754a32479e9f475e" + integrity sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw== + dependencies: + "@emotion/is-prop-valid" "1.2.2" + "@emotion/unitless" "0.8.1" + "@types/stylis" "4.2.5" + css-to-react-native "3.2.0" + csstype "3.1.3" + postcss "8.4.38" + shallowequal "1.1.0" + stylis "4.3.2" + tslib "2.6.2" styled-jsx@5.1.1: version "5.1.1" @@ -17284,6 +17245,11 @@ styled-jsx@5.1.1: dependencies: client-only "0.0.1" +stylis@4.3.2: + version "4.3.2" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.2.tgz#8f76b70777dd53eb669c6f58c997bf0a9972e444" + integrity sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg== + superagent@^8.0.6, superagent@^8.0.8, superagent@~8.1.0: version "8.1.2" resolved "https://registry.npmjs.org/superagent/-/superagent-8.1.2.tgz" @@ -17300,7 +17266,7 @@ superagent@^8.0.6, superagent@^8.0.8, superagent@~8.1.0: qs "^6.11.0" semver "^7.3.8" -supports-color@^5.3.0, supports-color@^5.5.0: +supports-color@^5.3.0: version "5.5.0" resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==