Skip to content

Commit 99a1416

Browse files
gilbarbaragilbarbara
committed
Update demo
1 parent 3019792 commit 99a1416

16 files changed

+104
-86
lines changed

‎demo/package.json

+13-14
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
{
22
"name": "react-floater-demo",
3-
"version": "0.8.2",
3+
"version": "0.9.4",
44
"dependencies": {
5-
"@emotion/react": "^11.11.1",
6-
"@emotion/styled": "^11.11.0",
7-
"@gilbarbara/components": "^0.10.1",
8-
"@gilbarbara/eslint-config": "^0.5.4",
5+
"@emotion/react": "^11.13.3",
6+
"@emotion/styled": "^11.13.0",
7+
"@gilbarbara/components": "^0.14.1",
8+
"@gilbarbara/eslint-config": "^0.8.1",
9+
"@gilbarbara/hooks": "^0.8.2",
910
"@gilbarbara/prettier-config": "^1.0.0",
1011
"disable-scroll": "^0.6.0",
11-
"prettier": "^3.0.3",
12-
"react": "^18.2.0",
13-
"react-dom": "^18.2.0",
12+
"prettier": "^3.3.3",
13+
"react": "^18.3.1",
14+
"react-dom": "^18.3.1",
1415
"react-floater": "latest",
1516
"react-scripts": "5.0.1",
16-
"react-use": "^17.4.0",
17-
"typescript": "^5.2.2"
17+
"typescript": "^5.5.4"
1818
},
1919
"devDependencies": {
20-
"@types/jest": "^29.5.5",
21-
"@types/node": "^20.8.2",
22-
"@types/react": "^18.2.25",
23-
"@types/react-dom": "^18.2.10"
20+
"@types/node": "^20.11.30",
21+
"@types/react": "^18.3.5",
22+
"@types/react-dom": "^18.3.0"
2423
},
2524
"scripts": {
2625
"start": "react-scripts start",

‎demo/src/App.tsx

+14-16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { useUnmount } from 'react-use';
2-
import { Box, BoxCenter, H1, H2, Paragraph } from '@gilbarbara/components';
1+
import { Box, Flex, FlexCenter, H1, H2, Paragraph, Spacer } from '@gilbarbara/components';
2+
import { useUnmount } from '@gilbarbara/hooks';
33
import disableScroll from 'disable-scroll';
44

55
import Block from './components/Block';
@@ -40,38 +40,36 @@ export default function App() {
4040
return (
4141
<Box>
4242
<GlobalStyles />
43-
<BoxCenter minHeight={256} px="xl" textAlign="center">
43+
<FlexCenter minHeight={256} px="xl">
4444
<H1>react-floater</H1>
4545
<Paragraph bold>A component to create awesome tooltips, modals and more!</Paragraph>
4646
{window.innerWidth >= 768 && <WithPosition cb={callback} />}
47-
</BoxCenter>
47+
</FlexCenter>
4848
<Block gray>
4949
<H2 mb="xxl">The classic examples</H2>
5050

51-
<Content>
51+
<Flex direction="column" gap="xl" width="100%">
5252
<WithAutoOpen cb={callback} />
53-
<Content my="xl" spaced>
53+
<Flex justify="space-between" maxWidth={500} mx="auto" width="100%">
5454
<WithTitleAndFooter cb={callback} />
5555
<WithCustomStyles cb={callback} />
56-
</Content>
57-
<BoxCenter>
58-
<WithStyledComponents cb={callback} />
59-
</BoxCenter>
60-
</Content>
56+
</Flex>
57+
<WithStyledComponents cb={callback} />
58+
</Flex>
6159
</Block>
6260
<Block>
6361
<H2>Hover</H2>
64-
<Paragraph color="gray" size="mid">
62+
<Paragraph color="gray" size="md">
6563
It will switch to click on mobile.
6664
<br />
6765
(can be disabled with <b>disableHoverToClick</b> prop)
6866
</Paragraph>
6967

70-
<Content mt="xxxl" spaced>
68+
<Spacer distribution="center" gap="lg" mt="xxxl" orientation="vertical">
7169
<WithHoverDefault cb={callback} />
7270
<WithHoverCustomDelay cb={callback} />
7371
<WithHoverAndNoDelay cb={callback} />
74-
</Content>
72+
</Spacer>
7573
</Block>
7674
<Block gray>
7775
<H2 mb="xxl">Inside text</H2>
@@ -83,11 +81,11 @@ export default function App() {
8381
</Block>
8482
<Block gray>
8583
<H2 mb="xxl">Custom targets</H2>
86-
<Content maxWidth={640} mb="xxl" spaced>
84+
<Content maxWidth={640} mb="xxl">
8785
<ProxyMode cb={callback} />
8886
<BeaconMode cb={callback} />
8987
</Content>
90-
<Content maxWidth={640} spaced>
88+
<Content maxWidth={640}>
9189
<ControlledMode cb={callback} />
9290
<Modal cb={callback} />
9391
</Content>

‎demo/src/components/Block.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
import { ReactNode } from 'react';
2-
import { Box, BoxProps } from '@gilbarbara/components';
2+
import { Flex, FlexProps } from '@gilbarbara/components';
33

4-
interface Props extends BoxProps {
4+
interface Props extends FlexProps {
55
children: ReactNode;
66
gray?: boolean;
77
}
88

99
export default function Block({ children, gray, ...rest }: Props) {
1010
return (
11-
<Box bg={gray ? 'gray.100' : 'white'} pb="xl" pt="xl" px="xl" textAlign="center" {...rest}>
11+
<Flex
12+
align="center"
13+
bg={gray ? 'gray.100' : 'white'}
14+
data-component-name="Block"
15+
direction="column"
16+
p="xl"
17+
textAlign="center"
18+
{...rest}
19+
>
1220
{children}
13-
</Box>
21+
</Flex>
1422
);
1523
}

‎demo/src/components/Column.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { ReactNode } from 'react';
2+
import { FlexCenter, FlexProps } from '@gilbarbara/components';
3+
4+
interface Props extends FlexProps {
5+
children: ReactNode;
6+
}
7+
8+
export default function Column(props: Props) {
9+
return <FlexCenter align="center" data-component-name="Column" flex {...props} />;
10+
}

‎demo/src/components/Content.tsx

+12-23
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,20 @@
11
import { ReactNode } from 'react';
2-
import { Box, BoxProps } from '@gilbarbara/components';
2+
import { Flex, FlexProps } from '@gilbarbara/components';
33

4-
interface Props extends BoxProps {
4+
interface Props extends FlexProps {
55
children: ReactNode;
6-
spaced?: boolean;
76
}
87

9-
export default function Content({ children, spaced, ...rest }: Props) {
10-
if (spaced) {
11-
return (
12-
<Box
13-
align="center"
14-
display="flex"
15-
justify="space-between"
16-
maxWidth={500}
17-
mx="auto"
18-
wrap="wrap"
19-
{...rest}
20-
>
21-
{children}
22-
</Box>
23-
);
24-
}
25-
8+
export default function Content(props: Props) {
269
return (
27-
<Box maxWidth={500} mx="auto" {...rest}>
28-
{children}
29-
</Box>
10+
<Flex
11+
data-component-name="Content"
12+
justify="space-between"
13+
maxWidth={500}
14+
mx="auto"
15+
width="100%"
16+
wrap="wrap"
17+
{...props}
18+
/>
3019
);
3120
}

‎demo/src/components/GlobalStyles.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function GlobalStyles() {
2323
background-color: ${theme.white};
2424
color: ${theme.darkColor};
2525
font-family: Rubik, sans-serif;
26-
font-size: ${theme.typography.regular.fontSize};
26+
font-size: ${theme.typography.md.fontSize};
2727
margin: 0;
2828
min-height: 100vh;
2929
padding: 0;
@@ -47,7 +47,9 @@ export default function GlobalStyles() {
4747
input:-webkit-autofill:hover,
4848
input:-webkit-autofill:focus,
4949
input:-webkit-autofill:active {
50-
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
50+
transition:
51+
background-color 50000s ease-in-out 0s,
52+
color 5000s ease-in-out 0s;
5153
}
5254
`}
5355
/>

‎demo/src/examples/BeaconMode.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,7 @@ export default function BeaconMode({ cb }: any) {
4646
/>
4747
<Floater
4848
callback={cb}
49-
content={
50-
<Paragraph size="large">Yeah, this is how we use to look back in the day!</Paragraph>
51-
}
49+
content={<Paragraph size="lg">Yeah, this is how we use to look back in the day!</Paragraph>}
5250
disableFlip
5351
event="hover"
5452
placement="top"

‎demo/src/examples/ControlledMode.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { useState } from 'react';
22
import Floater from 'react-floater';
33
import { Box, Button, Paragraph } from '@gilbarbara/components';
44

5+
import Column from '../components/Column';
6+
57
export default function ControlledMode({ cb }: any) {
68
const [isOpen, setOpen] = useState(false);
79

@@ -10,12 +12,12 @@ export default function ControlledMode({ cb }: any) {
1012
};
1113

1214
return (
13-
<Box flex>
15+
<Column>
1416
<Floater
1517
callback={cb}
1618
content={
1719
<Box>
18-
<Paragraph align="center" bold size="large">
20+
<Paragraph align="center" bold size="lg">
1921
I'm a controlled and centered tooltip
2022
</Paragraph>
2123
<Paragraph align="center">The parent control my status</Paragraph>
@@ -50,6 +52,6 @@ export default function ControlledMode({ cb }: any) {
5052
<Button onClick={handleClick} size="sm">
5153
Controlled floater
5254
</Button>
53-
</Box>
55+
</Column>
5456
);
5557
}

‎demo/src/examples/Modal.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import Floater from 'react-floater';
22
import { Box, Button, ButtonUnstyled, FormGroup, H4, Icon, Input } from '@gilbarbara/components';
33

4+
import Column from '../components/Column';
5+
46
function Content({ closeFn }: any) {
57
return (
68
<Box bg="white" height="90vh" padding="xl" position="relative" radius="md" width="90vw">
@@ -38,7 +40,7 @@ function Content({ closeFn }: any) {
3840

3941
export default function Modal({ cb }: any) {
4042
return (
41-
<Box flex>
43+
<Column>
4244
<Floater
4345
callback={cb}
4446
component={Content}
@@ -52,6 +54,6 @@ export default function Modal({ cb }: any) {
5254
>
5355
<Button size="sm">MODAL</Button>
5456
</Floater>
55-
</Box>
57+
</Column>
5658
);
5759
}

‎demo/src/examples/ProxyMode.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useCallback, useRef } from 'react';
22
import Floater from 'react-floater';
3-
import { useUpdate } from 'react-use';
43
import { Box } from '@gilbarbara/components';
4+
import { useUpdate } from '@gilbarbara/hooks';
55

66
import Target from './Target';
77

‎demo/src/examples/WithAutoOpen.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import Floater from 'react-floater';
22
import { Box, Button, Paragraph } from '@gilbarbara/components';
33

4+
import Column from '../components/Column';
5+
46
export default function AutoOpen({ cb }: any) {
57
return (
6-
<div>
8+
<Column>
79
<Floater
810
autoOpen
911
callback={cb}
@@ -24,6 +26,6 @@ export default function AutoOpen({ cb }: any) {
2426
<Button size="sm">TOP</Button>
2527
</Floater>
2628
<Paragraph mt="xxs">autoOpen</Paragraph>
27-
</div>
29+
</Column>
2830
);
2931
}

‎demo/src/examples/WithHoverAndNoDelay.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import Floater from 'react-floater';
2-
import { Box, Button, Paragraph } from '@gilbarbara/components';
2+
import { Button, Paragraph } from '@gilbarbara/components';
3+
4+
import Column from '../components/Column';
35

46
export default function WithHoverAndNoDelay({ cb }: any) {
57
return (
6-
<Box flex>
8+
<Column>
79
<Floater
810
callback={cb}
911
content={
@@ -18,6 +20,6 @@ export default function WithHoverAndNoDelay({ cb }: any) {
1820
<Button size="sm">HOVER</Button>
1921
</Floater>
2022
<Paragraph mt="xs">no delay (0)</Paragraph>
21-
</Box>
23+
</Column>
2224
);
2325
}

‎demo/src/examples/WithHoverCustomDelay.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import Floater from 'react-floater';
2-
import { Box, Button, Paragraph } from '@gilbarbara/components';
2+
import { Button, Paragraph } from '@gilbarbara/components';
3+
4+
import Column from '../components/Column';
35

46
export default function WithHoverCustomDelay({ cb }: any) {
57
return (
6-
<Box flex>
8+
<Column>
79
<Floater
810
callback={cb}
911
content={
10-
<Paragraph size="large">
12+
<Paragraph size="lg">
1113
I have an <b>eventDelay</b> prop for <i>hover</i> event that can be adjusted (move you
1214
mouse away)!
1315
</Paragraph>
@@ -19,6 +21,6 @@ export default function WithHoverCustomDelay({ cb }: any) {
1921
<Button size="sm">HOVER</Button>
2022
</Floater>
2123
<Paragraph mt="xs">2.5s delay</Paragraph>
22-
</Box>
24+
</Column>
2325
);
2426
}

‎demo/src/examples/WithHoverDefault.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import Floater from 'react-floater';
2-
import { Box, Button, Paragraph } from '@gilbarbara/components';
2+
import { Button, Paragraph } from '@gilbarbara/components';
3+
4+
import Column from '../components/Column';
35

46
export default function WithHoverDefault({ cb }: any) {
57
return (
6-
<Box flex>
8+
<Column>
79
<Floater
810
callback={cb}
911
content={
@@ -16,6 +18,6 @@ export default function WithHoverDefault({ cb }: any) {
1618
<Button size="sm">HOVER</Button>
1719
</Floater>
1820
<Paragraph mt="xs">default delay (0.4s)</Paragraph>
19-
</Box>
21+
</Column>
2022
);
2123
}

0 commit comments

Comments
 (0)