Hyve Ondash Component Library

Version Control

As a standard Hyve extends Vincent Driessen's GitFlow, with additions. GitFlow and Hyve's additions are explained briefly below:

Smart Commits

If your commit relates to a particular JIRA task, then add the task ID into the commit for tracking purposes. eg:

$ git commit -m "[SRM-98]: This is my commit message"

Group Tokens

Use pre-defined "grouping" tokens in front of your branch names. eg:

feature/api-authentication
hotfix/user-control-dropdown
release/rc-4.2
suggestion/model-user

Branch Naming

Feature Branch

eg: feature/branch-name

Contains a large, fully spec'd, addition to the codebase. Always merge through a Pull Request.

Suggestion Branch

eg: suggestion/branch-name

Useful when making suggestions as to a better/more efficient way to adapt the architecture of a particular piece of code in the application. Use the PR as a place to discuss the suggestion. Always merge through a Pull Request.

Hotfix Branch

eg: hotfix/branch-name

Used when making emergency changes to the codebase while ensuring that only the master branch will be effected. Important to rebase master into develop and your local feature or suggestion branches after a hotfix was deployed. Please remember to [version tag] a hotfix branch.

Develop Branch

Always: develop

contains the latest accepted but untested features or suggestions as spec'd by the team for a particular version.

Master Branch

Always: master

The latest tested, stable and deployable code. Only hotfixes are merged directly into master. Please remmeber to [version tag] the official release off the master branch.

Linting

We use ESLint to ensure our code is idiomatic and conforms with globally recognized standards based upon the airbnb standards.

Dependencies

Webpack & Babel

We use Webpack and Babel to bundle and compile our code. (In order for us to use modern Javascript syntax, we need to convert code into a backwards compatible version of JavaScript that can be executed in the browser.)

React & Emotion

We use React and Emotion (a CSS in JS library) for styling our components.

Scripts

• yarn storybook - launch the Storybook server
• npm run clean - removes the lib folder
• npm run build - transpile src code to lib folder
• npm version patch / npm version minor / npm version major - updated official release version (this will automatically update the package.json version

Publishing to NPM

When publishing to NPM we only want to publish our lib folder. Usually, Node will look for a main file within the
module folder called index.js, therefor it is necessary to override this behaviour. To specify an alternative path,
update package.json to contain a key named main that specifies the path to the main file.

Components List

• Accordion
• ActionMenu
• ActionsGroup
• Alert
• ArrowButton
• ArrowToggle
• Avatar
• Badge
• Board
• Breadcrumb
• Button
• Checkbox
• ColorPicker
• DisplayContent
• Dropdown
• Else
• Grid
• Form
• FormSection
• FormWrapperSubmit
• Header
• Hint
• HiddenContent
• IconAction
• ImagePicker
• Input
• Label
• Modal
• ModalActions
• ModalContent
• ListSearchInput
• MultiCrossSelect
• MultiCrossSelectRow
• MultiCrossSelectRowFlag
• MultiCrossSelectRowAccordion
• Navigation
• NavigationLink
• Notification
• NotificationsWrapper
• Panel
• RadioButton
• RangeToggle
• ResetButton
• Select
• SelectRow
• SearchInput
• SectionActions
• SpinnerLoader
• Status
• StatusAction
• SubTabs
• TabItem
• TextArea
• TextButton
• Tabs
• TextToggle
• Toggle
• ValidationError

#####Table Components

• Table
• TableStatic
• TableAction
• TableBody
• TableCell
• TableCellLink
• TableCellVertical
• TableHead
• TableHeadCell
• TableHeadCellSort
• TableMessage
• TablePagination
• TableRow
• TableBodyType
• TableHeadType
• TableSearchType
• SearchInputWithBulkActions

#####Helper Functions #####HOOKs

• useForm
• useModal

#####HOCs

• withForm
• withSort
• withSearch
• withPaginate

Utilities

• getTheme
• uniqueKey