From fe2c3c3e892ce82167cdf231a5273eb5eefb3011 Mon Sep 17 00:00:00 2001 From: Jay Singh <140599484+mathdebate09@users.noreply.github.com> Date: Sat, 14 Sep 2024 13:30:11 +0530 Subject: [PATCH] chore: revamp layout props (minify syntax) --- src/index.ts | 4 +-- src/layout/aspect-ratio.ts | 34 ------------------ src/layout/aspect.ts | 47 +++++++++++++++++++++++++ src/layout/display.ts | 18 ++-------- src/layout/position.ts | 72 +++++++++++++++----------------------- src/layout/z-index.ts | 39 ++++++++++++--------- 6 files changed, 104 insertions(+), 110 deletions(-) delete mode 100644 src/layout/aspect-ratio.ts create mode 100644 src/layout/aspect.ts diff --git a/src/index.ts b/src/index.ts index 62b4133..90bf870 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,7 +3,7 @@ import p from './spacing/padding'; import m from './spacing/margin'; // Layout -import aspect_ratio from './layout/aspect-ratio'; +import aspect from './layout/aspect'; import object_fit from './layout/object-fit'; import display from './layout/display'; import direction from './layout/direction'; @@ -50,7 +50,7 @@ export { object_fit, display, direction, - aspect_ratio, + aspect, z, pos, overflow, diff --git a/src/layout/aspect-ratio.ts b/src/layout/aspect-ratio.ts deleted file mode 100644 index d326202..0000000 --- a/src/layout/aspect-ratio.ts +++ /dev/null @@ -1,34 +0,0 @@ -import type { AspectRatio } from '../types/layout'; - -const aspectRatioValues: { [key: string]: number | string } = { - auto: 'auto', - square: 1, - video: 16 / 9, -}; - -const getAspectRatioValue = (key: string | number): number | string => { - if (typeof key === 'number') return key; - const value = aspectRatioValues[key]; - if (value === undefined) throw new Error(`Invalid aspect ratio key: ${key}`); - return value; -}; - -const aspect_ratio = { - custom: (key: string | number): AspectRatio => { - return { aspectRatio: getAspectRatioValue(key) }; - }, -} as { [key: string]: AspectRatio } & { - custom: (key: string | number) => AspectRatio; -}; - -Object.keys(aspectRatioValues).forEach((key) => { - aspect_ratio[key] = { aspectRatio: getAspectRatioValue(key) }; -}); - -// Example usage -// const autoAspectRatio = aspect_ratio.auto; // { aspectRatio: 'auto' } -// const squareAspectRatio = aspect_ratio.square; // { aspectRatio: 1 } -// const videoAspectRatio = aspect_ratio.video; // { aspectRatio: 16 / 9 } -// const customAspectRatio = aspect_ratio.custom(4 / 3); // { aspectRatio: 4 / 3 } - -export default aspect_ratio; diff --git a/src/layout/aspect.ts b/src/layout/aspect.ts new file mode 100644 index 0000000..ee8fd9a --- /dev/null +++ b/src/layout/aspect.ts @@ -0,0 +1,47 @@ +import type { AspectRatio } from '../types/layout'; + +const aspectRatioValues: { [key: string]: number | string } = { + auto: 'auto', + square: 1, + video: 16 / 9, +}; + +const getAspectRatioValue = (key: string | number): number | string => { + if (typeof key === 'number') return key; + if (key === 'auto') return 'auto'; + if (!isNaN(Number(key))) return Number(key); + + // Handle fractional strings like '1/3' + const fractionMatch = key.match(/^(\d+)\/(\d+)$/); + if (fractionMatch) { + const numerator = Number(fractionMatch[1]); + const denominator = Number(fractionMatch[2]); + return numerator / denominator; + } + + const value = aspectRatioValues[key]; + if (value === undefined) throw new Error(`Invalid aspect ratio key: ${key}`); + return value; +}; + +const aspect = { + custom_: (key: string | number): AspectRatio => { + return { aspectRatio: getAspectRatioValue(key) }; + }, +} as { [key: string]: AspectRatio } & { + custom_: (key: string | number) => AspectRatio; +}; + +Object.keys(aspectRatioValues).forEach((key) => { + aspect[key] = { aspectRatio: getAspectRatioValue(key) }; +}); + +// Example usage +// const autoAspectRatio = aspect.auto; // { aspectRatio: 'auto' } +// const squareAspectRatio = aspect.square; // { aspectRatio: 1 } +// const videoAspectRatio = aspect.video; // { aspectRatio: 16 / 9 } +// const customAspectRatio = aspect.custom_('4/3'); // { aspectRatio: 4 / 3 } +// const customAspectRatioNumber = aspect.custom_(3); // { aspectRatio: 3 } +// const customAspectRatioString = aspect.custom_('3'); // { aspectRatio: 3 } + +export default aspect; diff --git a/src/layout/display.ts b/src/layout/display.ts index 08517e8..61b4d53 100644 --- a/src/layout/display.ts +++ b/src/layout/display.ts @@ -1,22 +1,10 @@ import type { Display } from '../types/layout'; -const displayValues: { [key: string]: Display['display'] } = { - hidden: 'none', - flex: 'flex', +const display: { [key: string]: Display } = { + hidden: { display: 'none' }, + flex: { display: 'flex' }, }; -const getDisplayValue = (key: string): Display => { - const value = displayValues[key]; - if (value === undefined) throw new Error(`Invalid display key: ${key}`); - return { display: value }; -}; - -const display: { [key: string]: Display } = {}; - -Object.keys(displayValues).forEach((key) => { - display[key] = getDisplayValue(key); -}); - // Example usage // const hiddenDisplay = display.hidden; // { display: 'none' } // const flexDisplay = display.flex; // { display: 'flex' } diff --git a/src/layout/position.ts b/src/layout/position.ts index d34a481..49bdc8d 100644 --- a/src/layout/position.ts +++ b/src/layout/position.ts @@ -1,15 +1,11 @@ import type { PositionValue } from '../types/layout'; -const positions = { +const positions: { [key: string]: number } = { '0': 0, 'px': 1, - '0.5': 2, '1': 4, - '1.5': 6, '2': 8, - '2.5': 10, '3': 12, - '3.5': 14, '4': 16, '5': 20, '6': 24, @@ -36,25 +32,6 @@ const positions = { '72': 288, '80': 320, '96': 384, - 'auto': 'auto', - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - 'full': '100%', -}; - -// Magik -const generatePositionProperties = ( - key: string -): { [key: string]: PositionValue } => { - const values: { [key: string]: PositionValue } = {}; - for (const [posKey, posValue] of Object.entries(positions)) { - values[`${key}_${posKey.replace('/', '_')}`] = { [key]: posValue }; - } - return values; }; // Now explicitly include the custom methods and the index signature for dynamically generated properties @@ -63,10 +40,6 @@ const pos: { absolute: { position: string }; fixed: { position: string }; sticky: { position: string }; - r_custom: (value: number) => PositionValue; - t_custom: (value: number) => PositionValue; - l_custom: (value: number) => PositionValue; - b_custom: (value: number) => PositionValue; [key: string]: | PositionValue | { position: string } @@ -78,30 +51,43 @@ const pos: { fixed: { position: 'fixed' }, sticky: { position: 'sticky' }, - ...generatePositionProperties('right'), - ...generatePositionProperties('top'), - ...generatePositionProperties('left'), - ...generatePositionProperties('bottom'), - - r_custom(value: number): PositionValue { - return { right: value }; + r_(value: number | string): PositionValue { + return { right: Number(value) }; }, - t_custom(value: number): PositionValue { - return { top: value }; + t_(value: number): PositionValue { + return { top: Number(value) }; }, - l_custom(value: number): PositionValue { - return { left: value }; + l_(value: number): PositionValue { + return { left: Number(value) }; }, - b_custom(value: number): PositionValue { - return { bottom: value }; + b_(value: number): PositionValue { + return { bottom: Number(value) }; }, }; +Object.keys(positions).forEach((posKey) => { + pos[`t_${posKey}`] = { + top: positions[posKey], + } as PositionValue; + + pos[`r_${posKey}`] = { + right: positions[posKey], + } as PositionValue; + + pos[`b_${posKey}`] = { + bottom: positions[posKey], + } as PositionValue; + + pos[`l_${posKey}`] = { + left: positions[posKey], + } as PositionValue; +}); + // Example usage // console.log(pos.relative); // { position: 'relative' } // console.log(pos.right_1); // { right: 4 } // console.log(pos.top_2); // { top: 8 } -// console.log(pos.left_1_2); // { left: '50%' } -// console.log(pos.b_custom(20)); // { bottom: 20 } +// console.log(pos.left_1); // { left: '50%' } +// console.log(pos.b_(20)); // { bottom: 20 } export default pos; diff --git a/src/layout/z-index.ts b/src/layout/z-index.ts index 2623d18..3462a9b 100644 --- a/src/layout/z-index.ts +++ b/src/layout/z-index.ts @@ -1,20 +1,27 @@ -const zIndex = { - z_0: { zIndex: 0 }, - z_10: { zIndex: 10 }, - z_20: { zIndex: 20 }, - z_30: { zIndex: 30 }, - z_40: { zIndex: 40 }, - z_50: { zIndex: 50 }, - z_auto: { zIndex: 'auto' }, +const z = { + index_0: { zIndex: 0 }, + index_10: { zIndex: 10 }, + index_20: { zIndex: 20 }, + index_30: { zIndex: 30 }, + index_40: { zIndex: 40 }, + index_50: { zIndex: 50 }, + index_auto: { zIndex: 'auto' }, + + index_(value: number | string): { zIndex: number | 'auto' } { + if (value === 'auto') { + return { zIndex: 'auto' }; + } else if (!isNaN(Number(value))) { + return { zIndex: Number(value) }; + } else { + throw new Error('Invalid zIndex value'); + } + }, }; // Example usage -// console.log(zIndex.z_0); // { zIndex: 0 } -// console.log(zIndex.z_10); // { zIndex: 10 } -// console.log(zIndex.z_20); // { zIndex: 20 } -// console.log(zIndex.z_30); // { zIndex: 30 } -// console.log(zIndex.z_40); // { zIndex: 40 } -// console.log(zIndex.z_50); // { zIndex: 50 } -// console.log(zIndex.z_auto); // { zIndex: 'auto' } +// console.log(z.index_(10)); // { zIndex: 10 } +// console.log(z.index_('auto')); // { zIndex: 'auto' } +// console.log(z.index_('20')); // { zIndex: 20 } +// console.log(z.index_('invalid')); // Error: Invalid zIndex value -export default zIndex; +export default z;