Merge pull request #178 from vtex-apps/feature/migrate-to-CSS-Handles

Feature/migrate to css handles
vtex-apps · Jul 23, 2020 · 27ad88f · 27ad88f
2 parents 490f446 + f23e10f
commit 27ad88f
Show file tree

Hide file tree

Showing 26 changed files with 267 additions and 257 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,12 +7,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- To CSS Handles.
+
 ## [1.16.0] - 2020-07-03
 
 ### Added
 
--  Corporate section data css handles
--  Data entry custom css handles.
+- Corporate section data css handles.
+- Data entry custom css handles.
 
 ## [1.15.0] - 2020-06-24
 

diff --git a/manifest.json b/manifest.json
@@ -18,7 +18,8 @@
     "vtex.address-form": "4.x",
     "vtex.react-vtexid": "4.x",
     "vtex.pixel-manager": "1.x",
-    "vtex.store-messages": "0.x"
+    "vtex.store-messages": "0.x",
+    "vtex.css-handles": "0.x"
   },
   "builders": {
     "react": "3.x",

diff --git a/node/package.json b/node/package.json
@@ -8,18 +8,18 @@
     "eslint-config-vtex": "10.x",
     "prettier": "^1.18.2",
     "typescript": "3.8.3",
-    "vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.5.4/public/_types/react",
+    "vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.6.2/public/_types/react",
     "vtex.country-codes": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react",
-    "vtex.my-account": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.13.5/public/@types/vtex.my-account",
-    "vtex.my-account-commons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account-commons@1.3.0/public/@types/vtex.my-account-commons",
-    "vtex.my-cards": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].0/public/@types/vtex.my-cards",
-    "vtex.my-orders-app": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-orders-app@3.5.2/public/_types/react",
+    "vtex.my-account": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.15.0/public/@types/vtex.my-account",
+    "vtex.my-account-commons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account-commons@1.4.1/public/@types/vtex.my-account-commons",
+    "vtex.my-cards": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].1/public/@types/vtex.my-cards",
+    "vtex.my-orders-app": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-orders-app@3.6.2/public/_types/react",
     "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.pixel-manager",
-    "vtex.profile-form": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].1/public/_types/react",
-    "vtex.react-vtexid": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.react-vtexid@4.22.0/public/_types/react",
-    "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].1/public/@types/vtex.store-graphql",
-    "vtex.store-messages": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].0/public/_types/react",
-    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.116.0/public/@types/vtex.styleguide"
+    "vtex.profile-form": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].2/public/_types/react",
+    "vtex.react-vtexid": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.react-vtexid@4.28.1/public/_types/react",
+    "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].4/public/@types/vtex.store-graphql",
+    "vtex.store-messages": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].2/public/_types/react",
+    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.124.0/public/@types/vtex.styleguide"
   },
   "dependencies": {
     "@vtex/api": "^3.48.2"

diff --git a/node/yarn.lock b/node/yarn.lock
@@ -2080,53 +2080,53 @@ uuid@^3.1.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
   integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==
 
-"vtex.address-form@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.5.4/public/_types/react":
+"vtex.address-form@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.6.2/public/_types/react":
   version "0.0.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.5.4/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.6.2/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
 
 "vtex.country-codes@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react":
   version "0.0.0"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
 
-"vtex.my-account-commons@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account-commons@1.3.0/public/@types/vtex.my-account-commons":
-  version "1.3.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account-commons@1.3.0/public/@types/vtex.my-account-commons#6ca2e5e0ec266b2aa4048b4094052771aa524aae"
+"vtex.my-account-commons@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account-commons@1.4.1/public/@types/vtex.my-account-commons":
+  version "1.4.1"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account-commons@1.4.1/public/@types/vtex.my-account-commons#789abf1a5725623250a56c300e100b74d1ce73bb"
 
-"vtex.my-account@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.13.5/public/@types/vtex.my-account":
-  version "1.13.5"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.13.5/public/@types/vtex.my-account#fb351d9c7d6992479b4375041bcc2507f9515ac3"
+"vtex.my-account@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.15.0/public/@types/vtex.my-account":
+  version "1.15.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.15.0/public/@types/vtex.my-account#6088dd61c1184cf8cb60139256c6edad29f9af8c"
 
-"vtex.my-cards@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].0/public/@types/vtex.my-cards":
-  version "1.9.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].0/public/@types/vtex.my-cards#2aecb3fc14d856e25ac1c3bf1ff78036c6712f1e"
+"vtex.my-cards@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].1/public/@types/vtex.my-cards":
+  version "1.9.1"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].1/public/@types/vtex.my-cards#9d279e9341a87cea32d02cb51368ef7e568492ff"
 
-"vtex.my-orders-app@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-orders-app@3.5.2/public/_types/react":
+"vtex.my-orders-app@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-orders-app@3.6.2/public/_types/react":
   version "0.0.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-orders-app@3.5.2/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-orders-app@3.6.2/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
 
 "vtex.pixel-manager@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.pixel-manager":
   version "1.1.4"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.pixel-manager#96907e17f4e5c584162a47dc425cb5afb2267d00"
 
-"vtex.profile-form@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].1/public/_types/react":
+"vtex.profile-form@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].2/public/_types/react":
   version "0.0.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].1/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].2/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
 
-"vtex.react-vtexid@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.react-vtexid@4.22.0/public/_types/react":
+"vtex.react-vtexid@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.react-vtexid@4.28.1/public/_types/react":
   version "0.0.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.react-vtexid@4.22.0/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.react-vtexid@4.28.1/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
 
-"vtex.store-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].1/public/@types/vtex.store-graphql":
-  version "2.123.1"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].1/public/@types/vtex.store-graphql#0d3137dc505f7e1a38cdc8499ad12e6327cac657"
+"vtex.store-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].4/public/@types/vtex.store-graphql":
+  version "2.123.4"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].4/public/@types/vtex.store-graphql#f570a189a1b37d84e5215917efac2e5fb21af548"
 
-"vtex.store-messages@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].0/public/_types/react":
+"vtex.store-messages@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].2/public/_types/react":
   version "0.0.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].0/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].2/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
 
-"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.116.0/public/@types/vtex.styleguide":
-  version "9.116.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.116.0/public/@types/vtex.styleguide#f17be9afb6ee66c71f2ea8d5ba81b2d18b2caa76"
+"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.124.0/public/@types/vtex.styleguide":
+  version "9.124.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.124.0/public/@types/vtex.styleguide#5c79d53204ea7e52b5fe5118c6ba0579cbc9ed8c"
 
 which@^1.2.9:
   version "1.3.1"

diff --git a/react/components/Menu/UserInfo.tsx b/react/components/Menu/UserInfo.tsx
@@ -2,34 +2,43 @@ import React, { FunctionComponent } from 'react'
 import { graphql } from 'react-apollo'
 import { compose, branch, renderComponent } from 'recompose'
 import { FormattedMessage } from 'react-intl'
+import { useCssHandles } from 'vtex.css-handles'
 
 import GREETING, { Result } from '../../graphql/customerGreeting.gql'
 import Loading from './UserInfoLoading'
-import styles from '../../styles.css'
 import PictureRenderer from './ProfilePicture/PictureRenderer'
 
