Repository files navigation

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

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

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

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 toExamples

Each example will open in their own tab.

The recommended route is to import files individually:

importButtonfrom'@astrosat/astrosat-ui/dist/buttons/button';

as this will provide smaller bundles.

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

importReact,{Suspense}from'react';importLoadMaskfrom'@astrosat/astrosat-ui/dist/load-mask/load-mask';constPasswordStrengthMeter=React.lazy(()=>import('@astrosat/astrosat-ui/dist/forms/password-strength-meter'));constMyComponent=()=>(<Suspensefallback={<LoadMask/>}><PasswordStrengthMeterpassword={'p@55w0rd'}/></Suspense>);exportdefaultMyComponent;

To maintain or further develop this library we have includedStorybook. This is a tool to let you view you components in isolation, while developing them. To start theStorybook development server, runyarn storybook.

There will come a time when you want tolink your library to an application. Normally you would use something likeyarn link in the library andyarn link "<library name>" in your application. We have experienced problems doing this however, the error reported complains about usinghooks but that is a misnomer, the real problem is there are multiple copies of react being used, seereact 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 withyarn you must usenpm 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 ofreact, not its own. while having your app use your un-published library code as normal usingyarn link.

1. Inlibrary andapplication remove theyarn.lock andnode_modules directory. This will ensure your using the latest and greatest dependencies.
2. Inlibrary andapplication runyarn to install necessary dependencies.
3. Inlibrary, runnpm 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 ofreact.
4. Inlibrary, runyarn link, this will link your library to a central location (normally under~/.config/yarn/...).
5. Inapplication, runyarn link "<library name>" e.g.yarn link "@astrosat/astrosat-ui"

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

semantic-release has been configured viaplugins to do the following:

• AnalyzeAngular style commit messages
• GenerateCHANGELOG.md entry
• Increment version inpackage.json
• Commit changes
• Create tag of the form v1.1.1
• Create GitHub release
• Do NOT publish to npm registry

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

The icons are built whenyarn build is run or you can run an icon build usingyarn build:icons.

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