AutoMedsys UI/UX Reusable Modules Library [JAVASCRIPT]

This is the codebase for the AutoMedsys UI/UX reusable modules library.

There is another codebase that consist of the component library: UI Components

Module are Pages.
Components and HTML-LIKE elements.

Goal

The goal of this project is to enable frontend developers easily bootstap components/pages and ship products to markets faster.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Main Folders

These are the main folders you should look out for

• src - Main Library
• playground - Storybook Documentation
• src/modules - The Modules Folder
• src/assets - The assets folder
• src/components - The components folder

Local Setup

A step by step series of examples that tell you how to get a development environment running Clone the repo from github and install dependencies through npm or yarn.

git clone https://[email protected]/auxuigroup/automedsys-reusable-ui-modules.git
cd automedsys-reusable-ui-components
npm config set registry http://registry.npmjs.org/

From the root directory:

This would install dependencies and start building the typescript codes using Rollup

yarn install
yarn dev => Runs the build and watch for changes and also starts the playground server, please note that you need to install all playground dependencies first.

From the playground directory:

Create a .env file and add the following variables:

SKIP_PREFLIGHT_CHECK=true

The playground is where you get to see the modules in action. This would install dependencies for the playground and run the playground on default port 3000

npm install
npm start => Only run this if you <yarn dev> was not run before and the project has been built from the root folder using <yarn build>.

Running storybook

This would run the storybook server on port 6006 Storybook is a tool that helps you to create stories for your components. Please note that storybook should only be used for components and not for pages.

yarn storybook

Publishing Changes

A step by step guide on how to deploy and publish your changes to our private registry.

Download and install Bitwise Client

- commit your changes and push to the remote repository, before you commit and push your code please update package.json with the correct version number depending on the type of change that was made (major, minor, patch) checkout semantic versioning for more information.
- connect to your vpn
- open bitwise client and login via ssh to the private registry server (contact your boss for the credentials)
- open terminal from bitwise client after login
- cd automedsys-reusable-ui-modules
- pull the latest changes from the remote repository
- yarn install
- delete the dist folder - sudo rm -rf dist
- yarn build - build the project
- yarn publish - publish the project to the private registry

Branches

• master - Main Branch
• develop - Development branch

Contributing

1. Follow the local setup instructions above.
2. Initialize git flow with git flow init
3. Create your feature branch (git flow feature start feature/new_branch)
4. Commit your changes (git commit -m 'Add some new features')
5. Push to the remote branch (git push origin feature/new_branch)
6. Create a new Pull Request

Usage

This would install the Component Library from our custom configured registry.

connect to your vpn and run
npm install automedsys-reusable-ui-modules --registry 10.10.20.65:4873

Built With

• React - The front-end library used.
• TailWind CSS - The CSS library used.
• Material UI - The UI AdHoc library used.
• Rollup - For packaging the Typescript Library -Storybook - For the documentation
• create-react-app - The command line utility tool for setting up React project.

Developers

• UI/UX Team ([email protected])

Additional resources

• Proptypes
• classnames - A simple JavaScript utility for conditionally joining classNames together. -Storybook -Rolllup For packaging the Typescript library
• Eslint
• Accessibility Guide
• Material UI
• Tailwind CSS
• Husky- Precommit hook