import LinkTo from '@storybook/addon-links/react';

<Meta title="Documentation/Guides/Fozzie/What is Fozzie?"/>

# What is Fozzie?

Fozzie is a UI Component Framework used at JET, built to help modularise and share the UI code we write. It was created by the L-JE team, but is now the recommended framework for use on Vue applications across JET.

Fozzie is made up of two main parts:

- The **[Fozzie SCSS Helper Library](https://github.com/justeat/fozzie)** that helps ensure web projects across JET have access to a lightweight set of baseline SCSS variables, mixins and functions.
  Fozzie SCSS is Vue agnostic – it's only dependency is Sass. This also extends the JET PIE Design Tokens.
- The [fozzie-components component mono-repo](https://github.com/justeat/fozzie-components) – a component library of shared Vue components, built to adhere to JET's global design language, PIE.

Alongside these, there are some other useful things that are included in the fozzie ecosystem:

- **Shared JavaScript Modules**
    Modules that just contain JS (much like any reusable NPM module). e.g. Common shared JS for features such as form validation, analytics or logging.
- **Tooling**
    Modules that help share our tooling across projects. e.g. build modules (gulp/webpack), linting configurations (for [Stylelint](https://github.com/justeat/stylelint-config-fozzie) & [ESLint](https://github.com/justeat/eslint-config-fozzie)), JS test helpers etc.

Teams are free to use as much or as little of Fozzie as they need – and as all of the above is open source, we encourage teams to also help us improve it.


## Core Aim

Fozzie was created to facilitate engineers to build and share a common set of UI components across all of our projects.

Previously, there was a lot of wasted engineering effort. For instance, every JET site uses the same set of buttons which are then duplicated and implemented by engineering teams. Work to create these components had been done multiple times by different engineers working independently. This meant that when a design update or performance improvement was made to one of these separate components, there was no way to roll this out across all of our sites without copying and pasting the new code.

Fozzie components fix this issue by providing shared SCSS and JS that can be consumed by any project.  Components are versioned and released using NPM, meaning that projects consuming the components can upgrade at their own pace in line with their own release schedule.


## Technology Stack

The Fozzie SCSS framework has been created to be technology agnostic (aside from needing Sass to compile it, of course).

The Fozzie SCSS framework is being used by teams across JET on projects built in React, Vue.js and Vanilla JS, using WebPack and Gulp as their task runner.

Fozzie components are primarily for use on Vue applications built across JET.

The tooling that has been built up alongside Fozzie – such as linting and testing configs – we will be working with the FrontEnd Guild to globalise, so that all teams across JET can contribute and use them.


## Modules

To see the current list of public Fozzie modules, take a look on [our public Github account](https://github.com/search?q=topic%3Afozzie+org%3Ajusteat&type=Repositories).


## Fozzie SCSS

To find out more information on how to import and use Fozzie SCSS, check out the <LinkTo kind="Documentation/Guides/Fozzie/Fozzie SCSS" story="page">'Fozzie SCSS'</LinkTo> section of the documentation.

