craftos-ui v0.1.77

CraftOS UI contains the React Components we share between the different Craft Projects.

Installation

CraftOS UI is available as a private npm package.

Before you can install you need to finish the authentication in the Usage step.

npm:

npm install @craftos/ui

yarn:

yarn add @craftos/ui

Usage

To use CraftOS UI you need to authenticate yourself. This is because we are using Azure DevOps private feed.

Here is the guide to authenticate using a .npmrc file. https://learn.microsoft.com/en-us/azure/devops/artifacts/npm/npmrc#tabpanel_1_linux

1. Copy snippit into your personal .npmrc file. If you don't have one just create it in your user folder.
2. Generate a new token in Azure DevOps
3. Convert token to Base64
4. Replace placeholder [BASE64_ENCODED_PERSONAL_ACCESS_TOKEN] with your token.

; begin auth token
//pkgs.dev.azure.com/enpal/craftOS/_packaging/craftOS-UI/npm/registry/:username=[ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
//pkgs.dev.azure.com/enpal/craftOS/_packaging/craftOS-UI/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/enpal/craftOS/_packaging/craftOS-UI/npm/registry/:email=[NPM REQUIRES AN EMAIL]
//pkgs.dev.azure.com/enpal/craftOS/_packaging/craftOS-UI/npm/:username=[ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
//pkgs.dev.azure.com/enpal/craftOS/_packaging/craftOS-UI/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/enpal/craftOS/_packaging/craftOS-UI/npm/:email=[NPM REQUIRES AN EMAIL]
; end auth token

5. Add this snippit to the project .npmrc file

registry=https://pkgs.dev.azure.com/enpal/craftOS/_packaging/craftOS-UI/npm/registry/ 
always-auth=true

6. You should now be able to install CraftOS UI.

Authenticate in the pipeline

All you need to do is add this in your pipeline:

- task: npmAuthenticate@0
  displayName: 'Auhenticate NPM'
  inputs:
    workingFile: .npmrc  

Publish new version

1. Build project:

yarn build

2. Bump the version in package.json

3. Publish to npm:

npm publish

Components

AppLayout

Component that wraps the whole page, this includes the NavBar. Use this as your page wrapper.

Example

<AppLayout>
	<PageContent />
</AppLayout>

API

Header

The navbar component used in all CraftOS applications.

Example

<Header />

API

BoxWrapper

Wrapper component for box elements. Adds for example padding and shadow around your items.

Example

<BoxWrapper>
  <h1>This is a box</h1>
  <ul>
  	<li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</BoxWrapper>

API