🚀 feat(tokens|common): add typescript #669

matheushdsbr · 2023-07-12T20:38:43Z

Description 🧘🏻‍♀️

In this PR was added Typescript in tokens and common packages.

Platforms 📲

Web
Mobile

Type of change 🔍

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested? 🧪

[Enter the tips to test this PR]

Unit Test
Snapshot Test

Checklist: 🔍

Video 📸

Screen.Recording.2023-07-12.at.17.20.15.mov

This reverts commit d675171.

MicaelRodrigues · 2023-07-13T13:20:39Z

packages/common/src/elevate.ts

+  if (level) {
+    return all[level];
+  }
+
+  return all;


The previous way seemed more clear, i would only using nullish coalescing operator. WDYT?

Suggested change

if (level) {

return all[level];

}

return all;

all[level] ?? all;

Hey, @MicaelRodrigues!
I don't think the previous way is more clear. Someone new to JS may have difficulty to understand all[level] ?? all. Contrary to what you said, I believe that this new implementation is easier to read and to understand the code.

Don't you think it's easier to read the statements if we were reading like it was an English text, instead of a code full of JS patterns and operators?

honestly, I understand both points but there's two things that seem more important to me here:

what if I give it a higher level? Right now, as we accept any number I could give it a 500 and would get an undefined. Should we create the array based on the given level?

this function signature is, IMO, weird. It can either return an array or a value. I'm not the biggest fan of doing this as it makes the usage a lot more complex. Maybe we should type the return differently based on the fact that a level is given or not using function overloads

Hey, @MicaelRodrigues! I don't think the previous way is more clear. Someone new to JS may have difficulty to understand all[level] ?? all. Contrary to what you said, I believe that this new implementation is easier to read and to understand the code.

Don't you think it's easier to read the statements if we were reading like it was an English text, instead of a code full of JS patterns and operators?

could give it a 500 and would get an undefined. Should we create the arr

It's a question of flavour :) Both options are fine to me :) We expect people working in this code to know javascript fundamentals. If they don't we are here to help improve the code... :)
I agree with you in "as it was an English text" and both options read plain english to me (ex: my suggestion reads ("a" or "b").

Anyway, the important concerns in this function are the ones @goncalo-matos exposed ;)

Can we use the value "0" as level? If so the current implementation will ignore the level when it is "0".

yes @leonardokl 😕
Sorry about this guys!

@goncalo-matos good point 🚀

packages/tokens/src/global/borders.ts

packages/tokens/src/global/breakpoints.ts

MicaelRodrigues · 2023-07-13T13:40:50Z

packages/tokens/src/global/font-sizes.ts

@@ -0,0 +1,27 @@
+export interface FontSizesProps extends Array<number> {


Same as above

Same as above, you don't need extends

packages/tokens/src/global/font-sizes.ts

packages/tokens/src/global/font-weights.ts

packages/tokens/src/global/line-heights.ts

caiotracera · 2023-07-14T11:18:36Z

packages/common/src/elevate.ts

+  if (level) {
+    return all[level];
+  }
+
+  return all;


Hey, @MicaelRodrigues!
I don't think the previous way is more clear. Someone new to JS may have difficulty to understand all[level] ?? all. Contrary to what you said, I believe that this new implementation is easier to read and to understand the code.

Don't you think it's easier to read the statements if we were reading like it was an English text, instead of a code full of JS patterns and operators?

caiotracera · 2023-07-14T11:21:11Z

packages/tokens/src/global/breakpoints.ts

+    margin: 71,
+    gutter: 24,
+  },
+};


Suggested change

};

} as const;

So we can make the IntelliSense and the Editor/autocomplete smarter

caiotracera · 2023-07-14T11:24:36Z

packages/tokens/src/global/colors.ts

