@agrovista/design-system

Yarn Scripts

yarn install

Install dependencies, etc.

yarn storybook

Runs the storybook app in its own port.

@todo port from env.

Useful while developing components to produce visual documentated examples.

The page will reload if you make edits. You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

yarn build

Compiles CommonJS and ESM builds to a /dist folder for pipeline to publish to NPM.

Test in local project without publishing

1. Build this app: yarn build
2. Create a new test app: npx create-react-app test-app --template typescript
3. Add the package.json dependency to test app: "@agrovista/design-system": "file:../design-system",
4. Yarn install and use the package like any other: import { Alert } from '@agrovista/design-system';

Initialise CSS libraries using helpers

In order to remove duplication of CSS imports, these files should only be imported/instantiated once per application. e.g. in App.ts (typescript) OR App.js (javascript):

import {
  BootDesignSystem,
  RegularIcons,
  SolidIcons,
  BrandIcons,
  FontAwesomeIcon,
} from '@agrovista/design-system';

const { faMicrosoft } = BrandIcons;
const { faChevronUp } = SolidIcons;
const { far } = RegularIcons;

new BootDesignSystem()
  .fontawesome([
    faChevronUp, // Import single component from SolidIcons
    faMicrosoft, // Import single component from BrandIcons
    far, // Import all components from RegularIcons
  ])
  .moment();

export default function App() {
  return (
    <>
      <div>
        <FontAwesomeIcon icon={faChevronUp} /> Test
      </div>
      <div>
        <FontAwesomeIcon icon={faMicrosoft} /> Test 2
      </div>
    </>
  );
}