react-responsive-tools 1.1.4 → 2.0.1

package/bin/react-responsive-tools.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const { execSync } = require('child_process');
+const path = require('path');
+
+// Полный путь к вашему скрипту
+const scriptPath = path.resolve(__dirname, '../reinit.sh');
+
+const command = process.argv[2];
+
+if (command === 'run' && process.argv[3] === 'reinit') {
+  try {
+    execSync(`sh ${scriptPath}`, { stdio: 'inherit' });
+  } catch (error) {
+    console.error('Error executing the reinit.sh script:', error);
+    process.exit(1);
+  }
+} else {
+  console.log('Usage: react-responsive-tools run reinit');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-tools",
-  "version": "1.1.4",
+  "version": "2.0.1",
   "description": "",
   "main": "index.js",
   "module": "index.js",
@@ -11,9 +11,8 @@
     "test": "jest",
     "lint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
     "lint-fix": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\" --fix",
-
-    "build": "tsc && webpack --mode production"
-
+    "build": "tsc && webpack --mode production",
+    "postinstall": "echo 'To recreate all files, run: react-responsive-tools run reinit'"
   },
   "files": [
     "src",
@@ -30,7 +29,7 @@
   ],
   "author": "westprophet",
   "license": "ISC",
-  "dependencies": {
+  "peerDependencies": {
     "react-responsive": "^10.0.0"
   },
   "devDependencies": {
@@ -69,5 +68,8 @@
     "typescript": "^5.5.4",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4"
+  },
+  "bin": {
+    "react-responsive-tools": "./bin/react-responsive-tools.js"
   }
 }

package/src/breakpoints.config.d.ts

@@ -0,0 +1,4 @@
+declare module 'breakpoints.config' {
+  export const HORIZONTAL_BREAKPOINTS: { [key: string]: string };
+  export const VERTICAL_BREAKPOINTS: { [key: string]: string };
+}

package/src/breakpoints.config.js

@@ -0,0 +1,25 @@
+
+// breakpoints.config.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

@@ -13,14 +13,14 @@ interface ForComponentProps extends Props {
   p: TBreakpoint | number;
 }
 
