@wayke-se/components-react 3.0.0-beta.11 → 3.0.0-beta.13

package/src/components/ExtendInfo/wrapper.tsx

@@ -1,63 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-
-export const Wrapper = styled.div``;
-
-export const Header = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-export const Title = styled.div``;
-
-export const Info = styled.div`
-  margin-left: ${size(1)};
-`;
-
-export const InfoBtn = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-}))`
-  position: relative;
-  display: block;
-  font: inherit;
-  font-size: 1em;
-  transform-origin: 50% 50%;
-  transition: transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-
-  :before {
-    content: '';
-    position: absolute;
-    top: ${size(-0.5)};
-    bottom: ${size(-0.5)};
-    left: ${size(-0.5)};
-    right: ${size(-0.5)};
-    background-color: ${(props) => props.theme.color.accentDark};
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  > * {
-    position: relative;
-    z-index: 1;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;
-
-export const Extend = styled.div`
-  padding-top: ${size(1)};
-  margin-top: ${size(1)};
-  border-top: 1px solid ${(props) => props.theme.color.border};
-  font-size: 0.875em;
-`;

package/src/components/Filter/index.tsx

@@ -1,108 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-import { List, Item, Action, Label, Indicator, IndicatorValue } from './wrapper';
-import { Facet } from '../../@types/search';
-import { FacetIdToTitle } from '../../utils/formats';
-import { PRICE, MILEAGE, MODEL_YEAR } from '../../utils/constants';
-import useSearch from '../../State/Search/useSearch';
-import { SearchFilterTypes, SearchFilterNameTypes } from '../../@types/filter';
-import FilterPanel from '../FilterPanel/index';
-
-const isSelected = (f: Facet, searchParams: URLSearchParams) => {
-  switch (f.id) {
-    case PRICE:
-    case MILEAGE:
-    case MODEL_YEAR:
-      return searchParams.has(`${f.id}.min`) || searchParams.has(`${f.id}.max`) ? 1 : 0;
-    default:
-      return f.filters.filter((filter) => filter.selected).length;
-  }
-};
-
-interface FilterProps {
-  filterList?: SearchFilterTypes[];
-}
-
-const Filter = ({ filterList }: FilterProps) => {
-  const { queryFilter, initialFacets, loading, response, onFilterUpdate } = useSearch();
-
-  const facets = response?.facets;
-
-  const [facet, setFacet] = useState<Facet>();
-  const onSelectFacet = useCallback((nextFacet: Facet) => setFacet(nextFacet), []);
-  const onClose = useCallback(() => setFacet(undefined), []);
-
-  if (!facets) {
-    return null;
-  }
-  const filterNames = filterList ? filterList.map((x) => x.filterName) : undefined;
-
-  const filteredFacets = facets
-    ?.filter((x) => x.id !== 'segment')
-    ?.filter((f) => (filterNames ? filterNames.includes(f.id as SearchFilterNameTypes) : true))
-    .sort((a, b) =>
-      filterNames
-        ? filterNames.indexOf(a.id as SearchFilterNameTypes) -
-          filterNames.indexOf(b.id as SearchFilterNameTypes)
-        : 0
-    )
-    .map((x) => {
-      const match = filterList?.find((y) => y.filterName === x.id);
-      if (match?.displayName) {
-        return {
-          ...x,
-          displayName: match.displayName,
-        };
-      }
-      return {
-        ...x,
-        displayName: FacetIdToTitle(x.id),
-      };
-    });
-
-  return (
-    <>
-      {initialFacets && facet && (
-        <FilterPanel
-          filterList={filterList}
-          facet={facet}
-          loading={loading}
-          filteredFacets={filteredFacets}
-          numberOfHits={response?.documentList.numberOfHits || 0}
-          onFilterUpdate={onFilterUpdate}
-          onClose={onClose}
-        />
-      )}
-      <List>
-        {filteredFacets
-          .filter((x) => x.filters.length)
-          .map((f) => {
-            const selected = isSelected(f, queryFilter.searchParams);
-            return (
-              <Item key={f.id}>
-                <Action
-                  onClick={() => onSelectFacet(f)}
-                  title={f.displayName}
-                  aria-label={f.displayName}
-                  className={
-                    selected > 0
-                      ? 'wayke__theme wayke__color--primary-bg wayke__font--bold'
-                      : 'wayke__theme wayke__font--regular'
-                  }
-                >
-                  <Label>{f.displayName}</Label>
-                  {selected > 0 && (
-                    <Indicator>
-                      <IndicatorValue>{selected}</IndicatorValue>
-                    </Indicator>
-                  )}
-                </Action>
-              </Item>
-            );
-          })}
-      </List>
-    </>
-  );
-};
-
-export default Filter;

package/src/components/Filter/wrapper.tsx

@@ -1,79 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-
-export const List = styled.ul`
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  list-style: none;
-  padding: 0;
-  margin: ${size(-0.5)};
-`;
-
-export const Item = styled.li`
-  padding: ${size(0.5)};
-`;
-
-export const Action = styled(ButtonReset)`
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: ${size(1.5)} ${size(3)};
-  background-color: ${(props) => props.theme.color.accentDark};
-  border-radius: 3px;
-  font-size: 0.875rem;
-  line-height: 1;
-  transform-origin: 50% 50%;
-  transition: transform 150ms ease;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: ${(props) => props.theme.color.hoverOverlay};
-    border-radius: 3px;
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;
-
-export const Label = styled.div`
-  z-index: 1;
-`;
-
-export const Indicator = styled.div`
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 ${size(0.375)};
-  margin-left: ${size(0.5)};
-  background-color: currentColor;
-  min-width: 1em;
-  height: 1em;
-  border-radius: 999px;
-  z-index: 1;
-`;
-
-export const IndicatorValue = styled.div`
-  font-family: sans-serif; // Default font to guarantee visibility
-  font-size: 0.75rem;
-  font-weight: bold;
-  color: white;
-  mix-blend-mode: difference;
-`;

