catho / quantum Goto Github PK

When i use the container on xsmall devices the max-width style has receiving the value 1

When we are use to import { Component... } from '@catho/quantum' it is happening this error:

Failed to compile

./node_modules/rc-slider/assets/index.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .rc-slider {
|   position: relative;
|   height: 14px;

This error occurred during the build time and cannot be dismissed.

It has happening in React App as much as in the React App + Next.

Talking about it with @allyssonsantos, we believe that is problem happens because the rc-slider is using .css files.

The idea was to include the selectedItem logic to the description example. But, as it would require refactoring splitting the examples into classes we can go with this and fix the examples with another issue.

Originally posted by @pedrosouza in https://github.com/catho/quantum/pull/205/files/ef4b29a4e9e206ba3b62a1244ad78cff543a18e9..f823ff2993eacf17e4e99bdc15069cf9aa1a764a

In old version of the Quantum we had className in some components but after the update to new version 4.1.1 is not work more, generating compilation error (TS).
Take this in Icon component.
Other components of this error for the prop ID.

Describe the bug

When using the grid components <Row /> and <Col /> always trhows a warning on the console. Aparently the way it's rendered is using a map, would it be possible to fix it turning those components simple divs with the css applied?

A clear and concise description of what the bug is.

Steps to reproduce the behavior

1. create a component with one add two columns,
2. Open DevTools
3. It' will trigger the error on the console

Expected vs actual behavior

expected to render cols that are not on a loop without the need of a key prop

Maybe UX designers need to show a description to label on <Dropdown />, as print screen below:

My proposal is add a new key in object to set on items props and render like print screen below:

I'm trying to execute git push in my fork, but there are eslint errors.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Skeleton.Text html structure

when using the Skeleton.Text component it keeps logging this warning about HTML semantic issue:

Proposed solution

Refactor the Skeleton.Text component to use span as a generic inline element will not trigger this problem and because the base Skeleton uses a div with display: inline-block it will not have any problems due to this change

Our Context

We use the Skeleton.Text inside the paragraph that contains a label and then the skelenton for the data that is displayed after an API call:

With the solution proposed it would make the HTML semantic and possible to use it inside a <p></p> or a <div></div>

Hi,

Noticed that a is listed as a dependency, wouldn't it be better to have it listed as a dev dependency?

This caused a warning in a vulnerability scan we ran in a project using quantum. I opened this in the storybook repo as well.

Is it ok to make that change?

Hi.
Right now the <Form> validation through Validations is only possible if the given input is a direct child of the <Form> element, ignoring nested child inputs;

Example:

Works fine:

Breaks:

Are we doing something wrong? Is this an intended behavior or is this really a bug?

Thanks!

Hi,

Right now, when the <Input/> component is rendered the value passed as props is assigned to a state variable (this.state.currentValue) and from this point onwards the component manipulate this state value, ignoring the value given by this.props (https://github.com/catho/quantum/blob/master/components/Input/Input.jsx#L91);

The problem occurs when one's want to manipulate the <Input/> value from outside of the component itself, via the value prop; Since the this.props.value content is never accessed after the first render the component did not respect these changes from parent state;
This is very present in moments where one wants to clear a <Form />'s <Input/> without necessarily triggering navigation, this means, just by clearing the state props bound to the component;

Should it be like this?

It has happened in the <Dropdown />.

I would like to open a discussion regarding the migration of the project to TypeScript. As we continue to evolve and improve our codebase, I believe that adopting TypeScript will bring numerous benefits to our development process.

• TypeScript eliminates the need for separate type definition files, which can be inconvenient and error-prone to manage.
• Another benefit of migrating to TypeScript is that we can remove older libraries such as Babel and PropTypes, and rely solely on TypeScript for type checking and prop validation.
• TypeScript allows us to configure various options, such as "implicit returns," which can make typescript almost equal to pure javascript

Here I refactor the Alert component to show how it will be like

import { useState, PropsWithChildren } from 'react';
import { Button } from '../Button';
import { Icon } from '../Icon';
import { Theme, theme as defaultTheme } from '../../theme';
import * as Styles from './Button.styles';

export type PropsAlert = PropsWithChildren<{
  icon?: string;
  onClose?: () => void;
  skin: 'primary' | 'success' | 'error' | 'neutral' | 'warning';
  theme: QuantumTheme;
}>

export function Alert(props: PropsAlert) {
  const { children, onClose, icon, skin = 'neutral', theme = defaultTheme, ...restProps } = props;

  const [show, setShow] = useState(true);

  if(!show) {
    return null;
  }

  return (
    <Styles.Wrapper theme={theme}>
      {icon ? <Styles.Icon name={icon} /> : null}
      {children ?? null}
      {onClose ?? (
        <Styles.ButtonClose
          theme={theme}
          onClick={() => {
            setShow(false);
            onClose();
          }}
        />
      )}
    </Styles.Wrapper>
  )
}

Some points of atention here:

• Using a separate module for styles will help with readability
• Props should be exported as well, it can be useful for other components
• The default props should be done with the deconstruction of the props object
• Named exports are preferable over default exports
  • index.ts modules can export everything from a other module with export * from "./other-module
  • Prevent name duplication

the cancel icon changes when the input receives a hover.

When I have a dinamic input value like this:

<Input value={text} />

The input initial value will respect text variable, but if text change, the input value won't change accordingly.

Example:

import { Input } from '@catho/quantum';
import { useState } from 'react';

const Test = () => {
  const [text, setText] = useState('Initial text');
  const clickHandler = () => {
    setText('Another text');
  };

  return (
    <>
      <h1>{text}</h1>
      <button type="button" onClick={clickHandler}>My Button</button>
      <Input type="text" value={text} />
    </>
  );
};

export default Test;

We're using Validations object in the <Input />, but this is happens:

Even typing an email valid, Validations object show the label error. The interface to error validation is broken.

We've tested via Quantum's website but some problems it happens.

You can see screenshot below:

When we're using modal on mobile and landscape orientation, body has style overflow: hidden;. This a problem, because the user might to use it as landscape orientation.

At moment, I don't know how to solve this. 😞

Describe the bug

When use small cards, carousel is flicker to render at final cards

Steps to reproduce the behavior

Expected vs actual behavior

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Hi,

We use Quantum in some projects here @catho-lab and recently I've upgraded our quantum package to the latest version and started to experience some strange behaviors.

Troubleshooting the problem it turned out that the culprit was one change of behavior at the onChange event at component. The onChange event no longer sends back the event object, nor the changes.

onChange call at my previous version:

onChange call at master:

Is this intentional?

Right now I'm rolling back to the last version that had this event return pattern, but it's definitely not ideal since I'll be losing all the bug-fixes and improvements of the recent versions.

Thanks.

When I use a styled(Container) I have a issue on execute the test. On run the result is
undefined:20:101: property missing ':'.

const MenuContainer = styled(Container)...

Describe the feature or problem you’d like to solve

We import some fonts in GlobalStyles component, but since styled-components don't load properly inside nextjs <Head />, we end up with the font imports outside the html head element.

I understand that its convenient to ask clients to import <GlobalStyles /> and the everything works, but this is probably preventing the browser from pre-loading the fonts and hurting performance.

If necessary I'm open to create some benchmarks to see how much of a impact we actually have.

Proposed solution

Do not include this imports and instead mention the need to include them in the documentation

There's a new attributes loading implemented in new Chrome's version and can to use in the <img> and <iframe> tags. I've tried to add in the <Card.Thumbnail loading='lazy' .../> but this attribute doesn't show on component "compiled".

Looking for code this component, I saw that use {...props} and it is created using to styled component. I don't that is a problem, because I tried to set others attributes and it didn't work too.

When Quantum was built, the index.js of components doesnt have the import the Card component.

import Alert from './Alert';
import { BREAKPOINTS } from './shared';
import { Container, Row, Col, Hide } from './Grid';
import { Form, Validations } from './Form';
import { TabbedView, Tab } from './TabbedView';
import Badge from './Badge';
import Button from './Button';
import Checkbox from './Checkbox';
import Colors from './Colors';
import Dropdown from './Dropdown';

Should add this line

import Card from './Card';

Col element of Grid System doesnt break line in responsivity in Edge 15.
When we force to reduce the resolution of the browser, the cols doesnt breaks.

Implemented in: Catho components footer

I was wondering about why we don't officially support @material-ui/icons instead of bundling them with the package.

I'm all forward to the idea of supporting an icon lib while not taking away the user's choice.

In this case, Quantum is forcing the user to use a set of icons in a specific way (a font file).

This is result when run test:

Snapshot Summary
› 22 snapshots failed from 9 test suites. Inspect your code changes or run npm test -- -u to update them.
Test Suites: 9 failed, 30 passed, 39 total
Tests: 11 failed, 222 passed, 233 total
Snapshots: 22 failed, 160 passed, 182 total
Time: 10.25s
Ran all test suites.
npm ERR! Test failed. See above for more details.

For example the type Model, don’t recognize the prop Header, HeaderText, Title e etc, generate error below:
Property 'Header' does not exist on type 'typeof Modal'.

To work in the code is necessary ignore TS like this:

{/* // @ts-ignore */}
<Modal.Header>
{/* // @ts-ignore */}
<Modal.HeaderText>

This issue is tested in 4.1.1 version of the Quantum

https://www.loom.com/share/816d5e47452f441e99b7440e35215dd0

Regarding problems with controlling Radio Group component, when using 'value' prop the component behaviors as seen on the video.

The uniqid module that generates ID's dynamically are generating values that do not match between server side and client side.

Components how Modal, Card not allow add prop onClick generating the error below

 No overload matches this call.
  Overload 1 of 2, '(props: Readonly<ModalProps>): Modal', gave the following error.
    Type '{ children: any[]; onClick: (event: MouseEvent<Element, MouseEvent>) => void; onClose: () => void; id: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Modal> & Readonly<ModalProps> & Readonly<{ children?: ReactNode; }>'.
      Property 'onClick' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Modal> & Readonly<ModalProps> & Readonly<{ children?: ReactNode; }>'.
  Overload 2 of 2, '(props: ModalProps, context?: any): Modal', gave the following error.
    Type '{ children: any[]; onClick: (event: MouseEvent<Element, MouseEvent>) => void; onClose: () => void; id: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Modal> & Readonly<ModalProps> & Readonly<{ children?: ReactNode; }>'.
      Property 'onClick' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Modal> & Readonly<ModalProps> & Readonly<{ children?: ReactNode; }>'.

This issue is tested in 4.1.1 version of the Quantum

Recently, Google Fonts now lets you control font loading using the display query parameter. This property improvements to load web fonts faster than normal process.

Information about font-display: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

I've been implementing onClean to <Input /> and the component is inside the <Form /> but the value attribute does not update. I did a test moving the <Input /> out of the <Form /> and value updated.

Could you help us?

as is a syled-component prop and must be available in Quantum components.
RefL https://styled-components.com/docs/api#as-polymorphic-prop

Last commit was 2 years ago. Consider switching to another package like this one:

https://github.com/uNmAnNeR/imaskjs

Describe the feature or problem you’d like to solve

When we're using <Dropdown /> add props helperText, when this props is rendered the span wrapper has ErrorMessage class. It can see in the printscreen.

Proposed solution

Changes class on props helperText

How will it benefit?

If a user did a test case to validations, if user to use <Dropdown /> with props helperText the test case will fails. And, I believe that helperText isn't a error.

Additional context

When rendering the web-font on the page, it takes a few seconds to show the fonts.

Guys, we're using to onChange method in the <Input /> but there is an error with related <Form />

Look it:

I debugged code and I figure out the "bug" here:

I don't know, but there isn't object data in this method onChange, so the ref2 is undefined.

I made a quick test creating a react app using facebook/create-react-app, then I compared the original generated bundle size with a bundle using quantum. It appears that adding a simple Button element from quantum adds more than 70KB (gzipped) to the bundle size.

Steps to reproduce:

1. yarn create react-app my-app && cd my-app
2. yarn build #this should produce a file with ~40KB
3. yarn add @catho/quantum styled-components
4. edit src/App.js and add import Button from '@catho/quantum/Button'; then add a Button to the component (i.e. <Button>Test</Button>)
5. yarn build #now the bundle size should be ~117KB

@catho/watchmen,

I'm using quantum in an personal project and when I started my application, this error is happens:

It will be interesting update README.md with information to install styled-component package because that is a quantum dependency.

The grid was implemented as follows:

<Container>
      <Row>
        <Col xsmall={4} small={3} medium={4}>
          // Any div
        </Col>
        <Col xsmall={4} small={5} medium={8}>
          // Any div
        </Col>
      </Row>
 </Container>

In IE11 it does not work as expected, it does not recognize the columns.
Follow sample images.

How it should work:

In IE11:

Using texts with breaklines the Button's height doesn't change, causing reading problems.

Describe the bug

The type StyledComponent is preventing typescript from throwing errors from undeclared component properties.
The example below show how the property wow is not causing a expected error.

Current behavior:

Expected behavior:

Describe the feature or problem you’d like to solve

When using the component <TabbedView /> with the fluid prop, if the amount of tabs is less than 3 the default size is settled to 33%, is possible to see this behavior in the image bellow:

this static width works fine when the component has 3 or more tabs but it dosen't with less than 3.

. a idéia aqui é que ele esteja com a prop fluid habilitada para ocupar 100% do espaço. Notei que caso haja menos de 3 itens ele não faz esse comportamento como pode ver na imagem abaixo. Eu vi que a navegação está utilizando display: flex; pelo que testei aqui, utilizando flex-basis e flex-grow obteria um resultado semelhante para quantidades a partir de 3 e manteria com a largura 100% quando tiver menos

Proposed solution

On way to solve it is removing the widht: XX% attribute and adding the following attributes to the NavItem element when has the fluid prop enabled:

flex-basis: 33.33%;
flex-grow: 1;

How will it benefit?

with this update the component would look like the image bellow where the nav item buttons will fill the blank space: