Convert @redux-devtools/ui to ESM (#2009)

* Convert ui to ESM (WIP)

* Finish conversion

* Format

* Patch

* Change @redux-devtools/ui version to major and ESM

Update the version of @redux-devtools/ui to major and convert to ESM.
This commit is contained in:
Nathan Bierema 2026-03-07 14:20:49 -05:00 committed by GitHub
parent d61d31a690
commit 804e729e79
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
86 changed files with 229 additions and 250 deletions

View File

@ -0,0 +1,5 @@
---
'@redux-devtools/ui': major
---
Convert @redux-devtools/ui to ESM

View File

@ -1,8 +0,0 @@
{
"presets": [
["@babel/preset-env", { "targets": "defaults", "modules": false }],
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": ["@babel/plugin-transform-runtime"]
}

View File

@ -1,8 +0,0 @@
{
"presets": [
["@babel/preset-env", { "targets": "defaults" }],
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": ["@babel/plugin-transform-runtime"]
}

View File

@ -1,14 +1,14 @@
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
extensionsToTreatAsEsm: ['.ts', '.tsx'],
moduleNameMapper: {
'^(\\.{1,2}/.*)\\.js$': '$1',
'\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
},
transform: {
'^.+\\.jsx?$': 'babel-jest',
'^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],
'^.+\\.tsx?$': [
'ts-jest',
{ tsconfig: 'tsconfig.test.json', useESM: true },
],
},
transformIgnorePatterns: [
'node_modules/(?!.pnpm|@x0k/json-schema-merge|color|lodash-es|nanoid)',
],
};

View File

@ -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.28.6",
"@codemirror/lang-javascript": "^6.2.4",
"@codemirror/view": "^6.39.7",
"@lezer/highlight": "^1.2.3",
@ -60,15 +56,9 @@
"simple-element-resize-detector": "^1.3.0"
},
"devDependencies": {
"@babel/cli": "^7.28.6",
"@babel/core": "^7.29.0",
"@babel/eslint-parser": "^7.28.6",
"@babel/plugin-transform-runtime": "^7.29.0",
"@babel/preset-env": "^7.29.0",
"@babel/preset-react": "^7.28.5",
"@babel/preset-typescript": "^7.28.5",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@jest/globals": "^30.2.0",
"@storybook/addon-onboarding": "^10.2.14",
"@storybook/react-vite": "^10.2.14",
"@testing-library/dom": "^10.4.1",
@ -78,7 +68,6 @@
"@types/node": "^24.11.0",
"@types/jest": "^30.0.0",
"@types/react": "^19.2.14",
"babel-loader": "^10.0.0",
"csstype": "^3.2.3",
"jest": "^30.2.0",
"jest-environment-jsdom": "^30.2.0",

View File

@ -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',

View File

@ -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);

View File

@ -1 +1 @@
export { default } from './Button';
export { default } from './Button.js';

View File

@ -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) {

View File

@ -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;

View File

@ -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';

View File

@ -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,

View File

@ -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;

View File

@ -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;

View File

@ -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',

View File

@ -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);

View File

@ -1 +1 @@
export { default } from './ContextMenu';
export { default } from './ContextMenu.js';

View File

@ -1,5 +1,5 @@
import { css } from '@emotion/react';
import { Theme } from '../../themes/default';
import { Theme } from '../../themes/default.js';
interface StyleProps {
left: number;

View File

@ -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',

View File

@ -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);

View File

@ -1 +1 @@
export { default } from './Dialog';
export { default } from './Dialog.js';

View File

@ -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;

View File

@ -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';

View File

@ -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,

View File

@ -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 = [];

View File

@ -6,8 +6,8 @@ import { javascript } from '@codemirror/lang-javascript';
import type { ViewUpdate } from '@codemirror/view';
import { tags as t } from '@lezer/highlight';
import { useTheme } from '@emotion/react';
import type { ThemeFromProvider } from '../utils/theme';
import { defaultStyle } from './styles';
import type { ThemeFromProvider } from '../utils/theme.js';
import { defaultStyle } from './styles/index.js';
import '../../fonts/index.css';

