@akinon/projectzero 1.32.0 → 1.33.0

package/app-template/src/components/__tests__/language-select.test.tsx

@@ -0,0 +1,81 @@
+import {
+  render,
+  screen,
+  fireEvent,
+  getAllByRole
+} from '@testing-library/react';
+// eslint-disable-next-line @akinon/projectzero/router-import
+import { useRouter } from 'next/navigation';
+import { LanguageSelect } from '../language-select';
+
+jest.mock('@akinon/next/hooks', () => ({
+  useTranslation: () => ({ locale: 'en' })
+}));
+
+jest.mock('next/navigation', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '',
+      query: '',
+      asPath: '/',
+      push: jest.fn()
+    };
+  }
+}));
+
+jest.spyOn(require('next/navigation'), 'useRouter');
+
+const language = [
+  { label: 'TR', value: 'tr' },
+  { label: 'EN', value: 'en' }
+];
+
+describe('Language Select Component', () => {
+  let wrapper;
+  beforeEach(() => {
+    const { container } = render(<LanguageSelect className="test-class" />);
+    wrapper = container;
+  });
+
+  it('should listen useRouter', () => {
+    const select = screen.getByRole('combobox');
+    fireEvent.click(select);
+    fireEvent.click(getAllByRole(select, 'option')[0]);
+    expect(useRouter).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render without throwing an error', () => {
+    const select = screen.getByRole('combobox');
+
+    expect(select).toBeTruthy();
+  });
+
+  it('has given class names', () => {
+    const select = screen.getByRole('combobox');
+
+    expect(select).toHaveClass('test-class');
+  });
+
+  it('should be icon', () => {
+    const svg = wrapper.querySelector('svg');
+
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('should render a options correctly', () => {
+    const select = screen.getByRole('combobox');
+    const selectOptions = getAllByRole(select, 'option');
+
+    expect(selectOptions[0].textContent).toBe(language[0].label);
+    expect(selectOptions[1].textContent).toBe(language[1].label);
+  });
+
+  it('should change the value of the select', () => {
+    const select = screen.getByRole('combobox');
+
+    fireEvent.keyDown(select, { target: { value: 'tr' } });
+
+    expect(select).toHaveValue(language[0].value);
+  });
+});

package/app-template/src/components/__tests__/link.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Link } from '../link';
+
+jest.mock('@akinon/next/hooks', () => ({
+  useTranslation: () => ({ locale: 'en' })
+}));
+
+const linkContent = {
+  href: '/test-link',
+  className: 'test-class',
+  text: 'text'
+};
+
+describe('Link Component', () => {
+  let wrapper;
+  const onClick = jest.fn();
+
+  beforeEach(() => {
+    const { container } = render(
+      <Link
+        className={linkContent.className}
+        target="_blank"
+        href={linkContent.href}
+        onClick={onClick}
+      >
+        {linkContent.text}
+      </Link>
+    );
+
+    wrapper = container;
+  });
+
+  it('should render without error', () => {
+    const link = screen.getByRole('link');
+
+    expect(link).toBeTruthy();
+  });
+
+  it('should be text without error', () => {
+    const link = screen.getByText(linkContent.text);
+
+    expect(link).toBeTruthy();
+  });
+
+  it('has given class names', () => {
+    const link = screen.getByRole('link');
+
+    expect(link).toHaveClass(linkContent.className);
+  });
+
+  it('should be attribute without error', () => {
+    const link = screen.getByRole('link');
+
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('href', `${linkContent.href}`);
+  });
+
+  it('when clicked it should redirect', () => {
+    const link = screen.getByText(linkContent.text);
+
+    fireEvent.click(link);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/app-template/src/components/__tests__/price.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Price } from '../price';
+import { Provider } from 'react-redux';
+import { store } from '@theme/redux/store';
+
+describe('Price Component', () => {
+  it('should change the display type', () => {
+    render(
+      <Provider store={store}>
+        <Price value="1000" displayType="input" />
+      </Provider>
+    );
+
+    const price = screen.getByRole('textbox');
+
+    price.setAttribute('displayType', 'input');
+    expect(price).toHaveAttribute('displayType', 'input');
+  });
+
+  it('should change the value of the input', () => {
+    render(
+      <Provider store={store}>
+        <Price value="1000" displayType="input" />
+      </Provider>
+    );
+
+    const price = screen.getByRole('textbox');
+
+    fireEvent.change(price, {
+      target: {
+        value: '3333'
+      }
+    });
+
+    expect(price).toHaveDisplayValue(/3.333/i);
+  });
+
+  it('should be removed currency symbol', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <Price value="1000" useCurrencySymbol={false} />
+      </Provider>
+    );
+
+    const price = container.querySelector('span');
+
+    expect(price).not.toHaveTextContent(new RegExp('[^a-zA-Z0-9]$'));
+  });
+
+  it('should be start with a currency symbol', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <Price value="1000" useCurrencyAfterPrice={false} />
+      </Provider>
+    );
+
+    const price = container.querySelector('span');
+    expect(price).toHaveTextContent(new RegExp('^[^a-zA-Z0-9]'));
+  });
+
+  it('should be a negative value', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <Price value="1000" useNegative={true} />
+      </Provider>
+    );
+
+    const price = container.querySelector('span');
+
+    expect(price).toHaveTextContent(new RegExp('^-'));
+  });
+});

