From 3ea2583bc8ff99fbf0942e9e20940a16c5971438 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Sun, 1 Jun 2025 10:47:33 -0400 Subject: [PATCH] Convert ui to ESM (WIP) --- .../redux-devtools-ui/babel.config.esm.json | 8 -- packages/redux-devtools-ui/babel.config.json | 8 -- packages/redux-devtools-ui/package.json | 24 ++---- .../src/Button/Button.stories.tsx | 2 +- .../redux-devtools-ui/src/Button/Button.tsx | 6 +- .../redux-devtools-ui/src/Button/index.ts | 2 +- .../src/Button/styles/common.ts | 8 +- .../src/Button/styles/default.ts | 2 +- .../src/Button/styles/index.ts | 4 +- .../src/Button/styles/material.ts | 6 +- .../redux-devtools-ui/src/Container/index.tsx | 6 +- .../src/Container/styles/index.ts | 4 +- .../src/ContextMenu/ContextMenu.stories.tsx | 4 +- .../src/ContextMenu/ContextMenu.tsx | 4 +- .../src/ContextMenu/index.ts | 2 +- .../src/ContextMenu/styles/index.ts | 2 +- .../src/Dialog/Dialog.stories.tsx | 4 +- .../redux-devtools-ui/src/Dialog/Dialog.tsx | 10 +-- .../redux-devtools-ui/src/Dialog/index.ts | 2 +- .../src/Dialog/styles/default.ts | 2 +- .../src/Dialog/styles/index.ts | 4 +- .../src/Dialog/styles/material.ts | 4 +- .../src/Editor/Editor.stories.tsx | 4 +- .../redux-devtools-ui/src/Editor/Editor.tsx | 4 +- .../redux-devtools-ui/src/Editor/WithTabs.tsx | 4 +- .../redux-devtools-ui/src/Editor/index.ts | 2 +- .../src/Form/Form.stories.tsx | 5 +- packages/redux-devtools-ui/src/Form/Form.tsx | 8 +- packages/redux-devtools-ui/src/Form/index.ts | 2 +- .../src/Form/styles/index.ts | 2 +- .../redux-devtools-ui/src/Form/widgets.tsx | 4 +- .../src/Notification/Notification.stories.tsx | 2 +- .../src/Notification/Notification.tsx | 4 +- .../src/Notification/index.ts | 2 +- .../src/Notification/styles/index.ts | 4 +- .../SegmentedControl.stories.tsx | 2 +- .../src/SegmentedControl/SegmentedControl.tsx | 4 +- .../src/SegmentedControl/index.tsx | 2 +- .../src/SegmentedControl/styles/index.ts | 4 +- .../src/Select/Select.stories.tsx | 4 +- .../redux-devtools-ui/src/Select/Select.tsx | 4 +- .../redux-devtools-ui/src/Select/index.ts | 2 +- .../src/Slider/Slider.stories.tsx | 2 +- .../redux-devtools-ui/src/Slider/Slider.tsx | 6 +- .../redux-devtools-ui/src/Slider/index.ts | 2 +- .../src/Slider/styles/common.ts | 2 +- .../src/Slider/styles/default.ts | 4 +- .../src/Slider/styles/index.ts | 4 +- .../src/Slider/styles/material.ts | 10 +-- .../src/Tabs/Tabs.stories.tsx | 6 +- packages/redux-devtools-ui/src/Tabs/Tabs.tsx | 4 +- .../redux-devtools-ui/src/Tabs/TabsHeader.tsx | 6 +- packages/redux-devtools-ui/src/Tabs/index.ts | 4 +- .../src/Tabs/styles/common.ts | 2 +- .../src/Tabs/styles/default.ts | 2 +- .../src/Tabs/styles/index.ts | 4 +- .../src/Tabs/styles/material.ts | 6 +- .../src/Toolbar/Toolbar.stories.tsx | 12 +-- .../redux-devtools-ui/src/Toolbar/index.ts | 6 +- .../src/colorSchemes/index.ts | 28 +++---- packages/redux-devtools-ui/src/index.ts | 32 ++++---- .../redux-devtools-ui/src/themes/default.ts | 2 +- .../redux-devtools-ui/src/themes/index.ts | 4 +- .../redux-devtools-ui/src/utils/animations.ts | 2 +- .../src/utils/createStyledComponent.ts | 4 +- .../src/utils/createThemedComponent.tsx | 2 +- packages/redux-devtools-ui/src/utils/theme.ts | 8 +- packages/redux-devtools-ui/tsconfig.json | 4 +- packages/redux-devtools-ui/tsconfig.test.json | 2 +- pnpm-lock.yaml | 76 ------------------- 70 files changed, 164 insertions(+), 269 deletions(-) delete mode 100644 packages/redux-devtools-ui/babel.config.esm.json delete mode 100644 packages/redux-devtools-ui/babel.config.json diff --git a/packages/redux-devtools-ui/babel.config.esm.json b/packages/redux-devtools-ui/babel.config.esm.json deleted file mode 100644 index d616aff2..00000000 --- a/packages/redux-devtools-ui/babel.config.esm.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { "targets": "defaults", "modules": false }], - "@babel/preset-react", - "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-transform-runtime"] -} diff --git a/packages/redux-devtools-ui/babel.config.json b/packages/redux-devtools-ui/babel.config.json deleted file mode 100644 index 814fca2b..00000000 --- a/packages/redux-devtools-ui/babel.config.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { "targets": "defaults" }], - "@babel/preset-react", - "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-transform-runtime"] -} diff --git a/packages/redux-devtools-ui/package.json b/packages/redux-devtools-ui/package.json index 6ee4f49f..48cc5eb7 100644 --- a/packages/redux-devtools-ui/package.json +++ b/packages/redux-devtools-ui/package.json @@ -13,9 +13,9 @@ "lib", "src" ], - "main": "lib/cjs/index.js", - "module": "lib/esm/index.js", - "types": "lib/types/index.d.ts", + "main": "lib/index.js", + "types": "lib/index.d.ts", + "type": "module", "sideEffects": [ "*.css" ], @@ -28,20 +28,16 @@ "storybook": "storybook dev -p 6006", "build:storybook": "storybook build --quiet", "build": "pnpm run build:lib && pnpm run build:storybook", - "build:lib": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:css", - "build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs", - "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts,.tsx\" --out-dir lib/esm", - "build:types": "tsc --emitDeclarationOnly", + "build:lib": "tsc && pnpm run build:css", "build:css": "ncp fonts lib/fonts", "clean": "rimraf lib storybook-static", - "test": "jest", + "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js", "lint": "eslint .", "type-check": "tsc --noEmit", "prepack": "pnpm run clean && pnpm run build", - "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" + "prepublish": "pnpm run lint && pnpm run test" }, "dependencies": { - "@babel/runtime": "^7.27.1", "@rjsf/core": "^5.24.10", "@rjsf/utils": "^5.24.10", "@rjsf/validator-ajv8": "^5.24.10", @@ -56,13 +52,6 @@ "simple-element-resize-detector": "^1.3.0" }, "devDependencies": { - "@babel/cli": "^7.27.2", - "@babel/core": "^7.27.1", - "@babel/eslint-parser": "^7.27.1", - "@babel/plugin-transform-runtime": "^7.27.1", - "@babel/preset-env": "^7.27.2", - "@babel/preset-react": "^7.27.1", - "@babel/preset-typescript": "^7.27.1", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "@storybook/addon-onboarding": "^9.0.2", @@ -74,7 +63,6 @@ "@types/node": "^22.15.21", "@types/jest": "^29.5.14", "@types/react": "^19.1.6", - "babel-loader": "^10.0.0", "csstype": "^3.1.3", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", diff --git a/packages/redux-devtools-ui/src/Button/Button.stories.tsx b/packages/redux-devtools-ui/src/Button/Button.stories.tsx index e5a8e022..b3ba9682 100644 --- a/packages/redux-devtools-ui/src/Button/Button.stories.tsx +++ b/packages/redux-devtools-ui/src/Button/Button.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styled from '@emotion/styled'; import { MdFiberManualRecord } from 'react-icons/md'; import { Meta, StoryObj } from '@storybook/react-vite'; -import Button from './'; +import Button from './index.js'; const meta: Meta = { title: 'Button', diff --git a/packages/redux-devtools-ui/src/Button/Button.tsx b/packages/redux-devtools-ui/src/Button/Button.tsx index 1bdb1aa4..34a5f694 100644 --- a/packages/redux-devtools-ui/src/Button/Button.tsx +++ b/packages/redux-devtools-ui/src/Button/Button.tsx @@ -1,8 +1,8 @@ import React, { Component, ReactNode } from 'react'; import type { Base16Theme } from 'react-base16-styling'; -import createStyledComponent from '../utils/createStyledComponent'; -import * as styles from './styles'; -import { commonStyle, tooltipStyle } from './styles/common'; +import createStyledComponent from '../utils/createStyledComponent.js'; +import * as styles from './styles/index.js'; +import { commonStyle, tooltipStyle } from './styles/common.js'; const ButtonWrapper = createStyledComponent(styles, 'button'); const TooltipWrapper = createStyledComponent(tooltipStyle); diff --git a/packages/redux-devtools-ui/src/Button/index.ts b/packages/redux-devtools-ui/src/Button/index.ts index efe8c800..d6b70009 100644 --- a/packages/redux-devtools-ui/src/Button/index.ts +++ b/packages/redux-devtools-ui/src/Button/index.ts @@ -1 +1 @@ -export { default } from './Button'; +export { default } from './Button.js'; diff --git a/packages/redux-devtools-ui/src/Button/styles/common.ts b/packages/redux-devtools-ui/src/Button/styles/common.ts index 0ecae4f4..5c861c46 100644 --- a/packages/redux-devtools-ui/src/Button/styles/common.ts +++ b/packages/redux-devtools-ui/src/Button/styles/common.ts @@ -1,8 +1,8 @@ import { css } from '@emotion/react'; -import { fadeIn } from '../../utils/animations'; -import colorEffect from '../../utils/color'; -import { Mark, Size, TooltipPosition } from '../Button'; -import { Theme } from '../../themes/default'; +import { fadeIn } from '../../utils/animations.js'; +import colorEffect from '../../utils/color.js'; +import { Mark, Size, TooltipPosition } from '../Button.js'; +import { Theme } from '../../themes/default.js'; const both = (tooltipPosition: TooltipPosition) => { switch (tooltipPosition) { diff --git a/packages/redux-devtools-ui/src/Button/styles/default.ts b/packages/redux-devtools-ui/src/Button/styles/default.ts index c0e11f7a..a63bab78 100644 --- a/packages/redux-devtools-ui/src/Button/styles/default.ts +++ b/packages/redux-devtools-ui/src/Button/styles/default.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { Theme } from '../../themes/default'; +import { Theme } from '../../themes/default.js'; export interface StyleProps { primary: boolean | undefined; diff --git a/packages/redux-devtools-ui/src/Button/styles/index.ts b/packages/redux-devtools-ui/src/Button/styles/index.ts index 4670ee27..1796fb45 100644 --- a/packages/redux-devtools-ui/src/Button/styles/index.ts +++ b/packages/redux-devtools-ui/src/Button/styles/index.ts @@ -1,2 +1,2 @@ -export { style as default } from './default'; -export { style as material } from './material'; +export { style as default } from './default.js'; +export { style as material } from './material.js'; diff --git a/packages/redux-devtools-ui/src/Button/styles/material.ts b/packages/redux-devtools-ui/src/Button/styles/material.ts index c06e4d75..b51a9231 100644 --- a/packages/redux-devtools-ui/src/Button/styles/material.ts +++ b/packages/redux-devtools-ui/src/Button/styles/material.ts @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; -import { ripple } from '../../utils/animations'; -import { StyleProps } from './default'; -import { Theme } from '../../themes/default'; +import { ripple } from '../../utils/animations.js'; +import { StyleProps } from './default.js'; +import { Theme } from '../../themes/default.js'; export const style = ({ theme, diff --git a/packages/redux-devtools-ui/src/Container/index.tsx b/packages/redux-devtools-ui/src/Container/index.tsx index 5a0a1060..8c9148af 100644 --- a/packages/redux-devtools-ui/src/Container/index.tsx +++ b/packages/redux-devtools-ui/src/Container/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { ThemeProvider } from '@emotion/react'; -import { useTheme, ThemeData } from '../utils/theme'; -import { MainContainerWrapper, ContainerWrapper } from './styles'; -import { Theme } from '../themes/default'; +import { useTheme, ThemeData } from '../utils/theme.js'; +import { MainContainerWrapper, ContainerWrapper } from './styles/index.js'; +import { Theme } from '../themes/default.js'; interface ContainerFromThemeDataProps { children?: React.ReactNode; diff --git a/packages/redux-devtools-ui/src/Container/styles/index.ts b/packages/redux-devtools-ui/src/Container/styles/index.ts index 4bb1b681..1c5cd473 100644 --- a/packages/redux-devtools-ui/src/Container/styles/index.ts +++ b/packages/redux-devtools-ui/src/Container/styles/index.ts @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import color from '../../utils/color'; -import { Theme } from '../../themes/default'; +import color from '../../utils/color.js'; +import { Theme } from '../../themes/default.js'; export const MainContainerWrapper = styled.div` display: flex; diff --git a/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx b/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx index cf3c5dbf..36fc79c8 100644 --- a/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx +++ b/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx @@ -1,8 +1,8 @@ import React from 'react'; import styled from '@emotion/styled'; import { Meta, StoryObj } from '@storybook/react-vite'; -import ContextMenu from './'; -import { items } from './data'; +import ContextMenu from './index.js'; +import { items } from './data.js'; const meta: Meta = { title: 'ContextMenu', diff --git a/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.tsx b/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.tsx index ab762a8a..fcb392e5 100644 --- a/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.tsx +++ b/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.tsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -import createStyledComponent from '../utils/createStyledComponent'; -import styles from './styles/index'; +import createStyledComponent from '../utils/createStyledComponent.js'; +import styles from './styles/index.js'; const ContextMenuWrapper = createStyledComponent(styles); diff --git a/packages/redux-devtools-ui/src/ContextMenu/index.ts b/packages/redux-devtools-ui/src/ContextMenu/index.ts index 1bf5f07d..afe527f3 100644 --- a/packages/redux-devtools-ui/src/ContextMenu/index.ts +++ b/packages/redux-devtools-ui/src/ContextMenu/index.ts @@ -1 +1 @@ -export { default } from './ContextMenu'; +export { default } from './ContextMenu.js'; diff --git a/packages/redux-devtools-ui/src/ContextMenu/styles/index.ts b/packages/redux-devtools-ui/src/ContextMenu/styles/index.ts index c928d27c..9234270e 100644 --- a/packages/redux-devtools-ui/src/ContextMenu/styles/index.ts +++ b/packages/redux-devtools-ui/src/ContextMenu/styles/index.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { Theme } from '../../themes/default'; +import { Theme } from '../../themes/default.js'; interface StyleProps { left: number; diff --git a/packages/redux-devtools-ui/src/Dialog/Dialog.stories.tsx b/packages/redux-devtools-ui/src/Dialog/Dialog.stories.tsx index 95ac104c..87cd1d62 100644 --- a/packages/redux-devtools-ui/src/Dialog/Dialog.stories.tsx +++ b/packages/redux-devtools-ui/src/Dialog/Dialog.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Meta, StoryObj } from '@storybook/react-vite'; -import Dialog from './'; -import { schema, uiSchema, formData } from '../Form/schema'; +import Dialog from './index.js'; +import { schema, uiSchema, formData } from '../Form/schema.js'; const meta: Meta = { title: 'Dialog', diff --git a/packages/redux-devtools-ui/src/Dialog/Dialog.tsx b/packages/redux-devtools-ui/src/Dialog/Dialog.tsx index 6045e361..8d7e0c24 100644 --- a/packages/redux-devtools-ui/src/Dialog/Dialog.tsx +++ b/packages/redux-devtools-ui/src/Dialog/Dialog.tsx @@ -1,10 +1,10 @@ import React, { PureComponent } from 'react'; import type { Base16Theme } from 'react-base16-styling'; -import createStyledComponent from '../utils/createStyledComponent'; -import * as styles from './styles'; -import Button from '../Button'; -import Form from '../Form'; -import { Props as FormProps } from '../Form/Form'; +import createStyledComponent from '../utils/createStyledComponent.js'; +import * as styles from './styles/index.js'; +import Button from '../Button/index.js'; +import Form from '../Form/index.js'; +import { Props as FormProps } from '../Form/Form.js'; const DialogWrapper = createStyledComponent(styles); diff --git a/packages/redux-devtools-ui/src/Dialog/index.ts b/packages/redux-devtools-ui/src/Dialog/index.ts index e3f43f0a..a1bd9a49 100644 --- a/packages/redux-devtools-ui/src/Dialog/index.ts +++ b/packages/redux-devtools-ui/src/Dialog/index.ts @@ -1 +1 @@ -export { default } from './Dialog'; +export { default } from './Dialog.js'; diff --git a/packages/redux-devtools-ui/src/Dialog/styles/default.ts b/packages/redux-devtools-ui/src/Dialog/styles/default.ts index 69e6fd47..955a825d 100644 --- a/packages/redux-devtools-ui/src/Dialog/styles/default.ts +++ b/packages/redux-devtools-ui/src/Dialog/styles/default.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { Theme } from '../../themes/default'; +import { Theme } from '../../themes/default.js'; export interface StyleProps { open: boolean | undefined; diff --git a/packages/redux-devtools-ui/src/Dialog/styles/index.ts b/packages/redux-devtools-ui/src/Dialog/styles/index.ts index 4670ee27..1796fb45 100644 --- a/packages/redux-devtools-ui/src/Dialog/styles/index.ts +++ b/packages/redux-devtools-ui/src/Dialog/styles/index.ts @@ -1,2 +1,2 @@ -export { style as default } from './default'; -export { style as material } from './material'; +export { style as default } from './default.js'; +export { style as material } from './material.js'; diff --git a/packages/redux-devtools-ui/src/Dialog/styles/material.ts b/packages/redux-devtools-ui/src/Dialog/styles/material.ts index e194a69f..0cd7ff2a 100644 --- a/packages/redux-devtools-ui/src/Dialog/styles/material.ts +++ b/packages/redux-devtools-ui/src/Dialog/styles/material.ts @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; -import { StyleProps } from './default'; -import { Theme } from '../../themes/default'; +import { StyleProps } from './default.js'; +import { Theme } from '../../themes/default.js'; export const style = ({ theme, diff --git a/packages/redux-devtools-ui/src/Editor/Editor.stories.tsx b/packages/redux-devtools-ui/src/Editor/Editor.stories.tsx index e453b302..fac4a4f2 100644 --- a/packages/redux-devtools-ui/src/Editor/Editor.stories.tsx +++ b/packages/redux-devtools-ui/src/Editor/Editor.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Meta, StoryObj } from '@storybook/react-vite'; -import Editor from './'; -import { default as WithTabsComponent, WithTabsProps } from './WithTabs'; +import Editor from './index.js'; +import { default as WithTabsComponent, WithTabsProps } from './WithTabs.js'; const value = ` var themes = []; diff --git a/packages/redux-devtools-ui/src/Editor/Editor.tsx b/packages/redux-devtools-ui/src/Editor/Editor.tsx index 1e2b9b46..b63934ba 100644 --- a/packages/redux-devtools-ui/src/Editor/Editor.tsx +++ b/packages/redux-devtools-ui/src/Editor/Editor.tsx @@ -2,8 +2,8 @@ import React, { Component } from 'react'; import styled from '@emotion/styled'; import CodeMirror, { EditorChange } from 'codemirror'; import type { Base16Theme } from 'react-base16-styling'; -import { defaultStyle, themedStyle } from './styles'; -import { Theme } from '../themes/default'; +import { defaultStyle, themedStyle } from './styles/index.js'; +import { Theme } from '../themes/default.js'; import 'codemirror/mode/javascript/javascript'; import 'codemirror/addon/fold/foldgutter'; diff --git a/packages/redux-devtools-ui/src/Editor/WithTabs.tsx b/packages/redux-devtools-ui/src/Editor/WithTabs.tsx index 830405a2..ed94c720 100644 --- a/packages/redux-devtools-ui/src/Editor/WithTabs.tsx +++ b/packages/redux-devtools-ui/src/Editor/WithTabs.tsx @@ -1,6 +1,6 @@ import React, { Component, ComponentType } from 'react'; -import Editor from './'; -import Tabs from '../Tabs'; +import Editor from './index.js'; +import Tabs from '../Tabs/index.js'; const value1 = ` const func1 = () => {} diff --git a/packages/redux-devtools-ui/src/Editor/index.ts b/packages/redux-devtools-ui/src/Editor/index.ts index e7967e75..7c377394 100644 --- a/packages/redux-devtools-ui/src/Editor/index.ts +++ b/packages/redux-devtools-ui/src/Editor/index.ts @@ -1 +1 @@ -export { default } from './Editor'; +export { default } from './Editor.js'; diff --git a/packages/redux-devtools-ui/src/Form/Form.stories.tsx b/packages/redux-devtools-ui/src/Form/Form.stories.tsx index d5c3551d..ec148461 100644 --- a/packages/redux-devtools-ui/src/Form/Form.stories.tsx +++ b/packages/redux-devtools-ui/src/Form/Form.stories.tsx @@ -1,7 +1,6 @@ -import React from 'react'; import { Meta, StoryObj } from '@storybook/react-vite'; -import Form from './'; -import { schema, uiSchema, formData } from './schema'; +import Form from './index.js'; +import { schema, uiSchema, formData } from './schema.js'; const meta: Meta = { title: 'Form', diff --git a/packages/redux-devtools-ui/src/Form/Form.tsx b/packages/redux-devtools-ui/src/Form/Form.tsx index 17e56edd..324afe06 100644 --- a/packages/redux-devtools-ui/src/Form/Form.tsx +++ b/packages/redux-devtools-ui/src/Form/Form.tsx @@ -2,10 +2,10 @@ import React, { PureComponent, Component } from 'react'; import JSONSchemaForm, { FormProps } from '@rjsf/core'; import validator from '@rjsf/validator-ajv8'; import type { Base16Theme } from 'react-base16-styling'; -import createStyledComponent from '../utils/createStyledComponent'; -import styles from './styles'; -import Button from '../Button'; -import customWidgets from './widgets'; +import createStyledComponent from '../utils/createStyledComponent.js'; +import styles from './styles/index.js'; +import Button from '../Button/index.js'; +import customWidgets from './widgets.js'; const FormContainer = createStyledComponent(styles, JSONSchemaForm); diff --git a/packages/redux-devtools-ui/src/Form/index.ts b/packages/redux-devtools-ui/src/Form/index.ts index 8bc7b770..890b761f 100644 --- a/packages/redux-devtools-ui/src/Form/index.ts +++ b/packages/redux-devtools-ui/src/Form/index.ts @@ -1 +1 @@ -export { default } from './Form'; +export { default } from './Form.js'; diff --git a/packages/redux-devtools-ui/src/Form/styles/index.ts b/packages/redux-devtools-ui/src/Form/styles/index.ts index b8f4ddbe..d8890cb6 100644 --- a/packages/redux-devtools-ui/src/Form/styles/index.ts +++ b/packages/redux-devtools-ui/src/Form/styles/index.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { Theme } from '../../themes/default'; +import { Theme } from '../../themes/default.js'; export default ({ theme }: { theme: Theme }) => css` padding: 10px; diff --git a/packages/redux-devtools-ui/src/Form/widgets.tsx b/packages/redux-devtools-ui/src/Form/widgets.tsx index 001562d9..08062e21 100644 --- a/packages/redux-devtools-ui/src/Form/widgets.tsx +++ b/packages/redux-devtools-ui/src/Form/widgets.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { FieldProps, Widget, WidgetProps } from '@rjsf/utils'; -import Select from '../Select'; -import Slider from '../Slider'; +import Select from '../Select/index.js'; +import Slider from '../Slider/index.js'; /* eslint-disable react/prop-types */ const SelectWidget: Widget = ({ diff --git a/packages/redux-devtools-ui/src/Notification/Notification.stories.tsx b/packages/redux-devtools-ui/src/Notification/Notification.stories.tsx index d55aa27b..fc3f06e3 100644 --- a/packages/redux-devtools-ui/src/Notification/Notification.stories.tsx +++ b/packages/redux-devtools-ui/src/Notification/Notification.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from '@emotion/styled'; import { Meta, StoryObj } from '@storybook/react-vite'; -import Notification from './'; +import Notification from './index.js'; const Container = styled.div` display: flex; diff --git a/packages/redux-devtools-ui/src/Notification/Notification.tsx b/packages/redux-devtools-ui/src/Notification/Notification.tsx index 43d0fa82..82d1d37d 100644 --- a/packages/redux-devtools-ui/src/Notification/Notification.tsx +++ b/packages/redux-devtools-ui/src/Notification/Notification.tsx @@ -4,8 +4,8 @@ import { MdWarning } from 'react-icons/md'; import { MdError } from 'react-icons/md'; import { MdCheckCircle } from 'react-icons/md'; import type { Base16Theme } from 'react-base16-styling'; -import createStyledComponent from '../utils/createStyledComponent'; -import styles from './styles'; +import createStyledComponent from '../utils/createStyledComponent.js'; +import styles from './styles/index.js'; const NotificationWrapper = createStyledComponent(styles); diff --git a/packages/redux-devtools-ui/src/Notification/index.ts b/packages/redux-devtools-ui/src/Notification/index.ts index 0dbc7bf5..ecdf80c5 100644 --- a/packages/redux-devtools-ui/src/Notification/index.ts +++ b/packages/redux-devtools-ui/src/Notification/index.ts @@ -1 +1 @@ -export { default } from './Notification'; +export { default } from './Notification.js'; diff --git a/packages/redux-devtools-ui/src/Notification/styles/index.ts b/packages/redux-devtools-ui/src/Notification/styles/index.ts index 7b2bcc17..7dc46f79 100644 --- a/packages/redux-devtools-ui/src/Notification/styles/index.ts +++ b/packages/redux-devtools-ui/src/Notification/styles/index.ts @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; -import { Theme } from '../../themes/default'; -import { Type } from '../Notification'; +import { Theme } from '../../themes/default.js'; +import { Type } from '../Notification.js'; const getBackground = (theme: Theme, type: Type) => { switch (type) { diff --git a/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx b/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx index 1b9e5087..454190ff 100644 --- a/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx +++ b/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from '@emotion/styled'; import { Meta, StoryObj } from '@storybook/react-vite'; -import SegmentedControl from './'; +import SegmentedControl from './index.js'; const Container = styled.div` display: flex; diff --git a/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.tsx b/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.tsx index fcdc0f9e..533d1a41 100644 --- a/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.tsx +++ b/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.tsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import type { Base16Theme } from 'react-base16-styling'; -import createStyledComponent from '../utils/createStyledComponent'; -import styles from './styles'; +import createStyledComponent from '../utils/createStyledComponent.js'; +import styles from './styles/index.js'; const SegmentedWrapper = createStyledComponent(styles); diff --git a/packages/redux-devtools-ui/src/SegmentedControl/index.tsx b/packages/redux-devtools-ui/src/SegmentedControl/index.tsx index 9d1e6f1c..d5f37bfc 100644 --- a/packages/redux-devtools-ui/src/SegmentedControl/index.tsx +++ b/packages/redux-devtools-ui/src/SegmentedControl/index.tsx @@ -1 +1 @@ -export { default } from './SegmentedControl'; +export { default } from './SegmentedControl.js'; diff --git a/packages/redux-devtools-ui/src/SegmentedControl/styles/index.ts b/packages/redux-devtools-ui/src/SegmentedControl/styles/index.ts index 6a9b95f5..1c94d714 100644 --- a/packages/redux-devtools-ui/src/SegmentedControl/styles/index.ts +++ b/packages/redux-devtools-ui/src/SegmentedControl/styles/index.ts @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; -import color from '../../utils/color'; -import { Theme } from '../../themes/default'; +import color from '../../utils/color.js'; +import { Theme } from '../../themes/default.js'; interface StyleProps { disabled: boolean | undefined; diff --git a/packages/redux-devtools-ui/src/Select/Select.stories.tsx b/packages/redux-devtools-ui/src/Select/Select.stories.tsx index c12b461c..588547aa 100644 --- a/packages/redux-devtools-ui/src/Select/Select.stories.tsx +++ b/packages/redux-devtools-ui/src/Select/Select.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from '@emotion/styled'; -import Select from './'; -import { options } from './options'; +import Select from './index.js'; +import { options } from './options.js'; import { Meta, StoryObj } from '@storybook/react-vite'; const Container = styled.div` diff --git a/packages/redux-devtools-ui/src/Select/Select.tsx b/packages/redux-devtools-ui/src/Select/Select.tsx index a5166c45..5cbc8087 100644 --- a/packages/redux-devtools-ui/src/Select/Select.tsx +++ b/packages/redux-devtools-ui/src/Select/Select.tsx @@ -3,8 +3,8 @@ import ReactSelect, { GroupBase, Props as ReactSelectProps, } from 'react-select'; -import createThemedComponent from '../utils/createThemedComponent'; -import { Theme } from '../themes/default'; +import createThemedComponent from '../utils/createThemedComponent.js'; +import { Theme } from '../themes/default.js'; export interface SelectProps< Option, diff --git a/packages/redux-devtools-ui/src/Select/index.ts b/packages/redux-devtools-ui/src/Select/index.ts index 22ae8193..6954107d 100644 --- a/packages/redux-devtools-ui/src/Select/index.ts +++ b/packages/redux-devtools-ui/src/Select/index.ts @@ -1 +1 @@ -export { default } from './Select'; +export { default } from './Select.js'; diff --git a/packages/redux-devtools-ui/src/Slider/Slider.stories.tsx b/packages/redux-devtools-ui/src/Slider/Slider.stories.tsx index 27fae999..77f523f1 100644 --- a/packages/redux-devtools-ui/src/Slider/Slider.stories.tsx +++ b/packages/redux-devtools-ui/src/Slider/Slider.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from '@emotion/styled'; import { Meta, StoryObj } from '@storybook/react-vite'; -import Slider from './'; +import Slider from './index.js'; const Container = styled.div` display: flex; diff --git a/packages/redux-devtools-ui/src/Slider/Slider.tsx b/packages/redux-devtools-ui/src/Slider/Slider.tsx index dfe34f5f..9894b3d6 100644 --- a/packages/redux-devtools-ui/src/Slider/Slider.tsx +++ b/packages/redux-devtools-ui/src/Slider/Slider.tsx @@ -1,8 +1,8 @@ import React, { Component } from 'react'; import type { Base16Theme } from 'react-base16-styling'; -import createStyledComponent from '../utils/createStyledComponent'; -import * as styles from './styles'; -import { containerStyle } from './styles/common'; +import createStyledComponent from '../utils/createStyledComponent.js'; +import * as styles from './styles/index.js'; +import { containerStyle } from './styles/common.js'; const SliderWrapper = createStyledComponent(styles); const ContainerWithValue = createStyledComponent(containerStyle); diff --git a/packages/redux-devtools-ui/src/Slider/index.ts b/packages/redux-devtools-ui/src/Slider/index.ts index 9898d6a8..6025797a 100644 --- a/packages/redux-devtools-ui/src/Slider/index.ts +++ b/packages/redux-devtools-ui/src/Slider/index.ts @@ -1 +1 @@ -export { default } from './Slider'; +export { default } from './Slider.js'; diff --git a/packages/redux-devtools-ui/src/Slider/styles/common.ts b/packages/redux-devtools-ui/src/Slider/styles/common.ts index 0ab18a43..739e695e 100644 --- a/packages/redux-devtools-ui/src/Slider/styles/common.ts +++ b/packages/redux-devtools-ui/src/Slider/styles/common.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { Theme } from '../../themes/default'; +import { Theme } from '../../themes/default.js'; export const containerStyle = ({ theme }: { theme: Theme }) => css` display: flex; diff --git a/packages/redux-devtools-ui/src/Slider/styles/default.ts b/packages/redux-devtools-ui/src/Slider/styles/default.ts index 3f85e042..b0800399 100644 --- a/packages/redux-devtools-ui/src/Slider/styles/default.ts +++ b/packages/redux-devtools-ui/src/Slider/styles/default.ts @@ -7,8 +7,8 @@ Based on: */ import { css } from '@emotion/react'; -import { prefixSelectors } from '../../utils/autoPrefix'; -import { Theme } from '../../themes/default'; +import { prefixSelectors } from '../../utils/autoPrefix.js'; +import { Theme } from '../../themes/default.js'; export interface StyleProps { percent: number; diff --git a/packages/redux-devtools-ui/src/Slider/styles/index.ts b/packages/redux-devtools-ui/src/Slider/styles/index.ts index 4670ee27..1796fb45 100644 --- a/packages/redux-devtools-ui/src/Slider/styles/index.ts +++ b/packages/redux-devtools-ui/src/Slider/styles/index.ts @@ -1,2 +1,2 @@ -export { style as default } from './default'; -export { style as material } from './material'; +export { style as default } from './default.js'; +export { style as material } from './material.js'; diff --git a/packages/redux-devtools-ui/src/Slider/styles/material.ts b/packages/redux-devtools-ui/src/Slider/styles/material.ts index 48fa155a..d5dd9389 100644 --- a/packages/redux-devtools-ui/src/Slider/styles/material.ts +++ b/packages/redux-devtools-ui/src/Slider/styles/material.ts @@ -1,9 +1,9 @@ import { css } from '@emotion/react'; -import { prefixSelectors } from '../../utils/autoPrefix'; -import color from '../../utils/color'; -import { animationCurve } from '../../utils/animations'; -import { StyleProps } from './default'; -import { Theme } from '../../themes/default'; +import { prefixSelectors } from '../../utils/autoPrefix.js'; +import color from '../../utils/color.js'; +import { animationCurve } from '../../utils/animations.js'; +import { StyleProps } from './default.js'; +import { Theme } from '../../themes/default.js'; export const style = ({ theme, diff --git a/packages/redux-devtools-ui/src/Tabs/Tabs.stories.tsx b/packages/redux-devtools-ui/src/Tabs/Tabs.stories.tsx index 24a69b2e..43562042 100644 --- a/packages/redux-devtools-ui/src/Tabs/Tabs.stories.tsx +++ b/packages/redux-devtools-ui/src/Tabs/Tabs.stories.tsx @@ -1,9 +1,9 @@ import React from 'react'; import styled from '@emotion/styled'; import { Meta, StoryObj } from '@storybook/react-vite'; -import Tabs from './'; -import { tabs, simple10Tabs } from './data'; -import { TabsProps } from './Tabs'; +import Tabs from './index.js'; +import { tabs, simple10Tabs } from './data.js'; +import { TabsProps } from './Tabs.js'; const Container = styled.div` display: flex; diff --git a/packages/redux-devtools-ui/src/Tabs/Tabs.tsx b/packages/redux-devtools-ui/src/Tabs/Tabs.tsx index a9b8a02e..5c209a4c 100644 --- a/packages/redux-devtools-ui/src/Tabs/Tabs.tsx +++ b/packages/redux-devtools-ui/src/Tabs/Tabs.tsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -import TabsHeader, { ReactButtonElement, Tab } from './TabsHeader'; -import { TabsContainer } from './styles/common'; +import TabsHeader, { Tab } from './TabsHeader.js'; +import { TabsContainer } from './styles/common.js'; export type Position = 'left' | 'right' | 'center'; diff --git a/packages/redux-devtools-ui/src/Tabs/TabsHeader.tsx b/packages/redux-devtools-ui/src/Tabs/TabsHeader.tsx index 123a6407..8a49e661 100644 --- a/packages/redux-devtools-ui/src/Tabs/TabsHeader.tsx +++ b/packages/redux-devtools-ui/src/Tabs/TabsHeader.tsx @@ -1,9 +1,9 @@ import React, { Component } from 'react'; import observeResize from 'simple-element-resize-detector'; import { FaAngleDoubleRight } from 'react-icons/fa'; -import ContextMenu from '../ContextMenu'; -import createStyledComponent from '../utils/createStyledComponent'; -import * as styles from './styles'; +import ContextMenu from '../ContextMenu/index.js'; +import createStyledComponent from '../utils/createStyledComponent.js'; +import * as styles from './styles/index.js'; const TabsWrapper = createStyledComponent(styles); diff --git a/packages/redux-devtools-ui/src/Tabs/index.ts b/packages/redux-devtools-ui/src/Tabs/index.ts index 2fcb2e87..4cc92516 100644 --- a/packages/redux-devtools-ui/src/Tabs/index.ts +++ b/packages/redux-devtools-ui/src/Tabs/index.ts @@ -1,2 +1,2 @@ -export { default } from './Tabs'; -export type { Tab } from './TabsHeader'; +export { default } from './Tabs.js'; +export type { Tab } from './TabsHeader.js'; diff --git a/packages/redux-devtools-ui/src/Tabs/styles/common.ts b/packages/redux-devtools-ui/src/Tabs/styles/common.ts index 29b5a127..3bd0a387 100644 --- a/packages/redux-devtools-ui/src/Tabs/styles/common.ts +++ b/packages/redux-devtools-ui/src/Tabs/styles/common.ts @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { Position } from '../Tabs'; +import { Position } from '../Tabs.js'; interface StyleProps { position: Position; diff --git a/packages/redux-devtools-ui/src/Tabs/styles/default.ts b/packages/redux-devtools-ui/src/Tabs/styles/default.ts index 3bd52d9f..0e3e334c 100644 --- a/packages/redux-devtools-ui/src/Tabs/styles/default.ts +++ b/packages/redux-devtools-ui/src/Tabs/styles/default.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { Theme } from '../../themes/default'; +import { Theme } from '../../themes/default.js'; export interface StyleProps { main: boolean | undefined; diff --git a/packages/redux-devtools-ui/src/Tabs/styles/index.ts b/packages/redux-devtools-ui/src/Tabs/styles/index.ts index 4670ee27..1796fb45 100644 --- a/packages/redux-devtools-ui/src/Tabs/styles/index.ts +++ b/packages/redux-devtools-ui/src/Tabs/styles/index.ts @@ -1,2 +1,2 @@ -export { style as default } from './default'; -export { style as material } from './material'; +export { style as default } from './default.js'; +export { style as material } from './material.js'; diff --git a/packages/redux-devtools-ui/src/Tabs/styles/material.ts b/packages/redux-devtools-ui/src/Tabs/styles/material.ts index f44ce842..ef0a6b39 100644 --- a/packages/redux-devtools-ui/src/Tabs/styles/material.ts +++ b/packages/redux-devtools-ui/src/Tabs/styles/material.ts @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; -import { ripple } from '../../utils/animations'; -import { Theme } from '../../themes/default'; -import { StyleProps } from './default'; +import { ripple } from '../../utils/animations.js'; +import { Theme } from '../../themes/default.js'; +import { StyleProps } from './default.js'; export const style = ({ theme, main }: StyleProps & { theme: Theme }) => css` display: flex; diff --git a/packages/redux-devtools-ui/src/Toolbar/Toolbar.stories.tsx b/packages/redux-devtools-ui/src/Toolbar/Toolbar.stories.tsx index 1cc8f462..f4f99e16 100644 --- a/packages/redux-devtools-ui/src/Toolbar/Toolbar.stories.tsx +++ b/packages/redux-devtools-ui/src/Toolbar/Toolbar.stories.tsx @@ -14,12 +14,12 @@ import { Slider, SegmentedControl, Tabs as TabsComponent, -} from '../'; -import { options } from '../Select/options'; -import { simple10Tabs } from '../Tabs/data'; -import { BorderPosition } from './styles/Toolbar'; -import { TooltipPosition } from '../Button/Button'; -import { Position } from '../Tabs/Tabs'; +} from '../index.js'; +import { options } from '../Select/options.js'; +import { simple10Tabs } from '../Tabs/data.js'; +import { BorderPosition } from './styles/Toolbar.js'; +import { TooltipPosition } from '../Button/Button.js'; +import { Position } from '../Tabs/Tabs.js'; const Container = styled.div` display: flex; diff --git a/packages/redux-devtools-ui/src/Toolbar/index.ts b/packages/redux-devtools-ui/src/Toolbar/index.ts index 125c22cd..4d8760e6 100644 --- a/packages/redux-devtools-ui/src/Toolbar/index.ts +++ b/packages/redux-devtools-ui/src/Toolbar/index.ts @@ -1,3 +1,3 @@ -export { default as Toolbar } from './styles/Toolbar'; -export { default as Divider } from './styles/Divider'; -export { default as Spacer } from './styles/Spacer'; +export { default as Toolbar } from './styles/Toolbar.js'; +export { default as Divider } from './styles/Divider.js'; +export { default as Spacer } from './styles/Spacer.js'; diff --git a/packages/redux-devtools-ui/src/colorSchemes/index.ts b/packages/redux-devtools-ui/src/colorSchemes/index.ts index 9ccafa18..2ec161d8 100644 --- a/packages/redux-devtools-ui/src/colorSchemes/index.ts +++ b/packages/redux-devtools-ui/src/colorSchemes/index.ts @@ -1,14 +1,14 @@ -export { default } from './default'; -export { default as github } from './github'; -export { default as atomOneDark } from './atom-one-dark'; -export { default as dracula } from './dracula'; -export { default as iRBlack } from './ir-black'; -export { default as macintosh } from './macintosh'; -export { default as materia } from './materia'; -export { default as oceanicNext } from './oceanic-next'; -export { default as phD } from './phd'; -export { default as pico } from './pico'; -export { default as solarFlare } from './solar-flare'; -export { default as spacemacs } from './spacemacs'; -export { default as unikitty } from './unikitty'; -export { default as woodland } from './woodland'; +export { default } from './default.js'; +export { default as github } from './github.js'; +export { default as atomOneDark } from './atom-one-dark.js'; +export { default as dracula } from './dracula.js'; +export { default as iRBlack } from './ir-black.js'; +export { default as macintosh } from './macintosh.js'; +export { default as materia } from './materia.js'; +export { default as oceanicNext } from './oceanic-next.js'; +export { default as phD } from './phd.js'; +export { default as pico } from './pico.js'; +export { default as solarFlare } from './solar-flare.js'; +export { default as spacemacs } from './spacemacs.js'; +export { default as unikitty } from './unikitty.js'; +export { default as woodland } from './woodland.js'; diff --git a/packages/redux-devtools-ui/src/index.ts b/packages/redux-devtools-ui/src/index.ts index 81653324..c296c33a 100644 --- a/packages/redux-devtools-ui/src/index.ts +++ b/packages/redux-devtools-ui/src/index.ts @@ -1,26 +1,26 @@ export type { Base16Theme } from 'react-base16-styling'; -export { default as Container } from './Container'; -export { default as Button } from './Button'; -export { default as ContextMenu } from './ContextMenu'; -export { default as Dialog } from './Dialog'; -export { default as Editor } from './Editor'; -export { default as Form } from './Form'; -export { default as Select } from './Select'; -export { default as Slider } from './Slider'; -export { default as Tabs, type Tab } from './Tabs'; -export { default as SegmentedControl } from './SegmentedControl'; -export { default as Notification } from './Notification'; -export * from './Toolbar'; +export { default as Container } from './Container/index.js'; +export { default as Button } from './Button/index.js'; +export { default as ContextMenu } from './ContextMenu/index.js'; +export { default as Dialog } from './Dialog/index.js'; +export { default as Editor } from './Editor/index.js'; +export { default as Form } from './Form/index.js'; +export { default as Select } from './Select/index.js'; +export { default as Slider } from './Slider/index.js'; +export { default as Tabs, type Tab } from './Tabs/index.js'; +export { default as SegmentedControl } from './SegmentedControl/index.js'; +export { default as Notification } from './Notification/index.js'; +export * from './Toolbar/index.js'; -import color from './utils/color'; +import color from './utils/color.js'; export const effects = { color }; -export { default as createStyledComponent } from './utils/createStyledComponent'; +export { default as createStyledComponent } from './utils/createStyledComponent.js'; export { listSchemes, listThemes, type ThemeName, type ThemeFromProvider, type SchemeName, -} from './utils/theme'; -export type { Theme } from './themes/default'; +} from './utils/theme.js'; +export type { Theme } from './themes/default.js'; diff --git a/packages/redux-devtools-ui/src/themes/default.ts b/packages/redux-devtools-ui/src/themes/default.ts index 32724f83..d81416ea 100644 --- a/packages/redux-devtools-ui/src/themes/default.ts +++ b/packages/redux-devtools-ui/src/themes/default.ts @@ -1,6 +1,6 @@ import type { Base16Theme } from 'react-base16-styling'; import * as CSS from 'csstype'; -import * as themes from './index'; +import * as themes from './index.js'; export interface Theme extends Base16Theme { fontFamily: CSS.Property.FontFamily; diff --git a/packages/redux-devtools-ui/src/themes/index.ts b/packages/redux-devtools-ui/src/themes/index.ts index bbcf8ced..83602428 100644 --- a/packages/redux-devtools-ui/src/themes/index.ts +++ b/packages/redux-devtools-ui/src/themes/index.ts @@ -1,2 +1,2 @@ -export { default } from './default'; -export { default as material } from './material'; +export { default } from './default.js'; +export { default as material } from './material.js'; diff --git a/packages/redux-devtools-ui/src/utils/animations.ts b/packages/redux-devtools-ui/src/utils/animations.ts index f1d60830..7793905d 100644 --- a/packages/redux-devtools-ui/src/utils/animations.ts +++ b/packages/redux-devtools-ui/src/utils/animations.ts @@ -1,5 +1,5 @@ import { css, keyframes } from '@emotion/react'; -import { Theme } from '../themes/default'; +import { Theme } from '../themes/default.js'; export const spin = keyframes` to { transform: rotate(1turn); } diff --git a/packages/redux-devtools-ui/src/utils/createStyledComponent.ts b/packages/redux-devtools-ui/src/utils/createStyledComponent.ts index c2f2d2b9..6ed549b4 100644 --- a/packages/redux-devtools-ui/src/utils/createStyledComponent.ts +++ b/packages/redux-devtools-ui/src/utils/createStyledComponent.ts @@ -5,8 +5,8 @@ import styled, { } from '@emotion/styled'; import { PropsOf } from '@emotion/react'; import type { Base16Theme } from 'react-base16-styling'; -import getDefaultTheme, { Theme } from '../themes/default'; -import { ThemeFromProvider } from './theme'; +import getDefaultTheme, { Theme } from '../themes/default.js'; +import { ThemeFromProvider } from './theme.js'; type StyleFunction = FunctionInterpolation; diff --git a/packages/redux-devtools-ui/src/utils/createThemedComponent.tsx b/packages/redux-devtools-ui/src/utils/createThemedComponent.tsx index f6afcefe..fb9990dd 100644 --- a/packages/redux-devtools-ui/src/utils/createThemedComponent.tsx +++ b/packages/redux-devtools-ui/src/utils/createThemedComponent.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { withTheme } from '@emotion/react'; import type { Base16Theme } from 'react-base16-styling'; -import getDefaultTheme, { Theme } from '../themes/default'; +import getDefaultTheme, { Theme } from '../themes/default.js'; export default >( UnthemedComponent: React.ComponentProps extends { theme?: Theme } diff --git a/packages/redux-devtools-ui/src/utils/theme.ts b/packages/redux-devtools-ui/src/utils/theme.ts index ab82e23d..e7a81e9d 100644 --- a/packages/redux-devtools-ui/src/utils/theme.ts +++ b/packages/redux-devtools-ui/src/utils/theme.ts @@ -1,9 +1,9 @@ import { useEffect, useMemo, useState } from 'react'; -import * as themes from '../themes'; +import * as themes from '../themes/index.js'; import { base16Themes as baseSchemes } from 'react-base16-styling'; -import * as additionalSchemes from '../colorSchemes'; -import invertColors from '../utils/invertColors'; -import { Theme as ThemeBase } from '../themes/default'; +import * as additionalSchemes from '../colorSchemes/index.js'; +import invertColors from '../utils/invertColors.js'; +import { Theme as ThemeBase } from '../themes/default.js'; const defaultDarkScheme = baseSchemes.nicinabox; diff --git a/packages/redux-devtools-ui/tsconfig.json b/packages/redux-devtools-ui/tsconfig.json index 69085b82..dfa81a71 100644 --- a/packages/redux-devtools-ui/tsconfig.json +++ b/packages/redux-devtools-ui/tsconfig.json @@ -1,7 +1,7 @@ { - "extends": "../../tsconfig.react.base.json", + "extends": "../../tsconfig.esm.react.base.json", "compilerOptions": { - "outDir": "lib/types", + "outDir": "lib", "types": ["node"], "skipLibCheck": true }, diff --git a/packages/redux-devtools-ui/tsconfig.test.json b/packages/redux-devtools-ui/tsconfig.test.json index 434e50ff..d0d1a7be 100644 --- a/packages/redux-devtools-ui/tsconfig.test.json +++ b/packages/redux-devtools-ui/tsconfig.test.json @@ -1,5 +1,5 @@ { - "extends": "../../tsconfig.react.base.json", + "extends": "../../tsconfig.esm.react.base.json", "compilerOptions": { "types": ["jest"] }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 44849e18..1a6f8e14 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2354,9 +2354,6 @@ importers: packages/redux-devtools-ui: dependencies: - '@babel/runtime': - specifier: ^7.27.1 - version: 7.27.1 '@rjsf/core': specifier: ^5.24.10 version: 5.24.10(@rjsf/utils@5.24.10(react@19.1.0))(react@19.1.0) @@ -2394,27 +2391,6 @@ importers: specifier: ^1.3.0 version: 1.3.0 devDependencies: - '@babel/cli': - specifier: ^7.27.2 - version: 7.27.2(@babel/core@7.27.1) - '@babel/core': - specifier: ^7.27.1 - version: 7.27.1 - '@babel/eslint-parser': - specifier: ^7.27.1 - version: 7.27.1(@babel/core@7.27.1)(eslint@9.27.0) - '@babel/plugin-transform-runtime': - specifier: ^7.27.1 - version: 7.27.1(@babel/core@7.27.1) - '@babel/preset-env': - specifier: ^7.27.2 - version: 7.27.2(@babel/core@7.27.1) - '@babel/preset-react': - specifier: ^7.27.1 - version: 7.27.1(@babel/core@7.27.1) - '@babel/preset-typescript': - specifier: ^7.27.1 - version: 7.27.1(@babel/core@7.27.1) '@emotion/react': specifier: ^11.14.0 version: 11.14.0(@types/react@19.1.6)(react@19.1.0) @@ -2448,9 +2424,6 @@ importers: '@types/react': specifier: ^19.1.6 version: 19.1.6 - babel-loader: - specifier: ^10.0.0 - version: 10.0.0(@babel/core@7.27.1)(webpack@5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)) csstype: specifier: ^3.1.3 version: 3.1.3 @@ -13776,12 +13749,6 @@ snapshots: transitivePeerDependencies: - supports-color - babel-loader@10.0.0(@babel/core@7.27.1)(webpack@5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)): - dependencies: - '@babel/core': 7.27.1 - find-up: 5.0.0 - webpack: 5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4) - babel-loader@10.0.0(@babel/core@7.27.1)(webpack@5.99.9): dependencies: '@babel/core': 7.27.1 @@ -18366,18 +18333,6 @@ snapshots: term-size@2.2.1: {} - terser-webpack-plugin@5.3.14(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)(webpack@5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)): - dependencies: - '@jridgewell/trace-mapping': 0.3.25 - jest-worker: 27.5.1 - schema-utils: 4.3.2 - serialize-javascript: 6.0.2 - terser: 5.39.2 - webpack: 5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4) - optionalDependencies: - '@swc/core': 1.11.29(@swc/helpers@0.5.17) - esbuild: 0.25.4 - terser-webpack-plugin@5.3.14(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)(webpack@5.99.9): dependencies: '@jridgewell/trace-mapping': 0.3.25 @@ -18867,37 +18822,6 @@ snapshots: webpack-virtual-modules@0.6.2: {} - webpack@5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4): - dependencies: - '@types/eslint-scope': 3.7.7 - '@types/estree': 1.0.7 - '@types/json-schema': 7.0.15 - '@webassemblyjs/ast': 1.14.1 - '@webassemblyjs/wasm-edit': 1.14.1 - '@webassemblyjs/wasm-parser': 1.14.1 - acorn: 8.14.1 - browserslist: 4.24.5 - chrome-trace-event: 1.0.4 - enhanced-resolve: 5.18.1 - es-module-lexer: 1.7.0 - eslint-scope: 5.1.1 - events: 3.3.0 - glob-to-regexp: 0.4.1 - graceful-fs: 4.2.11 - json-parse-even-better-errors: 2.3.1 - loader-runner: 4.3.0 - mime-types: 2.1.35 - neo-async: 2.6.2 - schema-utils: 4.3.2 - tapable: 2.2.2 - terser-webpack-plugin: 5.3.14(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)(webpack@5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)) - watchpack: 2.4.4 - webpack-sources: 3.3.0 - transitivePeerDependencies: - - '@swc/core' - - esbuild - - uglify-js - webpack@5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)(webpack-cli@6.0.1): dependencies: '@types/eslint-scope': 3.7.7