🌎 Next 14 Template 🌎

📌 Requirements: 📌

NodeJs: 🔗 https://nodejs.org/en/

---

▶️ Get Started:

1. Clone this repo

git clone https://github.com/Aleydon/Next14.git

2. Install NPM packages

npm install or yarn install

3. Run this project

npm run dev or yarn dev

---

Template configuration:

• Jest + Testing Library for automated testing. 🔗 https://jestjs.io/ + https://testing-library.com/
• Storybook for component documentation. 🔗 https://storybook.js.org/
• Eslint + Prettier for code standardization and formatting. 🔗 https://eslint.org/ + https://prettier.io/
• Typescript for typing. 🔗 https://www.typescriptlang.org/
• Tailwind Css for styling components. 🔗 https://tailwindcss.com/
• HuskyJs for automatically lint your commit messages, code, and run tests upon committing or pushing. 🔗 https://typicode.github.io/husky/

---

Tests + Storybook:

• How to run tests:

npm run test or npm run test:watch

It has an example of tests with Jest + Testing-Library in src/app/page.spec.tsx

import { render, screen } from '@testing-library/react';

import Page from './page';

describe('Page Component', () => {
  it('should get the text hello world', () => {
    render(<Page />);
    const hello = screen.getByText('Hello World');
    expect(hello).toBeDefined();
  });

  it('should get the text hello world in the component s heading', () => {
    render(<Page />);
    const heading = screen.getByRole('heading', {
      name: 'Hello World'
    });
    expect(heading).toBeInTheDocument();
  });

  it('must get the link from the page component', () => {
    render(<Page />);
    const link = screen.getByRole('link', { name: 'github.com/Aleydon' });
    expect(link).toBeDefined();
    expect(link).toHaveAttribute('target', '_blank');
    expect(link).toHaveAttribute('aria-label', 'github.com/Aleydon');
  });
});

---

• How to run storybook:

npm run storybook or yarn storybook

also has an example of using Storybook in the Text component in src/app/components/Text/text.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';

import Text, { type TextProps } from '.';

const text: Meta<typeof Text> = {
  component: Text,
  title: 'Components/Text'
};

export default text;

export const Small: StoryObj<TextProps> = {
  args: {
    size: 'small',
    children: 'Small Text'
  }
};

export const Medium: StoryObj<TextProps> = {
  args: {
    size: 'medium',
    children: 'Medium Text'
  }
};
export const Large: StoryObj<TextProps> = {
  args: {
    size: 'large',
    children: 'Large Text'
  }
};