feat(helpers): export helpers css classes (#582)

shopware · Feb 15, 2024 · 97b5949 · 97b5949
1 parent d4e6812
commit 97b5949
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 3 deletions.
diff --git a/.changeset/tall-mice-pump.md b/.changeset/tall-mice-pump.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/helpers-next": minor
+---
+
+Export css classes as a separate file
diff --git a/packages/helpers/README.md b/packages/helpers/README.md
@@ -6,6 +6,30 @@ For getting started documentation visit [https://frontends.shopware.com/](https:
 
 Documentation specific for this package: [helpers](https://frontends.shopware.com/packages/helpers.html)
 
+## Reusable classes
+
+The `helpersCssClasses` variable, defined in the `cms/layoutClasses.ts` helper file, comprises an array of class names utilized within the CMS.
+
+To enhance type support, a union type `HelpersCssClasses` is defined, which encompasses all class names present in the `helpersCssClasses` array.
+
+```ts
+const visibilityMap: Record<CmsVisibility, HelpersCssClasses> = {
+  mobile: "max-md:hidden",
+  tablet: "md:max-lg:hidden",
+  desktop: "lg:hidden",
+};
+```
+
+These classes can be integrated into a custom template, thereby ensuring consistency across different packages. For example as a `safelist` classes in unocss configuration file
+
+```ts
+import { helpersCssClasses } from "@shopware-pwa/helpers-next";
+
+export default defineConfig({
+  safelist: helpersCssClasses,
+});
+```
+
 <!-- AUTO GENERATED CHANGELOG -->
 
 ## Changelog

diff --git a/packages/helpers/src/cms/getCmsLayoutConfiguration.ts b/packages/helpers/src/cms/getCmsLayoutConfiguration.ts
@@ -1,3 +1,5 @@
+import type { HelpersCssClasses } from "./layoutClasses";
+
 // CmsBlock make as a generic type
 type GenericCms = {
   visibility?: {
@@ -60,8 +62,8 @@ export function _getVisibilityClasses(
     return visibilityCssClasses;
   }
 
-  const visibilityMap: Record<CmsVisibility, string> = {
-    mobile: "max-md:hidden", // TODO: #549 - create exported helper classes to be included in safelist
+  const visibilityMap: Record<CmsVisibility, HelpersCssClasses> = {
+    mobile: "max-md:hidden",
     tablet: "md:max-lg:hidden",
     desktop: "lg:hidden",
   };

diff --git a/packages/helpers/src/cms/index.ts b/packages/helpers/src/cms/index.ts
@@ -15,6 +15,7 @@ export { getCmsLayoutConfiguration } from "./getCmsLayoutConfiguration";
 export type { LayoutConfiguration } from "./getCmsLayoutConfiguration";
 export * from "./getBackgroundImageUrl";
 export * from "./buildUrlPrefix";
+export * from "./layoutClasses";
 
 /**
  * Returns the main page object depending of the type of the CMS page.

diff --git a/packages/helpers/src/cms/layoutClasses.ts b/packages/helpers/src/cms/layoutClasses.ts
@@ -0,0 +1,6 @@
+export const helpersCssClasses = [
+  "max-md:hidden",
+  "md:max-lg:hidden",
+  "lg:hidden",
+];
+export type HelpersCssClasses = (typeof helpersCssClasses)[number];
diff --git a/packages/helpers/src/index.test.ts b/packages/helpers/src/index.test.ts
@@ -36,6 +36,11 @@ describe("helpers - test global API", () => {
         "getSmallestThumbnailUrl": [Function],
         "getSrcSetForMedia": [Function],
         "getTranslatedProperty": [Function],
+        "helpersCssClasses": [
+          "max-md:hidden",
+          "md:max-lg:hidden",
+          "lg:hidden",
+        ],
         "isCategory": [Function],
         "isLandingPage": [Function],
         "isProduct": [Function],

diff --git a/templates/vue-demo-store/uno.config.ts b/templates/vue-demo-store/uno.config.ts
@@ -6,6 +6,7 @@ import {
   presetUno,
 } from "unocss";
 import transformerDirectives from "@unocss/transformer-directives";
+import { helpersCssClasses } from "@shopware-pwa/helpers-next";
 
 export default defineConfig({
   theme: {
@@ -113,5 +114,5 @@ export default defineConfig({
       `,
     },
   ],
-  safelist: ["max-md:hidden", "md:max-lg:hidden", "lg:hidden"],
+  safelist: helpersCssClasses,
 });