Updates

.github/workflows/main.yml

@@ -2,11 +2,11 @@ name: CI
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
     tags:
-      - 'v*'
+      - "v*"
   pull_request:
-    branches: [ '*' ]
+    branches: ["*"]
 
   workflow_dispatch:
 
@@ -29,16 +29,16 @@ jobs:
           timezone: America/Sao_Paulo
 
       - name: Setup repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
-          registry-url: 'https://registry.npmjs.org'
+          node-version: 20
+          registry-url: "https://registry.npmjs.org"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 8
           run_install: false
@@ -49,10 +49,10 @@ jobs:
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
       - name: Setup pnpm cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          key: "${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}"
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 

.husky/post-merge

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 ./node_modules/.bin/repo-tools install-packages

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 ./node_modules/.bin/repo-tools check-remote && npm run validate

demo/package.json

@@ -1,26 +1,25 @@
 {
   "name": "react-floater-demo",
-  "version": "0.8.2",
+  "version": "0.9.4",
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@gilbarbara/components": "^0.10.1",
-    "@gilbarbara/eslint-config": "^0.5.4",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@gilbarbara/components": "^0.14.1",
+    "@gilbarbara/eslint-config": "^0.8.1",
+    "@gilbarbara/hooks": "^0.8.2",
     "@gilbarbara/prettier-config": "^1.0.0",
     "disable-scroll": "^0.6.0",
-    "prettier": "^3.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-floater": "latest",
     "react-scripts": "5.0.1",
-    "react-use": "^17.4.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.5.4"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.5",
-    "@types/node": "^20.8.2",
-    "@types/react": "^18.2.25",
-    "@types/react-dom": "^18.2.10"
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

demo/src/App.tsx

@@ -1,5 +1,5 @@
-import { useUnmount } from 'react-use';
-import { Box, BoxCenter, H1, H2, Paragraph } from '@gilbarbara/components';
+import { Box, Flex, FlexCenter, H1, H2, Paragraph, Spacer } from '@gilbarbara/components';
+import { useUnmount } from '@gilbarbara/hooks';
 import disableScroll from 'disable-scroll';
 
 import Block from './components/Block';
@@ -40,38 +40,36 @@ export default function App() {
   return (
     <Box>
       <GlobalStyles />
-      <BoxCenter minHeight={256} px="xl" textAlign="center">
+      <FlexCenter minHeight={256} px="xl">
         <H1>react-floater</H1>
         <Paragraph bold>A component to create awesome tooltips, modals and more!</Paragraph>
         {window.innerWidth >= 768 && <WithPosition cb={callback} />}
-      </BoxCenter>
+      </FlexCenter>
       <Block gray>
         <H2 mb="xxl">The classic examples</H2>
 
-        <Content>
+        <Flex direction="column" gap="xl" width="100%">
           <WithAutoOpen cb={callback} />
-          <Content my="xl" spaced>
+          <Flex justify="space-between" maxWidth={500} mx="auto" width="100%">
             <WithTitleAndFooter cb={callback} />
             <WithCustomStyles cb={callback} />
-          </Content>
-          <BoxCenter>
-            <WithStyledComponents cb={callback} />
-          </BoxCenter>
-        </Content>
+          </Flex>
+          <WithStyledComponents cb={callback} />
+        </Flex>
       </Block>
       <Block>
         <H2>Hover</H2>
-        <Paragraph color="gray" size="mid">
+        <Paragraph color="gray" size="md">
           It will switch to click on mobile.
           <br />
           (can be disabled with <b>disableHoverToClick</b> prop)
         </Paragraph>
 
-        <Content mt="xxxl" spaced>
+        <Spacer distribution="center" gap="lg" mt="xxxl" orientation="vertical">
           <WithHoverDefault cb={callback} />
           <WithHoverCustomDelay cb={callback} />
           <WithHoverAndNoDelay cb={callback} />
-        </Content>
+        </Spacer>
       </Block>
       <Block gray>
         <H2 mb="xxl">Inside text</H2>
@@ -83,11 +81,11 @@ export default function App() {
       </Block>
       <Block gray>
         <H2 mb="xxl">Custom targets</H2>
-        <Content maxWidth={640} mb="xxl" spaced>
+        <Content maxWidth={640} mb="xxl">
           <ProxyMode cb={callback} />
           <BeaconMode cb={callback} />
         </Content>
-        <Content maxWidth={640} spaced>
+        <Content maxWidth={640}>
           <ControlledMode cb={callback} />
           <Modal cb={callback} />
         </Content>

demo/src/components/Block.tsx

@@ -1,15 +1,23 @@
 import { ReactNode } from 'react';
-import { Box, BoxProps } from '@gilbarbara/components';
+import { Flex, FlexProps } from '@gilbarbara/components';
 
-interface Props extends BoxProps {
+interface Props extends FlexProps {
   children: ReactNode;
   gray?: boolean;
 }
 
 export default function Block({ children, gray, ...rest }: Props) {
   return (
-    <Box bg={gray ? 'gray.100' : 'white'} pb="xl" pt="xl" px="xl" textAlign="center" {...rest}>
+    <Flex
+      align="center"
+      bg={gray ? 'gray.100' : 'white'}
+      data-component-name="Block"
+      direction="column"
+      p="xl"
+      textAlign="center"
+      {...rest}
+    >
       {children}
-    </Box>
+    </Flex>
   );
 }

demo/src/components/Column.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { FlexCenter, FlexProps } from '@gilbarbara/components';
+
+interface Props extends FlexProps {
+  children: ReactNode;
+}
+
+export default function Column(props: Props) {
+  return <FlexCenter align="center" data-component-name="Column" flex {...props} />;
+}

demo/src/components/Content.tsx

@@ -1,31 +1,20 @@
 import { ReactNode } from 'react';
-import { Box, BoxProps } from '@gilbarbara/components';
+import { Flex, FlexProps } from '@gilbarbara/components';
 
-interface Props extends BoxProps {
+interface Props extends FlexProps {
   children: ReactNode;
-  spaced?: boolean;
 }
 
-export default function Content({ children, spaced, ...rest }: Props) {
-  if (spaced) {
-    return (
-      <Box
-        align="center"
-        display="flex"
-        justify="space-between"
-        maxWidth={500}
-        mx="auto"
-        wrap="wrap"
-        {...rest}
-      >
-        {children}
-      </Box>
-    );
-  }
-
+export default function Content(props: Props) {
   return (
-    <Box maxWidth={500} mx="auto" {...rest}>
-      {children}
-    </Box>
+    <Flex
+      data-component-name="Content"
+      justify="space-between"
+      maxWidth={500}
+      mx="auto"
+      width="100%"
+      wrap="wrap"
+      {...props}
+    />
   );
 }

demo/src/components/GlobalStyles.tsx

@@ -23,7 +23,7 @@ export default function GlobalStyles() {
           background-color: ${theme.white};
           color: ${theme.darkColor};
           font-family: Rubik, sans-serif;
-          font-size: ${theme.typography.regular.fontSize};
+          font-size: ${theme.typography.md.fontSize};
           margin: 0;
           min-height: 100vh;
           padding: 0;
@@ -47,7 +47,9 @@ export default function GlobalStyles() {
         input:-webkit-autofill:hover,
         input:-webkit-autofill:focus,
         input:-webkit-autofill:active {
-          transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
+          transition:
+            background-color 50000s ease-in-out 0s,
+            color 5000s ease-in-out 0s;
         }
       `}
     />

demo/src/examples/BeaconMode.tsx

@@ -46,9 +46,7 @@ export default function BeaconMode({ cb }: any) {
       />
       <Floater
         callback={cb}
-        content={
-          <Paragraph size="large">Yeah, this is how we use to look back in the day!</Paragraph>
-        }
+        content={<Paragraph size="lg">Yeah, this is how we use to look back in the day!</Paragraph>}
         disableFlip
         event="hover"
         placement="top"

demo/src/examples/ControlledMode.tsx

@@ -2,6 +2,8 @@ import { useState } from 'react';
 import Floater from 'react-floater';
 import { Box, Button, Paragraph } from '@gilbarbara/components';
 
+import Column from '../components/Column';
+
 export default function ControlledMode({ cb }: any) {
   const [isOpen, setOpen] = useState(false);
 
@@ -10,12 +12,12 @@ export default function ControlledMode({ cb }: any) {
   };
 
   return (
-    <Box flex>
+    <Column>
       <Floater
         callback={cb}
         content={
           <Box>
-            <Paragraph align="center" bold size="large">
+            <Paragraph align="center" bold size="lg">
               I'm a controlled and centered tooltip
             </Paragraph>
             <Paragraph align="center">The parent control my status</Paragraph>
@@ -50,6 +52,6 @@ export default function ControlledMode({ cb }: any) {
       <Button onClick={handleClick} size="sm">
         Controlled floater
       </Button>
-    </Box>
+    </Column>
   );
 }

demo/src/examples/Modal.tsx

@@ -1,6 +1,8 @@
 import Floater from 'react-floater';
 import { Box, Button, ButtonUnstyled, FormGroup, H4, Icon, Input } from '@gilbarbara/components';
 
+import Column from '../components/Column';
+
 function Content({ closeFn }: any) {
   return (
     <Box bg="white" height="90vh" padding="xl" position="relative" radius="md" width="90vw">
@@ -38,7 +40,7 @@ function Content({ closeFn }: any) {
 
 export default function Modal({ cb }: any) {
   return (
-    <Box flex>
+    <Column>
       <Floater
         callback={cb}
         component={Content}
@@ -52,6 +54,6 @@ export default function Modal({ cb }: any) {
       >
         <Button size="sm">MODAL</Button>
       </Floater>
-    </Box>
+    </Column>
   );
 }

demo/src/examples/ProxyMode.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useRef } from 'react';
 import Floater from 'react-floater';
-import { useUpdate } from 'react-use';
 import { Box } from '@gilbarbara/components';
+import { useUpdate } from '@gilbarbara/hooks';
 
 import Target from './Target';
 

demo/src/examples/WithAutoOpen.tsx

@@ -1,9 +1,11 @@
 import Floater from 'react-floater';
 import { Box, Button, Paragraph } from '@gilbarbara/components';
 
+import Column from '../components/Column';
+
 export default function AutoOpen({ cb }: any) {
   return (
-    <div>
+    <Column>
       <Floater
         autoOpen
         callback={cb}
@@ -24,6 +26,6 @@ export default function AutoOpen({ cb }: any) {
         <Button size="sm">TOP</Button>
       </Floater>
       <Paragraph mt="xxs">autoOpen</Paragraph>
-    </div>
+    </Column>
   );
 }

demo/src/examples/WithHoverAndNoDelay.tsx

@@ -1,9 +1,11 @@
 import Floater from 'react-floater';
-import { Box, Button, Paragraph } from '@gilbarbara/components';
+import { Button, Paragraph } from '@gilbarbara/components';
+
+import Column from '../components/Column';
 
 export default function WithHoverAndNoDelay({ cb }: any) {
   return (
-    <Box flex>
+    <Column>
       <Floater
         callback={cb}
         content={
@@ -18,6 +20,6 @@ export default function WithHoverAndNoDelay({ cb }: any) {
         <Button size="sm">HOVER</Button>
       </Floater>
       <Paragraph mt="xs">no delay (0)</Paragraph>
-    </Box>
+    </Column>
   );
 }