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
- π¦ Packages
- π Built With
- π¨βπ» Contributing
- π Npm Scripts
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.
Built With
π₯ react
β typescript
π storybook
π₯ babel
npm scripts
yarn build
to build componentsyarn commit
to commit with conventional-commit approachyarn lint:css
to run the css lintyarn lint:ts
to run the ts lintyarn lint
to run both css & ts lintyarn test
to run tests and type checkyarn test:update
to update snapshotsyarn test:watch
to watch testsyarn type-check
to run tsc to check typesyarn test:jest
to run test onlyyarn storybook
to run storybook for live reloading your componentsyarn release
to publish the latest version to npm