Merge pull request #690 from gympass/feat/add-typescript-config-yoga

🚀 feat(yoga): add config to add typescript environment (web)

jest/config/native.js

@@ -1,5 +1,10 @@
 module.exports = {
-  testMatch: ['<rootDir>/packages/**/native/**/*.test.jsx'],
+  testMatch: [
+    '<rootDir>/packages/**/native/**/*.test.js',
+    '<rootDir>/packages/**/native/**/*.test.jsx',
+    '<rootDir>/packages/**/native/**/*.test.ts',
+    '<rootDir>/packages/**/native/**/*.test.tsx',
+  ],
   transform: { '^.+\\.jsx?$': 'babel-jest' },
   displayName: 'native',
   preset: 'react-native',

jest/config/web.js

@@ -2,6 +2,8 @@ module.exports = {
   testMatch: [
     '<rootDir>/packages/**/web/**/*.test.js',
     '<rootDir>/packages/**/web/**/*.test.jsx',
+    '<rootDir>/packages/**/web/**/*.test.ts',
+    '<rootDir>/packages/**/web/**/*.test.tsx',
   ],
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['<rootDir>/jest/setup/web.js'],

package.json

@@ -56,8 +56,6 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "4.0.0",
-    "fs-extra": "^8.1.0",
-    "git-last-commit": "^1.0.0",
     "husky": "3.0.5",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",

packages/doc/package.json

@@ -11,6 +11,7 @@
     "@gympass/yoga-illustrations": "^0.5.2",
     "@gympass/yoga-system": "^0.11.1",
     "@gympass/yoga-tokens": "^3.2.2",
+    "@gympass/yoga-helpers": "^1.0.3",
     "@mdx-js/loader": "^1.4.5",
     "@mdx-js/mdx": "^1.4.5",
     "@mdx-js/react": "^1.4.5",

packages/labnative/customTransformer.js

@@ -1,4 +1,5 @@
 const reactNativeSvgTransformer = require('react-native-svg-transformer');
+
 const upstreamTransformer = require('metro-react-native-babel-transformer');
 
 module.exports.transform = function customSVGTransformer({

packages/labnative/package.json

@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@gympass/yoga": "^7.87.1",
+    "@gympass/yoga-icons": "1.15.0",
+    "@gympass/yoga-illustrations": "0.5.1",
     "@react-native-masked-view/masked-view": "^0.2.6",
     "@react-native-picker/picker": "^2.4.9",
     "@react-navigation/drawer": "^6.4.1",

packages/yoga/package.json

@@ -3,12 +3,14 @@
   "version": "7.87.1",
   "description": "Gympass component library",
   "main": "./src",
+  "types": "./src",
   "sideEffects": false,
   "scripts": {
-    "build": "yarn build:web && yarn build:native && yarn build:esm",
-    "build:web": "NODE_ENV=web babel ./src --out-dir dist/cjs",
-    "build:esm": "NODE_ENV=esm babel ./src --out-dir dist/esm",
-    "build:native": "NODE_ENV=native babel ./src --out-dir dist/cjs",
+    "build": "yarn build:types && yarn build:web && yarn build:esm && yarn build:native",
+    "build:types": "tsup --outDir dist/typings --dts-only",
+    "build:web": "tsup src/**/web !**/*.test.jsx.snap !**/*.test.tsx.snap --outDir dist/cjs --format=cjs",
+    "build:esm": "tsup src/**/web !**/*.test.jsx.snap !**/*.test.tsx.snap --format=esm --legacy-output",
+    "build:native": "tsup src/**/native !**/*.test.jsx.snap !**/*.test.tsx.snap --outDir dist/cjs --format=cjs",
     "prebuild": "rm -rf ./dist",
     "postbuild": "cp -r ./src/Fonts ./dist/fonts",
     "prepublishOnly": "node ../../scripts/prepublish.js --rn"
@@ -63,5 +65,14 @@
     "react": ">=16",
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts",
+      "src/**/*.ts",
+      "!src/**/*.d.ts"
+    ],
+    "splitting": false,
+    "bundle": false
   }
 }

packages/yoga/src/Accordion/web/Accordion.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
 import { string, node, bool } from 'prop-types';
 import { ChevronDown } from '@gympass/yoga-icons';
-import { Text, Divider } from '@gympass/yoga';
+import { Text, Divider } from '../..';
 import Content from './Content';
 
 const AccordionWrapper = styled.div`

packages/yoga/src/Accordion/web/Accordion.test.jsx

@@ -5,8 +5,7 @@ import {
   fontWeights,
   spacing,
 } from '@gympass/yoga-tokens/src/global';
-import { Text, Button } from '@gympass/yoga';
-import { ThemeProvider } from '../..';
+import { Text, Button, ThemeProvider } from '../..';
 
 import Accordion from '.';
 

packages/yoga/src/ActionRequirement/native/ActionRequirement.test.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
-import { Box, Checkbox, Text } from '@gympass/yoga';
 import { Img2d01 } from '@gympass/yoga-illustrations';
 import { Dumbbell, User, Star } from '@gympass/yoga-icons';
+import { Box, Checkbox, Text, ThemeProvider } from '../..';
 
-import { ThemeProvider } from '../..';
 import ActionRequirement from './ActionRequirement';
 
 function handleGetCheckableContent() {

packages/yoga/src/ActionRequirement/web/ActionRequirement.test.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { Text } from '@gympass/yoga';
 import { Dumbbell, User, Star } from '@gympass/yoga-icons';
+import { Text, ThemeProvider } from '../..';
 import ActionRequirement from './ActionRequirement';
-import { ThemeProvider } from '../..';
 
 function handleGetList() {
   return (

packages/yoga/src/Datepicker/web/Calendar.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { Icon, Text, Box } from '@gympass/yoga';
 import { ChevronLeft, ChevronRight } from '@gympass/yoga-icons';
 import { oneOf, func, instanceOf, bool } from 'prop-types';
 import _ from 'lodash';
+import { Icon, Text, Box } from '../..';
 
 const CalendarWrapper = styled.div`
   ${({

packages/yoga/src/Datepicker/web/Datepicker.jsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Booking, BookingFilled } from '@gympass/yoga-icons';
-import { Text } from '@gympass/yoga';
 import styled, { css } from 'styled-components';
 import { bool, oneOf, func, instanceOf, string } from 'prop-types';
 import { format } from 'date-fns';
+import { Text } from '../..';
 import { theme } from '../../Theme';
 import Calendar from './Calendar';
 

packages/yoga/src/Popover/web/Popover.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { bool, node, number, oneOf, string } from 'prop-types';
 
-import { Text } from '@gympass/yoga';
+import { Text } from '../..';
 import { useCombinedRefs } from '../../hooks';
 
 import { PopoverContainer, PopoverButton, Wrapper } from './styles';

packages/yoga/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

tsconfig.json

@@ -7,7 +7,9 @@
       "@gympass/yoga-common/*": ["./packages/common/src/*"],
       "@gympass/yoga-common": ["./packages/common/src"],
       "@gympass/yoga-tokens/*": ["./packages/tokens/src/*"],
-      "@gympass/yoga-tokens": ["./packages/tokens/src"]
+      "@gympass/yoga-tokens": ["./packages/tokens/src"],
+      "@gympass/yoga/*": ["./packages/yoga/src/*"],
+      "@gympass/yoga": ["./packages/yoga/src"]
     },
     "declaration": true,
     "outDir": "./dist/",
@@ -22,6 +24,9 @@
     "noImplicitReturns": true,
     "skipLibCheck": true,
     "moduleResolution": "node",
-    "sourceMap": false
+    "sourceMap": false,
+    "allowJs": true,
+    "checkJs": false,
+    "jsx": "react-jsx"
   }
 }

yarn.lock

@@ -12689,6 +12689,15 @@ [email protected], fs-extra@^8.1.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
+fs-extra@^11.1.1:
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.1.1.tgz#da69f7c39f3b002378b0954bb6ae7efdc0876e2d"
+  integrity sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs-extra@^4.0.2:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
@@ -21906,7 +21915,7 @@ [email protected]:
     react-shallow-renderer "^16.15.0"
     scheduler "^0.23.0"
 
-[email protected]:
+[email protected], react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==