@scm-manager/ui-core 3.0.0-20240024-101702

package/src/base/index.ts

@@ -0,0 +1,34 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export * from "./buttons"
+export * from "./forms"
+export * from "./helpers"
+export * from "./misc"
+export * from "./layout"
+export * from "./notifications"
+export * from "./overlays"
+export * from "./shortcuts"
+export * from "./text"
+

package/src/base/layout/_helpers/with-classes.tsx

@@ -0,0 +1,52 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ComponentProps, ElementRef, ForwardRefExoticComponent, ReactElement } from "react";
+import classNames from "classnames";
+import { Slot } from "@radix-ui/react-slot";
+
+const withClasses = <Element extends React.ElementType | ForwardRefExoticComponent<any>>(
+  typ: Element,
+  additionalClassNames: string[],
+  additionalProps?: Partial<ComponentProps<Element>>
+) =>
+  React.forwardRef<
+    ElementRef<Element>,
+    | (ComponentProps<Element> & { asChild?: false; className?: string })
+    | { asChild: true; children: ReactElement<{ className?: string }> }
+  >((props, ref) => {
+    // @ts-ignore Typescript doesn't get it for some reason
+    if (props.asChild) {
+      return <Slot {...props} className={classNames(...additionalClassNames)} />;
+    } else {
+      return React.createElement(typ, {
+        ...additionalProps,
+        ...props,
+        className: classNames((props as any).className, ...additionalClassNames),
+        ref,
+      });
+    }
+  });
+
+export default withClasses;

package/src/base/layout/card/Card.stories.tsx

@@ -0,0 +1,113 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import StoryRouter from "storybook-react-router";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Link } from "react-router-dom";
+import CardTitle from "../card/CardTitle";
+import CardRow, { SecondaryRow, TertiaryRow } from "../card/CardRow";
+import {
+  CardButtonDetail,
+  CardDetail,
+  CardDetailIcon,
+  CardDetailLabel,
+  CardDetails,
+  CardDetailTag,
+  CardLinkDetail,
+} from "./CardDetail";
+import Card from "./Card";
+import { Popover } from "../../overlays";
+import { Icon } from "../../buttons";
+
+export default {
+  title: "Card",
+  component: Card,
+  decorators: [StoryRouter()],
+} as ComponentMeta<typeof Card>;
+
+export const Default: ComponentStory<typeof Card> = () => (
+  <Card
+    className="box"
+    avatar={<Icon className="is-large">user</Icon>}
+    action={<Icon className="is-medium">ellipsis-v</Icon>}
+  >
+    <CardRow>
+      <CardTitle>
+        <Link aria-label="Edit My least liked repo" to="/cards/1">
+          3c991eec687444630c0929e4e23d8a1a2565011d4bea28d4338dd1d024bb74c8
+          c076ca5eea66545ee227c8854acc8b9bf075676a6848d54fa0bc1fa291f78887
+          72d7e2ef64c9575dd8ceeed8ed6b24f185646deb6595b13fd51c5705c61a2c46
+          9127daa67e066bc49f39cca9670b92de3d576ac1fb9c916e9b44692923e12a9d
+          14d07434e8c5b3d0ba2e752bc580888a30963d4e8021be573392bb625f6150da
+          60fc6f2e7503b1ca5963afb627ef560f4e2191c0da4c9328ae4ab088e177fb41
+          749e63a6af1731d5c599e960a2f6c8cb9a15d6cf6a82493f419d417829f7b2a8
+          0ca9334aeda2e5dab101e4af13c9610839afc3b9dd2ec56ffb067d6914ce9b67
+          b708983948a1750f79fbb91875399fcce453410dad6191c5dc5059f4b28aee1d
+          0d13a4349270947bc79cfc59c7c2aa59960d847a49b40feccd3388fa9a600a68
+        </Link>
+      </CardTitle>
+    </CardRow>
+    <SecondaryRow className="is-ellipsis-overflow">
+      7cab5486ab8cd946af71a77d37c84bac c05156ef54a1f0bfd5d4fa12f774148c 4f2964e1895470b6313e3264fef276d8
+      8c57fdf7fde5fc227ea0c59a0f359122 3bc64067ff6fb9c64f4ae5ac15e4375d 91943ad0c020859ad6cc3723fe9bd325
+      07bb6d93d9faf2df68d02949ec10e58e 0bee2b579b7ab5777683f3d5b5975960 4a3009269d971f555524374e7da745ad
+      a693ffb57da89f191249de6480c2387b
+    </SecondaryRow>
+    <TertiaryRow>This is information is not important</TertiaryRow>
+    <CardRow>
+      <CardDetails>
+        <Popover
+          trigger={
+            <CardButtonDetail>
+              <CardDetailLabel>Popover Detail with Tag</CardDetailLabel>
+              <CardDetailTag>3</CardDetailTag>
+            </CardButtonDetail>
+          }
+          title="My Popover Details"
+        >
+          <>This is some additional detail for my Popover.</>
+        </Popover>
+        <CardDetail>
+          <CardDetailLabel>Normal Detail with Tag</CardDetailLabel>
+          <CardDetailTag>2/3</CardDetailTag>
+        </CardDetail>
+        <CardLinkDetail to="/workers">
+          <CardDetailLabel>Link Detail</CardDetailLabel>
+        </CardLinkDetail>
+        <Popover
+          trigger={
+            <CardButtonDetail>
+              <CardDetailLabel>Popover Detail with Icon</CardDetailLabel>
+              <CardDetailIcon className="has-text-success">check-circle</CardDetailIcon>
+            </CardButtonDetail>
+          }
+          title="My Popover Details"
+        >
+          <>This is some additional detail for my Popover.</>
+        </Popover>
+      </CardDetails>
+    </CardRow>
+  </Card>
+);