package/app-template/src/components/__tests__/radio.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Radio } from '../radio';
+
+function RadioGroup() {
+  return (
+    <form>
+      <Radio name="radio">Radio 1</Radio>
+      <Radio name="radio">Radio 2</Radio>
+    </form>
+  );
+}
+
+describe('Radio Component', () => {
+  let radio, wrapper;
+
+  beforeEach(() => {
+    wrapper = render(<Radio className="text-primary">Project Zero</Radio>);
+    radio = screen.getByRole('radio', {
+      name: /project zero/i
+    });
+  });
+
+  it('should render without throwing an error', () => {
+    expect(radio).toBeInTheDocument();
+  });
+
+  it('should be label classname checked', () => {
+    const { container } = wrapper;
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('text-primary');
+  });
+
+  it('should render a disabled radio button', () => {
+    radio.setAttribute('disabled', true);
+
+    expect(radio).toHaveAttribute('disabled');
+    expect(radio).toBeDisabled();
+  });
+
+  it('should change checked option', () => {
+    render(<RadioGroup />);
+
+    const secondRadio = screen.getByLabelText('Radio 1');
+    fireEvent.click(secondRadio);
+    expect(secondRadio).toBeChecked();
+
+    const firstRadio = screen.getByLabelText('Radio 2');
+    fireEvent.click(firstRadio);
+    expect(firstRadio).toBeChecked();
+    expect(secondRadio).not.toBeChecked();
+  });
+});

package/app-template/src/components/__tests__/select.test.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import {
+  render,
+  fireEvent,
+  screen,
+  getAllByRole
+} from '@testing-library/react';
+import { Select } from '../select';
+
+const options = [
+  { label: 'Austria', value: 'AT' },
+  { label: 'Ireland', value: 'IE' },
+  { label: 'United States', value: 'US' }
+];
+
+describe('Select Component', () => {
+  it('should render without throwing an error', () => {
+    render(<Select options={options} />);
+
+    const select = screen.getByRole('combobox');
+
+    expect(select).toBeTruthy();
+  });
+
+  it('can change the value of the select', () => {
+    render(<Select options={options} />);
+
+    const select = screen.getByRole('combobox');
+
+    const display = select.children[0];
+
+    expect(display.textContent).toBe(options[0].label);
+
+    fireEvent.click(select);
+
+    const selectOptions = getAllByRole(select, 'option');
+
+    fireEvent.click(selectOptions[0]);
+
+    expect(display.textContent).toBe(options[0].label);
+  });
+
+  it('should render a disabled', () => {
+    render(<Select options={options} disabled />);
+
+    const select = screen.getByRole('combobox');
+
+    expect(select).toHaveAttribute('disabled');
+    expect(select).toBeDisabled();
+  });
+
+  it('has given class names', () => {
+    render(<Select options={options} className="accent-primary" />);
+
+    const select = screen.getByRole('combobox');
+
+    expect(select).toHaveClass('accent-primary');
+  });
+
+  it('should render a borderless', () => {
+    render(<Select options={options} borderless={true} />);
+
+    const select = screen.getByRole('combobox');
+
+    expect(select).not.toHaveClass('border');
+  });
+
+  it('should be error message', () => {
+    const error = {
+      type: '',
+      message: 'Error message'
+    };
+    render(<Select options={options} error={error} />);
+    const errorMessage = screen.getByText(error.message);
+    expect(errorMessage).toBeTruthy();
+  });
+
+  it('should be label', () => {
+    const { getByText } = render(
+      <Select options={options} label="Example Label" />
+    );
+
+    expect(getByText('Example Label')).toBeTruthy();
+  });
+
+  it('should be required', () => {
+    const { getByText } = render(
+      <Select options={options} label="Example Label" required />
+    );
+    expect(getByText('Example Label')).toBeTruthy();
+    expect(getByText('*')).toBeTruthy();
+  });
+
+  it('should be icon', () => {
+    const { container } = render(<Select options={options} icon="globe" />);
+
+    const svg = container.querySelector('svg');
+
+    expect(svg).toHaveClass(
+      'absolute left-0 top-1/2 transform -translate-y-1/2'
+    );
+  });
+
+  it('should be icon with size', () => {
+    const size = 20;
+
+    const { container } = render(
+      <Select options={options} icon="globe" size={size} />
+    );
+
+    const svg = container.querySelector('svg');
+
+    expect(svg.getAttribute('height')).toBe(size.toString());
+  });
+});

