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

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.esm.js

@@ -1771,5 +1771,5 @@ const SearchTriggerButton = ({
   }, label));
 };
 
-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 };
+export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, ContentCardHorizontal, FederatedInstantResultsLayout, FederatedResultsView, FederatedSearchExperience, FilterAccordion, FilterItem, FilterSearch, FiltersPanel, ModalCloseButton, Pagination, PaginationButton, PaginationEllipsis, PaginationItem, ProductCardHorizontal, QrFormLeybold as QrForm, QrFormLeybold, ResultsColumn, ResultsCount, ResultsList, SearchBar, SearchIcon, SearchInput, SearchModal, SearchSubmitButton, SearchTriggerButton, SeeAllLinkButton };
 //# sourceMappingURL=index.esm.js.map

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 as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, ContentCardHorizontal, FederatedInstantResultsLayout, FederatedResultsView, FederatedSearchExperience, FilterAccordion, FilterItem, FilterSearch, FiltersPanel, ModalCloseButton, Pagination, PaginationButton, PaginationEllipsis, PaginationItem, ProductCardHorizontal, QrFormLeybold as QrForm, QrFormLeybold, ResultsColumn, ResultsCount, ResultsList, SearchBar, SearchIcon, SearchInput, SearchModal, SearchSubmitButton, SearchTriggerButton, SeeAllLinkButton };
+archExperience;
 exports.FilterAccordion = FilterAccordion;
 exports.FilterItem = FilterItem;
 exports.FilterSearch = FilterSearch;
@@ -1791,6 +1783,7 @@ exports.PaginationButton = PaginationButton;
 exports.PaginationEllipsis = PaginationEllipsis;
 exports.PaginationItem = PaginationItem;
 exports.ProductCardHorizontal = ProductCardHorizontal;
+exports.QrForm = QrFormLeybold;
 exports.QrFormLeybold = QrFormLeybold;
 exports.ResultsColumn = ResultsColumn;
 exports.ResultsCount = ResultsCount;