package/src/components/FilterPanel/checkListFacet.tsx

@@ -1,46 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import Checklist from '../Checklist/index';
-import OverflowBox from '../OverflowBox/index';
-import { Facet, FacetFilter } from '../../@types/search';
-import useSearch from '../../State/Search/useSearch';
-
-interface ChecklistFacetProps {
-  facet: Facet;
-}
-
-const ChecklistFacet = ({ facet }: ChecklistFacetProps) => {
-  const { loading, error, onFilterUpdate } = useSearch();
-  const [selected, setSelected] = useState<{ [key: string]: boolean }>();
-  useEffect(() => {
-    setSelected(undefined);
-  }, [facet, error]);
-
-  const onClick = useCallback(
-    (f: FacetFilter) => {
-      if (!loading) {
-        setSelected({
-          ...selected,
-          [f.displayName]: !f.selected,
-        });
-        onFilterUpdate(f.query);
-      }
-    },
-    [loading]
-  );
-
-  return (
-    <OverflowBox>
-      <Checklist
-        items={facet.filters
-          .sort((a, b) => a.displayName.localeCompare(b.displayName))
-          .map((f) => ({
-            label: f.displayName,
-            onClick: () => onClick(f),
-            active: selected?.[f.displayName] !== undefined ? selected[f.displayName] : f.selected,
-          }))}
-      />
-    </OverflowBox>
-  );
-};
-
-export default ChecklistFacet;

package/src/components/FilterPanel/colorFacet.tsx

@@ -1,47 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-
-import { Facet, FacetFilter } from '../../@types/search';
-import ColorSelect from '../ColorSelect/index';
-import useSearch from '../../State/Search/useSearch';
-import { getHexColorFromDisplayName } from '../../utils/converters';
-
-interface ColorSelectFacetProps {
-  facet: Facet;
-}
-
-const ColorSelectFacet = ({ facet }: ColorSelectFacetProps) => {
-  const { loading, error, onFilterUpdate } = useSearch();
-  const [selected, setSelected] = useState<{ [key: string]: boolean }>();
-
-  useEffect(() => {
-    setSelected(undefined);
-  }, [facet, error]);
-
-  const onClick = useCallback(
-    (f: FacetFilter) => {
-      if (!loading) {
-        setSelected({
-          ...selected,
-          [f.displayName]: !f.selected,
-        });
-        onFilterUpdate(f.query);
-      }
-    },
-    [loading]
-  );
-
-  return (
-    <ColorSelect
-      items={facet.filters
-        .sort((a, b) => a.displayName.localeCompare(b.displayName))
-        .map((f) => ({
-          label: f.displayName,
-          onClick: () => onClick(f),
-          active: selected?.[f.displayName] !== undefined ? selected[f.displayName] : f.selected,
-          hex: [getHexColorFromDisplayName(f.displayName)],
-        }))}
-    />
-  );
-};
-
-export default ColorSelectFacet;

