react-responsive-tools 1.0.0

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright (c) 2023, NIKOLAY CHERNEY <westprophet@gmail.com>
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.MD

@@ -0,0 +1,498 @@
+# react-adaptable-scss: Adaptive SCSS Tools
+
+This project provides tools and configurations to simplify writing adaptive code for both vertical and horizontal layouts.
+
+## Project Structure
+
+The project includes the `scss` directory with the following files:
+- `_data.scss`: Contains breakpoints.
+- `_horizontal.scss` and `_vertical.scss`: Provide mixins for horizontal and vertical layouts, respectively.
+- `_screen.scss`: An intermediate file for JS export.
+- `_export.module.scss`: A file meant for explicit JS export.
+
+The `hooks` directory includes:
+- `useBreakpoint.ts`: Implements the `useBreakpoint` hook for identifying the current breakpoint.
+- `useBreakpoints.ts`: Implements the `useBreakpoints` hook for retrieving the list of currently active breakpoints.
+- `useVBreakpoint.ts`: Implements the `useVBreakpoint` hook for identifying the current vertical breakpoint.
+- `useVBreakpoints.ts`: Implements the `useVBreakpoints` hook for retrieving the list of currently active vertical breakpoints.
+
+The `components` directory includes:
+- `ForMF.ts`: A utility component that takes breakpoint size and children as props. It uses the `useBreakpointMF` hook to determine if the display size matches the given breakpoint. If so, it renders the children; otherwise, it renders `null`.
+- `ForDF.ts`: Similar to `ForMF`, but uses the `useBreakpointDF` hook.
+
+## Breakpoints
+
+We use a set of fixed variables for different screen sizes: `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, and `xxxl`.
+
+## Mixins Application
+
+Mixins are bundled with the `include` decorator, providing descriptive statements for breakpoints based on them.
+
+## Hooks
+
+The project incorporates the following hooks based on `react-responsive` for use in React.js:# react-adaptable-scss: Adaptive SCSS Tools
+
+This project provides tools and configurations to simplify writing adaptive code for both vertical and horizontal layouts.
+
+## Project Structure
+
+The project includes the `scss` directory with the following files:
+- `_data.scss`: Contains breakpoints.
+- `_horizontal.scss` and `_vertical.scss`: Provide mixins for horizontal and vertical layouts, respectively.
+- `_screen.scss`: An intermediate file for JS export.
+- `_export.module.scss`: A file meant for explicit JS export.
+
+The `hooks` directory includes:
+- `useBreakpoint.ts`: Implements the `useBreakpoint` hook for identifying the current breakpoint.
+- `useBreakpoints.ts`: Implements the `useBreakpoints` hook for retrieving the list of currently active breakpoints.
+- `useVBreakpoint.ts`: Implements the `useVBreakpoint` hook for identifying the current vertical breakpoint.
+- `useVBreakpoints.ts`: Implements the `useVBreakpoints` hook for retrieving the list of currently active vertical breakpoints.
+
+The `components` directory includes:
+- `ForMF.ts`: A utility component that takes breakpoint size and children as props. It uses the `useBreakpointMF` hook to determine if the display size matches the given breakpoint. If so, it renders the children; otherwise, it renders `null`.
+- `ForDF.ts`: Similar to `ForMF`, but uses the `useBreakpointDF` hook.
+
+## Breakpoints
+
+We use a set of fixed variables for different screen sizes.
+
+### Horizontal Breakpoints (default):
+
+```ecmascript 6
+const horizontalBreakpoints = {
+  xs: '320px',
+  sm: '576px',
+  md: '768px',
+  lg: '992px',
+  lt: '1024px',
+  ltm: '1200px',
+  ltl: '1440px',
+  xl: '1920px',
+  xxl: '2560px',
+  qxl: '3840px',
+};
+```
+
+### Vertical Breakpoints (default):
+
+```ecmascript 6
+const verticalBreakpoints = {
+  xs: '600px',
+  sm: '800px',
+  md: '1000px',
+  lg: '1200px',
+  xl: '1600px',
+  xxl: '1601px',
+};
+```
+
+## Mixins Application
+
+Mixins are bundled with the `include` decorator, providing descriptive statements for breakpoints based on them.
+
+## Hooks
+
+The project incorporates the following hooks based on `react-responsive` for use in React.js:
+- `useBreakpoints`: Retrieve current screen breakpoints.
+- `useBreakpoint`: Retrieve the current breakpoint.
+
+## Components
+
+The project includes utility components to display content only at certain breakpoints.
+
+## Future Growth Perspectives
+
+We aim to add the following functionalities:
+- Redefining SCSS variables.
+- Configuring breakpoint names.
+- Separate breakpoint configurations for vertical layout.
+- Integration with the external library `react-responsive# react-adaptable-scss: Adaptive SCSS Tools
+
+This project provides tools and configurations to simplify writing adaptive code for both vertical and horizontal layouts.
+
+## Project Structure
+
+The project includes the `scss` directory with the following files:
+- `_data.scss`: Contains breakpoints.
+- `_horizontal.scss` and `_vertical.scss`: Provide mixins for horizontal and vertical layouts, respectively.
+- `_screen.scss`: An intermediate file for JS export.
+- `_export.module.scss`: A file meant for explicit JS export.
+
+The `hooks` directory includes:
+- `useBreakpoint.ts`: Implements the `useBreakpoint` hook for identifying the current breakpoint.
+- `useBreakpoints.ts`: Implements the `useBreakpoints` hook for retrieving the list of currently active breakpoints.
+- `useVBreakpoint.ts`: Implements the `useVBreakpoint` hook for identifying the current vertical breakpoint.
+- `useVBreakpoints.ts`: Implements the `useVBreakpoints` hook for retrieving the list of currently active vertical breakpoints.
+
+The `components` directory includes:
+- `ForMF.ts`: A utility component that takes breakpoint size and children as props. It uses the `useBreakpointMF` hook to determine if the display size matches the given breakpoint. If so, it renders the children; otherwise, it renders `null`.
+- `ForDF.ts`: Similar to `ForMF`, but uses the `useBreakpointDF` hook.
+
+## Breakpoints
+
+We use a set of fixed variables for different screen sizes.
+
+### Horizontal Breakpoints (default):
+
+```typescript
+const horizontalBreakpoints = {
+  xs: '320px',
+  sm: '576px',
+  md: '768px',
+  lg: '992px',
+  lt: '1024px',
+  ltm: '1200px',
+  ltl: '1440px',
+  xl: '1920px',
+  xxl: '2560px',
+  qxl: '3840px',
+};
+```
+
+### Vertical Breakpoints (default):
+
+```typescript
+const verticalBreakpoints = {
+  xs: '600px',
+  sm: '800px',
+  md: '1000px',
+  lg: '1200px',
+  xl: '1600px',
+  xxl: '1601px',
+};
+```
+
+## Mixins Application
+
+Mixins are bundled with the `include` decorator, providing descriptive statements for breakpoints based on them.
+
+## Hooks
+
+The project incorporates the following hooks based on `react-responsive` for use in React.js:
+- `useBreakpoints`: Retrieve current screen breakpoints.
+- `useBreakpoint`: Retrieve the current breakpoint.
+- `useBreakpointMF`: Retrieve the current breakpoint for "MtF" variant.
+- `useBreakpointDF`: Retrieve the current breakpoint for "MtF" variant.
+
+### Hook Implementations
+
+#### useBreakpoint Hook:
+
+```typescript
+import { useMediaQuery } from 'react-responsive';
+import breakpoints from '../../scss/_horizontal.export.scss';
+import { TBreakpoint } from '../../interfaces/TBreakpoint';
+import { TAdaptiveVariant } from '../../interfaces/TAdaptiveVariant';
+import useVariant from '../useVariant';
+
+export default function useBreakpoint(b: TBreakpoint, variant: TAdaptiveVariant = 'MtF') {
+  const p = breakpoints[b];
+  const v = useVariant(variant);
+  return useMediaQuery({ query: `(${v}-width: ${p}px)` });
+}
+
+export function useBreakpointMF(b: TBreakpoint) {
+  return useBreakpoint(b, 'MtF');
+}
+
+export function useBreakpointDF(b: TBreakpoint) {
+  return useBreakpoint(b, 'DtF');
+}
+```
+
+### Usage Examples:
+
+#### useBreakpoint Hook:
+
+```typescript
+import useBreakpoint from './hooks/useBreakpoint';
+
+const MyComponent = () => {
+  const isMedium = useBreakpoint('md');
+
+  return (
+    <div>
+      {isMedium && <p>The current breakpoint is Medium (md)</p>}
+    </div>
+  );
+};
+```
+
+#### useBreakpoints Hook:
+
+```typescript
+import { useBreakpoints } from './hooks/useBreakpoints';
+
+const MyComponent = () => {
+  const breakpoints = useBreakpoints();
+
+  return (
+    <div>
+      {breakpoints.includes('lg') && <p>The Large (lg) breakpoint is active</p>}
+    </div>
+  );
+};
+```
+
+#### useBreakpointMF Hook:
+
+```typescript
+import { useBreakpointMF } from './hooks/useBreakpoint';
+
+const MyComponent = () => {
+  const isMedium = useBreakpointMF('md');
+
+  return (
+    <div>
+      {isMedium && <p>The current breakpoint is Medium (md) for Mobile First</p>}
+    </div>
+  );
+};
+```
+
+#### useBreakpointDF Hook:
+
+```typescript
+import { useBreakpointDF } from './hooks/useBreakpoint';
+
+const MyComponent = () => {
+  const isLarge = useBreakpointDF('lg');
+
+  return (
+    <div>
+      {isLarge && <p>The current breakpoint is Large (lg) for Desktop First</p>}
+    </div>
+  );
+};
+```
+
+## Components
+
+The project includes utility components to display content only at certain breakpoints.
+
+### Usage Examples:
+
+#### ForMF Component:
+
+```typescript
+import { ForMF } from './components/ForMF';
+
+const MyComponent = () => (
+  <ForMF bp='md'>
+    <p>This content is only visible at the Medium (md) breakpoint</p>
+  </ForMF>
+);
+```
+# react-adaptable-scss: Adaptive SCSS Tools
+
+This project provides tools and configurations to simplify writing adaptive code for both vertical and horizontal layouts.
+
+## Project Structure
+
+The project includes the `scss` directory with the following files:
+- `_data.scss`: Contains breakpoints.
+- `_horizontal.scss` and `_vertical.scss`: Provide mixins for horizontal and vertical layouts, respectively.
+- `_screen.scss`: An intermediate file for JS export.
+- `_export.module.scss`: A file meant for explicit JS export.
+
+The `hooks` directory includes:
+- `useBreakpoint.ts`: Implements the `useBreakpoint` hook for identifying the current breakpoint.
+- `useBreakpoints.ts`: Implements the `useBreakpoints` hook for retrieving the list of currently active breakpoints.
+- `useVBreakpoint.ts`: Implements the `useVBreakpoint` hook for identifying the current vertical breakpoint.
+- `useVBreakpoints.ts`: Implements the `useVBreakpoints` hook for retrieving the list of currently active vertical breakpoints.
+
+The `components` directory includes:
+- `ForMF.ts`: A utility component that takes breakpoint size and children as props. It uses the `useBreakpointMF` hook to determine if the display size matches the given breakpoint. If so, it renders the children; otherwise, it renders `null`.
+- `ForDF.ts`: Similar to `ForMF`, but uses the `useBreakpointDF` hook.
+
+## Breakpoints
+
+We use a set of fixed variables for different screen sizes.
+
+### Horizontal Breakpoints (default):
+
+```typescript
+const horizontalBreakpoints = {
+  xs: '320px',
+  sm: '576px',
+  md: '768px',
+  lg: '992px',
+  lt: '1024px',
+  ltm: '1200px',
+  ltl: '1440px',
+  xl: '1920px',
+  xxl: '2560px',
+  qxl: '3840px',
+};
+```
+
+### Vertical Breakpoints (default):
+
+```typescript
+const verticalBreakpoints = {
+  xs: '600px',
+  sm: '800px',
+  md: '1000px',
+  lg: '1200px',
+  xl: '1600px',
+  xxl: '1601px',
+};
+```
+
+## Mixins Application
+
+Mixins are bundled with the `include` decorator, providing descriptive statements for breakpoints based on them.
+
+## Hooks
+
+The project incorporates the following hooks based on `react-responsive` for use in React.js:
+- `useBreakpoints`: Retrieve current screen breakpoints.
+- `useBreakpoint`: Retrieve the current breakpoint.
+- `useBreakpointMF`: Retrieve the current breakpoint for "Mobile to First" variant.
+- `useBreakpointDF`: Retrieve the current breakpoint for "Desktop to First" variant.
+
+### Hook Implementations
+
+### Usage Examples:
+
+#### useBreakpoint Hook with Predefined Breakpoints:
+
+```typescript
+import useBreakpoint from './hooks/useBreakpoint';
+
+const MyComponent = () => {
+  const isMedium = useBreakpoint('md');
+
+  return (
+    <div>
+      {isMedium && <p>The current breakpoint is Medium (md)</p>}
+    </div>
+  );
+};
+```
+
+#### useBreakpoint Hook with Custom Size:
+
+```typescript
+import useBreakpoint from './hooks/useBreakpoint';
+
+const MyComponent = () => {
+  const isCustomSize = useBreakpoint(850);
+
+  return (
+    <div>
+      {isCustomSize && <p>The current breakpoint is Custom (850px)</p>}
+    </div>
+  );
+};
+```
+
+#### useBreakpoints Hook:
+
+```typescript
+import { useBreakpoints } from './hooks/useBreakpoints';
+
+const MyComponent = () => {
+  const breakpoints = useBreakpoints();
+
+  return (
+    <div>
+      {breakpoints.includes('lg') && <p>The Large (lg) breakpoint is active</p>}
+    </div>
+  );
+};
+```
+
+#### useBreakpointMF Hook:
+
+```typescript
+import { useBreakpointMF } from './hooks/useBreakpoint';
+
+const MyComponent = () => {
+  const isMedium = useBreakpointMF('md');
+
+  return (
+    <div>
+      {isMedium && <p>The current breakpoint is Medium (md) for Mobile First</p>}
+    </div>
+  );
+};
+```
+
+#### useBreakpointDF Hook:
+
+```typescript
+import { useBreakpointDF } from './hooks/useBreakpoint';
+
+const MyComponent = () => {
+  const isLarge = useBreakpointDF('lg');
+
+  return (
+    <div>
+      {isLarge && <p>The current breakpoint is Large (lg) for Desktop First</p>}
+    </div>
+  );
+};
+```
+
+## Components
+
+The project includes utility components to display content only at certain breakpoints.
+
+### Usage Examples:
+
+#### ForMF Component:
+
+```typescript
+import { ForMF } from './components/ForMF';
+
+const MyComponent = () => (
+  <ForMF bp='md'>
+    <p>This content is only visible at the Medium (md) breakpoint</p>
+  </ForMF>
+);
+
+const CustomSizeComponent = () => (
+  <ForMF bp={850}>
+    <p>This content is only visible at the Custom size (850px) breakpoint</p>
+  </ForMF>
+);
+```
+
+#### ForDF Component:
+
+```typescript
+import { ForDF } from './components/ForDF';
+
+const MyComponent = () => (
+  <ForDF bp='lg'>
+    <p>This content is only visible at the Large (lg) breakpoint</p>
+  </ForDF>
+);
+
+const CustomSizeComponent = () => (
+  <ForDF bp={1200}>
+    <p>This content is only visible at the Custom size (1200px) breakpoint</p>
+  </ForDF>
+);
+```
+
+## Future Growth Perspectives
+
+We aim to add the following functionalities:
+- Redefining SCSS variables.
+- Configuring breakpoint names.
+- Separate breakpoint configurations for vertical layout.
+- Integration with the external library `react-responsive`.
+- Addition of WebStorm live templates for quick layout designs.
+#### ForDF Component:
+
+```typescript
+import { ForDF } from './components/ForDF';
+
+const MyComponent = () => (
+  <ForDF bp='lg'>
+    <p>This content is only visible at the Large (lg) breakpoint</p>
+  </ForDF>
+);
+```

