strapi / buffet Goto Github PK

I tried using the same component as https://buffetjs.io/storybook/?path=/story/custom--list but i got an error "Uncaught TypeError: Converting circular structure to JSON", i believe the cause of this bug is inside List component from @buffetjs/custom => <React.Fragment key={JSON.stringify(item)}>. the bug is from trying to stringify the jsx element of the icon. After i changed the key it fixed the issue. i hope the team will fix it soon. :D

Describe the bug
As you can see on the gif:

• I can't edit a bigInteger field
• Arrows don't work on Decimal and Float
• (not in the video but it displays 2,4 instead of 2.4 once saved. I would say that the point is more standard than the coma)

Steps to reproduce the behavior

1. Create a content-type (let's say Country)
2. Add 3 fields number with : bigInteger, decimal and float
3. Go to the content-type manager to create a country
4. See the bigInteger input and try the arrows of the 2 other fields
5. You should see the error

Expected behavior

• I can edit bigInteger
• Arrows can increment and decrement the number of decimal and float (I let you decide how to handle the precision)

Screenshots

System

• Node.js version: v12.16.2
• NPM version: 6.14.4
• Strapi version: beta.20.1
• Database: sqlite
• Operating system: macOS

When Select's options prop is an array of objects, and value is an empty string, on change value is "[Object object]" instead of "".

Example:

<Select
  name={name}
  onChange={onChange}
  options={[
    {
      value: '',
      label: '[None]',
    },
    {
      value: 'hello',
      label: 'Hello World',
    }
  ]}
  value={value}
/>

If user selects [None] because option.value is an empty string component will try to return the whole option.toString() resulting in "[Object object]".

The problem is on this line here, it is missing a type check. Empty string is falsy, and this line doesn't check if the type is different from "undefined"
https://github.com/strapi/buffet/blob/master/packages/buffetjs-core/src/components/Select/index.js#L29

I'll be issuing a PR momentarily.

This issue was originally posted to #4932.

Description

In strapi admin, if the input to a text field is longer than the preset maximum length limit, it shows a warning message of This is too high which I feel very confusing. Similar situation to go below minimum length limit where it shows This is too small.

Screenshots for the maximum/minimum length limit set to 5:

Code snippets

In createYupSchema.js, looks like both max and maxLength cases use the same error translatedErrors.max which is This is too high.

case 'max':
case 'maxLength':
    schema = schema.max(validationValue, translatedErrors.max);
    break;
case 'min':
case 'minLength':
    schema = schema.min(validationValue, translatedErrors.min);
    break;

Would it make more sense to use translatedErrors.maxLength, which is This is too long, for the maxLength case? Something like this below:

case 'max':
  schema = schema.max(validationValue, translatedErrors.max);
  break;
case 'maxLength':
  schema = schema.max(validationValue, translatedErrors.maxLength);
  break;
case 'min':
  schema = schema.min(validationValue, translatedErrors.min);
  break;
case 'minLength':
  schema = schema.min(validationValue, translatedErrors.minLength);
  break;

I am a bit confused here. Tried to use ThemeProvider to replace appearance of individual components and it seems that all values are imported absolutely and just injected into the base, instead of being theme values. Am I missing something?

Target:
https://buffetjs.io/storybook/?path=/story/components-table--with-custom-row

Now, 'Row' is not imported

  return (
    <Row>
      <td>
        <p>{id}</p>
      </td>
      <td>
        <p>{firstname}</p>
      </td>
      <td>
        <p>{lastname}</p>
      </td>
      <td>
        <p>{recipe}</p>
      </td>
      <td>
        <p>{restaurant}</p>
      </td>
    </Row>
  );

The Documentation link it's broken

See the documentation at buffetjs.io/storybook for more informations.

I think it's necessary to clear an optional date picker value.

Currently it's not possible to remove a value from a optional date picker field.

A clearing option for optional date picker would be glad :)
For required dates it's fine without.

Good afternoon,

As far as I can see, text and icons are not centered vertically within the button component.

Good library though, love in Strapi, it's silk and professionnal.

Regards

Button Component is currently accepting an icon prop and on true it is adding a + icon.

Instead of having a prop to add a specific icon, can't we support custom icons?

Expected Behavior:

1. Since we are importing all of font awesome fonts, show the fa icon with name string user is passing in.
2. If user is passing in a custom component, (svg or image), render that instead.