-
-/**
- * @type {Color}
- */
 const white = '#FFFFFF';

 const colors = {


export default colors = { vibin, hope, energy, relax, peace, brandingVerve, verve, uplift, deepPurple, yoga, success, neutral, attention, stamina, deep, medium, light, clear, white, } as const;

For the future, not for now, we should probably avoid exporting default. we're polluting the bundle with all of the colors if we only use one

(named exports scale a lot better than default exports :P)

packages/tokens/src/global/elevations.android.ts

packages/tokens/src/global/font-sizes.ts

packages/tokens/src/global/radii.ts

packages/tokens/src/global/spacing.ts

goncalo-matos · 2023-07-14T12:02:28Z

packages/common/package.json

-    "build": "yarn build:cjs && yarn build:esm",
-    "build:cjs": "NODE_ENV=cjs babel ./src --out-dir dist/cjs",
-    "build:esm": "NODE_ENV=esm babel ./src --out-dir dist/esm",
+    "build": "yarn build:types && yarn build:cjs && yarn build:esm",


suggestion: wdyt of parallelizing this? Something like https://www.npmjs.com/package/npm-run-all can be helpfull

goncalo-matos · 2023-07-14T12:08:28Z

packages/common/src/elevate.ts

-function elevate({
+interface ElevateProps {
+  color?: string;
+  level?: number;


suggestion: since this only supports up to 3, shouldn't our types reflect this?

quick and dirty way would be to do this (we could build a Range util later):

Suggested change

level?: number;

level?: 0 | 1 | 2 | 3

goncalo-matos · 2023-07-14T12:11:58Z

packages/common/src/elevate.ts

+  if (level) {
+    return all[level];
+  }
+
+  return all;


honestly, I understand both points but there's two things that seem more important to me here:

what if I give it a higher level? Right now, as we accept any number I could give it a 500 and would get an undefined. Should we create the array based on the given level?

this function signature is, IMO, weird. It can either return an array or a value. I'm not the biggest fan of doing this as it makes the usage a lot more complex. Maybe we should type the return differently based on the fact that a level is given or not using function overloads

goncalo-matos · 2023-07-14T12:32:48Z

packages/tokens/src/global/borders.ts

+
+const border: BorderProps = [0, 1, 2];
+
+[border.zero, border.small, border.medium] = border;


suggestion: I think we can remove this line. I'm not really following what it's doing 🤔

goncalo-matos · 2023-07-14T12:34:44Z

packages/tokens/src/global/breakpoints.ts

@@ -0,0 +1,101 @@
+export interface BreakpointsProps {


suggestion: these aren't really props. How about just Breakpoints?

Suggested change

export interface BreakpointsProps {

export interface Breakpoints {

goncalo-matos · 2023-07-14T12:51:13Z

packages/tokens/src/global/colors.ts

-
-/**
- * @type {Color}
- */
 const white = '#FFFFFF';

 const colors = {


For the future, not for now, we should probably avoid exporting default. we're polluting the bundle with all of the colors if we only use one

(named exports scale a lot better than default exports :P)

goncalo-matos · 2023-07-14T12:52:32Z

packages/tokens/src/global/elevations.ios.ts

+};
+
+const [zero, small, medium, large] =
+  elevate(elevateOptions) as [string, string, string, string];


question: as casts hide potential errors (it's us saying we know better than typescript). Do we really need this?

goncalo-matos · 2023-07-14T12:54:30Z

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es2016",


question: could we make this a bit more recent? :P

Fuel to the fire :P
https://www.freecodecamp.org/news/javascript-new-features-es2020/

For sure!

But I think it's better to do this update at another time, as there would be a lot to validate in this PR

For sure!

But I think it's better to do this update at another time, as there would be a lot to validate in this PR

I don't think there would be much to validate in this PR, did you test the change locally? If indeed causes much trouble we can do in another PR

@matheushdsbr Pls don't forget to open a new PR with this :)

goncalo-matos · 2023-07-14T12:55:02Z

tsconfig.json

+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noImplicitAny": false,


one day, I'd love to have this as true :D

packages/common/src/elevate.ts

This reverts commit 7d3e727.

…nterfaces

This reverts commit f869552.

matheushdsbr · 2023-07-21T20:39:41Z

@MicaelRodrigues @goncalo-matos @leonardokl @caiotracera

Hey guys!

When changing the structure of the tokens by removing the arrays, this test broke: /packages/yoga/src/Theme/helpers/themeReader/base.test.js on line 44.

Investigating the theme (being imported on line 3) I realized that we have the createFakeObj() function and if we change the structure of the export with the arrays it will not work well and will generate breakchanges.

I believe that it would be better, at least for now, to continue with the old structure (with arrays) and in the future to investigate solutions to remove this structure and update with suggestions that you commented here.

I believe I wasn't very clear, I still don't quite understand how this function works.

I would like your opinion on the case!

MicaelRodrigues · 2023-07-25T14:39:49Z

@MicaelRodrigues @goncalo-matos @leonardokl @caiotracera

Hey guys!

When changing the structure of the tokens by removing the arrays, this test broke: /packages/yoga/src/Theme/helpers/themeReader/base.test.js on line 44.

Investigating the theme (being imported on line 3) I realized that we have the createFakeObj() function and if we change the structure of the export with the arrays it will not work well and will generate breakchanges.

I believe that it would be better, at least for now, to continue with the old structure (with arrays) and in the future to investigate solutions to remove this structure and update with suggestions that you commented here.

I believe I wasn't very clear, I still don't quite understand how this function works.

I would like your opinion on the case!

packages/tokens/src/global/font-sizes.ts

I see, we need to keep "array" as the return in order to prevent a breaking change.
So, WDYT of using Object.values? Example:


const fontSizes = {
   xxsmall: 10,
   xsmall: 20
}

export default Object.values(fontSizes);

This reverts commit 9937fbf.

matheushdsbr · 2023-07-25T19:40:33Z

Great suggestion @MicaelRodrigues!! 🚀🚀

But when testing I found a problem, the old structure [with array] allows us to use tokens in two ways:

tokens.fontSizes[0] or tokens.fontSizes.xxsmall

All consoles were made in this test file:

  packages/yoga/src/Theme/helpers/themeReader/base.test.js

  console.log(theme.fontSizes);

Consoling the old structure with arrays:

[Function: ProxyPolyfill] {
  '0': [Getter/Setter],
  '1': [Getter/Setter],
  '2': [Getter/Setter],
  xxsmall: [Getter/Setter],
  xsmall: [Getter/Setter],
  small: [Getter/Setter],
}

With your suggestion we can use just like:

tokens.fontSizes.xxsmall

Code

const sizes = {
  xxsmall: 10,
  xsmall: 20,
  small: 30
}

const fontSizes = Object.values(sizes);

Result

[Function: ProxyPolyfill] {
  '0': [Getter/Setter],
  '1': [Getter/Setter],
  '2': [Getter/Setter],
}

But!!! Your suggestion made me think better and I thought of this way:

const sizes = {
  xxsmall: 10,
  xsmall: 20,
  small: 30
}

const fontSizes = {...Object.values(sizes), ...sizes};

Result:

[Function: ProxyPolyfill] {
  '0': [Getter/Setter],
  '1': [Getter/Setter],
  '2': [Getter/Setter],
  xxsmall: [Getter/Setter],
  xsmall: [Getter/Setter],
  small: [Getter/Setter],
}

With that way we can continue using the same tokens as in the array structure:

tokens.fontSizes[0] or tokens.fontSizes.xxsmall

\o/

MicaelRodrigues · 2023-07-26T08:08:39Z

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es2016",


@matheushdsbr Pls don't forget to open a new PR with this :)

matheushdsbr self-assigned this Jul 12, 2023

github-actions bot added @gympass/yoga-common @gympass/yoga-tokens labels Jul 12, 2023

matheushdsbr marked this pull request as draft July 13, 2023 04:34

matheushdsbr and others added 17 commits July 13, 2023 10:29

chore(common): add typescript setup

7455c14

feat(common): add typings

0e87719

chore(tokens): add typescript setup

e89c551

feat(tokens): add typings

753f348

refactor(elevate): refactor types

4003748

refactor(tokens): add typescript

a2d0cb7

chore(tokens|common): adjust main and add types

48b2b35

feat(tokens): add typescript

95484bb

chore(jest): add ts and tsx to collectCoverageFrom

e2fc268

chore(tokens|common): adjust main and types to typescript works

900d809

chore(tsconfig): adjust tsconfig structure

a4185a4

wip

53b377d

Revert "wip"

549a0e1

This reverts commit d675171.

chore(tokens|common): add tsup and remove babel to adjust build

4f05033

refactor: remove param types

b41bbc5

refactor(tokens|common): remove prefix I from interfaces

046b292

chore: adjust types path and add source map false in tsconfig.json

0bdaff2

matheushdsbr force-pushed the feat/add-typescript-to-tokens-and-common branch from eedab9b to 0bdaff2 Compare July 13, 2023 13:36

MicaelRodrigues reviewed Jul 13, 2023

View reviewed changes

packages/tokens/src/global/font-sizes.ts Outdated Show resolved Hide resolved

packages/tokens/src/global/font-weights.ts Outdated Show resolved Hide resolved

packages/tokens/src/global/line-heights.ts Outdated Show resolved Hide resolved

chore: create .npmrc and disable import/no-named-as-default

feae0ae

github-actions bot added the @gympass/yoga label Jul 13, 2023

fix: removing gympass registry usage

2418bea

matheushdsbr marked this pull request as ready for review July 13, 2023 20:02

caiotracera reviewed Jul 14, 2023

View reviewed changes

goncalo-matos reviewed Jul 14, 2023

View reviewed changes

leonardokl reviewed Jul 17, 2023

View reviewed changes

packages/common/src/elevate.ts Outdated Show resolved Hide resolved

matheushdsbr added 6 commits July 19, 2023 12:56

refactor: resolve comments, adjust typings

7d3e727

refactor: adjust fontWeights

a40bb7c

Revert "refactor: resolve comments, adjust typings"

9937fbf

This reverts commit 7d3e727.

refactor: adjust elevate function and breakpoints structure, rename i…

d3ec35b

…nterfaces

refactor: improve tokens exports

f869552

Revert "refactor: improve tokens exports"

8676516

This reverts commit f869552.

Revert "Revert "refactor: resolve comments, adjust typings""

37546a3

This reverts commit 9937fbf.

MicaelRodrigues approved these changes Jul 26, 2023

View reviewed changes

caiotracera approved these changes Jul 26, 2023

View reviewed changes

rafaelcoletagympass approved these changes Jul 26, 2023

View reviewed changes

leonardokl approved these changes Jul 26, 2023

View reviewed changes

matheushdsbr merged commit 8aa8478 into master Jul 26, 2023
3 checks passed

matheushdsbr deleted the feat/add-typescript-to-tokens-and-common branch July 26, 2023 12:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🚀 feat(tokens|common): add typescript #669

🚀 feat(tokens|common): add typescript #669

matheushdsbr commented Jul 12, 2023

MicaelRodrigues Jul 13, 2023

caiotracera Jul 14, 2023

goncalo-matos Jul 14, 2023

MicaelRodrigues Jul 17, 2023 •

edited

Loading

leonardokl Jul 17, 2023

matheushdsbr Jul 19, 2023

MicaelRodrigues Jul 13, 2023

MicaelRodrigues Jul 19, 2023

caiotracera Jul 14, 2023

caiotracera Jul 14, 2023

caiotracera Jul 14, 2023

goncalo-matos Jul 14, 2023

goncalo-matos Jul 14, 2023

goncalo-matos Jul 14, 2023

goncalo-matos Jul 14, 2023

goncalo-matos Jul 14, 2023

goncalo-matos Jul 14, 2023

goncalo-matos Jul 14, 2023

goncalo-matos Jul 14, 2023

goncalo-matos Jul 14, 2023

MicaelRodrigues Jul 18, 2023

matheushdsbr Jul 19, 2023

MicaelRodrigues Jul 19, 2023 •

edited

Loading

MicaelRodrigues Jul 26, 2023

goncalo-matos Jul 14, 2023

matheushdsbr commented Jul 21, 2023

MicaelRodrigues commented Jul 25, 2023

matheushdsbr commented Jul 25, 2023

MicaelRodrigues Jul 26, 2023

		@@ -0,0 +1,27 @@
		export interface FontSizesProps extends Array<number> {


		const border: BorderProps = [0, 1, 2];

		[border.zero, border.small, border.medium] = border;

	export interface BreakpointsProps {
	export interface Breakpoints {

🚀 feat(tokens|common): add typescript #669

🚀 feat(tokens|common): add typescript #669

Conversation

matheushdsbr commented Jul 12, 2023

Description 🧘🏻‍♀️

Platforms 📲

Type of change 🔍

How Has This Been Tested? 🧪

Checklist: 🔍

Video 📸

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MicaelRodrigues Jul 17, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MicaelRodrigues Jul 19, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matheushdsbr commented Jul 21, 2023

MicaelRodrigues commented Jul 25, 2023

matheushdsbr commented Jul 25, 2023

Choose a reason for hiding this comment

MicaelRodrigues Jul 17, 2023 •

edited

Loading

MicaelRodrigues Jul 19, 2023 •

edited

Loading