From 0c055ca6df256e9e87c95b6c9903b2b567357324 Mon Sep 17 00:00:00 2001 From: Konstantin Schaper Date: Thu, 21 Sep 2023 11:26:41 +0200 Subject: [PATCH] Add new api for interactive card details Committed-by: Rene Pfeuffer --- gradle/changelog/card_click_targets.yaml | 2 + scm-ui/ui-buttons/src/Button.stories.tsx | 10 +- .../src/__snapshots__/storyshots.test.ts.snap | 72 ++++----- .../src/markdown/markdownExtensions.ts | 5 +- scm-ui/ui-extensions/src/extensionPoints.tsx | 6 +- scm-ui/ui-extensions/src/extractProps.ts | 7 +- scm-ui/ui-layout/package.json | 1 + .../src/card-list/CardList.stories.tsx | 141 +++++++++++------- scm-ui/ui-layout/src/card/Card.stories.tsx | 105 +++++++++---- scm-ui/ui-layout/src/card/Card.tsx | 13 +- scm-ui/ui-layout/src/card/CardDetail.tsx | 90 ++++++++++- scm-ui/ui-layout/src/card/CardRow.tsx | 6 +- .../src/collapsible/Collapsible.stories.tsx | 7 +- scm-ui/ui-layout/src/index.ts | 21 ++- .../ui-overlays/src/dialog/Dialog.stories.tsx | 3 +- scm-ui/ui-overlays/src/menu/Menu.stories.tsx | 3 +- .../ui-webapp/src/containers/OmniSearch.tsx | 4 +- .../branches/components/AheadBehindTag.tsx | 5 +- .../branches/components/BranchListItem.tsx | 8 +- 19 files changed, 337 insertions(+), 172 deletions(-) create mode 100644 gradle/changelog/card_click_targets.yaml diff --git a/gradle/changelog/card_click_targets.yaml b/gradle/changelog/card_click_targets.yaml new file mode 100644 index 0000000000..d4992b547a --- /dev/null +++ b/gradle/changelog/card_click_targets.yaml @@ -0,0 +1,2 @@ +- type: added + description: New api for interactive card details diff --git a/scm-ui/ui-buttons/src/Button.stories.tsx b/scm-ui/ui-buttons/src/Button.stories.tsx index 72fe5f1e6d..48bc1ea507 100644 --- a/scm-ui/ui-buttons/src/Button.stories.tsx +++ b/scm-ui/ui-buttons/src/Button.stories.tsx @@ -22,7 +22,7 @@ * SOFTWARE. */ -import React from "react"; +import React, { ComponentProps } from "react"; import { Button as ButtonComponent, @@ -34,8 +34,6 @@ import { import StoryRouter from "storybook-react-router"; import { StoryFn } from "@storybook/react"; -type ExtractProps = T extends React.ComponentType ? U : never; - // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export export default { title: "Components", @@ -58,11 +56,11 @@ export default { }; // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args -const ButtonTemplate: StoryFn> = (args) => ; -const LinkButtonTemplate: StoryFn> = (args) => ( +const ButtonTemplate: StoryFn> = (args) => ; +const LinkButtonTemplate: StoryFn> = (args) => ( ); -const ExternalLinkButtonTemplate: StoryFn> = (args) => ( +const ExternalLinkButtonTemplate: StoryFn> = (args) => ( ); diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index aba8b86c65..24c3a4ce08 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -71110,7 +71110,7 @@ exports[`Storyshots Repositories/RepositoryEntry Archived 1`] = `
The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
= ExtractProps< +export type ProtocolLinkRendererProps = ComponentProps< extensionPoints.MarkdownLinkProtocolRenderer["type"]["renderer"] >; diff --git a/scm-ui/ui-extensions/src/extensionPoints.tsx b/scm-ui/ui-extensions/src/extensionPoints.tsx index d0a1da1182..ddfc2d474a 100644 --- a/scm-ui/ui-extensions/src/extensionPoints.tsx +++ b/scm-ui/ui-extensions/src/extensionPoints.tsx @@ -22,7 +22,7 @@ * SOFTWARE. */ -import React, { ComponentType, FC, ReactNode } from "react"; +import React, { ComponentProps, ComponentType, FC, ReactNode } from "react"; import { Branch, BranchDetails, @@ -49,8 +49,6 @@ import { } from "@scm-manager/ui-types"; import { ExtensionPointDefinition } from "./binder"; import { RenderableExtensionPointDefinition, SimpleRenderableDynamicExtensionPointDefinition } from "./ExtensionPoint"; -import ExtractProps from "./extractProps"; -import { useGeneratedId } from "@scm-manager/ui-components"; type RepositoryCreatorSubFormProps = { repository: RepositoryCreation; @@ -59,7 +57,7 @@ type RepositoryCreatorSubFormProps = { disabled?: boolean; }; -export type RepositoryCreatorComponentProps = ExtractProps; +export type RepositoryCreatorComponentProps = ComponentProps; /** * @deprecated use {@link RepositoryCreator}`["type"]` instead diff --git a/scm-ui/ui-extensions/src/extractProps.ts b/scm-ui/ui-extensions/src/extractProps.ts index 3b8f42c977..91f5e73940 100644 --- a/scm-ui/ui-extensions/src/extractProps.ts +++ b/scm-ui/ui-extensions/src/extractProps.ts @@ -21,8 +21,11 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -import React from "react"; +import { ComponentProps, JSXElementConstructor } from "react"; -type ExtractProps = T extends React.ComponentType ? U : never; +/** + * @deprecated Use {@link ComponentProps} directly instead + */ +type ExtractProps> = ComponentProps; export default ExtractProps; diff --git a/scm-ui/ui-layout/package.json b/scm-ui/ui-layout/package.json index 3e29897dcd..2406a07259 100644 --- a/scm-ui/ui-layout/package.json +++ b/scm-ui/ui-layout/package.json @@ -37,6 +37,7 @@ "classnames": "2", "react": "17", "react-dom": "17", + "react-router-dom": "5", "styled-components": "5", "@scm-manager/ui-components": "2.46.2-SNAPSHOT" }, diff --git a/scm-ui/ui-layout/src/card-list/CardList.stories.tsx b/scm-ui/ui-layout/src/card-list/CardList.stories.tsx index 3975253212..f335006626 100644 --- a/scm-ui/ui-layout/src/card-list/CardList.stories.tsx +++ b/scm-ui/ui-layout/src/card-list/CardList.stories.tsx @@ -23,16 +23,15 @@ */ import StoryRouter from "storybook-react-router"; -import { ComponentMeta, StoryFn } from "@storybook/react"; -import React, { ComponentProps } from "react"; -import { ExtractProps } from "@scm-manager/ui-extensions"; +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import React from "react"; import { Link } from "react-router-dom"; import CardList, { CardListBox, CardListCard } from "./CardList"; import CardTitle from "../card/CardTitle"; import { Menu } from "@scm-manager/ui-overlays"; import { Icon } from "@scm-manager/ui-buttons"; -import CardRow from "../card/CardRow"; -import { CardDetail, CardDetailLabel, CardDetails, CardDetailTag } from "../card/CardDetail"; +import CardRow, { SecondaryRow } from "../card/CardRow"; +import { CardDetail, CardDetailLabel, CardDetails, CardDetailTag, CardLinkDetail } from "../card/CardDetail"; export default { title: "CardList", @@ -40,15 +39,8 @@ export default { decorators: [StoryRouter()], } as ComponentMeta; -const Template: StoryFn> = (args) => ; - -export const Default = Template.bind({}); -// More on args: https://storybook.js.org/docs/react/writing-stories/args -Default.args = { - children: [ - - My favorite repository - , +export const Default: ComponentStory = () => ( + @@ -59,13 +51,20 @@ Default.args = { } > - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et - dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita - kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur - sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata - sanctus est Lorem ipsum dolor sit amet. - , + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, + consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed + diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea + takimata sanctus est Lorem ipsum dolor sit amet. + + + + + My favorite repository + + @@ -76,19 +75,23 @@ Default.args = { } > - - - My favorite repository with a very long title and some other things - - - , + + + + My favorite repository with a very long title and some other things + + + + - - - My least liked repo - - - , + + + + My least liked repo + + + + @@ -114,7 +117,7 @@ Default.args = { This is a third row, lets see how this works out.(MERGED) - , + @@ -140,31 +143,59 @@ Default.args = {
(OPEN) - , + - - - My least liked repo - - + + + + My least liked repo + + + - {({ labelId }) => ( - <> - Workers - 2/3 - - )} - - - MyCustomDetail - - Docs - + Workers + 2/3 + + Go to docs + - , - ], -} as ComponentProps; + + user} action={ellipsis-v}> + + + 3c991eec687444630c0929e4e23d8a1a2565011d4bea28d4338dd1d024bb74c8 + c076ca5eea66545ee227c8854acc8b9bf075676a6848d54fa0bc1fa291f78887 + 72d7e2ef64c9575dd8ceeed8ed6b24f185646deb6595b13fd51c5705c61a2c46 + 9127daa67e066bc49f39cca9670b92de3d576ac1fb9c916e9b44692923e12a9d + 14d07434e8c5b3d0ba2e752bc580888a30963d4e8021be573392bb625f6150da + 60fc6f2e7503b1ca5963afb627ef560f4e2191c0da4c9328ae4ab088e177fb41 + 749e63a6af1731d5c599e960a2f6c8cb9a15d6cf6a82493f419d417829f7b2a8 + 0ca9334aeda2e5dab101e4af13c9610839afc3b9dd2ec56ffb067d6914ce9b67 + b708983948a1750f79fbb91875399fcce453410dad6191c5dc5059f4b28aee1d + 0d13a4349270947bc79cfc59c7c2aa59960d847a49b40feccd3388fa9a600a68 + + + + 7cab5486ab8cd946af71a77d37c84bac c05156ef54a1f0bfd5d4fa12f774148c 4f2964e1895470b6313e3264fef276d8 + 8c57fdf7fde5fc227ea0c59a0f359122 3bc64067ff6fb9c64f4ae5ac15e4375d 91943ad0c020859ad6cc3723fe9bd325 + 07bb6d93d9faf2df68d02949ec10e58e 0bee2b579b7ab5777683f3d5b5975960 4a3009269d971f555524374e7da745ad + a693ffb57da89f191249de6480c2387b + + + + + Workers + 2/3 + + + Go to docs + + + + + +); diff --git a/scm-ui/ui-layout/src/card/Card.stories.tsx b/scm-ui/ui-layout/src/card/Card.stories.tsx index 071d49fb71..fe735925e2 100644 --- a/scm-ui/ui-layout/src/card/Card.stories.tsx +++ b/scm-ui/ui-layout/src/card/Card.stories.tsx @@ -23,14 +23,23 @@ */ import StoryRouter from "storybook-react-router"; -import { ComponentMeta, StoryFn } from "@storybook/react"; -import React, { ComponentProps } from "react"; -import { ExtractProps } from "@scm-manager/ui-extensions"; +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import React from "react"; import { Link } from "react-router-dom"; import CardTitle from "../card/CardTitle"; -import CardRow from "../card/CardRow"; -import { CardDetail, CardDetailLabel, CardDetails, CardDetailTag } from "./CardDetail"; +import CardRow, { SecondaryRow, TertiaryRow } from "../card/CardRow"; +import { + CardButtonDetail, + CardDetail, + CardDetailIcon, + CardDetailLabel, + CardDetails, + CardDetailTag, + CardLinkDetail, +} from "./CardDetail"; import Card from "./Card"; +import { Popover } from "@scm-manager/ui-overlays"; +import { Icon } from "@scm-manager/ui-buttons"; export default { title: "Card", @@ -38,35 +47,67 @@ export default { decorators: [StoryRouter()], } as ComponentMeta; -const Template: StoryFn> = (args) => ; - -export const Default = Template.bind({}); -// More on args: https://storybook.js.org/docs/react/writing-stories/args -Default.args = { - className: "box", - children: [ - - - My least liked repo - - , +export const Default: ComponentStory = () => ( + user} + action={ellipsis-v} + > + + + + 3c991eec687444630c0929e4e23d8a1a2565011d4bea28d4338dd1d024bb74c8 + c076ca5eea66545ee227c8854acc8b9bf075676a6848d54fa0bc1fa291f78887 + 72d7e2ef64c9575dd8ceeed8ed6b24f185646deb6595b13fd51c5705c61a2c46 + 9127daa67e066bc49f39cca9670b92de3d576ac1fb9c916e9b44692923e12a9d + 14d07434e8c5b3d0ba2e752bc580888a30963d4e8021be573392bb625f6150da + 60fc6f2e7503b1ca5963afb627ef560f4e2191c0da4c9328ae4ab088e177fb41 + 749e63a6af1731d5c599e960a2f6c8cb9a15d6cf6a82493f419d417829f7b2a8 + 0ca9334aeda2e5dab101e4af13c9610839afc3b9dd2ec56ffb067d6914ce9b67 + b708983948a1750f79fbb91875399fcce453410dad6191c5dc5059f4b28aee1d + 0d13a4349270947bc79cfc59c7c2aa59960d847a49b40feccd3388fa9a600a68 + + + + + 7cab5486ab8cd946af71a77d37c84bac c05156ef54a1f0bfd5d4fa12f774148c 4f2964e1895470b6313e3264fef276d8 + 8c57fdf7fde5fc227ea0c59a0f359122 3bc64067ff6fb9c64f4ae5ac15e4375d 91943ad0c020859ad6cc3723fe9bd325 + 07bb6d93d9faf2df68d02949ec10e58e 0bee2b579b7ab5777683f3d5b5975960 4a3009269d971f555524374e7da745ad + a693ffb57da89f191249de6480c2387b + + This is information is not important + + Popover Detail with Tag + 3 + + } + title="My Popover Details" + > + <>This is some additional detail for my Popover. + - {({ labelId }) => ( - <> - Workers - 2/3 - - )} - - - MyCustomDetail - - Docs - + Normal Detail with Tag + 2/3 + + Link Detail + + + Popover Detail with Icon + check-circle + + } + title="My Popover Details" + > + <>This is some additional detail for my Popover. + - , - ], -} as ComponentProps; + + +); diff --git a/scm-ui/ui-layout/src/card/Card.tsx b/scm-ui/ui-layout/src/card/Card.tsx index 55c60faa50..2bfd048dd4 100644 --- a/scm-ui/ui-layout/src/card/Card.tsx +++ b/scm-ui/ui-layout/src/card/Card.tsx @@ -25,6 +25,11 @@ import React, { ComponentType, HTMLAttributes, ReactHTML, Ref } from "react"; import classNames from "classnames"; import CSS from "csstype"; +import styled from "styled-components"; + +const RowsContainer = styled.div` + margin-left: -0.25rem; +`; type Props = HTMLAttributes & { action?: React.ReactElement; @@ -49,7 +54,7 @@ type Props = HTMLAttributes & { * @since 2.44.0 */ const Card = React.forwardRef( - ({ className, avatar, rowGap = "0.5rem", children, as: Comp = "div", action, ...props }, ref) => + ({ className, avatar, rowGap = "0.25rem", children, as: Comp = "div", action, ...props }, ref) => React.createElement( Comp, { @@ -58,12 +63,12 @@ const Card = React.forwardRef( ...props, }, avatar ? avatar : null, -
{children} -
, + , action ? action : null ) ); diff --git a/scm-ui/ui-layout/src/card/CardDetail.tsx b/scm-ui/ui-layout/src/card/CardDetail.tsx index d1cb918da3..fb95cde15d 100644 --- a/scm-ui/ui-layout/src/card/CardDetail.tsx +++ b/scm-ui/ui-layout/src/card/CardDetail.tsx @@ -22,10 +22,18 @@ * SOFTWARE. */ -import React, { HTMLAttributes, ReactNode } from "react"; +import React, { + ButtonHTMLAttributes, + ComponentProps, + ComponentPropsWithoutRef, + HTMLAttributes, + ReactNode, +} from "react"; import classNames from "classnames"; import { useGeneratedId } from "@scm-manager/ui-components"; import styled from "styled-components"; +import { Link } from "react-router-dom"; +import { Icon } from "@scm-manager/ui-buttons"; export const CardVariants = { LIGHT: "light", @@ -56,13 +64,73 @@ export const CardDetail = React.forwardRef( ({ children, className, ...props }, ref) => { const labelId = useGeneratedId(); return ( - + {typeof children === "function" ? children({ labelId }) : children} ); } ); +const InteractiveDetailStyles = ` + &:focus { + outline-offset: -0.125rem; + outline-width: 0.125rem; + } +`; + +const StyledCardButtonDetail = styled.button` + ${InteractiveDetailStyles} + + &[aria-expanded="true"] { + outline: var(--scm-border-color) solid 0.125rem; + outline-offset: -0.125rem; + } +`; + +/** + * @beta + * @since 2.47.0 + */ +export const CardButtonDetail = React.forwardRef>( + ({ children, className, ...props }, ref) => ( + + {children} + + ) +); + +const StyledCardLinkDetail = styled(Link)` + ${InteractiveDetailStyles} + + min-height: 2rem; +`; + +/** + * @beta + * @since 2.47.0 + */ +export const CardLinkDetail = React.forwardRef>( + ({ children, className, ...props }, ref) => ( + + {children} + + ) +); + /** * @beta * @since 2.46.0 @@ -91,8 +159,24 @@ export const CardDetailTag = React.forwardRef>( + ({ children, className, ...props }, ref) => ( + + {children} + + ) +); + const CardDetailsRowContainer = styled.div` - gap: 0.5rem 1rem; + gap: 0.125rem 1rem; + + &:first-child { + margin-left: -0.25rem; + } `; /** diff --git a/scm-ui/ui-layout/src/card/CardRow.tsx b/scm-ui/ui-layout/src/card/CardRow.tsx index 9613ac8436..1bae93af28 100644 --- a/scm-ui/ui-layout/src/card/CardRow.tsx +++ b/scm-ui/ui-layout/src/card/CardRow.tsx @@ -22,14 +22,16 @@ * SOFTWARE. */ -import React, { ComponentProps } from "react"; +import React, { ComponentProps, HTMLAttributes } from "react"; import classNames from "classnames"; /** * @beta * @since 2.44.0 */ -const CardRow = "div" as const; +const CardRow = React.forwardRef>(({ className, ...props }, ref) => ( +
+)); export default CardRow; diff --git a/scm-ui/ui-layout/src/collapsible/Collapsible.stories.tsx b/scm-ui/ui-layout/src/collapsible/Collapsible.stories.tsx index a5fa71dd0a..a17c7f44e5 100644 --- a/scm-ui/ui-layout/src/collapsible/Collapsible.stories.tsx +++ b/scm-ui/ui-layout/src/collapsible/Collapsible.stories.tsx @@ -25,11 +25,6 @@ import StoryRouter from "storybook-react-router"; import { ComponentMeta, StoryFn } from "@storybook/react"; import React, { ComponentProps } from "react"; -import { ExtractProps } from "@scm-manager/ui-extensions"; -import { Link } from "react-router-dom"; -import { Menu } from "@scm-manager/ui-overlays"; -import { Icon } from "@scm-manager/ui-buttons"; -import CardRow from "../card/CardRow"; import Collapsible from "./Collapsible"; export default { @@ -38,7 +33,7 @@ export default { decorators: [StoryRouter()], } as ComponentMeta; -const Template: StoryFn> = (args) => ; +const Template: StoryFn> = (args) => ; export const Default = Template.bind({}); // More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/scm-ui/ui-layout/src/index.ts b/scm-ui/ui-layout/src/index.ts index 1d8cf27cd2..e93ae02118 100644 --- a/scm-ui/ui-layout/src/index.ts +++ b/scm-ui/ui-layout/src/index.ts @@ -25,7 +25,14 @@ import CardListComponent, { CardListBox as CardListBoxComponent, CardListCard } from "./card-list/CardList"; import CardTitle from "./card/CardTitle"; import CardRow, { SecondaryRow, TertiaryRow } from "./card/CardRow"; -import { CardDetail, CardDetailLabel, CardDetails, CardDetailTag } from "./card/CardDetail"; +import { + CardButtonDetail, + CardDetail, + CardDetailLabel, + CardDetails, + CardDetailTag, + CardLinkDetail, +} from "./card/CardDetail"; import CardComponent from "./card/Card"; import { DataPageHeader as DataPageHeaderComponent, @@ -38,16 +45,20 @@ import { export { default as Collapsible } from "./collapsible/Collapsible"; +const CardDetailExports = { + Label: CardDetailLabel, + Tag: CardDetailTag, +}; + const CardExport = { Title: CardTitle, Row: CardRow, SecondaryRow: SecondaryRow, TertiaryRow: TertiaryRow, Details: Object.assign(CardDetails, { - Detail: Object.assign(CardDetail, { - Label: CardDetailLabel, - Tag: CardDetailTag, - }), + Detail: Object.assign(CardDetail, CardDetailExports), + ButtonDetail: Object.assign(CardButtonDetail, CardDetailExports), + LinkDetail: Object.assign(CardLinkDetail, CardDetailExports), }), }; diff --git a/scm-ui/ui-overlays/src/dialog/Dialog.stories.tsx b/scm-ui/ui-overlays/src/dialog/Dialog.stories.tsx index cf3ea947ed..e44bba342f 100644 --- a/scm-ui/ui-overlays/src/dialog/Dialog.stories.tsx +++ b/scm-ui/ui-overlays/src/dialog/Dialog.stories.tsx @@ -25,7 +25,6 @@ import StoryRouter from "storybook-react-router"; import { ComponentMeta, StoryFn } from "@storybook/react"; import React, { ComponentProps } from "react"; -import { ExtractProps } from "@scm-manager/ui-extensions"; import { Button } from "@scm-manager/ui-buttons"; import Dialog from "./Dialog"; @@ -36,7 +35,7 @@ export default { render: (story) =>
{story}
, } as ComponentMeta; -const Template: StoryFn> = (args) => ; +const Template: StoryFn> = (args) => ; export const Default = Template.bind({}); // More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/scm-ui/ui-overlays/src/menu/Menu.stories.tsx b/scm-ui/ui-overlays/src/menu/Menu.stories.tsx index e7972b965e..ebfaf586e7 100644 --- a/scm-ui/ui-overlays/src/menu/Menu.stories.tsx +++ b/scm-ui/ui-overlays/src/menu/Menu.stories.tsx @@ -25,7 +25,6 @@ import StoryRouter from "storybook-react-router"; import { ComponentMeta, StoryFn } from "@storybook/react"; import React, { ComponentProps } from "react"; -import { ExtractProps } from "@scm-manager/ui-extensions"; import Menu, { MenuButton, MenuDialog, MenuExternalLink, MenuLink } from "./Menu"; import { Button, Icon } from "@scm-manager/ui-buttons"; import { CloseButton } from "../dialog/Dialog"; @@ -36,7 +35,7 @@ export default { decorators: [StoryRouter()], } as ComponentMeta; -const Template: StoryFn> = (args) => ; +const Template: StoryFn> = (args) => ; export const Default = Template.bind({}); // More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/scm-ui/ui-webapp/src/containers/OmniSearch.tsx b/scm-ui/ui-webapp/src/containers/OmniSearch.tsx index fab07df619..deb1ffbba0 100644 --- a/scm-ui/ui-webapp/src/containers/OmniSearch.tsx +++ b/scm-ui/ui-webapp/src/containers/OmniSearch.tsx @@ -22,6 +22,7 @@ * SOFTWARE. */ import React, { + ComponentProps, Dispatch, FC, KeyboardEvent as ReactKeyboardEvent, @@ -66,10 +67,9 @@ const namespaceAndName = (hit: Hit) => { const name = (hit.fields["name"] as ValueHitField).value as string; return `${namespace}/${name}`; }; -type ExtractProps = T extends React.ComponentType ? U : never; type HitsProps = { - entries: ReactElement>[]; + entries: ReactElement>[]; hits: Hit[]; showHelp: () => void; ariaId: string; diff --git a/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx b/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx index 6bcc900f7b..4291f5170c 100644 --- a/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx +++ b/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx @@ -33,7 +33,6 @@ import { SmallLoadingSpinner } from "@scm-manager/ui-components"; type Props = { branch: Branch; details?: BranchDetails; - labelId?: string; }; const Count = styled.span` @@ -41,7 +40,7 @@ const Count = styled.span` width: max-content; `; -const AheadBehindTag: FC = ({ branch, details, labelId }) => { +const AheadBehindTag: FC = ({ branch, details }) => { const [t] = useTranslation("repos"); if (branch.defaultBranch) { @@ -56,7 +55,7 @@ const AheadBehindTag: FC = ({ branch, details, labelId }) => { - + 0 ? "has-text-success" : "has-text-grey-light"}>arrow-up {details.changesetsAhead} diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchListItem.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchListItem.tsx index 0bfd84d927..f27824bec0 100644 --- a/scm-ui/ui-webapp/src/repos/branches/components/BranchListItem.tsx +++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchListItem.tsx @@ -122,12 +122,8 @@ const BranchListItem: FC = ({ branch, remove, isLoading, branchesDetails, {!branch.defaultBranch ? ( - {({ labelId }) => ( - <> - {t("branch.aheadBehind.label")} - - - )} + {t("branch.aheadBehind.label")} + ) : null}