package/declarations.d.ts

@@ -0,0 +1,5 @@
+// declaration.d.ts
+declare module '*.scss' {
+  const content: Record<string, string>;
+  export default content;
+}

package/index.ts

@@ -0,0 +1 @@
+export * from './src'

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "react-responsive-tools",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "module": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "dev": "webpack --mode development --watch",
+    "build": "npm run generate-breakpoints && tsc && webpack --mode production",
+    "tsc": "tsc",
+    "test": "jest",
+    "lint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
+    "lint-fix": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\" --fix",
+    "generate-breakpoints": "node loadBreakpoints.js",
+    "postinstall": "npm run generate-breakpoints"
+  },
+  "files": [
+    "src",
+    "*.ts",
+    "*.scss",
+    "index.js",
+    "index.d.ts"
+  ],
+  "keywords": [
+    "react",
+    "typescript",
+    "scss-tools",
+    "react-responsive"
+  ],
+  "author": "westprophet",
+  "license": "ISC",
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "react-responsive": "^10.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-typescript": "^7.24.7",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^22.5.4",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.4.0",
+    "@typescript-eslint/parser": "^8.4.0",
+    "babel-loader": "^9.1.3",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^7.1.2",
+    "eslint": "^9.10.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-webpack-plugin": "^4.2.0",
+    "file-loader": "^6.2.0",
+    "husky": "^9.1.5",
+    "jest": "^29.7.0",
+    "react-dom": "^18.3.1",
+    "react-test-renderer": "^18.3.1",
+    "sass": "^1.78.0",
+    "sass-loader": "^16.0.1",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.2.5",
+    "ts-loader": "^9.5.1",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.5.4",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4"
+  }
+}