-export function ForMF({children, p}: ForComponentProps) {
+export function For({children, p}: ForComponentProps) {
   const is = useBreakpointMF(p);
   if (is) return children;
   return null;
 }
 
 
-export function ForDF({children ,p}: ForComponentProps) {
+export function Before({children ,p}: ForComponentProps) {
   const is = useBreakpointDF(p);
   if (is) return children;
   return null;

package/src/default.config.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/functions/getBreakpoint.ts

@@ -0,0 +1,11 @@
+// @ts-ignore
+import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from '../breakpoints.config';
+import { TBreakpoint, TVerticalBreakpoint } from '../interfaces/TBreakpoint';
+
+export default function getBreakpoint(b: TBreakpoint): string {
+    return HORIZONTAL_BREAKPOINTS[b];
+}
+
+export function getVBreakpoint(b: TVerticalBreakpoint): string {
+    return VERTICAL_BREAKPOINTS[b];
+}

package/src/hooks/useBreakpoint.ts

@@ -1,13 +1,12 @@
 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';
-import {getCSSBreakpoint} from "./getCSSVariable";
+import getBreakpoint from "../functions/getBreakpoint";
 
 export default function useBreakpoint(b: TBreakpoint | number, variant: TAdaptiveVariant = 'MtF') {
-  const _bp = typeof b === 'number' ? b + 'px' :  getCSSBreakpoint(b);
+  const _bp = typeof b === 'number' ? b + 'px' :  getBreakpoint(b);
   const v = useVariant(variant);
   return useMediaQuery({ query: `(${v}-width: ${_bp})` });
 }

package/src/hooks/useVBreakpoint.ts

@@ -3,10 +3,10 @@ import { useMediaQuery } from 'react-responsive';
 import { TVerticalBreakpoint } from '../interfaces/TBreakpoint';
 import { TAdaptiveVariant } from '../interfaces/TAdaptiveVariant';
 import useVariant from './useVariant';
-import {getCSSBreakpoint, getCSSVBreakpoint} from "./getCSSVariable";
+import getBreakpoint, {getVBreakpoint} from "../functions/getBreakpoint";
 
 export default function useVBreakpoint(b: TVerticalBreakpoint | number, variant: TAdaptiveVariant = 'MtF') {
-  const _bp = typeof b === 'number' ? b + 'px' :  getCSSVBreakpoint(b);
+  const _bp = typeof b === 'number' ? b + 'px' :  getVBreakpoint(b);
   const v = useVariant(variant);
   return useMediaQuery({ query: `(${v}-height: ${_bp})` });
 }

package/src/index.ts

@@ -1,8 +1,6 @@
 import { TBreakpoints, TVerticalBreakpoints } from './interfaces/TBreakpoints';
 import { TBreakpoint, TVerticalBreakpoint } from './interfaces/TBreakpoint';
 
-export * from 'react-responsive';
-
 export * from './hooks/useBreakpoint';
 export * from './hooks/useVBreakpoint';
 

package/src/interfaces/TBreakpoint.ts

@@ -17,5 +17,4 @@ export type TVerticalBreakpoint =
     | 'md'
     | 'lg'
     | 'xl'
-    | 'xxl'
-
+    | 'xxl'

package/src/scripts/createConfig.js

@@ -0,0 +1,49 @@
+// mergeBreakpointConfigs.js
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { HORIZONTAL_BREAKPOINTS as defaultHorizontalBreakpoints, VERTICAL_BREAKPOINTS as defaultVerticalBreakpoints } from '../default.config.js';
+
+// Определение __filename и __dirname
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Путь к пользовательскому конфигурационному файлу
+const userConfigPath = path.resolve(__dirname, '../breakpoints.config.js');
+
+// Функция объединения значений по умолчанию с пользовательскими значениями
+const mergeConfigs = (defaultConfig, userConfig) => ({
+  ...defaultConfig,
+  ...userConfig,
+});
+
+const mergeBreakpointConfigs = async () => {
+  let horizontalBreakpoints = defaultHorizontalBreakpoints;
+  let verticalBreakpoints = defaultVerticalBreakpoints;
+
+  // Проверяем, существует ли пользовательский конфигурационный файл
+  if (fs.existsSync(userConfigPath)) {
+    const userConfig = await import(userConfigPath);
+    horizontalBreakpoints = mergeConfigs(defaultHorizontalBreakpoints, userConfig.HORIZONTAL_BREAKPOINTS || {});
+    verticalBreakpoints = mergeConfigs(defaultVerticalBreakpoints, userConfig.VERTICAL_BREAKPOINTS || {});
+  }
+
+  const mergedConfigContent = `
+// breakpoints.config.js
+const HORIZONTAL_BREAKPOINTS = ${JSON.stringify(horizontalBreakpoints, null, 2)};
+
+const VERTICAL_BREAKPOINTS = ${JSON.stringify(verticalBreakpoints, null, 2)};
+
+export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS };
+`;
+
+  // Создаем новый файл с именем breakpoints.config.js
+  fs.writeFileSync(
+      path.resolve(__dirname, '../breakpoints.config.js'),
+      mergedConfigContent
+  );
+
+  console.log('Config file have been generated successfully.');
+};
+
+mergeBreakpointConfigs();

package/src/scripts/generateCustomBreakpointsSCSS.js

@@ -0,0 +1,30 @@
+// generateSCSSMaps.js
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url'; // Импортируем необходимую функцию из 'url'
+import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from '../breakpoints.config.js';
+
+// Определение __filename и __dirname
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Функция генерации SCSS map
+const generateSCSSMap = (breakpoints, name) => {
+  return `$${name}-breakpoints: (\n${Object.entries(breakpoints)
+      .map(([key, value]) => `  ${key}: ${value}`)
+      .join(',\n')}\n);`;
+};
+
+// Создаем содержимое SCSS файла
+const scssContent = `
+${generateSCSSMap(HORIZONTAL_BREAKPOINTS, 'horizontal')}
+${generateSCSSMap(VERTICAL_BREAKPOINTS, 'vertical')}
+`;
+
+// Записываем содержимое в файл _custom-breakpoints.scss
+fs.writeFileSync(
+    path.resolve(__dirname, '../scss/_custom-breakpoints.scss'),
+    scssContent
+);
+
+console.log('SCSS file with breakpoints maps has been generated successfully.');

package/src/scripts/generateSCSS.js

@@ -0,0 +1,51 @@
+// generateSCSS.js
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from '../breakpoints.config.js';
+
+// Определение __filename и __dirname
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Функция генерации SCSS содержимого для горизонтальных брейкпоинтов
+const generateHorizontalSCSS = (breakpoints) => {
+  const beforeMixins = Object.keys(breakpoints).map(bp => `@mixin for-${bp}(){\n  @include mob-first(${bp}){\n    @content;\n  }\n}`).join('\n');
+  const afterMixins = Object.keys(breakpoints).map(bp => `@mixin before-${bp}(){\n  @include desk-first(${bp}){\n    @content;\n  }\n}`).join('\n');
+  return `
+@import "horizontal";
+
+${beforeMixins}
+
+${afterMixins}
+`;
+};
+
+// Функция генерации SCSS содержимого для вертикальных брейкпоинтов
+const generateVerticalSCSS = (breakpoints) => {
+  const beforeMixins = Object.keys(breakpoints).map(bp => `@mixin v-for-${bp}(){\n  @include v-mob-first(${bp}){\n    @content;\n  }\n}`).join('\n');
+  const afterMixins = Object.keys(breakpoints).map(bp => `@mixin v-before-${bp}(){\n  @include v-desk-first(${bp}){\n    @content;\n  }\n}`).join('\n');
+  return `
+@import "vertical";
+
+${beforeMixins}
+
+${afterMixins}
+`;
+};
+
+// Создаем файлы SCSS с миксинами
+const horizontalSCSSContent = generateHorizontalSCSS(HORIZONTAL_BREAKPOINTS);
+const verticalSCSSContent = generateVerticalSCSS(VERTICAL_BREAKPOINTS);
+
+fs.writeFileSync(
+    path.resolve(__dirname, '../scss/_horizontal-breakpoints.scss'),
+    horizontalSCSSContent
+);
+
+fs.writeFileSync(
+    path.resolve(__dirname, '../scss/_vertical-breakpoints.scss'),
+    verticalSCSSContent
+);
+
+console.log('SCSS files have been generated successfully.');

package/src/scripts/generateTBreakpoint.js

@@ -0,0 +1,30 @@
+// generateTBreakpoint.js
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from '../breakpoints.config.js';
+
+// Определение __filename и __dirname
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Функция для генерации type alias на основе брейкпоинтов
+const generateTypeAlias = (breakpoints, typeName) => {
+  const types = Object.keys(breakpoints).map(bp => `    | '${bp}'`).join('\n');
+  return `export type ${typeName} =\n${types}\n`;
+};
+
+// Генерируем содержимое файла TBreakpoint.ts
+const content = `
+${generateTypeAlias(HORIZONTAL_BREAKPOINTS, 'TBreakpoint')}
+
+${generateTypeAlias(VERTICAL_BREAKPOINTS, 'TVerticalBreakpoint')}
+`;
+
+// Создаем файл TBreakpoint.ts и записываем туда содержимое
+fs.writeFileSync(
+    path.resolve(__dirname, '../interfaces/TBreakpoint.ts'),
+    content.trim()
+);
+
+console.log('TBreakpoint.ts file has been generated successfully.');

package/src/scss/_custom-breakpoints.scss

@@ -0,0 +1,21 @@
+
+$horizontal-breakpoints: (
+  xs: 320px,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  lt: 1024px,
+  ltm: 1200px,
+  ltl: 1440px,
+  xl: 1920px,
+  xxl: 2560px,
+  qxl: 3840px
+);
+$vertical-breakpoints: (
+  xs: 600px,
+  sm: 800px,
+  md: 1000px,
+  lg: 1200px,
+  xl: 1600px,
+  xxl: 1601px
+);

package/src/scss/_horizontal-breakpoints.scss

@@ -0,0 +1,104 @@
+
+@import "horizontal";
+
+@mixin for-xs(){
+  @include mob-first(xs){
+    @content;
+  }
+}
+@mixin for-sm(){
+  @include mob-first(sm){
+    @content;
+  }
+}
+@mixin for-md(){
+  @include mob-first(md){
+    @content;
+  }
+}
+@mixin for-lg(){
+  @include mob-first(lg){
+    @content;
+  }
+}
+@mixin for-lt(){
+  @include mob-first(lt){
+    @content;
+  }
+}
+@mixin for-ltm(){
+  @include mob-first(ltm){
+    @content;
+  }
+}
+@mixin for-ltl(){
+  @include mob-first(ltl){
+    @content;
+  }
+}
+@mixin for-xl(){
+  @include mob-first(xl){
+    @content;
+  }
+}
+@mixin for-xxl(){
+  @include mob-first(xxl){
+    @content;
+  }
+}
+@mixin for-qxl(){
+  @include mob-first(qxl){
+    @content;
+  }
+}
+
+@mixin before-xs(){
+  @include desk-first(xs){
+    @content;
+  }
+}
+@mixin before-sm(){
+  @include desk-first(sm){
+    @content;
+  }
+}
+@mixin before-md(){
+  @include desk-first(md){
+    @content;
+  }
+}
+@mixin before-lg(){
+  @include desk-first(lg){
+    @content;
+  }
+}
+@mixin before-lt(){
+  @include desk-first(lt){
+    @content;
+  }
+}
+@mixin before-ltm(){
+  @include desk-first(ltm){
+    @content;
+  }
+}
+@mixin before-ltl(){
+  @include desk-first(ltl){
+    @content;
+  }
+}
+@mixin before-xl(){
+  @include desk-first(xl){
+    @content;
+  }
+}
+@mixin before-xxl(){
+  @include desk-first(xxl){
+    @content;
+  }
+}
+@mixin before-qxl(){
+  @include desk-first(qxl){
+    @content;
+  }
+}

package/src/scss/_horizontal.scss

@@ -1,116 +1,15 @@
+@import "_custom-breakpoints";
 
 @mixin mob-first($breakpoint){
-  @media (min-width: var(--bp-#{$breakpoint})) {
+  @media (min-width: map-get($horizontal-breakpoints, $breakpoint)) {
     @content;
   }
 }
 
 @mixin desk-first($breakpoint){
-  @media (max-width: var(--bp-#{$breakpoint})) {
+  @media (max-width: map-get($horizontal-breakpoints, $breakpoint)) {
     @content;
   }
 }
 
 
-@mixin m-xs(){
-  @include mob-first(xs){
-    @content;
-  }
-}
-@mixin m-sm(){
-  @include mob-first(sm){
-    @content;
-  }
-}
-@mixin m-md(){
-  @include mob-first(md){
-    @content;
-  }
-}
-@mixin m-lg(){
-  @include mob-first(lg){
-    @content;
-  }
-}
-@mixin m-lt(){
-  @include mob-first(lt){
-    @content;
-  }
-}
-@mixin m-ltm(){
-  @include mob-first(ltm){
-    @content;
-  }
-}
-@mixin m-ltl(){
-  @include mob-first(ltl){
-    @content;
-  }
-}
-@mixin m-xl(){
-  @include mob-first(xl){
-    @content;
-  }
-}
-@mixin m-xxl(){
-  @include mob-first(xxl){
-    @content;
-  }
-}
-@mixin m-qxl(){
-  @include mob-first(qxl){
-    @content;
-  }
-}
-
-
-@mixin d-xs(){
-  @include desk-first(xs){
-    @content;
-  }
-}
-@mixin d-sm(){
-  @include desk-first(sm){
-    @content;
-  }
-}
-@mixin d-md(){
-  @include desk-first(md){
-    @content;
-  }
-}
-@mixin d-lg(){
-  @include desk-first(lg){
-    @content;
-  }
-}
-@mixin d-lt(){
-  @include desk-first(lt){
-    @content;
-  }
-}
-@mixin d-ltm(){
-  @include desk-first(ltm){
-    @content;
-  }
-}
-@mixin d-ltl(){
-  @include desk-first(ltl){
-    @content;
-  }
-}
-@mixin d-xl(){
-  @include desk-first(xl){
-    @content;
-  }
-}
-@mixin d-xxl(){
-  @include desk-first(xxl){
-    @content;
-  }
-}
-@mixin d-qxl(){
-  @include desk-first(qxl){
-    @content;
-  }
-}

package/src/scss/_vertical-breakpoints.scss

@@ -0,0 +1,64 @@
+
+@import "vertical";
+
+@mixin v-for-xs(){
+  @include v-mob-first(xs){
+    @content;
+  }
+}
+@mixin v-for-sm(){
+  @include v-mob-first(sm){
+    @content;
+  }
+}
+@mixin v-for-md(){
+  @include v-mob-first(md){
+    @content;
+  }
+}
+@mixin v-for-lg(){
+  @include v-mob-first(lg){
+    @content;
+  }
+}
+@mixin v-for-xl(){
+  @include v-mob-first(xl){
+    @content;
+  }
+}
+@mixin v-for-xxl(){
+  @include v-mob-first(xxl){
+    @content;
+  }
+}
+
+@mixin v-before-xs(){
+  @include v-desk-first(xs){
+    @content;
+  }
+}
+@mixin v-before-sm(){
+  @include v-desk-first(sm){
+    @content;
+  }
+}
+@mixin v-before-md(){
+  @include v-desk-first(md){
+    @content;
+  }
+}
+@mixin v-before-lg(){
+  @include v-desk-first(lg){
+    @content;
+  }
+}
+@mixin v-before-xl(){
+  @include v-desk-first(xl){
+    @content;
+  }
+}
+@mixin v-before-xxl(){
+  @include v-desk-first(xxl){
+    @content;
+  }
+}