emcecs / clarity-react Goto Github PK

Hi, are there any plans to update the project to depend on clr/ui clr/icons 4.0.x ?

If you need to fill out an input box with icon, and the text is too long, it will subsequently overlap the icon and that looks ugly.

Steps to reproduce:

1. Click on User ID filter icon and put 41512
2. Click on Name filter icon and put Brad
3. The result is "We couldn't find any items", all is good...
4. Click on Name filter icon and clear the input field
5. You'll see all the records again. Note that the User ID filter is still active, and if you click there you'll still see 41512 which we put there before, but it's not taken into consideration anymore.

Hi folks,

We are looking to use clarity-react in a simple typescript create-react-app project.
We have followed the instructions in the README (including getting the clarity-react node module from Github instead of npm - issue #72 ), however are getting the following error:

./node_modules/@dell/clarity-react/src/layout/main-container/MainContainer.tsx 24:7

Module parse failed: Unexpected token (24:7)


You may need an appropriate loader to handle this file type, currently no loaders 
are configured to process this file. 

See https://webpack.js.org/concepts#loaders

|  * @param {dataqa} for Quality Engineering

|  */

> export type MainContainerProps = {

|     actions?: React.ReactNode;

|     title: string;

We weren't expecting to configure a loader for something in our node modules, is there something we are missing?

Note: Our App.tsx and index.tsx are copied from the README.md example and the rest is a vanilla create-react-app project to test this out

Thanks in advance!

cc @gmrodgers

Hello,
I've noticed development seems to have halted on this project for some time.

Is it still active?

Thanks!

Hi,

Thanks for your outstanding work making a react version of Clarity. I'm trying to implement a VC UI Plugin using clarity-react. And I'm able to install and use clarity-react by following #72 and #82.

I can load and use components like Card/Table successfully. And I load the components from dist after running make under folder node_modules/@dell/clarity-react.
e.g.

import { Table } from '@dell/clarity-react/dist/tables/Table'

But when I try to use the component Modal, I got the error:

Here is the code:

Any ideas? Thanks in advance.

Instructions in your readme suggest installing via yarn add @dell/clarity-react, but with a default yarn (or npm) CLI installation, the package is not found, and searching on npmjs.com seems to indicate that @dell/clarity-react (or any @dell-prefix package) is not present. Is there an alternate NPM registry that should be used for installation?

Background: Hi! I'm a member of the team working on Pivotal Tracker (www.pivotaltracker.com). We (all of Pivotal Software, including our team) have recently been acquired by VMware. So, it turns out that we and y'all are now both in the big, happy Dell corporate family. One of the things we're currently working on is a new, streamlined alternative of the Tracker web application. We've been building it using React, trying to get by with a simple style guide, and discussing working to build out our own design system. With the acquisition we've decided to instead shift our app to use Clarity. And since we're in React, we've started using your clarity-react. Given this installation problem, we've resorted to building your code locally and including the built library in our source control -- obviously not the best possible process.

Please advise whether you'd suggest that we continue this way, or if there's a better alternative that we've missed. Thanks in advance, glen.

Hello,

So I have been playing around with the wizard and I want to have forms on each step and only allow (next/finish) when the form is valid.

Right now I am doing the following. Calling the checkStepValidity when all fields are populated. But not sure how I could toggle it back to invalid if a field is completed but then erased.

  useEffect(() => {
    if (
      patient.firstName?.length > 0
    ) {
       wizardRef.current?.checkStepValidity(0);
    } else {
      // set step to invalid
    }
  }, [patient]);

Is there currently any way to do this or could you recommend a better way?

Hello,

I have read the other issue that was closed but I am still unable to successfully load this in my project.

I installed the project from a GitHub archive. This actually clones the repo and no transpiled code so I cd'd into the node_modules folder @dell and went through the maker file steps to build the 'dist' file.

I then imported the MainContainer like

import MainContainer from "@dell/clarity-react/dist/layout/main-container/MainContainer";

however, I am getting

JSX element type 'MainContainer' does not have any construct or call signatures. 

Are you able to provide any more detailed instructions to use this project? Thanks for the work you have done so far I am excited to give it a try.

When I click on the filter icon React throws an error:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
at checkForNestedUpdates (http://localhost:6006/vendors~main.e834025ebc93e441571d.bundle.js:152239:15)
at scheduleUpdateOnFiber (http://localhost:6006/vendors~main.e834025ebc93e441571d.bundle.js:150310:3)
at Object.enqueueSetState (http://localhost:6006/vendors~main.e834025ebc93e441571d.bundle.js:141785:5)
at DataGridFilter.push../node_modules/react/cjs/react.development.js.Component.setState (http://localhost:6006/vendors~main.e834025ebc93e441571d.bundle.js:160049:16)
at DataGridFilter.componentDidUpdate (http://localhost:6006/main.e834025ebc93e441571d.bundle.js:5007:12)
at commitLifeCycles (http://localhost:6006/vendors~main.e834025ebc93e441571d.bundle.js:148981:22)
at commitLayoutEffects (http://localhost:6006/vendors~main.e834025ebc93e441571d.bundle.js:151949:7)
at HTMLUnknownElement.callCallback (http://localhost:6006/vendors~main.e834025ebc93e441571d.bundle.js:129334:14)
at Object.invokeGuardedCallbackDev (http://localhost:6006/vendors~main.e834025ebc93e441571d.bundle.js:129383:16)
at invokeGuardedCallback (http://localhost:6006/vendors~main.e834025ebc93e441571d.bundle.js:129438:31)

Notes:

1. Chrome version 84.0.4147.89 (Official Build) (64-bit) on Windows 10
2. It works only if the Dev Tools are open
3. It works in Edge with and without Dev Tools open

There is no free space between the icon and the text inside the button, it would be nice if it was possible to add some margin/padding between them.

Hi,

I see that the last release is from April but since then there have been a few improvements and PRs, I was wondering if you could issue a release so the npm workaround to pull from a tar can still work with the latest

Getting this error while using MainContainer in App.tsx

Hi,

Importing Moment in the Datapicker component this way:
import Moment from "moment"

Causes the following error when I import the component in Framer:

moment_1.default' is undefined)— index.html:4151

I managed to fix the issue (the component works fine in Storybook and Framer) by importing Moment like so:

import * as Moment from 'moment';

See this discussion that I came across for details: aurelia/skeleton-navigation#606

Thanks,
Lachezar