twin-macro-next-boilerplate

Bleeding-edge frontend template featuring:

• TypeScript
• Next.js
• twin.macro
• Storybook (with interaction testing and test runner)
• Cypress

This template relies on Storybook for both building and testing components.

Component generator

This template includes a component generator to avoid boilerplate and to standardize the folder structure.

yarn g MyComponent

Run yarn g --help for more info.

Testing

Storybook interaction testing

Write React Testing Library tests directly in Storybook using the play function:

LoggedIn.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);

  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
  await userEvent.click(loginButton);

  const welcome = await canvas.findByText(/welcome/i);
  await expect(welcome).toBeInTheDocument();
};

See Page.stories.tsx.

Run your tests:

yarn storybook:test

Learn more about testing with Storybook:

• Interaction testing
• Test runner

twin.macro template documentation

Download this example using degit:

npx degit https://github.com/ben-rogerson/twin.examples/next-emotion-typescript folder-name

Installation instructions coming soon...

Customization

• View the config options →
• Customizing the tailwind config →

Next steps

Learn how to work with twin

• The prop styling guide - A must-read guide to level up on prop styling
• The styled component guide - A must-read guide on getting productive with styled-components

Learn more about emotion

• Emotion’s css prop
• Emotion’s css import
• Emotion’s styled import