refactor(ui): remove the radix primitives (#11832)

* refactor(ui): remove cloned radix primitives

* fix(ui): radix dialog warning

* fix(ui): remove radix toast warning

deps/shui/src/logseq/shui/dialog/core.cljs

@@ -159,12 +159,14 @@
         (cond-> (merge props content-props)
           auto-width? (assoc :data-auto-width true)
           (false? close-btn?) (assoc :data-close-btn false))
-        (when title
-          (dialog-header
-           (when title (dialog-title title))
-           (when description (dialog-description description))))
+
+         ;; nested title component is required for radix dialog content
+         (dialog-title {:class (when (empty? title) "hidden")} title)
+         (when description (dialog-description description))
+
         (when content
           [:div.ui__dialog-main-content content])
+
         (when footer
           (dialog-footer footer)))))))
 

deps/shui/src/logseq/shui/popup/core.cljs

@@ -178,7 +178,6 @@
                          :top y
                          :left x}} ""))
        (let [content-props (cond-> (merge content-props {:onEscapeKeyDown handle-key-escape!
-                                                         :disableOutsideScroll false
                                                          :onPointerDownOutside handle-pointer-outside!})
                              (and (not force-popover?)
                                   (not as-dropdown?))

packages/ui/.storybook/preview.js

@@ -5,7 +5,7 @@ import '../src/index.css'
 import { useEffect } from 'react'
 
 // require in this file to keep app state when HMR
-const { setupGlobals } = require('../src')
+const { setupGlobals } = require('../src/ui')
 
 setupGlobals()
 

packages/ui/@/components/ui/toaster.tsx

@@ -22,6 +22,7 @@ export function Toaster() {
         description,
         action,
         icon,
+        onDismiss, // remove from toast props
         ...props
       }) {
         const duration = props?.duration

packages/ui/examples/index.tsx

@@ -1,5 +1,5 @@
-import 'src/index.css'
-import { setupGlobals } from '../src'
+import '../src/index.css'
+import { setupGlobals } from '../src/ui'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 

packages/ui/package.json

@@ -8,33 +8,30 @@
     "build:ui:only": "parcel build --target ui",
     "build:ui": "rm -rf .parcel-cache && yarn build:ui:only",
     "watch:storybook": "storybook dev -p 6006",
-    "install:primitives": "rm -rf primitives/ && git clone -b x https://github.com/xyhp915/primitives.git --depth=1",
-    "build:primitives": "yarn install:primitives && cd primitives/ && yarn install && yarn build",
-    "preinstall": "test -f primitives/package.json || yarn build:primitives",
     "postinstall": "yarn build:ui"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
     "@radix-ui/colors": "^3.0.0",
-    "@radix-ui/react-alert-dialog": "^1.0.5",
-    "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-context-menu": "^2.1.5",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.1.1",
-    "@radix-ui/react-toast": "^1.1.5",
-    "@radix-ui/react-toggle": "^1.0.3",
-    "@radix-ui/react-toggle-group": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.1.4",
+    "@radix-ui/react-alert-dialog": "^1.1.11",
+    "@radix-ui/react-avatar": "^1.1.7",
+    "@radix-ui/react-checkbox": "^1.2.3",
+    "@radix-ui/react-context-menu": "^2.2.12",
+    "@radix-ui/react-dialog": "^1.1.11",
+    "@radix-ui/react-dropdown-menu": "^2.1.12",
+    "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-popover": "^1.1.11",
+    "@radix-ui/react-radio-group": "^1.3.4",
+    "@radix-ui/react-select": "^2.2.2",
+    "@radix-ui/react-separator": "^1.1.4",
+    "@radix-ui/react-slider": "^1.3.2",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-switch": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.9",
+    "@radix-ui/react-toast": "^1.2.11",
+    "@radix-ui/react-toggle": "^1.1.6",
+    "@radix-ui/react-toggle-group": "^1.1.7",
+    "@radix-ui/react-tooltip": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
@@ -89,8 +86,7 @@
     },
     "react/jsx-dev-runtime": "./node_modules/react/jsx-dev-runtime.js",
     "react/jsx-runtime": "./node_modules/react/jsx-runtime.js",
-    "@/*": "./@/$1",
-    "@radix-ui/react-*": "./primitives/packages/react/$1"
+    "@/*": "./@/$1"
   },
   "targets": {
     "main": false,

packages/ui/src/Demo.story.tsx

@@ -1,4 +1,4 @@
-import { Button } from '../@/components/ui/button'
+import { Button } from '@/components/ui/button'
 import { Meta, StoryObj } from '@storybook/react'
 import { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu'
 
@@ -73,6 +73,7 @@ export const Primary: StoryObj =
         <div className={'p-20'}>
           <DropdownMenuCheckboxes/>
           <Button onClick={() => {
+            // @ts-ignore
             const p = toast({
               title: 'hello',
               description: <Button onClick={() => p.dismiss()}>hello</Button>