package/src/base/layout/card/Card.tsx

@@ -0,0 +1,76 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+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<HTMLElement> & {
+  action?: React.ReactElement;
+  avatar?: React.ReactElement;
+  /**
+   * @default "div"
+   */
+  as?: keyof ReactHTML | ComponentType<HTMLAttributes<HTMLElement> & { ref?: Ref<HTMLElement> }>;
+
+  /**
+   * @default "0.5rem"
+   * @since 2.46.0
+   */
+  rowGap?: CSS.Properties<string | number>["gap"];
+};
+
+/**
+ * If the Card's title contains a link, the whole Card becomes a click target for that link.
+ * Because of this, any interactive elements require the <code>is-relative</code> class to receive cursor events.
+ *
+ * @beta
+ * @since 2.44.0
+ */
+const Card = React.forwardRef<HTMLElement, Props>(
+  ({ className, avatar, rowGap = "0.25rem", children, as: Comp = "div", action, ...props }, ref) =>
+    React.createElement(
+      Comp,
+      {
+        className: classNames(className, "is-relative", "is-flex", "scmm-card"),
+        ref,
+        ...props,
+      },
+      avatar ? avatar : null,
+      <RowsContainer
+        className="is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1 is-overflow-hidden is-overflow-wrap-anywhere"
+        style={{ gap: rowGap }}
+      >
+        {children}
+      </RowsContainer>,
+      action ? action : null
+    )
+);
+
+export default Card;

package/src/base/layout/card/CardDetail.tsx

