diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 48541478e6..7e2acfdf76 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -2,7 +2,85 @@ import { PortalProvider } from '@semcore/base-components'; import type { Preview } from '@storybook/react-vite'; import React from 'react'; -// import '@semcore/theme/lib/highlights-light.css'; +type PreviewDecorator = NonNullable[number]; + +type StorybookStory = Parameters[0]; + +type StorybookDecoratorParams = Parameters[1] & { + globals: Record & { + theme?: 'new' | 'old'; + strictMode?: 'on' | 'off'; + }; + parameters: Record & { + layout?: string; + }; +}; + +const withStrictMode = ( + Story: StorybookStory, + params: StorybookDecoratorParams, +) => { + return params.globals.strictMode === 'on' + ? ( + + + + ) + : ; +}; + +const withLayout = ( + Story: StorybookStory, + params: StorybookDecoratorParams, +) => { + if (params.parameters.layout === 'fullscreen') { + return ; + } + + return ( +
+
+ +
+
+ ); +}; + +const withTheme = ( + Story: StorybookStory, + params: StorybookDecoratorParams, +) => { + const stylesheet = params.globals.theme === 'new' + ? 'assets/theme/light.css' + : 'assets/core/light.css'; + + const stylesheetHighlight = params.globals.theme === 'new' + ? 'assets/theme/highlights-light.css' + : 'assets/core/highlights-light.css'; + + return ( + <> + + + + + ); +}; + +const withPortalProvider = ( + Story: StorybookStory, + params: StorybookDecoratorParams, +) => { + const rootRef = React.useRef(null); + + return ( + +
+ +
+
+ ); +}; const preview: Preview = { parameters: { @@ -51,52 +129,35 @@ const preview: Preview = { dynamicTitle: true, }, }, + strictMode: { + description: 'React StrictMode', + toolbar: { + title: 'StrictMode', + icon: 'circle', + items: [ + { + value: 'off', + title: 'StrictMode off', + }, + { + value: 'on', + title: 'StrictMode on', + }, + ], + dynamicTitle: true, + }, + }, }, initialGlobals: { theme: 'new', + strictMode: 'off', }, decorators: [ - (Story, params) => { - const rootRef = React.useRef(null); - const stylesheet = params.globals.theme === 'new' - ? 'assets/theme/light.css' - : 'assets/core/light.css'; - - const stylesheetHighlight = params.globals.theme === 'new' - ? 'assets/theme/highlights-light.css' - : 'assets/core/highlights-light.css'; - - if (params.parameters.layout === 'fullscreen') { - return ( - <> - - - -
- -
-
- - ); - } - - return ( - <> - - -
-
- -
- -
-
-
-
- - ); - }, + withStrictMode, + withTheme, + withLayout, + withPortalProvider, ], }; diff --git a/semcore/bulk-textarea/src/BulkTextarea.tsx b/semcore/bulk-textarea/src/BulkTextarea.tsx index 20949ebd89..003e9a5272 100644 --- a/semcore/bulk-textarea/src/BulkTextarea.tsx +++ b/semcore/bulk-textarea/src/BulkTextarea.tsx @@ -240,7 +240,7 @@ class BulkTextareaRoot extends Component< handleClickClearAll = (e: Event) => { this.handlers.showErrors(false); this.handlers.errors([]); - this.setState({ errorIndex: -1 }); + this.setState({ errorIndex: -1, isEmptyText: true }); // @ts-ignore this.handlers.value('', e); this.handlers.state('normal'); diff --git a/semcore/bulk-textarea/src/components/InputField/InputField.tsx b/semcore/bulk-textarea/src/components/InputField/InputField.tsx index 1aeaeed44e..35c29dcbd8 100644 --- a/semcore/bulk-textarea/src/components/InputField/InputField.tsx +++ b/semcore/bulk-textarea/src/components/InputField/InputField.tsx @@ -110,8 +110,9 @@ class InputField extends Component< } componentDidMount() { - const { autoFocus, disabled, readonly } = this.asProps; + const { autoFocus, disabled } = this.asProps; + this.textarea = this.createContentEditableElement(this.asProps); this.containerRef.current?.append(this.textarea); this.handleValueOutChange(); @@ -243,6 +244,7 @@ class InputField extends Component< componentWillUnmount() { this.removeEventListeners(this.textarea); + this.containerRef.current?.removeChild(this.textarea); this.observer.disconnect(); } diff --git a/stories/components/bulk-textarea/tests/bulk-textarea.stories.tsx b/stories/components/bulk-textarea/tests/bulk-textarea.stories.tsx index 7ab2425e8c..8ca3f2236a 100644 --- a/stories/components/bulk-textarea/tests/bulk-textarea.stories.tsx +++ b/stories/components/bulk-textarea/tests/bulk-textarea.stories.tsx @@ -44,6 +44,7 @@ const sharedArgTypes = { const basicPropsArgTypes = { ...sharedArgTypes, + strictMode: { control: { type: 'boolean' } }, pasteDelimiter: { control: { type: 'select' }, options: ['newline', 'comma', 'semicolon', 'space', 'undefined'],