View File

@ -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 = () => {}

View File

@ -1 +1 @@
export { default } from './Editor';
export { default } from './Editor.js';

View File

@ -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',

View File

@ -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);

View File

@ -1 +1 @@
export { default } from './Form';
export { default } from './Form.js';

View File

@ -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;

View File

@ -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 = ({

View File

@ -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;

View File

@ -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);

View File

@ -1 +1 @@
export { default } from './Notification';
export { default } from './Notification.js';

View File

@ -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) {

View File

@ -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;

View File

@ -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);

View File

@ -1 +1 @@
export { default } from './SegmentedControl';
export { default } from './SegmentedControl.js';

View File

@ -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;

View File

@ -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`

View File

@ -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,

View File

@ -1 +1 @@
export { default } from './Select';
export { default } from './Select.js';

View File

@ -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;

View File

@ -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);

View File

@ -1 +1 @@
export { default } from './Slider';
export { default } from './Slider.js';

View File

@ -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;

View File

@ -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;

View File

@ -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';

View File

@ -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,

View File

@ -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;

View File

@ -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';

View File

@ -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);

View File

@ -1,2 +1,2 @@
export { default } from './Tabs';
export type { Tab } from './TabsHeader';
export { default } from './Tabs.js';
export type { Tab } from './TabsHeader.js';

View File

@ -1,5 +1,5 @@
import styled from '@emotion/styled';
import { Position } from '../Tabs';
import { Position } from '../Tabs.js';
interface StyleProps {
position: Position;

View File

@ -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;

View File

@ -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';

View File

@ -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;

View File

@ -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;

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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;

View File

@ -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';

View File

@ -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); }

View File

@ -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<Props> = FunctionInterpolation<Props>;

View File

@ -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 <C extends React.ComponentType<any>>(
UnthemedComponent: React.ComponentProps<C> extends { theme?: Theme }

View File

@ -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;

View File

@ -1,7 +1,8 @@
import { jest } from '@jest/globals';
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from '../src';
import { Button } from '../src/index.js';
describe('Button', function () {
it('renders correctly', () => {

View File

@ -1,6 +1,7 @@
import { jest } from '@jest/globals';
import React from 'react';
import { render } from '@testing-library/react';
import { Container } from '../src';
import { Container } from '../src/index.js';
Object.defineProperty(window, 'matchMedia', {
writable: true,

View File

@ -1,8 +1,9 @@
import { jest } from '@jest/globals';
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ContextMenu } from '../src';
import { items } from '../src/ContextMenu/data';
import { ContextMenu } from '../src/index.js';
import { items } from '../src/ContextMenu/data.js';
describe('ContextMenu', function () {
it('renders correctly', () => {

View File

@ -1,7 +1,8 @@
import { jest } from '@jest/globals';
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Dialog } from '../src';
import { Dialog } from '../src/index.js';
describe('Dialog', function () {
it('renders correctly', () => {

View File

@ -1,6 +1,6 @@
import React from 'react';
import { render } from '@testing-library/react';
import { Editor } from '../src';
import { Editor } from '../src/index.js';
describe('Editor', function () {
const { container } = render(<Editor value="var a = 1;" />);

View File

@ -1,8 +1,9 @@
import { jest } from '@jest/globals';
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Form } from '../src';
import { schema, uiSchema, formData } from '../src/Form/schema';
import { Form } from '../src/index.js';
import { schema, uiSchema, formData } from '../src/Form/schema.js';
describe('Form', function () {
let random: () => number;

View File

@ -1,7 +1,8 @@
import { jest } from '@jest/globals';
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Notification } from '../src';
import { Notification } from '../src/index.js';
describe('Notification', function () {
it('renders correctly', () => {

View File

@ -1,7 +1,8 @@
import { jest } from '@jest/globals';
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { SegmentedControl } from '../src';
import { SegmentedControl } from '../src/index.js';
describe('SegmentedControl', function () {
it('renders correctly', () => {

View File

@ -1,8 +1,9 @@
import { jest } from '@jest/globals';
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Select } from '../src';
import { options } from '../src/Select/options';
import { Select } from '../src/index.js';
import { options } from '../src/Select/options.js';
describe('Select', function () {
it('renders correctly', () => {

View File

@ -1,6 +1,7 @@
import { jest } from '@jest/globals';
import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import { Slider } from '../src';
import { Slider } from '../src/index.js';
describe('Slider', function () {
it('renders correctly', () => {

View File

@ -1,8 +1,9 @@
import { jest } from '@jest/globals';
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Tabs } from '../src';
import { tabs, simple10Tabs } from '../src/Tabs/data';
import { Tabs } from '../src/index.js';
import { tabs, simple10Tabs } from '../src/Tabs/data.js';
describe('Tabs', function () {
it('renders correctly', () => {

View File

@ -1,6 +1,6 @@
import React from 'react';
import { render } from '@testing-library/react';
import { Toolbar, Divider, Spacer, Button } from '../src';
import { Toolbar, Divider, Spacer, Button } from '../src/index.js';
describe('Toolbar', function () {
it('renders correctly', () => {

View File

@ -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
},

View File

@ -1,5 +1,5 @@
{
"extends": "../../tsconfig.react.base.json",
"extends": "../../tsconfig.esm.react.base.json",
"compilerOptions": {
"types": ["jest"]
},

View File

@ -0,0 +1,14 @@
diff --git a/cjs/package.json b/cjs/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..729ac4d93b7f2d9be36b44525f02ff6555f9383a
--- /dev/null
+++ b/cjs/package.json
@@ -0,0 +1 @@
+{"type":"commonjs"}
diff --git a/esm/package.json b/esm/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..089153bcb5adf57dc25f206a9dad3114c9cff80d
--- /dev/null
+++ b/esm/package.json
@@ -0,0 +1 @@
+{"type":"module"}

View File

@ -11,6 +11,9 @@ patchedDependencies:
'@dnd-kit/sortable':
hash: e47dc0c4389a046873ebf71cee394de1946ef0e0ee96c171579932908f628d7f
path: patches/@dnd-kit__sortable.patch
'@uiw/codemirror-themes':
hash: 0807c91492c1c4a6d78cf0e0657f8658d883398c3e1fa9b0eb9f3c3edaca4f6c
path: patches/@uiw__codemirror-themes.patch
importers:
@ -2351,9 +2354,6 @@ importers:
packages/redux-devtools-ui:
dependencies:
'@babel/runtime':
specifier: ^7.28.6
version: 7.28.6
'@codemirror/lang-javascript':
specifier: ^6.2.4
version: 6.2.5
@ -2383,7 +2383,7 @@ importers:
version: 1.3.3
'@uiw/codemirror-themes':
specifier: ^4.25.7
version: 4.25.7(@codemirror/language@6.12.2)(@codemirror/state@6.5.4)(@codemirror/view@6.39.16)
version: 4.25.7(patch_hash=0807c91492c1c4a6d78cf0e0657f8658d883398c3e1fa9b0eb9f3c3edaca4f6c)(@codemirror/language@6.12.2)(@codemirror/state@6.5.4)(@codemirror/view@6.39.16)
'@uiw/react-codemirror':
specifier: ^4.25.4
version: 4.25.7(@babel/runtime@7.28.6)(@codemirror/autocomplete@6.20.1)(@codemirror/language@6.12.2)(@codemirror/lint@6.9.5)(@codemirror/search@6.6.0)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.16)(codemirror@6.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@ -2403,33 +2403,15 @@ importers:
specifier: ^1.3.0
version: 1.3.0
devDependencies:
'@babel/cli':
specifier: ^7.28.6
version: 7.28.6(@babel/core@7.29.0)
'@babel/core':
specifier: ^7.29.0
version: 7.29.0
'@babel/eslint-parser':
specifier: ^7.28.6
version: 7.28.6(@babel/core@7.29.0)(eslint@9.39.3)
'@babel/plugin-transform-runtime':
specifier: ^7.29.0
version: 7.29.0(@babel/core@7.29.0)
'@babel/preset-env':
specifier: ^7.29.0
version: 7.29.0(@babel/core@7.29.0)
'@babel/preset-react':
specifier: ^7.28.5
version: 7.28.5(@babel/core@7.29.0)
'@babel/preset-typescript':
specifier: ^7.28.5
version: 7.28.5(@babel/core@7.29.0)
'@emotion/react':
specifier: ^11.14.0
version: 11.14.0(@types/react@19.2.14)(react@19.2.4)
'@emotion/styled':
specifier: ^11.14.1
version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
'@jest/globals':
specifier: ^30.2.0
version: 30.2.0
'@storybook/addon-onboarding':
specifier: ^10.2.14
version: 10.2.14(storybook@10.2.14(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
@ -2457,9 +2439,6 @@ importers:
'@types/react':
specifier: ^19.2.14
version: 19.2.14
babel-loader:
specifier: ^10.0.0
version: 10.0.0(@babel/core@7.29.0)(webpack@5.105.3(esbuild@0.27.3))
csstype:
specifier: ^3.2.3
version: 3.2.3
@ -13823,7 +13802,7 @@ snapshots:
'@codemirror/state': 6.5.4
'@codemirror/view': 6.39.16
'@uiw/codemirror-themes@4.25.7(@codemirror/language@6.12.2)(@codemirror/state@6.5.4)(@codemirror/view@6.39.16)':
'@uiw/codemirror-themes@4.25.7(patch_hash=0807c91492c1c4a6d78cf0e0657f8658d883398c3e1fa9b0eb9f3c3edaca4f6c)(@codemirror/language@6.12.2)(@codemirror/state@6.5.4)(@codemirror/view@6.39.16)':
dependencies:
'@codemirror/language': 6.12.2
'@codemirror/state': 6.5.4
@ -14860,12 +14839,6 @@ snapshots:
transitivePeerDependencies:
- supports-color
babel-loader@10.0.0(@babel/core@7.29.0)(webpack@5.105.3(esbuild@0.27.3)):
dependencies:
'@babel/core': 7.29.0
find-up: 5.0.0
webpack: 5.105.3(esbuild@0.27.3)
babel-loader@10.0.0(@babel/core@7.29.0)(webpack@5.105.3):
dependencies:
'@babel/core': 7.29.0
@ -19556,6 +19529,7 @@ snapshots:
webpack: 5.105.3(esbuild@0.27.3)
optionalDependencies:
esbuild: 0.27.3
optional: true
terser-webpack-plugin@5.3.16(esbuild@0.27.3)(webpack@5.105.3):
dependencies:
@ -20112,6 +20086,7 @@ snapshots:
- '@swc/core'
- esbuild
- uglify-js
optional: true
webpack@5.105.3(esbuild@0.27.3)(webpack-cli@6.0.1):
dependencies:

View File

@ -10,6 +10,7 @@ packages:
- packages/redux-devtools-inspector-monitor-test-tab/demo
- packages/redux-devtools-rtk-query-monitor/demo
- packages/redux-devtools-slider-monitor/examples/todomvc
onlyBuiltDependencies:
- '@apollo/protobufjs'
- '@swc/core'
@ -19,6 +20,8 @@ onlyBuiltDependencies:
- msw
- sqlite3
- unrs-resolver
patchedDependencies:
'@dnd-kit/core': patches/@dnd-kit__core.patch
'@dnd-kit/sortable': patches/@dnd-kit__sortable.patch
'@uiw/codemirror-themes': patches/@uiw__codemirror-themes.patch