React components for easier customization and smooth development flow.

Overview

Sha-el-design

Contributor Covenant CI codecov gziped size npm version weekly downloads

React components for easier customization and smooth development flow.

πŸ”₯ Features

  • 🌹 Material inspired design.
  • πŸ“¦ A complete package of ui resource for any React project.
  • πŸ›‘ Made with ❀ using Typescript.
  • 🎨 Easy theme customization using ThemeContext.
  • 🀏 Smaller Footprint @ 102kb GZIPED.

πŸŽ› Environment Support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

πŸ”§ Installation

Sha-el-design is available as an npm package.

// with npm
npm install react-icons sha-el-design

// with yarn
yarn add react-icons sha-el-design

πŸƒ Usage

Simple example for you to get started.

import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'sha-el-design';

function App() {
  return (
    <Button primary>Hello World</Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

πŸ’« Examples

Check example folder.

✍ Documentation

Check out our Storybook.

🎨 Theming

Sha-el-design supports Theming(DARK πŸ‘» , LIGHT and more) out of box using ThemeContext.

import * as React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { ThemeProvider } from 'sha-el-design/lib/components/Theme/Theme';

export class App extends React.Component {
  public render() {
    return (
      <ThemeProvider theme="DARK">
        <BrowserRouter>
          <Switch>
            <Route path="/login">
              ...
            </Route>
            <Route path="/home">
              ...
            </Route>
          </Switch>
        </BrowserRouter>
      </ThemeProvider>
    );
  }
}

🀝 Contributing

Just follow this and this.

Make sure coding quality is best you can come up with also please be polite to everyone.

We would love a PR from you (It should make sense though).

πŸ›£ Roadmap

Check Milestone

License

This project is licensed under the terms of the MIT license.

Issues
  • Add elevation prop for Card component

    Add elevation prop for Card component

    Elevation props inspired by Material UI. Elevation prop values ranging from 1-24.

    • With elevation=5 elevation5
    • With elevation=15 elevation15
    • With elevation=24 elevation24
    opened by EverWinter23 2
  • Cannot use import statement outside a module

    Cannot use import statement outside a module

    I am just trying to add this package on next js project this is my code sample. Below share my error code `import '../styles/globals.css' import type { AppProps } from 'next/app' import { ThemeProvider } from 'sha-el-design/lib/components/Theme/Theme';

    function MyApp({ Component, pageProps }: AppProps) { return ( <Component {...pageProps} /> ) } export default MyApp`

    And the error is

    https://raw.githubusercontent.com/saifulbabo67646/Facebook-Video-Downloader/master/error%20for%20sha-el-design.png And The Error code in console is `C:\Users\Saiful islam\nextjs\sha-el-design\my-app\node_modules\sha-el-design\lib\components\Theme\Theme.js:1 import * as React from 'react'; ^^^^^^

    SyntaxError: Cannot use import statement outside a module at wrapSafe (internal/modules/cjs/loader.js:979:16) at Module._compile (internal/modules/cjs/loader.js:1027:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at Object.sha-el-design/lib/components/Theme/Theme (C:\Users\Saiful islam\nextjs\sha-el-design\my-app.next\server\pages_app.js:83:18) at webpack_require (C:\Users\Saiful islam\nextjs\sha-el-design\my-app.next\server\webpack-runtime.js:25:42) at Object../pages/_app.tsx (C:\Users\Saiful islam\nextjs\sha-el-design\my-app.next\server\pages_app.js:19:98)`

    Is There have a solution please?

    opened by saifulbabo67646 2
  • Add props to set elevation and border for all surface element

    Add props to set elevation and border for all surface element

    Ref: https://material-ui.com/api/paper/

    Like material-ui paper component we can have it for cards, table etc...

    enhancement 
    opened by anitnilay20 2
  • Add stepper component.

    Add stepper component.

    PR Details

    Stepper component

    Related Issue

    • #26

    Motivation and Context

    • Stepper can be used to create form wizards.

    Types of changes

    What types of changes does your code introduce? Put an x in all the boxes that apply:

    • [ ] Docs change / refactoring / dependency upgrade
    • [ ] Bug fix (non-breaking change which fixes an issue)
    • [x] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to change)

    Checklist

    • Go over all the following points, and put an x in all the boxes that apply.
    • If you're unsure about any of these, don't hesitate to ask. We're here to help!
    • [x] My code follows the code style of this project.
    • [x] My change requires a change to the documentation.
    • [x] I have updated the documentation accordingly.
    • [x] I have added tests to cover my changes.
    • [x] All new and existing tests passed.
    enhancement 
    opened by anitnilay20 1
  • :fire: Fix **Text** test.

    :fire: Fix **Text** test.

    opened by anitnilay20 1
  • :rose: Replace Jss with Emotion

    :rose: Replace Jss with Emotion

    PR Details

    Description

    Replace Jss with Emotion.

    Related Issue

    #60

    Types of changes

    • [x] Docs change / refactoring / dependency upgrade
    • [x] Bug fix (non-breaking change which fixes an issue)
    • [x] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to change)

    Checklist

    • Go over all the following points, and put an x in all the boxes that apply.
    • If you're unsure about any of these, don't hesitate to ask. We're here to help!
    • [x] My code follows the code style of this project.
    • [x] My change requires a change to the documentation.
    • [x] I have updated the documentation accordingly.
    • [x] I have read the CONTRIBUTING document.
    • [x] I have added tests to cover my changes.
    • [x] All new and existing tests passed.
    opened by anitnilay20 1
  • Test cases for List

    Test cases for List

    PR Details

    Description

    • Add test case for list.
    • Add inline list to storybook.

    Related Issue

    #39

    Motivation and Context

    For code coverage.

    How Has This Been Tested

    Tested using jest with the help of react testing library.

    Types of changes

    • [ ] Docs change / refactoring / dependency upgrade
    • [x] Bug fix (non-breaking change which fixes an issue)
    • [ ] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to change)

    Checklist

    • [x] My code follows the code style of this project.
    • [ ] My change requires a change to the documentation.
    • [ ] I have updated the documentation accordingly.
    • [x] I have read the CONTRIBUTING document.
    • [x] I have added tests to cover my changes.
    • [x] All new and existing tests passed.
    opened by prateekshourya29 1
  • Minor design fix

    Minor design fix

    PR Details

    Description

    • Use dynamic zIndex assignment.
    • Update CardHeader to use h6 for header.
    • Modal opening and closing animation fix.
    • Popover add classname for child element.
    • Fix divider test case.

    Types of changes

    • [ ] Docs change / refactoring / dependency upgrade
    • [x] Bug fix (non-breaking change which fixes an issue)
    • [ ] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to change)

    Checklist

    • [x] My code follows the code style of this project.
    • [x] My change requires a change to the documentation.
    • [x] I have updated the documentation accordingly.
    • [x] I have read the CONTRIBUTING document.
    • [x] I have added tests to cover my changes.
    • [x] All new and existing tests passed.
    opened by prateekshourya29 1
  • Adds elevation prop to surface components

    Adds elevation prop to surface components

    Adds material elevation prop for Surface components for light and dark theme, ranging from 0-24.

    Components with elevation props

    • [x] Table
    • [x] Transfer
    • [x] Calendar
    • [x] Collapse, List
    • [x] Drawer
    • [ ] Side Panel [Can't add-- it's using context]
    • [x] Modal
    • [x] Popover

    Issue https://github.com/sha-el/sha-el-design/issues/11

    opened by EverWinter23 1
  • Create a stepper component

    Create a stepper component

    Add a stepper component which can be used for creating form wizards.

    Ref

    https://material-ui.com/components/steppers/ https://www.telerik.com/kendo-react-ui/components/layout/stepper/ https://ant.design/components/steps/

    enhancement good first issue 
    opened by rahuljh 1
  • Add Basic Slider component

    Add Basic Slider component

    • Add slider mix max props

    PR Details

    Description

    Please review the releases section of the repository to get the detailed information on changes.

    Related Issue

    • This project only accepts pull requests related to open issues.
    • If suggesting a new feature or change, please discuss it in an issue first.
    • If fixing a bug, there should be an issue describing it with steps to reproduce.
    • Please link to the issue here: Create Issue

    Motivation and Context

    • Why is this change required?
    • What problem does it solve?

    How Has This Been Tested

    • Please describe in detail how you tested your changes.
    • Include details of your testing environment, and the tests you ran to.
    • see how your change affects other areas of the code, etc.

    Types of changes

    What types of changes does your code introduce? Put an x in all the boxes that apply:

    • [ ] Docs change / refactoring / dependency upgrade
    • [ ] Bug fix (non-breaking change which fixes an issue)
    • [ ] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to change)

    Checklist

    • Go over all the following points, and put an x in all the boxes that apply.
    • If you're unsure about any of these, don't hesitate to ask. We're here to help!
    • [ ] My code follows the code style of this project.
    • [ ] My change requires a change to the documentation.
    • [ ] I have updated the documentation accordingly.
    • [ ] I have read the CONTRIBUTING document.
    • [ ] I have added tests to cover my changes.
    • [ ] All new and existing tests passed.
    opened by anitnilay20 1
  • Add Striped, Bordered, Borderless, Outlined functionality to flex table.

    Add Striped, Bordered, Borderless, Outlined functionality to flex table.

    For ref: https://pixinvent.com/demo/vuexy-vuejs-admin-dashboard-template/demo-2/table/bs-table

    opened by prateekshourya29 0
  • Change Modal animation

    Change Modal animation

    Currently, it has a simple animation. But it will look even better if we use animation like this one: https://ant.design/components/modal/

    opened by prateekshourya29 0
  • Replace popmotion with own component

    Replace popmotion with own component

    popmotion takes 5.2% of the total project size.

    opened by prateekshourya29 0
  • Remove rxjs

    Remove rxjs

    rxjs takes 15.3% of the total project size.

    opened by prateekshourya29 0
  • Replace rc-slider with own component

    Replace rc-slider with own component

    rc-slider takes 7.7% of the total project size.

    opened by prateekshourya29 0
  • Add test cases for every component

    Add test cases for every component

    test 
    opened by prateekshourya29 0
Releases(v0.1.27)
  • v0.1.27(Dec 16, 2021)

    374fe013910df25e44608803d1923134f904a770 Fix tooltip positioning (#113) 23262aff728372cab9f672b549a67848e30a806f Minor fir for autocomplete and stepper (#114) fe6d3464569a638df5cfdc10cfe1b6e58ec1b11a :fire: Fix portal test (#112)

    Source code(tar.gz)
    Source code(zip)
  • v0.1.26(Dec 7, 2021)

    3995ebd34f06549ca5d62019675dec98f8f8c7c1 Bump url-parse from 1.5.1 to 1.5.3 (#109) 198d2e8dfe57b084e666bc9d3609752a910f92fe Bump postcss from 7.0.35 to 7.0.39 (#110) 6c18fbd07c4085187d524c9c5570641c9b93319d Bump ws from 6.2.1 to 6.2.2 (#111) fcae400cbe78f83247586f0ae45dc7139b297fb4 Bump semver-regex from 3.1.2 to 3.1.3 (#106) 8dd6f1268d35431842c4b139d67b775df27282ec Bump tmpl from 1.0.4 to 1.0.5 (#107) b62504cfce6680705a284d11be127d5c8a1adf69 Bump tar from 6.1.0 to 6.1.11 (#108) 689ae6c2a7e834cee18a693c159929c8415de6be Bump url-parse from 1.5.1 to 1.5.3 in /example/simple-dashboard (#104) 7e2c46942f35c9d3e15e1dc779c65210b4704590 πŸ§ͺ Test cases for Transfer and minor fix. (#100) 2997fb88e5e96b408be7654906f8094819c58e5c Bump path-parse from 1.0.6 to 1.0.7 in /example/simple-dashboard (#103) c281f4810a9fba63ba141158fcf60529d785e87f Bump postcss from 7.0.32 to 7.0.36 in /example/simple-dashboard (#101) 129de2d948d25899af61d2e6a32914f3ca3be527 Recreate tooltip component and remove rc-tooltip (#97) fe3b3fd0d93b4b1091491ab0206dc68eadc138d0 Bump ws from 6.2.1 to 6.2.2 in /example/simple-dashboard (#96) 4bfbbf8153ae54c75159fdb3e42ca7dc799e68cb πŸ§ͺ Test cases for Pagination (#99) a2402ca955b52bc76977154f935b58ca65d216bd πŸ§ͺ Test cases for FlexTable (#98) 63a90b3fd3c0834434929cdad82e7b42337f55e6 πŸ§ͺ Test cases for Layout (#93) fa0573be368c12fd1a75acba6c72fef41fd0815b πŸ› Fix TimePicker & DatePicker random test fail issue (#95) 0c82476198c65db50b5ceb1045c1e4c65735e026 :bug: Fix timepicker test fail at 12am/pm in 12 hour format (#94) 34c0b38e7fb13a7c11029f937c7396678b7ad5e1 πŸ§ͺ Test cases for DatePicker & TimePicker (#92) fd9409ab86b932cc20560b9b58032c0032305dda :tada: Add test for drawer. (#91) e7175be8d406ad3bfbc899efb6692970680d7e1f :tada: Add collapse test. (#90) 32122adfdff9644580bb557ca565e246d737c64e :tada: Add list test cases. (#89) 82e931d0bfe0f278e5f41f05c6bf523df81a493c Add modal test case. (#85) 1c068180ec86b91decd56a6ce463b42df59d5374 Minor flex fixes (#84) e03ec9554208cefc0bd816f410b437c5f0240757 Major fixes. Design and Functionality (#76) 2eb39d31eb1f133d45f2c9bef5dde2456d2a43a3 Bump dns-packet from 1.3.1 to 1.3.4 in /example/simple-dashboard (#82) 4c308ef95d591703e2fc56c5732f61d6e95c4049 Bump y18n from 4.0.0 to 4.0.1 in /example/simple-dashboard (#68) cc788666d5990e129eb87b3b424d229e99734492 Bump ssri from 6.0.1 to 6.0.2 in /example/simple-dashboard (#71) 7bb9c0831cac74a7f448d249e103ce3765d1006e Bump url-parse from 1.4.7 to 1.5.1 in /example/simple-dashboard (#72) c70bc2cbaf6b2991caa4e1d3dcd00eba9f01d63a Bump lodash from 4.17.15 to 4.17.21 in /example/simple-dashboard (#73)

    Source code(tar.gz)
    Source code(zip)
  • v0.1.22(Mar 21, 2021)

  • v0.1.20(Mar 11, 2021)

  • v0.1.18(Feb 5, 2021)

  • v0.1.17(Feb 5, 2021)

  • v0.1.16(Jan 16, 2021)

    • Replace Typestyle with jss and some fix

    Replace FunctionComponent to FC in some files Add FC component in Class component to use hooks Move style function to seprate file Button margin and font size fix Typo Fix callendarEvents to calendarEvents in Calendar & timepicker component Bug fix dark theme not work as intended Input Border Error style fix

    • Remove typestyle classes from input & list

    • Popover fix

    • Replace typestyle with jss in tabs

    • Replace typestyle with jss in table

    • 🌹 Fix not working components.

    • Calendar

    • DatePicker

    • TimePicker

    • Breadcrumb

    • Grid

    • Drawer

    • Loading

    • Modal

    • Radio

    • Remove date-fns dependency

    Source code(tar.gz)
    Source code(zip)
  • v0.1.12(Dec 13, 2020)

    AutoComplete Fix arrow key navigation. Button Use boolean props instead of type. Page remove container margin. Tooltip Update background color and add story. Tag Remove cursor = pointer if no onClick props is present. List Add densed prop. Input remove border color change on hover if disabled. TextArea update font. Pagination Fix anamoly when page number is zero. Text Add textAllign prop. DatePicker should not show current date if value is null. Drawer Add closing animation. Input Update design for disabled. Modal Add responsive design. Drawer Add responsive design. Menu Update design and functionality. Calendar Update design. Sidebar Update design.

    Source code(tar.gz)
    Source code(zip)
  • v0.1.8(Nov 2, 2020)

    πŸ› Bug fixes.

    • Tab inkbar initial positioning.
    • Update Button icon size to 20px.
    • Fix Badge count not alligned to vertically center.
    • Paginagtion Page size selector design update.
    • Checkbox design update.
    Source code(tar.gz)
    Source code(zip)
  • v0.1.7(Oct 29, 2020)

  • v0.1.6(Oct 28, 2020)

  • v0.1.5(Oct 28, 2020)

    Minor design and usage fix.

    • Autocomplete add disabled prop.
    • Fix Menu active prop not working.
    • Modal with border radius 2px.
    • Button decrease padding when flat.
    • FlexTable expose row's index to FlexColumns.
    • Row style exposed from FlexTable.
    • Flextable on row click.
    • Fix AutoComplete dropdown width.
    • Fix Multi Autocomplete always showing X(Close Button).
    • Fix Autocomplete clearable button triggering form submit.
    Source code(tar.gz)
    Source code(zip)
  • v0.1.0(Oct 20, 2020)

    Changelog

    ⚑ Add FlexTable component.

    • Add FlexTable.
    • Update Pagination design.
    • Update Page tabs and bottom design.
    • Add close prop for MenuItem.

    ⚑ Add outline prop to Button.

    • Move button loading color to helpers/colors.
    • Add story for outline buttons.
    Source code(tar.gz)
    Source code(zip)
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 263 Dec 17, 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.7k Jan 14, 2022
🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

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

Medly 63 Jan 10, 2022
Nextjs-components - A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation TBD Todo's Unit test coverage Unit tests

null 22 Jan 15, 2022
Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

Mantine 3.8k Jan 17, 2022
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 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 Jan 14, 2022
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 Jan 18, 2022
An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

Alex Wright 17 Dec 18, 2021
Opinionated React UI library, built with styled-components and TypeScript.

Opinionated React UI library, built with styled-components and TypeScript.

Lapidist 0 Jan 10, 2022
Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps.

?? Pancake UIkit Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark an

PolyPup 1 Nov 4, 2021
A set of React components and hooks used to build pages on Wakanda's apps

Wakanda UIkit is a set of React components and hooks used to build pages on Wakanda's apps. It also contains a theme file for dark and light mode.

wakandaswap 0 Dec 16, 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.3k Jan 14, 2022
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 Jan 13, 2022
⚑️ 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 23.3k Jan 16, 2022
: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 Jan 20, 2022
🧱 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.4k Jan 14, 2022
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 Jan 12, 2022
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 462 Jan 7, 2022