Merge branch 'master' into DS-843

.github/workflows/main.yml

@@ -23,3 +23,5 @@ jobs:
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+    - name: Run build
+      run: yarn build

packages/doc/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.51.22](https://github.com/gympass/yoga/compare/@gympass/[email protected]...@gympass/[email protected]) (2024-05-27)
+
+**Note:** Version bump only for package @gympass/yoga-doc
+
+
+
+
+
+## [2.51.21](https://github.com/gympass/yoga/compare/@gympass/[email protected]...@gympass/[email protected]) (2024-05-27)
+
+**Note:** Version bump only for package @gympass/yoga-doc
+
+
+
+
+
+## [2.51.20](https://github.com/gympass/yoga/compare/@gympass/[email protected]...@gympass/[email protected]) (2024-05-23)
+
+**Note:** Version bump only for package @gympass/yoga-doc
+
+
+
+
+
+## [2.51.19](https://github.com/gympass/yoga/compare/@gympass/[email protected]...@gympass/[email protected]) (2024-05-22)
+
+**Note:** Version bump only for package @gympass/yoga-doc
+
+
+
+
+
+## [2.51.18](https://github.com/gympass/yoga/compare/@gympass/[email protected]...@gympass/[email protected]) (2024-05-22)
+
+**Note:** Version bump only for package @gympass/yoga-doc
+
+
+
+
+
 ## [2.51.17](https://github.com/gympass/yoga/compare/@gympass/[email protected]...@gympass/[email protected]) (2024-05-21)
 
 **Note:** Version bump only for package @gympass/yoga-doc

packages/doc/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@gympass/yoga-doc",
   "description": "Gympass Design System components documentation",
-  "version": "2.51.17",
+  "version": "2.51.22",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@gympass/yoga": "^7.114.17",
+    "@gympass/yoga": "^7.114.22",
     "@gympass/yoga-common": "^1.3.1",
-    "@gympass/yoga-helpers": "^1.0.5",
-    "@gympass/yoga-icons": "^1.23.0",
+    "@gympass/yoga-helpers": "^1.1.0",
+    "@gympass/yoga-icons": "^1.23.1",
     "@gympass/yoga-illustrations": "^0.7.1",
-    "@gympass/yoga-system": "^0.12.0",
-    "@gympass/yoga-tokens": "^3.5.0",
+    "@gympass/yoga-system": "^0.15.0",
+    "@gympass/yoga-tokens": "^3.6.0",
     "@mdx-js/loader": "^1.4.5",
     "@mdx-js/mdx": "^1.4.5",
     "@mdx-js/react": "^1.4.5",

packages/helpers/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0](https://github.com/Gympass/yoga/compare/@gympass/[email protected]...@gympass/[email protected]) (2024-05-22)
+
+
+### Features
+
+* **helpers:** add typescript in media and hide files ([bab4964](https://github.com/Gympass/yoga/commit/bab49646af97021cf258046fe7bebdc5c6a26fe6))
+* **helpers:** create types ([ceeeae4](https://github.com/Gympass/yoga/commit/ceeeae43172d52900bafa1b0b8c38bb3d33aebf1))
+
+
+
+
+
 ## [1.0.5](https://github.com/Gympass/yoga/compare/@gympass/[email protected]...@gympass/[email protected]) (2024-05-15)
 
 **Note:** Version bump only for package @gympass/yoga-helpers

packages/helpers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga-helpers",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "Gympass helpers",
   "keywords": [
     "styled-components",
@@ -23,8 +23,8 @@
   },
   "scripts": {
     "build": "yarn build:types && yarn build:cjs && yarn build:esm",
-    "build:cjs": "tsup --outDir dist/cjs --format=cjs",
-    "build:esm": "tsup --format=esm --legacy-output",
+    "build:cjs": "tsup src !src/types.ts --outDir dist/cjs --format=cjs",
+    "build:esm": "tsup src !src/types.ts --format=esm --legacy-output",
     "build:types": "tsup --outDir dist/typings --dts-only",
     "prebuild": "rm -rf ./dist",
     "prepublishOnly": "node ../../scripts/prepublish.js",

packages/helpers/src/hide.js → packages/helpers/src/hide.ts

@@ -1,11 +1,17 @@
-import tokens from '@gympass/yoga-tokens';
+import tokens, { BreakpointsType }  from '@gympass/yoga-tokens';
+
+const { breakpoints } = tokens;
+
 import { css } from 'styled-components';
+
 import { not } from './media';
+import { Entries, Hide } from './types';
 
-const { breakpoints } = tokens;
-const availableBreakpoints = Object.entries(breakpoints);
+const availableBreakpoints = Object.entries(
+  breakpoints
+) as unknown as Entries<BreakpointsType>;
 
-const hide = isNot =>
+const hide = (isNot = false) =>
   availableBreakpoints.reduce((acc, [key, breakpoint], index) => {
     if (index === 0) {
       const [, secondBreakpoint] = availableBreakpoints[index + 1];
@@ -37,10 +43,7 @@ const hide = isNot =>
     const [, nextBreakpoint] = availableBreakpoints[index + 1];
 
     acc[key] = css`
-      @media ${not(
-          isNot,
-        )} (min-width: ${breakpoint.width}px) and (max-width: ${nextBreakpoint.width -
-        1}px) {
+      @media ${not(isNot)} (min-width: ${breakpoint.width}px) and (max-width: ${nextBreakpoint.width - 1}px) {
         display: none !important;
       }
     `;
@@ -52,6 +55,6 @@ const hide = isNot =>
     `;
 
     return acc;
-  }, {});
+  }, {} as Hide);
 
 export default hide;

packages/helpers/src/media.test.js → packages/helpers/src/media.test.ts

@@ -1,58 +1,59 @@
 /* eslint-disable import/no-named-as-default-member */
-import tokens from '@gympass/yoga-tokens';
+import tokens, { BreakpointsKey } from '@gympass/yoga-tokens';
 
 import media, { matcher, not } from './media';
+import { Matcher } from './types';
 
-const { breakpoints } = tokens;
+const { breakpoints, BREAKPOINTS_KEYS } = tokens;
 
 const formatCss = style =>
   Array.isArray(style)
     ? style.join().replace(/,|\s*/g, '')
     : style.replace(/,|\s*/g, '');
 
-const expectedStyle = (...args) => {
+const expectedStyle: Matcher = (...args) => {
   return formatCss(matcher(...args)`
     padding: 10px;
   `);
 };
 
-const expectedHideStyle = breakpoint =>
+const expectedHideStyle: (breakpoint: string) => void = breakpoint =>
   formatCss(`@media (min-width: ${breakpoints[breakpoint].width}px) {
   display: none !important;
 }`);
 
 describe('media', () => {
-  it.each(Object.keys(breakpoints))('.%s', breakpoint => {
+  it.each(BREAKPOINTS_KEYS)('.%s', breakpoint => {
     const style = media[breakpoint]`
       padding: 10px;
       `;
 
-    expect(formatCss(style)).toBe(expectedStyle(breakpoint));
+    expect(formatCss(style)).toBe(expectedStyle(breakpoint as BreakpointsKey));
   });
 
-  it.each(Object.keys(breakpoints))('.not.%s', breakpoint => {
+  it.each(BREAKPOINTS_KEYS)('.not.%s', breakpoint => {
     const notStyle = media.not[breakpoint]`
         padding: 10px;
       `;
 
-    expect(formatCss(notStyle)).toBe(expectedStyle(breakpoint, true));
+    expect(formatCss(notStyle)).toBe(expectedStyle(breakpoint as BreakpointsKey, true));
   });
 
   describe('max', () => {
-    it.each(Object.keys(breakpoints))(".max('%s')", breakpoint => {
-      const style = media.max(breakpoint)`
+    it.each(BREAKPOINTS_KEYS)(".max('%s')", breakpoint => {
+      const style = media.max(breakpoint as BreakpointsKey)`
         padding: 10px;
         `;
 
-      expect(formatCss(style)).toBe(expectedStyle(breakpoint, false, 'max'));
+      expect(formatCss(style)).toBe(expectedStyle(breakpoint as BreakpointsKey, false, 'max'));
     });
 
     it.each(Object.keys(breakpoints))(".not.max('%s')", breakpoint => {
-      const style = media.not.max(breakpoint)`
+      const style = media.not.max(breakpoint as BreakpointsKey)`
         padding: 10px;
         `;
 
-      expect(formatCss(style)).toBe(expectedStyle(breakpoint, true, 'max'));
+      expect(formatCss(style)).toBe(expectedStyle(breakpoint as BreakpointsKey, true, 'max'));
     });
   });
 
@@ -71,19 +72,19 @@ describe('media', () => {
     ];
 
     it.each(comparisons)(".between('%s', '%s')", (min, max) => {
-      const style = media.between(min, max)`
+      const style = media.between(min as BreakpointsKey, max as BreakpointsKey)`
         padding: 10px;
         `;
 
-      expect(formatCss(style)).toBe(expectedStyle([min, max], false));
+      expect(formatCss(style)).toBe(expectedStyle([min as BreakpointsKey, max as BreakpointsKey], false));
     });
 
     it.each(comparisons)(".not.between('%s', '%s')", (min, max) => {
-      const style = media.not.between(min, max)`
+      const style = media.not.between(min as BreakpointsKey, max as BreakpointsKey)`
         padding: 10px;
         `;
 
-      expect(formatCss(style)).toBe(expectedStyle([min, max], true));
+      expect(formatCss(style)).toBe(expectedStyle([min as BreakpointsKey, max as BreakpointsKey], true));
     });
   });
 });

packages/helpers/src/media.ts

@@ -0,0 +1,65 @@
+import tokens, { BreakpointsKey } from '@gympass/yoga-tokens';
+
+import { css } from 'styled-components';
+
+import hide from './hide';
+import { Matcher, Media, Width } from './types';
+
+const { breakpoints, BREAKPOINTS_KEYS } = tokens;
+
+const availableBreakpoints = BREAKPOINTS_KEYS as BreakpointsKey[];
+
+const media: Media = { not: {} } as Media;
+
+export const not = (isNot?: boolean) => (isNot ? 'not all and ' : '');
+
+const getRange = (width: Width, range: 'min' | 'max') => {
+  try {
+    if (Array.isArray(width)) {
+      const [min, max] = width;
+
+      const {
+        [min]: { width: minBreakpoint },
+        [max]: { width: maxBreakpoint }
+      } = breakpoints;
+
+      return `(min-width: ${minBreakpoint}px) and (max-width: ${maxBreakpoint}px)`;
+    }
+
+    return `(${range}-width: ${breakpoints[width].width}px)`;
+  } catch {
+    const msg = `Make sure you've entered the right breakpoints.
+  Your input: ${Array.isArray(width) ? width.join(', ') : width}
+  Available breakpoints: ${availableBreakpoints.join(', ')}`;
+
+    throw new Error(msg);
+  }
+};
+
+export const matcher: Matcher =
+  (width: Width, isNot = false, range: 'min' | 'max' = 'min') =>
+  (...style) => {
+    return css`
+      @media ${not(isNot)}${getRange(width, range)} {
+        ${css(...style)}
+      }
+    `;
+  };
+
+availableBreakpoints.forEach((breakpoint) => {
+  media[breakpoint] = matcher(breakpoint);
+  media.not[breakpoint] = matcher(breakpoint, true);
+});
+
+media.max = (width: Width) => matcher(width, false, 'max');
+media.not.max = (width: Width) => matcher(width, true, 'max');
+
+media.between = (min: BreakpointsKey, max: BreakpointsKey) =>
+  matcher([min, max], false, 'max');
+media.not.between = (min: BreakpointsKey, max: BreakpointsKey) =>
+  matcher([min, max], true, 'max');
+
+media.hide = hide();
+media.not.hide = hide(true);
+
+export default media;