Skip to content

๐Ÿš€Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

License

Notifications You must be signed in to change notification settings

phoenixTW/medly-components

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Medly Components

Medly Components

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

Themable React components with various configurations to match your needs.

Documentation

To view a detailed description of the components in storybook click 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 index.tsx content 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 App.tsx content 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

The component library consists of the following packages:

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

The Form package lets you create dynamic forms using simple JSON.

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

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.

The Loaders package consists of a few simple SVG loaders exposed as React components.

The Markdown package consists of a basic syntx guide which helps you format your content.

The Theme package defines the overall look, feel, and style of your website. 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.

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

Please find below a list of commands to execute various tasks:

  • 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

About

๐Ÿš€Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 66.2%
  • MDX 33.6%
  • Other 0.2%