olton/metro4-react

Metro 4 for ReactJS. Build impressive responsive, mobile-first projects on the web with the first front-end component library in Metro Style and not only.

Metro 4 Components Library for React

Sleek, intuitive, and powerful front-end framework for faster and easier web development. Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style.

v0.1.4

Status

Releases

---

Donation

---

Awesome project backers

• Tobias Ehrig

---

You can use boilerplate template for React project with Metro 4.

metro4-react's Issues

Error in CRA with 0.1.3, can't compile experimental syntax.

Adding metro4-react to a create-react-app seems to fail like so

SyntaxError: C:\Users\kg\code\metro-example\node_modules\metro4-react\src\components\tag-input\tag-input.js: Support for the experimental syntax 'classProperties' isn't currently enabled (30:14):

  28 |     }
  29 | 
> 30 |     onChange = tags => {
     |              ^
  31 |         this.props.onChange(tags);
  32 |     };
  33 | 

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

Just like in this issue #20, I suggest avoiding using experimental syntax or transpiling down to ES5 for npm releases.

Add Splitter to metro4-react

I was looking for a framework with a splitter and not many framework has this, I didn't fine anyone else had it. Unfortunately this isn't in the react package, is this something you would consider to add from Metro4?

Thanks for a great component library

Module not found: Can't resolve 'metro4-react'

my code like this

import React from 'react';
import logo from './logo.svg';

import {Grid,Row,Cell,Input} from 'metro4-react' ;

then resulting error

Failed to compile
./src/App.js
Module not found: Can't resolve 'metro4-react' in 'D:\react_test\m4_react\src'

please help me,
thanks

Some page in documentation (guide) not found.

Some page in documentation (guide) not found in form element.

from switch
https://react.metroui.org.ua/guide/switch

to textarea
https://react.metroui.org.ua/guide/textarea

Source to the demo page.

It's possible I'm just missing it, but since the documentation isn't complete, is the source available for the demo page:
https://react.metroui.org.ua/demo

I'm about ready to give up, but I liked Metro 3 when using angular...

SyntaxError

My Code:
import {Button} from 'metro4-react'; <Button />
Actual:
/node_modules/metro4-react/src/components/tag-input/tag-input.js
SyntaxError: /home/marat/Code/website/node_modules/metro4-react/src/components/tag-input/tag-input.js: Unexpected token (142:12)

wrong npm install command on guide page

on the guide page https://react.metroui.org.ua/guide, the npm install command npm install metro4-react is not working.

Experimental syntax breaks CRA applications

Hello, I've been trying to get metro4-react working with a CRA app, and I've run across an issue where usage of experimental babel syntax is causing issues.

Failed to compile.

./node_modules/metro4-react/src/components/collapse/collapse.jsx 10:24
Module parse failed: Unexpected token (10:24)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| export default class Collapse extends React.Component {
>     static defaultProps = {
|         className: "collapse-css-transition",
|         style: {}

The issue I've had is exactly the same as material-components/material-components-web-react#107, so I won't repeat the conversation. :)

The issue is https://github.com/olton/Metro4-React/blob/master/.babelrc#L6, which cannot be enabled in a CRA without ejecting the app entirely.

Suggested solutions are:

• Don't use any experimental js syntax
• Transpile ES5 when distributing to npm. (example https://github.com/material-components/material-components-web-react/pull/108/files)

Sorry I'm not really proficient enough to give much more specific suggestions.

Появление диалога, избавиться от "прилетания"

Сейчас диалоговіе окна віпадают из верхней границі страниці
https://github.com/olton/Metro4-React/blob/master/src/components/dialog/dialog.jsx#L42
нужно, чтоб просто появлялись как в основной версии метро

Failed to compile when requare any parts

I use command > npm install metro4-react
and then:
import {Button} from "metro4-react";

import React, { Component } from 'react'
import {Button} from "metro4-react";

export default class App extends Component {
    render() {
        return (
            <div>
              <Button>Button</Button>
            </div>
        )
    }
}

How can I solve the following problem

Failed to compile
./node_modules/metro4-react/src/components/tag-input/tag-input.js
SyntaxError: E:\WWW\gitSearch\git-search\node_modules\metro4-react\src\components\tag-input\tag-input.js: Support for the experimental syntax 'jsx' isn't currently enabled (142:13):

140 |
141 | return (

142 | <div className={tag-input ${focus ? 'focused' : ''} ${staticMode ? 'static-mode' : ''}} ref={this.component}>
| ^
143 | {tags.map( (tag, index) => {
144 | return (
145 | <Tag

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
This error occurred during the build time and cannot be dismissed.Failed to compile
./node_modules/metro4-react/src/components/tag-input/tag-input.js
SyntaxError: E:\WWW\gitSearch\git-search\node_modules\metro4-react\src\components\tag-input\tag-input.js: Support for the experimental syntax 'jsx' isn't currently enabled (142:13):

140 |
141 | return (

142 | <div className={tag-input ${focus ? 'focused' : ''} ${staticMode ? 'static-mode' : ''}} ref={this.component}>
| ^
143 | {tags.map( (tag, index) => {
144 | return (
145 | <Tag

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
This error occurred during the build time and cannot be dismissed.

Tile component missing

Requesting to add Tile component as it is pretty important one. I feel metro design is incomplete with tile component.

Unable to find modules in the Electron/ React app

Hello,

I tried to compile it with Electron/React/Webpack and it fails after right after start

Compiled with problems:X
Error:
Module not found: Error: Can't resolve './src/components/container/container' in 'C:\electron\electron_react_test1\test1\node_modules\metro4-react'
Error:
Module not found: Error: Can't resolve './src/components/accordion/accordion' in 'C:\electron\electron_react_test1\test1\node_modules\metro4-react'

Metro4-React with Parcel

Hi I am trying to use Parcel with Metro4-React and I get the following build error when I try and import any Metro4-React component

@parcel/transformer-js: Expected ',', got 'className'

/Users/[email protected]/projects/OP2/node_modules/metro4-react/src/components/accordion/accordion.jsx:21:18
20 | return (

21 | <div className={'frame ' + (open ? 'active' : '') + ' ' + clsFrame}>
| ^^^^^^^^^
22 | <div className={'heading ' + clsFrameHeading} onClick={this.onHeadingClick}>{title}
23 |

Is it possible to use Parcel with Metro4-React?
Is there any specific configuration I need to add to either Parcel or elswhere