package/src/breakpoints.configs.js

@@ -0,0 +1,25 @@
+// breakpointConfig.js
+
+const HORIZONTAL_BREAKPOINTS = {
+  xs: '320px',
+  sm: '576px',
+  md: '768px',
+  lg: '992px',
+  lt: '1024px',
+  ltm: '1200px',
+  ltl: '1440px',
+  xl: '1920px',
+  xxl: '2560px',
+  qxl: '3840px',
+};
+
+const VERTICAL_BREAKPOINTS = {
+  xs: '600px',
+  sm: '800px',
+  md: '1000px',
+  lg: '1200px',
+  xl: '1600px',
+  xxl: '1601px',
+};
+
+export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS };

package/src/components/horizontal.tsx

@@ -0,0 +1,28 @@
+/**
+ * Created by westp on 15.05.2023
+ */
+
+import { TBreakpoint } from '../interfaces/TBreakpoint';
+import { useBreakpointDF, useBreakpointMF } from '../hooks/horizontal/useBreakpoint';
+
+interface Props {
+  children: any;
+}
+
+interface ForComponentProps extends Props {
+  p: TBreakpoint | number;
+}
+
+export function ForMF({children, p}: ForComponentProps) {
+  const is = useBreakpointMF(p);
+  if (is) return children;
+  return null;
+}
+
+
+export function ForDF({children ,p}: ForComponentProps) {
+  const is = useBreakpointDF(p);
+  if (is) return children;
+  return null;
+}
+

