Fix broken breadcrumbs story (#666)

Author: nowyDEV

.eslintrc.js

@@ -15,7 +15,7 @@ module.exports = {
 
   settings: {
     react: {
-      version: "17.0.2", // React version. "detect" automatically picks the version you have installed.
+      version: "detect", // React version. "detect" automatically picks the version you have installed.
     },
     jest: {
       version: "29",
@@ -32,10 +32,6 @@ module.exports = {
     {
       files: ["src/**/*.{ts,tsx}"],
       rules: {
-        "@typescript-eslint/no-unsafe-return": "warn",
-        "@typescript-eslint/no-unsafe-argument": "warn",
-        "@typescript-eslint/no-unsafe-assignment": "warn",
-        "@typescript-eslint/no-unsafe-member-access": "warn",
         // Should be in sync with https://github.com/nordcloud/eslint-config-pat/blob/master/profile/_common.js#L463
         "@typescript-eslint/naming-convention": [
           "warn",
@@ -108,15 +104,6 @@ module.exports = {
             format: ["PascalCase", "UPPER_CASE"],
           },
         ],
-        "@typescript-eslint/ban-types": [
-          "error",
-          {
-            types: {
-              "{}": false,
-            },
-            extendDefaults: true,
-          },
-        ],
       },
     },
     {

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "9.0.0",
+  "version": "9.0.1",
   "license": "MIT",
   "repository": {
     "type": "git",

package.json

@@ -25,3 +25,9 @@ import * as BreadcrumbsStories from "./Breadcrumbs.stories";
 <Canvas>
   <Story of={BreadcrumbsStories.Default} />
 </Canvas>
+
+## Custom component
+
+<Canvas>
+  <Story of={BreadcrumbsStories.CustomComponent} />
+</Canvas>

src/components/breadcrumbs/Breadcrumbs.mdx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../button";
 import { Breadcrumbs } from "./Breadcrumbs";
 
 const meta: Meta = {
@@ -39,3 +40,40 @@ export const Default: StoryObj = {
 
   name: "default",
 };
+
+export const CustomComponent: StoryObj = {
+  render: () => (
+    <Breadcrumbs
+      renderCustom={({ to }) => (
+        <Button as="a" linkTo={to}>
+          test123
+        </Button>
+      )}
+      list={[
+        {
+          label: "Home",
+          uri: `#`,
+        },
+        {
+          label: "Hosts",
+          uri: `#`,
+        },
+        {
+          label: "Disabled",
+          uri: `#`,
+          isDisabled: true,
+        },
+        {
+          label: "Hosts 2",
+          uri: `#`,
+        },
+        {
+          label: "Host Details",
+          uri: `#`,
+        },
+      ]}
+    />
+  ),
+
+  name: "customComponent",
+};

src/components/breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import styled, { css } from "styled-components";
+import styled, { css, FlattenSimpleInterpolation } from "styled-components";
 import theme from "../../theme";
 
 export type BreadcrumbsList = {
@@ -10,25 +10,33 @@ export type BreadcrumbsList = {
 
 export type BreadcrumbsListProps = {
   list: BreadcrumbsList[];
+  /**
+   * @deprecated Might cause problems with React 18, use `renderCustom` instead
+   */
   Component?: React.FC<
     React.PropsWithChildren<{ to: string; isDisabled?: boolean }>
   >;
+  renderCustom?: (
+    props: React.PropsWithChildren<{
+      to: string;
+      isDisabled?: boolean;
+      css: FlattenSimpleInterpolation;
+    }>
+  ) => React.ReactNode;
 };
 
-export function Breadcrumbs({ list, Component }: BreadcrumbsListProps) {
+export function Breadcrumbs({ list, renderCustom }: BreadcrumbsListProps) {
   return (
     <StyledBreadcrumbs>
       <ul>
         {list.map((breadcrumb) => (
           <li key={breadcrumb.label}>
-            {Component ? (
-              <Component
-                isDisabled={breadcrumb.isDisabled}
-                css={aStyles}
-                to={breadcrumb.uri}
-              >
-                {breadcrumb.label}
-              </Component>
+            {renderCustom ? (
+              renderCustom({
+                isDisabled: breadcrumb.isDisabled,
+                css: aStyles,
+                to: breadcrumb.uri,
+              })
             ) : (
               <StyledLink
                 isDisabled={breadcrumb.isDisabled}

src/components/breadcrumbs/Breadcrumbs.tsx

@@ -5,15 +5,7 @@ import theme from "../../theme";
 import { SingleColors } from "../../theme/config";
 import { setColor } from "../../utils/setcolor";
 
-export type ToggleProps = React.ComponentProps<"button"> & {
-  value: boolean;
-  labelText?: string;
-  status?: SingleColors;
-  size?: string;
-  onChange: (value: boolean) => void;
-};
-
-const StyledToggle = styled.button<Pick<ToggleProps, "size" | "status">>`
+const StyledToggle = styled.button<Pick<CustomProps, "size" | "status">>`
   border: 1px solid ${theme.color.interactive.primary};
   border-radius: ${theme.radiusDefault};
   line-height: ${theme.lineHeight};
@@ -61,12 +53,23 @@ const StyledToggle = styled.button<Pick<ToggleProps, "size" | "status">>`
     `}
 `;
 
+type CustomProps = {
+  value: boolean;
+  labelText?: string;
+  status?: SingleColors;
+  size?: string;
+  onChange: (value: boolean) => void;
+};
+
+export type ToggleProps = CustomProps &
+  React.ComponentProps<typeof StyledToggle>;
+
 export function Toggle({
   value,
   labelText = "",
   onChange,
   ...props
-}: React.ComponentProps<typeof StyledToggle>) {
+}: ToggleProps) {
   return (
     <StyledToggle
       className={value ? "active" : ""}

src/components/toggle/Toggle.tsx

@@ -33,8 +33,10 @@ type Children = (
   | undefined
 )[];
 
-const getChildren = (element: React.ReactElement): React.ReactNode =>
-  element.props.children;
+const getChildren = (
+  element: React.ReactElement<{ children: React.ReactNode }>
+): React.ReactNode => element.props.children;
+
 const getTypes = (children: Children) =>
   React.Children.map(children, (child) => (child as React.ReactElement).type);