Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/next #220

Open
wants to merge 17 commits into
base: next
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 35 additions & 27 deletions CHANGELOG.md
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,6 +43,14 @@ 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

Expand All @@ -38,15 +68,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 +104,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
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
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
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>
);
};
1 change: 1 addition & 0 deletions src/components/Icon/canonicalIconNames.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const canonicalIcons = {

"artefact-chatlog": icons.Chat,
"artefact-commit": icons.Commit,
"artefact-customtask-deleteprojectfiles": icons.TrashCan,
"artefact-customtask": icons.Script,
"artefact-dataset-csv": icons.Csv,
"artefact-dataset-eccencadataplatform": icons.DataVis_1,
Expand Down
20 changes: 16 additions & 4 deletions src/components/Typography/HtmlContentBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,29 @@ import * as TypographyClassNames from "./classnames";
// FIXME: CMEM-3742: comment + add story

export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivElement> {
className?: string;
/**
* Content block uses smaller font size.
*/
small?: boolean;
/**
* To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line.
*/
linebreakForced?: boolean;
/**
* No automatic line breaks are inserted.
*/
linebreakPrevented?: boolean;
/**
* Sub elements like code blocks are displayed without own scrollbars.
* This option may infer with `linebreakForced` and `linebreakPrevented`.
*/
noScrollbarsOnChildren?: boolean;
/** currently not supported */
large?: boolean;
/** currently not supported */
muted?: boolean;
/** currently not supported */
disabled?: boolean;
linebreakForced?: boolean;
linebreakPrevented?: boolean;
noScrollbarsOnChildren?: boolean;
}

export const HtmlContentBlock = ({
Expand Down
50 changes: 50 additions & 0 deletions src/components/Typography/stories/HtmlContentBlock.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React from "react";
import LoremIpsum, { loremIpsum } from "react-lorem-ipsum";
import { Meta, StoryFn } from "@storybook/react";

import { HtmlContentBlock } from "../../../index";

const whiteSpaceSizeOptions = {
control: "select",
options: {
"not set": undefined,
tiny: "tiny",
small: "small",
regular: "regular",
large: "large",
xlarge: "xlarge",
},
};

export default {
title: "Components/Typography/HtmlContentBlock",
component: HtmlContentBlock,
argTypes: {
children: { control: false },
},
} as Meta<typeof HtmlContentBlock>;

const Template: StoryFn<typeof HtmlContentBlock> = (args) => <HtmlContentBlock {...args} />;

const testContent = (
<>
<LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
<p>
<strong>
{loremIpsum({
p: 2,
avgSentencesPerParagraph: 4,
random: false,
})
.toString()
.replaceAll(" ", "")}
</strong>
</p>
<LoremIpsum p={3} avgSentencesPerParagraph={5} random={false} />
</>
);

export const Default = Template.bind({});
Default.args = {
children: testContent,
};
Loading