package/src/hooks/horizontal/useBreakpoint.test.ts

@@ -0,0 +1,56 @@
+    // src/hooks/__tests__/useBreakpoint.test.tsx
+    import { renderHook } from '@testing-library/react';
+    import useBreakpoint, { useBreakpointMF, useBreakpointDF } from './useBreakpoint';
+    import breakpoints from '../../scss/_horizontal.export.scss';
+
+    jest.mock('react-responsive', () => ({
+      useMediaQuery: jest.fn(),
+    }));
+
+    jest.mock('../useVariant', () => jest.fn(() => 'min'));
+
+    describe('useBreakpoint', () => {
+      it('should return true for the media query that matches the breakpoint', () => {
+        const mockedUseMediaQuery = require('react-responsive').useMediaQuery as jest.Mock;
+        mockedUseMediaQuery.mockReturnValue(true);
+
+        const { result } = renderHook(() => useBreakpoint('sm'));
+
+        expect(result.current).toBe(true);
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({ query: `(min-width: ${breakpoints.sm}px)` });
+      });
+
+      it('should return false for the media query that does not match the breakpoint', () => {
+        const mockedUseMediaQuery = require('react-responsive').useMediaQuery as jest.Mock;
+        mockedUseMediaQuery.mockReturnValue(false);
+
+        const { result } = renderHook(() => useBreakpoint('sm'));
+
+        expect(result.current).toBe(false);
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({ query: `(min-width: ${breakpoints.sm}px)` });
+      });
+    });
+
+    describe('useBreakpointMF', () => {
+      it('should return true for the `MtF` variant', () => {
+        const mockedUseMediaQuery = require('react-responsive').useMediaQuery as jest.Mock;
+        mockedUseMediaQuery.mockReturnValue(true);
+
+        const { result } = renderHook(() => useBreakpointMF('md'));
+
+        expect(result.current).toBe(true);
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({ query: `(min-width: ${breakpoints.md}px)` });
+      });
+    });
+
+    describe('useBreakpointDF', () => {
+      it('should return true for the `DtF` variant', () => {
+        const mockedUseMediaQuery = require('react-responsive').useMediaQuery as jest.Mock;
+        mockedUseMediaQuery.mockReturnValue(true);
+
+        const { result } = renderHook(() => useBreakpointDF('lg'));
+
+        expect(result.current).toBe(true);
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({ query: `(min-width: ${breakpoints.lg}px)` });
+      });
+    });

