Setting up the EDS repo

The elmo-design-system repo is a monorepo that includes:

• ELMO Design System component library
• ELMO Design System documentation site
• Example/demo site

To develop in the EDS monorepo, install the following dependencies and follow the below instructions.

NodeJS

To use this monorepo you'll need the latest version of NodeJS v16 installed.

nvm is recommended to manage NodeJS versions.

Once nvm is installed you can ensure you are running the correct Node version for this project by running nvm install, which will look at the .nvmrc file to install or switch to the currently supported NodeJS version.

Once you have the dependencies installed, run the following command in the root directory of this repo.

npm install

NPM workspaces will install the dependencies of all packages with this command and a postinstall script will link all of the packages in the monorepo.

Once npm install has completed its installation you can start any of the projects from the root directory, e.g.

• Docs - npm run docs
• Storybook - npm run storybook:dev
• Example Site - npm run example:dev

See the project's root package.json for all command options.

If you are using VS Code as an IDE, you should be prompted to install the recommended extensions for eslint and prettier.

These extensions will help format your code in the EDS coding styles.

Typescript isn't recognising other packages in VS Code

The VS Code Typescript integration only does a full scan of the repository when it is opened. This can cause Typescript to report a type error for package imports after you switch git branches and run npm install.

To fix:

1. Ensure you have a .ts or .tsx file open
2. Open the command palette: cmd + shift + p
3. Search and run: Typescript: Restart TS server

If you find yourself doing this action a lot, VS Code has an extension to add this button to the status bar: TS server Status Bar button.