Design: Components

Share uses React Cosmos for development of its React components.

Using React Cosmos, you will be able to view the component library and interact with them (through modifying available properties).

Cosmos runs as a separate page at /cosmos from the Share application and it does not interact with Share or any running development instances.

Launching React Cosmos

To launch cosmos within the project (after cloning the repository), run the following command to start the local webpack server and open a new browser tab:

yarn install
yarn serve-cosmos

If a new browser tab containing Cosmos does not automatically open for you, then instead navigate to http://0.0.0.0:8080.

Component Fixtures

Component fixtures are identified by their .fixture.jsx suffix and are automatically added to the Cosmos gallery (below). These correspond to e.g.:

src/Components/buttons/ControlButton.fixture.jsx
src/Components/Loader.fixture.jsx
src/Components/TooltipIconButton.fixture.jsx

Selecting one will then display it in the center panel.

How to code a Fixture

For example, here's src/Components/TooltipIconButton.fixture.jsx. All you do is import React, the component you want to display e.g. TooltipIconButton, and then export an instantiation of it. Here, it needs an Icon as an argument, so that's imported as well, which has the benefit of showing practical usage.

import React from 'react'
import {TooltipIconButton} from './Buttons'
import ShareIcon from '../assets/icons/Share.svg'


export default (
  <TooltipIconButton title={'Hello World'} icon={<ShareIcon/>} onClick={() => console.log('clicked')}/>
)

Theme support, Helmet, etc.

from src/Components/About/AboutDialog.fixture.jsx:

This example uses a hook, so the top-level export is a function component. The name here, Example, doesn't seem to matter.

import React from 'react'
import {HelmetProvider} from 'react-helmet-async'
import {ThemeProvider} from '@mui/material/styles'
import useShareTheme from '../../theme/Theme'
import {AboutDialog} from './AboutControl'


/** @return {React.Component} */
export default function Example() {
  return (
    <HelmetProvider>
      <ThemeProvider theme={useShareTheme()}>
        <AboutDialog
          isDialogDisplayed={true}
          // eslint-disable-next-line no-empty-function
          setIsDialogDisplayed={() => {}}
        />
      </ThemeProvider>
    </HelmetProvider>
  )
}