From 0da1479a732b9df5522539e65abaf8780379e812 Mon Sep 17 00:00:00 2001 From: Thomas Cristina de Carvalho Date: Fri, 1 Dec 2023 12:26:38 -0500 Subject: [PATCH] feat:(theme) Add cva header and remove section --- pnpm-lock.yaml | 67 ++++++++++++------- .../hydrogen-theme/.vscode/settings.json | 1 + .../app/components/CmsSection.tsx | 5 +- .../app/components/ProductCard.tsx | 4 +- ...ntentAlignment.tsx => contentAlignment.ts} | 0 .../app/components/cva/header.ts | 12 ++++ .../app/components/cva/section.ts | 21 ------ .../app/components/layout/Header.tsx | 10 ++- templates/hydrogen-theme/package.json | 1 + 9 files changed, 68 insertions(+), 53 deletions(-) rename templates/hydrogen-theme/app/components/cva/{contentAlignment.tsx => contentAlignment.ts} (100%) create mode 100644 templates/hydrogen-theme/app/components/cva/header.ts delete mode 100644 templates/hydrogen-theme/app/components/cva/section.ts diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3883ce9..278b6b5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -132,6 +132,9 @@ importers: class-variance-authority: specifier: ^0.7.0 version: 0.7.0 + cva: + specifier: 1.0.0-beta.1 + version: 1.0.0-beta.1(typescript@5.3.2) graphql: specifier: ^16.8.1 version: 16.8.1 @@ -672,7 +675,7 @@ packages: resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 /@babel/helper-builder-binary-assignment-operator-visitor@7.22.15: resolution: {integrity: sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==} @@ -761,25 +764,25 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/template': 7.22.15 - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 /@babel/helper-hoist-variables@7.22.5: resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 /@babel/helper-member-expression-to-functions@7.23.0: resolution: {integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 /@babel/helper-module-imports@7.22.15: resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 /@babel/helper-module-transforms@7.23.0(@babel/core@7.23.2): resolution: {integrity: sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==} @@ -825,7 +828,7 @@ packages: resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 /@babel/helper-plugin-utils@7.22.5: resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==} @@ -869,19 +872,19 @@ packages: resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 /@babel/helper-skip-transparent-expression-wrappers@7.22.5: resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 /@babel/helper-split-export-declaration@7.22.6: resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 /@babel/helper-string-parser@7.23.4: resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==} @@ -914,8 +917,8 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/template': 7.22.15 - '@babel/traverse': 7.23.2 - '@babel/types': 7.23.0 + '@babel/traverse': 7.23.5 + '@babel/types': 7.23.5 transitivePeerDependencies: - supports-color dev: false @@ -925,8 +928,8 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/template': 7.22.15 - '@babel/traverse': 7.23.4 - '@babel/types': 7.23.4 + '@babel/traverse': 7.23.5 + '@babel/types': 7.23.5 transitivePeerDependencies: - supports-color @@ -1770,7 +1773,7 @@ packages: '@babel/helper-module-imports': 7.22.15 '@babel/helper-plugin-utils': 7.22.5 '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.3) - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 dev: true /@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.5): @@ -4392,7 +4395,7 @@ packages: '@babel/parser': 7.23.5 '@babel/plugin-syntax-import-assertions': 7.23.3(@babel/core@7.23.5) '@babel/traverse': 7.23.5 - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 '@graphql-tools/utils': 10.0.11(graphql@16.8.1) graphql: 16.8.1 tslib: 2.6.2 @@ -4456,7 +4459,7 @@ packages: graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 dependencies: graphql: 16.8.1 - tslib: 2.6.2 + tslib: 2.5.3 dev: false /@graphql-tools/prisma-loader@8.0.2(@types/node@20.10.1)(graphql@16.8.1): @@ -4501,7 +4504,7 @@ packages: '@ardatan/relay-compiler': 12.0.0(graphql@16.8.1) '@graphql-tools/utils': 10.0.11(graphql@16.8.1) graphql: 16.8.1 - tslib: 2.6.2 + tslib: 2.5.3 transitivePeerDependencies: - encoding - supports-color @@ -7330,7 +7333,7 @@ packages: resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} dependencies: '@babel/parser': 7.23.4 - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 '@types/babel__generator': 7.6.7 '@types/babel__template': 7.4.4 '@types/babel__traverse': 7.20.4 @@ -7339,39 +7342,39 @@ packages: /@types/babel__generator@7.6.6: resolution: {integrity: sha512-66BXMKb/sUWbMdBNdMvajU7i/44RkrA3z/Yt1c7R5xejt8qh84iU54yUWCtm0QwGJlDcf/gg4zd/x4mpLAlb/w==} dependencies: - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 dev: false /@types/babel__generator@7.6.7: resolution: {integrity: sha512-6Sfsq+EaaLrw4RmdFWE9Onp63TOUue71AWb4Gpa6JxzgTYtimbM086WnYTy2U67AofR++QKCo08ZP6pwx8YFHQ==} dependencies: - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 dev: false /@types/babel__template@7.4.3: resolution: {integrity: sha512-ciwyCLeuRfxboZ4isgdNZi/tkt06m8Tw6uGbBSBgWrnnZGNXiEyM27xc/PjXGQLqlZ6ylbgHMnm7ccF9tCkOeQ==} dependencies: '@babel/parser': 7.23.4 - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 dev: false /@types/babel__template@7.4.4: resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==} dependencies: - '@babel/parser': 7.23.4 - '@babel/types': 7.23.4 + '@babel/parser': 7.23.5 + '@babel/types': 7.23.5 dev: false /@types/babel__traverse@7.20.3: resolution: {integrity: sha512-Lsh766rGEFbaxMIDH7Qa+Yha8cMVI3qAK6CHt3OR0YfxOIn5Z54iHiyDRycHrBqeIiqGa20Kpsv1cavfBKkRSw==} dependencies: - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 dev: false /@types/babel__traverse@7.20.4: resolution: {integrity: sha512-mSM/iKUk5fDDrEV/e83qY+Cr3I1+Q3qqTuEn++HAWYjEa1+NxZr6CNrcJGf2ZTnq4HoFGC3zaTPZTobCzCFukA==} dependencies: - '@babel/types': 7.23.4 + '@babel/types': 7.23.5 dev: false /@types/better-sqlite3@7.6.8: @@ -9869,6 +9872,18 @@ packages: stream-transform: 2.1.3 dev: false + /cva@1.0.0-beta.1(typescript@5.3.2): + resolution: {integrity: sha512-gznFqTgERU9q4wg7jfgqtt34+RUt9S5t0xDAAEuDwQEAXEgjdDkKXpLLNjwSxsB4Ln/sqWJEH7yhE8Ny0mxd0w==} + peerDependencies: + typescript: '>= 4.5.5 < 6' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + clsx: 2.0.0 + typescript: 5.3.2 + dev: false + /cyclist@1.0.2: resolution: {integrity: sha512-0sVXIohTfLqVIW3kb/0n6IiWF3Ifj5nm2XaSrLq2DI6fKIGa2fYAZdk917rUneaeLVpYfFcyXE2ft0fe3remsA==} dev: false @@ -15622,7 +15637,7 @@ packages: resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==} engines: {node: '>=8'} dependencies: - '@babel/code-frame': 7.23.4 + '@babel/code-frame': 7.23.5 error-ex: 1.3.2 json-parse-even-better-errors: 2.3.1 lines-and-columns: 1.2.4 diff --git a/templates/hydrogen-theme/.vscode/settings.json b/templates/hydrogen-theme/.vscode/settings.json index b446483..11132ff 100644 --- a/templates/hydrogen-theme/.vscode/settings.json +++ b/templates/hydrogen-theme/.vscode/settings.json @@ -1,4 +1,5 @@ { + // If not working, try adding this setting to User settings.json "tailwindCSS.experimental.classRegex": [ ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"], ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"] diff --git a/templates/hydrogen-theme/app/components/CmsSection.tsx b/templates/hydrogen-theme/app/components/CmsSection.tsx index 8947b00..3d24f06 100644 --- a/templates/hydrogen-theme/app/components/CmsSection.tsx +++ b/templates/hydrogen-theme/app/components/CmsSection.tsx @@ -6,7 +6,6 @@ import type {FOOTERS_FRAGMENT} from '~/qroq/footers'; import {useIsDev} from '~/hooks/useIsDev'; import {sections} from '~/lib/sectionRelsolver'; import {useSettingsCssVars} from '~/hooks/useSettingsCssVars'; -import {section} from './cva/section'; import {EncodeDataAttributeCallback} from '@sanity/react-loader'; type CmsSectionsProps = @@ -56,7 +55,7 @@ function SectionWrapper(props: {