@redocly/theme 0.0.0-react18-20231120182601

package/src/components/Filter/Filter.tsx

@@ -0,0 +1,276 @@
+import React from 'react';
+import styled from 'styled-components';
+import { DatePicker } from 'react-date-picker';
+
+import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
+import { useTranslate } from '@portal/hooks';
+import { CheckboxIcon } from '@theme/icons';
+import { Select } from '@theme/components/Select';
+import type { ThemeConfig } from '@theme/config';
+
+export function Filter({
+  filter,
+  filterValuesCasing,
+}: {
+  filter: ResolvedFilter & { selectedOptions: any };
+  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
+}) {
+  const { translate } = useTranslate();
+
+  if (!filter.parentUsed) return null;
+
+  let selectOptions: { value: string; element: React.ReactNode }[] = [];
+  if (filter.type === 'select') {
+    const defaultOptionCount = filter.filteredOptions.reduce(
+      (acc, option) => acc + option.count,
+      0,
+    );
+    selectOptions = [
+      {
+        value: '',
+        element: (
+          <FilterOption key="all" onClick={() => filter.selectOption('')}>
+            <FilterOptionLabel>
+              {translate('theme.catalog.filters.select.all', 'All')}
+            </FilterOptionLabel>
+            <FilterOptionCount>{defaultOptionCount}</FilterOptionCount>
+          </FilterOption>
+        ),
+      },
+    ];
+    selectOptions.push(
+      ...filter.filteredOptions.map((option) => ({
+        value: option.value,
+        element: (
+          <FilterOption key={option.value}>
+            <FilterOptionLabel>
+              {changeCasing(translate(option.value), filterValuesCasing)}
+            </FilterOptionLabel>
+            <FilterOptionCount>{option.count}</FilterOptionCount>
+          </FilterOption>
+        ),
+      })),
+    );
+  }
+
+  return (
+    <FilterGroup key={filter.property + filter.title}>
+      <FilterTitle>{translate(filter.titleTranslationKey, filter.title)} </FilterTitle>
+      {filter.type === 'select' ? (
+        <StyledSelect
+          value={(filter.selectedOptions as Set<any>).values().next()?.value || ''}
+          onChange={(value) => filter.selectOption(value)}
+          options={selectOptions}
+        />
+      ) : filter.type === 'date-range' ? (
+        <>
+          <DatePickerWrapper>
+            <span>From:</span>
+            <DatePicker
+              closeCalendar={true}
+              format="y-MM-dd"
+              dayPlaceholder="DD"
+              monthPlaceholder="MM"
+              yearPlaceholder="YYYY"
+              value={filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : null}
+              minDetail="decade"
+              maxDate={new Date()}
+              onChange={(from) => {
+                if (Array.isArray(from)) return;
+                filter.selectOption({
+                  ...(filter.selectedOptions as any),
+                  from: formatDateWithNoTimeZone(from),
+                });
+              }}
+            />
+          </DatePickerWrapper>
+          <DatePickerWrapper>
+            <span>To:</span>
+            <DatePicker
+              closeCalendar={true}
+              dayPlaceholder="DD"
+              monthPlaceholder="MM"
+              yearPlaceholder="YYYY"
+              format="y-MM-dd"
+              minDate={
+                filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined
+              }
+              value={filter.selectedOptions.to ? new Date(filter.selectedOptions.to) : null}
+              minDetail="decade"
+              onChange={(to) => {
+                if (Array.isArray(to)) return;
+                filter.selectOption({
+                  ...filter.selectedOptions,
+                  to: formatDateWithNoTimeZone(to),
+                });
+              }}
+            />
+          </DatePickerWrapper>
+        </>
+      ) : (
+        filter.filteredOptions.map((value: any) => {
+          const id = 'filter--' + filter.property + '--' + value.value;
+          return (
+            <FilterOption key={id} role="link" onClick={() => filter.toggleOption(value.value)}>
+              <CheckboxIcon checked={filter.selectedOptions.has(value.value)} />
+              <FilterOptionLabel>
+                {changeCasing(translate(value.value), filterValuesCasing)}
+              </FilterOptionLabel>
+              <FilterOptionCount>{value.count}</FilterOptionCount>
+            </FilterOption>
+          );
+        })
+      )}
+    </FilterGroup>
+  );
+}
+
+function changeCasing(
+  str: string,
+  casing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'],
+) {
+  if (!casing || casing === 'original' || !str) return str;
+
+  if (casing === 'lowercase') {
+    return str.toLowerCase();
+  }
+
+  if (casing === 'uppercase') {
+    return str.toUpperCase();
+  }
+
+  if (casing === 'sentence') {
+    const words = str?.split(/[\s-_]+/);
+    return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+  }
+}
+
+const FilterGroup = styled.div`
+  padding: var(--filter-group-padding);
+`;
+
+const FilterOptionLabel = styled.label`
+  cursor: pointer;
+  font-size: var(--filter-option-label-font-size);
+  font-weight: var(--filter-option-label-font-weight);
+  margin: var(--filter-option-label-margin);
+  color: var(--filter-option-label-color);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+const FilterOptionCount = styled.label`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  height: var(--filter-option-count-height);
+  color: var(--filter-option-count-color);
+  text-align: center;
+  font-size: var(--filter-option-count-font-size);
+  font-weight: var(--filter-option-count-font-weight);
+  padding: var(--filter-option-count-padding);
+  border-radius: var(--filter-option-count-border-radius);
+  border: var(--filter-option-count-border);
+  background-color: var(--filter-option-count-background-color);
+`;
+
+const FilterTitle = styled.h4`
+  font-weight: var(--filter-title-font-weight);
+  font-size: var(--filter-title-font-size);
+  margin: var(--filter-title-margin);
+`;
+
+const FilterOption = styled.label.attrs({ 'data-cy': 'Filter/FilterOption' })`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-weight: var(--filter-option-font-weight);
+  font-size: var(--filter-option-font-size);
+  margin: var(--filter-option-margin);
+
+  input {
+    cursor: pointer;
+  }
+`;
+
+const StyledSelect = styled(Select)`
+  min-height: var(--filter-select-min-height);
+  color: var(--filter-select-color);
+  border: 1px solid var(--filter-select-border-color);
+  border-radius: var(--filter-select-border-radius);
+  padding: var(--filter-select-padding);
+
+  :hover {
+    border-color: var(--filter-select-hover-border-color);
+  }
+
+  ${FilterOption} {
+    margin: var(--filter-select-option-margin);
+  }
+`;
+
+const DatePickerWrapper = styled.div`
+  color: var(--filter-date-picker-color);
+  display: flex;
+  flex-direction: row;
+  margin: var(--filter-date-picker-margin);
+
+  align-items: center;
+  gap: var(--filter-date-picker-gap);
+
+  > span {
+    width: var(--filter-date-picker-width);
+  }
+
+  .react-date-picker {
+    flex: 1;
+  }
+
+  .react-calendar__tile--now {
+    background: var(--filter-date-picker-tile-background);
+    color: var(--filter-date-picker-tile-color);
+
+    &:enabled:hover,
+    &:enabled:focus {
+      background: var(--filter-date-picker-tile-hover-background);
+      color: var(--filter-date-picker-tile-hover-color);
+    }
+  }
+
+  .react-date-picker__inputGroup__input {
+    width: var(--filter-date-picker-input-width);
+
+    &:invalid {
+      background: var(--filter-date-picker-invalid-input-background);
+    }
+  }
+
+  .react-date-picker__button {
+    padding: var(--filter-date-picker-button-padding);
+
+    svg {
+      stroke: var(--filter-date-picker-icon-stroke);
+      width: var(--filter-date-picker-icon-width);
+    }
+
+    &:enabled:hover .react-date-picker__button__icon {
+      stroke: var(--filter-date-picker-hover-icon-stroke);
+    }
+  }
+
+  .react-date-picker__wrapper {
+    border: 1px solid var(--filter-date-picker-wrapper-border-color);
+    border-radius: var(--filter-date-picker-wrapper-radius);
+    padding: var(--filter-date-picker-wrapper-padding);
+  }
+`;
+
+function padZero(num: number) {
+  return num < 10 ? '0' + num : num;
+}
+
+function formatDateWithNoTimeZone(date?: Date | null) {
+  if (!date) return date;
+  return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`;
+}

