elementz-ui / elementz

:space_invader: A React UI Component library for building modern applications easily & quickly

Elementz

A React Component library for buliding modern applications easily & quickly.

Documentation

Learn more at https://elementz.style

What's unique?

There are a few React UI libraries around, and you might be wondering if there is anything new here?

A few interesting things:

• Table A full featured Table component, scalable, fast, responsive, infinite scrolling & more
• Loading Smooth Loading Skeleton wrappers with 0 configuration
• Customization & Performance More than 50% of this library code is SCSS , making it easily customizable and smooth

& some other nice stuff you should probably check out

Install

npm i elementz --save

Bundle Size is about ~500KB

Usage

import {Button} from  'elementz';

<Button primary>Push me</Button>

elementz's Issues

Use typescript for better usability

Currently this project is 57.4% JS + 1.9% TS. If we start migrating JS to TS, the library will become way robust and usability will skyrocket, at least this is what I think.

On row selection the actionable buttons are displayed on far right in the table

For tables with large number of columns, if I select a row then the actionable buttons are displayed on far right.
The user would not see these CTAs unless they scroll to extreme right.
How can these be positioned on the left side of the table? or maybe like the select option is displayed irrespective of the scroll position?

Settings toggle is misplaced

Button to toggle settings is placed almost in the middle of the screen when sidebar is collapsed.

Browser: Mozilla Firefox 89.0 (64-bit)
OS: Manjaro Linux
Screen resolution: 1920x1080

Screenshots

Possible resolution

Set width:0 to .ez-theme-maker:not(.active)

Selectable checkbox is not rendered in mobile view

Selectable checkbox is not rendered in mobile view. Is this is a bug or this feature not available in mobile?

onSelect and onRowClick does not render custom component

Hi,

Thanks for fixing the previous horizontal scrolling. This is a very good and helpful library!

I am not able to make functions such as onSelect and onRowClick work. I am trying to enable buttons on row click or on single row select as shown below however nothing happens.

onSelect={(row, i) => {
          return (
            <Button.Group>
              <Button sm danger reverse icon="delete" /> 
              <Button sm secondary reverse icon="pencil" />
            </Button.Group>
          );
        }}
        onRowClick={(row, i) => {
          return (
            <Button.Group>
              <Button sm danger reverse icon="delete" /> 
              <Button sm secondary reverse icon="pencil" />
            </Button.Group>
          );
        }}
onAction={(row, i, isBulk) => {
          if (!isBulk) {
            return <Button sm simple icon="more-h" className="icon-bold" />;
          } else {
            return (
                <Button sm danger reverse icon="trash" />
            );
          }
        }}

If you look at the below image.

1. The trash button is enabled when I select single or multiple rows triggered through onAction. However I expected this to happen when I select more than 1 row (i.e when isBulk is true)
2. No buttons are rendered when I select or click a single row

Also how can this repo be tested if I fork it locally?

Error while searching

Hi,

I am seeing the following error, seems we need to persist the event in handleSearch call.
The onsearch function cannot be invoked and search does not work.

react_version: 16.14.0

Uncaught TypeError: Cannot read property 'value' of null
    at TA (elementz.js:6)
    at i (elementz.js:6)
TA @ elementz.js:6
i @ elementz.js:6
setTimeout (async)
XA @ elementz.js:6
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executeDispatch @ react-dom.development.js:389
executeDispatchesInOrder @ react-dom.development.js:414
executeDispatchesAndRelease @ react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3257
runEventsInBatch @ react-dom.development.js:3304
runExtractedPluginEventsInBatch @ react-dom.development.js:3514
handleTopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168

Bug Report + Doc Request: Modal

How about we add some doc to Modal window in this awesome library?

Here is my code, and this doesn't work: https://codesandbox.io/s/angry-sutherland-rzv2f?file=/src/App.js

Also pasting here:

const App = () => {
  const [v, setV] = useState(false);
  return (
    <>
      <Button
        onClick={() => {
          setV(true);
        }}
      >
        open
      </Button>
      {console.log(v)}
      {v && <Modal>test</Modal>}
    </>
  );
};

Error when trying to install with React 17.0.2

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from [email protected]
npm ERR! node_modules/elementz
npm ERR!   dev elementz@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\me\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\me\AppData\Local\npm-cache\_logs\2021-07-10T18_12_28_223Z-debug.log

Originally I installed using --force, but, decided to post this here anyway.

Using Elementz in Next.js

Is it possible to import elementz into next.js? I tried npm i elements --save but it gives me the same error which I screenshot and posted below

Translation of part 3
"Unable to find any declaration file for elemenz module. THE_PATH has been assigned implicitly to a type any"
Try with npm i --save-dev @types/elementz if it exists or add a new declaration file with d.ts extension containing declare module 'elementz';

[FEATURE REQUEST] Column grouping

Hello! Is there any plans to add column grouping? Such as this: https://codesandbox.io/s/j8o94

Table exportation

Can i export the table to pdf

`ReferenceError: window is not defined` in Next.JS

Trying to use this in Next.JS throws ReferenceError: window is not defined.

Really like the look of this UI, so I hope this gets fixed soon.

Thanks in advance!