@asantemedia-org/leybold-design-system 1.0.3 → 1.0.4

package/README.md

@@ -58,6 +58,34 @@ npm run build
 npm run build:npm
 ```
 
+### Publishing to npm
+
+Publishing requires an npm access token with publish permissions for the `@asantemedia-org` organization.
+
+#### Setup Access Token
+
+1. Generate an access token at [npmjs.com](https://www.npmjs.com) → Access Tokens
+2. Configure the token:
+
+```bash
+npm config set //registry.npmjs.org/:_authToken YOUR_ACCESS_TOKEN
+```
+
+#### Publish
+
+```bash
+npm run build:npm
+npm run publish:npm
+```
+
+Or to bump version and publish in one step:
+
+```bash
+npm run build:npm
+npm version patch  # or minor/major
+npm publish --access public
+```
+
 ### Project Structure
 
 ```
@@ -127,9 +155,9 @@ The design system follows the Atomic Design methodology:
 6. **Templates** - Complete page layouts
 
 Each component should include:
+
 - Component implementation
 - Storybook stories with different variants
 - Documentation
 - TypeScript types
 - SCSS modules for styling
-

package/dist/index.js

@@ -1,7 +1,5 @@
-'use strict';
-
-var React = require('react');
-var edwardsvacuumDesignSystem = require('@asantemedia-org/edwardsvacuum-design-system');
+import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asantemedia-org/edwardsvacuum-design-system';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -277,7 +275,7 @@ const Pagination = ({
   className,
   ariaLabel = "Pagination"
 }) => {
-  const pageNumbers = React.useMemo(() => generatePageNumbers(currentPage, totalPages, maxVisiblePages), [currentPage, totalPages, maxVisiblePages]);
+  const pageNumbers = useMemo(() => generatePageNumbers(currentPage, totalPages, maxVisiblePages), [currentPage, totalPages, maxVisiblePages]);
   const handlePageChange = page => {
     if (page >= 1 && page <= totalPages && page !== currentPage) {
       onPageChange(page);
@@ -349,15 +347,15 @@ const Image = ({
   srcSet,
   sizes
 }) => {
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [hasError, setHasError] = React.useState(false);
-  const [currentSrc, setCurrentSrc] = React.useState(src);
-  const handleLoad = React.useCallback(() => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  const [currentSrc, setCurrentSrc] = useState(src);
+  const handleLoad = useCallback(() => {
     setIsLoading(false);
     setHasError(false);
     onLoad?.();
   }, [onLoad]);
-  const handleError = React.useCallback(() => {
+  const handleError = useCallback(() => {
     setIsLoading(false);
     setHasError(true);
 
@@ -536,7 +534,7 @@ const ProductCardDetails = ({
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styles$b.productDetails
-  }, /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.ProductDetailsCard, {
+  }, /*#__PURE__*/React.createElement(ProductDetailsCard, {
     className: `${className}`,
     title: title,
     imageUrl: imageUrl,
@@ -615,7 +613,7 @@ const AlgoliaDynamicSearchLeybold = props => {
     ProductCard: ProductCardAdapter,
     ProductDetailsCard: ProductCardDetailsAdapter
   };
-  return /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.AlgoliaDynamicSearchRaw, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(AlgoliaDynamicSearchRaw, _extends({}, props, {
     innerComponents: innerComponents
   }));
 };
@@ -666,7 +664,7 @@ const QrFormButtonAdapter = ({
 const QrFormLeybold = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "qr-journey-form-wrapper"
-  }, /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.QrForm, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(QrForm, _extends({}, props, {
     ButtonComponent: QrFormButtonAdapter
   })));
 };
@@ -712,9 +710,9 @@ const SearchModal = ({
   children,
   className = ''
 }) => {
-  const modalRef = React.useRef(null);
-  const previouslyFocusedElement = React.useRef(null);
-  React.useEffect(() => {
+  const modalRef = useRef(null);
+  const previouslyFocusedElement = useRef(null);
+  useEffect(() => {
     if (isOpen) {
       // Store the previously focused element
       previouslyFocusedElement.current = document.activeElement;
@@ -739,7 +737,7 @@ const SearchModal = ({
       document.body.style.overflow = '';
     };
   }, [isOpen]);
-  React.useEffect(() => {
+  useEffect(() => {
     const handleEscape = event => {
       if (event.key === 'Escape' && isOpen) {
         onClose();
@@ -750,7 +748,7 @@ const SearchModal = ({
   }, [isOpen, onClose]);
 
   // Focus trap implementation
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isOpen || !modalRef.current) return;
     const modal = modalRef.current;
     const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -1167,10 +1165,10 @@ const FilterAccordion = ({
   onValueToggle,
   className
 }) => {
-  const [searchQuery, setSearchQuery] = React.useState("");
+  const [searchQuery, setSearchQuery] = useState("");
 
   // Filter facet values based on search query
-  const filteredValues = React.useMemo(() => {
+  const filteredValues = useMemo(() => {
     if (!searchQuery.trim()) {
       return facet.values;
     }
@@ -1293,7 +1291,7 @@ const AppliedFilters = ({
   className
 }) => {
   // Extract all refined (selected) filters
-  const appliedFilters = React.useMemo(() => {
+  const appliedFilters = useMemo(() => {
     const filters = [];
     facets.forEach(facet => {
       facet.values.forEach(value => {
@@ -1358,7 +1356,7 @@ const FiltersPanel = ({
   className
 }) => {
   // Track which accordions are expanded
-  const [expandedAccordions, setExpandedAccordions] = React.useState(() => {
+  const [expandedAccordions, setExpandedAccordions] = useState(() => {
     // Initialize with default expanded facets
     const expanded = new Set();
     facets.forEach(facet => {
@@ -1368,7 +1366,7 @@ const FiltersPanel = ({
     });
     return expanded;
   });
-  const handleAccordionToggle = React.useCallback(facetId => {
+  const handleAccordionToggle = useCallback(facetId => {
     setExpandedAccordions(prev => {
       const next = new Set(prev);
       if (next.has(facetId)) {
@@ -1379,13 +1377,13 @@ const FiltersPanel = ({
       return next;
     });
   }, []);
-  const handleValueToggle = React.useCallback((attribute, value) => {
+  const handleValueToggle = useCallback((attribute, value) => {
     onFacetToggle(attribute, value);
   }, [onFacetToggle]);
-  const handleRemoveFilter = React.useCallback((attribute, value) => {
+  const handleRemoveFilter = useCallback((attribute, value) => {
     onFacetToggle(attribute, value);
   }, [onFacetToggle]);
-  const handleClearAll = React.useCallback(() => {
+  const handleClearAll = useCallback(() => {
     // Remove all refined facets
     facets.forEach(facet => {
       facet.values.forEach(value => {
@@ -1773,14 +1771,8 @@ const SearchTriggerButton = ({
   }, label));
 };
 
-exports.AlgoliaDynamicSearchLeybold = AlgoliaDynamicSearchLeybold;
-exports.AppliedFilterTag = AppliedFilterTag;
-exports.AppliedFilters = AppliedFilters;
-exports.Button = Button;
-exports.ContentCardHorizontal = ContentCardHorizontal;
-exports.FederatedInstantResultsLayout = FederatedInstantResultsLayout;
-exports.FederatedResultsView = FederatedResultsView;
-exports.FederatedSearchExperience = FederatedSearchExperience;
+export { AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, ContentCardHorizontal, FederatedInstantResultsLayout, FederatedResultsView, FederatedSearchExperience, FilterAccordion, FilterItem, FilterSearch, FiltersPanel, ModalCloseButton, Pagination, PaginationButton, PaginationEllipsis, PaginationItem, ProductCardHorizontal, QrFormLeybold, ResultsColumn, ResultsCount, ResultsList, SearchBar, SearchIcon, SearchInput, SearchModal, SearchSubmitButton, SearchTriggerButton, SeeAllLinkButton };
+ence = FederatedSearchExperience;
 exports.FilterAccordion = FilterAccordion;
 exports.FilterItem = FilterItem;
 exports.FilterSearch = FilterSearch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asantemedia-org/leybold-design-system",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Design system for Leybold",
   "license": "UNLICENSED",
   "main": "dist/index.js",
@@ -96,7 +96,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "react-dom": ">=18.2.0"
+    "react-dom": ">=18.2.0",
+    "@asantemedia-org/edwardsvacuum-design-system": ">=1.6.52"
   },
   "publishConfig": {
     "access": "public"