package/src/hooks/horizontal/useBreakpoint.ts

@@ -0,0 +1,20 @@
+import { useMediaQuery } from 'react-responsive';
+
+import breakpoints from '../../scss/_horizontal.export.scss';
+import { TBreakpoint } from '../../interfaces/TBreakpoint';
+import { TAdaptiveVariant } from '../../interfaces/TAdaptiveVariant';
+import useVariant from '../useVariant';
+
+export default function useBreakpoint(b: TBreakpoint | number, variant: TAdaptiveVariant = 'MtF') {
+  const p = typeof b === 'number' ? b :  breakpoints[b];
+  const v = useVariant(variant);
+  return useMediaQuery({ query: `(${v}-width: ${p}px)` });
+}
+
+export function useBreakpointMF(b: TBreakpoint | number) {
+  return useBreakpoint(b, 'MtF');
+}
+
+export function useBreakpointDF(b: TBreakpoint | number) {
+  return useBreakpoint(b, 'MtF');
+}

package/src/hooks/horizontal/useBreakpoints.ts

@@ -0,0 +1,30 @@
+import { useMediaQuery } from 'react-responsive';
+
+import breakpoints from '../../scss/_horizontal.export.scss';
+import { TBreakpoints } from '../../interfaces/TBreakpoints';
+import { TAdaptiveVariant } from '../../interfaces/TAdaptiveVariant';
+import useVariant from '../useVariant';
+
+export default function useBreakpoints(variant: TAdaptiveVariant = 'MtF'): TBreakpoints<boolean> {
+  const v = useVariant(variant);
+  return {
+    xs: useMediaQuery({ query: `(${v}-width: ${breakpoints.xs}px)` }),
+    sm: useMediaQuery({ query: `(${v}-width: ${breakpoints.sm}px)` }),
+    md: useMediaQuery({ query: `(${v}-width: ${breakpoints.md}px)` }),
+    lg: useMediaQuery({ query: `(${v}-width: ${breakpoints.lg}px)` }),
+    lt: useMediaQuery({ query: `(${v}-width: ${breakpoints.lt})px` }),
+    ltm: useMediaQuery({ query: `(${v}-width: ${breakpoints.ltm})px` }),
+    ltl: useMediaQuery({ query: `(${v}-width: ${breakpoints.ltl})px` }),
+    xl: useMediaQuery({ query: `(${v}-width: ${breakpoints.xl})px` }),
+    xxl: useMediaQuery({ query: `(${v}-width: ${breakpoints.xxl})px` }),
+    qxl: useMediaQuery({ query: `(${v}-width: ${breakpoints.qxl})px` }),
+  };
+}
+
+export function useBreakpointsMF(): TBreakpoints<boolean> {
+  return useBreakpoints('MtF');
+}
+
+export function useBreakpointsDF(): TBreakpoints<boolean> {
+  return useBreakpoints('DtF');
+}

