Long Island Marketing Sites Design System 🖌️

The design system for Long Island Marketing Sites (Long Island Laser Tag & Long Island Mini Golf).

Utilizes Storybook for development and documentation.

View Design System Storybook 📖

Visit the live Storybook deploy to easily reference the design system.

Installation 🛠️

yarn add li-design-system

Development 💻

Clone the repo

git clone https://github.com/octoml/octoai-apps.git

Navigate to cloned folder

cd li-design-system

Install dependencies

yarn

Start the dev server

yarn dev

Start the Storybook dev server

yarn storybook

Tech stack

• React - Effortless reusability -- essential for a design system.
• TypeScript - Adds type safeties and reduces potential errors further down the road
• Storybook - Acts as documentation and serves as a building block for snapshot and visual regression tests
• Jest - Comprehensive testing library to ensure code is doing what it is supposed to
  • Uses jest-axe as an additional A11y safety net (on top of extensive manual testing)
• React Testing Library Adds APIs on top of DOM Testing Library for easier React component testing
• Loki - Generates screenshots of Storybook stories to use with reg-cli
• reg-cli - Generates report from screenshots generated by Loki to easily scan for visual regression.
• Framer Motion - Powerful motion library for React animations