coreui / coreui-free-react-admin-template Goto Github PK

You say its bootstrapped with create-react-app but looks like many libraries are different in both. Can you give a simple method, to start with the latest create-react-app and then add on the libraries to make CoreUi work?

Would be very helpful and not confusing to others.

Thanks.

While processing files with fourseven:scss (for target web.browser):
Scss compiler error: Undefined variable: "$card-border-radius-inner".

looks like in the demo the .card border-radius is set to 0, maybe its because this variable is missing.

by the way: if you are using meteor and fourseven:scss and you have some issues with different errors like this with other variables, you sould check out this issue

Hi I have following code:

                  <Label className="switch switch-text switch-success switch-lg">
                    <Input type="checkbox" className="switch-input" checked={this.props.isViewMode} onChange={this.props.handleInputChange}/>
                    <span className="switch-label" data-on="On" data-off="Off"></span>
                    <span className="switch-handle"></span>

but I would like data-on="View Mode" and data-off="Edit Mode" it appears that switches cannot hold such long words. May I ask is it designed to be so or I am using it in a wrong way?

Hi can you please provide an example on how to add class 'active' to a label when a corresponding radio button is clicked? Below code is taken from CoreUI-React-master/React_Full_Project/src/views/Dashboard.js. Maybe you can show how to show how to set label option1 is active when Day is clicked?

                    <ButtonToolbar className="float-right" aria-label="Toolbar with button groups">
                      <ButtonGroup className="mr-3" data-toggle="buttons" aria-label="First group">
                        <Label htmlFor="option1" className="btn btn-outline-secondary">
                          <Input type="radio" name="options" id="option1"/> Day
                        </Label>
                        <Label htmlFor="option2" className="btn btn-outline-secondary active">
                          <Input type="radio" name="options" id="option2" defaultChecked/> Month
                        </Label>
                        <Label htmlFor="option3" className="btn btn-outline-secondary">
                          <Input type="radio" name="options" id="option3"/> Year
                        </Label>
                      </ButtonGroup>
                    </ButtonToolbar>

They should be as aligned vertically as inline form labels.

I am trying to integrate the React_Starter version with Okta OAuth. Following this guide https://developer.okta.com/quickstart/ . When I try to implement the Router part of it /implicit/callback, I get an error "Cannot GET /implicit/callback" It works on the Okta side as I can get a token from there.

This is my code in index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BorwserRouter as Router, HashRouter, Route, Switch} from 'react-router-dom';
import { Security, SecureRoute, ImplicitCallback } from '@okta/okta-react';
import Home from './Home'

const config = {
    issuer: 'https://dev-182856.oktapreview.com/oauth2/default',
    redirectUri: window.location.origin + '/implicit/callback',
    clientId: '0oacu10ttrqSGtLTX0h7'
};

ReactDOM.render((
    <HashRouter>
        <Security issuer={config.issuer}
                  client_id={config.clientId}
                  redirect_uri={config.redirectUri} >
            <Route path='/' exact={true} component={Home}/>
            <Route path='/implicit/callback' component={ImplicitCallback} />
        </Security>
    </HashRouter>
), document.getElementById('root'));

This is the content for Home.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { withAuth } from '@okta/okta-react';

export default withAuth(class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { authenticated: null };
        this.checkAuthentication = this.checkAuthentication.bind(this);
        this.checkAuthentication();
    }

    async checkAuthentication() {
        const authenticated = await this.props.auth.isAuthenticated();
        if (authenticated !== this.state.authenticated) {
            this.setState({ authenticated });
        }
    }

    componentDidUpdate() {
        console.log(this.state.authenticated);
        this.checkAuthentication();
    }

    render() {
        if (this.state.authenticated === null) return null;
        return this.state.authenticated ?
            <button onClick={this.props.auth.logout}>Logout</button> :
            <button onClick={this.props.auth.login}>Login</button>;
    }
});

Using Router instead of HashRouter gives out an error and doesn't work.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

With HashRouter I can see the Login button, and clicking on it authenticated with Okta and returns a url with token on http://localhost:8080/implicit/callback#id_token= where it gives out an error "Cannot GET /implicit/callback"

I have a feeling its because of HashRouter, as it works with using BrowserRouter on the standard create-react-app example.

How can I edit webpack.config to support lazy loading ? I have tried this

vendor: ['react','react-dom'],  
      index: [  
        SRC_DIR + '/index.js',  
        SRC_DIR + '/Dashboard/Dashboard.js',  
        SRC_DIR + '/Components/Buttons/Buttons.js',  
        SRC_DIR + '/Components/Cards/Cards.js',  
        SRC_DIR + '/Components/Forms/Forms.js',  
        SRC_DIR + '/Components/Modals/Modals.js',  
        SRC_DIR + '/Components/SocialButtons/SocialButtons.js',  
        SRC_DIR + '/Components/Switches/Switches.js',  
        SRC_DIR + '/Components/Tables/Tables.js',  
        SRC_DIR + '/Components/Tabs/Tabs.js',  
      ]  

