chore(ui): migrate Code component to TypeScript (#614)

* chore(ui): migrate Code component to TypeScript * fix(ui): export fix * fix(ui): fix type in Storybook * fix(ui): remove not needed cast --------- Co-authored-by: [email protected] <[email protected]> Co-authored-by: Andreas Pfau <[email protected]>
cloudoperators · Nov 18, 2024 · 6bfeffe · 6bfeffe
1 parent 27f028b
commit 6bfeffe
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 14 deletions.
diff --git a/.changeset/orange-tips-provide.md b/.changeset/orange-tips-provide.md
@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+Migrate Code component to TypeScript
diff --git a/...nts/src/components/Code/Code.component.js → ...ts/src/components/Code/Code.component.tsx b/...nts/src/components/Code/Code.component.js → ...ts/src/components/Code/Code.component.tsx
@@ -4,7 +4,6 @@
  */
 
 import React from "react"
-import PropTypes from "prop-types"
 
 const codeStyles = `
   jn-bg-theme-code-block
@@ -14,16 +13,16 @@ const codeStyles = `
 /** A basic inline <code> component.
  *   Accepts "content" prop or renders children as passed.
  */
-export const Code = ({ content = "", children = null, className = "", ...props }) => {
+export const Code: React.FC<CodeProps> = ({ content = "", children = null, className = "", ...props }) => {
   return (
     <code className={`juno-code ${codeStyles} ${className}`} {...props}>
       {content || children}
     </code>
   )
 }
 
-Code.propTypes = {
-  content: PropTypes.string,
-  className: PropTypes.string,
-  children: PropTypes.node,
+export interface CodeProps extends React.ComponentPropsWithoutRef<"code"> {
+  content?: string
+  className?: string
+  children?: React.ReactNode
 }
diff --git a/...nents/src/components/Code/Code.stories.js → ...ents/src/components/Code/Code.stories.tsx b/...nents/src/components/Code/Code.stories.js → ...ents/src/components/Code/Code.stories.tsx
@@ -3,14 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Code } from "./index.js"
+import { Code } from "./index"
 
 export default {
   title: "Components/Code",
   component: Code,
   argTypes: {
     children: {
       control: false,
+      table: {
+        type: { summary: "ReactNode" },
+      },
     },
   },
 }

diff --git a/...mponents/src/components/Code/Code.test.js → ...ponents/src/components/Code/Code.test.tsx b/...mponents/src/components/Code/Code.test.js → ...ponents/src/components/Code/Code.test.tsx
@@ -8,19 +8,19 @@ import { render, screen } from "@testing-library/react"
 import { Code } from "./index"
 
 describe("Code", () => {
-  test("renders inline code with content as passed", async () => {
+  test("renders inline code with content as passed", () => {
     render(<Code data-testid="code" content="some example code" />)
     expect(screen.getByTestId("code")).toBeInTheDocument()
     expect(screen.getByTestId("code")).toHaveTextContent("some example code")
   })
 
-  test("renders inline code with children as passed", async () => {
+  test("renders inline code with children as passed", () => {
     render(<Code data-testid="code">Some example code as children</Code>)
     expect(screen.getByTestId("code")).toBeInTheDocument()
     expect(screen.getByTestId("code")).toHaveTextContent("Some example code as children")
   })
 
-  test("renders inline code with content as passed when both content and children were passed", async () => {
+  test("renders inline code with content as passed when both content and children were passed", () => {
     render(
       <Code data-testid="code" content="Content is go">
         Children are meh
@@ -31,13 +31,13 @@ describe("Code", () => {
     expect(screen.getByTestId("code")).not.toHaveTextContent("Children are meh")
   })
 
-  test("renders inline code with a className as passed", async () => {
+  test("renders inline code with a className as passed", () => {
     render(<Code data-testid="code" className="my-code-class"></Code>)
     expect(screen.getByTestId("code")).toBeInTheDocument()
     expect(screen.getByTestId("code")).toHaveClass("my-code-class")
   })
 
-  test("renders inline code with all props as passed", async () => {
+  test("renders inline code with all props as passed", () => {
     render(<Code data-testid="code" data-lolol="code-lang-js"></Code>)
     expect(screen.getByTestId("code")).toBeInTheDocument()
     expect(screen.getByTestId("code")).toHaveAttribute("data-lolol", "code-lang-js")

diff --git a/...i-components/src/components/Code/index.js → ...i-components/src/components/Code/index.ts b/...i-components/src/components/Code/index.js → ...i-components/src/components/Code/index.ts
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { Code } from "./Code.component.js"
+export { Code } from "./Code.component"
diff --git a/packages/ui-components/src/index.js b/packages/ui-components/src/index.js
@@ -17,7 +17,7 @@ export { ButtonRow } from "./components/ButtonRow/index.js"
 export { Checkbox } from "./components/Checkbox/index"
 export { CheckboxRow } from "./components/CheckboxRow/index.js"
 export { CheckboxGroup } from "./components/CheckboxGroup/index.js"
-export { Code } from "./components/Code/index.js"
+export { Code } from "./components/Code/index"
 export { CodeBlock } from "./components/CodeBlock/index"
 export { ComboBox } from "./components/ComboBox/index.js"
 export { ComboBoxOption } from "./components/ComboBoxOption/index.js"