ui-kit: refactoring component sdk

Signed-off-by: Viktor Login <[email protected]>
shortlink-org · Oct 12, 2024 · 8bf4c74 · 8bf4c74
1 parent bbcb5ad
commit 8bf4c74
Show file tree

Hide file tree

Showing 5 changed files with 334 additions and 45 deletions.
diff --git a/boundaries/ui-monorepo/packages/ui-kit/.storybook/main.ts b/boundaries/ui-monorepo/packages/ui-kit/.storybook/main.ts
@@ -11,6 +11,7 @@ const config: StorybookConfig = {
     '@chromatic-com/storybook',
     '@storybook/addon-a11y',
     '@storybook/addon-coverage',
+    '@storybook/addon-jest',
   ],
   framework: '@storybook/react-vite',
   features: {},

diff --git a/boundaries/ui-monorepo/packages/ui-kit/package.json b/boundaries/ui-monorepo/packages/ui-kit/package.json
@@ -44,6 +44,8 @@
   ],
   "dependencies": {
     "@storybook/builder-vite": "^8.3.5",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/testing-library": "^0.2.2",
     "@tailwindcss/typography": "^0.5.15",
     "algoliasearch": "^5.8.1",
     "export-to-csv": "^1.4.0",
@@ -62,6 +64,7 @@
     "@storybook/addon-docs": "8.3.5",
     "@storybook/addon-essentials": "8.3.5",
     "@storybook/addon-interactions": "8.3.5",
+    "@storybook/addon-jest": "^8.3.5",
     "@storybook/addon-links": "8.3.5",
     "@storybook/addon-themes": "8.3.5",
     "@storybook/blocks": "8.3.5",

diff --git a/...daries/ui-monorepo/packages/ui-kit/src/card/GithubRepository/GithubRepository.stories.tsx b/...daries/ui-monorepo/packages/ui-kit/src/card/GithubRepository/GithubRepository.stories.tsx
@@ -1,36 +1,63 @@
-import { Meta } from '@storybook/react'
-import { expect } from '@storybook/test'
-import { within } from '@storybook/test'
+import { Meta, StoryFn } from '@storybook/react'
+import { expect } from '@storybook/jest'
+import { within } from '@storybook/testing-library'
 
-import GithubRepository from './GithubRepository'
+import GithubRepository, { GithubRepositoryProps } from './GithubRepository'
+import { JSX } from 'react/jsx-runtime'
 
 const meta: Meta<typeof GithubRepository> = {
   title: 'Card/GithubRepository',
   component: GithubRepository,
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Title of the GitHub repository',
+      defaultValue: 'GitHub Repository',
+    },
+    url: {
+      control: 'text',
+      description: 'URL of the GitHub repository',
+      defaultValue: 'https://github.com/shortlink-org/shortlink',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A card component that links to a GitHub repository with enhanced accessibility and styling.',
+      },
+    },
+  },
 }
 
 export default meta
 
