@foxford/ui 2.0.0-beta-38ffcd6-20220707 → 2.0.0-beta-e44eaea-20220707

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.
@@ -1,2 +1,2 @@
1
- import n from'@babel/runtime/helpers/taggedTemplateLiteral';import{css as e}from'styled-components';import{screenMaxXxs as r,screenMaxXs as t,screenMaxS as a,screenMaxM as o,screenMaxL as s,screenMinL as i,screenMinM as c}from'./screen.js';import{buildMediaQuery as l,SIZES_LATIN as u,FONT_SIZES_LATIN as p}from'./shared.js';var f,d,v,m,y,b,x,S,h;var X=function(n,r,t){var a=arguments.length>1&&void 0!==r?r:'size';var o=arguments.length>2&&void 0!==t?t:'px';return()=>()=>{return'boolean'==typeof n?'function'==typeof a?a(1):null:(r='font-size'===a?p:u,'function'==typeof a?a('number'==typeof n?n:r[n]):'string'==typeof n&&['auto','initial','inherit'].includes(n)?e(["",":",";"],a,n):e(["",":","",";"],a,'string'==typeof n&&r[n]?r[n]:n,o));var r}};var M={XXS:r,XS:t,S:a,M:o,L:s,XL:i};var L={desktop:c,tablet:o,mobile:a};var g=n=>n.endsWith('XS')?'xs':n.endsWith('S')?'s':n.endsWith('M')?'m':n.endsWith('XL')?'xl':n.endsWith('L')?'l':null;var W=['xl','l','m','s','xs'];var I=['xs','s','m','l','xl'];var z=(n,e)=>{var r=g(n);var t=g(e);return r&&t?W.findIndex((n=>n===r))<W.findIndex((n=>n===t))?-1:1:0};var A=(n,e)=>{var r=g(n);var t=g(e);return r&&t?I.findIndex((n=>n===r))<I.findIndex((n=>n===t))?-1:1:0};var k=n=>{var{sizes:r,cssProperty:t="size",sizing:a="px",customSizeHandler:o,sort:s=z}=n;return()=>()=>Object.keys(r).sort(s).map((n=>{if(r[n]){var e='function'==typeof o?o(r[n]):r[n];return l(e,t,(n=>n.endsWith('XXS')?M.XXS:n.endsWith('XS')?M.XS:n.endsWith('S')?M.S:n.endsWith('M')?M.M:n.endsWith('L')?M.L:M.XL)(n),a)}return null})).filter(Boolean).map((n=>e(["",""],n)))};var N=function(r,t,a){var o=arguments.length>1&&void 0!==t?t:null;var s=arguments.length>2&&void 0!==a?a:'px';return()=>t=>{var a;var i=null!==(a=t[r])&&void 0!==a?a:null;var c=null!=o?o:r;if(!i)return null;if(Array.isArray(i)&&3===i.length){var[l,u,p]=i;return e([""," "," ",""],L.desktop()(f||(f=n(["\n ",": ",";\n "])),c,'number'==typeof l?"".concat(l).concat(s):l),L.tablet()(d||(d=n(["\n ",": ",";\n "])),c,'number'==typeof u?"".concat(u).concat(s):u),L.mobile()(v||(v=n(["\n ",": ",";\n "])),c,'number'==typeof p?"".concat(p).concat(s):p))}if(Array.isArray(i)&&6===i.length&&'string'==typeof c){var[X,g,W,I,z,A]=i;return e([""," "," "," "," "," ",""],M.XL()(m||(m=n(["\n ",": ",";\n "])),c,'number'==typeof X?"".concat(X).concat(s):X),M.L()(y||(y=n(["\n ",": ",";\n "])),c,'number'==typeof g?"".concat(g).concat(s):g),M.M()(b||(b=n(["\n ",": ",";\n "])),c,'number'==typeof W?"".concat(W).concat(s):W),M.S()(x||(x=n(["\n ",": ",";\n "])),c,'number'==typeof I?"".concat(I).concat(s):I),M.XS()(S||(S=n(["\n ",": ",";\n "])),c,'number'==typeof z?"".concat(z).concat(s):z),M.XXS()(h||(h=n(["\n ",": ",";\n "])),c,'number'==typeof A?"".concat(A).concat(s):A))}return'number'==typeof i?e(["",":","",";"],c,i,s):'string'==typeof i?e(["",":",";"],c,i):null}};export{z as desktopFirst,A as mobileFirst,X as property,k as responsiveNamedProperty,N as responsiveProperty};
1
+ import n from'@babel/runtime/helpers/taggedTemplateLiteral';import{css as e}from'styled-components';import{screenMaxXxs as r,screenMaxXs as t,screenMaxS as a,screenMaxM as o,screenMaxL as s,screenMinL as l,screenMinM as i}from'./screen.js';import{buildMediaQuery as u,SIZES_LATIN as c,FONT_SIZES_LATIN as p}from'./shared.js';var f,d,v,m,y,b,x,S,h;var X=function(n,r,t){var a=arguments.length>1&&void 0!==r?r:'size';var o=arguments.length>2&&void 0!==t?t:'px';return()=>()=>{return'boolean'==typeof n?'function'==typeof a?a(1):null:(r='font-size'===a?p:c,'function'==typeof a?a('number'==typeof n?n:r[n]):'string'==typeof n&&['auto','initial','inherit'].includes(n)?e(["",":",";"],a,n):e(["",":","",";"],a,'string'==typeof n&&r[n]?r[n]:n,null!=o?o:''));var r}};var M={XXS:r,XS:t,S:a,M:o,L:s,XL:l};var L={desktop:i,tablet:o,mobile:a};var g=n=>n.endsWith('XS')?'xs':n.endsWith('S')?'s':n.endsWith('M')?'m':n.endsWith('XL')?'xl':n.endsWith('L')?'l':null;var W=['xl','l','m','s','xs'];var I=['xs','s','m','l','xl'];var z=(n,e)=>{var r=g(n);var t=g(e);return r&&t?W.findIndex((n=>n===r))<W.findIndex((n=>n===t))?-1:1:0};var A=(n,e)=>{var r=g(n);var t=g(e);return r&&t?I.findIndex((n=>n===r))<I.findIndex((n=>n===t))?-1:1:0};var k=n=>{var{sizes:r,cssProperty:t="size",sizing:a="px",customSizeHandler:o,sort:s=z}=n;return()=>()=>Object.keys(r).sort(s).map((n=>{if(r[n]){var e='function'==typeof o?o(r[n]):r[n];return u(e,t,(n=>n.endsWith('XXS')?M.XXS:n.endsWith('XS')?M.XS:n.endsWith('S')?M.S:n.endsWith('M')?M.M:n.endsWith('L')?M.L:M.XL)(n),null!=a?a:'')}return null})).filter(Boolean).map((n=>e(["",""],n)))};var N=function(r,t,a){var o=arguments.length>1&&void 0!==t?t:null;var s=arguments.length>2&&void 0!==a?a:'px';return()=>t=>{var a;var l=null!==(a=t[r])&&void 0!==a?a:null;var i=null!=o?o:r;if(!l)return null;if(Array.isArray(l)&&3===l.length){var[u,c,p]=l;return e([""," "," ",""],L.desktop()(f||(f=n(["\n ",": ",";\n "])),i,'number'==typeof u?"".concat(u).concat(null!=s?s:''):u),L.tablet()(d||(d=n(["\n ",": ",";\n "])),i,'number'==typeof c?"".concat(c).concat(null!=s?s:''):c),L.mobile()(v||(v=n(["\n ",": ",";\n "])),i,'number'==typeof p?"".concat(p).concat(null!=s?s:''):p))}if(Array.isArray(l)&&6===l.length&&'string'==typeof i){var[X,g,W,I,z,A]=l;return e([""," "," "," "," "," ",""],M.XL()(m||(m=n(["\n ",": ",";\n "])),i,'number'==typeof X?"".concat(X).concat(null!=s?s:''):X),M.L()(y||(y=n(["\n ",": ",";\n "])),i,'number'==typeof g?"".concat(g).concat(null!=s?s:''):g),M.M()(b||(b=n(["\n ",": ",";\n "])),i,'number'==typeof W?"".concat(W).concat(null!=s?s:''):W),M.S()(x||(x=n(["\n ",": ",";\n "])),i,'number'==typeof I?"".concat(I).concat(null!=s?s:''):I),M.XS()(S||(S=n(["\n ",": ",";\n "])),i,'number'==typeof z?"".concat(z).concat(null!=s?s:''):z),M.XXS()(h||(h=n(["\n ",": ",";\n "])),i,'number'==typeof A?"".concat(A).concat(null!=s?s:''):A))}return'number'==typeof l?e(["",":","",";"],i,l,null!=s?s:null):'string'==typeof l?e(["",":",";"],i,l):null}};export{z as desktopFirst,A as mobileFirst,X as property,k as responsiveNamedProperty,N as responsiveProperty};
2
2
  //# sourceMappingURL=responsive-property.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"responsive-property.js","sources":["../../../src/mixins/responsive-property.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { SizeLatin } from './enums/sizeLatin'\nimport { screenMaxL, screenMaxM, screenMaxS, screenMaxXs, screenMinL, screenMaxXxs, screenMinM } from './screen'\nimport { buildMediaQuery, FONT_SIZES_LATIN, SIZES_LATIN } from './shared'\n\n/**\n * Value for breakpoint\n */\nexport type PossibleValues = number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean\n\ntype PropsProperties =\n | 'size'\n | 'fontSize'\n | 'height'\n | 'width'\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'padding'\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'margin'\n | 'marginTop'\n | 'marginRight'\n | 'marginBottom'\n | 'marginLeft'\n | 'fluid'\n\nexport type CalcProperty = (_size: number, _sizing?: string) => FlattenSimpleInterpolation | null\ntype CssProperty = string | CalcProperty\ntype ResponsiveKeys = '' | 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL'\n\nexport type ResponsiveNamedProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {\n /**\n * Size for breakpoint\n */\n [key in `${T}${ResponsiveKeys}`]?: V // eslint-disable-line no-unused-vars\n}\n\nexport type ResponsiveProperty<V = number | string | keyof typeof SizeLatin> =\n | V\n | [desktop: V, tablet: V, mobile: V]\n | [xl: V, l: V, m: V, s: V, xs: V, xxs: V]\n\nexport const property =\n (value: PossibleValues, cssProperty: CssProperty = 'size', sizing = 'px') =>\n () =>\n () => {\n if (typeof value === 'boolean') {\n return typeof cssProperty === 'function' ? cssProperty(1) : null\n }\n\n let sizeMap\n\n switch (cssProperty) {\n case 'font-size':\n sizeMap = FONT_SIZES_LATIN\n break\n default:\n sizeMap = SIZES_LATIN\n }\n\n if (typeof cssProperty === 'function') {\n return cssProperty(typeof value === 'number' ? value : sizeMap[value])\n }\n\n if (typeof value === 'string' && ['auto', 'initial', 'inherit'].includes(value))\n return css`\n ${cssProperty}: ${value};\n `\n\n return css`\n ${cssProperty}: ${typeof value === 'string' && sizeMap[value] ? sizeMap[value] : value}${sizing};\n `\n }\n\nconst SCREEN_SIZE_MAP: Record<Exclude<ResponsiveKeys, ''>, typeof screenMaxXs> = {\n XXS: screenMaxXxs,\n XS: screenMaxXs,\n S: screenMaxS,\n M: screenMaxM,\n L: screenMaxL,\n XL: screenMinL,\n}\n\nconst SCREEN_SIZE_MAP_BY_DEVICE_ALIAS: Record<'desktop' | 'tablet' | 'mobile', typeof screenMaxXs> = {\n desktop: screenMinM,\n tablet: screenMaxM,\n mobile: screenMaxS,\n}\n\nfunction getScreenFnByResponsiveKey(size: string) {\n if (size.endsWith('XXS')) {\n return SCREEN_SIZE_MAP.XXS\n } else if (size.endsWith('XS')) {\n return SCREEN_SIZE_MAP.XS\n } else if (size.endsWith('S')) {\n return SCREEN_SIZE_MAP.S\n } else if (size.endsWith('M')) {\n return SCREEN_SIZE_MAP.M\n } else if (size.endsWith('L')) {\n return SCREEN_SIZE_MAP.L\n } else {\n return SCREEN_SIZE_MAP.XL\n }\n}\n\nconst getKey = (key: string): 'xs' | 's' | 'm' | 'l' | 'xl' | null => {\n if (key.endsWith('XS')) return 'xs' // first check XS\n if (key.endsWith('S')) return 's'\n if (key.endsWith('M')) return 'm'\n if (key.endsWith('XL')) return 'xl' // first check XL\n if (key.endsWith('L')) return 'l'\n return null\n}\n\nconst DEKSTOP_FIRST_KEYS = ['xl', 'l', 'm', 's', 'xs']\nconst MOBILE_FIRST_KEYS = ['xs', 's', 'm', 'l', 'xl']\n\n/**\n * Sort keys as desktop first\n * @param a key a\n * @param b key b\n * @returns number\n */\nexport const desktopFirst = (a: string, b: string): number => {\n const aKey = getKey(a)\n const bKey = getKey(b)\n if (!aKey || !bKey) return 0\n\n const aIndex = DEKSTOP_FIRST_KEYS.findIndex((el) => el === aKey)\n const bIndex = DEKSTOP_FIRST_KEYS.findIndex((el) => el === bKey)\n\n return aIndex < bIndex ? -1 : 1\n}\n\n/**\n * Sort keys as mobile first\n * @param a key a\n * @param b key b\n * @returns number\n */\nexport const mobileFirst = (a: string, b: string): number => {\n const aKey = getKey(a)\n const bKey = getKey(b)\n if (!aKey || !bKey) return 0\n\n const aIndex = MOBILE_FIRST_KEYS.findIndex((el) => el === aKey)\n const bIndex = MOBILE_FIRST_KEYS.findIndex((el) => el === bKey)\n\n return aIndex < bIndex ? -1 : 1\n}\n\ninterface ResponsiveNamedPropertyPayload<T extends PropsProperties> {\n sizes: ResponsiveNamedProperty<T>\n cssProperty: CssProperty\n sizing?: 'px' | 'rem' | 'em' | '%'\n customSizeHandler?: (_value: PossibleValues) => PossibleValues\n sort?: (_a: string, _b: string) => number\n}\n\n/**\n * Миксин для генерации media запросов\n *\n * @param obj.sizes Объект, в качестве ключей брэйкпоинт, в качестве значений - величина\n * @param obj.cssProperty CSS свойство, может быть функцией, возвращающей css`` из styled-components\n * @param obj.sizing значение величины, по умолчанию `px`\n * @param obj.customSizeHandler функция для вычисления кастомных значений величин\n * @returns строки медиазапросов\n */\nexport const responsiveNamedProperty =\n <T extends PropsProperties>({\n sizes,\n cssProperty = 'size',\n sizing = 'px',\n customSizeHandler,\n sort = desktopFirst,\n }: ResponsiveNamedPropertyPayload<T>) =>\n () =>\n () => {\n const mediaCssStrArr = Object.keys(sizes)\n .sort(sort)\n .map((size) => {\n if (sizes[size]) {\n const _size = typeof customSizeHandler === 'function' ? customSizeHandler(sizes[size]) : sizes[size]\n return buildMediaQuery(_size, cssProperty, getScreenFnByResponsiveKey(size), sizing)\n }\n return null\n })\n .filter(Boolean)\n .map(\n (item) =>\n css`\n ${item}\n `\n )\n\n return mediaCssStrArr\n }\n\n/**\n * Миксин для генерации media запросов\n *\n * @param property имя пропсы\n * @param cssProperty имя css свойства\n * @param sizing значение величины, по умолчанию `px`\n * @returns строки медиазапросов\n */\nexport const responsiveProperty =\n (property: string, cssProperty: string | null = null, sizing = 'px') =>\n () =>\n (props: any) => {\n const prop: ResponsiveProperty | null = props[property] ?? null\n const _cssProperty = cssProperty ?? property\n if (!prop) return null\n\n if (Array.isArray(prop) && prop.length === 3) {\n const [desktop, tablet, mobile] = prop\n return css`\n ${SCREEN_SIZE_MAP_BY_DEVICE_ALIAS.desktop()`\n ${_cssProperty}: ${typeof desktop === 'number' ? `${desktop}${sizing}` : desktop};\n `}\n ${SCREEN_SIZE_MAP_BY_DEVICE_ALIAS.tablet()`\n ${_cssProperty}: ${typeof tablet === 'number' ? `${tablet}${sizing}` : tablet};\n `}\n ${SCREEN_SIZE_MAP_BY_DEVICE_ALIAS.mobile()`\n ${_cssProperty}: ${typeof mobile === 'number' ? `${mobile}${sizing}` : mobile};\n `}\n `\n }\n\n if (Array.isArray(prop) && prop.length === 6 && typeof _cssProperty === 'string') {\n const [xl, l, m, s, xs, xxs] = prop\n return css`\n ${SCREEN_SIZE_MAP.XL()`\n ${_cssProperty}: ${typeof xl === 'number' ? `${xl}${sizing}` : xl};\n `}\n ${SCREEN_SIZE_MAP.L()`\n ${_cssProperty}: ${typeof l === 'number' ? `${l}${sizing}` : l};\n `}\n ${SCREEN_SIZE_MAP.M()`\n ${_cssProperty}: ${typeof m === 'number' ? `${m}${sizing}` : m};\n `}\n ${SCREEN_SIZE_MAP.S()`\n ${_cssProperty}: ${typeof s === 'number' ? `${s}${sizing}` : s};\n `}\n ${SCREEN_SIZE_MAP.XS()`\n ${_cssProperty}: ${typeof xs === 'number' ? `${xs}${sizing}` : xs};\n `}\n ${SCREEN_SIZE_MAP.XXS()`\n ${_cssProperty}: ${typeof xxs === 'number' ? `${xxs}${sizing}` : xxs};\n `}\n `\n }\n\n if (typeof prop === 'number') {\n return css`\n ${_cssProperty}: ${prop}${sizing};\n `\n }\n\n if (typeof prop === 'string') {\n return css`\n ${_cssProperty}: ${prop};\n `\n }\n\n return null\n }\n"],"names":["property","value","e","r","cssProperty","sizing","sizeMap","FONT_SIZES_LATIN","SIZES_LATIN","includes","css","SCREEN_SIZE_MAP","XXS","screenMaxXxs","XS","screenMaxXs","S","screenMaxS","M","screenMaxM","L","screenMaxL","XL","screenMinL","SCREEN_SIZE_MAP_BY_DEVICE_ALIAS","desktop","screenMinM","tablet","mobile","getKey","key","endsWith","DEKSTOP_FIRST_KEYS","MOBILE_FIRST_KEYS","desktopFirst","a","b","aKey","bKey","findIndex","el","mobileFirst","responsiveNamedProperty","_ref","sizes","customSizeHandler","sort","Object","keys","map","size","_size","buildMediaQuery","filter","Boolean","item","responsiveProperty","o","props","_props$property","prop","_cssProperty","Array","isArray","length","_templateObject2","_taggedTemplateLiteral","concat","xl","l","m","s","xs","xxs","_templateObject6","_templateObject7"],"mappings":"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"}