From the docs for css API from styled components:

A helper function to generate CSS from a template literal with interpolations. You need to use this if you return a template literal with functions inside an interpolation due to how tagged template literals work in JavaScript.
If you're interpolating a string you do not need to use this, only if you're interpolating a function.

The repository is using these functions in many places where it is unnecessary.
An example from Button

Removing these should come with a performance improvement.

Unable to select 00:00 in the dropdown list of TimePicker if the input field is empty.

Steps to Reproduce:

1. Go to https://buffetjs.io/storybook/?path=/story/components--timepicker
2. Select 00:00 in the dropdown list

Expected Behavior:
It should select 00:00

if I go to https://www.buffetjs.io/, it tells me the certificate for the website is expired.

Based on this line, the Button component styles' has enforced zero padding-top while allowing for any value for padding-bottom resulting to the the buttons all over Strapi looking like this -- more space at the bottom.

Is this intentional?

Hi,

It´s possible to make a mask for input field? Like this: https://www.npmjs.com/package/react-input-mask

Kind regards!

Hello there!

When using the keyboard to enter a specific time ni the timepicker, the timepicker loses focus after the first keypress. This means I cannot enter the exact time I want, instead, I have to resort to selecting a time from the intervals in the dropdown menu using my mouse.

Ideally, I would like the TimePicker to not lose focus after the first keypress so I can input an exact time and also for accessibility reasons.

To reproduce:
https://www.buffetjs.io/storybook/?path=/story/components--timepicker
Input time. It works as desired on the first go. Try to input a time again, using the keyboard.

Browser: Google Chrome 91.0.4472.101
OS: Pop!_OS 20.10 x86_64

On the storybook Toggle Component there is a wrong reference.

import { Toggle } from '@buffet/core'; where it should be import { Toggle } from '@buffetjs/core';

I've made a Pull Request addin the possibility to customize the label of the Toggle Component, if you don't give any information, it will render the default behavior "OFF/ON" label

Why the datepicker component doesn allow a year selection?

It's great that we have Strapi components available to build extensions that seamlessly integrate with Strapi admin UI.

It would be great if there would be an option to add prefix (and potentially useful would be a suffix) to the below component as well.
https://buffetjs.io/storybook/?path=/story/components--inputtext

Currently, it's possible to provide input type (email, password, etc), a prop to provide a custom icon or custom text would be very useful.

Cheers for the continuous awesome work Strapi!

From styled-components docs:

The styled method works perfectly on all of your own or any third-party component, as long as they attach the passed className prop to a DOM element

With Buffet being a styled components based library itself, I expected this to be followed so we can override styles on provided components. But looks like it isn't on most components.

Is this a conscious decision? If yes, how do you suggest that we override specific styles on components?

Seems like SSL certificate for buffetjs.io is expired.

Hello, looking at the complex Table component, I see checkboxes, but I can not find the code that triggers their appearance. Do you have an idea on how to simply add checkboxes on table rows?

I would like put react component (lik <Button>) in cell row.
Or allow label in rowLinks, like:

rowLinks={[
  {
    icon: <FontAwesomeIcon icon={faPencilAlt} />,
    label: "Edit",
  }
]}

Thank you

Describe the bug
With the new datepicker is imposible change the year.

For example, I need to select August 12, 1993. I can't go month by month until 1993. 😅

Expected behavior
An option like the previous date picker.

Screenshots

System

• Node.js version: v12
• NPM version: v6
• Strapi version: v3.0.0-beta.18
• Database: MongoDB
• Operating system: macOS

Hi,

Aren't there any wrapper component like Wrapper which is used (for example) in strapi-plugin-users-permissions to hold the container-fluid class? Or am I missing something?

import styled from 'styled-components';

const Wrapper = styled.div`
  padding: 18px 30px;
`;

export default Wrapper;

Thanks.

Currently the date picker doesn't open on the selected date.

Steps to reproduce

• open the datepicker and select a date that is at least 2 months ahead from the current day
• close the datepicker

Expected results

I expect to see the datepicker opened on the selected date instead of the current month.

Hi

After installing the modules and doing the setup I got:

