@empathyco/x-components 3.0.0-alpha.3 → 3.0.0-alpha.300

package/README.md

@@ -1,14 +1,33 @@
 # X Components
 
-X Components is a library based on components, it offers you the possibility to combine these components
-in different ways to create your own search experience. These components can be used even if
-you don't want to build a search experience, they can be used to build a regular application
-but taking advantage of the flexibility of these components.
+This is a library based on components, it offers you the possibility to combine them in different
+ways to create your own search experience. These components can be used even if you don't want to
+build a search experience, they can be used to build a regular application but taking advantage of
+their flexibility.
 
-A documentation about how to install and use these components can be found here:
-[X Components]()
+## Set up development environment
 
-### Contributing
+### Local setup
+
+To start contributing on this project you need to understand how to see the X Components up and
+running.
+
+1. run `npm ci` at the project root
+2. set `packages/x-components` as working directory at the terminal
+3. run `npm run serve`
+
+The app will be launch in localhost. Every view available at the top tabs is set in
+`packages/x-components/src/router.ts`.
+
+The main tab is `Home`, pressing start you will see the contents of
+`packages/x-components/src/views/home/Home.vue` with most of the X Components presents on the view.
+
+### Use the X Components in your own project
+
+A documentation about how to install and use X components can be found
+[here](https://docs.empathy.co/develop-empathy-platform/build-search-ui/web-x-components-development-guide.html).
+
+## Contributing
 
 To start contributing to project, please take a look to our
-[Contributing Guide](CONTRIBUTING.md).
+[Contributing Guidelines](CONTRIBUTING.md) for Interface X Components.

package/core/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * X-Components is a library usable everywhere not only for search experiences.
+ *
+ * @packageDocumentation
+ */
+export * from '../types/components';
+export * from '../types/directives';
+export * from '../types/plugins';
+export * from '../types/services';
+export * from '../types/store';
+export * from '../types/types';
+export * from '../types/utils';
+export * from '../types/wiring';
+export * from '../types/x-installer';
+export * from '../types/x-modules/x-modules.types';
+//# sourceMappingURL=index.d.ts.map

package/core/index.js

@@ -0,0 +1,167 @@
+export { default as AnimateWidth } from '../js/components/animations/animate-width.vue.js';
+export { default as CollapseHeight } from '../js/components/animations/collapse-height.vue.js';
+export { default as CollapseWidth } from '../js/components/animations/collapse-width.vue.js';
+export { default as CrossFade } from '../js/components/animations/cross-fade.vue.js';
+export { default as Fade } from '../js/components/animations/fade.vue.js';
+export { default as FadeAndSlide } from '../js/components/animations/fade-and-slide.vue.js';
+export { default as StaggeredFadeAndSlide } from '../js/components/animations/staggered-fade-and-slide.vue.js';
+export { default as StaggeringTransitionGroup } from '../js/components/animations/staggering-transition-group.vue.js';
+export { createCollapseAnimationMixin } from '../js/components/animations/animations.mixin.js';
+export { default as DisableAnimationMixin } from '../js/components/animations/disable-animation.mixin.js';
+export { createDirectionalAnimationFactory } from '../js/components/animations/create-directional-animation-factory.js';
+export { animateClipPath } from '../js/components/animations/animate-clip-path/animate-clip-path.factory.js';
+export { animateScale } from '../js/components/animations/animate-scale/animate-scale.factory.js';
+export { animateTranslate } from '../js/components/animations/animate-translate/animate-translate.factory.js';
+export { default as BaseColumnPickerDropdown } from '../js/components/column-picker/base-column-picker-dropdown.vue.js';
+export { default as BaseColumnPickerList } from '../js/components/column-picker/base-column-picker-list.vue.js';
+export { default as ColumnPickerMixin } from '../js/components/column-picker/column-picker.mixin.js';
+export { default as BaseCurrency } from '../js/components/currency/base-currency.vue.js';
+export { default as BasePriceFilterLabel } from '../js/components/filters/labels/base-price-filter-label.vue.js';
+export { default as BaseRatingFilterLabel } from '../js/components/filters/labels/base-rating-filter-label.vue.js';
+export { default as ArrowDownIcon } from '../js/components/icons/arrow-down.vue.js';
+export { default as ArrowLeftIcon } from '../js/components/icons/arrow-left.vue.js';
+export { default as ArrowRightIcon } from '../js/components/icons/arrow-right.vue.js';
+export { default as ArrowUpIcon } from '../js/components/icons/arrow-up.vue.js';
+export { default as BagIcon } from '../js/components/icons/bag.vue.js';
+export { default as BarCodeIcon } from '../js/components/icons/bar-code.vue.js';
+export { default as BarcodeTinyIcon } from '../js/components/icons/barcode-tiny.vue.js';
+export { default as CartIcon } from '../js/components/icons/cart.vue.js';
+export { default as CheckTinyIcon } from '../js/components/icons/check-tiny.vue.js';
+export { default as CheckIcon } from '../js/components/icons/check.vue.js';
+export { default as CheckboxCardSelectedIcon } from '../js/components/icons/checkbox-card-selected.vue.js';
+export { default as CheckboxCardUnselectedIcon } from '../js/components/icons/checkbox-card-unselected.vue.js';
+export { default as CheckboxSelectedIcon } from '../js/components/icons/checkbox-selected.vue.js';
+export { default as CheckboxUnselectedIcon } from '../js/components/icons/checkbox-unselected.vue.js';
+export { default as ChevronDownIcon } from '../js/components/icons/chevron-down.vue.js';
+export { default as ChevronLeftIcon } from '../js/components/icons/chevron-left.vue.js';
+export { default as ChevronRightIcon } from '../js/components/icons/chevron-right.vue.js';
+export { default as ChevronTinyDownIcon } from '../js/components/icons/chevron-tiny-down.vue.js';
+export { default as ChevronTinyLeftIcon } from '../js/components/icons/chevron-tiny-left.vue.js';
+export { default as ChevronTinyRightIcon } from '../js/components/icons/chevron-tiny-right.vue.js';
+export { default as ChevronTinyUpIcon } from '../js/components/icons/chevron-tiny-up.vue.js';
+export { default as ChevronUpIcon } from '../js/components/icons/chevron-up.vue.js';
+export { default as CrossTinyIcon } from '../js/components/icons/cross-tiny.vue.js';
+export { default as CrossIcon } from '../js/components/icons/cross.vue.js';
+export { default as CuratedCheckIcon } from '../js/components/icons/curated-check.vue.js';
+export { default as FiltersIcon } from '../js/components/icons/filters.vue.js';
+export { default as Grid1ColIcon } from '../js/components/icons/grid-1-col.vue.js';
+export { default as Grid2ColIcon } from '../js/components/icons/grid-2-col.vue.js';
+export { default as Grid4ColIcon } from '../js/components/icons/grid-4-col.vue.js';
+export { default as Grid2RowsIcon } from '../js/components/icons/grid-2-rows.vue.js';
+export { default as HideIcon } from '../js/components/icons/hide.vue.js';
+export { default as HistoryTinyIcon } from '../js/components/icons/history-tiny.vue.js';
+export { default as HistoryIcon } from '../js/components/icons/history.vue.js';
+export { default as LightBulbOff } from '../js/components/icons/light-bulb-off.vue.js';
+export { default as LightBulbOn } from '../js/components/icons/light-bulb-on.vue.js';
+export { default as MenuIcon } from '../js/components/icons/menu.vue.js';
+export { default as MinusTinyIcon } from '../js/components/icons/minus-tiny.vue.js';
+export { default as MinusIcon } from '../js/components/icons/minus.vue.js';
+export { default as Nq1Icon } from '../js/components/icons/nq-1.vue.js';
+export { default as Nq2Icon } from '../js/components/icons/nq-2.vue.js';
+export { default as Nq3Icon } from '../js/components/icons/nq-3.vue.js';
+export { default as Nq4Icon } from '../js/components/icons/nq-4.vue.js';
+export { default as PlusIcon } from '../js/components/icons/plus.vue.js';
+export { default as RadioButtonSelectedIcon } from '../js/components/icons/radiobutton-selected.vue.js';
+export { default as RadioButtonUnselectedIcon } from '../js/components/icons/radiobutton-unselected.vue.js';
+export { default as SearchIcon } from '../js/components/icons/search.vue.js';
+export { default as SettingsIcon } from '../js/components/icons/settings.vue.js';
+export { default as ShowIcon } from '../js/components/icons/show.vue.js';
+export { default as StarIcon } from '../js/components/icons/star.vue.js';
+export { default as SearchTinyIcon } from '../js/components/icons/search-tiny.vue.js';
+export { default as TagIcon } from '../js/components/icons/tag.vue.js';
+export { default as TrashOpenIcon } from '../js/components/icons/trash-open.vue.js';
+export { default as TrashIcon } from '../js/components/icons/trash.vue.js';
+export { default as TrendingTinyIcon } from '../js/components/icons/trending-tiny.vue.js';
+export { default as TrendingIcon } from '../js/components/icons/trending.vue.js';
+export { default as UserIcon } from '../js/components/icons/user.vue.js';
+export { default as FixedHeaderAndAsidesLayout } from '../js/components/layouts/fixed-header-and-asides-layout.vue.js';
+export { default as MultiColumnMaxWidthLayout } from '../js/components/layouts/multi-column-max-width-layout.vue.js';
+export { default as SingleColumnLayout } from '../js/components/layouts/single-column-layout.vue.js';
+export { default as BaseEventsModalClose } from '../js/components/modals/base-events-modal-close.vue.js';
+export { default as BaseEventsModal } from '../js/components/modals/base-events-modal.vue.js';
+export { default as BaseEventsModalOpen } from '../js/components/modals/base-events-modal-open.vue.js';
+export { default as BaseModal } from '../js/components/modals/base-modal.vue.js';
+export { default as BaseIdModal } from '../js/components/modals/base-id-modal.vue.js';
+export { default as BaseIdModalClose } from '../js/components/modals/base-id-modal-close.vue.js';
+export { default as BaseIdModalOpen } from '../js/components/modals/base-id-modal-open.vue.js';
+export { default as CloseMainModal } from '../js/components/modals/close-main-modal.vue.js';
+export { default as MainModal } from '../js/components/modals/main-modal.vue.js';
+export { default as OpenMainModal } from '../js/components/modals/open-main-modal.vue.js';
+export { default as BaseHeaderTogglePanel } from '../js/components/panels/base-header-toggle-panel.vue.js';
+export { default as BaseTogglePanel } from '../js/components/panels/base-toggle-panel.vue.js';
+export { default as BaseIdTogglePanel } from '../js/components/panels/base-id-toggle-panel.vue.js';
+export { default as BaseIdTogglePanelButton } from '../js/components/panels/base-id-toggle-panel-button.vue.js';
+export { default as BaseTabsPanel } from '../js/components/panels/base-tabs-panel.vue.js';
+export { default as BaseAddToCart } from '../js/components/result/base-result-add-to-cart.vue.js';
+export { default as BaseResultCurrentPrice } from '../js/components/result/base-result-current-price.vue.js';
+export { default as BaseResultImage } from '../js/components/result/base-result-image.vue.js';
+export { default as BaseResultLink } from '../js/components/result/base-result-link.vue.js';
+export { default as BaseResultPreviousPrice } from '../js/components/result/base-result-previous-price.vue.js';
+export { default as BaseFallbackImage } from '../js/components/result/base-result-fallback-image.vue.js';
+export { default as BasePlaceholderImage } from '../js/components/result/base-result-placeholder-image.vue.js';
+export { default as BaseResultRating } from '../js/components/result/base-result-rating.vue.js';
+export { default as ResultVariantsProvider } from '../js/components/result/result-variants-provider.vue.js';
+export { default as ResultVariantSelector } from '../js/components/result/result-variant-selector.vue.js';
+export { default as BaseScroll } from '../js/components/scroll/base-scroll.vue.js';
+export { default as ScrollMixin } from '../js/components/scroll/scroll.mixin.js';
+export { default as BaseSuggestion } from '../js/components/suggestions/base-suggestion.vue.js';
+export { default as BaseSuggestions } from '../js/components/suggestions/base-suggestions.vue.js';
+export { default as AutoProgressBar } from '../js/components/auto-progress-bar.vue.js';
+export { default as BaseDropdown } from '../js/components/base-dropdown.vue.js';
+export { default as BaseEventButton } from '../js/components/base-event-button.vue.js';
+export { default as BaseGrid } from '../js/components/base-grid.vue.js';
+export { default as BaseKeyboardNavigation } from '../js/components/base-keyboard-navigation.vue.js';
+export { default as BaseRating } from '../js/components/base-rating.vue.js';
+export { default as BaseSwitch } from '../js/components/base-switch.vue.js';
+export { default as BaseVariableColumnGrid } from '../js/components/base-variable-column-grid.vue.js';
+export { default as GlobalXBus } from '../js/components/global-x-bus.vue.js';
+export { default as Highlight } from '../js/components/highlight.vue.js';
+export { default as ItemsList } from '../js/components/items-list.vue.js';
+export { default as LocationProvider } from '../js/components/location-provider.vue.js';
+export { NoElement } from '../js/components/no-element.js';
+export { default as SlidingPanel } from '../js/components/sliding-panel.vue.js';
+export { default as SnippetCallbacks } from '../js/components/snippet-callbacks.vue.js';
+export { XEmit, XOn } from '../js/components/decorators/bus.decorators.js';
+export { Debounce } from '../js/components/decorators/debounce.decorators.js';
+export { DISABLE_ANIMATIONS_KEY, HAS_MORE_ITEMS_KEY, LIST_ITEMS_KEY, QUERY_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY } from '../js/components/decorators/injection.consts.js';
+export { XInject, XProvide } from '../js/components/decorators/injection.decorators.js';
+export { Getter, State } from '../js/components/decorators/store.decorators.js';
+export { ItemsListInjectionMixin } from '../js/components/items-list-injection.mixin.js';
+export { xComponentMixin } from '../js/components/x-component.mixin.js';
+export { getXComponentXModuleName, isXComponent } from '../js/components/x-component.utils.js';
+export { infiniteScroll } from '../js/directives/infinite-scroll/infinite-scroll.js';
+export { setupDevtools } from '../js/plugins/devtools/devtools.plugin.js';
+export { BaseXBus, bus } from '../js/plugins/x-bus.js';
+export { XPlugin, xPlugin } from '../js/plugins/x-plugin.js';
+export { createXComponentAPIMixin, getBusAPI, getRootXComponent } from '../js/plugins/x-plugin.mixin.js';
+export { DirectionalFocusNavigationService } from '../js/services/directional-focus-navigation.service.js';
+export { createFetchAndSaveActions } from '../js/store/utils/fetch-and-save-action.utils.js';
+export { setStatus } from '../js/store/utils/status-store.utils.js';
+export { createStoreEmitters } from '../js/store/utils/store-emitters.utils.js';
+export { RootXStoreModule } from '../js/store/x.module.js';
+export { arrayToObject, createEmitterArrayFilter, deepFilter, deepFlat, groupItemsBy, isArrayEmpty } from '../js/utils/array.js';
+export { CancelSymbol, cancellablePromise } from '../js/utils/cancellable-promise.js';
+export { clone } from '../js/utils/clone.js';
+export { currencyFormatter } from '../js/utils/currency-formatter.js';
+export { debounce as debounceFunction } from '../js/utils/debounce.js';
+export { areFiltersDifferent, createRawFilters } from '../js/utils/filters.js';
+export { FOCUSABLE_SELECTORS } from '../js/utils/focus.js';
+export { noOp } from '../js/utils/function.js';
+export { getURLParameter } from '../js/utils/get-url-parameters.js';
+export { getTargetElement, isElementEqualOrContained } from '../js/utils/html.js';
+export { SPLIT_WORDS_REGEX, isNewQuery } from '../js/utils/is-new-query.js';
+export { normalizeString } from '../js/utils/normalize.js';
+export { isInRange } from '../js/utils/number.js';
+export { createOrigin } from '../js/utils/origin.js';
+export { sanitize } from '../js/utils/sanitize.js';
+export { localStorageService } from '../js/utils/storage.js';
+export { capitalize, isStringEmpty, toKebabCase } from '../js/utils/string.js';
+export { throttle as throttleFunction } from '../js/utils/throttle.js';
+export { namespacedWireCommit, namespacedWireCommitWithoutPayload, namespacedWireDispatch, namespacedWireDispatchWithoutPayload } from '../js/wiring/namespaced-wires.factory.js';
+export { namespacedDebounce, namespacedThrottle } from '../js/wiring/namespaced-wires.operators.js';
+export { createWireFromFunction, wireCommit, wireCommitWithoutPayload, wireDispatch, wireDispatchWithoutPayload, wireService, wireServiceWithoutPayload } from '../js/wiring/wires.factory.js';
+export { debounce, filter, filterBlacklistedModules, filterFalsyPayload, filterTruthyPayload, filterWhitelistedModules, mapWire, throttle } from '../js/wiring/wires.operators.js';
+export { createWiring, getStateAndGettersFromModule } from '../js/wiring/wiring.utils.js';
+export { BaseXAPI } from '../js/x-installer/api/base-api.js';
+export { XInstaller } from '../js/x-installer/x-installer/x-installer.js';
+//# sourceMappingURL=index.js.map

package/core/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/design-system/badge-default.css

@@ -0,0 +1,49 @@
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
+
+[dir="ltr"] .x-badge {
+  right: calc(var(--x-size-width-badge-default) / 4);
+}
+
+[dir="rtl"] .x-badge {
+  left: calc(var(--x-size-width-badge-default) / 4);
+}
+
+.x-badge {
+  border-radius: var(--x-size-border-radius-badge-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-badge-default);
+  font-size: var(--x-size-font-badge-default);
+  font-weight: var(--x-number-font-weight-badge-default);
+  box-sizing: border-box;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(50%, -50%);
+  z-index: 1;
+  /* We dont' want to have the button fully centered in the top right corner, the top right corner
+  of the text is the one that should be aligned with the top right corner of the container. */
+  top: calc(var(--x-size-width-badge-default) / 4);
+  min-width: var(--x-size-width-badge-default);
+  height: var(--x-size-width-badge-default);
+  padding: 2px;
+  background: var(--x-color-background-badge-default);
+  color: var(--x-color-text-badge-default);
+  border-color: var(--x-color-border-badge-default);
+}
+[dir="rtl"] .x-badge {
+  transform: translate(-50%, -50%);
+}
+
+.x-badge-container {
+  position: relative;
+}

package/design-system/base.css

@@ -0,0 +1,42 @@
+:root {
+  --x-size-border-radius-base-none: 0;
+  --x-size-border-radius-base-s: var(--x-size-base-02);
+  --x-size-border-radius-base-m: var(--x-size-base-06);
+  --x-size-border-radius-base-pill: 99999px;
+  --x-size-border-width-base: 1px;
+}
+:root {
+  --x-color-base-lead: #243d48;
+  --x-color-base-auxiliary: #bfe1ec;
+  --x-color-base-neutral-10: #1a1a1a;
+  --x-color-base-neutral-35: #595959;
+  --x-color-base-neutral-70: #b3b3b3;
+  --x-color-base-neutral-95: #f2f2f2;
+  --x-color-base-neutral-100: #ffffff;
+  --x-color-base-accent: #0086b2;
+  --x-color-base-enable: #00705c;
+  --x-color-base-disable: #e11f26;
+  --x-color-base-transparent: transparent;
+}
+:root {
+  --x-size-base-01: 2px;
+  --x-size-base-02: 4px;
+  --x-size-base-03: 8px;
+  --x-size-base-04: 12px;
+  --x-size-base-05: 16px;
+  --x-size-base-06: 24px;
+  --x-size-base-07: 32px;
+  --x-size-base-08: 40px;
+  --x-size-base-09: 48px;
+  --x-size-base-10: 56px;
+  --x-size-base-11: 64px;
+  --x-size-base-12: 80px;
+  --x-size-base-13: 80px;
+  --x-size-base-14: 96px;
+  --x-size-base-15: 128px;
+  --x-size-base-16: 152px;
+  --x-size-base-17: 184px;
+  --x-size-base-18: 216px;
+  --x-size-base-19: 280px;
+  --x-size-base-20: 344px;
+}