1
+ {"version":3,"file":"responsive-property.js","sources":["../../../src/mixins/responsive-property.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { SizeLatin } from './enums/sizeLatin'\nimport { screenMaxL, screenMaxM, screenMaxS, screenMaxXs, screenMinL, screenMaxXxs, screenMinM } from './screen'\nimport { buildMediaQuery, FONT_SIZES_LATIN, SIZES_LATIN } from './shared'\n\n/**\n * Value for breakpoint\n */\nexport type PossibleValues = number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean\n\ntype PropsProperties =\n | 'size'\n | 'fontSize'\n | 'height'\n | 'width'\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'padding'\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'margin'\n | 'marginTop'\n | 'marginRight'\n | 'marginBottom'\n | 'marginLeft'\n | 'fluid'\n\nexport type CalcProperty = (_size: number, _sizing?: null | string) => FlattenSimpleInterpolation | null\ntype CssProperty = string | CalcProperty\ntype ResponsiveKeys = '' | 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL'\n\nexport type ResponsiveNamedProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {\n /**\n * Size for breakpoint\n */\n [key in `${T}${ResponsiveKeys}`]?: V // eslint-disable-line no-unused-vars\n}\n\nexport type ResponsiveProperty<V = number | string | keyof typeof SizeLatin> =\n | V\n | [desktop: V, tablet: V, mobile: V]\n | [xl: V, l: V, m: V, s: V, xs: V, xxs: V]\n\nexport const property =\n (value: PossibleValues, cssProperty: CssProperty = 'size', sizing: null | string = 'px') =>\n () =>\n () => {\n if (typeof value === 'boolean') {\n return typeof cssProperty === 'function' ? cssProperty(1) : null\n }\n\n let sizeMap\n\n switch (cssProperty) {\n case 'font-size':\n sizeMap = FONT_SIZES_LATIN\n break\n default:\n sizeMap = SIZES_LATIN\n }\n\n if (typeof cssProperty === 'function') {\n return cssProperty(typeof value === 'number' ? value : sizeMap[value])\n }\n\n if (typeof value === 'string' && ['auto', 'initial', 'inherit'].includes(value))\n return css`\n ${cssProperty}: ${value};\n `\n\n return css`\n ${cssProperty}: ${typeof value === 'string' && sizeMap[value] ? sizeMap[value] : value}${sizing ?? ''};\n `\n }\n\nconst SCREEN_SIZE_MAP: Record<Exclude<ResponsiveKeys, ''>, typeof screenMaxXs> = {\n XXS: screenMaxXxs,\n XS: screenMaxXs,\n S: screenMaxS,\n M: screenMaxM,\n L: screenMaxL,\n XL: screenMinL,\n}\n\nconst SCREEN_SIZE_MAP_BY_DEVICE_ALIAS: Record<'desktop' | 'tablet' | 'mobile', typeof screenMaxXs> = {\n desktop: screenMinM,\n tablet: screenMaxM,\n mobile: screenMaxS,\n}\n\nfunction getScreenFnByResponsiveKey(size: string) {\n if (size.endsWith('XXS')) {\n return SCREEN_SIZE_MAP.XXS\n } else if (size.endsWith('XS')) {\n return SCREEN_SIZE_MAP.XS\n } else if (size.endsWith('S')) {\n return SCREEN_SIZE_MAP.S\n } else if (size.endsWith('M')) {\n return SCREEN_SIZE_MAP.M\n } else if (size.endsWith('L')) {\n return SCREEN_SIZE_MAP.L\n } else {\n return SCREEN_SIZE_MAP.XL\n }\n}\n\nconst getKey = (key: string): 'xs' | 's' | 'm' | 'l' | 'xl' | null => {\n if (key.endsWith('XS')) return 'xs' // first check XS\n if (key.endsWith('S')) return 's'\n if (key.endsWith('M')) return 'm'\n if (key.endsWith('XL')) return 'xl' // first check XL\n if (key.endsWith('L')) return 'l'\n return null\n}\n\nconst DEKSTOP_FIRST_KEYS = ['xl', 'l', 'm', 's', 'xs']\nconst MOBILE_FIRST_KEYS = ['xs', 's', 'm', 'l', 'xl']\n\n/**\n * Sort keys as desktop first\n * @param a key a\n * @param b key b\n * @returns number\n */\nexport const desktopFirst = (a: string, b: string): number => {\n const aKey = getKey(a)\n const bKey = getKey(b)\n if (!aKey || !bKey) return 0\n\n const aIndex = DEKSTOP_FIRST_KEYS.findIndex((el) => el === aKey)\n const bIndex = DEKSTOP_FIRST_KEYS.findIndex((el) => el === bKey)\n\n return aIndex < bIndex ? -1 : 1\n}\n\n/**\n * Sort keys as mobile first\n * @param a key a\n * @param b key b\n * @returns number\n */\nexport const mobileFirst = (a: string, b: string): number => {\n const aKey = getKey(a)\n const bKey = getKey(b)\n if (!aKey || !bKey) return 0\n\n const aIndex = MOBILE_FIRST_KEYS.findIndex((el) => el === aKey)\n const bIndex = MOBILE_FIRST_KEYS.findIndex((el) => el === bKey)\n\n return aIndex < bIndex ? -1 : 1\n}\n\ninterface ResponsiveNamedPropertyPayload<T extends PropsProperties> {\n sizes: ResponsiveNamedProperty<T>\n cssProperty: CssProperty\n sizing?: null | 'px' | 'rem' | 'em' | '%'\n customSizeHandler?: (_value: PossibleValues) => PossibleValues\n sort?: (_a: string, _b: string) => number\n}\n\n/**\n * Миксин для генерации media запросов\n *\n * @param obj.sizes Объект, в качестве ключей брэйкпоинт, в качестве значений - величина\n * @param obj.cssProperty CSS свойство, может быть функцией, возвращающей css`` из styled-components\n * @param obj.sizing значение величины, по умолчанию `px`\n * @param obj.customSizeHandler функция для вычисления кастомных значений величин\n * @returns строки медиазапросов\n */\nexport const responsiveNamedProperty =\n <T extends PropsProperties>({\n sizes,\n cssProperty = 'size',\n sizing = 'px',\n customSizeHandler,\n sort = desktopFirst,\n }: ResponsiveNamedPropertyPayload<T>) =>\n () =>\n () => {\n const mediaCssStrArr = Object.keys(sizes)\n .sort(sort)\n .map((size) => {\n if (sizes[size]) {\n const _size = typeof customSizeHandler === 'function' ? customSizeHandler(sizes[size]) : sizes[size]\n return buildMediaQuery(_size, cssProperty, getScreenFnByResponsiveKey(size), sizing ?? '')\n }\n return null\n })\n .filter(Boolean)\n .map(\n (item) =>\n css`\n ${item}\n `\n )\n\n return mediaCssStrArr\n }\n\n/**\n * Миксин для генерации media запросов\n *\n * @param property имя пропсы\n * @param cssProperty имя css свойства\n * @param sizing значение величины, по умолчанию `px`\n * @returns строки медиазапросов\n */\nexport const responsiveProperty =\n (property: string, cssProperty: string | null = null, sizing: null | string = 'px') =>\n () =>\n (props: any) => {\n const prop: ResponsiveProperty | null = props[property] ?? null\n const _cssProperty = cssProperty ?? property\n if (!prop) return null\n\n if (Array.isArray(prop) && prop.length === 3) {\n const [desktop, tablet, mobile] = prop\n return css`\n ${SCREEN_SIZE_MAP_BY_DEVICE_ALIAS.desktop()`\n ${_cssProperty}: ${typeof desktop === 'number' ? `${desktop}${sizing ?? ''}` : desktop};\n `}\n ${SCREEN_SIZE_MAP_BY_DEVICE_ALIAS.tablet()`\n ${_cssProperty}: ${typeof tablet === 'number' ? `${tablet}${sizing ?? ''}` : tablet};\n `}\n ${SCREEN_SIZE_MAP_BY_DEVICE_ALIAS.mobile()`\n ${_cssProperty}: ${typeof mobile === 'number' ? `${mobile}${sizing ?? ''}` : mobile};\n `}\n `\n }\n\n if (Array.isArray(prop) && prop.length === 6 && typeof _cssProperty === 'string') {\n const [xl, l, m, s, xs, xxs] = prop\n return css`\n ${SCREEN_SIZE_MAP.XL()`\n ${_cssProperty}: ${typeof xl === 'number' ? `${xl}${sizing ?? ''}` : xl};\n `}\n ${SCREEN_SIZE_MAP.L()`\n ${_cssProperty}: ${typeof l === 'number' ? `${l}${sizing ?? ''}` : l};\n `}\n ${SCREEN_SIZE_MAP.M()`\n ${_cssProperty}: ${typeof m === 'number' ? `${m}${sizing ?? ''}` : m};\n `}\n ${SCREEN_SIZE_MAP.S()`\n ${_cssProperty}: ${typeof s === 'number' ? `${s}${sizing ?? ''}` : s};\n `}\n ${SCREEN_SIZE_MAP.XS()`\n ${_cssProperty}: ${typeof xs === 'number' ? `${xs}${sizing ?? ''}` : xs};\n `}\n ${SCREEN_SIZE_MAP.XXS()`\n ${_cssProperty}: ${typeof xxs === 'number' ? `${xxs}${sizing ?? ''}` : xxs};\n `}\n `\n }\n\n if (typeof prop === 'number') {\n return css`\n ${_cssProperty}: ${prop}${sizing ?? null};\n `\n }\n\n if (typeof prop === 'string') {\n return css`\n ${_cssProperty}: ${prop};\n `\n }\n\n return null\n }\n"],"names":["property","value","e","r","cssProperty","sizing","sizeMap","FONT_SIZES_LATIN","SIZES_LATIN","includes","css","SCREEN_SIZE_MAP","XXS","screenMaxXxs","XS","screenMaxXs","S","screenMaxS","M","screenMaxM","L","screenMaxL","XL","screenMinL","SCREEN_SIZE_MAP_BY_DEVICE_ALIAS","desktop","screenMinM","tablet","mobile","getKey","key","endsWith","DEKSTOP_FIRST_KEYS","MOBILE_FIRST_KEYS","desktopFirst","a","b","aKey","bKey","findIndex","el","mobileFirst","responsiveNamedProperty","_ref","sizes","customSizeHandler","sort","Object","keys","map","size","_size","buildMediaQuery","filter","Boolean","item","responsiveProperty","o","props","_props$property","prop","_cssProperty","Array","isArray","length","_templateObject","_taggedTemplateLiteral","concat","_templateObject2","_templateObject3","xl","l","m","s","xs","xxs","_templateObject4","_templateObject6","_templateObject9"],"mappings":"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"}
package/mixins/shared.js CHANGED
@@ -1,2 +1,2 @@
1
- import e from'@babel/runtime/helpers/taggedTemplateLiteral';import{css as x}from'styled-components';var r,t;var a=Object.freeze({xxxl:44,xxl:40,xl:36,l:28,m:24,s:20,xs:16,xxs:8,xxxs:4});var s=Object.freeze({xxxl:24,xxl:22,xl:20,l:18,m:16,s:14,xs:12,xxs:10,xxxs:8});function n(e){return'string'==typeof e&&a[e]?a[e]:e}function l(a,s,l,i){var o=arguments.length>3&&void 0!==i?i:'px';var f=n(a);if('function'==typeof s){var u=s(f,o);return x(["",""],l()(r||(r=e(["\n ","\n "])),u))}return x(["",""],l()(t||(t=e(["\n ",": ","",";\n "])),s,n(a),o))}export{s as FONT_SIZES_LATIN,a as SIZES_LATIN,l as buildMediaQuery,n as calcValueWithLatinAlias};
1
+ import e from'@babel/runtime/helpers/taggedTemplateLiteral';import{css as x}from'styled-components';var r,t;var s=Object.freeze({xxxl:44,xxl:40,xl:36,l:28,m:24,s:20,xs:16,xxs:8,xxxs:4});var a=Object.freeze({xxxl:24,xxl:22,xl:20,l:18,m:16,s:14,xs:12,xxs:10,xxxs:8});function n(e){return'string'==typeof e&&s[e]?s[e]:e}function l(s,a,l,i){var o=n(s);if('function'==typeof a){var f=a(o,i);return x(["",""],l()(r||(r=e(["\n ","\n "])),f))}return x(["",""],l()(t||(t=e(["\n ",": ","",";\n "])),a,n(s),i))}export{a as FONT_SIZES_LATIN,s as SIZES_LATIN,l as buildMediaQuery,n as calcValueWithLatinAlias};
2
2
  //# sourceMappingURL=shared.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"shared.js","sources":["../../../src/mixins/shared.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { SizeLatin } from './enums/sizeLatin'\nimport { screenXs } from './screen'\n\nexport const SIZES_LATIN: Readonly<Record<SizeLatin, number>> = Object.freeze({\n xxxl: 44,\n xxl: 40,\n xl: 36,\n l: 28,\n m: 24,\n s: 20,\n xs: 16,\n xxs: 8,\n xxxs: 4,\n})\n\n// eslint-disable-next-line no-unused-vars\nexport const FONT_SIZES_LATIN: Readonly<Record<SizeLatin, number>> = Object.freeze({\n xxxl: 24,\n xxl: 22,\n xl: 20,\n l: 18,\n m: 16,\n s: 14,\n xs: 12,\n xxs: 10,\n xxxs: 8,\n})\n\n/**\n *\n * @param {number | keyof typeof SizeLatin} value\n * @returns\n */\nexport function calcValueWithLatinAlias(value: number | keyof typeof SizeLatin): number {\n if (typeof value === 'string' && SIZES_LATIN[value]) return SIZES_LATIN[value]\n\n return value as number\n}\n\nexport function buildMediaQuery(\n value: number | keyof typeof SizeLatin,\n property: string | ((_size: number, _sizing?: string) => FlattenSimpleInterpolation | null),\n screenQueryFunction: typeof screenXs,\n sizing = 'px'\n): ReturnType<typeof css> {\n const size = calcValueWithLatinAlias(value)\n\n if (typeof property === 'function') {\n const value = property(size, sizing)\n return css`\n ${screenQueryFunction()`\n ${value}\n `}\n `\n }\n\n return css`\n ${screenQueryFunction()`\n ${property}: ${calcValueWithLatinAlias(value)}${sizing};\n `}\n `\n}\n"],"names":["SIZES_LATIN","Object","freeze","xxxl","xxl","xl","l","m","s","xs","xxs","xxxs","FONT_SIZES_LATIN","calcValueWithLatinAlias","value","buildMediaQuery","property","screenQueryFunction","a","sizing","size","css"],"mappings":"gHAIaA,EAAmDC,OAAOC,OAAO,CAC5EC,KAAM,GACNC,IAAK,GACLC,GAAI,GACJC,EAAG,GACHC,EAAG,GACHC,EAAG,GACHC,GAAI,GACJC,IAAK,EACLC,KAAM,QAIKC,EAAwDX,OAAOC,OAAO,CACjFC,KAAM,GACNC,IAAK,GACLC,GAAI,GACJC,EAAG,GACHC,EAAG,GACHC,EAAG,GACHC,GAAI,GACJC,IAAK,GACLC,KAAM,IAQD,SAASE,EAAwBC,GACtC,MAAqB,iBAAVA,GAAsBd,EAAYc,GAAed,EAAYc,GAEjEA,EAGF,SAASC,EACdD,EACAE,EACAC,EAHKC,GAKmB,IADxBC,+BAJKD,EAAAA,EAII,KAET,IAAME,EAAOP,EAAwBC,GAErC,GAAwB,mBAAbE,EAAyB,CAClC,IAAMF,EAAQE,EAASI,EAAMD,GAC7B,OAAOE,EAAP,CAAA,GAAA,IACIJ,GAAAA,qCACEH,IAKR,OAAOO,EAAP,CAAA,GAAA,IACIJ,GAAAA,CACED,IAAAA,EAAAA,EAAAA,CAAAA,WAAAA,KAAAA,GAAAA,aAAAA,EAAaH,EAAwBC,GAASK"}