./node_modules/@buffetjs/styles/src/components/LoadingIndicator/index.js 34:2
Module parse failed: Unexpected token (34:2)
You may need an appropriate loader to handle this file type.
| 
| const LoadingIndicator = ({ small }) => (
>   <Loader small={small}>
|     <div />
|   </Loader>

The code that triggered it was simply:

import {
  Enumeration,
  Table
} from '@buffetjs/core';

I'm not using strapi, I assume the library works standalone, right?

Can you add to the documentation the versions of the packages and the babel + webpack settings for this library to work?

I'm using razzle's default webpack and, if I'm not mistaken, they use the create-react-app boilerplate

I tried to add what you have in your babel.config.js and does not work, with or without it.

Relevant Packages:

    "react": "^16.8.6",
    "@babel/runtime": "7.4.4",
    "@buffetjs/core": "^3.2.0",
    "@buffetjs/hooks": "^3.2.0",
    "@buffetjs/styles": "^3.2.0",
    "prop-types": "^15.7.2",
    "react-dom": "^16.8.6",
    "react-is": "^16.13.1",
    "react-router-dom": "^5.0.0",
    "styled-components": "^5.1.1",

dev:

   "@babel/core": "7.4.5",
   "@babel/preset-env": "7.4.5",

Thanks!

I love the consistency buffet.js brings to strapi, however, the color options are pretty limited. Is there a way we can pass HEX colors directly into the components, such as the component? :(

Describe the bug
There seems to be no clear way to customize date picker : date format, picker language, first day of the week...

Expected behavior
Find a way to customize date format and date localization for picker through a config/locale file

Screenshots

System

• Node.js version: 10.17.0
• NPM version: 6.13.1
• Strapi version: 3.0.1
• Database: MySQL
• Operating system: Windows

Is there any recommended way of setting focus to input fields?
The normal way to imperatively manipulate react components is using refs, but Buffet components in particular InputText do not forward refs.
Maybe a good idea would be to add refs forwarding to certain components?

Describe the bug
With the old datetime data type, the date picker let you "zoom out" from the "month/day" picker to pick year or even decade, which is very useful for the project I'm working on. Having to click dozens or hundreds of times to scroll back to a certain date is a pretty major inconvenience.

Steps to reproduce the behavior
Using latest version of strapi, add a date type field.

Expected behavior
I expected the date data type to have the same type of date picker as the old datetime data type picker.

System

• Node.js version: 10.18
• NPM version: 6.13.4
• Yarn version: 1.21.1
• Strapi version: 18.3
• Database: Postgres
• Operating system: Windows 10

Moving the issue from strapi into this repository

strapi/strapi#4301

The Datetime component is sending an unwanted onChange event during it's first render. Thus changing the initial value to a moment object.

strapi/strapi#7045

Component libraries should provide a way to defined tokens (e.g. blue and red) and then customize functional colors names (e.g. primary and disabled). Currently, if I wanted to switch the colors scheme, I would have to twist my brain around because blue is green and red is turquoise.

You might have forgotton to update your SSL certificate! Just in case you did not notice :)

https://www.buffetjs.io/

I would like to change the default color of the primary to other color, how to do that?

When attempting to enter a date, the date picker's input field gets auto-completed with the day and year.

Steps to Reproduce:

1. Add Date field to a data model
2. Set the type to date
3. Add a new record for that model.
4. TAB into the date field (this may not be necessary but is the step I took)
5. Type 08/ and wait. Field will auto-completed at this point.

Resulting Behavior

The input field gets auto-completed with 01/2001 for a full date of 08/01/2001. Further, if you try to delete the 2001 and pause, it will autocomplete to 2002.

Expected Behavior:

Nothing should happen.

Related Behavior

• Typing 0 into the field after tabbing into it and waiting will result in 01/01/2000
• After the auto-complete to 01/01/2000, deleting the final 0 and pausing will result in an auto-complete of 01/01/0200.

This is very frustrating for any user. Often by the time they find the proper number keys to type in the a full year like 2018, the input will have already auto-completed with an incorrect year of 2001, resulting in a date like 01/01/20012018

A sample can be seen in the animated GIF below. Any pause in typing results in the auto-complete. In this example, I typed 08/ and paused. Later I tried to delete the "bad" data, only to have the field auto-complete. The goal was to type in 08/09/2018.

Hi!
Buffet is actually an amazing component library, great job! Are you planning to make the WYSIWYG editor component on Storybook?