+const CSS_HANDLES = [
+  'userInfo',
+  'userImage',
+  'userGreeting',
+  'userName',
+  'userGreeting',
+] as const
+
 const UserInfo: FunctionComponent<Props> = ({ profilePicture, firstName }) => {
+  const cssHandles = useCssHandles(CSS_HANDLES)
   return (
-    <div className={`${styles.userInfo} flex flex-wrap items-end mb7`}>
-      <div className={`${styles.userImage} relative mr5 h3 w3`}>
+    <div className={`${cssHandles.userInfo} flex flex-wrap items-end mb7`}>
+      <div className={`${cssHandles.userImage} relative mr5 h3 w3`}>
         <PictureRenderer imagePath={profilePicture} />
       </div>
       {firstName ? (
         <div>
           <div
             className={`
-              ${styles.userGreeting} f5 fw3 c-muted-1 mb2 mt0-l mt2-m
+              ${cssHandles.userGreeting} f5 fw3 c-muted-1 mb2 mt0-l mt2-m
             `}
           >
             <FormattedMessage id="[email protected]::userInfo.greeting" />
             ,
           </div>
-          <div className={`${styles.userName} f4 c-on-base fw3 nowrap`}>
+          <div className={`${cssHandles.userName} f4 c-on-base fw3 nowrap`}>
             {firstName}!
           </div>
         </div>
       ) : (
-        <div className={`${styles.userGreeting} f4 fw3 nowrap`}>
+        <div className={`${cssHandles.userGreeting} f4 fw3 nowrap`}>
           <FormattedMessage id="[email protected]::userInfo.greeting" />!
         </div>
       )}

diff --git a/react/components/Menu/UserInfoLoading.tsx b/react/components/Menu/UserInfoLoading.tsx
@@ -1,14 +1,16 @@
-import React from 'react'
+import React, { FC } from 'react'
 import { SkeletonPiece } from 'vtex.my-account-commons'
+import { useCssHandles } from 'vtex.css-handles'
 
-import styles from '../../styles.css'
+const CSS_HANDLES = ['shimmer'] as const
 
-const UserInfoLoading = () => {
+const UserInfoLoading: FC = () => {
+  const cssHandles = useCssHandles(CSS_HANDLES)
   return (
     <div className="flex items-end mb7">
       <div className="mr5 relative">
         <div className="h3 w3 br-100 bg-light-silver">
-          <div className={`${styles.shimmer}`} />
+          <div className={cssHandles.shimmer} />
         </div>
       </div>
       <div className="flex-auto w3">

diff --git a/react/components/Menu/index.tsx b/react/components/Menu/index.tsx
@@ -6,11 +6,13 @@ import { compose } from 'recompose'
 import { ExtensionPoint } from 'vtex.render-runtime'
 import { AuthService, AuthState } from 'vtex.react-vtexid'
 import { ModalDialog } from 'vtex.styleguide'
+import { withCssHandles } from 'vtex.css-handles'
 
 import UserInfo from './UserInfo'
 import MenuLink from './MenuLink'
 import { withSettings, Settings } from '../shared/withSettings'
-import styles from '../../styles.css'
+
+const CSS_HANDLES = ['css', 'menu', 'menuLinks', 'menuLink'] as const
 
 function renderLinks(links: Link[], displayMyCards: boolean | null) {
   let linksToDisplay = links
@@ -31,14 +33,14 @@ class Menu extends Component<Props, { isModalOpen: boolean }> {
   }
 
   public render() {
-    const { intl, settings } = this.props
+    const { cssHandles, intl, settings } = this.props
 
     return (
       <aside
-        className={`${styles.menu} pv9 pv0-m-2 ph9 ph7-m ph8-l w-20-m w-100`}
+        className={`${cssHandles.menu} pv9 pv0-m-2 ph9 ph7-m ph8-l w-20-m w-100`}
       >
         <UserInfo />
-        <nav className={`${styles.menuLinks}`}>
+        <nav className={cssHandles.menuLinks}>
           <ExtensionPoint
             id="my-account-menu"
             render={(links: Link[]) =>
@@ -51,7 +53,7 @@ class Menu extends Component<Props, { isModalOpen: boolean }> {
                 <Fragment>
                   <div
                     className={`
-                    ${styles.menuLink}
+                    ${cssHandles.menuLink}
                     f6 no-underline db hover-near-black pv5 mv3 pl5 bl bw2 nowrap c-muted-1 b--transparent pointer
                   `}
                     onClick={this.handleModalToggle}
@@ -96,6 +98,11 @@ interface Link {
 
 interface Props extends InjectedIntlProps {
   settings?: Settings
+  cssHandles: CssHandles<typeof CSS_HANDLES>
 }
 
-export default compose<Props, {}>(injectIntl, withSettings)(Menu)
+export default compose<Props, {}>(
+  injectIntl,
+  withSettings,
+  withCssHandles(CSS_HANDLES)
+)(Menu)
diff --git a/react/components/Profile/NewsletterBox.tsx b/react/components/Profile/NewsletterBox.tsx
@@ -3,12 +3,18 @@ import { defineMessages, InjectedIntlProps, injectIntl } from 'react-intl'
 import { graphql } from 'react-apollo'
 import { compose } from 'recompose'
 import { Checkbox } from 'vtex.styleguide'
+import { withCssHandles } from 'vtex.css-handles'
 
 import ContentBox from '../shared/ContentBox'
 import GET_NEWSLETTER from '../../graphql/getNewsletterOpt.gql'
 import NEWSLETTER_MUTATION from '../../graphql/setOptInNewsletter.gql'
-import styles from '../../styles.css'
-import className from '../../styles/ContentBox.css'
+
+const CSS_HANDLES = [
+  'newsletterBoxContainer',
+  'newsletterContainerTitle',
+  'newsletterContainerMessage',
+  'passwordBox',
+] as const
 
 const messages = defineMessages({
   optinNewsLetter: {
@@ -61,21 +67,22 @@ class NewsletterBox extends Component<Props, State> {
   public render() {
     const { checked } = this.state
     const {
+      cssHandles,
       intl: { formatMessage },
     } = this.props
 
     return (
-      <div className={`${className.newsletterBoxContainer}`}>
+      <div className={cssHandles.newsletterBoxContainer}>
         <ContentBox shouldAllowGrowing>
-          <div className={`${className.newsletterContainerTitle}`}>
+          <div className={cssHandles.newsletterContainerTitle}>
             {formatMessage(messages.newsletter)}
           </div>
           <div
-            className={`c-muted-2 pt2 pb6 ${className.newsletterContainerMessage}`}
+            className={`c-muted-2 pt2 pb6 ${cssHandles.newsletterContainerMessage}`}
           >
             {formatMessage(messages.newsletterQuestion)}
           </div>
-          <div className={`${styles.passwordBox} w-100`}>
+          <div className={`${cssHandles.passwordBox} w-100`}>
             <Checkbox
               checked={checked}
               id="newsletterOptIn"
@@ -94,12 +101,6 @@ interface State {
   checked: boolean
 }
 
-type Props = ExternalProps & QueryResult & Mutations & InjectedIntlProps
-
-interface ExternalProps {
-  userEmail: string
-}
-
 interface QueryData {
   profile: Pick<Profile, 'customFields'>
 }
@@ -112,7 +113,16 @@ interface Mutations {
   setOptInNewsletter: (args: Variables<SetOptInNewsletterArgs>) => Promise<void>
 }
 
-const enhance = compose<Props, ExternalProps>(
+interface OuterProps {
+  userEmail: string
+}
+interface InnerProps extends InjectedIntlProps, QueryResult, Mutations {
+  cssHandles: CssHandles<typeof CSS_HANDLES>
+}
+
+type Props = OuterProps & InnerProps
+
+const enhance = compose<Props, OuterProps>(
   graphql<Props, QueryData, unknown, QueryResult>(GET_NEWSLETTER, {
     props: ({ data }) => ({
       isNewsletterOptIn: data?.profile?.customFields?.[0].value === 'true',
@@ -124,7 +134,8 @@ const enhance = compose<Props, ExternalProps>(
       refetchQueries: ['NewsletterOpt'],
     },
   }),
-  injectIntl
+  injectIntl,
+  withCssHandles(CSS_HANDLES)
 )
 
 export default enhance(NewsletterBox)
diff --git a/react/components/Profile/PasswordBox.tsx b/react/components/Profile/PasswordBox.tsx
@@ -5,11 +5,12 @@ import {
   FormattedMessage,
   defineMessages,
 } from 'react-intl'
+import { useCssHandles } from 'vtex.css-handles'
 
 import ContentBox from '../shared/ContentBox'
 import DataEntry from '../shared/DataEntry'
-import styles from '../../styles.css'
-import className from '../../styles/ContentBox.css'
+
+const CSS_HANDLES = ['passwordBoxContainer', 'passwordBox'] as const
 
 const PASSWORD_MASK = '*******************'
 const messages = defineMessages({
@@ -24,18 +25,19 @@ const PasswordBox: FunctionComponent<Props> = ({
   onEditClick,
   intl,
 }) => {
+  const cssHandles = useCssHandles(CSS_HANDLES)
   const lowerButtonId = passwordLastUpdate
     ? '[email protected]::personalData.redefinePassword'
     : '[email protected]::personalData.definePassword'
 
   return (
-    <div className={`${className.passwordBoxContainer}`}>
+    <div className={cssHandles.passwordBoxContainer}>
       <ContentBox
         shouldAllowGrowing
         lowerButton={<FormattedMessage id={lowerButtonId} />}
         onLowerButtonClick={onEditClick}
       >
-        <div className={`${styles.passwordBox} w-100`}>
+        <div className={`${cssHandles.passwordBox} w-100`}>
           <DataEntry label={intl.formatMessage(messages.password)}>
             {passwordLastUpdate ? (
               PASSWORD_MASK