strapi / buffet

Buffet.js — React Components Library made with styled-components

Open-source headless CMS, self-hosted or Cloud you’re in control.

The leading open-source headless CMS, 100% JavaScript/TypeScript, flexible and fully customizable.

Cloud · Try live demo · Strapi 5 (coming soon)

Strapi Community Edition is a free and open-source headless CMS enabling you to manage any content, anywhere.

• Self-hosted or Cloud: You can host and scale Strapi projects the way you want. You can save time by deploying to Strapi Cloud or deploy to the hosting platform you want**: AWS, Azure, Google Cloud, DigitalOcean.
• Modern Admin Panel: Elegant, entirely customizable and a fully extensible admin panel.
• Multi-database support: You can choose the database you prefer: PostgreSQL, MySQL, MariaDB, and SQLite.
• Customizable: You can quickly build your logic by fully customizing APIs, routes, or plugins to fit your needs perfectly.
• Blazing Fast and Robust: Built on top of Node.js and TypeScript, Strapi delivers reliable and solid performance.
• Front-end Agnostic: Use any front-end framework (React, Next.js, Vue, Angular, etc.), mobile apps or even IoT.
• Secure by default: Reusable policies, CORS, CSP, P3P, Xframe, XSS, and more.
• Powerful CLI: Scaffold projects and APIs on the fly.

Getting Started

Read the Getting Started tutorial or follow the steps below:

⏳ Installation

Install Strapi with this Quickstart command to create a Strapi project instantly:

• (Use yarn to install the Strapi project (recommended). Install yarn with these docs.)

yarn create strapi-app my-project --quickstart

or

• (Use npm/npx to install the Strapi project.)

npx create-strapi-app my-project --quickstart

This command generates a brand new project with the default features (authentication, permissions, content management, content type builder & file upload). The Quickstart command installs Strapi using a SQLite database which is used for prototyping in development.

Enjoy 🎉

🖐 Requirements

Complete installation requirements can be found in the documentation under Installation Requirements.

Supported operating systems:

• Ubuntu LTS/Debian 9.x
• CentOS/RHEL 8
• macOS Mojave
• Windows 10
• Docker

(Please note that Strapi may work on other operating systems, but these are not tested nor officially supported at this time.)

Node:

Strapi only supports maintenance and LTS versions of Node.js. Please refer to the Node.js release schedule for more information. NPM versions installed by default with Node.js are supported. Generally it's recommended to use yarn over npm where possible.

Strapi Version	Recommended	Minimum
4.14.5 and up	20.x	18.x
4.11.0 and up	18.x	16.x
4.3.9 to 4.10.x	18.x	14.x
4.0.x to 4.3.8	16.x	14.x

Database:

Database	Recommended	Minimum
MySQL	8.0	5.7.8
MariaDB	10.6	10.3
PostgreSQL	14.0	11.0
SQLite	3	3

We recommend always using the latest version of Strapi stable to start your new projects.

Features

• Content Types Builder: Build the most flexible publishing experience for your content managers, by giving them the freedom to create any page on the go with fields, components and Dynamic Zones.
• Media Library: Upload your images, videos, audio or documents to the media library. Easily find the right asset, edit and reuse it.
• Internationalization: The Internationalization (i18n) plugin allows Strapi users to create, manage and distribute localized content in different languages, called "locales"
• Role Based Access Control: Create an unlimited number of custom roles and permissions for admin and end users.
• GraphQL or REST: Consume the API using REST or GraphQL

You can unlock additional features such as SSO, Audit Logs, Review Workflows in Strapi Cloud or Strapi Enterprise.

See more on our website.

Contributing

Please read our Contributing Guide before submitting a Pull Request to the project.

Community support

For general help using Strapi, please refer to the official Strapi documentation. For additional help, you can use one of these channels to ask a question:

• Discord (For live discussion with the Community and Strapi team)
• GitHub (Bug reports, Contributions)
• Community Forum (Questions and Discussions)
• Feedback section (Roadmap, Feature requests)
• Twitter (Get the news fast)
• Facebook
• YouTube Channel (Learn from Video Tutorials)

Migration

Follow our migration guides on the documentation to keep your projects up-to-date.

Roadmap

Check out our roadmap to get informed of the latest features released and the upcoming ones. You may also give us insights and vote for a specific feature.

Documentation

See our dedicated repository for the Strapi documentation, or view our documentation live:

• Developer docs
• User guide

Try live demo

See for yourself what's under the hood by getting access to a hosted Strapi project with sample data.

License

See the LICENSE file for licensing information.

buffet's Issues

"Date" type picker doesn't let you pick year/decade

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

Website is not secure

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

https://www.buffetjs.io/

Documentation link broken

The Documentation link it's broken

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

Date Picker auto-completes with wrong date

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.

SSL Certificate from homepage seems expired

Seems like SSL certificate for buffetjs.io is expired.

Feature Request: Prefix/Suffix to InputText

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!

You may need an appropriate loader to handle this file type: Module parse failed: Unexpected token (34:2)

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!

Use functional color names

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.

Datetime is sending onChange event on initial render

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

Docs site needs new certificate

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

Checkbox in table

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?

Wrapper Component

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.

Select doesn't accept empty string as a value in the option object

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.

CustumTable of Sample Page doesnot work

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>
  );

Toggle label customization

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

Text and icons are not vertically centered in button component

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

[FR] date picker clearing

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.

Not passing className prop to the underlying DOM element

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?

Input number in Content-Type Manager is broken for bigInteger, decimal and float

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

Simple question: how to do theming for this library?

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

Can't select year in input year

Why the datepicker component doesn allow a year selection?

Feature request: WYSIWYG Editor component

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

Allow custom icons in button component

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.

storybook site ssl certification expired

Unnecessary use of css function

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.

@buffetjs/styles should use theme provider

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?

TimePicker blurs on first keypress

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

The DatePicker should open the calendar on the selected date

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.

The new date picker doesn't allow change of year

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

Request: Allow passing custom HEX color instead of just 'primary', 'secondary', 'success', to components.

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? :(

table rows with react element in cell

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

Confusing character limit warning message

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;

Toggle Bug

On the storybook Toggle Component there is a wrong reference.

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

Is the Button component supposed to have uneven top/bottom padding?

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?

Custom List cannot accept jsx element as icon

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

Date picker not localized

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

Use proper title case

Moving the issue from strapi into this repository

strapi/strapi#4301

TimePicker cannot select 00:00 if input field is empty

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

Imperatively set focus to input

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?

How to put the mask in input field? For phone or zip code?

Hi,

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

Kind regards!