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
- Build this app:
yarn build
- Create a new test app:
npx create-react-app test-app --template typescript
- Add the package.json dependency to test app:
"@agrovista/design-system": "file:../design-system",
- 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>
</>
);
}