Some Release Fixes + Component Improvements (#147)

rad-ui · Dec 27, 2023 · fde179f · fde179f
1 parent 9e55eb8
commit fde179f
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 51 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -21,7 +21,6 @@ module.exports = {
     ],
     'rules': {
         'react/react-in-jsx-scope': 'off',
-        'no-multiple-empty-lines': ['warn', {'max': 1, 'maxEOF': 1}],
         'indent': ['warn', 4],
         'key-spacing': ['warn', {'beforeColon': false, 'afterColon': true}],
         'no-trailing-spaces': 'warn',
@@ -35,6 +34,7 @@ module.exports = {
         'prefer-const': 'warn',
         'space-before-blocks': 'warn',
         'space-before-function-paren': ['warn', 'never'],
+        'react/jsx-first-prop-new-line': [1, 'multiline'],
         'space-in-parens': 'warn',
         'spaced-comment': 'warn',
         'arrow-spacing': 'warn',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,12 +1,23 @@
 {
   "name": "@radui/ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "",
   "main": "dist",
   "type": "module",
   "exports": {
     "./themes/default.css": "./dist/themes/default.css",
-    "./Avatar": "./dist/components/Avatar.js"
+    "./Avatar": "./dist/components/Avatar.js",
+    "./Badge": "./dist/components/Badge.js",
+    "./Button": "./dist/components/Button.js",
+    "./BlockQuote": "./dist/components/BlockQuote.js",
+    "./Em": "./dist/components/Em.js",
+    "./Quote": "./dist/components/Quote.js",
+    "./Tabs": "./dist/components/Tabs.js",
+    "./Text": "./dist/components/Text.js",
+    "./Heading": "./dist/components/Heading.js",
+    "./Link": "./dist/components/Link.js",
+    "./Code": "./dist/components/Code.js",
+    "./Separator": "./dist/components/Separator.js"
   },
   "scripts": {
     "test": "jest",

diff --git a/src/components/tools/Popper/Popper.js b/src/components/tools/Popper/Popper.js
@@ -1,47 +1,63 @@
 import {useState, useRef} from 'react';
 import {customClassSwitcher} from '~/core';
 
-import {useFloating, useInteractions, useHover, FloatingArrow, arrow, offset, flip, autoPlacement, useRole, useDismiss} from '@floating-ui/react';
+import {useFloating, useInteractions, useHover, FloatingArrow, arrow, offset, flip, autoUpdate, autoPlacement, useRole, useDismiss} from '@floating-ui/react';
 
 // TODO : Use Floating Portal?
 // TODO : Collisions dont seem to be working as expected, need to investigate
 
 const ARROW_HEIGHT = 7;
 const GAP = 2;
 
-const Popper = ({popperName='', customRootClass='', className='', children, open=false, hoverDelay=10, showArrow=true, pop=<></>, ...props}) => {
-    const rootClass = customClassSwitcher(customRootClass, popperName);
+/**
+ *
+ *
+ * For Placement https://floating-ui.com/docs/computePosition#placement
 
-    const arrowRef = useRef(null);
 
+ */
+
+const Popper = ({
+    popperName='',
+    customRootClass='',
+    activationStrategy='hover',
+    className='',
+    placement='top',
+    children,
+    open=false,
+    hoverDelay=10,
+    showArrow=true,
+    pop=<></>,
+    ...props}) => {
+    //
+    const rootClass = customClassSwitcher(customRootClass, popperName);
+    const arrowRef = useRef(null);
     const [isOpen, setIsOpen] = useState(open);
 
     const {refs, floatingStyles, context} = useFloating({
+        placement: placement,
+        whileElementsMounted: autoUpdate,
         open: isOpen,
+        // strategy: 'fixed',
         middleware: [
             arrow({
                 element: arrowRef,
             }),
             offset(ARROW_HEIGHT + GAP),
-            // autoPlacement({
-            //     crossAxis: 'center',
-            //     alignment: 'start',
-            //     autoAlignment: true,
-            //     allowedPlacements: ['top', 'bottom', 'left', 'right'],
-            //     padding: 5,
-            // }),
-            flip(),
-
+            flip({
+                mainAxis: false,
+                fallbackPlacements: ['right', 'bottom'],
+            },
+            ),
         ],
         onOpenChange: setIsOpen,
-        placement: 'top',
     });
 
     const role = useRole(context);
     const dismiss = useDismiss(context);
 
     const hover = useHover(context, {
-        // delay: hoverDelay,
+    // delay: hoverDelay,
     });
 
     const {getReferenceProps, getFloatingProps} = useInteractions([
@@ -51,13 +67,14 @@ const Popper = ({popperName='', customRootClass='', className='', children, open
     ]);
 
     return <>
-        <span className={`${rootClass}-reference-element ${className}`} ref={refs.setReference} {...getReferenceProps(
-            {
-                onClick: () => {
-                    console.log('click');
+        <span
+            className={`${rootClass}-reference-element ${className}`} ref={refs.setReference} {...getReferenceProps(
+                {
+                    onClick: () => {
+                        console.log('click');
+                    },
                 },
-            },
-        )}>{children}</span>
+            )}>{children}</span>
         {isOpen && <div className={`${rootClass}-floating-element`} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()} >
             {showArrow && <FloatingArrow className={`rad-ui-arrow ${rootClass}-arrow`} ref={arrowRef} context={context} />}
             {pop}</div>}

diff --git a/src/components/tools/SandboxEditor/SandboxEditor.js b/src/components/tools/SandboxEditor/SandboxEditor.js
diff --git a/src/components/ui/Dropdown/Dropdown.js b/src/components/ui/Dropdown/Dropdown.js
@@ -1,24 +1,19 @@
-import {useState} from 'react';
 
-import {
-    useFloating,
-    autoUpdate,
-    offset,
-    flip,
-    shift,
-} from '@floating-ui/react';
+import Popper from '~/components/tools/Popper/Popper';
 
 const Dropdown = ({list=[], selected}) => {
-    const [isOpen, setIsOpen] = useState(false);
-    // todo
-    const {refs, floatingStyles, context} = useFloating({
-        open: isOpen,
-        onOpenChange: setIsOpen,
-        middleware: [offset(10), flip(), shift()],
-        whileElementsMounted: autoUpdate,
-    });
-
-    return <div>Dropdown</div>;
+    const PopElem = () => {
+        return <ul className='bg-white px-2 py-2 shadow-lg rounded-md'>
+            {list.map((item, index) => {
+                return <li key={index}>{item.value}</li>;
+            })}
+        </ul>;
+    };
+    return <div>
+        <Popper open={true} placement="bottom-start" popperName="dropdown" pop={<PopElem/>}>
+            <span>Dropdown</span>
+        </Popper>
+    </div>;
 };
 
 export default Dropdown;
diff --git a/src/components/ui/Dropdown/Dropdown.stories.js b/src/components/ui/Dropdown/Dropdown.stories.js
@@ -7,12 +7,20 @@ export default {
     title: 'UI/Input/Dropdown',
     component: Dropdown,
     render: (args) => <SandboxEditor>
-        <div className=' bg-gray-400 p-4' >
-            <div className='block'>
-                <Heading className="text-gray-1000"> Dropdown</Heading>
-                <Dropdown onSelect={() => {}} label={'Bello'} options={[
-                    {value: 'hello', label: 'hello'},
-                ]}>Hello</Dropdown>
+        <div className=' bg-gray-400 p-4 overflow-auto' style={{height: '200px'}}>
+            <div className='block' style={{height: '400px'}}>
+                <div style={{marginBottom: '200px'}}>
+                    <Heading className="text-gray-1000"> Dropdown</Heading>
+                </div>
+
+                <Dropdown
+                    onSelect={() => {}} label={'Bello'} list={[
+                        {value: 'hello', label: 'hello'},
+                    ]}>Hello</Dropdown>
+
+                <div style={{marginTop: '200px'}}>
+                    <Heading className="text-gray-1000"> Dropdown End</Heading>
+                </div>
             </div>
         </div>
     </SandboxEditor>,