package/src/components/FilterPanel/faceSelector.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-
-import { Facet } from '../../@types/search';
-import CheckListFacet from './checkListFacet';
-import ColorSelectFacet from './colorFacet';
-import RangeFacet from './rangeFacet';
-import {
-  MANUFACTURER,
-  MODEL_SERIES,
-  FUEL_TYPE,
-  GEARBOX_TYPE,
-  ENVIRONMENT_CLASS,
-  SEGMENT,
-  DRIVING_WHEEL,
-  COLOR,
-  PRICE,
-  BRANCH,
-  MILEAGE,
-  MODEL_YEAR,
-  LEASING_PRICE,
-} from '../../utils/constants';
-
-interface FacetSelectorProps {
-  facet: Facet;
-}
-
-const FacetSelector = ({ facet }: FacetSelectorProps) => {
-  switch (facet.id) {
-    case MANUFACTURER:
-    case MODEL_SERIES:
-    case FUEL_TYPE:
-    case GEARBOX_TYPE:
-    case BRANCH:
-    case ENVIRONMENT_CLASS:
-    case SEGMENT:
-    case DRIVING_WHEEL:
-      return <CheckListFacet facet={facet} />;
-    case COLOR:
-      return <ColorSelectFacet facet={facet} />;
-    case PRICE:
-      return <RangeFacet facet={facet} unit="kr" formatValues />;
-    case LEASING_PRICE:
-      return <RangeFacet facet={facet} unit="kr/mån" formatValues />;
-    case MILEAGE:
-      return <RangeFacet facet={facet} unit="mil" formatValues />;
-    case MODEL_YEAR:
-      return <RangeFacet facet={facet} unit="år" />;
-    default:
-      return null;
-  }
-};
-
-export default FacetSelector;

package/src/components/FilterPanel/index.tsx

@@ -1,79 +0,0 @@
-import React, { useCallback } from 'react';
-
-import { Facet } from '../../@types/search';
-import Panel from '../Panel/index';
-import { FooterAction, FooterActionItem } from '../Panel/wrapper';
-import { ButtonSecondary, ButtonContent, ButtonPrimary } from '../Button/index';
-import Accordion, { AccordionItem } from '../Accordion/index';
-import { Repeat } from '../Repeat/index';
-import FacetSelector from './faceSelector';
-import { SearchFilterTypes } from '../../@types/filter';
-
-export interface FilterProps {
-  label: string;
-  activeFilters?: number;
-}
-
-export interface Props {
-  facet?: Facet;
-  loading: boolean;
-  filteredFacets: Facet[];
-  filterList?: SearchFilterTypes[];
-  numberOfHits: number;
-  onClose: () => void;
-  onFilterUpdate: (nextQuery: string) => void;
-}
-
-const FilterPanel = ({
-  facet,
-  filteredFacets,
-  numberOfHits,
-  loading,
-  onFilterUpdate,
-  onClose,
-}: Props) => {
-  const onClearFilters = useCallback(() => onFilterUpdate(''), []);
-
-  return (
-    <Panel
-      title="Filtrera"
-      onClose={onClose}
-      footer={
-        <>
-          <FooterAction>
-            <FooterActionItem>
-              <ButtonSecondary fullWidth disabled={loading} onClick={onClearFilters}>
-                <ButtonContent>Rensa alla</ButtonContent>
-              </ButtonSecondary>
-            </FooterActionItem>
-            <FooterActionItem>
-              <ButtonPrimary fullWidth disabled={loading} onClick={onClose}>
-                <ButtonContent>{`Visa ${numberOfHits} ${
-                  numberOfHits === 1 ? 'bil' : 'bilar'
-                }`}</ButtonContent>
-              </ButtonPrimary>
-            </FooterActionItem>
-          </FooterAction>
-        </>
-      }
-    >
-      <Accordion>
-        {filteredFacets
-          .filter((x) => x.filters.length)
-          .map((f) => (
-            <AccordionItem
-              key={f.displayName}
-              heading={f.displayName}
-              isActive={f.id === facet?.id}
-            >
-              <Repeat>
-                <FacetSelector facet={f} />
-              </Repeat>
-            </AccordionItem>
-          ))}
-      </Accordion>
-    </Panel>
-  );
-};
-
-export default FilterPanel;

package/src/components/FilterPanel/rangeFacet.tsx

