Moonstone

Jahia Design System

Moonstone is our library of styles re-usable React components

• Storybook

Install

yarn add @jahia/moonstone

Import global styles into your project

Use the component GlobalStyle add the root of your app to load CSS globals and resets.

Use the design System

import React from 'react'
import logo from './logo.svg'
import './App.css'
import {GlobalStyle, Typography} from 'moonstone'

function App() {
    return (
        <>
            <GlobalStyle/>
            <div className='App'>
                <header className='App-header'>
                    <img src={logo} className='App-logo' alt='logo' />
                    <Typography>
                        Edit <code>src/App.js</code> and save to reload.
                    </Typography>
                    <a
                        className='App-link'
                        href='https://reactjs.org'
                        target='_blank'
                        rel='noopener noreferrer'
                    >
                        Learn React
                    </a>
                </header>
            </div>
        </>
    )
}

export default App

Test changes with Jahia using yalc

First, build moonstone:

yarn build

Then, publish locally:

yalc publish

Next, add the local package to app-shell:

yalc add @jahia/moonstone

Install any additional dependencies that may now be required:

yarn

Now, you can deploy app-shell via docker or to the local installation as you usually do.

Author

👤 Jahia

• Github: @Jahia

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator