rangle/rangle-wvc-nextjs

Development environment for the WVC project

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

Getting Started

Run the development server:

yarn install
yarn dev

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

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Run storybook:

yarn storybook

Open http://localhost:6006/?path=/story/example-introduction--page with your browser to see the result.

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!

Conventions

Code Formatting

• Format code using prettier - VSCode Extension

Branch Naming

type/company/branch-name

• type: feature, bug, chore, etc
• example: feature/rangle/tabs

PR Template

Include Links to

• WVC Component Spreadsheet
• Figma Designs - link to design for appropiate component
• jira ticket if applicable

Include

• Screenshots if applicable
• Testing details
• Components should include a storybook story, showing light mode and dark mode

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.

Packages of Note

• NextJS -docs
• react-aria - A library of React Hooks that provides accessible UI primitives for your design system.
• react-stately - A library of React Hooks that provides cross-platform state management for your design system.

react-aria

react-aria is a package that has a number of hooks to make writing accessible components easier, and helps manage common tasks such as

• useFocus - Handles focus events for the immediate target. Focus events on child elements will be ignored
• useTabList - Provides the behavior and accessibility implementation for a tab list. Tabs organize content into multiple sections and allow users to navigate between them.

react-stately

some components still require some state to manage selected items, position in a carasoule, etc, react-stately provides hooks for common tasks, see docs for full details.

• useTabListState - Provides state management for a Tabs component. Tabs include a TabList which tracks which tab is currently selected and displays the content associated with that Tab in a TabPanel.