package/src/components/Filter/FilterContent.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ThemeConfig } from '@theme/config';
+import { Button } from '@theme/components/Button';
+import { useTranslate } from '@portal/hooks';
+import { FilterControls } from '@theme/components/Catalog';
+import { Filter } from '@theme/components/Filter';
+import { Sidebar } from '@theme/components/Sidebar';
+import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
+import { StyledInput } from '@theme/components/Filter/FilterPopover';
+
+interface FilterContentProps {
+  setFilterTerm: (value: string) => void;
+  filters: ResolvedFilter[];
+  filterTerm: string;
+  isMobile: boolean;
+  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
+}
+
+export function FilterContent({
+  setFilterTerm,
+  filters,
+  filterTerm,
+  isMobile,
+  filterValuesCasing,
+}: FilterContentProps) {
+  const { translate } = useTranslate();
+
+  const hasActiveFilters = filters.some((filter) => {
+    if (filterTerm) return true;
+    if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
+      return filter.selectedOptions.size;
+    } else if (filter.selectedOptions.from && filter.selectedOptions.to) {
+      return true;
+    }
+  });
+
+  const handleClearAll = () => {
+    filters.forEach((filter) => filter.selectOption(''));
+    setFilterTerm('');
+  };
+
+  return (
+    <FilterContentWrapper isMobile={isMobile}>
+      <FilterControls>
+        <StyledInput
+          placeholder={translate('theme.catalog.filters.placeholder', 'Type to filter...')}
+          value={filterTerm}
+          onChange={(e) => setFilterTerm(e.target.value)}
+        />
+      </FilterControls>
+      <FilterItems>
+        {filters.map((filter, idx) => (
+          <Filter
+            filter={filter}
+            key={filter.property + '-' + idx}
+            filterValuesCasing={filterValuesCasing}
+          />
+        ))}
+      </FilterItems>
+      {hasActiveFilters && (
+        <ActionsContainer>
+          <ClearAllButton size="default" variant="outlined" onClick={handleClearAll}>
+            {translate('theme.catalog.filters.clearAll', 'Clear all filters')}
+          </ClearAllButton>
+        </ActionsContainer>
+      )}
+    </FilterContentWrapper>
+  );
+}
+
+const FilterContentWrapper = styled(Sidebar)<{ isMobile?: boolean }>`
+  width: var(--sidebar-width);
+  display: none;
+
+  ${Button} {
+    width: var(--filter-content-clear-button-width);
+  }
+
+  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.medium} {
+    display: flex;
+    border-right: 1px solid var(--filter-content-border-color);
+
+    ${FilterControls} {
+      background: var(--filter-controls-background-color);
+    }
+  }
+`;
+
+export const FilterItems = styled.div`
+  overflow: scroll;
+  padding: var(--filter-content-items-padding);
+`;
+
+const ActionsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-base) var(--spacing-lg);
+  margin-top: auto;
+`;
+
+const ClearAllButton = styled(Button)`
+  width: var(--filter-content-clear-button-width);
+`;

package/src/components/Filter/FilterPopover.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ThemeConfig } from '@theme/config';
+import { Filter } from '@theme/components/Filter';
+import { FilterControls } from '@theme/components/Catalog';
+import { FilterContent, FilterItems } from '@theme/components/Filter/FilterContent';
+import { useTranslate } from '@portal/hooks';
+import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
+
+interface FilterPopoverProps {
+  setIsAddingFilter: (value: boolean) => void;
+  filters: ResolvedFilter[];
+  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
+}
+
+export function FilterPopover({
+  setIsAddingFilter,
+  filters,
+  filterValuesCasing,
+}: FilterPopoverProps) {
+  const [filterTerm, setFilterTerm] = React.useState('');
+  const filteredFilters = filters
+    .map((filter) => {
+      const options = filter.options.filter((option) =>
+        option.value.toLowerCase().includes(filterTerm.toLowerCase()),
+      );
+      return options.length
+        ? {
+            ...filter,
+            filteredOptions: options,
+          }
+        : null;
+    })
+    .filter(Boolean) as ResolvedFilter[];
+
+  const { translate } = useTranslate();
+
+  return (
+    <FilterPopoverWrapper>
+      <FilterPopoverHeader>
+        <FilterPopoverHeaderLabel>Add Filter</FilterPopoverHeaderLabel>
+        <FilterPopoverHeaderButton onClick={() => setIsAddingFilter(false)}>
+          {translate('theme.catalog.filters.done', 'Done')}
+        </FilterPopoverHeaderButton>
+      </FilterPopoverHeader>
+      <FilterContent
+        setFilterTerm={setFilterTerm}
+        filters={filters}
+        filterTerm={filterTerm}
+        filterValuesCasing={filterValuesCasing}
+        isMobile
+      />
+      <FilterControls>
+        <StyledInput
+          placeholder={translate('theme.catalog.filters.placeholder', 'Type to filter...')}
+          value={filterTerm}
+          onChange={(e) => setFilterTerm(e.target.value)}
+        />
+      </FilterControls>
+      <FilterItems>
+        {filteredFilters.map((filter, idx) => (
+          <Filter filter={filter} key={filter.property + '-' + idx} />
+        ))}
+      </FilterItems>
+    </FilterPopoverWrapper>
+  );
+}
+
+const FilterPopoverWrapper = styled.aside<{ isActiveInMobileMode?: boolean }>`
+  position: absolute;
+  top: 0;
+  z-index: var(--z-index-popover);
+  height: 100vh;
+  overflow: auto;
+  transition: height 0.2s ease-in-out;
+  width: 100%;
+  background-color: var(--filter-popover-background-color);
+  display: block;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: none;
+  }
+`;
+
+const FilterPopoverHeader = styled.div`
+  height: var(--navbar-height);
+  padding: var(--filter-popover-header-padding);
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr 1fr 1fr;
+  border-bottom: 1px solid var(--filter-popover-header-border-color);
+  background-color: var(--filter-popover-header-background-color);
+`;
+
+const FilterPopoverHeaderLabel = styled.div`
+  color: var(--filter-popover-header-label-color);
+  justify-self: center;
+  grid-column-start: 2;
+  font-size: var(--filter-popover-header-label-font-size);
+  font-weight: var(--filter-popover-header-label-font-weight);
+`;
+
+const FilterPopoverHeaderButton = styled.div.attrs({
+  'data-cy': 'FilterPopover/DoneButton',
+})`
+  color: var(--filter-popover-header-button-color);
+  justify-self: end;
+  font-size: var(--filter-popover-header-button-font-size);
+  font-weight: var(--filter-popover-header-button-font-weight);
+  height: var(--filter-popover-header-button-height);
+  line-height: var(--filter-popover-header-button-height);
+`;
+
+export const StyledInput = styled.input.attrs({ 'data-cy': 'FilterPopover/Input' })`
+  border: var(--filter-input-border);
+  min-width: var(--filter-input-min-width);
+  width: 100%;
+  outline: none;
+  padding: var(--filter-input-padding);
+  border-radius: var(--filter-input-border-radius);
+  background-color: var(--filter-input-background-color);
+  color: var(--filter-input-color);
+  font-family: var(--filter-input-font-family);
+  font-size: var(--filter-input-font-size);
+  line-height: var(--filter-input-line-height);
+
+  &::placeholder {
+    opacity: var(--filter-input-placeholder-opacity);
+    color: var(--filter-input-placeholder-color);
+  }
+
+  &:hover {
+    color: var(--filter-input-hover-color);
+    border: var(--filter-input-hover-border);
+  }
+
+  &:focus {
+    color: var(--filter-input-focus-color);
+    border: var(--filter-input-focus-border);
+  }
+
+  &:-webkit-autofill {
+    background-color: var(--filter-input-background-color);
+  }
+`;

package/src/components/Filter/FilterTag.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ClearIcon } from '@theme/components/Search/ClearIcon';
+
+interface FilterTagProps {
+  label: string;
+  onClick: () => void;
+}
+
+export function FilterTag({ label, onClick }: FilterTagProps) {
+  return (
+    <TagWrapper onClick={onClick}>
+      <TagLabel>{label}</TagLabel>
+      <ClearIcon />
+    </TagWrapper>
+  );
+}
+
+const TagWrapper = styled.div.attrs({ 'data-cy': 'Filter/FilterTag' })`
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  cursor: pointer;
+  color: var(--filter-tag-color);
+  border-radius: var(--filter-tag-border-radius);
+  border: 1px solid var(--filter-tag-border-color);
+  background-color: var(--filter-tag-background-color);
+  padding: var(--filter-tag-padding);
+  font-size: var(--filter-tag-font-size);
+  font-weight: var(--filter-tag-font-weight);
+  margin: var(--filter-tag-margin);
+`;
+
+const TagLabel = styled.div`
+  margin: var(--filter-tag-label-margin);
+`;

package/src/components/Filter/FilterTags.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
+import { FilterTag } from '@theme/components/Filter/FilterTag';
+
+interface FilterTagsProps {
+  filters: ResolvedFilter[];
+}
+
+export function FilterTags({ filters }: FilterTagsProps) {
+  const selectedFilters: { filter: ResolvedFilter; selectedOption: string }[] = [];
+  filters.forEach((filter: ResolvedFilter & { selectedOptions: any }) => {
+    if (filter.selectedOptions?.size) {
+      for (let selectedOption of filter.selectedOptions) {
+        selectedFilters.push({
+          filter,
+          selectedOption,
+        });
+      }
+    }
+  });
+
+  return (
+    <FilterTagsWrapper>
+      {selectedFilters.map(({ filter, selectedOption }) => (
+        <FilterTag
+          key={`${filter.title}: ${selectedOption}`}
+          onClick={() => filter.toggleOption(selectedOption)}
+          label={`${filter.title}: ${selectedOption}`}
+        />
+      ))}
+    </FilterTagsWrapper>
+  );
+}
+
+const FilterTagsWrapper = styled.div`
+  display: flex;
+`;

package/src/components/Filter/index.ts

@@ -0,0 +1,6 @@
+export * from '@theme/components/Filter/Filter';
+export * from '@theme/components/Filter/FilterContent';
+export * from '@theme/components/Filter/FilterPopover';
+export * from '@theme/components/Filter/FilterTags';
+export * from '@theme/components/Filter/FilterTag';
+export * from '@theme/components/Filter/styledVariables';