This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@acromedia/gesso

Acro Media Gesso Design System

Hosted environments

• Production: https://gesso.acromedia.com
• Staging: https://gesso.acrobuild.com

Setup

FontAwesome Pro support for pulling pro npm packages

First you need to add / install FontAwesome's 'Pro' series of fonts from their npm repo.

• copy example.npmrc to .npmrc
  • replace the FontAwesome token placeholder with the token from 1pass.

Install packages

Then follow these steps to set up the project.

• yarn install

Run Storybook

View the components by running Storybook.

• yarn storybook

This will run Storybook on http://localhost:5000/

---

Local development and testing with a project

Using yarn link we can link the local Gesso Design System package and use it in projects. like React app/ or NextJS Though you need to also link react and react-dom from Gesso DS or you may get a duplicate React issue in your app.

Steps: (from Gesso Design System)

• yarn link (from project root)
• cd ./node_modules/react
• yarn link Creates a link of Gesso's react lib
• cd ./node_modules/react-dom
• yarn link Creates a link of Gesso's react-dom lib

From your React/nextJS project

• yarn link @acromedia/gesso
• yarn link react
• yarn link react-dom

Now your React / NextJS app is using your local copy of Gesso DS.

You'll have to run yarn build after changing something in Gesso DS.

---

Available scripts

In the project directory, you can run:

yarn storybook

Runs the Storybook in the development mode.
Open http://localhost:5000 to view it in the browser.

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

yarn figmagic

This will pull the tokens from the Figma file. You need to make sure you've setup you .env file, see example.env to start. You also need permissions to the Figma file. These values are committed to git, so unless you need to pull an update you don't need to worry about this.

yarn test

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

yarn test-snapshots

Updates the snapshots for any tests utilizing them. Make sure to inspect the snapshots after updating them to verify the snapshot reflects the intended changes.

yarn start

You only want to use the app to test components like they would be used in an app, 99% of the time you want yarn storybook

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

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

---

Testing

When making changes you should consider 4 different parts:

Linting

yarn lint

Automated tests

yarn test

Visually check storybook

yarn storybook

Then browser the components you changed and confirm everything looks right, automated tests are imperfect at determining visual bugs

Build and test the library on a project

Right now the only project using this library is the corp site frontend project

yarn build
cp src/ ../someprojectthatusesthis/node_modules/@acromedia/core/ -r

Then run tests and manually check that everything works correctly on the project using the library.

Note you will need to restart any server you have running such as yarn dev for it to pick up the new changes.

This is imperfect and will not test the package.json install process, but you can test the actual functionality.

---

Package release - Commit message rules

Version: 0.0.0 = Major.Minor.Patch

• Major changes: Changes that break backward compatibility
• Minor changes: Backward compatible new features
• Patch changes: Backward compatible bug fixes

our commits MUST follow the Conventional Commits style.

git commit -m "feat: add someFunctionName function"

Minor + patch versions

Two of these commit types are significant for semantic versioning.

• feat: will be used to trigger a Minor release.

  git commit -m "feat: add someFunctionName function"

• fix: will be used to trigger a Patch release.

  git commit -m "fix: add fix for someFunctionName"

Major versions

In order to communicate a Major release, we can add the following line to our commit history:

• BREAKING CHANGE: will be used to trigger a Major release

  git commit -m "BREAKING CHANGE: add some breaking change message"

Husky commit lints enforce that these rules are followed.

Skip release

Skipping a release is good when you're changes do not directly effect the package. IE: changes to readme, project config, etc.

commits that contains [skip release] or [release skip] in their message will be excluded from the commit analysis.

git commit -m "refactor: [skip release] changes to readme"

---

Naming convention and folder structure

New components should be placed within src/components or src/helpers, depending on what they are. When adding a new component, follow this naming convention.

ComponentName (directory)
  - index.js
  - ComponentName.jsx
  - ComponentName.css.js
  - ComponentName.test.js
  - ComponentName.spec.jsx
  - ComponentName.stories.jsx
  - assets (directory)
    - AssetDescriptorA.jpg
    - AssetDescriptorB.jpg
  - mocks (directory)
    - SampleData.mock.js
    - ProductA.mock.js
    - ProductB.mock.js

---

Extras

Pulling a npm package

Update / create .npmrc.

• Add the following (note this should match the npmrc file created for publishing):

  @fortawesome:registry=https://npm.fontawesome.com/
  //npm.fontawesome.com/:_authToken=<Get token from 1pass labelled as Font Awesome>