Skip to content

Commit a9db0b8

Browse files
Viraj-10Viraj-10
committed
feat: added docs for the hook
1 parent 9f8092f commit a9db0b8

File tree

9 files changed

+327
-2
lines changed

9 files changed

+327
-2
lines changed

‎example/storybook-nativewind/.storybook/preview.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,8 @@ export const parameters = {
8484
'Others',
8585
['Fab', 'Skeleton'],
8686
],
87+
'Hooks',
88+
['useBreakPointValue'],
8789
'Apps',
8890
['Dashboard App', 'Starter Kit', 'Storybook App'],
8991
'Guides',

‎example/storybook-nativewind/babel.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ module.exports = function (api) {
2222
? path.resolve(__dirname, './global.css')
2323
: path.resolve(__dirname, './global-gluestack.css'),
2424

25+
'@/components/hooks': path.resolve(
26+
__dirname,
27+
'./src/core-components/hooks'
28+
),
2529
'@gluestack-ui/checkbox': path.resolve(
2630
__dirname,
2731
'../../packages/unstyled/checkbox/src'

‎example/storybook-nativewind/src/hooks/use-break-point-value.ts renamed to ‎example/storybook-nativewind/src/core-components/hooks/use-break-point-value.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,11 @@ export const getBreakPointValue = (values: any, width: any) => {
6060
return finalBreakPointResolvedValue;
6161
};
6262

63-
export function useBreakpointValue(values: BreakPointValue) {
63+
export function useBreakpointValue(values: BreakPointValue): any {
6464
const { width } = useWindowDimensions();
6565

66-
const [currentBreakPointValue, setCurrentBreakPointValue] = useState(null);
66+
const [currentBreakPointValue, setCurrentBreakPointValue] =
67+
useState(undefined);
6768

6869
useEffect(() => {
6970
if (typeof values === 'object') {

‎example/storybook-nativewind/src/core-components/hooks/use-media-query.ts

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { useWindowDimensions } from 'react-native';
2+
3+
type QueryKeys =
4+
| 'maxWidth'
5+
| 'minWidth'
6+
| 'maxHeight'
7+
| 'minHeight'
8+
| 'orientation';
9+
10+
type SubQuery = {
11+
[queryKey in QueryKeys]?: number | string;
12+
};
13+
type Query = Array<SubQuery>;
14+
15+
export function useMediaQuery(query: SubQuery | Query) {
16+
const dims = useWindowDimensions();
17+
const height = dims?.height;
18+
const width = dims?.width;
19+
20+
return iterateQuery(query, height, width);
21+
}
22+
23+
function queryResolver(query: any, width?: number, height?: number) {
24+
for (const queryKey in query) {
25+
if (!calculateQuery(queryKey, query[queryKey], height, width)) {
26+
return false;
27+
}
28+
}
29+
return true;
30+
}
31+
32+
function iterateQuery(
33+
query: SubQuery | Query,
34+
height?: number,
35+
width?: number
36+
) {
37+
const queryResults = [];
38+
if (Array.isArray(query)) {
39+
query.forEach((subQuery: SubQuery) => {
40+
queryResults.push(queryResolver(subQuery, width, height));
41+
});
42+
} else {
43+
queryResults.push(queryResolver(query, width, height));
44+
}
45+
return queryResults;
46+
}
47+
48+
function calculateQuery(
49+
key: string,
50+
val?: number | string,
51+
height?: number,
52+
width?: number
53+
) {
54+
let retval;
55+
switch (key) {
56+
case 'maxWidth':
57+
retval = typeof val === 'number' && width ? width <= val : undefined;
58+
break;
59+
case 'minWidth':
60+
retval = typeof val === 'number' && width ? width >= val : undefined;
61+
break;
62+
case 'maxHeight':
63+
retval = typeof val === 'number' && height ? height <= val : undefined;
64+
break;
65+
case 'minHeight':
66+
retval = typeof val === 'number' && height ? height >= val : undefined;
67+
break;
68+
case 'orientation':
69+
if (val) {
70+
if (width && height && width > height) {
71+
retval = typeof val === 'string' && val === 'landscape';
72+
} else {
73+
retval = typeof val === 'string' && val === 'portrait';
74+
}
75+
}
76+
break;
77+
default:
78+
break;
79+
}
80+
return retval;
81+
}

‎example/storybook-nativewind/src/hooks/useBreakPointValue/index.nw.stories.mdx

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
title: gluestack-ui Alert Component | Installation, Usage, and API
3+
4+
description: Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user.
5+
6+
pageTitle: Alert
7+
8+
pageDescription: Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user.
9+
10+
showHeader: true
11+
---
12+
13+
import { Meta } from '@storybook/addon-docs';
14+
15+
<Meta title="with-nativewind/Hooks/useBreakPointValue" />
16+
17+
import {
18+
VStack,
19+
Box,
20+
Text
21+
} from '../../core-components/nativewind';
22+
import { useBreakpointValue } from '../../core-components/hooks/use-break-point-value.ts';
23+
import { transformedCode } from '../../utils';
24+
import {
25+
AppProvider,
26+
CodePreview,
27+
Table,
28+
InlineCode,
29+
TableContainer,
30+
Tabs
31+
} from '@gluestack/design-system';
32+
import { CollapsibleCode } from '@gluestack/design-system';
33+
import Wrapper from '../../core-components/nativewind/Wrapper';
34+
35+
This is an illustration of **useBreakPointValue** hook.
36+
37+
<Wrapper>
38+
<CodePreview
39+
_rendererWrapper={{ px: '$2.5' }}
40+
showComponentRenderer={true}
41+
showArgsController={true}
42+
metaData={{
43+
code: `
44+
function App(){
45+
const flexDir = useBreakpointValue({
46+
default: "column",
47+
sm: "row",
48+
});
49+
return (
50+
<VStack
51+
style={{
52+
flexDirection: flexDir,
53+
gap: 10,
54+
}}
55+
>
56+
<Box className={"justify-center items-center p-4 rounded bg-blue-500"}>
57+
<Text className="font-bold text-typography-0">Box 1</Text>
58+
</Box>
59+
<Box className={"justify-center items-center p-4 rounded bg-blue-600"}>
60+
<Text className="font-bold text-typography-0">Box 2</Text>
61+
</Box>
62+
<Box className={"justify-center items-center p-4 rounded bg-blue-700"}>
63+
<Text className="font-bold text-typography-0">Box 3</Text>
64+
</Box>
65+
</VStack>
66+
);
67+
}
68+
`,
69+
transformCode: (code) => {
70+
return transformedCode(code, 'function', 'App');
71+
},
72+
scope: {
73+
VStack,
74+
Box,
75+
Text,
76+
useBreakpointValue,
77+
Wrapper,
78+
},
79+
argsType: {
80+
},
81+
}}
82+
/>
83+
</Wrapper>
84+
85+
<br />
86+
87+
## Installation
88+
89+
<Tabs value="cli" type="section">
90+
<Tabs.TabList>
91+
<Tabs.Tab value="cli">
92+
<Tabs.TabTitle>CLI</Tabs.TabTitle>
93+
</Tabs.Tab>
94+
<Tabs.Tab value="manual">
95+
<Tabs.TabTitle>Manual</Tabs.TabTitle>
96+
</Tabs.Tab>
97+
</Tabs.TabList>
98+
<Tabs.TabPanels>
99+
<Tabs.TabPanel value="cli">
100+
<>
101+
102+
### Run the following command:
103+
```bash
104+
npx gluestack-ui add useBreakPointValue
105+
```
106+
</>
107+
</Tabs.TabPanel>
108+
<Tabs.TabPanel value="manual">
109+
<>
110+
111+
112+
### Step 1: Copy and paste the following code into your project.
113+
114+
<CollapsibleCode>
115+
116+
```jsx
117+
%%-- File: core-components/hooks/use-break-point-value.ts --%%
118+
```
119+
120+
</CollapsibleCode>
121+
122+
### Step 2: Update the import paths to match your project setup.
123+
</>
124+
</Tabs.TabPanel>
125+
</Tabs.TabPanels>
126+
</Tabs>
127+
128+
## API Reference
129+
130+
To use this component in your project, include the following import statement in your file.
131+
132+
```jsx
133+
import { useBreakPointValue } from '@/components/hooks/use-break-point-value';
134+
```
135+
136+
```jsx
137+
const flexDir = useBreakpointValue({
138+
default: "column",
139+
sm: "row",
140+
});
141+
```
142+
143+
### Hook Arguments
144+
145+
This section provides a comprehensive reference list for the hook arguments, detailing descriptions, properties, types, and default behavior for easy project integration.
146+
147+
#### useBreakPointValue
148+
149+
<>
150+
<TableContainer>
151+
<Table>
152+
<Table.THead>
153+
<Table.TR>
154+
<Table.TH>
155+
<Table.TText>Arguments</Table.TText>
156+
</Table.TH>
157+
<Table.TH>
158+
<Table.TText>Value</Table.TText>
159+
</Table.TH>
160+
<Table.TH>
161+
<Table.TText>Default</Table.TText>
162+
</Table.TH>
163+
</Table.TR>
164+
</Table.THead>
165+
<Table.TBody>
166+
<Table.TR>
167+
<Table.TD>
168+
<Table.TText>
169+
<InlineCode>1</InlineCode>
170+
</Table.TText>
171+
</Table.TD>
172+
<Table.TD>
173+
<Table.TText>{`Record<breakPoints | default,value>`}</Table.TText>
174+
</Table.TD>
175+
<Table.TD>
176+
<Table.TText>-</Table.TText>
177+
</Table.TD>
178+
</Table.TR>
179+
</Table.TBody>
180+
</Table>
181+
</TableContainer>
182+
</>

‎example/storybook-nativewind/src/hooks/useBreakPointValue/useBreakPointValue.stories.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import type { ComponentMeta } from '@storybook/react-native';
2+
import UseBreakPointValueBasic from './useBreakPointValue';
3+
4+
const UseBreakPointValueBasicMeta: ComponentMeta<
5+
typeof UseBreakPointValueBasic
6+
> = {
7+
title: 'stories/UseBreakPointValueBasic',
8+
component: UseBreakPointValueBasic,
9+
// metaInfo is required for figma generation
10+
// @ts-ignore
11+
metaInfo: {},
12+
argTypes: {},
13+
args: {},
14+
};
15+
16+
export default UseBreakPointValueBasicMeta;
17+
18+
export { UseBreakPointValueBasic };

‎example/storybook-nativewind/src/hooks/useBreakPointValue/useBreakPointValue.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Text } from '@/components/ui/text';
2+
import { Box } from '@/components/ui/box';
3+
4+
import React from 'react';
5+
import { VStack } from '@/components/ui/vstack';
6+
import { useBreakpointValue } from '@/components/hooks/use-break-point-value';
7+
8+
const UseBreakPointValueBasic = ({ ...props }: any) => {
9+
const flexDir = useBreakpointValue({
10+
default: 'column',
11+
sm: 'row',
12+
});
13+
return (
14+
<VStack
15+
style={{
16+
flexDirection: flexDir,
17+
gap: 10,
18+
}}
19+
{...props}
20+
>
21+
<Box className={`justify-center items-center bg-blue-400`}>
22+
<Text className="font-bold text-typography-0">BOX 1</Text>
23+
</Box>
24+
<Box className={`justify-center items-center bg-blue-500`}>
25+
<Text className="font-bold text-typography-0">BOX 2</Text>
26+
</Box>
27+
<Box className={`justify-center items-center bg-blue-600`}>
28+
<Text className="font-bold text-typography-0">BOX 3</Text>
29+
</Box>
30+
</VStack>
31+
);
32+
};
33+
UseBreakPointValueBasic.description =
34+
'This is a basic Alert component example. Alerts are used to communicate a state that affects a system, feature or page';
35+
export default UseBreakPointValueBasic;

‎example/storybook-nativewind/src/tailwind.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ module.exports = {
55
'./src/**/*.{html,js,jsx,ts,tsx}',
66
'./src/core-components/**/**/*.{html,js,jsx,ts,tsx}',
77
'./src/components/**/*.{html,js,jsx,ts,tsx,mdx}',
8+
'./src/hooks/**/*.{html,js,jsx,ts,tsx,mdx}',
89
],
910
presets: [require('nativewind/preset')],
1011
safelist: [

‎example/storybook-nativewind/tsconfig.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"baseUrl": ".",
55
"paths": {
66
"@/components/ui/*": ["src/core-components/nativewind/*"],
7+
"@/components/hooks/*": ["src/core-components/hooks/*"],
78
"@gluestack-style/react": ["../../packages/styled/react/src"],
89
"@gluestack-ui/popover": ["../../packages/unstyled/popover/src"],
910
"@gluestack-ui/button": ["../../packages/unstyled/button/src"],

0 commit comments

Comments
 (0)