Merge pull request #142 from omnifed/141-bug-update-react-styled-syst…

…em-paths fix(react): use .mjs styled-system imports
omnifed · Jun 5, 2024 · 9f7b133 · 9f7b133
2 parents 1ab8194 + c9b4bae
commit 9f7b133
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 23 deletions.
diff --git a/docs/app/preset/overview.mdx b/docs/app/preset/overview.mdx
@@ -89,15 +89,15 @@ const poppins = Poppins({
 })
 ```
 
-### Using the Cerberus React package (Not JSR compatible yet)
+### Using Cerberus React (Not JSR compatible yet)
 
 If you are interested in using the Cerberus React, install it now:
 
 ```bash
 pnpm add @cerberus-design/react
 ```
 
-### Using the Cerberus Icons package (optional)
+### Using the Cerberus Icons (optional)
 
 If you are interested in using the Cerberus Icons, install it now:
 
@@ -113,7 +113,7 @@ To help make maintaining a breeze, add this new script to your `package.json` to
 
 ```json title="package.json"
 "scripts": {
-  "up:cerberus": "pnpm up @cerberus-design/{react} && pnpm dlx jsr add @cerberus/{panda-preset,styled-system,icons}"
+  "up:cerberus": "pnpm up @cerberus-design/react@latest && pnpm dlx jsr add @cerberus/{panda-preset,styled-system,icons}@latest"
 }
 ```
 
@@ -140,24 +140,25 @@ This will map the JSR styled-system to the NPM expected location.
 ### Step 2 - Add a `global.d.ts` file
 
 ```ts title="global.d.ts"
-declare module '@cerberus/styled-system/css' {
+declare module '@cerberus/styled-system/css/index.mjs' {
   export * from '@cerberus-design/styled-system/css'
 }
 
-declare module '@cerberus/styled-system/recipes' {
+declare module '@cerberus/styled-system/recipes/index.mjs' {
   export * from '@cerberus-design/styled-system/recipes'
 }
 
 declare module '@cerberus/styled-system/types' {
   export * from '@cerberus-design/styled-system/types'
 }
 
-declare module '@cerberus/styled-system/utils' {
+declare module '@cerberus/styled-system/utils/index.mjs' {
   export * from '@cerberus-design/styled-system/utils'
 }
 
-declare module '@cerberus/styled-system/patterns' {
+declare module '@cerberus/styled-system/patterns/index.mjs' {
   export * from '@cerberus-design/styled-system/patterns'
 }
+
 ```
 This will map the JSR styled-system to the NPM expected location.
diff --git a/packages/react/src/components/Button.tsx b/packages/react/src/components/Button.tsx
@@ -1,6 +1,6 @@
 import type { ButtonHTMLAttributes } from 'react'
-import { cx } from '@cerberus/styled-system/css'
-import { button } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css/index.mjs'
+import { button } from '@cerberus/styled-system/recipes/index.mjs'
 
 /**
  * This module contains the Button component.

diff --git a/packages/react/src/components/IconButton.tsx b/packages/react/src/components/IconButton.tsx
@@ -1,6 +1,6 @@
 import type { ButtonHTMLAttributes } from 'react'
-import { cx } from '@cerberus/styled-system/css'
-import { iconButton } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css/index.mjs'
+import { iconButton } from '@cerberus/styled-system/recipes/index.mjs'
 import type { ButtonProps } from './Button'
 
 /**

diff --git a/packages/react/src/components/NavMenuLink.tsx b/packages/react/src/components/NavMenuLink.tsx
@@ -1,6 +1,6 @@
 import type { AnchorHTMLAttributes, ElementType } from 'react'
+import { css, cx } from '@cerberus/styled-system/css/index.mjs'
 import { Show } from './Show'
-import { css, cx } from '@cerberus/styled-system/css'
 
 export interface NavMenuLinkProps
   extends AnchorHTMLAttributes<HTMLAnchorElement> {

diff --git a/packages/react/src/components/NavMenuList.tsx b/packages/react/src/components/NavMenuList.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import { useMemo, type HTMLAttributes } from 'react'
+import { cx } from '@cerberus/styled-system/css/index.mjs'
+import { vstack } from '@cerberus/styled-system/patterns/index.mjs'
 import { useNavMenuContext } from '../context/navMenu'
-import { Show } from './Show'
 import type { Positions } from '../types'
-import { cx } from '@cerberus/styled-system/css'
-import { vstack } from '@cerberus/styled-system/patterns'
+import { Show } from './Show'
 
 interface GetPositionResult {
   left: string

diff --git a/packages/react/src/components/NavMenuTrigger.tsx b/packages/react/src/components/NavMenuTrigger.tsx
@@ -6,15 +6,15 @@ import {
   type ElementType,
   type MouseEvent,
 } from 'react'
-import { cx } from '@cerberus/styled-system/css'
-import { button } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css/index.mjs'
+import { button } from '@cerberus/styled-system/recipes/index.mjs'
 import {
   createNavTriggerProps,
   type NavTriggerAriaValues,
 } from '../aria-helpers/nav-menu.aria'
-import { Show } from './Show'
-import type { ButtonProps } from './Button'
 import { useNavMenuContext } from '../context/navMenu'
+import type { ButtonProps } from './Button'
+import { Show } from './Show'
 
 export interface NavMenuTriggerProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,

diff --git a/packages/react/src/global.d.ts b/packages/react/src/global.d.ts
@@ -1,19 +1,19 @@
-declare module '@cerberus/styled-system/css' {
+declare module '@cerberus/styled-system/css/index.mjs' {
   export * from '@cerberus-design/styled-system/css'
 }
 
-declare module '@cerberus/styled-system/recipes' {
+declare module '@cerberus/styled-system/recipes/index.mjs' {
   export * from '@cerberus-design/styled-system/recipes'
 }
 
 declare module '@cerberus/styled-system/types' {
   export * from '@cerberus-design/styled-system/types'
 }
 
-declare module '@cerberus/styled-system/utils' {
+declare module '@cerberus/styled-system/utils/index.mjs' {
   export * from '@cerberus-design/styled-system/utils'
 }
 
-declare module '@cerberus/styled-system/patterns' {
+declare module '@cerberus/styled-system/patterns/index.mjs' {
   export * from '@cerberus-design/styled-system/patterns'
 }