@megalink/design-system

Megalink Design System

The Megalink Design System powers our frontend apps. It contains reusable UI components that help us build complex, durable, and accessible user interfaces across our projects.

Install

The code is delivered as an NPM package:

npm install @megalink/design-system

Use

Add an alias for the package path to the compilerOptions of your tsconfig.json to make the imports shorter and clearer:

"baseUrl": ".",
"paths": {
  "@mds/*": ["node_modules/@megalink/design-system/dist/*"]
}

As long as creat-react-app does not support the paths property in tsconfig.json, the following workaround must be used: https://github.com/oklas/react-app-rewire-alias

You can then import icons or components:

import { HouseSVG } from '@mds/icons';
import { IconButton } from '@mds/components/core';

Dependencies

The following peer dependencies are required:

"react": ">= 16.13.0",
"react-dom": ">= 16.13.0",
"react-router-dom": ">= 5.1.0",
"styled-components": ">= 5.0.0",
"typescript": ">= 3.8.0"

Credits

We use the following tool and are very grateful for the free use.

• React - a JavaScript library for building user interfaces, License: MIT License
• React Router - Declarative routing for React, License: MIT License
• Styled Components - visual primitives for the component age, License: MIT License
• TypeScript - JavaScript that scales, License: Apache License 2.0
• Storybook - build bulletproof UI components faster, License: MIT License
• Prettier - an opinionated code formatter, License: MIT License
• ESLint - find and fix problems in your JavaScript code, License: MIT License
• OpenMoji – the open-source emoji and icon project, License: CC BY-SA 4.0
• Free Outline Icon Pack by Aspen Grove Studios, License: CC BY-SA 4.0
• Poppins by Indian Type Foundry, License: Open Font License

Please let us know if we have forgotten anything!

License

At this time the Megalink Design System may not be used by third parties. Nevertheless the source code is public and can be used for inspiration. Please contact us if you are interested in using the design system for your own purposes.

The included icons and emojis from Aspen Grove Studios and OpenMoji are available under their original license CC BY-SA 4.0.

Changelog

[v0.2.0] - 2020-05-01

🌱 Added

• Add new core components
  • IconButton (actions)
  • Dialog (feedback)
  • Response (feedback)
  • Logo (graphics)
  • Checkbox (inputs)
  • Form (inputs)
  • Page (layout)
  • Content (layout)
  • Main (layout)
  • Section (layout)
  • Visibility (layout)
  • FileGallery (media)
  • FileDetails (media)
  • Link (navigation)
  • NavBar (navigation)
  • AppBar (navigation)
  • SideBar (navigation)
  • TabBar (navigation)
  • Bureaucracy (navigation)
  • Title (typography)
  • Heading (typography)
  • Subheading (typography)
  • Paragraph (typography)
  • Detail (typography)
• Add new helper
  • getRandomId
• Add new icons
  • add
  • alarm
  • arrow down
  • arrow right
  • check
  • delete
  • download
  • folder
  • gear
  • house
  • list
  • night
  • sun
  • warning
• Add new openmojis
  • face with monocle
  • fire
  • flag germany
  • globe showing americas
  • hugging face
  • link
  • money with wings
  • nerd face
  • shopping cart
  • smiling face with sunglasses
  • sparkles
  • stopwatch
  • woman dancing

👷 Changed

• Change previous basic components
  • Move from "basic" to the new "core" folder
  • Add navigation functionality to ActionButton and update CSS code
  • Improve accessibility of TextInput with ARIA

🛠️ Fixed

• Fix, update and refactor useForm hook