refactor: use theme aware colours (#62)

* feat: add tailwind plugin to introduce theme colours * refactor(alert): use theme aware colours * refactor(avatar): use theme aware colours * refactor(breadcrumb): use theme aware colours * refactor(button): use theme aware colours * refactor(alert): rename base to alert * refactor(chip): use theme aware colours * refactor(checkbox): use theme aware colours * refactor(card): use theme aware colours * refactor(menu): use theme aware colours * refactor(link): use theme aware colours * refactor(divider): use theme aware colours * refactor(navigation): use theme aware colours * refactor(form): use theme aware colours * refactor(typography): use theme aware colours * refactor(select): use theme aware colours * refactor(table): use theme aware colours * refactor(switch): use theme aware colours * refactor(typography): use theme aware colours * fix: build issues * fix: styling inconsistencies * fix: use card hook 'props' is declared but its value is never read
giantnodes · May 3, 2024 · 318616c · 318616c
1 parent 6e2391a
commit 318616c
Show file tree

Hide file tree

Showing 62 changed files with 614 additions and 862 deletions.
diff --git a/packages/react/.storybook/preview.tsx b/packages/react/.storybook/preview.tsx
@@ -18,7 +18,7 @@ const preview: Preview = {
       values: [
         {
           name: 'light',
-          value: '#ffffff',
+          value: '#f7f5f6',
         },
         {
           name: 'dark',
@@ -30,13 +30,13 @@ const preview: Preview = {
   decorators: [
     withThemeByClassName<ReactRenderer>({
       themes: {
-        light: '',
+        light: 'light',
         dark: 'dark',
       },
       defaultTheme: 'light',
     }),
     (Story) => (
-      <div className="dark:bg-shark-950">
+      <div className="bg-background">
         <Story />
       </div>
     ),

diff --git a/packages/react/src/components/alert/Alert.tsx b/packages/react/src/components/alert/Alert.tsx
@@ -7,7 +7,6 @@ import AlertBody from '@/components/alert/AlertBody'
 import AlertHeading from '@/components/alert/AlertHeading'
 import AlertItem from '@/components/alert/AlertItem'
 import AlertList from '@/components/alert/AlertList'
-import AlertText from '@/components/alert/AlertText'
 import { AlertContext, useAlert } from '@/components/alert/use-alert.hook'
 
 const __ELEMENT_TYPE__ = 'div'
@@ -30,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
-        className: context.slots.base({ className }),
+        className: context.slots.alert({ className }),
         ...rest,
       }),
       [context.slots, className, rest]
@@ -52,5 +51,4 @@ export default Object.assign(Component, {
   Heading: AlertHeading,
   Item: AlertItem,
   List: AlertList,
-  Text: AlertText,
 })
diff --git a/packages/react/src/components/alert/AlertText.tsx b/packages/react/src/components/alert/AlertText.tsx
diff --git a/packages/react/src/components/alert/index.ts b/packages/react/src/components/alert/index.ts
@@ -3,6 +3,5 @@ export type { AlertBodyProps } from '@/components/alert/AlertBody'
 export type { AlertHeadingProps } from '@/components/alert/AlertHeading'
 export type { AlertItemProps } from '@/components/alert/AlertItem'
 export type { AlertListProps } from '@/components/alert/AlertList'
-export type { AlertTextProps } from '@/components/alert/AlertText'
 
 export { default as Alert } from '@/components/alert/Alert'
diff --git a/packages/react/src/components/avatar/Avatar.stories.tsx b/packages/react/src/components/avatar/Avatar.stories.tsx
@@ -11,7 +11,7 @@ const Component: Meta<typeof Avatar> = {
   argTypes: {
     color: {
       control: { type: 'select' },
-      options: ['neutral', 'success', 'info', 'warning', 'danger'],
+      options: ['neutral', 'brand', 'success', 'info', 'warning', 'danger'],
     },
     radius: {
       control: { type: 'select' },
@@ -28,7 +28,7 @@ const defaultProps = {
 
 export const Default: StoryFn<AvatarProps> = (args) => (
   <Avatar {...args}>
-    <Avatar.Image alt="avatar image" src="https://i.pravatar.cc/150?img=1" />
+    <Avatar.Image alt="avatar image" src="https://api.dicebear.com/8.x/personas/svg" />
   </Avatar>
 )
 
@@ -39,23 +39,23 @@ Default.args = {
 export const UsingGroup: StoryFn<AvatarGroupProps> = (args) => (
   <Avatar.Group {...args}>
     <Avatar>
-      <Avatar.Image alt="avatar image 1" src="https://i.pravatar.cc/150?img=1" />
+      <Avatar.Image alt="avatar 1" src="https://api.dicebear.com/8.x/personas/svg?seed=avatar-1" />
       <Avatar.Notification />
     </Avatar>
     <Avatar>
-      <Avatar.Image alt="avatar image 2" src="https://i.pravatar.cc/150?img=1" />
+      <Avatar.Image alt="avatar 2" src="https://api.dicebear.com/8.x/personas/svg?seed=avatar-2" />
       <Avatar.Notification />
     </Avatar>
     <Avatar>
-      <Avatar.Image alt="avatar image 3" src="https://i.pravatar.cc/150?img=1" />
+      <Avatar.Image alt="avatar 3" src="https://api.dicebear.com/8.x/personas/svg?seed=avatar-3" />
       <Avatar.Notification />
     </Avatar>
     <Avatar>
-      <Avatar.Image alt="avatar image 4" src="https://i.pravatar.cc/150?img=1" />
+      <Avatar.Image alt="avatar 4" src="https://api.dicebear.com/8.x/personas/svg?seed=avatar-4" />
       <Avatar.Notification />
     </Avatar>
     <Avatar>
-      <Avatar.Image alt="avatar image 5" src="https://i.pravatar.cc/150?img=1" />
+      <Avatar.Image alt="avatar 5" src="https://api.dicebear.com/8.x/personas/svg?seed=avatar-5" />
       <Avatar.Notification />
     </Avatar>
   </Avatar.Group>
@@ -65,25 +65,22 @@ UsingGroup.args = {
   ...defaultProps,
 }
 
-export const UsingText: StoryFn<AvatarProps> = (args) => (
-  <Avatar {...args} className="bg-zinc-100">
-    <p>JP</p>
-  </Avatar>
-)
+export const UsingText: StoryFn<AvatarProps> = (args) => <Avatar {...args}>JP</Avatar>
 
 UsingText.args = {
   ...defaultProps,
 }
 
 export const UsingIcon: StoryFn<AvatarProps> = (args) => (
-  <Avatar {...args} className="bg-zinc-100">
+  <Avatar {...args}>
     <Avatar.Icon
       icon={
         <svg className="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
           <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
         </svg>
       }
     />
+    <Avatar.Notification />
   </Avatar>
 )
 
@@ -93,7 +90,7 @@ UsingIcon.args = {
 
 export const UsingNotification: StoryFn<AvatarProps> = (args) => (
   <Avatar {...args}>
-    <Avatar.Image alt="avatar image 1" src="https://i.pravatar.cc/150?img=1" />
+    <Avatar.Image alt="avatar image 1" src="https://api.dicebear.com/8.x/personas/svg" />
     <Avatar.Notification />
   </Avatar>
 )

diff --git a/packages/react/src/components/avatar/Avatar.tsx b/packages/react/src/components/avatar/Avatar.tsx
@@ -35,7 +35,7 @@ const Component: ComponentType = React.forwardRef(
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
-        className: context.slots.base({ className }),
+        className: context.slots.avatar({ className }),
         ...rest,
       }),
       [context.slots, className, rest]

diff --git a/packages/react/src/components/avatar/AvatarNotification.tsx b/packages/react/src/components/avatar/AvatarNotification.tsx
@@ -1,12 +1,13 @@
 import type * as Polymophic from '@/utilities/polymorphic'
+import type { AvatarVariantProps } from '@giantnodes/theme'
 
 import React from 'react'
 
 import { useAvatarContext } from '@/components/avatar/use-avatar.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
-type ComponentOwnProps = {}
+type ComponentOwnProps = Pick<AvatarVariantProps, 'color'>
 
 type ComponentProps<T extends React.ElementType> = Polymophic.ComponentPropsWithRef<T, ComponentOwnProps>
 
@@ -16,18 +17,18 @@ type ComponentType = <T extends React.ElementType = typeof __ELEMENT_TYPE__>(
 
 const Component: ComponentType = React.forwardRef(
   <T extends React.ElementType = typeof __ELEMENT_TYPE__>(props: ComponentProps<T>, ref: Polymophic.Ref<T>) => {
-    const { as, children, className, ...rest } = props
+    const { as, children, className, color, ...rest } = props
 
     const Element = as ?? __ELEMENT_TYPE__
 
     const { slots } = useAvatarContext()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
-        className: slots.notification({ className }),
+        className: slots.notification({ className, color }),
         ...rest,
       }),
-      [className, rest, slots]
+      [className, color, rest, slots]
     )
 
     return (

diff --git a/packages/react/src/components/breadcrumb/Breadcrumb.stories.tsx b/packages/react/src/components/breadcrumb/Breadcrumb.stories.tsx
@@ -16,8 +16,8 @@ const defaultProps = {
 
 export const Default: StoryFn<BreadcrumbProps<object>> = (args) => (
   <Breadcrumb {...args}>
-    <Breadcrumb.Item>Project</Breadcrumb.Item>
-    <Breadcrumb.Item>Giantnodes</Breadcrumb.Item>
+    <Breadcrumb.Item href="/">Project</Breadcrumb.Item>
+    <Breadcrumb.Item href="/">Giantnodes</Breadcrumb.Item>
     <Breadcrumb.Item>Dashboard</Breadcrumb.Item>
   </Breadcrumb>
 )

diff --git a/packages/react/src/components/breadcrumb/Breadcrumb.tsx b/packages/react/src/components/breadcrumb/Breadcrumb.tsx
@@ -37,7 +37,7 @@ const Component: ComponentType = React.forwardRef(
         className: context.slots.base({ className }),
         ...rest,
       }),
-      [context.slots, className, rest]
+      [className, context.slots, rest]
     )
 
     return (

diff --git a/packages/react/src/components/breadcrumb/BreadcrumbItem.tsx b/packages/react/src/components/breadcrumb/BreadcrumbItem.tsx
@@ -2,13 +2,15 @@ import type * as Polymophic from '@/utilities/polymorphic'
 import type { BreadcrumbProps } from 'react-aria-components'
 
 import React from 'react'
-import { Breadcrumb } from 'react-aria-components'
+import { Breadcrumb, Link } from 'react-aria-components'
 
 import { useBreadcrumbContext } from '@/components/breadcrumb/use-breadcrumb.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
-type ComponentOwnProps = BreadcrumbProps
+type ComponentOwnProps = {
+  href?: string
+} & BreadcrumbProps
 
 type ComponentProps<T extends React.ElementType> = Polymophic.ComponentPropsWithRef<T, ComponentOwnProps>
 
@@ -18,7 +20,7 @@ type ComponentType = <T extends React.ElementType = typeof __ELEMENT_TYPE__>(
 
 const Component: ComponentType = React.forwardRef(
   <T extends React.ElementType = typeof __ELEMENT_TYPE__>(props: ComponentProps<T>, ref: Polymophic.Ref<T>) => {
-    const { as, children, className, ...rest } = props
+    const { as, children, className, href, ...rest } = props
 
     const Element = as ?? Breadcrumb
 
@@ -34,10 +36,10 @@ const Component: ComponentType = React.forwardRef(
 
     return (
       <Element {...component} ref={ref}>
-        {children}
+        <Link href={href}>{children}</Link>
 
         {separator && (
-          <span aria-hidden="true" className={slots.separator()}>
+          <span aria-hidden="true" className={slots.separator()} data-slot="separator">
             {separator}
           </span>
         )}

diff --git a/packages/react/src/components/breadcrumb/use-breadcrumb.hook.ts b/packages/react/src/components/breadcrumb/use-breadcrumb.hook.ts
@@ -5,9 +5,9 @@ import React from 'react'
 
 import { createContext } from '@/utilities/context'
 
-type UseBreadcrumbProps = BreadcrumbVariantProps & {
+type UseBreadcrumbProps = {
   separator?: React.ReactNode
-}
+} & BreadcrumbVariantProps
 
 type UseBreadcrumbReturn = ReturnType<typeof useBreadcrumb>
 

diff --git a/packages/react/src/components/button/Button.stories.tsx b/packages/react/src/components/button/Button.stories.tsx
@@ -14,18 +14,6 @@ const Component: Meta<typeof Button> = {
       control: { type: 'select' },
       options: ['brand', 'success', 'info', 'warning', 'danger'],
     },
-    shape: {
-      control: { type: 'select' },
-    },
-    size: {
-      control: { type: 'select' },
-    },
-    variant: {
-      control: { type: 'select' },
-    },
-    isLoading: {
-      control: { type: 'boolean' },
-    },
   },
 }
 
@@ -35,6 +23,9 @@ const defaultProps = {
 
 export const Default: StoryFn<ButtonProps> = (args) => (
   <div className="flex gap-2">
+    <Button {...args} color="neutral">
+      Button
+    </Button>
     <Button {...args} color="brand">
       Button
     </Button>
@@ -57,13 +48,13 @@ Default.args = {
   ...defaultProps,
 }
 
-export const LinkButton: StoryFn<ButtonProps> = (args) => (
+export const UsingLink: StoryFn<ButtonProps> = (args) => (
   <Button {...args} as={Link} href="www.giantnodes.com" target="__blank">
     Button
   </Button>
 )
 
-LinkButton.args = {
+UsingLink.args = {
   ...defaultProps,
 }
 

diff --git a/packages/react/src/components/button/Button.tsx b/packages/react/src/components/button/Button.tsx
@@ -10,10 +10,10 @@ import Spinner from '@/components/spinner/Spinner'
 
 const __ELEMENT_TYPE__ = 'button'
 
-type ComponentOwnProps = ButtonProps &
-  ButtonVariantProps & {
-    isLoading?: boolean
-  }
+type ComponentOwnProps = {
+  isLoading?: boolean
+} & ButtonProps &
+  ButtonVariantProps
 
 type ComponentProps<T extends React.ElementType> = Polymophic.ComponentPropsWithRef<T, ComponentOwnProps>
 
@@ -23,22 +23,11 @@ type ComponentType = <T extends React.ElementType = typeof __ELEMENT_TYPE__>(
 
 const Component: ComponentType = React.forwardRef(
   <T extends React.ElementType = typeof __ELEMENT_TYPE__>(props: ComponentProps<T>, ref: Polymophic.Ref<T>) => {
-    const {
-      as,
-      children,
-      className,
-      isLoading = false,
-      isDisabled = false,
-      color,
-      shape,
-      size,
-      variant,
-      ...rest
-    } = props
+    const { as, children, className, isLoading = false, isDisabled = false, color, size, ...rest } = props
 
     const Element = as ?? Button
 
-    const slots = React.useMemo(() => button({ color, shape, size, variant }), [color, shape, size, variant])
+    const slots = React.useMemo(() => button({ color, size }), [color, size])
 
     const component = React.useMemo<ButtonProps>(
       () => ({