mcmakler / components Goto Github PK

Getting the following warnings when using the DefinitionList Component

index.js:2178 Warning: Failed prop type: Invalid prop `label` supplied to `DefinitionData`. in DefinitionData (created by DefinitionList) in DefinitionList (created by ExposeInfoTable) in section (created by ExposeInfoTable) in ExposeInfoTable (created by ExposeSinglePage) in section (created by ExposeSinglePage) in div (created by ExposeSinglePage) in article (created by ExposeSinglePage) in div (created by ExposeSinglePage) in main (created by Layout) in div (created by Layout) in Layout (created by ExposeSinglePage) in ExposeSinglePage (created by withRouter(ExposeSinglePage)) in withRouter(ExposeSinglePage) (created by App) in Container (created by App) in App

Warning: Each child in an array or iterator should have a unique "key" prop.

Check the render method of `DefinitionList`. See https://fb.me/react-warning-keys for more information.
    in dl (created by DefinitionList)
    in DefinitionList (created by ExposeInfoTable)
    in section (created by ExposeInfoTable)
    in ExposeInfoTable (created by ExposeSinglePage)
    in section (created by ExposeSinglePage)
    in div (created by ExposeSinglePage)
    in article (created by ExposeSinglePage)
    in div (created by ExposeSinglePage)
    in main (created by Layout)
    in div (created by Layout)
    in Layout (created by ExposeSinglePage)
    in ExposeSinglePage (created by withRouter(ExposeSinglePage))
    in withRouter(ExposeSinglePage) (created by App)
    in Container (created by App)
    in App

Currently, to have a definition list we must do something like this

<DefinitionList>
  {
    props.content.map((item) => {
      if (item.value) {
        return [
          <DefinitionTerm key={item.label}>
            {item.label}
          </DefinitionTerm>,
          <DefinitionData key={item.value}>
            {item.value}
          </DefinitionData>,
        ];
      }
      return null;
    })
  }
</DefinitionList>

Wouldn't it be better to have it be like this

const DefinitionList = ({ items }) => (
  <>
     items.map(( { term, data} ) => (
       <>
         <DefinitionTerm label={term} key={term} />
         <DefinitionData label={data} key={data} />
       </>
     );
  </>
);

<DefinitionList items={[
  { term: 'Foo', data: 'foo' },
  { term: 'Bar', data: 'bar' },
]} />

NOTE This will also require a rewrite of DefinitionTerm and DefinitionData to accept the text as a property and not as a child

Status Quo:
At the moment we use generate different builds to support next js projects as nested node modules are not compiled by next js.

Solution:
We can use this next-plugin-transpile-modules

It will be good to add yarn workspaces with lerna

What? On build of project that uses mcmakler-components-react as a dependency will throw a build error when importing font assets for the Gallery component.

Error stack

ERROR in ./node_modules/mcmakler-components-react/lib/components/Gallery/assets/fontello.woff2?45416751
    Module build failed: Validation Error
    
    URL Loader Invalid Options
    
    options.limit should be number
    
     @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/mcmakler-components-react/lib/components/Gallery/Gallery.scss 6:10765-10808

Possible Solution
webpack-contrib/sass-loader#411 (comment)

When having more than one radio button in the group, selecting any option other than the first one and then clicking on any label will always select the first radio input.

This is due to the fact that the default id of the radio buttons is always radio_0. code

It seems that the RadioButton was implemented with RadioGroup in mind. The proposed solution for this would be to add a higher level component, RadioGroup, to encapsulate the RadioButton.

Example:

const RadioGroup = ( { buttons }) => (
  <>
    { buttons.map((button, index) => <RadioButton {...button} id={'radio_' + index} />) }
  </>
); 

<RadioGroup buttons={[
  { value: 'Foo', labelText: 'Foo Label', onChange: () => { // do something } },
  { value: 'Bar', labelText: 'Bar Label', onChange: () => { // do something } },
]} />

The RadioGroup component will render each button as a RadioButton with a unique index as the id prop for RadioButton.

Edit

Since radio buttons can only be selected one at a time, maybe this might be a better option to avoid repetition of code.

const RadioGroup = ( { buttons, onChange } ) => (
  <>
    {
       buttons.map((button, index) => (
         <RadioButton {...button} id={'radio_' + index} onChange={onChange} />
       ))
    }
  </>
); 

<RadioGroup
  buttons={[
    { value: 'Foo', labelText: 'Foo Label' },
    { value: 'Bar', labelText: 'Bar Label' },
  ]}
  onChange={ () => { // do something } }
/>

Another thing we also need to keep in mind is how to deal with the possibility of multiple instances of RadioGroup in one form, simply using the index as the RadioButton identifier might not be enough, here's an example.

NPM doesn't have the nextjs folder in the package.

The footer has two UI issues:

1. It has extra spacing at the bottom

2. The badges box has top and bottom extra spacings

To fix this, find following the code:

.footer .all-rights-reserved {
  padding: 0 20px;
}

@include respond-to('tablet') {
  .footer .imprint {
    padding: 20px!important;
  }

  .footer .imprint .column {
    margin: 0!important;
  }

  .footer__card__badges {
    padding-top: 8px; // this should be a grid variable
    padding-bottom: 8px;
  }
}

@include respond-to('desktop') {
  .footer__card__header {
    margin-left: 0;
  }
}

Why make your consumers install Lerna globally? Consider an alternative:

• Have lerna as a project's devDependency
• Add bootstrap under scripts to package.json that calls lerna bootstrap internally

Then, yarn bootstrap will run Lerna from ./node_modules/.bin and it removes the need for the user to potentially unnecessarily install Lerna globally.

Hey *,

issue description: storybook server is running via npm run serve and a demo of the react component is showing in storybook demo.
i am changing now the styles under components-style/src/components

when i save the changes its not updating / recompiling the current changes.

workaround atm with nodemon:
nodemon --watch src --exec "npm run build" -e scss

Proposed folder structure:

index.js
src/
  index.js
  -  RadioButton/
     - RadioButton.js
     - RadioButton.spec.js
     - RadioButton.scss
     - index.js

index.js

import { RadioButton } from './RadioButton';

export default RadioButton;

Used as:

import RadioButton from 'mcmakler-components-react';

we have the main source of package set at dist/index (package.json) so we don't have to do mcmakler-components-react/dist