@akinon/projectzero 1.32.0-rc.2 → 1.32.0

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

@@ -1,81 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,64 +0,0 @@
-'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

@@ -1,21 +0,0 @@
-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

@@ -1,46 +0,0 @@
-'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

@@ -1,21 +0,0 @@
-'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

@@ -1,42 +0,0 @@
-'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 };