🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

Overview

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:

Click me!; export default App; ">
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

πŸ’… 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
Issues
  • Accordion

    Accordion

    PR Checklist

    Please check if your PR fulfills the following requirements:

    • [x] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)

    PR Type

    What kind of change does this PR introduce?

    • [ ] Bugfix
    • [x] Feature
    • [ ] Code style update (formatting, local variables)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] CI related changes
    • [ ] Documentation content changes
    • [ ] Application / infrastructure changes
    • [ ] Other... Please describe:

    What is the current behavior?

    Issue Number: N/A

    What is the new behavior?

    Does this PR introduce a breaking change?

    • [ ] Yes
    • [ ] No

    Other information

    released 
    opened by saylikadam 8
  • feat(core): add accordion component

    feat(core): add accordion component

    affects: @medly-components/core, @medly-components/theme

    PR Checklist

    Please check if your PR fulfills the following requirements:

    • [x] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)

    PR Type

    What kind of change does this PR introduce?

    • [ ] Bugfix
    • [x] Feature
    • [ ] Code style update (formatting, local variables)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] CI related changes
    • [ ] Documentation content changes
    • [ ] Application / infrastructure changes
    • [ ] Other... Please describe:

    What is the current behavior?

    Issue Number: N/A

    What is the new behavior?

    Does this PR introduce a breaking change?

    • [ ] Yes
    • [x] No

    Other information

    released 
    opened by saylikadam 8
  • feat: add semantic release with releaserc.js

    feat: add semantic release with releaserc.js

    PR Checklist

    Please check if your PR fulfills the following requirements:

    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been added / updated (for bug fixes / features)

    PR Type

    What kind of change does this PR introduce?

    • [ ] Bugfix
    • [ ] Feature
    • [ ] Code style update (formatting, local variables)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [x] CI related changes
    • [ ] Documentation content changes
    • [ ] Application / infrastructure changes
    • [ ] Other... Please describe:

    What is the current behavior?

    We have to manually publish the packages.

    What is the new behavior?

    Packages will be published automatically on pull request merged to master.

    Does this PR introduce a breaking change?

    • [ ] Yes
    • [x] No
    released 
    opened by gmukul01 8
  • Toast style

    Toast style

    PR Checklist

    Please check if your PR fulfills the following requirements:

    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been added / updated (for bug fixes / features)

    PR Type

    What kind of change does this PR introduce?

    • [ ] Bugfix
    • [ ] Feature
    • [x] Code style update (formatting, local variables)
    • [x] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] CI related changes
    • [ ] Documentation content changes
    • [ ] Application / infrastructure changes
    • [ ] Other... Please describe:

    What is the current behavior?

    Issue Number: N/A

    What is the new behavior?

    Does this PR introduce a breaking change?

    • [ ] Yes
    • [x] No

    Other information

    released 
    opened by tyrion1920 8
  • Refactor accordion component

    Refactor accordion component

    affects: @medly-components/core, @medly-components/theme

    PR Checklist

    Please check if your PR fulfills the following requirements:

    • [x] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)

    PR Type

    What kind of change does this PR introduce?

    • [ ] Bugfix
    • [ ] Feature
    • [ ] Code style update (formatting, local variables)
    • [x] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] CI related changes
    • [ ] Documentation content changes
    • [ ] Application / infrastructure changes
    • [ ] Other... Please describe:

    What is the current behavior?

    Accordion.Title and Accordion.Content has their own style.

    Issue Number: N/A

    What is the new behavior?

    Accordion.Header and Accordion.Content are now just simple wrapper components. Hence th child components can handle the style part.

    Does this PR introduce a breaking change?

    • [x] Yes
    • [ ] No

    Accordion.Title to Accordion.Header.

    released 
    opened by gmukul01 8
  • [WIP] updating style of modal component to match pattern library

    [WIP] updating style of modal component to match pattern library

    affects: @medly-components/core

    PR Checklist

    Please check if your PR fulfills the following requirements:

    • [x] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)

    PR Type

    What kind of change does this PR introduce?

    • [ ] Bugfix
    • [x] Feature
    • [ ] Code style update (formatting, local variables)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] CI related changes
    • [ ] Documentation content changes
    • [ ] Application / infrastructure changes
    • [ ] Other... Please describe:

    What is the current behavior?

    Issue Number: N/A

    What is the new behavior?

    Does this PR introduce a breaking change?

    • [ ] Yes
    • [* ] No

    Other information

    released 
    opened by rcleozier2 8
  • feat(core): add no result row to cards table

    feat(core): add no result row to cards table

    affects: @medly-components/core

    PR Checklist

    Please check if your PR fulfills the following requirements:

    • [x] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)

    PR Type

    What kind of change does this PR introduce?

    • [ ] Bugfix
    • [ ] Feature
    • [ ] Code style update (formatting, local variables)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] CI related changes
    • [ ] Documentation content changes
    • [ ] Application / infrastructure changes
    • [ ] Other... Please describe:

    What is the current behavior?

    Issue Number: N/A

    What is the new behavior?

    Does this PR introduce a breaking change?

    • [ ] Yes
    • [ ] No

    Other information

    released 
    opened by saylikadam 8
  • style: style changes for button component

    style: style changes for button component

    affects: @medly-components/core, @medly-components/theme

    PR Checklist

    Please check if your PR fulfills the following requirements:

    • [x] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)

    PR Type

    What kind of change does this PR introduce?

    • [ ] Bugfix
    • [x] Feature
    • [ ] Code style update (formatting, local variables)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] CI related changes
    • [ ] Documentation content changes
    • [ ] Application / infrastructure changes
    • [ ] Other... Please describe:

    What is the current behavior?

    Issue Number: N/A

    What is the new behavior?

    Does this PR introduce a breaking change?

    • [ ] Yes
    • [x] No

    Other information

    released 
    opened by tyrion1920 8
  • feat: add semantic release

    feat: add semantic release

    PR Checklist

    Please check if your PR fulfills the following requirements:

    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been added / updated (for bug fixes / features)

    PR Type

    What kind of change does this PR introduce?

    • [ ] Bugfix
    • [x] Feature
    • [ ] Code style update (formatting, local variables)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] CI related changes
    • [ ] Documentation content changes
    • [ ] Application / infrastructure changes
    • [ ] Other... Please describe:

    What is the current behavior?

    We have to manually publish the packages.

    Issue Number: N/A

    What is the new behavior?

    Packages will be published automatically on pull request merged to master.

    Does this PR introduce a breaking change?

    • [ ] Yes
    • [x] No
    released 
    opened by gmukul01 8
  • build(deps-dev): bump @storybook/addon-actions from 5.2.6 to 5.2.8

    build(deps-dev): bump @storybook/addon-actions from 5.2.6 to 5.2.8

    Bumps @storybook/addon-actions from 5.2.6 to 5.2.8.

    Release notes

    Sourced from @storybook/addon-actions's releases.

    v5.2.8

    Bug Fixes

    • UI: Fix layout of Preview container (#8628)
    • Core: Use stable package to ensure story sorting is stable (#8795)
    • Source-loader: Warn if applied to non-stories file (#8773)

    v5.2.7

    Bug Fixes

    • Addon-contexts: Fix 'cannot read property h of undefined' in preact (#9001)
    • Addon-viewports: Fix missing TypeScript types (#8848)
    • Addon-A11y: Show errors, reset config properly (#8779)
    • UI: Store layout state in sessionStorage (#8786)
    • UI: Fix MobileLayout component error on master (#8941)
    • Addon-analytics: Fix 'path is required in .pageview()' (#8468)
    Changelog

    Sourced from @storybook/addon-actions's changelog.

    5.2.8 (December 2, 2019)

    Bug Fixes

    • UI: Fix layout of Preview container (#8628)
    • Core: Use stable package to ensure story sorting is stable (#8795)
    • Source-loader: Warn if applied to non-stories file (#8773)

    5.3.0-beta.14 (December 2, 2019)

    Features

    • Addon-docs: Increase Props summary and func length (#8998)

    Bug Fixes

    • Addon-docs: Restore IE11 compat by transpiling acorn-jsx (#9021)
    • Source-loader: Handle template strings in CSF title (#8995)
    • CLI: Fix various storiesof-to-csf cases based on chromatic stories upgrade (#9013)

    5.2.7 (November 30, 2019)

    Bug Fixes

    • Addon-contexts: Fix 'cannot read property h of undefined' in preact (#9001)
    • Addon-viewports: Fix missing TypeScript types (#8848)
    • Addon-A11y: Show errors, reset config properly (#8779)
    • UI: Store layout state in sessionStorage (#8786)
    • UI: Fix MobileLayout component error on master (#8941)
    • Addon-analytics: Fix 'path is required in .pageview()' (#8468)

    5.3.0-beta.13 (November 30, 2019)

    Bug Fixes

    • Addon-contexts: Fix 'cannot read property h of undefined' in preact (#9001)

    Maintenance

    • CLI: Code cleanup (#9004)

    5.3.0-beta.12 (November 29, 2019)

    Features

    • Storyshots: Support a11y tests, generic tests (#8934)

    Maintenance

    • Dev: Add vscode launch.json for debugging (#8993)
    ... (truncated)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Note: This repo was added to Dependabot recently, so you'll receive a maximum of 5 PRs for your first few update runs. Once an update run creates fewer than 5 PRs we'll remove that limit.

    You can always request more updates by clicking Bump now in your Dependabot dashboard.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    dependencies released 
    opened by dependabot-preview[bot] 7
  • feat: add Box component

    feat: add Box component

    PR Checklist

    Please check if your PR fulfills the following requirements:

    • [x] Tests for the changes have been added (for bug fixes/features)
    • [x] Docs have been added/updated (for bug fixes/features)

    PR Type

    What kind of change does this PR introduce?

    • [ ] Bugfix
    • [x] Feature
    • [ ] Code style update (formatting, local variables)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] CI related changes
    • [ ] Performance improves
    • [ ] Adding missing tests
    • [ ] Documentation content changes
    • [ ] Other... Please describe:

    What is the current behavior?

    Fixes #463

    What is the new behavior?

    Add Box component.

    Does this PR introduce a breaking change?

    • [ ] Yes
    • [x] No

    Additional context

    Provide any additional context or screenshots about the feature PR.

    size/XXL 
    opened by PulkitBanta 1
  • feat: add a `Box` component

    feat: add a `Box` component

    Description

    The Box component should serve as a wrapper component for most of the CSS utility needs.

    The Box component is useful because it helps with 3 common use cases:

    • Create responsive layouts with ease.
    • Provide a shorthand way to pass styles via props (bg instead of backgroundColor).
    • Compose new component and allow for override using the as prop.

    Solution you'd like

    • By default, the Box component should render a div element.
    • Should have an as prop to change the element render, just like styled-components. for eg.
    <Box as="button" borderRadius="md" bg="tomato" color="white" px={4} h={8}>
      Button
    </Box>
    

    Additional context

    Something like this β†’ https://chakra-ui.com/docs/layout/box

    feature request 
    opened by wsameer 1
  • feat: Form component validation groups

    feat: Form component validation groups

    Description

    Currently, form fields take individual validator functions, but when we have a case where 1 of 3 fields in a form must be filled out, there's no built-in way to do that validation. For example, if one of home, cell, and email must be filled out before submitting a form.

    Solution you'd like

    To be able to define validation groups for form validations, or some other way to validate related fields together instead of individually.

    Alternatives you've considered

    You can define a validator function that checks the state of the fields within the context of the component and pass that function as each of the individual fields' validator, but the error messaging behavior becomes confusing for users since the validator runs onBlur of the specific fields.

    Additional context

    feature request 
    opened by aruby-medly 2
  • feat: migrate to Storybook 6

    feat: migrate to Storybook 6

    Description

    Migrate to Storybook 6

    Additional context

    https://medium.com/storybookjs/storybook-6-0-1e14a2071000 https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5

    feature request 
    opened by gmukul01 1
Releases(@medly-components/[email protected])
Owner
Medly
Medly Open Source
Medly
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

Kiwi.com 1.1k Nov 27, 2021
ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components

ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components. It has utilities to set or get deep properties of nested data using paths.

Autodesk 18 Nov 10, 2021
πŸƒreact-leaf-polls is a set of multiple reusable and customizable poll types.

react-leaf-polls is a set of multiple reusable and customizable poll types. Install NPM npm i --save react-leaf-polls Yarn yarn add react-leaf-polls U

Wojciech Sala 13 Nov 1, 2021
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

grommet 7.6k Nov 24, 2021
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Dataminr 262 Oct 30, 2021
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 12.5k Nov 24, 2021
Bootstrap components built with React

React-Bootstrap Bootstrap 4 components built with React. Docs See the documentation with live editable examples and API documentation. To find the doc

react-bootstrap 20.2k Nov 23, 2021
Simple React Bootstrap 4 components

reactstrap Stateless React Components for Bootstrap 4. Getting Started Follow the create-react-app instructions to get started and then follow the rea

reactstrap 10.2k Nov 25, 2021
⚑️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚑️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Chakra UI 22.3k Nov 26, 2021
:atom_symbol: React primitive UI components built with styled-system.

Rebass React primitive UI components built with Styled System. https://rebassjs.org npm i rebass Getting Started import React from 'react' import { Bo

Rebass 7.6k Nov 28, 2021
🧱 A suite of React components .

English | δΈ­ζ–‡η‰ˆ React Suite is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI fra

React Suite 6.3k Nov 24, 2021
React components for Bulma framework

React-bulma-components React components for Bulma (v0.8.2) UI compatible with most used React Frameworks (Gatsby, CRA, Next.js) V4 Pool Please Check h

John 1.1k Nov 19, 2021
React.js components for Modern CSS framework based on Flexbox

React-Bulma React.js components for Modern CSS framework based on Flexbox Styleguide: https://kulakowka.github.io/react-bulma/ Official Repo: https://

Anton Kulakov 461 Nov 20, 2021
Super Saiyan React components, son of awesome Bulma, implemented in TypeScript

Trunx Super Saiyan React components, son of awesome Bulma, implemented in TypeScript Status Almost all Bulma features are available and documented, fe

Gianluca Casati 58 Oct 14, 2021
React UI Components for macOS High Sierra and Windows 10

React UI Components for macOS High Sierra and Windows 10. npm install react-desktop --save Help wanted! I am looking for developers to help me develop

Gabriel Bull 9.3k Nov 21, 2021
React components and demo for the Tabler UI theme.

Update - June 2019: Version 2 Alpha now available on NPM: npm install [email protected] yarn add [email protected] Check out the latest progress and

Tabler 1.8k Nov 24, 2021
React components for easier customization and smooth development flow.

Sha-el-design React components for easier customization and smooth development flow. ?? Features ?? Material inspired design. ?? A complete package of

null 29 Nov 21, 2021
πŸ‘€ Easily apply tilt hover effect on React components - lightweight/zero dependencies

React Tilt ?? Easily apply tilt hover effect on React components Demo Demos created with React DemoTab ?? Install npm install react-parallax-tilt Feat

mkosir 389 Nov 26, 2021
VechaiUI – React components with built-in dark mode using Tailwind CSS

Collection of accessible React UI components with the built-in dark theme using Tailwind CSS. Pre-designed headless ui and radix-ui.

null 668 Nov 27, 2021