and I got vendor.bundle.js in the build folder but the index.bundle.js size didn't change and there were no chunk files.

my apologizes, I am new to webpack

I am not all that experienced with webpack but have tried various methods to avoiding the

Uncaught ReferenceError: regeneratorRuntime is not defined

when using async await syntax. I tried several solutions such as modifying webpack and using Facebook's regenerator-runtime package, but for whatever reason neither of them worked.

Can someone point me in the right direction to get this working please?

EDIT: I figured out the issue and wrote a quick post on how to solve it https://zachgoll.github.io/blog/2018/Async-Await-and-Regenerator-Runtime-Tutorial/

can you integrate spinner component

Hi mrholek ,

I am having issues with the run build with the app in react. it's not able to compile 'npm run build' just stuck at last step.

https://stackoverflow.com/questions/48581536/webpack-npm-run-build-when-stall-or-silence-after-2-hidden-module

C here for more info

thanks.

I purchased the pro react version and I believe this template was created with the react-create-app. How do I enable linting? Is this not built in?

Thanks...

Hello,
There are some problems on FontAwesome.

When click on :

SideMenu: Icons->FontAwesome

nothing happen and content area of application freeze.

I have missed something?

thank you in advance

Perhaps it should be http://coreui.io/demo/Ajax_Demo/#main.html

This is a question. I buyed standard pro license to support your good work.
I saw updates in the demos from your site. When I will receive an update ?

Hi, with following code:

        <Table striped hover>
            <thead>
                <tr>
                    <th>Location</th>
                    <th>Customer </th>
                </tr>
            </thead>
        </Table>

table header looks good

But when <i> is added to <th> element:

    <Table striped hover>
        <thead>
            <tr>
                <th>Location <i className="fa fa-sort fa-lg mt-4"></i></th>
                <th>Customer <i className="fa fa-sort fa-lg mt-4"></i></th>
            </tr>
        </thead>
    </Table>

table header looks to start align bottom.

Can you please confirm if this is expected behavior or a bug?

I've seen like this project is missing the bootstrap folder inside scss folder. Because when using any sass tool for pre-processing styles, there are many undefined variables errors. I have seen that in the old repo, you have the bootstrap folder that declared a lot of these variables (https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template/blob/master/React_Full_Project/scss/bootstrap/). When I copied this folder into current project and import it in the _variables.scss, then it works correctly. Is it correct finding or you guys go with another approach?
I do it at https://github.com/crm-core/crmcore/blob/master/src/hosts/CRMCore.ClientApp/src/styles/style.scss. If you guys are changing the approach, please let me know. Thank you very much.
@mrholek @tungphuong

Hi, I just started to to use coreui and encounter this issue - when I changed Header.js from

  render() {
    return (
      <header className="app-header navbar">
        <NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>&#9776;</NavbarToggler>
        <NavbarBrand href="#"></NavbarBrand>
        <NavbarToggler className="d-md-down-none mr-auto" onClick={this.sidebarToggle}>&#9776;</NavbarToggler>
      </header>
    )
  }

to

  render() {
    return (
      <header className="app-header navbar navbar-light bg-success">
        <NavbarToggler className="d-lg-none bg-success" onClick={this.mobileSidebarToggle}>&#9776;</NavbarToggler>
        <NavbarBrand href="#"></NavbarBrand>
        <NavbarToggler className="d-md-down-none mr-auto bg-success" onClick={this.sidebarToggle}>&#9776;</NavbarToggler>
      </header>
    )
  }

I found that the navbar itself changed to green which is expected but the background of logo is still white although the logo picture itself is a PNG file with transparent background. Can you please tell me how to make the logo background changes to same as navbar?

hi how i can add server side rendering ?

The sidebar icon of the current active page vanishes on hover.
This can be easily fixed with:

--- a/React_Full_Project/scss/core/_sidebar.scss
+++ b/React_Full_Project/scss/core/_sidebar.scss
@@ -114,7 +114,7 @@
           @include borders($sidebar-nav-link-hover-borders);

           i {
-            color: $sidebar-nav-link-hover-icon-color;
+            color: $sidebar-nav-link-hover-icon-color !important;
           }
         }

I enabled rtl support : http://coreui.io/docs/getting-started/rtl-support/
Unfortunately it seems that rtl is not fully supported, please check out those pictures:

Am I missing something?

