chore: add next 14 to peer dep list (#121)

* feat: support params and null for cn function * fix: add dot border support to carousel * chore: upgrade cypress * chore: add changesets
mdarche · Feb 7, 2024 · bbd22d9 · bbd22d9
1 parent 496b468
commit bbd22d9
Show file tree

Hide file tree

Showing 45 changed files with 190 additions and 753 deletions.
diff --git a/.changeset/little-dragons-laugh.md b/.changeset/little-dragons-laugh.md
@@ -0,0 +1,5 @@
+---
+'@maker-ui/social': minor
+---
+
+Removes twitter support and adds X icon
diff --git a/.changeset/rare-pumas-eat.md b/.changeset/rare-pumas-eat.md
@@ -0,0 +1,14 @@
+---
+'@maker-ui/carousel': patch
+'@maker-ui/forms': patch
+'@maker-ui/layout': patch
+'@maker-ui/layout-client': patch
+'@maker-ui/layout-server': patch
+'@maker-ui/lightbox': patch
+'maker-ui': patch
+'@maker-ui/notifications': patch
+'@maker-ui/scroll': patch
+'@maker-ui/social': patch
+---
+
+Adds peer dependency support for Next 14
diff --git a/.changeset/slimy-shirts-jump.md b/.changeset/slimy-shirts-jump.md
@@ -0,0 +1,5 @@
+---
+'@maker-ui/utils': patch
+---
+
+Extends cn function to include params and null values.
diff --git a/apps/docs/src/app/api-reference/components/accordion/layout.tsx b/apps/docs/src/app/api-reference/components/accordion/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 
 import Readme from '@/packages/accordion/README.mdx'
-import { RefLayout } from '@/components'
+import { ReferenceLayout } from '@/components'
 import { getFileSize } from '@/utils'
 
 export const metadata: Metadata = {
@@ -17,14 +17,14 @@ export default async function AccordionLayout({
   const fileSize = await getFileSize('accordion/dist/index.mjs')
 
   return (
-    <RefLayout
+    <ReferenceLayout
       title="Accordion"
       type="component"
       library="maker-ui/accordion"
       github="/packages/accordion/README.mdx"
       fileSize={fileSize}
       readme={<Readme />}>
       {children}
-    </RefLayout>
+    </ReferenceLayout>
   )
 }
diff --git a/apps/docs/src/app/api-reference/components/accordion/page.tsx b/apps/docs/src/app/api-reference/components/accordion/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Section } from 'maker-ui'
+import { Section } from 'maker-ui/layout'
 import { Accordion } from 'maker-ui/accordion'
 import { Demo } from '@/components'
 import Example1 from './_examples/example-1.mdx'
@@ -20,7 +20,7 @@ export default function AccordionPage() {
               button: {
                 color: 'var(--color-primary',
                 colorActive: 'var(--color-secondary)',
-                background: 'var(--color-gray-100)',
+                bg: 'var(--color-gray-100)',
                 border: '1px solid var(--color-border-200)',
               },
             }}>

diff --git a/apps/docs/src/app/layout.tsx b/apps/docs/src/app/layout.tsx
@@ -1,6 +1,11 @@
 import type { Metadata } from 'next'
-import { Layout, LayoutProvider, type MakerUIOptions } from 'maker-ui'
-import { Menu } from 'maker-ui/layout'
+import {
+  Layout,
+  LayoutProvider,
+  type MakerUIOptions,
+  Menu,
+  ResponsiveStyle,
+} from 'maker-ui/layout'
 import { DesktopWidgets, SharedWidgets } from '../components/NavArea'
 
 import 'maker-ui/layout.css'
@@ -30,7 +35,6 @@ export const metadata: Metadata = {
     follow: true,
     index: true,
   },
-  themeColor: '#fff',
 }
 
 export default function RootLayout({
@@ -40,6 +44,12 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <head>
+        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+        <meta httpEquiv="Content-Type" content="text/html;charset=utf-8" />
+        <link key="favicon" rel="shortcut icon" href="/favicon.ico" />
+        <ResponsiveStyle options={options} />
+      </head>
       <body>
         <LayoutProvider options={options}>
           <Layout options={options}>
@@ -54,15 +64,15 @@ export default function RootLayout({
               menu={sideMenu}
             />
             <Layout.Main>{children}</Layout.Main>
-            <Layout.SideNav
+            <Layout.LeftPanel
               menuButton={{
                 icon: 'Collapse',
                 fixed: true,
                 position: { bottom: 30, right: 30 },
               }}>
               <SharedWidgets />
               <Menu items={sideMenu} />
-            </Layout.SideNav>
+            </Layout.LeftPanel>
           </Layout>
         </LayoutProvider>
       </body>
@@ -72,10 +82,9 @@ export default function RootLayout({
 
 const options: MakerUIOptions = {
   colorThemes: ['light', 'dark', 'system'],
-  layout: 'sidenav-content',
   header: {
-    navType: 'basic-left',
-    navTypeMobile: 'basic',
+    template: 'basic-left',
+    templateMobile: 'basic',
     sticky: true,
     stickyOnMobile: true,
   },
@@ -84,12 +93,9 @@ const options: MakerUIOptions = {
     closeOnBlur: true,
     closeOnRouteChange: true,
   },
-  sideNav: {
+  leftPanel: {
     isHeader: false,
-    isPrimaryMobileNav: true,
-    collapse: true,
-    showCollapseOnMobile: false,
-    closeOnBlur: true,
+    primaryMobileNav: true,
     closeOnRouteChange: true,
   },
 }
diff --git a/apps/docs/src/components/ReferenceLayout/ReferenceLayout.tsx b/apps/docs/src/components/ReferenceLayout/ReferenceLayout.tsx
@@ -1,4 +1,4 @@
-import { Section } from 'maker-ui'
+import { Section } from 'maker-ui/layout'
 import { PostNavigation } from '..'
 import { PageContents } from '../PageContents/PageContents'
 

diff --git a/apps/docs/src/styles/_variables.scss b/apps/docs/src/styles/_variables.scss
@@ -3,9 +3,8 @@
   --height-header: 52px;
   --max-width-header: 100%;
   --width-mobile-menu: 300px;
-  /* SideNav */
-  --width-side-nav: 272px;
-  /* Content */
+  --width-left-panel: 272px;
+  --width-left-panel-collapse: 0px;
   --max-width-content: 100%;
   --max-width-section: 1010px;
   /* Fonts */
@@ -43,7 +42,7 @@ body[data-theme='dark'] {
   --color-text: #fff;
   --color-background: #000;
   --border-header: 1px solid var(--color-border-100);
-  --border-side-nav: 1px solid var(--color-border-100);
+  --border-panel-left: 1px solid var(--color-border-100);
   /* Project specific */
   --color-border-100: #2e2e2e;
   --color-border-200: #818181;
@@ -65,7 +64,7 @@ body[data-theme='light'] {
   --color-text: #000;
   --color-background: #fff;
   --border-header: 1px solid var(--color-border-100);
-  --border-side-nav: 1px solid var(--color-border-100);
+  --border-panel-left: 1px solid var(--color-border-100);
   /* Project specific */
   --color-border-100: #e5e9ea;
   --color-border-200: #a2a2a2;

diff --git a/apps/docs/src/styles/content.ts b/apps/docs/src/styles/content.ts