From 8a6e87ad928b5440406e6093feac04f33def43c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Gon=C3=A7alves?= Date: Mon, 8 Mar 2021 00:23:34 +0000 Subject: [PATCH] Improve styled components build related docs: - https://github.com/formium/tsdx/issues/543 - https://github.com/formium/tsdx/issues/383 - https://styled-components.com/docs/tooling#babel-macro --- .babelrc | 13 + jest.config.js | 7 + package.json | 2 + .../__snapshots__/avatar.test.tsx.snap | 13 +- src/atoms/avatar/__tests__/avatar.test.tsx | 1 + src/atoms/avatar/styles.tsx | 2 +- .../__snapshots__/button-link.test.tsx.snap | 75 ++- .../__tests__/button-link.test.tsx | 3 +- src/atoms/button-link/styles.tsx | 2 +- src/atoms/button/styles.tsx | 2 +- .../__snapshots__/checkbox.test.tsx.snap | 96 +++- .../checkbox/__tests__/checkbox.test.tsx | 5 +- src/atoms/checkbox/styles.tsx | 2 +- .../__snapshots__/error-field.test.tsx.snap | 14 +- .../__tests__/error-field.test.tsx | 1 + src/atoms/error-field/styles.tsx | 2 +- src/atoms/icon/stories/styles.tsx | 2 +- .../__snapshots__/label.test.tsx.snap | 24 +- src/atoms/label/__tests__/label.test.tsx | 1 + src/atoms/label/styles.tsx | 2 +- src/atoms/spinner/styles.tsx | 2 +- .../__snapshots__/tag-number.test.tsx.snap | 41 +- .../tag-number/__tests__/tag-number.test.tsx | 1 + src/atoms/tag-number/styles.tsx | 2 +- .../__tests__/__snapshots__/tag.test.tsx.snap | 25 +- src/atoms/tag/__tests__/tag.test.tsx | 1 + src/atoms/tag/styles.tsx | 2 +- .../__snapshots__/text-field.test.tsx.snap | 65 ++- .../text-field/__tests__/text-field.test.tsx | 5 +- src/atoms/text-field/styles.tsx | 2 +- src/globalStyles.ts | 2 +- .../__snapshots__/actions-menu.test.tsx.snap | 344 +++++++++++- .../__tests__/actions-menu.test.tsx | 1 + src/molecules/actions-menu/styles.tsx | 2 +- .../__snapshots__/card-value.test.tsx.snap | 58 +- .../card-value/__tests__/card-value.test.tsx | 3 +- src/molecules/card-value/styles.tsx | 2 +- .../__snapshots__/empty-table.test.tsx.snap | 185 ++++++- .../__tests__/empty-table.test.tsx | 1 + src/molecules/empty-table/styles.tsx | 2 +- .../__snapshots__/form-group.test.tsx.snap | 101 +++- .../form-group/__tests__/form-group.test.tsx | 3 +- src/molecules/form-group/styles.tsx | 2 +- .../__snapshots__/modal-footer.test.tsx.snap | 206 ++++++- .../__tests__/modal-footer.test.tsx | 5 +- src/molecules/modal-footer/styles.tsx | 2 +- src/molecules/note-card/styles.tsx | 2 +- .../number-input-spinner.test.tsx.snap | 95 +++- .../__tests__/number-input-spinner.test.tsx | 4 +- src/molecules/number-input-spinner/styles.tsx | 2 +- .../__snapshots__/table.test.tsx.snap | 502 +++++++++++++++++- src/molecules/table/__tests__/table.test.tsx | 3 +- src/molecules/table/styles.tsx | 2 +- .../horizontal-nav.test.tsx.snap | 252 ++++++++- .../__tests__/horizontal-nav.test.tsx | 1 + src/organisms/horizontal-nav/styles.tsx | 2 +- .../__tests__/modal-drawer.test.tsx | 5 +- src/organisms/modal-drawer/styles.tsx | 2 +- src/organisms/modal/__tests__/modal.test.tsx | 5 +- src/organisms/modal/styles.tsx | 2 +- yarn.lock | 99 ++-- 61 files changed, 2173 insertions(+), 139 deletions(-) create mode 100644 .babelrc create mode 100644 jest.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..12ec874b --- /dev/null +++ b/.babelrc @@ -0,0 +1,13 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "node": "10" + } + } + ] + ], + "plugins": [["macros"]] +} diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 00000000..0248e52c --- /dev/null +++ b/jest.config.js @@ -0,0 +1,7 @@ +module.exports = { + globals: { + 'ts-jest': { + babelConfig: '.babelrc', + }, + }, +}; diff --git a/package.json b/package.json index 9c394399..77d6abf6 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "@types/styled-components": "^5.1.4", "babel-jest": "^26.6.3", "babel-loader": "^8.2.2", + "babel-plugin-macros": "^3.0.1", "chromatic": "^5.6.3", "cross-var": "^1.1.0", "dotenv-cli": "^4.0.0", @@ -99,6 +100,7 @@ "registry": "https://npm.pkg.github.com/" }, "dependencies": { + "jest-styled-components": "^7.0.3", "polished": "^4.1.1", "styled-components": "^5.2.1" } diff --git a/src/atoms/avatar/__tests__/__snapshots__/avatar.test.tsx.snap b/src/atoms/avatar/__tests__/__snapshots__/avatar.test.tsx.snap index 7295a0e6..4dd91198 100644 --- a/src/atoms/avatar/__tests__/__snapshots__/avatar.test.tsx.snap +++ b/src/atoms/avatar/__tests__/__snapshots__/avatar.test.tsx.snap @@ -2,9 +2,18 @@ exports[`Avatar renders 1`] = ` - avatar alt diff --git a/src/atoms/avatar/__tests__/avatar.test.tsx b/src/atoms/avatar/__tests__/avatar.test.tsx index 339e2bdb..ce48958c 100644 --- a/src/atoms/avatar/__tests__/avatar.test.tsx +++ b/src/atoms/avatar/__tests__/avatar.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; +import 'jest-styled-components'; import { Avatar } from '../../..'; describe('Avatar', () => { diff --git a/src/atoms/avatar/styles.tsx b/src/atoms/avatar/styles.tsx index 18a0fe8a..993c589d 100644 --- a/src/atoms/avatar/styles.tsx +++ b/src/atoms/avatar/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from 'styled-components/macro'; import { colors } from '../../ions/variables'; import { rem } from 'polished'; diff --git a/src/atoms/button-link/__tests__/__snapshots__/button-link.test.tsx.snap b/src/atoms/button-link/__tests__/__snapshots__/button-link.test.tsx.snap index a81dfcb3..e6292866 100644 --- a/src/atoms/button-link/__tests__/__snapshots__/button-link.test.tsx.snap +++ b/src/atoms/button-link/__tests__/__snapshots__/button-link.test.tsx.snap @@ -2,8 +2,79 @@ exports[`Button Link renders 1`] = ` - *:not(:last-child) { + margin-right: 5px; +} + +.c0 span { + position: relative; + font-size: 0.75rem; + font-weight: 700; + color: var(--txt); + pointer-events: none; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} + +.c0 svg { + width: auto; + min-width: 1.25rem; + height: 1.25rem; + fill: var(--txt); + -webkit-transition: 0.3s; + transition: 0.3s; +} + +@media (min-width:1280px) { + .c0 { + min-width: 2.25rem; + } +} + + { it('renders', () => { diff --git a/src/atoms/button-link/styles.tsx b/src/atoms/button-link/styles.tsx index a48829ea..02a81204 100644 --- a/src/atoms/button-link/styles.tsx +++ b/src/atoms/button-link/styles.tsx @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components'; +import styled, { css } from 'styled-components/macro'; import { device } from '../../ions/breakpoints'; import { ButtonColor, ButtonVariant } from '../button/types'; import { colors, fontWeigth } from '../../ions/variables'; diff --git a/src/atoms/button/styles.tsx b/src/atoms/button/styles.tsx index 55e53499..84283984 100644 --- a/src/atoms/button/styles.tsx +++ b/src/atoms/button/styles.tsx @@ -1,4 +1,4 @@ -import styled, { css, keyframes } from 'styled-components'; +import styled, { css, keyframes } from 'styled-components/macro'; import { device } from '../../ions/breakpoints'; import { ButtonColor, ButtonVariant } from './types'; import { colors, fontWeigth } from '../../ions/variables'; diff --git a/src/atoms/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap b/src/atoms/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap index 62e7317f..41c243e4 100644 --- a/src/atoms/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap +++ b/src/atoms/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap @@ -2,23 +2,109 @@ exports[`Checkbox renders 1`] = ` - diff --git a/src/atoms/checkbox/__tests__/checkbox.test.tsx b/src/atoms/checkbox/__tests__/checkbox.test.tsx index bf4f45e9..a6511bb3 100644 --- a/src/atoms/checkbox/__tests__/checkbox.test.tsx +++ b/src/atoms/checkbox/__tests__/checkbox.test.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import '@testing-library/jest-dom'; import { render, screen } from '@testing-library/react'; -import { Checkbox } from '../../..'; import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom'; +import 'jest-styled-components'; +import { Checkbox } from '../../..'; describe('Checkbox', () => { it('renders', () => { diff --git a/src/atoms/checkbox/styles.tsx b/src/atoms/checkbox/styles.tsx index c9ca0b93..b25b28db 100644 --- a/src/atoms/checkbox/styles.tsx +++ b/src/atoms/checkbox/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from 'styled-components/macro'; import { lighten, darken, rem } from 'polished'; import { colors } from '../../ions/variables'; diff --git a/src/atoms/error-field/__tests__/__snapshots__/error-field.test.tsx.snap b/src/atoms/error-field/__tests__/__snapshots__/error-field.test.tsx.snap index f21b6942..ddc75e4d 100644 --- a/src/atoms/error-field/__tests__/__snapshots__/error-field.test.tsx.snap +++ b/src/atoms/error-field/__tests__/__snapshots__/error-field.test.tsx.snap @@ -2,8 +2,18 @@ exports[`ErrorField renders 1`] = ` - operation failed. diff --git a/src/atoms/error-field/__tests__/error-field.test.tsx b/src/atoms/error-field/__tests__/error-field.test.tsx index 83a975d9..14445030 100644 --- a/src/atoms/error-field/__tests__/error-field.test.tsx +++ b/src/atoms/error-field/__tests__/error-field.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; +import 'jest-styled-components'; import { ErrorField } from '../../..'; describe('ErrorField', () => { diff --git a/src/atoms/error-field/styles.tsx b/src/atoms/error-field/styles.tsx index 041c2208..2f241a4a 100644 --- a/src/atoms/error-field/styles.tsx +++ b/src/atoms/error-field/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from 'styled-components/macro'; import { ErrorFieldColor } from './types'; import { colors } from '../../ions/variables'; import { rem } from 'polished'; diff --git a/src/atoms/icon/stories/styles.tsx b/src/atoms/icon/stories/styles.tsx index 1a17e434..9a8f702d 100644 --- a/src/atoms/icon/stories/styles.tsx +++ b/src/atoms/icon/stories/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from 'styled-components/macro'; export const List = styled.ul` padding: 0; diff --git a/src/atoms/label/__tests__/__snapshots__/label.test.tsx.snap b/src/atoms/label/__tests__/__snapshots__/label.test.tsx.snap index 6ff02ea1..fdd237fc 100644 --- a/src/atoms/label/__tests__/__snapshots__/label.test.tsx.snap +++ b/src/atoms/label/__tests__/__snapshots__/label.test.tsx.snap @@ -2,8 +2,28 @@ exports[`Label renders 1`] = ` - diff --git a/src/atoms/label/__tests__/label.test.tsx b/src/atoms/label/__tests__/label.test.tsx index 4979837c..a7bec049 100644 --- a/src/atoms/label/__tests__/label.test.tsx +++ b/src/atoms/label/__tests__/label.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; +import 'jest-styled-components'; import { Label } from '../../..'; describe('Label', () => { diff --git a/src/atoms/label/styles.tsx b/src/atoms/label/styles.tsx index d7a80a9e..da82f7c6 100644 --- a/src/atoms/label/styles.tsx +++ b/src/atoms/label/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from 'styled-components/macro'; import { rem } from 'polished'; import { colors, fontWeigth } from '../../ions/variables'; diff --git a/src/atoms/spinner/styles.tsx b/src/atoms/spinner/styles.tsx index 3aaff3c9..f15aad6f 100644 --- a/src/atoms/spinner/styles.tsx +++ b/src/atoms/spinner/styles.tsx @@ -1,4 +1,4 @@ -import styled, { keyframes } from 'styled-components'; +import styled, { keyframes } from 'styled-components/macro'; import { rem } from 'polished'; import { colors } from '../../ions/variables'; diff --git a/src/atoms/tag-number/__tests__/__snapshots__/tag-number.test.tsx.snap b/src/atoms/tag-number/__tests__/__snapshots__/tag-number.test.tsx.snap index 6487e03a..e48e7349 100644 --- a/src/atoms/tag-number/__tests__/__snapshots__/tag-number.test.tsx.snap +++ b/src/atoms/tag-number/__tests__/__snapshots__/tag-number.test.tsx.snap @@ -2,8 +2,45 @@ exports[`Tag Number renders 1`] = ` -
{ diff --git a/src/atoms/tag-number/styles.tsx b/src/atoms/tag-number/styles.tsx index e5d33479..70713faf 100644 --- a/src/atoms/tag-number/styles.tsx +++ b/src/atoms/tag-number/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from 'styled-components/macro'; import { rem, lighten } from 'polished'; import { colors, fontWeigth } from '../../ions/variables'; diff --git a/src/atoms/tag/__tests__/__snapshots__/tag.test.tsx.snap b/src/atoms/tag/__tests__/__snapshots__/tag.test.tsx.snap index 2c57ebbf..c9ae0689 100644 --- a/src/atoms/tag/__tests__/__snapshots__/tag.test.tsx.snap +++ b/src/atoms/tag/__tests__/__snapshots__/tag.test.tsx.snap @@ -2,8 +2,29 @@ exports[`Tag renders 1`] = ` - diff --git a/src/atoms/tag/__tests__/tag.test.tsx b/src/atoms/tag/__tests__/tag.test.tsx index 95df6477..9859c849 100644 --- a/src/atoms/tag/__tests__/tag.test.tsx +++ b/src/atoms/tag/__tests__/tag.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; +import 'jest-styled-components'; import { Tag } from '../../..'; describe('Tag', () => { diff --git a/src/atoms/tag/styles.tsx b/src/atoms/tag/styles.tsx index 26e372fd..c83f3328 100644 --- a/src/atoms/tag/styles.tsx +++ b/src/atoms/tag/styles.tsx @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components'; +import styled, { css } from 'styled-components/macro'; import { rem } from 'polished'; import { TagVariant, TagColor } from './types'; import { colors } from '../../ions/variables'; diff --git a/src/atoms/text-field/__tests__/__snapshots__/text-field.test.tsx.snap b/src/atoms/text-field/__tests__/__snapshots__/text-field.test.tsx.snap index e875b765..3dd3dcf6 100644 --- a/src/atoms/text-field/__tests__/__snapshots__/text-field.test.tsx.snap +++ b/src/atoms/text-field/__tests__/__snapshots__/text-field.test.tsx.snap @@ -2,8 +2,69 @@ exports[`TextField renders 1`] = ` - { it('renders', () => { diff --git a/src/atoms/text-field/styles.tsx b/src/atoms/text-field/styles.tsx index f75960b9..516bd169 100644 --- a/src/atoms/text-field/styles.tsx +++ b/src/atoms/text-field/styles.tsx @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components'; +import styled, { css } from 'styled-components/macro'; import { lighten, rem } from 'polished'; import { colors } from '../../ions/variables'; import icons from '../../ions/icons'; diff --git a/src/globalStyles.ts b/src/globalStyles.ts index de3b2c07..e8b2ed63 100644 --- a/src/globalStyles.ts +++ b/src/globalStyles.ts @@ -1,4 +1,4 @@ -import { createGlobalStyle } from 'styled-components'; +import { createGlobalStyle } from 'styled-components/macro'; import { fontWeigth } from './ions/variables'; const { regular } = fontWeigth; diff --git a/src/molecules/actions-menu/__tests__/__snapshots__/actions-menu.test.tsx.snap b/src/molecules/actions-menu/__tests__/__snapshots__/actions-menu.test.tsx.snap index 97b01974..13dcf553 100644 --- a/src/molecules/actions-menu/__tests__/__snapshots__/actions-menu.test.tsx.snap +++ b/src/molecules/actions-menu/__tests__/__snapshots__/actions-menu.test.tsx.snap @@ -2,12 +2,178 @@ exports[`Actions Menu renders closed menu 1`] = ` -
*:not(:last-child) { + margin-right: 5px; +} + +.c1 .spinner { + border-top-color: var(--button); +} + +.c1 span { + position: relative; + font-size: 0.75rem; + font-weight: 700; + color: var(--button); + pointer-events: none; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} + +.c1 svg { + width: auto; + min-width: 1.25rem; + height: 1.25rem; + fill: var(--button); + -webkit-transition: 0.3s; + transition: 0.3s; +} + +.c0 { + height: 50px; +} + +.c0 button { + margin-top: 7px; +} + +.c0 ul { + position: absolute; + border: 1px solid #e0e0e0; + border-radius: 4px; + background-color: hsl(0,0%,100%); + margin-top: 5px; + min-width: 200px; + max-width: 250px; + padding: 0; + -moz-box-shadow: 0 0 15px 0 #dbdbdb; + -webkit-box-shadow: 0 0 15px 0 #dbdbdb; + box-shadow: 0 0 15px 0 #dbdbdb; + z-index: 1; +} + +.c0 ul li { + list-style: none; + min-height: 45px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} + +.c0 ul li:hover { + background-color: #e0e0e0; + cursor: pointer; +} + +.c0 ul li:first-child { + border-radius: 4px 4px 0 0; +} + +.c0 ul li:last-child { + border-radius: 0 0 4px 4px; +} + +.c0 ul li.danger { + border-top: 1px solid #e0e0e0; +} + +.c0 ul li.danger a { + color: hsl(354,83%,64%); +} + +.c0 ul li a { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0 20px; + color: hsl(0,0%,16%); + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; +} + +.c0 ul li a span { + display: table-cell; + overflow: hidden; + text-overflow: ellipsis; +} + +@media (min-width:1280px) { + .c1 { + min-width: 2.25rem; + } +} + +