Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc. You can checkout the storybook of the components here.

• 🚀Getting Started
• 📦Packages
  • 🛠Core
  • ℹIcons
  • ⧉Layout
  • 🏞Theme
  • 🛠Utils
• 📜Built With
• 📝Npm Scripts

npx create-react-app medly-components-demo --typescript
cd medly-components-demo
npm i styled-components @types/react @types/react-dom @types/styled-components
npm i @medly-components/theme @medly-components/utils @medly-components/icons @medly-components/core @medly-components/layout @medly-components/loaders

Replace content of index.tsx with the following:

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

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

Replace content in App.tsx with the following:

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

const App: React.SFC = () => (
    <Button variant="flat" color="primary">
        Click me!
    </Button>
);

export default App;

Library consists of five packages:

Core package consits of components almost all basic react components like Avatar, Button, Input, List, Modal etc.

Icons package consists of most commonly used svg icons for add, delete, clearfile, clipboard etc exposed as react components.

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

Themes lets you define how a component should be styled across website. This can be done individually for particular type of components, eg all icons should be solid or can be done for the whole website, like color theme for all type of components across website should be orange.

Utils package consists of most commonly used functionalities or components. Eg String Helper has functions to convert a string to camelCase, case insensitive string comparison etc

🔥 react

💅 styled-components

⛑ typescript

📚 storybook

💥 babel

🐐 react-testing-library

• 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 upgrate 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 version your components