feat: bem

Signed-off-by: Innei <[email protected]>

Author: Innei

.github/workflows/build.yml

@@ -38,7 +38,6 @@ jobs:
         with:
           version: 8.x.x
           run_install: true
-      - run: pnpm run package
-      - run: pnpm run test
+      - run: pnpm run build
         env:
           CI: true

demo/app/layout.tsx

@@ -1,7 +1,7 @@
 import "@/styles/globals.css"
 import { Metadata } from "next"
 import { motion } from "framer-motion"
-import { ModalStackContainer } from "rc-modal-sheet"
+import { ModalStackContainer } from "rc-modal-sheet/src/helpers/motion"
 
 import { siteConfig } from "@/config/site"
 import { fontSans } from "@/lib/fonts"
@@ -47,11 +47,12 @@ export default function RootLayout({ children }: RootLayoutProps) {
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
             <div className="relative flex min-h-screen flex-col">
               <SiteHeader />
-              <div className="flex-1">{children}</div>
+              <ModalStackContainer>
+                <div className="flex-1">{children}</div>
+              </ModalStackContainer>
             </div>
             <TailwindIndicator />
           </ThemeProvider>
-          <Providers />
         </body>
       </html>
     </>

demo/app/page.tsx

@@ -1,38 +1,35 @@
-import Link from "next/link"
+"use client"
 
-import { siteConfig } from "@/config/site"
-import { buttonVariants } from "@/components/ui/button"
+import { useModalStack } from "~/modal"
+
+import { Button, buttonVariants } from "@/components/ui/button"
 
 export default function IndexPage() {
+  const { present } = useModalStack()
   return (
     <section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
       <div className="flex max-w-[980px] flex-col items-start gap-2">
         <h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
           Beautifully designed components <br className="hidden sm:inline" />
           built with Radix UI and Tailwind CSS.
         </h1>
-        <p className="max-w-[700px] text-lg text-muted-foreground">
+        <p className="text-muted-foreground max-w-[700px] text-lg">
           Accessible and customizable components that you can copy and paste
           into your apps. Free. Open Source. And Next.js 13 Ready.
         </p>
       </div>
       <div className="flex gap-4">
-        <Link
-          href={siteConfig.links.docs}
-          target="_blank"
-          rel="noreferrer"
+        <Button
+          onClick={() => {
+            present({
+              title: "Modal",
+              content: () => <div>Modal</div>,
+            })
+          }}
           className={buttonVariants()}
         >
-          Documentation
-        </Link>
-        <Link
-          target="_blank"
-          rel="noreferrer"
-          href={siteConfig.links.github}
-          className={buttonVariants({ variant: "outline" })}
-        >
-          GitHub
-        </Link>
+          Present
+        </Button>
       </div>
     </section>
   )

demo/app/provider.tsx

@@ -1,6 +1,9 @@
 "use client"
 
+import type { PropsWithChildren } from "react"
 import { motion } from "framer-motion"
 import { ModalStackContainer } from "~/modal"
 
-export const Providers = () => <ModalStackContainer m={motion} />
+export const Providers = (props: PropsWithChildren) => (
+  <ModalStackContainer m={motion}>{props.children}</ModalStackContainer>
+)

demo/tailwind.config.js

@@ -3,7 +3,11 @@ const { fontFamily } = require("tailwindcss/defaultTheme")
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
-  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
+  content: [
+    "app/**/*.{ts,tsx}",
+    "components/**/*.{ts,tsx}",
+    "./node_modules/rc-modal-sheet/src/**/*.{ts,tsx}",
+  ],
   theme: {
     container: {
       center: true,

package.json

@@ -16,7 +16,7 @@
     ".": {
       "import": "./src/index.ts"
     },
-    "./*": {
+    "./src/*": {
       "import": "./src/*"
     }
   },

src/dialog/DialogOverlay.tsx

@@ -14,7 +14,7 @@ export const DialogOverlay = ({
     <Dialog.Overlay asChild>
       <m.div
         onClick={onClick}
-        className="fixed inset-0 z-[11] bg-zinc-50/80 dark:bg-neutral-900/80"
+        className="fixed inset-0 z-[11] bg-zinc-50/80 dark:bg-zinc-950/80"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}

src/helpers/m.tsx

@@ -1,7 +1,10 @@
 'use client'
 
 import { m } from 'framer-motion'
+import type { PropsWithChildren } from 'react'
 
 import { ModalStackContainer as MSC } from '~/modal'
 
-export const ModalStackContainer = () => <MSC m={m} />
+export const ModalStackContainer = (props: PropsWithChildren) => (
+  <MSC m={m}>{props.children}</MSC>
+)

src/helpers/motion.tsx

@@ -1,7 +1,10 @@
 'use client'
 
 import { motion } from 'framer-motion'
+import type { PropsWithChildren } from 'react'
 
 import { ModalStackContainer as MSC } from '~/modal'
 
-export const ModalStackContainer = () => <MSC m={motion} />
+export const ModalStackContainer = (props: PropsWithChildren) => (
+  <MSC m={motion}>{props.children}</MSC>
+)

src/modal/stacked/bem.ts

@@ -0,0 +1,8 @@
+const root = 'rm-dialog'
+export const ModalBEM = {
+  root,
+  children: `${root}__children`,
+  close: `${root}__close`,
+  content: `${root}__content`,
+  title: `${root}__title`,
+}

src/modal/stacked/container.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo } from 'react'
 import { AnimatePresence } from 'framer-motion'
-import type { FC } from 'react'
+import type { FC, PropsWithChildren } from 'react'
 import type { ModalStackContainerProps } from './types'
 
 import {
@@ -16,11 +16,14 @@ import {
 
 import { Modal } from './modal'
 
-export const ModalStackContainer: FC<ModalStackContainerProps> = (props) => {
-  const { m, isMobile, ...config } = props
+export const ModalStackContainer: FC<
+  ModalStackContainerProps & PropsWithChildren
+> = (props) => {
+  const { m, isMobile, children } = props
   return (
     <ModalStackProvider>
       <SheetStackProvider>
+        {children}
         <MotionComponentContext.Provider
           // Keep the value stable
           value={useMemo(() => ({ m }), [])}
@@ -46,6 +49,7 @@ const SetMobile: FC<{ m?: boolean }> = ({ m }) => {
 const ModalStack = () => {
   const stack = useModalStackInternal()
 
+  console.log('stack', stack)
   return (
     <AnimatePresence mode="popLayout">
       {stack.map((item, index) => {

src/modal/stacked/modal.tsx

@@ -31,6 +31,7 @@ import {
 } from '~/providers'
 
 import { PresentSheet } from '../../sheet'
+import { ModalBEM } from './bem'
 
 const microReboundPreset: Spring = {
   type: 'spring',
@@ -174,6 +175,7 @@ export const Modal: Component<{
             <Dialog.Content asChild>
               <div
                 className={clsxm(
+                  ModalBEM.root,
                   'fixed inset-0 z-[20] overflow-auto',
                   modalContainerClassName,
                 )}
@@ -197,6 +199,7 @@ export const Modal: Component<{
           <Dialog.Content asChild>
             <div
               className={clsxm(
+                ModalBEM.root,
                 'fixed inset-0 z-[20] flex items-center justify-center',
                 modalContainerClassName,
               )}
@@ -209,9 +212,10 @@ export const Modal: Component<{
                 animate={animateController}
                 transition={microReboundPreset}
                 className={clsxm(
+                  ModalBEM.content,
                   'relative flex flex-col overflow-hidden rounded-lg',
-                  'bg-zinc-50/80 dark:bg-neutral-900/80',
-                  'p-2 shadow-2xl shadow-stone-300 backdrop-blur-sm dark:shadow-stone-800',
+                  'bg-zinc-50/80 dark:bg-zinc-950/80',
+                  'p-2 shadow-2xl shadow-gray-300 backdrop-blur-sm dark:shadow-gray-800/50',
                   max
                     ? 'h-[90vh] w-[90vw]'
                     : 'max-h-[70vh] min-w-[300px] max-w-[90vw] lg:max-h-[calc(100vh-20rem)] lg:max-w-[70vw]',
@@ -221,18 +225,22 @@ export const Modal: Component<{
                 )}
                 onClick={stopPropagation}
               >
-                <Dialog.Title className="flex-shrink-0 px-4 py-2 text-lg font-medium">
+                <Dialog.Title
+                  className={`${ModalBEM.title} flex-shrink-0 px-4 py-2 text-lg font-medium`}
+                >
                   {title}
                 </Dialog.Title>
                 <Divider className="my-2 flex-shrink-0 border-slate-200 opacity-80 dark:border-neutral-800" />
 
-                <div className="min-h-0 flex-shrink flex-grow overflow-auto px-4 py-2">
+                <div
+                  className={`${ModalBEM.children} min-h-0 flex-shrink flex-grow overflow-auto px-4 py-2`}
+                >
                   {finalChildren}
                 </div>
 
                 <Dialog.DialogClose
                   onClick={close}
-                  className="absolute right-0 top-0 z-[9] p-5"
+                  className={`${ModalBEM.close} absolute right-0 top-0 z-[9] p-5`}
                 >
                   <CloseIcon />
                 </Dialog.DialogClose>