package/src/hooks/useVariant.ts

@@ -0,0 +1,5 @@
+import {TAdaptiveVariant} from "../interfaces/TAdaptiveVariant";
+
+export default function useVariant(variant: TAdaptiveVariant){
+    return variant === 'MtF' ? 'min': 'max';
+}

package/src/hooks/vertical/useVBreakpoint.ts

@@ -0,0 +1,20 @@
+import { useMediaQuery } from 'react-responsive';
+
+import breakpoints from '../../scss/_vertical.export.scss';
+import { TVerticalBreakpoint } from '../../interfaces/TBreakpoint';
+import { TAdaptiveVariant } from '../../interfaces/TAdaptiveVariant';
+import useVariant from '../useVariant';
+
+export default function useVBreakpoint(b: TVerticalBreakpoint | number, variant: TAdaptiveVariant = 'MtF') {
+  const p = typeof b === 'number' ? b :  breakpoints[b];
+  const v = useVariant(variant);
+  return useMediaQuery({ query: `(${v}-height: ${p}px)` });
+}
+
+export function useVBreakpointMF(b: TVerticalBreakpoint | number) {
+  return useVBreakpoint(b, 'MtF');
+}
+
+export function useVBreakpointDF(b: TVerticalBreakpoint | number) {
+  return useVBreakpoint(b, 'MtF');
+}

package/src/hooks/vertical/useVBreakpoints.ts

@@ -0,0 +1,26 @@
+import { useMediaQuery } from 'react-responsive';
+
+import breakpoints from '../../scss/_vertical.export.scss';
+import { TVerticalBreakpoints } from '../../interfaces/TBreakpoints';
+import { TAdaptiveVariant } from '../../interfaces/TAdaptiveVariant';
+import useVariant from '../useVariant';
+
+export default function useVBreakpoints(variant: TAdaptiveVariant = 'MtF'): TVerticalBreakpoints<boolean> {
+  const v = useVariant(variant);
+  return {
+    xs: useMediaQuery({ query: `(${v}-height: ${breakpoints.xs}px)` }),
+    sm: useMediaQuery({ query: `(${v}-height: ${breakpoints.sm}px)` }),
+    md: useMediaQuery({ query: `(${v}-height: ${breakpoints.md}px)` }),
+    lg: useMediaQuery({ query: `(${v}-height: ${breakpoints.lg}px)` }),
+    xl: useMediaQuery({ query: `(${v}-height: ${breakpoints.xl})px` }),
+    xxl: useMediaQuery({ query: `(${v}-height: ${breakpoints.xxl})px` }),
+  };
+}
+
+export function useVBreakpointsMF(): TVerticalBreakpoints<boolean> {
+  return useVBreakpoints('MtF');
+}
+
+export function useVBreakpointsDF(): TVerticalBreakpoints<boolean> {
+  return useVBreakpoints('DtF');
+}

package/src/index.scss

@@ -0,0 +1,4 @@
+@import "scss/data";
+@import "scss/vertical";
+@import "scss/horizontal";
+

package/src/index.ts

@@ -0,0 +1,19 @@
+import { TBreakpoints, TVerticalBreakpoints } from './interfaces/TBreakpoints';
+import { TBreakpoint, TVerticalBreakpoint } from './interfaces/TBreakpoint';
+
+export * from 'react-responsive';
+
+export * from './hooks/horizontal/useBreakpoints';
+export * from './hooks/horizontal/useBreakpoint';
+
+export * from './hooks/vertical/useVBreakpoint';
+export * from './hooks/vertical/useVBreakpoints';
+
+export type {
+  TBreakpoints,
+  TBreakpoint,
+  TVerticalBreakpoint,
+  TVerticalBreakpoints,
+};
+
+export * from './components/horizontal';

