@eriksdigital/atomic-ui v17.1.22

ERIKS Digital - Atomic UI

This is a UI kit containing components for ERIKS Digital projects.

Install

npm install @eriksdigital/atomic-ui --save

Usage

@eriksdigital/atomic-ui exports each component:

import { Button } from '@eriksdigital/atomic-ui';

render(
  <Button
    id="primary"
    text="Primary button"
  />
);

React Hooks

All new refactored components will take the name of the overriden one. Don't delete refactored component just rename it by appending Legacy. Add put both refactored and legacy components in main.js file to export both.Please follow the example of already refactored Collapse component.

// new refactored component using react hooks 
import { Collapse } from '@eriksdigital/atomic-ui'; 

// old component is legacy now but still you're able to import it
import { CollapseLegacy } from '@eriksdigital/atomic-ui'; 

Atomic-UI is exporting React hooks functions also. If you want to create new one then please put it utils/hooks folder and export it inside of index.js file in the same folder. You must name your hooks like: useElementHeight, useValidation etc. This allows the ESLint plugin to automatically check for violations of the rules of hooks.

To import the hook function itself in your project do:

import { hooks } from '@eriksdigital/atomic-ui';

const MyComponent = props => {
  const el = React.createRef();
  
  // Example of using a hook
  const height = hooks.useElementHeight(el.current);
  
  return <div ref={el}>{height}</div>;
}

Global styles

You can import global styles this way:

import { colors, fonts, breakpoints } from '@eriksdigital/atomic-ui';

Development

Clone the repo and install the packages:

git clone https://github.com/zarmrocom/atomic-ui.git
cd atomic-ui
npm install

Then build and watch @eriksdigital/atomic-ui with the documentation server:

npm run storybook

Visit http://localhost:9001/ and click on a component to view the docs.

Dependencies

• This library depends on the Geomanist font family. The library exports fontFace to setup fonts with styled-components. Include fontFace in your project's styles setup to make the fonts work properly.

Publish

Every feature will be squashed to master which will trigger a new release (Trunk flow).

The versions will work as follows:

• Fix of existing code -> no need to do anything, version will be bumped
• Added functionality new component: increment minor and reset patch version in package.json
• Breaking change: increment major version and reset minor and patch version in package.json (and notify users)

When merging a PR make the title and body of the commit message descriptive, so we can use that as changelog instead of maintaining a CHANGELOG.md file.

Publish on NPM

1) Ask Devops to add your npm account to @eriksdigital/atomic-ui npm package as a collaborator 2) Pull latest atomic-ui master branch 3) Check package.json for proper version (version needs to be reduced by 1) 4) npm run build 5) npm login and provide your credentials 6) npm publish