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

<Meta title="Documentation/Getting Started/Structure"/>

# Mono-repo Structure

The mono-repo structure has been organised to differentiate between several distinct types of packages. These are:

- Components
- Services
- Tools

## Components

UI components written in Vue.js, which can be pulled into a Vue application as a shared library component.

Components are organised into sub-folders loosely matching the [Atomic Design Methodology](https://bradfrost.com/blog/post/atomic-web-design/), such as **Atoms**, **Molecules** and **Organisms**.

As a rough guide:
- **Atom** = Basic building blocks of an application.
- **Molecule** = A group of component atoms that form a small fundamental component.
- **Organism** = A group of molecules joined together to form a relatively complex, distinct section of an interface.
- **Templates** = Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure
- **Pages** = Pages are a combination of atoms, molecules, organisms and templates that come together to make a specific web page.

As a general rule, if a component depends on another UI component (for example, it contains a `button` component), it will be at the very least a molecule in size. Atoms by their definition are the simplest form of components.

## Services

Services are packages that are written solely in JavaScript and provide a distinct piece of client-side or middleware functionality.

For instance, it would make sense to write a specific package to handle how components handle globalisation and internationalisation via the Vue i18n module – and we have a package that does just that (`f-globalisation`).

We currently have a shared package called `f-services` which defines a number of client-side utility services that components can make use of.

## Tools

Tools are packages that are used to provide a specific piece of functionality that is used by components or more generally in the mono-repo.

Currently, we have the following tools:

- [`f-vue-icons`](https://github.com/justeat/fozzie-components/tree/master/packages/tools/f-vue-icons) – Provides an interface for our Vue components to use icons defined in  the [`f-icons` package](https://github.com/justeat/f-icons).
- [`generator-component`](https://github.com/justeat/fozzie-components/tree/master/packages/tools/generator-component) – A yeoman generator that should be used when creating new packages to provide a base folder structure to start from.
- [`storybook`](https://github.com/justeat/fozzie-components/tree/master/packages/tools/storybook) – Our component library documentation tool that allows us to preview and test components in isolation before being integrated into JE web applications.