1
+ {"version":3,"file":"shared.js","sources":["../../../src/mixins/shared.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { SizeLatin } from './enums/sizeLatin'\nimport { screenXs } from './screen'\n\nexport const SIZES_LATIN: Readonly<Record<SizeLatin, number>> = Object.freeze({\n xxxl: 44,\n xxl: 40,\n xl: 36,\n l: 28,\n m: 24,\n s: 20,\n xs: 16,\n xxs: 8,\n xxxs: 4,\n})\n\n// eslint-disable-next-line no-unused-vars\nexport const FONT_SIZES_LATIN: Readonly<Record<SizeLatin, number>> = Object.freeze({\n xxxl: 24,\n xxl: 22,\n xl: 20,\n l: 18,\n m: 16,\n s: 14,\n xs: 12,\n xxs: 10,\n xxxs: 8,\n})\n\n/**\n *\n * @param {number | keyof typeof SizeLatin} value\n * @returns\n */\nexport function calcValueWithLatinAlias(value: number | keyof typeof SizeLatin): number {\n if (typeof value === 'string' && SIZES_LATIN[value]) return SIZES_LATIN[value]\n\n return value as number\n}\n\nexport function buildMediaQuery(\n value: number | keyof typeof SizeLatin,\n property: string | ((_size: number, _sizing?: null | string) => FlattenSimpleInterpolation | null),\n screenQueryFunction: typeof screenXs,\n sizing: null | string\n): ReturnType<typeof css> {\n const size = calcValueWithLatinAlias(value)\n\n if (typeof property === 'function') {\n const value = property(size, sizing)\n return css`\n ${screenQueryFunction()`\n ${value}\n `}\n `\n }\n\n return css`\n ${screenQueryFunction()`\n ${property}: ${calcValueWithLatinAlias(value)}${sizing};\n `}\n `\n}\n"],"names":["SIZES_LATIN","Object","freeze","xxxl","xxl","xl","l","m","s","xs","xxs","xxxs","FONT_SIZES_LATIN","calcValueWithLatinAlias","value","buildMediaQuery","property","screenQueryFunction","sizing","size","css"],"mappings":"gHAIaA,EAAmDC,OAAOC,OAAO,CAC5EC,KAAM,GACNC,IAAK,GACLC,GAAI,GACJC,EAAG,GACHC,EAAG,GACHC,EAAG,GACHC,GAAI,GACJC,IAAK,EACLC,KAAM,QAIKC,EAAwDX,OAAOC,OAAO,CACjFC,KAAM,GACNC,IAAK,GACLC,GAAI,GACJC,EAAG,GACHC,EAAG,GACHC,EAAG,GACHC,GAAI,GACJC,IAAK,GACLC,KAAM,IAQD,SAASE,EAAwBC,GACtC,MAAqB,iBAAVA,GAAsBd,EAAYc,GAAed,EAAYc,GAEjEA,EAGF,SAASC,EACdD,EACAE,EACAC,EACAC,GAEA,IAAMC,EAAON,EAAwBC,GAErC,GAAwB,mBAAbE,EAAyB,CAClC,IAAMF,EAAQE,EAASG,EAAMD,GAC7B,OAAOE,EAAP,CAAA,GAAA,IACIH,GAAAA,qCACEH,IAKR,OAAOM,EAAP,CAAA,GAAA,IACIH,GAAAA,CACED,IAAAA,EAAAA,EAAAA,CAAAA,WAAAA,KAAAA,GAAAA,aAAAA,EAAaH,EAAwBC,GAASI"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@foxford/ui",
3
- "version": "2.0.0-beta-38ffcd6-20220707",
3
+ "version": "2.0.0-beta-e44eaea-20220707",
4
4
  "description": "UI components library",
5
5
  "main": "index.cjs.js",
6
6
  "module": "index.js",