@@ -1,128 +0,0 @@
-import React, { useCallback, useState, useEffect } from 'react';
-import { Facet } from '../../@types/search';
-import RangeSlider from '../RangeSlider/index';
-import useSearch from '../../State/Search/useSearch';
-
-interface RangeFacetProps {
-  facet: Facet;
-  unit?: string;
-  formatValues?: boolean;
-}
-
-const getInitialValues = (domain: number[], facet: Facet, searchParams: URLSearchParams) => {
-  const facetMin = domain[0]; //parseInt(facet.filters[0].displayName, 10);
-  const _queryMin = searchParams?.get(`${facet.id}.min`) || null;
-  const facetMax = domain[domain.length - 1]; //parseInt(facet.filters[facet.filters.length - 1].displayName, 10);
-  const _queryMax = searchParams?.get(`${facet.id}.max`) || null;
-
-  const queryMin = parseInt(_queryMin === null ? `${facetMin}` : _queryMin, 10);
-  const min = facetMin > queryMin ? facetMin : queryMin;
-  const queryMax = parseInt(_queryMax === null ? `${facetMax}` : _queryMax, 10);
-  const max = queryMax > facetMax ? facetMin : queryMax;
-
-  return min || max ? [min ? min : domain[0], max ? max : domain[1]] : domain;
-};
-
-const averageDelta = ([x, ...xs]: number[]) => {
-  if (x === undefined) return NaN;
-
-  return xs.reduce(([acc, last], x) => [acc + (x - last), x], [0, x])[0] / xs.length;
-};
-
-const getSteps = (initialAllValues: number[]) => {
-  const delta = averageDelta(initialAllValues);
-  const max = Math.floor(initialAllValues[initialAllValues.length - 1] * 1000) / 1000;
-  if (delta > 1000) return new Array(max / 1000 + 1).fill('').map((x, i) => i * 1000);
-  if (delta <= 1000 && delta >= 500)
-    return new Array(max / 500 + 1).fill('').map((x, i) => i * 500);
-  return initialAllValues;
-};
-
-const RangeFacet = ({ facet, unit, formatValues }: RangeFacetProps) => {
-  const { loading, queryFilter, initialFacets, onFilterUpdate } = useSearch();
-  const initialFacet = initialFacets?.find((x) => x.id === facet.id);
-  const maxPrefix =
-    initialFacet?.filters[initialFacet?.filters.length - 1]?.displayName?.includes('+');
-  const [state, setValues] = useState<
-    { id: string | undefined; steps: number[]; domain: number[]; values: number[] } | undefined
-  >(undefined);
-
-  useEffect(() => {
-    const _initialAllValues = initialFacet?.filters.map((f) =>
-      parseInt(f.displayName.replace(/[\<\>+-]+/g, ''), 10)
-    ) || [1, 2];
-
-    const _steps = getSteps(_initialAllValues);
-    const domain = [_steps[0], _steps[_steps.length - 1]];
-
-    setValues({
-      id: initialFacet?.id,
-      steps: _steps,
-      domain: [_steps[0], _steps[_steps.length - 1]],
-      values: initialFacet?.filters.length
-        ? getInitialValues(domain, initialFacet, queryFilter.searchParams)
-        : [0, 0],
-    });
-  }, [initialFacet?.id]);
-
-  useEffect(() => {
-    if (state?.id) {
-      const init = initialFacet?.filters.length
-        ? getInitialValues(state.domain, initialFacet, queryFilter.searchParams)
-        : [0, 0];
-      const minStr = queryFilter.searchParams?.get(`${facet.id}.min`);
-      const maxStr = queryFilter.searchParams?.get(`${facet.id}.max`);
-
-      const min = minStr ? parseFloat(minStr) : init[0];
-      const max = maxStr ? parseFloat(maxStr) : init[1];
-      if (min !== state.values[0] || max !== state.values[1]) {
-        onChange([min, max]);
-      }
-    }
-  }, [queryFilter.searchParams?.toString()]);
-
-  const onChange = useCallback(
-    (nextValues: readonly number[]) => {
-      if (state?.id) {
-        if (state.values[0] !== nextValues[0] || state.values[1] !== nextValues[1]) {
-          setValues({ ...state, values: nextValues.slice() });
-          const query = new URLSearchParams(queryFilter.searchParams);
-          query.set('hits', '30');
-          query.delete(`${facet.id}.min`);
-          query.delete(`${facet.id}.max`);
-
-          if (nextValues[0] !== state.domain[0]) {
-            query.set(`${facet.id}.min`, `${nextValues[0]}`);
-          }
-
-          if (nextValues[1] !== state.domain[1]) {
-            query.set(`${facet.id}.max`, `${nextValues[1]}`);
-          }
-
-          query.sort();
-          onFilterUpdate(query.toString());
-        }
-      }
-    },
-    [queryFilter.searchParams, state]
-  );
-
-  return (
-    <>
-      {state && (
-        <RangeSlider
-          loading={loading}
-          domain={state.domain}
-          values={state.values}
-          maxPrefix={maxPrefix ? '+' : undefined}
-          steps={state.steps}
-          unit={unit}
-          onChange={onChange}
-          formatValues={formatValues}
-        />
-      )}
-    </>
-  );
-};
-
-export default RangeFacet;