Astrosat UI Library

A module containing a number of useful mapbox-gl-js controls and mapbox-gl-draw modes.

Table of Contents

• Astrosat UI Library
  • Table of Contents
  • Build Distribution
  • Examples
  • Usage
  • Development
    • Link Library
  • Release Strategy
  • Icons

Build Distribution

1. Run: yarn install to install dependencies.
2. Run: yarn build to generate the distribution.

Examples

1. Run: yarn install to install dependencies.
2. Run: yarn build to generate the distribution.
3. Run: yarn serve to start the web server.
4. Go to Examples

Each example will open in their own tab.

Usage

The recommended route is to import files individually:

import Button from '@astrosat/astrosat-ui/dist/buttons/button';

as this will provide smaller bundles.

Note: The PasswordStrengthMeter component is only available through the second method. We recommend that you lazy load it, as it will take about 0.5MB:

import React, { Suspense } from 'react';
import LoadMask from '@astrosat/astrosat-ui/dist/load-mask/load-mask';

const PasswordStrengthMeter = React.lazy(() =>
  import('@astrosat/astrosat-ui/dist/forms/password-strength-meter')
);

const MyComponent = () => (
  <Suspense fallback={<LoadMask />}>
    <PasswordStrengthMeter password={'p@55w0rd'} />
  </Suspense>
);

export default MyComponent;

Development

To maintain or further develop this library we have included Storybook. This is a tool to let you view you components in isolation, while developing them. To start the Storybook development server, run yarn storybook.

There will come a time when you want to link your library to an application. Normally you would use something like yarn link in the library and yarn link "<library name>" in your application. We have experienced problems doing this however, the error reported complains about using hooks but that is a misnomer, the real problem is there are multiple copies of react being used, see react warning for more details. The only solution comes from that page:

This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.

This solution cannot be done with yarn you must use npm as far as I can tell, this doesn't cause any problems in practice from what I've found. the solution is to make your library use your applications version of react, not its own. while having your app use your un-published library code as normal using yarn link.

Link Library

1. In library and application remove the yarn.lock and node_modules directory. This will ensure your using the latest and greatest dependencies.
2. In library and application run yarn to install necessary dependencies.
3. In library, run npm link <path to application's react in node_modules> e.g. npm link ../../orbis/client/node_modules/react, to link to your application's version of react.
4. In library, run yarn link, this will link your library to a central location (normally under ~/.config/yarn/...).
5. In application, run yarn link "<library name>" e.g. yarn link "@astrosat/astrosat-ui"

Now you should be able to run Storybook in you library and the application (without crashing, complaining about hooks or some other misnomer error message).

Release Strategy

semantic-release has been configured via plugins to do the following:

• Analyze Angular style commit messages
• Generate CHANGELOG.md entry
• Increment version in package.json
• Commit changes
• Create tag of the form v1.1.1
• Create GitHub release
• Do NOT publish to npm registry

Icons

The icon components in this library are built automatically from the svg including optimising the svg using SVGO.

The icons are built when yarn build is run or you can run an icon build using yarn build:icons.

To add a new icon, first please ensure the icon has a viewbox of 30px x 30px then drop the svg into src/icons/assets and run build.