This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Storybook

Learn more about how the component library works with storybook.

• Components in the app/_components directory contain story.ts file that is used for component documentation.
• Start storybook by running npm run storybook

Example story.ts file

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

import Title from ".";

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: "Text/Title",
  component: Title,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    className: "",
    title: "Title goes here",
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ["autodocs"],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {},
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: {},
} satisfies Meta<typeof Title>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
  args: {
    title: "Title",
  },
};

export const Secondary: Story = {
  args: {
    title: "Title className",
    className: "xxl",
  },
};

Testing

Testing is provided through Jest by creating a test.tsx or test.ts file.

• To generate a coverage report run npm run test:coverage
• To run tests while coding run npm run test:watch

There are a number of utilities available through these libraries:

• @testing-library/react
• @testing-library/jest-dom

Example test.tsx file

import Test from "./index";
import { render } from "@testing-library/react";

describe("Title", () => {
  it("renders the title with custom class", () => {
    const { getByText } = render(<Test className="xl" title="Test Title" />);
    expect(getByText("Test Title").className).toBe("text-title xl");
  });
});

Linting

ESLint: Ensures your JavaScript/TypeScript code is clean and follows best practices.

Stylelint: Enforces consistent styles in your CSS/SCSS.

Run: npm run lint

Husky

Git pre-checks are enabled. To skip the pre-checks add --no-verify to the end of your git command.

Read husky docs here.

These checks are ran again in the github actions, so skipping them will be visible in the build.

If the formatter doesnt work with vscode usually the secret is to restart vscode. You also need to make sure you have esbenp.prettier-vscode and dbaeumer.vscode-eslint extensions installed.

Once the extensions are installed you have to make sure eslint is your default formatter in VSCode.

• on the file you are editing, press command + P
• type format document with and select the option
• select eslint

Eslint uses pretttier under the hood. If you use prettier and not eslint it gets wonky on the rules. So feed everything through eslint.

If you are not familiar with git commands these are standard commands you can use:

git add . - adds all the changes to the next commit

git commit -m "my commit message goes here" - commits the changes with lint and tests passing

git commit -m "my commit message goes here" --no-verify - commits the changes but without lint and testing

git push - pushes up your changes

ENV setup

Copy .example.local and rename it to .env.local Update the file with the values. The same values must be in the Vercel app