For those who want to change default host and ip when starting the server, here is what i did (i'm not expert so please correct if needed).
In webpack.config.js i added :

• Before module.exports:

const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3000;

const METADATA = Object.assign({}, {
    host: HOST,
    port: PORT,
    PUBLIC: process.env.PUBLIC_DEV || HOST + ':' + PORT
});

• In the devServer section, add :

        port: METADATA.port,
        host: METADATA.host,
        public: METADATA.PUBLIC,

Then you can call the server like this :

HOST='192.168.10.160' npm start

Hello!

Thank you for all your work with this project. I am trying to understand it more thoroughly. Why does every React component require it's own folder and package.json?

async await I want to write babel. How to set up webpack?

width problem

Thanks for very nice template here. I just wondering why in url have '#' after base uri? is it can be remove ?

Hi I have following code:

        <Form inline>
            <FormGroup>
                <Label htmlFor="file-upload" role="button" className="btn btn-primary" disabled={props.isViewMode}><i className="fa fa-upload"></i> Upload</Label>
                <Input type="file" style={{display: 'none'}} id="file-upload" accept="image/*" onChange={props.handleFileUpload} disabled={props.isViewMode} />
            </FormGroup>
        </Form>

The label and input are functionally enabled and disabled as isViewMode switches but the Label always looks like enabled. Can you please tell me the correct syntax of disable a label?

when I tried to run 'npm install' then showing these logs

`[email protected] install /var/www/nodejs/Admin-Panel/node_modules/node-sass
node scripts/install.js

Unable to save binary /var/www/nodejs/Admin-Panel/node_modules/node-sass/vendor/linux-x64-57 : { Error: EACCES: permission denied, mkdir ‘/var/www/nodejs/Admin-Panel/node_modules/node-sass/vendor’
at Object.fs.mkdirSync (fs.js:885:18)
at sync (/var/www/nodejs/Admin-Panel/node_modules/mkdirp/index.js:71:13)
at Function.sync (/var/www/nodejs/Admin-Panel/node_modules/mkdirp/index.js:77:24)
at checkAndDownloadBinary (/var/www/nodejs/Admin-Panel/node_modules/node-sass/scripts/install.js:111:11)
at Object. (/var/www/nodejs/Admin-Panel/node_modules/node-sass/scripts/install.js:154:1)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
errno: -13,
code: ‘EACCES’,
syscall: ‘mkdir’,
path: ‘/var/www/nodejs/Admin-Panel/node_modules/node-sass/vendor’ }

[email protected] postinstall /var/www/nodejs/Admin-Panel/node_modules/node-sass
node scripts/build.js

Building: /usr/local/bin/node /var/www/nodejs/Admin-Panel/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [ ‘/usr/local/bin/node’,
gyp verb cli ‘/var/www/nodejs/Admin-Panel/node_modules/node-gyp/bin/node-gyp.js’,
gyp verb cli ‘rebuild’,
gyp verb cli ‘--verbose’,
gyp verb cli ‘--libsass_ext=‘,
gyp verb cli ‘--libsass_cflags=‘,
gyp verb cli ‘--libsass_ldflags=’,
Build failed with error code: 1

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.`

Hi, I am currently working with core-ui pro version, using react-js. I would like to know, how can I set that items/parents (that have some other links in them) to be opened defaultly. For example, in your demo http://coreui.io/demo/pro/Ajax_Demo/#main.html this would mean, that i can set for example Components ,Icons and Widgets to be opened by default (their children links are shown, in case of Components parent link it would be Buttons,Cards,Modals etc.).
Thank you in andvance.

We're trying to build an admin application using your ui kit (because its awesome), but we need it to integrate with electron-react-boilerplate.
We have been working on this integration for about a whole week now, but still can't get it to work properly.

Could you help us?

Hello

I just purchase the CoreUI PRO and looking for form validation. They are available in other package (Vue JS and Jquery) but I don't see them in React. Would you please support for form validation in React version of CoreUI?

I'd like to know how do i know how to edit / manipulate the react file
for instance, the sidebar. is there any available documentation to know which file to change and what kind of property to use?

I can run this project on web browser by enter localhost:8080 but i can't connect my mobile to the reactjs website.
I'm just a newbie of reactjs. Please tell me why ???

According to the README.md in each project, the app should start on port 3000 when you run npm start, but it actually starts on port 8080.

I'd like to implement the Carousel in your react version. Would you be able to provide the scss file, and all relative material that could assist in using your carousel.

I tried to run the React_Full_Project and achieved it but I had to install the following modules manually on the top of the one listed in package.json:

• classnames
• prop-types
• node-sass

I cannot get past this error on first execution....

ERROR in ./src/components/Breadcrumb/Breadcrumb.js
Module build failed: SyntaxError: Unexpected token (21:26)

I have copied the React_Starter dir to ~/coreiu, cd into it, run npm install, then npm start
then above error results.

Not able to execute

Hi, I set html direction to rtl for a right to left layout. But in mobile version I have this problem :

• the sidebar is not closed by default
• the additional right padding for dashboard menu link
• the logo is not at right place and this have a border-bottom

Consider I downloaded the latest version and i using Reactjs

Hi may i ask how do I update to latest version or pro version from existing project? it doesn't seem to documented anywhere

Hi, trying to upgrade to Webpack 4, have you tried to do it with Core UI?

The React CoreUI.io project is built as scaffolding to start a new app (not as an importable React component library that you can add to an existing project). There will likely be high-value changes made to the CoreUI project in the future that others want to incorporate (e.g bug fixes and support for Twitter Bootstrap 4 final release), so we don't want to use CoreUI.io as merely scaffolding, as this will make upgrades fragile and time consuming.

Ideally, we would use CoreUI as any other JavaScript dependency and install it via NPM as this makes upgrades to new versions more straight-forward and predictable. There is an official version of CoreUI deployed to NPM that can be added as a dependency to an existing project, but there are problems with the official NPM package:

1. The version deployed to NPM is not current (1.0.0-alpha.6 versus 1.0.3 in Github)
2. The project was never created to work as an NPM package (i.e it doesn't have a prepublish lifecycle script defined to compile components).

This rules out using the official NPM package, so we need a way to easily convert the most recent version from Github into a working NPM package that we can add as a dependency to our project. This requires the following steps:

1. Checkout the latest CoreUI codebase from Github
2. Add a prepublish lifecycle script to package.json
3. Deploy the NPM package to our private NPM repository
4. Add this private package as a dependency to our project
5. Import all the compiled CSS in our main App.js
6. Import components on an as-needed basis

This is not very convenient. Is support for a working NPM package on the horizon? If not, would you consider a pull-request that achieves this?

Hi,
How can i add a search field in the datatable provided that filters content as you type a search phrase?

Thank you.

First off, even though this is a complaint, I really love this theme! It's saved me alot of time on the UI.

The issue is minimizing the sidebar (not hide it) and shrinking the height of the browser viewport causes the minimize arrow to lose "responsiveness" to the point where it is no longer visible to restore the sidebar to its maximized state. Furthermore, under a certain height you cannot scroll to view other menu items (minimized state only).

This is quite disruptive because some mobile devices cannot function properly and delivers frustrating UX. I've tried looking into the cause but not entirely sure what's going on... running version 1.0.5 of CoreUI.

The expected behavior, at least for me, would be to have the minimize arrow ALWAYS on the bottom, and then the overflowY set to scroll, so you can still view all the nav items as you would in the maximized view.

Minimized:

Shrink Browser Height (now minimizer icon is gone and have to make browser even taller than before to view minimize button):

Cuts off other menu items, no scroll:

How do you add a breadcrumb for a url like /resource/:id

How to download free template or the template is available only for the paid users?

I try the demo in my workstation and all working fine except for Modals.

if I click buttons the application freeze and nothing happen.

In console i read this message:

Warning: Unknown props onExited, appear, enter, exit on

tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in div (created by Fade)
in Fade
in div (created by TransitionGroup)
in TransitionGroup

There is something I missed in project setup or some dependency changed?

Thank you in advance

Hi,

I'm evaluating CoreUI, most likely the Pro extended licence, and I really like the approach you've taken over the majority theme forest templates. However was a little disappointed to see no automated tests for the React components.

Do you guys have any plans of adding tests or are they available as part of the Pro version?

Thanks a lot,

Alex

I was trying to add the transform-class-properties plugin to the .babelrc file, but webpack kept telling me that it was missing when I tried to run my app in the browser.

After a lot of head scratching and Googling, I realised that webpack was actually ignoring the .babelrc file in favour of the babel-loader options defined in the webpack.config.js file, i.e:

    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['react', 'env']
            }
          }
        },

This needs to be one or the other, doesn't it? If we're not using the .babelrc file, then why is one supplied in the set up?

I was able to work around the issue by removing the presets from the webpack.config.js file and setting the babelrc option there to true, like so:

    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              cacheDirectory: true,
              babelrc: true
            }
          }
        },

Webpack then picked up the transform-class-properties plugin from my .babelrc file.

[email protected] start E:\Core Ui\CoreUI-Free-Bootstrap-Admin-Template\React_Full_Project

webpack-dev-server --env.dev --open --hot --progress --colors --inline

'webpack-dev-server' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.11.3
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: webpack-dev-server --env.dev --open --hot --progress --colors --inline
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'webpack-dev-server --env.dev --open --hot --progress --colors --inline'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the coreui-react package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --env.dev --open --hot --progress --colors --inline
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs coreui-react
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls coreui-react
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! E:\Core Ui\CoreUI-Free-Bootstrap-Admin-Template\React_Full_Project\npm-debug.log