@agm-as/components

agm services components

Usage no npm install needed!

<script type="module">
  import agmAsComponents from 'https://cdn.skypack.dev/@agm-as/components';
</script>

README

@agm-as/components

Provides reusable components for services.

npm install @agm-as/components

Credentials

To get test builds up and running you'll need to encrypt a npm token from .npmrc.

# Google Cloud Build
## /.npmrc
gcloud kms encrypt --plaintext-file=./.npmrc --ciphertext-file=./.npmrc-gcb.enc --location=global --keyring=agm --key=agm-services-components

Publishing

Update the version in package.json according to the best practices of semantic versioning, and commit (the version change) as :bookmark: Update components version, then run npm publish to realise the changes.

Setup

Detailed per project setup requirements.

env

For everything to work, these environment variables must be set:

  • ASSET_PREFIX: Current project asset prefix
  • BUY_ADMIN_FRONTEND_ASSET_PREFIX: buy/admin/frontend asset prefix
  • ORGS_FRONTEND_ASSET_PREFIX: orgs/frontend asset prefix

Next.js

Provided components needs to be transpiled in order to work. Both @zeit/next-css and next-transpile-modules are required. See example next.config.js:

const withCss = require('@zeit/next-css');
const withTm = require('next-transpile-modules')

const config = {
    cssModules: true,
    cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: '[local]-[hash:base64:5]'
    },

    transpileModules: ['@agm-as/components'],

    // ...
};

module.exports = withTm(withCss(config));

Babel

@agm-as/components sometimes provide inline SVGs. In order to handle them properly we need the babel plugin inline-react-svg. See example babel.config.js:

module.exports = {
    presets: ['next/babel'],
    plugins: ['inline-react-svg']
};

PostCSS

The PostCSS plugin postcss-modules-values-replace is required in order for styles to transpile properly. Example postcss.config.js:

module.exports = {
    plugins: [
        require('postcss-modules-values-replace')({}),
        require('postcss-preset-env')({stage: 0}),
        require('cssnano')({zindex: false})
    ]
};