Awesome Open Source
Awesome Open Source

Medly Components

Lint, Build, Test react version styled-components version typescript version Commitizen friendly GitHub lerna

Medly Components

Themable React components with various configurations to match your needs.

Documentation

You can checkout the storybook of the components here.

Table of Contents

Getting Started

npx create-react-app medly-components-demo --template typescript
cd medly-components-demo
yarn add styled-components @types/styled-components
yarn add @medly-components/theme @medly-components/utils @medly-components/icons @medly-components/core @medly-components/layout @medly-components/loaders @medly-components/forms

Replace the content of index.tsx with the following:

import { defaultTheme } from '@medly-components/theme';
import { CssBaseline } from '@medly-components/core';
import { ThemeProvider } from 'styled-components';
import React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
 <ThemeProvider theme={defaultTheme}>
  <CssBaseline />
  <App />
 </ThemeProvider>,
 document.getElementById('root')
);

Replace the content in App.tsx with the following:

import React from 'react';
import { Button } from '@medly-components/core';

const App: React.FC = () => <Button variant="solid">Click me!</Button>;

export default App;

If you are using a static property of any component like Modal.Header, you must add "strictNullChecks": false in your tsconfig.json file.

Packages

Library consists of the following five packages:

Core

The Core package consists of almost all basic React components like Avatar, Button, Input, List, Modal, etc.

Icons

The Icons package consists of the most commonly used SVG icons exposed as React components.

Loaders

A few simple SVG loaders exposed as React components.

Layout

The Layout package consists of components that help in creating a page layout using side panels and nav items, which are exposed as React components.

Forms

The Forms package lets you create dynamic forms using simple json.

Theme

Define the theme i.e. the overall look, feel, and style of your website using the Theme package. Each component can be defined individually. For example, all icons of a website can be made solid, the color of all the components can be made orange, etc.

Utils

The Utils package consists of the most commonly used functionalities and components. E.g. String Helper has functions to convert a string to camelCase, case insensitive string comparison etc.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting us the pull requests.

Contributors

This project exists thanks to all the people who contribute.

Built With

🔥 react

💅 styled-components

⛑ typescript

📚 storybook

💥 babel

🐐 react-testing-library

npm scripts

  • yarn build to build components
  • yarn commit to commit with conventional-commit approach
  • yarn lint:css to run the css lint
  • yarn lint:ts to run the ts lint
  • yarn lint to run both css & ts lint
  • yarn test to run tests and type check
  • yarn test:update to update snapshots
  • yarn test:watch to watch tests
  • yarn type-check to run tsc to check types
  • yarn test:jest to run test only
  • yarn storybook to run storybook for live reloading your components
  • yarn release to publish the latest version to npm

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (265,056) 
Reactjs (75,997) 
Hacktoberfest (38,005) 
Hacktoberfest2021 (4,883) 
Styled Components (3,767) 
Jest (3,700) 
Babel (3,263) 
Storybook (1,228) 
Lerna (396) 
React Testing Library (229) 
Related Projects
Advertising 📦 9
All Projects
Application Programming Interfaces 📦 120
Applications 📦 181
Artificial Intelligence 📦 72
Blockchain 📦 70
Build Tools 📦 111
Cloud Computing 📦 79
Code Quality 📦 28
Collaboration 📦 30
Command Line Interface 📦 48
Community 📦 81
Companies 📦 60
Compilers 📦 60
Computer Science 📦 74
Configuration Management 📦 39
Content Management 📦 167
Control Flow 📦 197
Data Formats 📦 77
Data Processing 📦 266
Data Storage 📦 132
Economics 📦 60
Frameworks 📦 198
Games 📦 122
Graphics 📦 103
Hardware 📦 148
Integrated Development Environments 📦 47
Learning Resources 📦 147
Legal 📦 28
Libraries 📦 119
Lists Of Projects 📦 21
Machine Learning 📦 336
Mapping 📦 61
Marketing 📦 15
Mathematics 📦 55
Media 📦 228
Messaging 📦 97
Networking 📦 304
Operating Systems 📦 84
Operations 📦 120
Package Managers 📦 52
Programming Languages 📦 229
Runtime Environments 📦 96
Science 📦 42
Security 📦 375
Social Media 📦 26
Software Architecture 📦 70
Software Development 📦 68
Software Performance 📦 57
Software Quality 📦 127
Text Editors 📦 45
Text Processing 📦 131
User Interface 📦 310
User Interface Components 📦 465
Version Control 📦 29
Virtualization 📦 68
Web Browsers 📦 38
Web Servers 📦 25
Web User Interface 📦 194