Merge pull request #797 from gympass/DS-834

[DS-834] - Border typing
gympass · May 14, 2024 · 268f7ae · 268f7ae
2 parents 6959936 + 4b9611c
commit 268f7ae
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 3 deletions.
diff --git a/packages/system/src/border.test.js → packages/system/src/border/border.test.js b/packages/system/src/border.test.js → packages/system/src/border/border.test.js
@@ -20,7 +20,7 @@ import {
   borderTopRightRadius,
   borderBottomLeftRadius,
   borderBottomRightRadius,
-} from './border';
+} from '.';
 
 const borders = [0, 1, 2];
 

diff --git a/packages/system/src/border.js → packages/system/src/border/index.js b/packages/system/src/border.js → packages/system/src/border/index.js
@@ -1,11 +1,11 @@
-import { toPx } from './unit';
+import { toPx } from '../unit';
 import {
   getBorder,
   getColor,
   getBorderRadius,
   generator,
   compose,
-} from './theme';
+} from '../theme';
 
 const transform = value => {
   if (Number(value) && value !== 0) {

diff --git a/packages/system/src/border/types.ts b/packages/system/src/border/types.ts
@@ -0,0 +1,130 @@
+import Theme from '@gympass/yoga-tokens';
+
+const { borders, colors, radii } = Theme;
+
+type BorderValues = typeof borders | number | string;
+type BorderColorsValues = typeof colors | string;
+type BorderRadiusValues = typeof radii | number | string;
+
+type Border = {
+  border?: BorderValues;
+  b?: BorderValues;
+};
+
+type BorderTop = {
+  borderTop?: BorderValues;
+  bt?: BorderValues;
+};
+
+type BorderRight = {
+  borderRight?: BorderValues;
+  br?: BorderValues;
+};
+
+type BorderBottom = {
+  borderBottom?: BorderValues;
+  bb?: BorderValues;
+};
+
+type BorderLeft = {
+  borderLeft?: BorderValues;
+  bl?: BorderValues;
+};
+
+type BorderColor = {
+  borderColor?: BorderColorsValues;
+  bc?: BorderColorsValues;
+};
+
+type BorderTopColor = {
+  borderTopColor?: BorderColorsValues;
+  btc?: BorderColorsValues;
+};
+
+type BorderRightColor = {
+  borderRightColor?: BorderColorsValues;
+  brc?: BorderColorsValues;
+};
+
+type BorderBottomColor = {
+  borderBottomColor?: BorderColorsValues;
+  bbc?: BorderColorsValues;
+};
+
+type BorderLeftColor = {
+  borderLeftColor?: BorderColorsValues;
+  blc?: BorderColorsValues;
+};
+
+type BorderWidth = {
+  borderWidth?: BorderValues;
+  bw?: BorderValues;
+};
+
+type BorderTopWidth = {
+  borderTopWidth?: BorderValues;
+  btw?: BorderValues;
+};
+
+type BorderRightWidth = {
+  borderRightWidth?: BorderValues;
+  brw?: BorderValues;
+};
+
+type BorderBottomWidth = {
+  borderBottomWidth?: BorderValues;
+  bbw?: BorderValues;
+};
+
+type BorderLeftWidth = {
+  borderLeftWidth?: BorderValues;
+  blw?: BorderValues;
+};
+
+type BorderRadius = {
+  borderRadius?: BorderRadiusValues;
+  bRadius?: BorderRadiusValues;
+};
+
+type BorderTopLeftRadius = {
+  borderTopLeftRadius?: BorderRadiusValues;
+  btlr?: BorderRadiusValues;
+};
+
+type BorderTopRightRadius = {
+  borderTopRightRadius?: BorderRadiusValues;
+  btrr?: BorderRadiusValues;
+};
+
+type BorderBottomLeftRadius = {
+  borderBottomLeftRadius?: BorderRadiusValues;
+  bblr?: BorderRadiusValues;
+};
+
+type BorderBottomRightRadius = {
+  borderBottomRightRadius?: BorderRadiusValues;
+  bbrr?: BorderRadiusValues;
+};
+
+export type Borders = {
+  borderStyle?: string;
+} & Border &
+  BorderTop &
+  BorderRight &
+  BorderBottom &
+  BorderLeft &
+  BorderColor &
+  BorderTopColor &
+  BorderRightColor &
+  BorderBottomColor &
+  BorderLeftColor &
+  BorderWidth &
+  BorderTopWidth &
+  BorderRightWidth &
+  BorderBottomWidth &
+  BorderLeftWidth &
+  BorderRadius &
+  BorderTopLeftRadius &
+  BorderTopRightRadius &
+  BorderBottomLeftRadius &
+  BorderBottomRightRadius;