package/src/interfaces/TAdaptiveVariant.ts

@@ -0,0 +1 @@
+export type TAdaptiveVariant = 'MtF' | 'DtF';

package/src/interfaces/TBreakpoint.ts

@@ -0,0 +1,21 @@
+export type TBreakpoint =
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'lt'
+    | 'ltm'
+    | 'ltl'
+    | 'xl'
+    | 'xxl'
+    | 'qxl'
+
+
+export type TVerticalBreakpoint =
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | 'xxl'
+

package/src/interfaces/TBreakpoints.ts

@@ -0,0 +1,9 @@
+import { TBreakpoint, TVerticalBreakpoint } from './TBreakpoint';
+
+export type TBreakpoints<T> = {
+  [key in TBreakpoint]: T;
+};
+
+export type TVerticalBreakpoints<T> = {
+  [key in TVerticalBreakpoint]: T;
+};

package/src/reset.scss

@@ -0,0 +1,99 @@
+/***
+    The new CSS reset - version 1.8.4 (last updated 14.2.2023)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+ */
+*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
+  all: unset;
+  display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a, button {
+  cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol, ul, menu {
+  list-style: none;
+}
+
+/* For images to not be able to exceed their container */
+img {
+  max-inline-size: 100%;
+  max-block-size: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+  border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input, textarea {
+  -webkit-user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+  white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+  -webkit-appearance: revert;
+  appearance: revert;
+}
+
+/* preformatted text - use only for this feature */
+:where(pre) {
+  all: revert;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+  color: unset;
+}
+
+/* remove default dot (•) sign */
+::marker {
+  content: initial;
+}
+
+/* fix the feature of 'hidden' attribute.
+   display:revert; revert to element instead of attribute */
+:where([hidden]) {
+  display: none;
+}
+
+/* revert for bug in Chromium browsers
+   - fix for the content editable attribute will work properly.
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable="false"])) {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+  overflow-wrap: break-word;
+  -webkit-line-break: after-white-space;
+  -webkit-user-select: auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+  -webkit-user-drag: element;
+}
+
+/* Revert Modal native behavior */
+:where(dialog:modal) {
+  all: revert;
+}

package/src/scss/_data.scss

@@ -0,0 +1,24 @@
+// _data.scss
+@import './custom-breakpoints';
+
+:export {
+  // Экспорт горизонтальных брейкпоинтов
+  xs: map-get($horizontal-breakpoints, xs);
+  sm: map-get($horizontal-breakpoints, sm);
+  md: map-get($horizontal-breakpoints, md);
+  lg: map-get($horizontal-breakpoints, lg);
+  lt: map-get($horizontal-breakpoints, lt);
+  ltm: map-get($horizontal-breakpoints, ltm);
+  ltl: map-get($horizontal-breakpoints, ltl);
+  xl: map-get($horizontal-breakpoints, xl);
+  xxl: map-get($horizontal-breakpoints, xxl);
+  qxl: map-get($horizontal-breakpoints, qxl);
+
+  // Экспорт вертикальных брейкпоинтов
+  vxs: map-get($vertical-breakpoints, xs);
+  vsm: map-get($vertical-breakpoints, sm);
+  vmd: map-get($vertical-breakpoints, md);
+  vlg: map-get($vertical-breakpoints, lg);
+  vxl: map-get($vertical-breakpoints, xl);
+  vxxl: map-get($vertical-breakpoints, xxl);
+}

package/src/scss/_horizontal.export.scss

@@ -0,0 +1,14 @@
+@import "data";
+
+:export{
+  xs:map-get($horizontal-breakpoints,xs);
+  sm:map-get($horizontal-breakpoints,sm);
+  md:map-get($horizontal-breakpoints,md);
+  lg:map-get($horizontal-breakpoints,lg);
+  lt:map-get($horizontal-breakpoints,lt);
+  ltm:map-get($horizontal-breakpoints,ltm);
+  ltl:map-get($horizontal-breakpoints,ltl);
+  xl:map-get($horizontal-breakpoints,xl);
+  xxl:map-get($horizontal-breakpoints,xxl);
+  qxl:map-get($horizontal-breakpoints,qxl);
+}

package/src/scss/_horizontal.scss

@@ -0,0 +1,118 @@
+
+@mixin mobile-first($breakpoint){
+  $breakpoint-value: map-get($horizontal-breakpoints, $breakpoint);
+  @media (min-width: #{$breakpoint-value}px) {
+    @content;
+  }
+}
+
+@mixin desktop-first($breakpoint){
+  $breakpoint-value: map-get($horizontal-breakpoints, $breakpoint);
+  @media (max-width: #{$breakpoint-value}px) {
+    @content;
+  }
+}
+
+
+@mixin m-xs(){
+  @include mobile-first(xs){
+    @content;
+  }
+}
+@mixin m-sm(){
+  @include mobile-first(sm){
+    @content;
+  }
+}
+@mixin m-md(){
+  @include mobile-first(md){
+    @content;
+  }
+}
+@mixin m-lg(){
+  @include mobile-first(lg){
+    @content;
+  }
+}
+@mixin m-lt(){
+  @include mobile-first(lt){
+    @content;
+  }
+}
+@mixin m-ltm(){
+  @include mobile-first(ltm){
+    @content;
+  }
+}
+@mixin m-ltl(){
+  @include mobile-first(ltl){
+    @content;
+  }
+}
+@mixin m-xl(){
+  @include mobile-first(xl){
+    @content;
+  }
+}
+@mixin m-xxl(){
+  @include mobile-first(xxl){
+    @content;
+  }
+}
+@mixin m-qxl(){
+  @include mobile-first(qxl){
+    @content;
+  }
+}
+
+
+@mixin d-xs(){
+  @include desktop-first(xs){
+    @content;
+  }
+}
+@mixin d-sm(){
+  @include desktop-first(sm){
+    @content;
+  }
+}
+@mixin d-md(){
+  @include desktop-first(md){
+    @content;
+  }
+}
+@mixin d-lg(){
+  @include desktop-first(lg){
+    @content;
+  }
+}
+@mixin d-lt(){
+  @include desktop-first(lt){
+    @content;
+  }
+}
+@mixin d-ltm(){
+  @include desktop-first(ltm){
+    @content;
+  }
+}
+@mixin d-ltl(){
+  @include desktop-first(ltl){
+    @content;
+  }
+}
+@mixin d-xl(){
+  @include desktop-first(xl){
+    @content;
+  }
+}
+@mixin d-xxl(){
+  @include desktop-first(xxl){
+    @content;
+  }
+}
+@mixin d-qxl(){
+  @include desktop-first(qxl){
+    @content;
+  }
+}

package/src/scss/_vertical.export.scss

@@ -0,0 +1,10 @@
+@import "data";
+
+:export{
+  xs: map-get($vertical-breakpoints, xs);
+  sm: map-get($vertical-breakpoints, sm);
+  md: map-get($vertical-breakpoints, md);
+  lg: map-get($vertical-breakpoints, lg);
+  xl: map-get($vertical-breakpoints, xl);
+  xxl: map-get($vertical-breakpoints, xxl);
+}

package/src/scss/_vertical.scss

@@ -0,0 +1,76 @@
+
+@mixin v-mobile-first($breakpoint){
+  $breakpoint-value: map-get($vertical-breakpoints, $breakpoint);
+  @media (min-height: #{$breakpoint-value}px) {
+    @content;
+  }
+}
+
+@mixin v-desktop-first($breakpoint){
+  $breakpoint-value: map-get($vertical-breakpoints, $breakpoint);
+  @media (max-height: #{$breakpoint-value}px) {
+    @content;
+  }
+}
+
+@mixin vm-xs(){
+  @include v-mobile-first(xs){
+    @content;
+  }
+}
+@mixin vm-sm(){
+  @include v-mobile-first(sm){
+    @content;
+  }
+}
+@mixin vm-md(){
+  @include v-mobile-first(md){
+    @content;
+  }
+}
+@mixin vm-lg(){
+  @include v-mobile-first(lg){
+    @content;
+  }
+}
+@mixin vm-xl(){
+  @include v-mobile-first(xl){
+    @content;
+  }
+}
+@mixin vm-xxl(){
+  @include v-mobile-first(xxl){
+    @content;
+  }
+}
+
+@mixin vd-xs(){
+  @include v-desktop-first(xs){
+    @content;
+  }
+}
+@mixin vd-sm(){
+  @include v-desktop-first(sm){
+    @content;
+  }
+}
+@mixin vd-md(){
+  @include v-desktop-first(md){
+    @content;
+  }
+}
+@mixin vd-lg(){
+  @include v-desktop-first(lg){
+    @content;
+  }
+}
+@mixin vd-xl(){
+  @include v-desktop-first(xl){
+    @content;
+  }
+}
+@mixin vd-xxl(){
+  @include v-desktop-first(xxl){
+    @content;
+  }
+}

package/src/scss/index.scss

@@ -0,0 +1,4 @@
+@import "data";
+@import "vertical";
+@import "horizontal";
+