package/app-template/src/components/__tests__/tab.test.tsx

@@ -0,0 +1,101 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Tabs } from '../tabs';
+import { TabPanel } from '../tab-panel';
+
+const data = {
+  title1: 'Tab one',
+  content1: 'Tab content one',
+  title2: 'Tab two',
+  content2: 'Tab content two',
+  testId1: 'content-1',
+  testId2: 'content-2',
+  tabClass: 'm-4 h-32',
+  tabTestId: 'tab',
+  tabIcon: 'user'
+};
+
+describe('Tab Component', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    const { container } = render(
+      <Tabs data-testid={data.tabTestId} className={data.tabClass}>
+        <TabPanel icon={data.tabIcon} title={data.title1}>
+          <span data-testid={data.testId1}>{data.content1}</span>
+        </TabPanel>
+        <TabPanel title={data.title2}>
+          <span data-testid={data.testId2}>{data.content2}</span>
+        </TabPanel>
+      </Tabs>
+    );
+
+    wrapper = container;
+  });
+
+  it('should be Tab one button in document', () => {
+    const tabButton1 = screen.getByText(data.title1);
+
+    expect(tabButton1).toBeInTheDocument();
+  });
+
+  it('should be Tab two button in document', () => {
+    const tabButton2 = screen.getByText(data.title2);
+
+    expect(tabButton2).toBeInTheDocument();
+  });
+
+  it('should be Tab one content', () => {
+    const tab1Content = screen.getByText(data.content1);
+
+    expect(tab1Content).toBeInTheDocument();
+  });
+
+  it('when tab two button is clicked, the correct content should be', () => {
+    const tab2Button = screen.getByText(data.title2);
+
+    fireEvent.click(tab2Button);
+
+    const content = screen.getByTestId(/content-2/i);
+
+    expect(content).toHaveTextContent(data.content2);
+  });
+
+  it('when tab one button is clicked, the correct content should be', () => {
+    const tab1Button = screen.getByText(data.title1);
+
+    fireEvent.click(tab1Button);
+
+    const content = screen.getByTestId(/content-1/i);
+
+    expect(content).toHaveTextContent(data.content1);
+  });
+
+  it('should be able to navigate between tabs', () => {
+    const tab1Button = screen.getByText(data.title1);
+    const tab2Button = screen.getByText(data.title2);
+
+    fireEvent.click(tab1Button);
+
+    const content1 = screen.getByTestId(/content-1/i);
+
+    expect(content1).toHaveTextContent(data.content1);
+
+    fireEvent.click(tab2Button);
+
+    const content2 = screen.getByTestId(/content-2/i);
+
+    expect(content2).toHaveTextContent(data.content2);
+  });
+
+  it('has given class names', () => {
+    const tab = screen.getByTestId(data.tabTestId);
+
+    expect(tab).toHaveClass(data.tabClass);
+  });
+
+  it('should be icon', () => {
+    const svg = wrapper.querySelector('svg');
+
+    expect(svg).toBeInTheDocument();
+  });
+});

