mcmakler / components Goto Github PK
View Code? Open in Web Editor NEWLibrary of reusable components utilized internally at McMakler GmbH
Home Page: https://mcmakler.github.io/components
License: MIT License
Library of reusable components utilized internally at McMakler GmbH
Home Page: https://mcmakler.github.io/components
License: MIT License
It will be good to add yarn workspaces with lerna
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
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
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.
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
The footer has two UI issues:
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;
}
}
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
Why make your consumers install Lerna globally? Consider an alternative:
bootstrap
under scripts
to package.json
that calls lerna bootstrap
internallyThen, yarn bootstrap
will run Lerna from ./node_modules/.bin
and it removes the need for the user to potentially unnecessarily install Lerna globally.
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
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.