Skip to content

Commit

Permalink
Merge pull request #222 from eccenca/change/releaseBranch24Delta
Browse files Browse the repository at this point in the history 
v24 pre-release changes
  • Loading branch information
@andreas-schultz
andreas-schultz authored Nov 28, 2024
2 parents 4edf55b + 655be78 commit 1401c01
Show file tree
Hide file tree
Showing 18 changed files with 1,798 additions and 1,383 deletions.
66 changes: 39 additions & 27 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,28 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p

## [Unreleased]

This is a major release, and it might be not compatibel with your current usage of our library. Please read about the necessary changes in the section about how to migrate.

### Migration from v23 to v24

- upgrade Typescript to v5
- upgrade Node to at least v18, see **Changed** section for more info about it
- remove deprecated components, properties and imports from your project, if the info cannot be found here then it was already mentioned in **Deprecated** sections of the past changelogs
- `<GridColumn/>`
- `full`: was deprecated and now removed because it always uses full width if it is the only column and does not have any othe size config
- `<Notification/>`
- `fullWidth`: was deprecated and now removed, use `flexWidth` as replacement
- `iconName`: was deprecated and now removed, use `icon` property
- `<Table/>`
- `size`: use only "small", "medium" or "large" as value
- `<Tag/>`
- `emphasized`: was deprecated and now removed, use `minimal=false` plus `emphasis="stronger"` instead
- `IconSized` type: use `CarbonIconType`
- `TimeUnits` type: use `ElapsedDateTimeDisplayUnits`
- `MarkdownParserProps` interface: use `MarkdownProps`
- `elapsedTimeSegmented` function: use `elapsedDateTimeDisplayUtils.elapsedTimeSegmented`
- `simplifiedElapsedTime` function: use `elapsedDateTimeDisplayUtils.simplifiedElapsedTime`

### Added

- `<StringPreviewContentBlobToggler />`:
Expand All @@ -21,9 +43,21 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
- `<Label />`
- `emphasis` property to control visual appearance of the label text
- basic Storybook example for `<Application* />` components
- `<CodeEditor />`
- `setEditorView` option for compatibility to Codemirror v6
- `supportCodeFolding` optional property to fold code for the supported modes e.g: `xml`, `json`, etc.
- `shouldHighlightActiveLine` optional property to highlight active line where the cursor is currently in.
- `shouldHaveMinimalSetup` optional property that imports codemirror's base minimal configurations.
- `additionalExtensions` optional property for additional extensions to customize the editor further.
- `<Markdown />`
- `htmlContentBlockProps` can now be used to configure the wrapper around the Markdown content
- `$eccgui-selector-text-spot-highlight` config variable to specify selector that is used to create shortly highlighted spots
- it is highlighted when the selector is also active local anchor target or if it has the `.eccgui-typography--spothighlight` class attached to it

### Fixed

- toggling on/off the `<HandleTools/>` was corrected, they kept displayed after re-entering with the cursor

### Changed

- GUI elements library needs node 18 or an higher version because dependencies were upgraded
Expand All @@ -38,15 +72,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
- upgrade to Storybook v8
- include a few patches for actions, see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function
- allow `next` and `legacy` as branch names
- CodeMirror `setInstance` interface changed to `setEditorView` for semantic compatibility to version 6
- switch icons for `item-clone` and `item-copy` to Carbon's `<Replicate/>` and `<Copy/>`
- Added new properties to `<CodeMirror>`
- `supportCodeFolding` optional property to fold code for the supported modes e.g: xml, json etc.
- `shouldHighlightActiveLine` optional property to highlight active line where the cursor is currently in.
- `shouldHaveMinimalSetup` optional property that imports codemirror's base minimal configurations.
- `additionalExtensions` optional property for additional extensions to customize the editor further.
- `<CodeEditor />`
- `setInstance` interface changed to `setEditorView` for semantic compatibility to Codemirror v6
- `<BreadcrumbItem/>`
- link color and separation char were adjusted
- `<Markdown/>`
- align blocks for language specific code to default code blocks
- switch icons for `item-clone` and `item-copy` to Carbon's `<Replicate/>` and `<Copy/>`