package/app-template/src/components/accordion.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { ReactNode, useState } from 'react';
+import { Icon } from './icon';
+import { twMerge } from 'tailwind-merge';
+
+type AccordionProps = {
+  isCollapse?: boolean;
+  title?: string;
+  subTitle?: string;
+  icons?: string[];
+  iconSize?: number;
+  iconColor?: string;
+  children?: ReactNode;
+  className?: string;
+  titleClassName?: string;
+  dataTestId?: string;
+};
+
+export const Accordion = ({
+  isCollapse = false,
+  title,
+  subTitle,
+  icons = ['chevron-up', 'chevron-down'],
+  iconSize = 16,
+  iconColor = 'fill-[#000000]',
+  children,
+  className,
+  titleClassName,
+  dataTestId
+}: AccordionProps) => {
+  const [collapse, setCollapse] = useState(isCollapse);
+
+  return (
+    <div
+      className={twMerge(
+        'flex flex-col justify-center border-b pb-4 mb-4 last:border-none',
+        className
+      )}
+    >
+      <div
+        className="flex items-center justify-between cursor-pointer"
+        onClick={() => setCollapse(!collapse)}
+        data-testid={dataTestId}
+      >
+        <div className="flex flex-col">
+          {title && (
+            <h3 className={twMerge('text-sm', titleClassName)}>{title}</h3>
+          )}
+          {subTitle && <h4 className="text-xs text-gray-700">{subTitle}</h4>}
+        </div>
+
+        {icons && (
+          <Icon
+            name={collapse ? icons[0] : icons[1]}
+            size={iconSize}
+            className={`fill-[${iconColor}]}`}
+          />
+        )}
+      </div>
+      {collapse && <div className="mt-3 text-sm">{children}</div>}
+    </div>
+  );
+};

package/app-template/src/components/badge.tsx

@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+import { BadgeProps } from '@theme/components/types';
+import { twMerge } from 'tailwind-merge';
+
+export const Badge = (props: BadgeProps) => {
+  const { children, className } = props;
+
+  return (
+    <div
+      className={twMerge(
+        clsx(
+          'absolute top-0 -right-2 text-center text-xs rounded-full cursor-default',
+          !className && 'bg-primary text-gray-500'
+        ),
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/app-template/src/components/button.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { ButtonProps } from '@theme/components/types';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const Button = (props: ButtonProps) => {
+  return (
+    <button
+      {...props}
+      className={twMerge(
+        clsx(
+          [
+            'px-4',
+            'h-10',
+            'text-xs',
+            'bg-primary',
+            'text-primary-foreground',
+            'border',
+            'border-primary',
+            'transition-all',
+            'hover:bg-white',
+            'hover:border-primary',
+            'hover:text-primary'
+          ],
+          props.appearance === 'outlined' && [
+            'bg-transparent ',
+            'text-primary ',
+            'hover:bg-primary ',
+            'hover:text-primary-foreground'
+          ],
+          props.appearance === 'ghost' && [
+            'bg-transparent',
+            'border-transparent',
+            'text-primary',
+            'hover:bg-primary',
+            'hover:text-primary-foreground'
+          ]
+        ),
+        props.className
+      )}
+    >
+      {props.children}
+    </button>
+  );
+};

package/app-template/src/components/canonical-url.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+
+export default function CanonicalURL() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const URL = process.env.NEXT_PUBLIC_URL;
+  const asPath = pathname === '/' ? '' : pathname;
+  const currentPage = Number(searchParams.get('page')) || 1;
+  const canonicalUrl =
+    currentPage > 1
+      ? `${(URL + asPath).split('?')[0]}/?page=${currentPage}`
+      : (URL + asPath).split('?')[0];
+
+  return (
+    <>
+      <link rel="canonical" href={canonicalUrl} />
+    </>
+  );
+}

package/app-template/src/components/carousel-core.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import 'react-multi-carousel/lib/styles.css';
+import Carousel, {
+  CarouselProps as BaseCarouselProps
+} from 'react-multi-carousel';
+import { forwardRef } from 'react';
+import { useMediaQuery } from '@akinon/next/hooks';
+
+type ContainerAspectRatioType = {
+  mobile: number;
+  desktop: number;
+};
+
+interface CarouselProps extends BaseCarouselProps {
+  containerAspectRatio: ContainerAspectRatioType;
+}
+
+const CarouselCore = forwardRef<Carousel, CarouselProps>((props, ref) => {
+  const { containerAspectRatio } = props;
+  const matches = useMediaQuery('(min-width: 768px)');
+  const [aspectRatio, setAspectRatio] = useState(containerAspectRatio.mobile);
+
+  useEffect(() => {
+    if (matches) {
+      setAspectRatio(containerAspectRatio.desktop);
+    } else {
+      setAspectRatio(containerAspectRatio.mobile);
+    }
+  }, [matches]);
+
+  return (
+    <div className="w-full" style={{ aspectRatio }}>
+      <Carousel {...props} ref={ref} />
+    </div>
+  );
+});
+
+CarouselCore.displayName = 'CarouselCore';
+
+export { CarouselCore };