@@ -0,0 +1,196 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, {
+  ButtonHTMLAttributes,
+  ComponentProps,
+  ComponentPropsWithoutRef,
+  HTMLAttributes,
+  ReactNode,
+} from "react";
+import classNames from "classnames";
+import { useAriaId } from "../../helpers";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import { Icon } from "../../buttons";
+
+export const CardVariants = {
+  LIGHT: "light",
+  INFO: "info",
+} as const;
+
+type CardVariant = typeof CardVariants[keyof typeof CardVariants];
+
+const createCardVariantClasses = (variant?: string | undefined) =>
+  classNames({
+    "is-light": variant === "light" || !variant,
+    "is-info": variant === "info",
+  });
+
+type CardDetailProps = HTMLAttributes<HTMLSpanElement> & {
+  children: ReactNode | ((props: { labelId: string }) => ReactNode);
+};
+
+type CardVariantProps = {
+  cardVariant?: CardVariant;
+};
+
+/**
+ * @beta
+ * @since 2.46.0
+ */
+export const CardDetail = React.forwardRef<HTMLSpanElement, CardDetailProps>(
+  ({ children, className, ...props }, ref) => {
+    const labelId = useAriaId();
+    return (
+      <span {...props} className={classNames("is-flex is-align-items-center has-gap-1 p-1", className)} ref={ref}>
+        {typeof children === "function" ? children({ labelId }) : children}
+      </span>
+    );
+  }
+);
+
+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<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ children, className, ...props }, ref) => (
+    <StyledCardButtonDetail
+      {...props}
+      className={classNames(
+        "is-flex is-align-items-center has-gap-1 p-1 is-borderless has-background-transparent is-relative has-hover-background-blue has-rounded-border is-clickable",
+        className
+      )}
+      ref={ref}
+    >
+      {children}
+    </StyledCardButtonDetail>
+  )
+);
+
+const StyledCardLinkDetail = styled(Link)`
+  ${InteractiveDetailStyles}
+
+  min-height: 2rem;
+`;
+
+/**
+ * @beta
+ * @since 2.47.0
+ */
+export const CardLinkDetail = React.forwardRef<HTMLAnchorElement, ComponentPropsWithoutRef<typeof Link>>(
+  ({ children, className, ...props }, ref) => (
+    <StyledCardLinkDetail
+      {...props}
+      className={classNames(
+        "is-flex is-align-items-center has-gap-1 p-1 is-borderless has-background-transparent is-relative has-hover-background-blue has-rounded-border is-clickable",
+        className
+      )}
+      ref={ref}
+    >
+      {children}
+    </StyledCardLinkDetail>
+  )
+);
+
+/**
+ * @beta
+ * @since 2.46.0
+ */
+export const CardDetailLabel = React.forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
+  ({ children, className, ...props }, ref) => (
+    <span {...props} className={classNames("has-text-secondary is-size-7", className)} ref={ref}>
+      {children}
+    </span>
+  )
+);
+
+/**
+ * @beta
+ * @since 2.46.0
+ */
+export const CardDetailTag = React.forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement> & CardVariantProps>(
+  ({ children, className, ...props }, ref) => (
+    <span
+      {...props}
+      className={classNames("tag is-rounded", createCardVariantClasses(props.cardVariant), className)}
+      ref={ref}
+    >
+      {children}
+    </span>
+  )
+);
+
+/**
+ * @beta
+ * @since 2.47.0
+ */
+export const CardDetailIcon = React.forwardRef<HTMLElement, ComponentProps<typeof Icon>>(
+  ({ children, className, ...props }, ref) => (
+    <Icon {...props} className={classNames("is-size-5", className)} ref={ref}>
+      {children}
+    </Icon>
+  )
+);
+
+const CardDetailsRowContainer = styled.div`
+  gap: 0.125rem 1rem;
+
+  &:first-child {
+    margin-left: -0.25rem;
+  }
+`;
+
+/**
+ * @beta
+ * @since 2.46.0
+ */
+export const CardDetails = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ children, className, ...props }, ref) => (
+    <CardDetailsRowContainer
+      {...props}
+      className={classNames("is-flex is-flex-wrap-wrap is-align-items-center", className)}
+      ref={ref}
+    >
+      {children}
+    </CardDetailsRowContainer>
+  )
+);

package/src/base/layout/card/CardRow.tsx

@@ -0,0 +1,46 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ComponentProps, HTMLAttributes } from "react";
+import classNames from "classnames";
+
+/**
+ * @beta
+ * @since 2.44.0
+ */
+const CardRow = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div className={classNames(className, "ml-1")} {...props} ref={ref} />
+));
+
+export default CardRow;
+
+export const SecondaryRow = React.forwardRef<HTMLDivElement, ComponentProps<typeof CardRow>>(
+  ({ className, ...props }, ref) => <CardRow className={classNames(className, "is-size-7")} {...props} ref={ref} />
+);
+
+export const TertiaryRow = React.forwardRef<HTMLDivElement, ComponentProps<typeof CardRow>>(
+  ({ className, ...props }, ref) => (
+    <CardRow className={classNames(className, "is-size-7", "has-text-secondary")} {...props} ref={ref} />
+  )
+);

package/src/base/layout/card/CardTitle.tsx

@@ -0,0 +1,59 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { HTMLAttributes } from "react";
+
+type Props = HTMLAttributes<HTMLHeadingElement> & {
+  /**
+   * @default 3
+   */
+  level?: number;
+};
+
+/**
+ * A card title may contain a link as its only child which will be automatically stretched to cover the whole card area.
+ *
+ * If a card title has a link, individual card elements which should be interactive have to get the `is-relative` class.
+ *
+ * The card title (or enclosed link) content must be an accessible text and must not contain any other interactive elements.
+ *
+ * You can wrap the title in a {@link CardList.Card.Row} to introduce other elements next to the title.
+ *
+ * The title (or its enclosing row) must be the first element in a {@link CardList.Card}.
+ *
+ * @beta
+ * @since 2.44.0
+ */
+const CardTitle = React.forwardRef<HTMLHeadingElement, Props>(({ children, level = 3, ...props }, ref) =>
+  React.createElement(
+    `h${level}`,
+    {
+      ref,
+      ...props,
+    },
+    children
+  )
+);
+
+export default CardTitle;