### Deprecated

Expand Down Expand Up @@ -76,26 +108,6 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
- instead of `MyMultiSuggest = MultiSuggestField.ofType<MyType>()` use directly `<MultiSuggestField<MyType> {...props} />`
- `MultiSuggestField.ofType` also returns the original BlueprintJS `MultiSelect` element, not our version!

### Migration from v23 to v24

- upgrade Typescript to v5
- upgrade Node to at least v18, see **Changed** section for more info about it
- remove deprecated components, properties and imports from your project, if the info cannot be found here then it was already mentioned in **Deprecated** sections of the past changelogs
- `<GridColumn/>`
- `full`: was deprecated and now removed because it always uses full width if it is the only column and does not have any othe size config
- `<Notification/>`
- `fullWidth`: was deprecated and now removed, use `flexWidth` as replacement
- `iconName`: was deprecated and now removed, use `icon` property
- `<Table/>`
- `size`: use only "small", "medium" or "large" as value
- `<Tag/>`
- `emphasized`: was deprecated and now removed, use `minimal=false` plus `emphasis="stronger"` instead
- `IconSized` type: use `CarbonIconType`
- `TimeUnits` type: use `ElapsedDateTimeDisplayUnits`
- `MarkdownParserProps` interface: use `MarkdownProps`
- `elapsedTimeSegmented` function: use `elapsedDateTimeDisplayUtils.elapsedTimeSegmented`
- `simplifiedElapsedTime` function: use `elapsedDateTimeDisplayUtils.simplifiedElapsedTime`

## [23.8.0] - 2024-08-19

