feat: add RSC support (#133)

* feat: add rsc support * fix: remove incomplete shape input props
giantnodes · Jun 18, 2024 · 89ed12b · 89ed12b
1 parent 1788dbf
commit 89ed12b
Show file tree

Hide file tree

Showing 135 changed files with 440 additions and 306 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -15,7 +15,7 @@
     "url": "ssh://[email protected]/giantnodes/design-system.git"
   },
   "scripts": {
-    "build": "tsup src",
+    "build": "tsup src && resolve-tspaths -o dist",
     "---": "",
     "lint:eslint": "eslint src --ext cjs,js,jsx,mjs,ts,tsx --max-warnings=0",
     "lint:prettier": "pretty-quick 'src/**/*.{cjs,js,jsx,mjs,ts,tsx,json,md,mdx,css,html,yml,yaml,scss}'",
@@ -59,6 +59,7 @@
     "prop-types": "15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "resolve-tspaths": "^0.8.19",
     "storybook": "^8.0.10",
     "tailwindcss": "^3.4.3",
     "ts-jest": "^29.1.2",

diff --git a/packages/react/src/components/alert/Alert.stories.tsx b/packages/react/src/components/alert/Alert.stories.tsx
@@ -3,11 +3,11 @@ import type { Meta, StoryFn } from '@storybook/react'
 
 import { alert } from '@giantnodes/theme'
 
-import { Alert } from '@/components/alert'
+import { Alert } from '@/components'
 
-const Component: Meta<typeof Alert> = {
+const Component: Meta<typeof Alert.Root> = {
   title: 'Components/Alert',
-  component: Alert,
+  component: Alert.Root,
   argTypes: {
     color: {
       control: { type: 'select' },
@@ -21,15 +21,15 @@ const defaultProps = {
 }
 
 export const Default: StoryFn<AlertProps> = (args) => (
-  <Alert {...args}>
+  <Alert.Root {...args}>
     <Alert.Body>
       <Alert.Heading>There were 2 errors with your submission</Alert.Heading>
       <Alert.List>
         <Alert.Item>Your password must be at least 8 characters</Alert.Item>
         <Alert.Item>Your password must include at least one pro wrestling finishing move</Alert.Item>
       </Alert.List>
     </Alert.Body>
-  </Alert>
+  </Alert.Root>
 )
 
 Default.args = {

diff --git a/packages/react/src/components/alert/Alert.tsx b/packages/react/src/components/alert/Alert.tsx
@@ -1,12 +1,10 @@
+'use client'
+
 import type * as Polymophic from '@/utilities/polymorphic'
 import type { AlertVariantProps } from '@giantnodes/theme'
 
 import React from 'react'
 
-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 { AlertContext, useAlert } from '@/components/alert/use-alert.hook'
 
 const __ELEMENT_TYPE__ = 'div'
@@ -52,9 +50,4 @@ const Component: ComponentType = React.forwardRef(
 )
 
 export type { ComponentOwnProps as AlertOwnProps, ComponentProps as AlertProps }
-export default Object.assign(Component, {
-  Body: AlertBody,
-  Heading: AlertHeading,
-  Item: AlertItem,
-  List: AlertList,
-})
+export default Component
diff --git a/packages/react/src/components/alert/AlertBody.tsx b/packages/react/src/components/alert/AlertBody.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type * as Polymophic from '@/utilities/polymorphic'
 
 import React from 'react'

diff --git a/packages/react/src/components/alert/AlertHeading.tsx b/packages/react/src/components/alert/AlertHeading.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type * as Polymophic from '@/utilities/polymorphic'
 import type { HeadingProps } from 'react-aria-components'
 

diff --git a/packages/react/src/components/alert/AlertItem.tsx b/packages/react/src/components/alert/AlertItem.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type * as Polymophic from '@/utilities/polymorphic'
 
 import React from 'react'

diff --git a/packages/react/src/components/alert/AlertList.tsx b/packages/react/src/components/alert/AlertList.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type * as Polymophic from '@/utilities/polymorphic'
 
 import React from 'react'

diff --git a/packages/react/src/components/alert/component.parts.ts b/packages/react/src/components/alert/component.parts.ts
@@ -0,0 +1,5 @@
+export { default as Root } from '@/components/alert/Alert'
+export { default as Body } from '@/components/alert/AlertBody'
+export { default as Heading } from '@/components/alert/AlertHeading'
+export { default as Item } from '@/components/alert/AlertItem'
+export { default as List } from '@/components/alert/AlertList'
diff --git a/packages/react/src/components/alert/index.ts b/packages/react/src/components/alert/index.ts
@@ -4,4 +4,4 @@ export type * from '@/components/alert/AlertHeading'
 export type * from '@/components/alert/AlertItem'
 export type * from '@/components/alert/AlertList'
 
-export { default as Alert } from '@/components/alert/Alert'
+export * as Alert from '@/components/alert/component.parts'
diff --git a/packages/react/src/components/alert/use-alert.hook.ts b/packages/react/src/components/alert/use-alert.hook.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import type { AlertVariantProps } from '@giantnodes/theme'
 
 import { alert } from '@giantnodes/theme'

diff --git a/packages/react/src/components/avatar/Avatar.stories.tsx b/packages/react/src/components/avatar/Avatar.stories.tsx
@@ -3,11 +3,11 @@ import type { Meta, StoryFn } from '@storybook/react'
 
 import { avatar } from '@giantnodes/theme'
 
-import { Avatar } from '@/components/avatar'
+import { Avatar } from '@/components'
 
-const Component: Meta<typeof Avatar> = {
+const Component: Meta<typeof Avatar.Root> = {
   title: 'Components/Avatar',
-  component: Avatar,
+  component: Avatar.Root,
   argTypes: {
     color: {
       control: { type: 'select' },
@@ -27,9 +27,9 @@ const defaultProps = {
 }
 
 export const Default: StoryFn<AvatarProps> = (args) => (
-  <Avatar {...args}>
+  <Avatar.Root {...args}>
     <Avatar.Image alt="avatar image" src="https://api.dicebear.com/8.x/personas/svg" />
-  </Avatar>
+  </Avatar.Root>
 )
 
 Default.args = {
@@ -38,41 +38,41 @@ Default.args = {
 
 export const UsingGroup: StoryFn<AvatarGroupProps> = (args) => (
   <Avatar.Group {...args}>
-    <Avatar>
+    <Avatar.Root>
       <Avatar.Image alt="avatar 1" src="https://api.dicebear.com/8.x/personas/svg?seed=avatar-1" />
       <Avatar.Notification />
-    </Avatar>
-    <Avatar>
+    </Avatar.Root>
+    <Avatar.Root>
       <Avatar.Image alt="avatar 2" src="https://api.dicebear.com/8.x/personas/svg?seed=avatar-2" />
       <Avatar.Notification />
-    </Avatar>
-    <Avatar>
+    </Avatar.Root>
+    <Avatar.Root>
       <Avatar.Image alt="avatar 3" src="https://api.dicebear.com/8.x/personas/svg?seed=avatar-3" />
       <Avatar.Notification />
-    </Avatar>
-    <Avatar>
+    </Avatar.Root>
+    <Avatar.Root>
       <Avatar.Image alt="avatar 4" src="https://api.dicebear.com/8.x/personas/svg?seed=avatar-4" />
       <Avatar.Notification />
-    </Avatar>
-    <Avatar>
+    </Avatar.Root>
+    <Avatar.Root>
       <Avatar.Image alt="avatar 5" src="https://api.dicebear.com/8.x/personas/svg?seed=avatar-5" />
       <Avatar.Notification />
-    </Avatar>
+    </Avatar.Root>
   </Avatar.Group>
 )
 
 UsingGroup.args = {
   ...defaultProps,
 }
 
-export const UsingText: StoryFn<AvatarProps> = (args) => <Avatar {...args}>JP</Avatar>
+export const UsingText: StoryFn<AvatarProps> = (args) => <Avatar.Root {...args}>JP</Avatar.Root>
 
 UsingText.args = {
   ...defaultProps,
 }
 
 export const UsingIcon: StoryFn<AvatarProps> = (args) => (
-  <Avatar {...args}>
+  <Avatar.Root {...args}>
     <Avatar.Icon
       icon={
         <svg className="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
@@ -81,18 +81,18 @@ export const UsingIcon: StoryFn<AvatarProps> = (args) => (
       }
     />
     <Avatar.Notification />
-  </Avatar>
+  </Avatar.Root>
 )
 
 UsingIcon.args = {
   ...defaultProps,
 }
 
 export const UsingNotification: StoryFn<AvatarProps> = (args) => (
-  <Avatar {...args}>
+  <Avatar.Root {...args}>
     <Avatar.Image alt="avatar image 1" src="https://api.dicebear.com/8.x/personas/svg" />
     <Avatar.Notification />
-  </Avatar>
+  </Avatar.Root>
 )
 
 UsingNotification.args = {

diff --git a/packages/react/src/components/avatar/Avatar.tsx b/packages/react/src/components/avatar/Avatar.tsx
@@ -1,12 +1,10 @@
+'use client'
+
 import type * as Polymophic from '@/utilities/polymorphic'
 import type { AvatarVariantProps } from '@giantnodes/theme'
 
 import React from 'react'
 
-import AvatarGroup from '@/components/avatar/AvatarGroup'
-import AvatarIcon from '@/components/avatar/AvatarIcon'
-import AvatarImage from '@/components/avatar/AvatarImage'
-import AvatarNotification from '@/components/avatar/AvatarNotification'
 import { AvatarContext, useAvatar, useAvatarContext } from '@/components/avatar/use-avatar.hook'
 
 const __ELEMENT_TYPE__ = 'span'
@@ -58,9 +56,4 @@ const Component: ComponentType = React.forwardRef(
 )
 
 export type { ComponentOwnProps as AvatarOwnProps, ComponentProps as AvatarProps }
-export default Object.assign(Component, {
-  Group: AvatarGroup,
-  Image: AvatarImage,
-  Icon: AvatarIcon,
-  Notification: AvatarNotification,
-})
+export default Component
diff --git a/packages/react/src/components/avatar/AvatarGroup.tsx b/packages/react/src/components/avatar/AvatarGroup.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type * as Polymophic from '@/utilities/polymorphic'
 import type { AvatarVariantProps } from '@giantnodes/theme'
 

diff --git a/packages/react/src/components/avatar/AvatarIcon.tsx b/packages/react/src/components/avatar/AvatarIcon.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type * as Polymophic from '@/utilities/polymorphic'
 
 import React from 'react'

diff --git a/packages/react/src/components/avatar/AvatarImage.tsx b/packages/react/src/components/avatar/AvatarImage.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type * as Polymophic from '@/utilities/polymorphic'
 
 import React from 'react'

diff --git a/packages/react/src/components/avatar/AvatarNotification.tsx b/packages/react/src/components/avatar/AvatarNotification.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type * as Polymophic from '@/utilities/polymorphic'
 import type { AvatarVariantProps } from '@giantnodes/theme'
 

diff --git a/packages/react/src/components/avatar/component.parts.ts b/packages/react/src/components/avatar/component.parts.ts
@@ -0,0 +1,5 @@
+export { default as Root } from '@/components/avatar/Avatar'
+export { default as Group } from '@/components/avatar/AvatarGroup'
+export { default as Icon } from '@/components/avatar/AvatarIcon'
+export { default as Image } from '@/components/avatar/AvatarImage'
+export { default as Notification } from '@/components/avatar/AvatarNotification'
diff --git a/packages/react/src/components/avatar/index.ts b/packages/react/src/components/avatar/index.ts
@@ -4,4 +4,4 @@ export type * from '@/components/avatar/AvatarIcon'
 export type * from '@/components/avatar/AvatarImage'
 export type * from '@/components/avatar/AvatarNotification'
 
-export { default as Avatar } from '@/components/avatar/Avatar'
+export * as Avatar from '@/components/avatar/component.parts'
diff --git a/packages/react/src/components/avatar/use-avatar.hook.ts b/packages/react/src/components/avatar/use-avatar.hook.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import type { AvatarVariantProps } from '@giantnodes/theme'
 
 import { avatar } from '@giantnodes/theme'

diff --git a/packages/react/src/components/breadcrumb/Breadcrumb.stories.tsx b/packages/react/src/components/breadcrumb/Breadcrumb.stories.tsx
@@ -3,23 +3,23 @@ import type { Meta, StoryFn } from '@storybook/react'
 
 import { breadcrumb } from '@giantnodes/theme'
 
-import { Breadcrumb } from '@/components/breadcrumb'
+import { Breadcrumb } from '@/components'
 
-const Component: Meta<typeof Breadcrumb> = {
+const Component: Meta<typeof Breadcrumb.Root> = {
   title: 'Components/Breadcrumb',
-  component: Breadcrumb,
+  component: Breadcrumb.Root,
 }
 
 const defaultProps = {
   ...breadcrumb.defaultVariants,
 }
 
 export const Default: StoryFn<BreadcrumbProps<object>> = (args) => (
-  <Breadcrumb {...args}>
+  <Breadcrumb.Root {...args}>
     <Breadcrumb.Item href="/">Project</Breadcrumb.Item>
     <Breadcrumb.Item href="/">Giantnodes</Breadcrumb.Item>
     <Breadcrumb.Item>Dashboard</Breadcrumb.Item>
-  </Breadcrumb>
+  </Breadcrumb.Root>
 )
 
 Default.args = {

diff --git a/packages/react/src/components/breadcrumb/Breadcrumb.tsx b/packages/react/src/components/breadcrumb/Breadcrumb.tsx
@@ -1,11 +1,12 @@
+'use client'
+
 import type * as Polymophic from '@/utilities/polymorphic'
 import type { BreadcrumbVariantProps } from '@giantnodes/theme'
 import type { BreadcrumbsProps } from 'react-aria-components'
 
 import React from 'react'
 import { Breadcrumbs } from 'react-aria-components'
 
-import BreadcrumbItem from '@/components/breadcrumb/BreadcrumbItem'
 import { BreadcrumbContext, useBreadcrumb } from '@/components/breadcrumb/use-breadcrumb.hook'
 
 const __ELEMENT_TYPE__ = 'ol'
@@ -51,6 +52,4 @@ const Component: ComponentType = React.forwardRef(
 )
 
 export type { ComponentOwnProps as BreadcrumbOwnProps, ComponentProps as BreadcrumbProps }
-export default Object.assign(Component, {
-  Item: BreadcrumbItem,
-})
+export default Component
diff --git a/packages/react/src/components/breadcrumb/BreadcrumbItem.tsx b/packages/react/src/components/breadcrumb/BreadcrumbItem.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type * as Polymophic from '@/utilities/polymorphic'
 import type { BreadcrumbProps } from 'react-aria-components'
 

diff --git a/packages/react/src/components/breadcrumb/component.parts.ts b/packages/react/src/components/breadcrumb/component.parts.ts
@@ -0,0 +1,2 @@
+export { default as Root } from '@/components/breadcrumb/Breadcrumb'
+export { default as Item } from '@/components/breadcrumb/BreadcrumbItem'
diff --git a/packages/react/src/components/breadcrumb/index.ts b/packages/react/src/components/breadcrumb/index.ts
@@ -1,4 +1,4 @@
 export type * from '@/components/breadcrumb/Breadcrumb'
 export type * from '@/components/breadcrumb/BreadcrumbItem'
 
-export { default as Breadcrumb } from '@/components/breadcrumb/Breadcrumb'
+export * as Breadcrumb from '@/components/breadcrumb/component.parts'
diff --git a/packages/react/src/components/breadcrumb/use-breadcrumb.hook.ts b/packages/react/src/components/breadcrumb/use-breadcrumb.hook.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import type { BreadcrumbVariantProps } from '@giantnodes/theme'
 
 import { breadcrumb } from '@giantnodes/theme'

diff --git a/packages/react/src/components/button/Button.stories.tsx b/packages/react/src/components/button/Button.stories.tsx
@@ -3,8 +3,7 @@ import type { Meta, StoryFn } from '@storybook/react'
 
 import { button } from '@giantnodes/theme'
 
-import { Button } from '@/components/button'
-import Link from '@/components/link/Link'
+import { Button, Link } from '@/components'
 
 const Component: Meta<typeof Button> = {
   title: 'Components/Button',

diff --git a/packages/react/src/components/button/Button.tsx b/packages/react/src/components/button/Button.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type * as Polymophic from '@/utilities/polymorphic'
 import type { ButtonVariantProps } from '@giantnodes/theme'
 import type { ButtonProps } from 'react-aria-components'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as Root } from '@/components/breadcrumb/Breadcrumb'
		export { default as Item } from '@/components/breadcrumb/BreadcrumbItem'