-function Template(args: any) {
-  return (
-    <GithubRepository
-      title="GitHub Repository"
-      url="https://github.com/shortlink-org/shortlink"
-      {...args}
-    />
-  )
+const Template: StoryFn<GithubRepositoryProps> = (args: JSX.IntrinsicAttributes & GithubRepositoryProps) => <GithubRepository {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  title: 'GitHub Repository',
+  url: 'https://github.com/shortlink-org/shortlink',
 }
 
-export const Default = {
-  render: Template,
-  args: {},
-  // @ts-ignore
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const link = canvas.getByRole('link')
-    await expect(link).toHaveAttribute(
-      'href',
-      'https://github.com/shortlink-org/shortlink',
-    )
+Default.parameters = {
+  docs: {
+    storyDescription: 'Default state of the GithubRepository component.',
   },
 }
+
+// @ts-ignore
+Default.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+
+  // Check if the link has the correct href attribute
+  const link = canvas.getByRole('link', { name: /visit github repository github repository/i })
+  await expect(link).toHaveAttribute('href', 'https://github.com/shortlink-org/shortlink')
+
+  // Check if the title is rendered correctly
+  const title = canvas.getByText('GitHub Repository')
+  expect(title).toBeInTheDocument()
+
+  // Check if the displayed URL is correct
+  const displayedUrl = canvas.getByText('/shortlink-org/shortlink')
+  expect(displayedUrl).toBeInTheDocument()
+}
diff --git a/boundaries/ui-monorepo/packages/ui-kit/src/card/GithubRepository/GithubRepository.tsx b/boundaries/ui-monorepo/packages/ui-kit/src/card/GithubRepository/GithubRepository.tsx
@@ -1,47 +1,77 @@
 import { ChevronRightIcon } from '@heroicons/react/24/outline'
+import { FC, memo } from 'react'
 
-export function GithubRepository({
-  url,
-  title,
-}: {
+export interface GithubRepositoryProps {
   url: string
   title: string
-}): JSX.Element {
+}
+
+const GithubRepository: FC<GithubRepositoryProps> = memo(({ url, title }) => {
   return (
-    <div className="not-prose group relative my-12 mx-auto flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
-      <div className="absolute inset-0 z-0 w-2 bg-blue-500 transition-all duration-150 group-hover:w-full dark:bg-sky-500" />
-      <div className="w-2 bg-blue-500 dark:bg-sky-500" />
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group relative my-12 mx-auto flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition-colors hover:bg-blue-500 dark:bg-slate-800/60 dark:hover:bg-sky-500"
+      aria-label={`Visit GitHub repository ${title}`}
+    >
+      {/* Background Animation */}
+      <span className="absolute inset-0 z-0 w-2 bg-blue-500 transition-all duration-150 group-hover:w-full dark:bg-sky-500" />
+
+      {/* Static Side Bar */}
+      <span className="z-10 w-2 bg-blue-500 dark:bg-sky-500" />
 
-      <div className="z-10 flex flex-grow items-center py-3">
+      {/* Content */}
+      <div className="z-20 flex flex-grow items-center py-3 px-4 no-underline">
+        {/* GitHub Icon */}
         <svg
-          className="h-10 w-10 rounded-full object-cover"
+          className="h-10 w-10 rounded-full object-cover text-gray-800 dark:text-white group-hover:text-white"
           viewBox="0 0 16 16"
           fill="currentColor"
+          aria-hidden="true"
         >
           <path
             fillRule="evenodd"
-            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
+               0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13
+               -.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66
+               .07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95
+               0-.87.31-1.59.82-2.15
+               -.08-.2-.36-1.02.08-2.12
+               0 0 .67-.21 2.2.82
+               .64-.18 1.32-.27 2-.27
+               .68 0 1.36.09 2 .27
+               1.53-1.04 2.2-.82 2.2-.82
+               .44 1.1.16 1.92.08 2.12
+               .51.56.82 1.27.82 2.15
+               0 3.07-1.87 3.75-3.65 3.95
+               .29.25.54.73.54 1.48
+               0 1.07-.01 1.93-.01 2.2
+               0 .21.15.46.55.38A8.013
+               8.013 0 0016 8c0-4.42-3.58-8-8-8z"
           />
         </svg>
 
-        <div className="mx-3">
-          <p>
+        <div className="mx-3 no-underline">
+          <p className={"text-lg font-semibold text-gray-900 dark:text-white group-hover:text-white no-underline"}>
             {title}
             <a
               href={url}
               target="_blank"
               rel="noreferrer"
-              className="block text-sm font-medium opacity-80"
+              className="block text-sm font-medium text-gray-600  group-hover:text-white dark:text-gray-300 no-underline"
             >
               <span className="absolute inset-0" aria-hidden="true" />
               {url.replace(/^.*\/\/[^/]+/, '')}
             </a>
           </p>
         </div>
       </div>
-      <ChevronRightIcon className="mr-4 h-6 w-6 transition-all group-hover:translate-x-3" />
-    </div>
+
+      {/* Chevron Icon */}
+      <ChevronRightIcon className="mr-4 h-6 w-6 text-gray-500 transition-transform duration-200 group-hover:translate-x-3 group-hover:text-white dark:text-gray-400 dark:group-hover:text-white" />
+    </a>
   )
-}
+})
 
 export default GithubRepository