react-responsive-tools 2.6.1 → 2.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/breakpoints.config.d.ts +2 -2
- package/dist/breakpoints.config.js +17 -17
- package/dist/default.config.d.ts +2 -2
- package/dist/default.config.js +17 -17
- package/dist/hooks/useBreakpoint.d.ts +1 -1
- package/dist/hooks/useBreakpoint.js +5 -7
- package/dist/hooks/useBreakpoint.test.js +25 -104
- package/dist/hooks/useVBreakpoint.js +6 -5
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/scripts/createConfig.mjs +1 -1
- package/dist/scripts/generateCustomBreakpointsSCSS.mjs +1 -1
- package/package.json +1 -1
- package/reinit.sh +7 -7
- package/dist/functions/getBreakpoint.d.ts +0 -3
- package/dist/functions/getBreakpoint.js +0 -7
- package/dist/hooks/useVariant.d.ts +0 -2
- package/dist/hooks/useVariant.js +0 -3
|
@@ -16,6 +16,6 @@ import { TAdaptiveVariant } from "./interfaces/TAdaptiveVariant";
|
|
|
16
16
|
* that a given pixel belongs to only one range.
|
|
17
17
|
*/
|
|
18
18
|
export declare const PREFERRED_VARIANT: TAdaptiveVariant;
|
|
19
|
-
declare const HORIZONTAL_BREAKPOINTS: Record<string,
|
|
20
|
-
declare const VERTICAL_BREAKPOINTS: Record<string,
|
|
19
|
+
declare const HORIZONTAL_BREAKPOINTS: Record<string, number>;
|
|
20
|
+
declare const VERTICAL_BREAKPOINTS: Record<string, number>;
|
|
21
21
|
export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS };
|
|
@@ -15,25 +15,25 @@
|
|
|
15
15
|
* which causes an overlap. By shifting one of them by 1px we guarantee
|
|
16
16
|
* that a given pixel belongs to only one range.
|
|
17
17
|
*/
|
|
18
|
-
export const PREFERRED_VARIANT = '
|
|
18
|
+
export const PREFERRED_VARIANT = 'MtF'; // DESKTOP_TO_FIRST
|
|
19
19
|
const HORIZONTAL_BREAKPOINTS = {
|
|
20
|
-
"xs":
|
|
21
|
-
"sm":
|
|
22
|
-
"md":
|
|
23
|
-
"lg":
|
|
24
|
-
"lt":
|
|
25
|
-
"ltm":
|
|
26
|
-
"ltl":
|
|
27
|
-
"xl":
|
|
28
|
-
"xxl":
|
|
29
|
-
"qxl":
|
|
20
|
+
"xs": 320,
|
|
21
|
+
"sm": 576,
|
|
22
|
+
"md": 768,
|
|
23
|
+
"lg": 992,
|
|
24
|
+
"lt": 1024,
|
|
25
|
+
"ltm": 1200,
|
|
26
|
+
"ltl": 1440,
|
|
27
|
+
"xl": 1920,
|
|
28
|
+
"xxl": 2560,
|
|
29
|
+
"qxl": 384,
|
|
30
30
|
};
|
|
31
31
|
const VERTICAL_BREAKPOINTS = {
|
|
32
|
-
"xs":
|
|
33
|
-
"sm":
|
|
34
|
-
"md":
|
|
35
|
-
"lg":
|
|
36
|
-
"xl":
|
|
37
|
-
"xxl":
|
|
32
|
+
"xs": 600,
|
|
33
|
+
"sm": 800,
|
|
34
|
+
"md": 1000,
|
|
35
|
+
"lg": 1200,
|
|
36
|
+
"xl": 1600,
|
|
37
|
+
"xxl": 160,
|
|
38
38
|
};
|
|
39
39
|
export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS };
|
package/dist/default.config.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { TAdaptiveVariant } from "./interfaces/TAdaptiveVariant";
|
|
2
2
|
declare const PREFERRED_VARIANT: TAdaptiveVariant;
|
|
3
|
-
declare const HORIZONTAL_BREAKPOINTS: Record<string,
|
|
4
|
-
declare const VERTICAL_BREAKPOINTS: Record<string,
|
|
3
|
+
declare const HORIZONTAL_BREAKPOINTS: Record<string, number>;
|
|
4
|
+
declare const VERTICAL_BREAKPOINTS: Record<string, number>;
|
|
5
5
|
export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS, PREFERRED_VARIANT };
|
package/dist/default.config.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
// breakpointConfig.js
|
|
2
|
-
const PREFERRED_VARIANT = '
|
|
2
|
+
const PREFERRED_VARIANT = 'MtF'; // DESKTOP_TO_FIRST
|
|
3
3
|
const HORIZONTAL_BREAKPOINTS = {
|
|
4
|
-
xs:
|
|
5
|
-
sm:
|
|
6
|
-
md:
|
|
7
|
-
lg:
|
|
8
|
-
lt:
|
|
9
|
-
ltm:
|
|
10
|
-
ltl:
|
|
11
|
-
xl:
|
|
12
|
-
xxl:
|
|
13
|
-
qxl:
|
|
4
|
+
"xs": 320,
|
|
5
|
+
"sm": 576,
|
|
6
|
+
"md": 768,
|
|
7
|
+
"lg": 992,
|
|
8
|
+
"lt": 1024,
|
|
9
|
+
"ltm": 1200,
|
|
10
|
+
"ltl": 1440,
|
|
11
|
+
"xl": 1920,
|
|
12
|
+
"xxl": 2560,
|
|
13
|
+
"qxl": 384,
|
|
14
14
|
};
|
|
15
15
|
const VERTICAL_BREAKPOINTS = {
|
|
16
|
-
xs:
|
|
17
|
-
sm:
|
|
18
|
-
md:
|
|
19
|
-
lg:
|
|
20
|
-
xl:
|
|
21
|
-
xxl:
|
|
16
|
+
"xs": 600,
|
|
17
|
+
"sm": 800,
|
|
18
|
+
"md": 1000,
|
|
19
|
+
"lg": 1200,
|
|
20
|
+
"xl": 1600,
|
|
21
|
+
"xxl": 160,
|
|
22
22
|
};
|
|
23
23
|
export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS, PREFERRED_VARIANT };
|
|
@@ -21,7 +21,7 @@ import { TAdaptiveVariant } from '../interfaces/TAdaptiveVariant';
|
|
|
21
21
|
* @returns `true` if the media query matches, otherwise `false` or `null`
|
|
22
22
|
* (depending on `react-responsive` behavior).
|
|
23
23
|
*/
|
|
24
|
-
export declare function useBreakpoint(b: TBreakpoint | number, variant?: TAdaptiveVariant): boolean
|
|
24
|
+
export declare function useBreakpoint(b: TBreakpoint | number, variant?: TAdaptiveVariant): boolean;
|
|
25
25
|
/**
|
|
26
26
|
* Optimized hook for checking if the current viewport is between two breakpoints.
|
|
27
27
|
*
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { useMediaQuery } from 'react-responsive';
|
|
2
|
-
import { PREFERRED_VARIANT } from '../breakpoints.config';
|
|
3
|
-
import useVariant from './useVariant';
|
|
4
|
-
import { getBreakpoint } from "../functions/getBreakpoint";
|
|
2
|
+
import { PREFERRED_VARIANT, HORIZONTAL_BREAKPOINTS } from '../breakpoints.config';
|
|
5
3
|
/**
|
|
6
4
|
* Low-level hook that checks if the current viewport matches a horizontal breakpoint.
|
|
7
5
|
*
|
|
@@ -24,8 +22,8 @@ import { getBreakpoint } from "../functions/getBreakpoint";
|
|
|
24
22
|
* (depending on `react-responsive` behavior).
|
|
25
23
|
*/
|
|
26
24
|
export function useBreakpoint(b, variant = PREFERRED_VARIANT) {
|
|
27
|
-
let _bp = typeof b === 'number' ? b :
|
|
28
|
-
const v =
|
|
25
|
+
let _bp = typeof b === 'number' ? b : HORIZONTAL_BREAKPOINTS[b];
|
|
26
|
+
const v = variant === 'MtF' ? 'min' : 'max';
|
|
29
27
|
if (variant !== PREFERRED_VARIANT)
|
|
30
28
|
_bp = _bp - 1;
|
|
31
29
|
return useMediaQuery({ query: `(${v}-width: ${_bp}px)` });
|
|
@@ -59,8 +57,8 @@ export function useBreakpoint(b, variant = PREFERRED_VARIANT) {
|
|
|
59
57
|
* @returns `true` if the viewport width is within the adjusted [min, max] range.
|
|
60
58
|
*/
|
|
61
59
|
export function useBreakpointBetween(min, max, preferredVariant = PREFERRED_VARIANT) {
|
|
62
|
-
let _min = typeof min === 'number' ? min :
|
|
63
|
-
let _max = typeof max === 'number' ? max :
|
|
60
|
+
let _min = typeof min === 'number' ? min : HORIZONTAL_BREAKPOINTS[min];
|
|
61
|
+
let _max = typeof max === 'number' ? max : HORIZONTAL_BREAKPOINTS[max];
|
|
64
62
|
switch (preferredVariant) {
|
|
65
63
|
case 'MtF':
|
|
66
64
|
_max = _max - 1;
|
|
@@ -1,30 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { render } from
|
|
3
|
-
import { useBreakpoint, useBreakpointBetween } from
|
|
4
|
-
|
|
5
|
-
jest.mock('react-responsive', () => ({
|
|
2
|
+
import { render } from "@testing-library/react";
|
|
3
|
+
import { useBreakpoint, useBreakpointBetween } from "./useBreakpoint";
|
|
4
|
+
jest.mock("react-responsive", () => ({
|
|
6
5
|
useMediaQuery: jest.fn(),
|
|
7
6
|
}));
|
|
8
|
-
jest.mock(
|
|
7
|
+
jest.mock("../breakpoints.config", () => ({
|
|
9
8
|
__esModule: true,
|
|
10
|
-
|
|
9
|
+
PREFERRED_VARIANT: "MtF",
|
|
11
10
|
}));
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
getBreakpoint: jest.fn(),
|
|
15
|
-
}));
|
|
16
|
-
jest.mock('../breakpoints.config', () => ({
|
|
17
|
-
__esModule: true,
|
|
18
|
-
PREFERRED_VARIANT: 'MtF', // adjust to your real preferred variant if needed
|
|
19
|
-
}));
|
|
20
|
-
import { useMediaQuery } from 'react-responsive';
|
|
21
|
-
import useVariant from './useVariant';
|
|
22
|
-
import { getBreakpoint } from '../functions/getBreakpoint';
|
|
23
|
-
import { PREFERRED_VARIANT } from '../breakpoints.config';
|
|
11
|
+
import { useMediaQuery } from "react-responsive";
|
|
12
|
+
import { PREFERRED_VARIANT } from "../breakpoints.config";
|
|
24
13
|
const mockedUseMediaQuery = useMediaQuery;
|
|
25
|
-
const mockedUseVariant = useVariant;
|
|
26
|
-
const mockedGetBreakpoint = getBreakpoint;
|
|
27
|
-
// Small test components to use hooks inside React
|
|
28
14
|
function BreakpointTestComponent(props) {
|
|
29
15
|
const value = useBreakpoint(props.b, props.variant);
|
|
30
16
|
return _jsx("div", { "data-testid": "value", children: String(value) });
|
|
@@ -33,121 +19,56 @@ function BreakpointBetweenTestComponent(props) {
|
|
|
33
19
|
const value = useBreakpointBetween(props.min, props.max, props.preferredVariant);
|
|
34
20
|
return _jsx("div", { "data-testid": "value", children: String(value) });
|
|
35
21
|
}
|
|
36
|
-
describe(
|
|
22
|
+
describe("useBreakpoint", () => {
|
|
37
23
|
beforeEach(() => {
|
|
38
24
|
jest.clearAllMocks();
|
|
39
|
-
mockedUseVariant.mockReturnValue('min');
|
|
40
25
|
});
|
|
41
|
-
it(
|
|
26
|
+
it("uses min-width for numeric breakpoint when variant === PREFERRED_VARIANT", () => {
|
|
42
27
|
mockedUseMediaQuery.mockReturnValue(true);
|
|
43
28
|
const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 768, variant: PREFERRED_VARIANT }));
|
|
44
|
-
expect(mockedUseVariant).toHaveBeenCalledWith(PREFERRED_VARIANT);
|
|
45
29
|
expect(mockedUseMediaQuery).toHaveBeenCalledWith({
|
|
46
|
-
query:
|
|
30
|
+
query: "(min-width: 768px)",
|
|
47
31
|
});
|
|
48
|
-
expect(getByTestId(
|
|
32
|
+
expect(getByTestId("value").textContent).toBe("true");
|
|
49
33
|
});
|
|
50
|
-
it(
|
|
51
|
-
mockedGetBreakpoint.mockReturnValue('1024');
|
|
52
|
-
mockedUseMediaQuery.mockReturnValue(false);
|
|
53
|
-
const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 'lg', variant: PREFERRED_VARIANT }));
|
|
54
|
-
expect(mockedGetBreakpoint).toHaveBeenCalledWith('lg');
|
|
55
|
-
expect(mockedUseMediaQuery).toHaveBeenCalledWith({
|
|
56
|
-
query: '(min-width: 1024px)',
|
|
57
|
-
});
|
|
58
|
-
expect(getByTestId('value').textContent).toBe('false');
|
|
59
|
-
});
|
|
60
|
-
it('should decrease breakpoint by 1px when variant !== PREFERRED_VARIANT (numeric)', () => {
|
|
61
|
-
mockedUseVariant.mockReturnValue('max');
|
|
34
|
+
it("decreases breakpoint by 1px when variant !== PREFERRED_VARIANT (numeric)", () => {
|
|
62
35
|
mockedUseMediaQuery.mockReturnValue(true);
|
|
63
|
-
const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 500, variant:
|
|
64
|
-
expect(mockedUseVariant).toHaveBeenCalledWith('DtF');
|
|
65
|
-
expect(mockedUseMediaQuery).toHaveBeenCalledWith({
|
|
66
|
-
query: '(max-width: 499px)',
|
|
67
|
-
});
|
|
68
|
-
expect(getByTestId('value').textContent).toBe('true');
|
|
69
|
-
});
|
|
70
|
-
it('should also decrease named breakpoint by 1px when variant !== PREFERRED_VARIANT', () => {
|
|
71
|
-
mockedGetBreakpoint.mockReturnValue('600');
|
|
72
|
-
mockedUseVariant.mockReturnValue('max');
|
|
73
|
-
mockedUseMediaQuery.mockReturnValue(false);
|
|
74
|
-
const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 'md', variant: 'DtF' }));
|
|
75
|
-
expect(mockedGetBreakpoint).toHaveBeenCalledWith('md');
|
|
36
|
+
const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 500, variant: "DtF" }));
|
|
76
37
|
expect(mockedUseMediaQuery).toHaveBeenCalledWith({
|
|
77
|
-
query:
|
|
38
|
+
query: "(max-width: 499px)",
|
|
78
39
|
});
|
|
79
|
-
expect(getByTestId(
|
|
40
|
+
expect(getByTestId("value").textContent).toBe("true");
|
|
80
41
|
});
|
|
81
42
|
});
|
|
82
|
-
describe(
|
|
43
|
+
describe("useBreakpointBetween", () => {
|
|
83
44
|
beforeEach(() => {
|
|
84
45
|
jest.clearAllMocks();
|
|
85
46
|
});
|
|
86
|
-
it(
|
|
47
|
+
it("uses min/max as-is but decreases max by 1px when preferredVariant === PREFERRED_VARIANT (numeric)", () => {
|
|
87
48
|
mockedUseMediaQuery.mockReturnValue(true);
|
|
88
49
|
const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant: PREFERRED_VARIANT }));
|
|
89
50
|
expect(mockedUseMediaQuery).toHaveBeenCalledWith({
|
|
90
51
|
minWidth: 320,
|
|
91
|
-
maxWidth: 767, // 768 - 1
|
|
52
|
+
maxWidth: 767, // 768 - 1
|
|
92
53
|
});
|
|
93
|
-
expect(getByTestId(
|
|
54
|
+
expect(getByTestId("value").textContent).toBe("true");
|
|
94
55
|
});
|
|
95
|
-
it('
|
|
96
|
-
mockedGetBreakpoint
|
|
97
|
-
.mockReturnValueOnce('320') // for min
|
|
98
|
-
.mockReturnValueOnce('768'); // for max
|
|
99
|
-
mockedUseMediaQuery.mockReturnValue(false);
|
|
100
|
-
const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 'sm', max: 'md', preferredVariant: PREFERRED_VARIANT }));
|
|
101
|
-
expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(1, 'sm');
|
|
102
|
-
expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(2, 'md');
|
|
103
|
-
expect(mockedUseMediaQuery).toHaveBeenCalledWith({
|
|
104
|
-
minWidth: 320,
|
|
105
|
-
maxWidth: 767, // 768 - 1 because PREFERRED_VARIANT === 'MtF'
|
|
106
|
-
});
|
|
107
|
-
expect(getByTestId('value').textContent).toBe('false');
|
|
108
|
-
});
|
|
109
|
-
it('for preferredVariant === "MtF" should decrease max by 1px', () => {
|
|
56
|
+
it('when preferredVariant === "MtF" it only decreases max by 1px', () => {
|
|
110
57
|
mockedUseMediaQuery.mockReturnValue(true);
|
|
111
|
-
const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant:
|
|
58
|
+
const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant: "MtF" }));
|
|
112
59
|
expect(mockedUseMediaQuery).toHaveBeenCalledWith({
|
|
113
60
|
minWidth: 320,
|
|
114
61
|
maxWidth: 767,
|
|
115
62
|
});
|
|
116
|
-
expect(getByTestId(
|
|
63
|
+
expect(getByTestId("value").textContent).toBe("true");
|
|
117
64
|
});
|
|
118
|
-
it('
|
|
65
|
+
it('when preferredVariant === "DtF" it only decreases min by 1px', () => {
|
|
119
66
|
mockedUseMediaQuery.mockReturnValue(false);
|
|
120
|
-
const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant:
|
|
67
|
+
const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant: "DtF" }));
|
|
121
68
|
expect(mockedUseMediaQuery).toHaveBeenCalledWith({
|
|
122
69
|
minWidth: 319,
|
|
123
70
|
maxWidth: 768,
|
|
124
71
|
});
|
|
125
|
-
expect(getByTestId(
|
|
126
|
-
});
|
|
127
|
-
it('MtF + named values: should decrease max after getBreakpoint', () => {
|
|
128
|
-
mockedGetBreakpoint
|
|
129
|
-
.mockReturnValueOnce('400') // min
|
|
130
|
-
.mockReturnValueOnce('900'); // max
|
|
131
|
-
mockedUseMediaQuery.mockReturnValue(true);
|
|
132
|
-
const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 'sm', max: 'xl', preferredVariant: 'MtF' }));
|
|
133
|
-
expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(1, 'sm');
|
|
134
|
-
expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(2, 'xl');
|
|
135
|
-
expect(mockedUseMediaQuery).toHaveBeenCalledWith({
|
|
136
|
-
minWidth: 400,
|
|
137
|
-
maxWidth: 899,
|
|
138
|
-
});
|
|
139
|
-
expect(getByTestId('value').textContent).toBe('true');
|
|
140
|
-
});
|
|
141
|
-
it('DtF + named values: should decrease min after getBreakpoint', () => {
|
|
142
|
-
mockedGetBreakpoint
|
|
143
|
-
.mockReturnValueOnce('400') // min
|
|
144
|
-
.mockReturnValueOnce('900'); // max
|
|
145
|
-
mockedUseMediaQuery.mockReturnValue(false);
|
|
146
|
-
const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 'sm', max: 'xl', preferredVariant: 'DtF' }));
|
|
147
|
-
expect(mockedUseMediaQuery).toHaveBeenCalledWith({
|
|
148
|
-
minWidth: 399,
|
|
149
|
-
maxWidth: 900,
|
|
150
|
-
});
|
|
151
|
-
expect(getByTestId('value').textContent).toBe('false');
|
|
72
|
+
expect(getByTestId("value").textContent).toBe("false");
|
|
152
73
|
});
|
|
153
74
|
});
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { useMediaQuery } from 'react-responsive';
|
|
2
|
-
import
|
|
3
|
-
import { getVBreakpoint } from "../functions/getBreakpoint.js";
|
|
2
|
+
import { VERTICAL_BREAKPOINTS, PREFERRED_VARIANT } from "../breakpoints.config";
|
|
4
3
|
export function useVBreakpoint(b, variant = 'MtF') {
|
|
5
|
-
|
|
6
|
-
const v =
|
|
7
|
-
|
|
4
|
+
let _bp = typeof b === 'number' ? b : VERTICAL_BREAKPOINTS[b];
|
|
5
|
+
const v = variant === 'MtF' ? 'min' : 'max';
|
|
6
|
+
if (variant !== PREFERRED_VARIANT)
|
|
7
|
+
_bp = _bp - 1;
|
|
8
|
+
return useMediaQuery({ query: `(${v}-height: ${_bp}px)` });
|
|
8
9
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { TBreakpoint, TVerticalBreakpoint } from './interfaces/TBreakpoint';
|
|
2
2
|
import { TBreakpoints, TVerticalBreakpoints } from './interfaces/TBreakpoints';
|
|
3
|
+
import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from './breakpoints.config';
|
|
3
4
|
import { useBreakpointBetween, useBreakpoint } from './hooks/useBreakpoint.js';
|
|
4
5
|
import { useVBreakpoint } from './hooks/useVBreakpoint.js';
|
|
5
|
-
import { getBreakpoint, getVBreakpoint } from './functions/getBreakpoint.js';
|
|
6
6
|
export type { TBreakpoints, TBreakpoint, TVerticalBreakpoint, TVerticalBreakpoints, };
|
|
7
|
-
export { useBreakpointBetween, useBreakpoint, useVBreakpoint,
|
|
7
|
+
export { useBreakpointBetween, useBreakpoint, useVBreakpoint, VERTICAL_BREAKPOINTS, HORIZONTAL_BREAKPOINTS, };
|
|
8
8
|
export * from './components/horizontal.js';
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from './breakpoints.config';
|
|
1
2
|
import { useBreakpointBetween, useBreakpoint } from './hooks/useBreakpoint.js';
|
|
2
3
|
import { useVBreakpoint } from './hooks/useVBreakpoint.js';
|
|
3
|
-
|
|
4
|
-
export { useBreakpointBetween, useBreakpoint, useVBreakpoint, getBreakpoint, getVBreakpoint, };
|
|
4
|
+
export { useBreakpointBetween, useBreakpoint, useVBreakpoint, VERTICAL_BREAKPOINTS, HORIZONTAL_BREAKPOINTS, };
|
|
5
5
|
export * from './components/horizontal.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o from"fs";import n from"path";import{fileURLToPath as e}from"url";import{HORIZONTAL_BREAKPOINTS as r,VERTICAL_BREAKPOINTS as s,PREFERRED_VARIANT as i}from"../default.config.js";const l=e(import.meta.url),t=n.dirname(l),R=n.resolve(t,"../../../../breakpoints.config.js");(async()=>{let e=r,l=s,a=i;if(o.existsSync(R))try{console.log(`User config file found at: ${R}`);const o=await import(R);console.log(`Loaded user config: ${JSON.stringify(o,null,2)}`),o.HORIZONTAL_BREAKPOINTS?(e=o.HORIZONTAL_BREAKPOINTS,console.log("Using user provided horizontal breakpoints.")):console.log("Using default horizontal breakpoints."),o.VERTICAL_BREAKPOINTS?(l=o.VERTICAL_BREAKPOINTS,console.log("Using user provided vertical breakpoints.")):console.log("Using default vertical breakpoints."),o.PREFERRED_VARIANT?(a=o.PREFERRED_VARIANT,console.log("Using user provided preferred variant.")):console.log("Using default preferred variant.")}catch(o){console.error("Error loading user config:",o)}else console.log(`User config file not found at: ${R}. Using default breakpoints.`);const c=`\n
|
|
1
|
+
import o from"fs";import n from"path";import{fileURLToPath as e}from"url";import{HORIZONTAL_BREAKPOINTS as r,VERTICAL_BREAKPOINTS as s,PREFERRED_VARIANT as i}from"../default.config.js";const l=e(import.meta.url),t=n.dirname(l),R=n.resolve(t,"../../../../breakpoints.config.js");(async()=>{let e=r,l=s,a=i;if(o.existsSync(R))try{console.log(`User config file found at: ${R}`);const o=await import(R);console.log(`Loaded user config: ${JSON.stringify(o,null,2)}`),o.HORIZONTAL_BREAKPOINTS?(e=o.HORIZONTAL_BREAKPOINTS,console.log("Using user provided horizontal breakpoints.")):console.log("Using default horizontal breakpoints."),o.VERTICAL_BREAKPOINTS?(l=o.VERTICAL_BREAKPOINTS,console.log("Using user provided vertical breakpoints.")):console.log("Using default vertical breakpoints."),o.PREFERRED_VARIANT?(a=o.PREFERRED_VARIANT,console.log("Using user provided preferred variant.")):console.log("Using default preferred variant.")}catch(o){console.error("Error loading user config:",o)}else console.log(`User config file not found at: ${R}. Using default breakpoints.`);const c=`\n// breakpoints.config.mjs\nconst HORIZONTAL_BREAKPOINTS = ${JSON.stringify(e,null,2)};\n\nconst VERTICAL_BREAKPOINTS = ${JSON.stringify(l,null,2)};\n\nconst PREFERRED_VARIANT = ${JSON.stringify(a)};\n\nexport { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS, PREFERRED_VARIANT };\n`;try{o.writeFileSync(n.resolve(t,"../breakpoints.config.js"),c),console.log("Config file has been generated successfully.")}catch(o){console.error("Error writing merged config file:",o)}})();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o from"fs";import e from"path";import{fileURLToPath as r}from"url";import{HORIZONTAL_BREAKPOINTS as s,VERTICAL_BREAKPOINTS as n}from"../breakpoints.config.js";const t=r(import.meta.url),i=e.dirname(t),m=(o,e)=>`$${e}-breakpoints: (\n${Object.entries(o).map((([o,e])=>` ${o}: ${e}`)).join(",\n")}\n);`,a=`\n${m(s,"horizontal")}\n${m(n,"vertical")}\n`;o.writeFileSync(e.resolve(i,"../scss/_custom-breakpoints.scss"),a),console.log("SCSS file with breakpoints maps has been generated successfully.");
|
|
1
|
+
import o from"fs";import e from"path";import{fileURLToPath as r}from"url";import{HORIZONTAL_BREAKPOINTS as s,VERTICAL_BREAKPOINTS as n}from"../breakpoints.config.js";const t=r(import.meta.url),i=e.dirname(t),m=(o,e)=>`$${e}-breakpoints: (\n${Object.entries(o).map((([o,e])=>` ${o}: ${e}px`)).join(",\n")}\n);`,a=`\n${m(s,"horizontal")}\n${m(n,"vertical")}\n`;o.writeFileSync(e.resolve(i,"../scss/_custom-breakpoints.scss"),a),console.log("SCSS file with breakpoints maps has been generated successfully.");
|
package/package.json
CHANGED
package/reinit.sh
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
#!/bin/bash
|
|
2
2
|
|
|
3
|
-
#
|
|
3
|
+
# Path to dist directory
|
|
4
4
|
DIST_DIR="./dist"
|
|
5
5
|
SCRIPT_DIR="$DIST_DIR/scripts"
|
|
6
6
|
|
|
7
|
-
#
|
|
7
|
+
# Diagnostic information
|
|
8
8
|
echo "DIST_DIR: $DIST_DIR"
|
|
9
9
|
echo "SCRIPT_DIR: $SCRIPT_DIR"
|
|
10
10
|
|
|
11
|
-
#
|
|
11
|
+
# Check if dist and scripts directories exist
|
|
12
12
|
echo "Listing contents of current directory:"
|
|
13
13
|
ls -la
|
|
14
14
|
echo "Listing contents of DIST_DIR:"
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
exit 1
|
|
20
20
|
fi
|
|
21
21
|
|
|
22
|
-
#
|
|
22
|
+
# Run createConfig.mjs from dist/scripts
|
|
23
23
|
echo "Running createConfig.mjs from package..."
|
|
24
24
|
node "$SCRIPT_DIR/createConfig.mjs"
|
|
25
25
|
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
exit 1
|
|
29
29
|
fi
|
|
30
30
|
|
|
31
|
-
#
|
|
31
|
+
# Run generateCustomBreakpointsSCSS.mjs from dist/scripts
|
|
32
32
|
echo "Running generateCustomBreakpointsSCSS.mjs from package..."
|
|
33
33
|
node "$SCRIPT_DIR/generateCustomBreakpointsSCSS.mjs"
|
|
34
34
|
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
exit 1
|
|
38
38
|
fi
|
|
39
39
|
|
|
40
|
-
#
|
|
40
|
+
# Run generateSCSS.mjs from dist/scripts
|
|
41
41
|
echo "Running generateSCSS.mjs from package..."
|
|
42
42
|
node "$SCRIPT_DIR/generateSCSS.mjs"
|
|
43
43
|
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
exit 1
|
|
47
47
|
fi
|
|
48
48
|
|
|
49
|
-
#
|
|
49
|
+
# Run generateTBreakpoint.mjs from dist/scripts
|
|
50
50
|
echo "Running generateTBreakpoint.mjs from package..."
|
|
51
51
|
node "$SCRIPT_DIR/generateTBreakpoint.mjs"
|
|
52
52
|
|
package/dist/hooks/useVariant.js
DELETED