### Added
Expand Down
50 changes: 25 additions & 25 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@eccenca/gui-elements",
"description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
"version": "24.0.0-rc.0",
"version": "24.0.0-rc.5",
"license": "Apache-2.0",
"homepage": "https://github.com/eccenca/gui-elements",
"bugs": "https://github.com/eccenca/gui-elements/issues",
Expand Down Expand Up @@ -70,52 +70,52 @@
"@blueprintjs/select": "^5.2.2",
"@carbon/icons": "^11.47.1",
"@carbon/react": "^1.64.1",
"@mavrin/remark-typograf": "^2.2.0",
"codemirror": "^6.0.1",
"@codemirror/legacy-modes": "^6.4.1",
"@codemirror/lang-markdown": "^6.2.5",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/lang-markdown": "^6.3.1",
"@codemirror/lang-xml": "^6.1.0",
"xml-formatter": "^3.6.3",
"@codemirror/legacy-modes": "^6.4.2",
"@mavrin/remark-typograf": "^2.2.0",
"codemirror": "^6.0.1",
"color": "^4.2.3",
"compute-scroll-into-view": "^3.1.0",
"lodash": "^4.17.21",
"re-resizable": "6.9.9",
"re-resizable": "^6.10.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-flow-renderer": "9.7.4",
"react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
"react-inlinesvg": "^3.0.3",
"react-markdown": "^8.0.7",
"react-syntax-highlighter": "^15.5.0",
"react-syntax-highlighter": "^15.6.1",
"rehype-raw": "^6.1.1",
"remark-definition-list": "^1.2.0",
"remark-gfm": "^3.0.1",
"remark-parse": "^10.0.2",
"reset-css": "^5.0.2",
"unified": "^11.0.5",
"wicg-inert": "^3.1.3"
"wicg-inert": "^3.1.3",
"xml-formatter": "^3.6.3"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/core": "^7.26.0",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-proposal-private-methods": "^7.16.11",
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@babel/preset-env": "^7.25.4",
"@babel/preset-flow": "^7.24.7",
"@babel/preset-react": "^7.24.7",
"@babel/preset-typescript": "^7.24.7",
"@storybook/addon-actions": "^8.2.9",
"@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-jest": "^8.2.9",
"@storybook/addon-links": "^8.2.9",
"@babel/preset-env": "^7.26.0",
"@babel/preset-flow": "^7.25.9",
"@babel/preset-react": "^7.25.9",
"@babel/preset-typescript": "^7.26.0",
"@storybook/addon-actions": "^8.4.3",
"@storybook/addon-essentials": "^8.4.3",
"@storybook/addon-jest": "^8.4.3",
"@storybook/addon-links": "^8.4.3",
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
"@storybook/cli": "^8.2.9",
"@storybook/cli": "^8.4.3",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^8.2.9",
"@storybook/react-webpack5": "^8.2.9",
"@storybook/test": "^8.2.9",
"@testing-library/jest-dom": "^6.5.0",
"@storybook/react": "^8.4.3",
"@storybook/react-webpack5": "^8.4.3",
"@storybook/test": "^8.4.3",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^12.1.2",
"@types/codemirror": "^5.60.15",
"@types/color": "^3.0.6",
Expand All @@ -125,7 +125,7 @@
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"babel-jest": "^29.7.0",
"chromatic": "^11.7.1",
"chromatic": "^11.18.1",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.35.0",
"eslint-plugin-react-hooks": "^4.6.2",
Expand All @@ -144,7 +144,7 @@
"rimraf": "^5.0.10",
"sass": "1.62.1",
"sass-loader": "10.3.1",
"storybook": "^8.2.9",
"storybook": "^8.4.3",
"stylelint": "^15.11.0",
"stylelint-config-recess-order": "^4.6.0",
"stylelint-config-standard-scss": "^9.0.0",
Expand Down
6 changes: 6 additions & 0 deletions src/cmem/markdown/Markdown.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,12 @@ another code block
{{templateVar}}
\`\`\`
\`\`\`json
{
"json": "varname"
}
\`\`\`
> This is a block quote.
>
> With 2 paragraphs.
Expand Down
28 changes: 21 additions & 7 deletions src/cmem/markdown/Markdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import React from "react";
import ReactMarkdown from "react-markdown";
import { PluggableList } from "react-markdown/lib/react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { materialLight } from "react-syntax-highlighter/dist/esm/styles/prism";
// @ts-ignore: No declaration file for module (TODO: should be @ts-expect-error but GUI elements is used inside project with `noImplicitAny=false`)
import remarkTypograf from "@mavrin/remark-typograf";
import rehypeRaw from "rehype-raw";
import { remarkDefinitionList } from "remark-definition-list";
import remarkGfm from "remark-gfm";

import { HtmlContentBlock, TestableComponent } from "../../index";
import { CLASSPREFIX as eccgui } from "../../configuration/constants";
import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";

export interface MarkdownProps extends TestableComponent {
children: string;
Expand All @@ -28,7 +28,8 @@ export interface MarkdownProps extends TestableComponent {
*/
allowedElements?: string[];
/**
* Do not wrap it in a content block element.
* Do not wrap content in a `HtmlContentBlock` component.
* This option is ignored if `htmlContentBlockProps` or `data-test-id` is given.
*/
inheritBlock?: boolean;
/**
Expand All @@ -41,6 +42,10 @@ export interface MarkdownProps extends TestableComponent {
* Set to `false` to disable this feature.
*/
linkTargetName?: false | string;
/**
* Configure the `HtmlContentBlock` component that is automatically used as wrapper for the parsed Markdown content.
*/
htmlContentBlockProps?: Omit<HtmlContentBlockProps, "children" | "className" | "data-test-id">;
}

const configDefault = {
Expand Down Expand Up @@ -102,6 +107,7 @@ export const Markdown = ({
allowedElements,
reHypePlugins,
linkTargetName = "_mdref",
htmlContentBlockProps,
...otherProps
}: MarkdownProps) => {
const configHtml = allowHtml
Expand Down Expand Up @@ -134,15 +140,17 @@ export const Markdown = ({
: undefined,
components: {
code(props: any) {
const { children, className, node, ...rest } = props;
const { children, className, node, inline, ...rest } = props;
const match = /language-(\w+)/.exec(className || "");
return match ? (
<SyntaxHighlighter
{...rest}
PreTag="div"
codeTagProps={{
className: `${eccgui}-markdown__syntaxhighlighter`,
}}
children={String(children).replace(/\n$/, "")}
language={match[1]}
style={materialLight}
/>
) : (
<code {...rest} className={className}>
Expand All @@ -160,9 +168,15 @@ export const Markdown = ({

// @ts-ignore because against the lib spec it does not allow a function for linkTarget.
const markdownDisplay = <ReactMarkdown {...reactMarkdownProperties} />;
return inheritBlock ? (
return inheritBlock && !(otherProps["data-test-id"] || htmlContentBlockProps) ? (
markdownDisplay
) : (
<HtmlContentBlock data-test-id={otherProps["data-test-id"]}>{markdownDisplay}</HtmlContentBlock>
<HtmlContentBlock
{...htmlContentBlockProps}
className={`${eccgui}-markdown__container`}
data-test-id={otherProps["data-test-id"]}
>
{markdownDisplay}
</HtmlContentBlock>
);
};
12 changes: 11 additions & 1 deletion src/components/Application/stories/Application.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
Button,
Depiction,
Icon,
OverviewItem,
WorkspaceHeader,
} from "../../../index";

Expand Down Expand Up @@ -76,7 +77,16 @@ const TemplateBasicExample: StoryFn<typeof ApplicationBasicExample> = (args) =>
<code>Menu</code> with <code>MenuItem</code>s.
</ApplicationSidebarNavigation>

<WorkspaceHeader id={"ApplicationBasicExample"} />
<WorkspaceHeader id={"ApplicationBasicExample"}>
<OverviewItem>
<Depiction
image={<Icon name={"application-homepage"} />}
backgroundColor={"dark"}
padding="medium"
ratio="1:1"
/>
</OverviewItem>
</WorkspaceHeader>

<ApplicationToolbar>
<ApplicationToolbarSection>
Expand Down
57 changes: 31 additions & 26 deletions src/components/AutoSuggestion/AutoSuggestion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,15 +240,9 @@ const AutoSuggestion = ({
}, [cm, editorState]);

const dispatch = // eslint-disable-next-line @typescript-eslint/no-empty-function
(typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}) as EditorView["dispatch"];

React.useEffect(() => {
if (initialValue != null && cm) {
dispatch({
changes: { from: 0, to: cm?.state?.doc.length, insert: initialValue },
});
}
}, [initialValue, cm]);
(
typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}
) as EditorView["dispatch"];

React.useEffect(() => {
editorState.dropdownShown = shouldShowDropdown;
Expand Down Expand Up @@ -610,23 +604,34 @@ const AutoSuggestion = ({
);

const codeEditor = React.useMemo(() => {
return <ExtendedCodeEditor
mode={mode}
setCM={setCM}
onChange={handleChange}
onCursorChange={handleCursorChange}
initialValue={initialValue}
onFocusChange={handleInputFocus}
onKeyDown={handleInputEditorKeyPress}
enableTab={useTabForCompletions}
placeholder={placeholder}
onSelection={onSelection}
showScrollBar={showScrollBar}
multiline={multiline}
onMouseDown={handleInputMouseDown}
/>

}, [mode, setCM, handleChange, initialValue, useTabForCompletions, placeholder, showScrollBar, multiline, handleInputMouseDown])
return (
<ExtendedCodeEditor
mode={mode}
setCM={setCM}
onChange={handleChange}
onCursorChange={handleCursorChange}
initialValue={initialValue}
onFocusChange={handleInputFocus}
onKeyDown={handleInputEditorKeyPress}
enableTab={useTabForCompletions}
placeholder={placeholder}
onSelection={onSelection}
showScrollBar={showScrollBar}
multiline={multiline}
onMouseDown={handleInputMouseDown}
/>
);
}, [
mode,
setCM,
handleChange,
initialValue,
useTabForCompletions,
placeholder,
showScrollBar,
multiline,
handleInputMouseDown,
]);

const hasError = !!value.current && !pathIsValid && !pathValidationPending;
const autoSuggestionInput = (
Expand Down
Loading

0 comments on commit 1401c01

Please sign in to comment.