0wczar / airframe-react Goto Github PK

View Code? Open in Web Editor NEW

3.9K 91.0 702.0 7.19 MB

Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webkom.co/react/airframe

License: MIT License

JavaScript 97.31% CSS 0.01% HTML 0.13% SCSS 2.56%

react airframe reactjs bootstrap boostrap4 admin admin-dashboard ui-components react-components dashboard

airframe-react's Introduction

Note Version HTML/CSS is available here: https://github.com/0wczar/airframe

Airframe React

High Quality Dashboard / Admin / Analytics template that works great on any smartphone, tablet or desktop. Available as Open Source as MIT license.

View Demo
jQuery Version
Next Version - Now is available
Angular Version - Documentation in preparation
Vue Version - Documentation in preparation
MVC.Net Version - Documentation in preparation
Sketch Files (Soon)

Introduction

Airframe Dashboard with a minimalist design and innovative Light UI will let you build an amazing and powerful application with great UI. Perfectly designed for large scale applications, with detailed step by step documentation.

This Airframe project is a typical Webpack based React app, React Router also included together with customised reactstrap. This project has all of it's few dependencies up to date and it will be updated on a regular basis. This project doesn't support SSR. If you need it - use the NextJs based version.

Features

Airframe Dashboard has a huge collection of components that can be used in a great number of combinations and variations. It can be used in all types of custom web applications such as CRMs, CMSs, Admin Panels, Admin Dashboards, Analytics, etc.

10+ Layout Variations - a multitude of possibilities to rearrange the layout, allows to customize the look of your application just as you imagined.
Applications - applications ready, allows you to save time and focus on project development.
UI Components - we offer you a large number of UI components; fully ready for changes that will customize them for your needs.
Responsive Design - fully adapted to your application, exactly well presented on the desktop, a tablet or smartphone.
120+ Unique Pages designed to make use of them directly in your application.
2 Starters so that you can immediately work with the components that are necessary for your application.

Author

Tomasz Owczarczyk:

Github: https://github.com/0wczar
Dribbble: https://dribbble.com/tomaszo
Linkedin: https://www.linkedin.com/in/tomaszowczarczyk/
Twitter: https://twitter.com/towcza

Installation

Initial Configuration:

You need to have NodeJs (>= 10.0.0) installed on your local machine, before attempting to run a dev environment.

Extract contents of the package to your local machine.
Using the Terminal navigate to the extracted contents.
Run npm install.

Make sure you have a file called .npmrc in the extracted directory. Those files are typically hidden in Unix based systems.

Development

To start the development environment type npm start in the console. This will start a development server with hot reloading enabled.

Production

To create a production build type npm run build:prod. After the process is complete you can copy the output from the /dist/ directory. The output files are minified and ready to be used in a production environment.

Build Customization

You can customize the build to suit your specific needs by adjusting the Webpack configuration files. Those files can be found in the /build directory. For more details checkout the documentation of WebPack.

Project Details

Some points of interest about the project project structure:

app/components - custom React components should go here
app/styles - styles added here won't be treated as CSS Modules, so any global classes or library styles should go here
app/layout - the AppLayout component can be found here which hosts page contents within itself; additional sidebars and navbars should be placed in ./components/ subdir.
app/colors.js - exports an object with all of the defined colors by the Dashboard. Useful for styling JS based components - for example charts.
app/routes - PageComponents should be defined here, and imported via index.js. More details on that later.

Defining Routes

Route components should be placed in separate directories inside the /routes/ directory. Next you should open /routes/index.js file and attach the component. You can do this in two diffrent ways:

Static Imports

Pages imported statically will be loaded eagerly on PageLoad with all of the other content. There will be no additional loads when navigating to such pages BUT the initial app load time will also be longer. To add a statically imported page it should be done like this:

// Import the default component
import SomePage from './SomePage';
// ...
export const RoutedContent = () => {
    return (
        <Switch>
            { /* ... */ }
            { /* Define the route for a specific path */ }
            <Route path="/some-page" exact component={SomePage} />
            { /* ... */ }
        </Switch>
    );
}

Dynamic Imports

Dynamically imported pages will only be loaded when they are needed. This will decrease the size of the initial page load and make the App load faster. You can use React.Suspense to achieve this. Example:

// Create a Lazy Loaded Page Component Import
const SomeAsyncPage = React.lazy(() => import('./SomeAsyncPage'));
// ...
export const RoutedContent = () => {
    return (
        <Switch>
            { /* ... */ }
            { /*
                Define the route and wrap the component in a React.Suspense loader.
                The fallback prop might contain a component which will be displayed
                when the page is loading.
            */ }
            <Route path="/some-async-page">
                <React.Suspense fallback={ <PageLoader /> }>
                    <SomeAsyncPage />
                </React.Suspense>
            </Route>
        </Switch>
    );
}

Route specific Navbars and Sidebars

Sometimes you might want to display additional content in the Navbar or the Sidebar. To do this you should define a customized Navbar/Sidebar component and attach it to a particular route. Example:

import { SidebarAlternative } from './../layout/SidebarAlternative';
import { NavbarAlternative } from './../layout/NavbarAlternative';
// ...
export const RoutedNavbars  = () => (
    <Switch>
        { /* Other Navbars: */}
        <Route
            component={ NavbarAlternative }
            path="/some-custom-navbar-route"
        />
        { /* Default Navbar: */}
        <Route
            component={ DefaultNavbar }
        />
    </Switch>  
);

export const RoutedSidebars = () => (
    <Switch>
        { /* Other Sidebars: */}
        <Route
            component={ SidebarAlternative }
            path="/some-custom-sidebar-route"
        />
        { /* Default Sidebar: */}
        <Route
            component={ DefaultSidebar }
        />
    </Switch>
);

Theming

You can set the color scheme for the sidebar and navbar by providing initialStyle and initialColor to the <ThemeProvider> component which should be wrapping the <Layout> component.

Possible initialStyle values:

light
dark
color

Possible initialColor values:

primary
success
info
warning
danger
indigo
purple
pink
yellow

Programatic Theme Changing

You can change the color scheme on runtime by using the ThemeConsumer from the components. Example:

// ...
import { ThemeContext } from './../components';
// ...
const ThemeSwitcher = () => (
    <ThemeConsumer>
        ({ onChangeTheme }) => (
            <React.Fragment>
                <Button onClick={() => onThemeChange({ style: 'light' })}>
                    Switch to Light
                </Button>
                <Button onClick={() => onThemeChange({ style: 'dark' })}>
                    Switch to Dark
                </Button>
            </React.Fragment>
        )
    </ThemeConsumer>
);

Options provided by the ThemeConsumer:

style - current theme style
color - current theme color
onChangeTheme({ style?, color? }) - allows to change the theme

Credits

Used plugins in this dashboard:

React 16.9.x - A JavaScript library for building user interfaces
Bootstrap 4.x - Bootstrap is the most popular HTML, CSS, and JS framework
reactstrap 5.x.x - Simple React Bootstrap 4 components
Peity 3.3.x - progressive pie, donut, bar and line charts
Font Awesome 4.7.x - Font Awesome, the iconic font and CSS framework.
Holder 2.x.x - client side image placeholders
Lodash 7.x.x - A modern JavaScript utility library delivering modularity, performance & extras.
Moment 7.x.x - Parse, validate, manipulate, and display dates in javascript.
react-beautiful-dnd 11.0.4 - Beautiful and accessible drag and drop for lists with React
react-big-calendar 0.22.x - gcal/outlook like calendar component
react-bootstrap-table-next 3.1.4 - Next Generation of react-bootstrap-table
react-bootstrap-typeahead 4.x.x - React typeahead with Bootstrap styling
react-datepicker 2.7.0 - A simple and reusable datepicker component for React
react-dropzone 10.x.x - Simple HTML5 drag-drop zone with React.js
react-grid-layout 0.16.x - A draggable and resizable grid layout with responsive breakpoints, for React.
react-helmet 5.x.x - A document head manager for React
react-hot-loader 4.11.x - Tweak React components in real time.
react-quill 1.x.x - A Quill component for React
react-image-crop 8.0.2 - A responsive image cropping tool for React
react-router 5.x.x - Declarative routing for React
text-mask 5.x.x - Input mask for React
react-toastify 5.x.x - React notification made easy
react-toggle 4.x.x - Elegant, accessible toggle component for React. Also a glorified checkbox.
reacharts 1.x.x - Redefined chart library built with React and D3

airframe-react's People

Contributors

Stargazers

Watchers

Forkers

blackouths shanepursehouse senhordim sethips dykow zavier-sanders ekodedypurnomo barryduggan ziegfiroyt andrantis skullcan mbrukman thatcobbyguy sidx64 testrockytesting alex-infoserve dbuentello akuseru scottbcovert karthik-cbe msylvia carlosf rubik-ai ideaplexus ajmendez crono stevecastaneda mznsolucoes scottshane maxiplux kalam360 chronsyn alilosoft randydom awalone bopo tchigher hhy5277 hungledominic tsolmon1 xfifix tahir500 shaunstanislauslau cyzhou314 shivlondon truonglvx maxwaiyaki hoangpq kbsbroad dunphyben absatasy themandunord 715047274 imloama westvo edidevs vmdao kafiln matheus-santos fengweijp anandselva shubham23471 sharepointdiv xorava dashdanilo alexkogany marceluphd chowdhary987 sagar-ganesh valencia-io jbelke accr awesome-archive lmarcinkowski frozeny 2b-dev nonna4822 mgirouard cdhdeveloper vanroy86 proake jetman-007 pks-os condefranck rayfcrols jiman93 ozgurmuraterhan rezafahrur mbetters blabuduua wade1990 hthimz thomasnbond artur-swoboda mamapi rahul-96 alamsz wende prinux jslibrarydirectory

airframe-react's Issues

Not building/working on Windows 10 / Node 10

Hi,

There are 2 majors issues on windows 10 that prevents this repo from running, I'm hoping somebody has a solution:

It's not building, there's a dependency error (Module not found: Error: Can't resolve 'isomorphic-fetch' in 'C:\code\react\airframe-react\app\routes\Forms\Typeahead\components')
Chokidar monitor changes on c:, the root of the hard drive. It's monitoring 500Gb of files, including windows system files.

While I'll probably figure out the dependency issue, I have no idea where to start to have Chokidar monitor from the root of the repo rather than my entire drive. Any help would be most welcome!

Here are the steps I took to setup:

git cloned the repo (from c:\code\react)
npm install from the freshly cloned repo (c:\code\react\airframe-react)
Verified node version (v10.16.3)
npm start

Here's the output showing both issues:

C:\code\react\airframe-react>npm start

> [email protected] start C:\code\react\airframe-react
> npm run start:dev


> [email protected] start:dev C:\code\react\airframe-react
> node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.dev.js

Cleared target directory: C:\code\react\airframe-react\dist
Created target directory: C:\code\react\airframe-react\dist
i ｢wds｣: Project is running at http://0.0.0.0:4100/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\code\react\airframe-react\.serve
i ｢wds｣: 404s will fallback to /
WARNING: The `form-control-focus()` mixin has been deprecated as of v4.4.0. It will be removed entirely in v5.
         on line 8 of node_modules/bootstrap/scss/mixins/_deprecate.scss, in mixin `deprecate`
         from line 26 of node_modules/bootstrap/scss/mixins/_forms.scss, in mixin `form-control-focus`
         from line 199 of node_modules/@owczar/dashboard-style--airframe/scss/plugins/ag-grid/ag-theme-bootstrap.scss
         from line 2 of app/styles/plugins/_ag-grid.scss
         from line 1 of stdin

WARNING: The `form-control-focus()` mixin has been deprecated as of v4.4.0. It will be removed entirely in v5.
         on line 8 of node_modules/bootstrap/scss/mixins/_deprecate.scss, in mixin `deprecate`
         from line 26 of node_modules/bootstrap/scss/mixins/_forms.scss, in mixin `form-control-focus`
         from line 199 of node_modules/@owczar/dashboard-style--airframe/scss/plugins/ag-grid/ag-theme-bootstrap.scss
         from line 2 of app/styles/plugins/_ag-grid.scss
         from line 1 of stdin

× ｢wdm｣: Hash: 707a7b7d18b0d25cc382
Version: webpack 4.44.2
Time: 92044ms
Built at: 11/20/2020 9:07:03 PM
                          Asset       Size  Chunks             Chunk Names
                  app.bundle.js   46.6 MiB     app  [emitted]  app
                        app.css    1.1 MiB     app  [emitted]  app
  fonts/fontawesome-webfont.eot    162 KiB          [emitted]
  fonts/fontawesome-webfont.ttf    162 KiB          [emitted]
 fonts/fontawesome-webfont.woff   95.7 KiB          [emitted]
fonts/fontawesome-webfont.woff2   75.4 KiB          [emitted]
                     index.html   7.24 KiB          [emitted]
                   static/1.jpg   55.7 KiB          [emitted]
                  static/10.jpg   59.5 KiB          [emitted]
                  static/11.jpg     82 KiB          [emitted]
                  static/12.jpg   71.1 KiB          [emitted]
                  static/13.jpg   81.8 KiB          [emitted]
                  static/14.jpg   76.4 KiB          [emitted]
                  static/15.jpg   70.4 KiB          [emitted]
                  static/16.jpg   72.4 KiB          [emitted]
                  static/17.jpg   77.2 KiB          [emitted]
                  static/18.jpg   79.4 KiB          [emitted]
                  static/19.jpg   78.1 KiB          [emitted]
                   static/2.jpg     63 KiB          [emitted]
                  static/20.jpg   74.2 KiB          [emitted]
                  static/21.jpg   53.7 KiB          [emitted]
                  static/22.jpg   45.4 KiB          [emitted]
                  static/23.jpg   86.2 KiB          [emitted]
                  static/24.jpg   64.8 KiB          [emitted]
                  static/25.jpg   72.1 KiB          [emitted]
                  static/26.jpg   51.2 KiB          [emitted]
                  static/27.jpg   66.8 KiB          [emitted]
                  static/28.jpg   52.2 KiB          [emitted]
                  static/29.jpg     84 KiB          [emitted]
                   static/3.jpg     43 KiB          [emitted]
                  static/30.jpg   54.1 KiB          [emitted]
                  static/31.jpg   84.6 KiB          [emitted]
                  static/32.jpg   88.9 KiB          [emitted]
                  static/33.jpg   64.9 KiB          [emitted]
                  static/34.jpg   43.4 KiB          [emitted]
                  static/35.jpg   55.1 KiB          [emitted]
                  static/36.jpg   75.5 KiB          [emitted]
                  static/37.jpg   86.8 KiB          [emitted]
                  static/38.jpg   78.9 KiB          [emitted]
                  static/39.jpg   67.8 KiB          [emitted]
                   static/4.jpg   88.1 KiB          [emitted]
                  static/40.jpg   54.8 KiB          [emitted]
                  static/41.jpg   75.1 KiB          [emitted]
                  static/42.jpg   48.1 KiB          [emitted]
                  static/43.jpg   42.1 KiB          [emitted]
                  static/44.jpg   57.2 KiB          [emitted]
                  static/45.jpg   58.1 KiB          [emitted]
                  static/46.jpg   57.9 KiB          [emitted]
                  static/47.jpg   54.6 KiB          [emitted]
                  static/48.jpg   59.3 KiB          [emitted]
                  static/49.jpg   64.1 KiB          [emitted]
                   static/5.jpg   73.8 KiB          [emitted]
                  static/50.jpg   66.9 KiB          [emitted]
                   static/6.jpg   61.5 KiB          [emitted]
                   static/7.jpg   64.8 KiB          [emitted]
                   static/8.jpg   87.9 KiB          [emitted]
                   static/9.jpg     93 KiB          [emitted]
    static/apple-touch-icon.png   5.68 KiB          [emitted]
            static/avatar-1.jpg     63 KiB          [emitted]
       static/favicon-16x16.png  835 bytes          [emitted]
       static/favicon-32x32.png   1.15 KiB          [emitted]
             static/favicon.ico   14.7 KiB          [emitted]
 static/fontawesome-webfont.svg    434 KiB          [emitted]
             static/image-1.jpg    184 KiB          [emitted]
             static/image-2.jpg    393 KiB          [emitted]
         static/logo-danger.svg    3.2 KiB          [emitted]
         static/logo-indigo.svg    3.2 KiB          [emitted]
           static/logo-info.svg    3.2 KiB          [emitted]
           static/logo-pink.svg    3.2 KiB          [emitted]
        static/logo-primary.svg    3.2 KiB          [emitted]
         static/logo-purple.svg    3.2 KiB          [emitted]
        static/logo-success.svg    3.2 KiB          [emitted]
        static/logo-warning.svg    3.2 KiB          [emitted]
          static/logo-white.svg    3.2 KiB          [emitted]
         static/logo-yellow.svg    3.2 KiB          [emitted]
Entrypoint app = app.css app.bundle.js
[1] multi (webpack)-dev-server/client?http://0.0.0.0:4100 (webpack)/hot/dev-server.js ./app/index.js 52 bytes {app} [built]
[./app/components/App/index.js] 868 bytes {app} [built]
[./app/index.js] 352 bytes {app} [built]
[./node_modules/@babel/polyfill/lib/index.js] 686 bytes {app} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {app} [built]
[./node_modules/react/index.js] 190 bytes {app} [built]
[./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:4100] (webpack)-dev-server/client?http://0.0.0.0:4100 4.29 KiB {app} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {app} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {app} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {app} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {app} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {app} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {app} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {app} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {app} [built]
    + 4222 hidden modules

ERROR in ./app/routes/Forms/Typeahead/components/utils.js
Module not found: Error: Can't resolve 'isomorphic-fetch' in 'C:\code\react\airframe-react\app\routes\Forms\Typeahead\components'
 @ ./app/routes/Forms/Typeahead/components/utils.js 10:0-37 14:9-14
 @ ./app/routes/Forms/Typeahead/components/AsynchronousSearching.js
 @ ./app/routes/Forms/Typeahead/components/index.js
 @ ./app/routes/Forms/Typeahead/Typeahead.js
 @ ./app/routes/Forms/Typeahead/index.js
 @ ./app/routes/index.js
 @ ./app/components/App/AppClient.js
 @ ./app/components/App/index.js
 @ ./app/index.js
 @ multi ./app/index.js
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!app/styles/plugins/plugins.css:
    Entrypoint extract-css-chunks-webpack-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./app/styles/plugins/plugins.css] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./app/styles/plugins/plugins.css 1.66 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/rc-slider/assets/index.css] 5.8 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/react-big-calendar/lib/css/react-big-calendar.css] 12.7 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/react-bootstrap-typeahead/css/Typeahead-bs4.css] 1.04 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/react-bootstrap-typeahead/css/Typeahead.css] 4.16 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/react-datepicker/dist/react-datepicker.css] 23.4 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/react-grid-layout/css/styles.css] 1.3 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/react-quill/dist/quill.snow.css] 25.3 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/react-toggle/style.css] 3.3 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/bootstrap.scss:
    Entrypoint extract-css-chunks-webpack-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/bootstrap.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/bootstrap.scss 432 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/components/float-grid.scss:
    Entrypoint extract-css-chunks-webpack-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/components/float-grid.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/components/float-grid.scss 862 bytes {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/components/theme-selector.scss:
    Entrypoint extract-css-chunks-webpack-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/components/theme-selector.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/components/theme-selector.scss 320 bytes {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/components/wizard.scss:
    Entrypoint extract-css-chunks-webpack-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/components/wizard.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/components/wizard.scss 1.4 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/main.scss:
    Entrypoint extract-css-chunks-webpack-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/main.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/main.scss 302 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/plugins/plugins.scss:
    Entrypoint extract-css-chunks-webpack-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/plugins/plugins.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/plugins/plugins.scss 371 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/runtime/getUrl.js] 830 bytes {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/font-awesome/fonts/fontawesome-webfont.eot] 75 bytes {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0] 75 bytes {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0] 76 bytes {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0] 75 bytes {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0] 77 bytes {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0] 76 bytes {extract-css-chunks-webpack-plugin} [built]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html] 9.4 KiB {0} [built]
    [./node_modules/lodash/lodash.js] 530 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Failed to compile.
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'

Can this take localisation? like i18n?

Initial setup issue

I checked out a fresh copy, cd to the folder

$yarn
$yarn start
.....

ERROR in ./app/routes/Tables/ExtendedTable/components/CustomSizePerPageButton.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/thawkins/IdeaProjects/airframe-react/app/routes/Tables/ExtendedTable/components/CustomSizePerPageButton.js: Rest element must be last element (15:14)

.....

pro build fails

npm run build:prod results in:

Module parse failed: Unexpected token (36:21)
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 AppLayout extends React.Component {
>     static propTypes = {
|         children: PropTypes.node.isRequired
|     };
 @ ./app/components/App/AppClient.js 13:0-47 20:38-47
 @ ./app/components/App/index.js
 @ ./app/index.js
 @ multi react-hot-loader/patch ./app/index.js

How can I check in ie11 browser?

I found code like this in index.html.

<html lang="en" class="ie9" <% if(config.files.manifest) { %> manifest="<%= config.files.manifest %>"<% } %>>

But this doesn't work well in ie9 browser.

In another way, I installed react-app-polyfill library.

I import 'react-app-polyfill/ie11'; I added this code to index.js but it's not working.

How can I check it in IE9 and 11 browsers?

[feature request] more bootstrap breakpoints?

I'd like to be able to specify additional bootstrap (xxl and xxxl) breakpoints. Could these be included?

Updates!?

Will there be any updates soon?

Split production build into smaller tasks

It would be good to have more option for production build. Like building only updated js parts instead of all project.
Also it would be good to have a chance build Modular Styles only and sikp Global Styles, Fonts, Files.

jquery version download

as you linked jquery demo , cant find out how to download files!

Cannot find module 'fs'

First of all, thanks for providing this fantastic react demo.

I currently encounter an issue when trying to use "fs" module to read and write new files. It always shows that "Cannot find module 'fs'". I tried to solve the issue by editing this file"airframe-react-master/build/webpack.config.client.prod.js", as this "https://stackoverflow.com/questions/39249237/node-cannot-find-module-fs-when-using-webpack" instructed, but it still doesn't work. Would you please tell me any solution to this situation?

Thanks a lot!

How to open/close modal programmatically?

Adjust alignment on card header when input is present

Probably would be better aligned along the bottom edge. Seen in Chrome.

Missing dependency

It seems that a missing dependency is required from npm.

1965 ~/Projects/github_repos/airframe-react[master ?] $ npm install
npm WARN deprecated @babel/[email protected]: 🚨 As of Babel 7.4.0, this
npm WARN deprecated package has been deprecated in favor of directly
npm WARN deprecated including core-js/stable (to polyfill ECMAScript
npm WARN deprecated features) and regenerator-runtime/runtime
npm WARN deprecated (needed to use transpiled generator functions):
npm WARN deprecated
npm WARN deprecated   > import "core-js/stable";
npm WARN deprecated   > import "regenerator-runtime/runtime";
npm WARN deprecated [email protected]: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@owczar%2fdashboard-style--airframe - Not found
npm ERR! 404
npm ERR! 404  '@owczar/dashboard-style--airframe@^0.1.13' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'airframe-react'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nicolafiorillo/.npm/_logs/2019-08-17T12_05_05_523Z-debug.log`

1964 ~/Projects/github_repos/airframe-react[master ?] $ node --version
v12.8.1

Same problem with Nodejs 10.X.X.

dockerfile

It would be super useful for someone to provide a dockerfile so they can launch and recrate the app in a "known" environmnet.

I'm completely new to react and struggling to start the project.
if anyone knows how to solve it any help would be greatly appreciated

ERROR in ./app/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/rhysevans/git/airframe-react/app/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (9:5):

Standalone NPM package

Hey,
first of all - great work! I really love the look and feel of this admin dashboard.
I would like to try it out in an existing project and the best way to do it would be to just install it with NPM and import your components into my app. Any plans for this?
Waiting for the Next.js version :)

faker.js the author decided to delete the repository

El paquete:
@owczar/dashboard-style--airframe -> utiliza faker.js en:

node_modules@owczar\dashboard-style--airframe\package.json
node_modules@owczar\dashboard-style--airframe\js-modules\extended-faker.js

Info:
Este proyecto faker.js fue creado y alojado originalmente en https://github.com/marak/Faker.js/ ; sin embargo, alrededor del 4 de enero de 2022, el autor decidió eliminar el repositorio (por "razones desconocidas").

En interés de la comunidad, se ha decidido que faker.js se mantendrá aquí : @withshepherd/faker

Sería posible generar una actualización a @owczar/dashboard-style--airframe ?

will add dark mode in the near future?

thanks

CardColumns direction="row" ?

How in to change the location from column to row ?

Can't find the exchange and trading demo code

I like the look of this chart: https://user-images.githubusercontent.com/2330394/63061353-20ea4600-bef5-11e9-84c8-000a6dceea4d.png

Where is the demo code for this please ?

Consistency issue Login vs Sign in

Minor hair splitting issue:

In some places the dashboard uses the term "login" and in others it uses "sign in", it should be consistent across everything.

Probably need to look at logout and signout but i have not seen that.

UncontrolledModal is not opening when the target is a DropdownItem

UncontrolledModal is not opening when the target is a DropdownItem.

Has anyone ever needed to do this?

Project fails to build

Hello, I'm trying to build the project but npm -i throws dependency issues:

 airframe-react (master) npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^6.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^4.19.1 || ^5.3.0" from [email protected]
npm ERR! node_modules/eslint-config-airbnb
npm ERR!   dev eslint-config-airbnb@"^17.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

tried if with --force as well:

airframe-react (master) npm i --force
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/eslint
npm WARN   dev eslint@"^6.1.0" from the root project
npm WARN   1 more (babel-eslint)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^4.19.1 || ^5.3.0" from [email protected]
npm WARN node_modules/eslint-config-airbnb
npm WARN   dev eslint-config-airbnb@"^17.1.0" from the root project
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^6.1.0" from the root project
npm ERR!   peer eslint@">= 4.12.1" from [email protected]
npm ERR!   node_modules/babel-eslint
npm ERR!     dev babel-eslint@"^10.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^4.19.1 || ^5.3.0" from [email protected]
npm ERR! node_modules/eslint-config-airbnb/node_modules/eslint-config-airbnb-base
npm ERR!   eslint-config-airbnb-base@"^13.2.0" from [email protected]
npm ERR!   node_modules/eslint-config-airbnb
npm ERR!     dev eslint-config-airbnb@"^17.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

node: v15.2.0
npm: v7.0.10
airframe-react: latest from master branch
macos: 11

getting error when adding ag-grid enterprise

Here is my package.json

{
"name": "airframe-dashboard",
"version": "0.1.0",
"description": "Seed project for flexible light React/Bootstrap 4 dashboards.",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "npm run start:dev",
"build:dev": "node ./build/cli-tools.js --clear dist --create dist && webpack --config ./build/webpack.config.client.dev.js",
"build:prod": "node ./build/cli-tools.js --clear dist --create dist && webpack --config ./build/webpack.config.client.prod.js",
"start:dev": "node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.dev.js",
"start:prod": "node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.prod.js"
},
"author": "Webkom",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"autoprefixer": "^9.6.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.6",
"babel-plugin-universal-import": "^4.0.0",
"circular-dependency-plugin": "^5.0.2",
"commander": "^2.20.0",
"css-loader": "^3.1.0",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.13.0",
"extract-css-chunks-webpack-plugin": "^4.5.2",
"file-loader": "^4.0.0",
"html-webpack-plugin": "^3.2.0",
"mkdirp": "^0.5.1",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"raw-loader": "^3.0.0",
"rimraf": "^2.6.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.3.0",
"webpack": "^4.33.0",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.1"
},
"dependencies": {
"@babel/polyfill": "^7.4.4",
"@owczar/dashboard-style--airframe": "^0.1.13",
"ag-grid-community": "^25.2.1",
"ag-grid-enterprise": "^25.2.1",
"ag-grid-react": "^25.2.0",
"bootstrap": "^4.3.1",
"faker": "^4.1.0",
"font-awesome": "^4.7.0",
"holderjs": "^2.9.6",
"isomorphic-fetch": "^3.0.0",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"node-fetch": "^2.6.0",
"numeral": "^2.0.6",
"prop-types": "^15.7.2",
"query-string": "^6.7.0",
"rc-slider": "^8.6.13",
"react": "^16.8.6",
"react-beautiful-dnd": "^11.0.4",
"react-big-calendar": "^0.22.0",
"react-bootstrap-table-next": "^3.1.4",
"react-bootstrap-table2-editor": "^1.2.4",
"react-bootstrap-table2-filter": "^1.1.9",
"react-bootstrap-table2-paginator": "^2.0.6",
"react-bootstrap-table2-toolkit": "^2.0.1",
"react-bootstrap-typeahead": "^4.0.0-alpha.9",
"react-datepicker": "^2.7.0",
"react-dom": "^16.8.6",
"react-dom-factories": "^1.0.2",
"react-dropzone": "^10.1.5",
"react-grid-layout": "^0.16.6",
"react-helmet": "^5.2.1",
"react-hot-loader": "^4.11.0",
"react-image-crop": "^8.0.2",
"react-quill": "^1.3.3",
"react-responsive": "^7.0.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-text-mask": "^5.4.3",
"react-toastify": "^5.2.1",
"react-toggle": "^4.0.2",
"react-universal-component": "^4.0.0",
"reactstrap": "^8.0.0",
"recharts": "^1.6.2",
"text-mask-addons": "^3.8.0",
"uuid": "^3.3.2",
"webpack-cli": "^3.1.0",
"webpack-flush-chunks": "^2.0.3"
}
}

here is the modified AgGrid.js in 'app\routes\Tables\AgGrid'

import React from 'react';
import { render } from 'react-dom';
import {AgGridColumn, AgGridReact} from 'ag-grid-react';
import 'ag-grid-enterprise';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

export default class AgGridExample extends React.Component {

render() {
    const rowData = [
       {make: "Toyota", model: "Celica", price: 35000},
       {make: "Ford", model: "Mondeo", price: 32000},
       {make: "Porsche", model: "Boxter", price: 72000}
    ];

    return (
       <div className="ag-theme-balham" style={{height: 400, width: 600}}>
           <AgGridReact
               rowData={rowData}>
               <AgGridColumn field="make"></AgGridColumn>
               <AgGridColumn field="model"></AgGridColumn>
               <AgGridColumn field="price"></AgGridColumn>
           </AgGridReact>
       </div>
    );
}

}

here is the error in console:

C:\Users\Ananya\Desktop\Perycap\riskmgmtUI>npm start

[email protected] start C:\Users\Ananya\Desktop\Perycap\riskmgmtUI
npm run start:dev

[email protected] start:dev C:\Users\Ananya\Desktop\Perycap\riskmgmtUI
node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.dev.js

Cleared target directory: C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\dist
Created target directory: C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\dist
i ｢wds｣: Project is running at http://0.0.0.0:4100/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\Ananya\Desktop\Perycap\riskmgmtUI.serve
i ｢wds｣: 404s will fallback to /
× ｢wdm｣: Hash: 81f252a4738825a8d482
Version: webpack 4.46.0
Time: 66577ms
Built at: 05/13/2021 12:44:06 PM
Asset Size Chunks Chunk Names
app.bundle.js 53.2 MiB app [emitted] app
app.css 785 KiB app [emitted] app
index.html 7.24 KiB [emitted]
static/1.jpg 55.7 KiB [emitted]
static/10.jpg 59.5 KiB [emitted]
static/11.jpg 82 KiB [emitted]
static/12.jpg 71.1 KiB [emitted]
static/13.jpg 81.8 KiB [emitted]
static/14.jpg 76.4 KiB [emitted]
static/15.jpg 70.4 KiB [emitted]
static/16.jpg 72.4 KiB [emitted]
static/17.jpg 77.2 KiB [emitted]
static/18.jpg 79.4 KiB [emitted]
static/19.jpg 78.1 KiB [emitted]
static/2.jpg 63 KiB [emitted]
static/20.jpg 74.2 KiB [emitted]
static/21.jpg 53.7 KiB [emitted]
static/22.jpg 45.4 KiB [emitted]
static/23.jpg 86.2 KiB [emitted]
static/24.jpg 64.8 KiB [emitted]
static/25.jpg 72.1 KiB [emitted]
static/26.jpg 51.2 KiB [emitted]
static/27.jpg 66.8 KiB [emitted]
static/28.jpg 52.2 KiB [emitted]
static/29.jpg 84 KiB [emitted]
static/3.jpg 43 KiB [emitted]
static/30.jpg 54.1 KiB [emitted]
static/31.jpg 84.6 KiB [emitted]
static/32.jpg 88.9 KiB [emitted]
static/33.jpg 64.9 KiB [emitted]
static/34.jpg 43.4 KiB [emitted]
static/35.jpg 55.1 KiB [emitted]
static/36.jpg 75.5 KiB [emitted]
static/37.jpg 86.8 KiB [emitted]
static/38.jpg 78.9 KiB [emitted]
static/39.jpg 67.8 KiB [emitted]
static/4.jpg 88.1 KiB [emitted]
static/40.jpg 54.8 KiB [emitted]
static/41.jpg 75.1 KiB [emitted]
static/42.jpg 48.1 KiB [emitted]
static/43.jpg 42.1 KiB [emitted]
static/44.jpg 57.2 KiB [emitted]
static/45.jpg 58.1 KiB [emitted]
static/46.jpg 57.9 KiB [emitted]
static/47.jpg 54.6 KiB [emitted]
static/48.jpg 59.3 KiB [emitted]
static/49.jpg 64.1 KiB [emitted]
static/5.jpg 73.8 KiB [emitted]
static/50.jpg 66.9 KiB [emitted]
static/6.jpg 61.5 KiB [emitted]
static/7.jpg 64.8 KiB [emitted]
static/8.jpg 87.9 KiB [emitted]
static/9.jpg 93 KiB [emitted]
static/apple-touch-icon.png 5.68 KiB [emitted]
static/avatar-1.jpg 63 KiB [emitted]
static/favicon-16x16.png 835 bytes [emitted]
static/favicon-32x32.png 1.15 KiB [emitted]
static/favicon.ico 14.7 KiB [emitted]
static/image-1.jpg 184 KiB [emitted]
static/image-2.jpg 393 KiB [emitted]
static/logo-danger.svg 3.2 KiB [emitted]
static/logo-indigo.svg 3.2 KiB [emitted]
static/logo-info.svg 3.2 KiB [emitted]
static/logo-pink.svg 3.2 KiB [emitted]
static/logo-primary.svg 3.2 KiB [emitted]
static/logo-purple.svg 3.2 KiB [emitted]
static/logo-success.svg 3.2 KiB [emitted]
static/logo-warning.svg 3.2 KiB [emitted]
static/logo-white.svg 3.2 KiB [emitted]
static/logo-yellow.svg 3.2 KiB [emitted]
Entrypoint app = app.css app.bundle.js
[1] multi (webpack)-dev-server/client?http://0.0.0.0:4100 (webpack)/hot/dev-server.js ./app/index.js 52 bytes {app} [built]
[./app/components/App/index.js] 884 bytes {app} [built]
[./app/index.js] 352 bytes {app} [built]
[./node_modules/@babel/polyfill/lib/index.js] 686 bytes {app} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {app} [built]
[./node_modules/react/index.js] 190 bytes {app} [built]
[./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:4100] (webpack)-dev-server/client?http://0.0.0.0:4100 4.29 KiB {app} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {app} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {app} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {app} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {app} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {app} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {app} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {app} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {app} [built]
+ 4151 hidden modules

ERROR in ./app/styles/plugins/plugins.scss
Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import "~ag-grid-community/src/styles/ag-theme-classic/vars/ag-theme-classic-vars";
^
File to import not found or unreadable: ~ag-grid-community/src/styles/ag-theme-classic/vars/ag-theme-classic-vars.
in C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules@owczar\dashboard-style--airframe\scss\plugins\ag-grid_ag-theme-bootstrap-vars.scss (line 70, column 1)
at C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\webpack\lib\NormalModule.js:316:20
at C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Object.callback (C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\sass-loader\dist\index.js:89:7)
at Object.done [as callback] (C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\neo-async\async.js:8069:18)
at options.error (C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\node-sass\lib\index.js:294:32)
@ ./app/layout/default.js 39:0-42
@ ./app/components/App/AppClient.js
@ ./app/components/App/index.js
@ ./app/index.js
@ multi ./app/index.js

ERROR in ./node_modules/ag-grid-community/dist/styles/ag-theme-balham.css 1:0
Module parse failed: Unexpected token (1:0)
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

.ag-theme-balham {
| -webkit-font-smoothing: antialiased;
| color: #000;
@ ./app/routes/Tables/AgGrid/AgGrid.js 37:0-59
@ ./app/routes/Tables/AgGrid/index.js
@ ./app/routes/index.js
@ ./app/components/App/AppClient.js
@ ./app/components/App/index.js
@ ./app/index.js
@ multi ./app/index.js

ERROR in ./node_modules/ag-grid-community/dist/styles/ag-grid.css 6:72
Module parse failed: Unexpected token (6:72)
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
| ****************************
| */

ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
| display: block; }
|
@ ./app/routes/Tables/AgGrid/AgGrid.js 36:0-51
@ ./app/routes/Tables/AgGrid/index.js
@ ./app/routes/index.js
@ ./app/components/App/AppClient.js
@ ./app/components/App/index.js
@ ./app/index.js
@ multi ./app/index.js
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!app/styles/plugins/plugins.css:
Entrypoint extract-css-chunks-webpack-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./app/styles/plugins/plugins.css] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./app/styles/plugins/plugins.css 1.66 KiB {extract-css-chunks-webpack-plugin} [built]
[./node_modules/css-loader/dist/cjs.js!./node_modules/rc-slider/assets/index.css] 5.8 KiB {extract-css-chunks-webpack-plugin} [built]
[./node_modules/css-loader/dist/cjs.js!./node_modules/react-big-calendar/lib/css/react-big-calendar.css] 12.7 KiB {extract-css-chunks-webpack-plugin} [built]
[./node_modules/css-loader/dist/cjs.js!./node_modules/react-bootstrap-typeahead/css/Typeahead-bs4.css] 1.04 KiB {extract-css-chunks-webpack-plugin} [built]
[./node_modules/css-loader/dist/cjs.js!./node_modules/react-bootstrap-typeahead/css/Typeahead.css] 4.16 KiB {extract-css-chunks-webpack-plugin} [built]
[./node_modules/css-loader/dist/cjs.js!./node_modules/react-datepicker/dist/react-datepicker.css] 23.4 KiB {extract-css-chunks-webpack-plugin} [built]
[./node_modules/css-loader/dist/cjs.js!./node_modules/react-grid-layout/css/styles.css] 1.3 KiB {extract-css-chunks-webpack-plugin} [built]
[./node_modules/css-loader/dist/cjs.js!./node_modules/react-quill/dist/quill.snow.css] 25.3 KiB {extract-css-chunks-webpack-plugin} [built]
[./node_modules/css-loader/dist/cjs.js!./node_modules/react-toggle/style.css] 3.3 KiB {extract-css-chunks-webpack-plugin} [built]
[./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/bootstrap.scss:
Entrypoint extract-css-chunks-webpack-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/bootstrap.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/bootstrap.scss 433 KiB {extract-css-chunks-webpack-plugin} [built]
[./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/components/float-grid.scss:
Entrypoint extract-css-chunks-webpack-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/components/float-grid.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/components/float-grid.scss 862 bytes {extract-css-chunks-webpack-plugin} [built]
[./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/components/theme-selector.scss:
Entrypoint extract-css-chunks-webpack-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/components/theme-selector.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/components/theme-selector.scss 320 bytes {extract-css-chunks-webpack-plugin} [built]
[./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/components/wizard.scss:
Entrypoint extract-css-chunks-webpack-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/components/wizard.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/components/wizard.scss 1.4 KiB {extract-css-chunks-webpack-plugin} [built]
[./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/main.scss:
Entrypoint extract-css-chunks-webpack-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/main.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/main.scss 302 KiB {extract-css-chunks-webpack-plugin} [built]
[./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/plugins/plugins.scss:
Entrypoint extract-css-chunks-webpack-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/plugins/plugins.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/plugins/plugins.scss 492 bytes {extract-css-chunks-webpack-plugin} [built] [failed] [1 error]

ERROR in ./app/styles/plugins/plugins.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/plugins/plugins.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import "~ag-grid-community/src/styles/ag-theme-classic/vars/ag-theme-classic-vars";
^
      File to import not found or unreadable: ~ag-grid-community/src/styles/ag-theme-classic/vars/ag-theme-classic-vars.
      in C:\Users\Ananya\Desktop\Perycap\riskmgmtUI\node_modules\@owczar\dashboard-style--airframe\scss\plugins\ag-grid\_ag-theme-bootstrap-vars.scss (line 70, column 1)

Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html] 9.4 KiB {0} [built]
[./node_modules/lodash/lodash.js] 531 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Failed to compile.

I am new to React. Need Help

Add Redux and typescript?

Is there any hope we will see this in the future?

Angular Version

When will the angular version be available?

Can this is be used for commercial purpose ?

In order to use this for commercial purposes is there any procedure?

Demo as Development Build?

If the demo, which is beautiful, were published as a development build and therefore explorable using the React dev-tools... that would be an excellent way to help users understand the available components and relationships between those components.

Missing Dependency

Hello,
cloned latest
npm installed

throws error
ERROR in ./app/routes/Forms/Typeahead/components/utils.js
Module not found: Error: Can't resolve 'isomorphic-fetch' in '/lhome/grperry/github/airframe-react/app/routes/Forms/Typeahead/components'
@ ./app/routes/Forms/Typeahead/components/utils.js 10:0-37 14:9-14
@ ./app/routes/Forms/Typeahead/components/AsynchronousSearching.js
@ ./app/routes/Forms/Typeahead/components/index.js
@ ./app/routes/Forms/Typeahead/Typeahead.js
@ ./app/routes/Forms/Typeahead/index.js
@ ./app/routes/index.js
@ ./app/components/App/AppClient.js
@ ./app/components/App/index.js
@ ./app/index.js
@ multi ./app/index.js

installed
npm isomorphic-fetch -s

Worky !
Thanks.
Cheers

Scss Overrides

How do you override style variables? For example, I would like to change some of the basic Bootstrap colors. Values added to styles/variables.scss or colors.scss don't seem to get picked up in the build.

How to Change Theme Default Colors

Hello, What's up?

While using Airframe in a project I needed to modify one of the default theme colors, I need to replace Primary with a darker blue.

Could you help me on how to do such a thing?

Docker Node Alpine Fails to install @owczar/dashboard-style--airframe v0.1.23

Hi Tomasz,

I noticed this package(@owczar/dashboard-style--airframe v0.1.23) does not work with Alpine Node images from docker. Whenever I attempt to build a react image/container based one any alpine node image from docker, npm install fails at that package with the following errror.

-------------------------Error Log ------------------------------------
Step 7/10 : RUN npm install @owczar/[email protected]
---> Running in 4663571d45c4
npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno -2
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t https://github.com/Marak/faker.js.git
npm ERR! enoent
npm ERR! enoent
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-04-24T11_58_36_568Z-debug.log
ERROR: Service 'client-test' failed to build: The command '/bin/sh -c npm install @owczar/[email protected]' returned a non-zero code: 254
-----------------------------End of Error log--------------------------------

Any Chance you could shed some light on why this is an issue and how to fix please?

Thanks
Ned

I want to ask about Firebase and Service Worker: Error: A bad HTTP response code (404) was received when fetching the script

I use Air Frame, so my structure is like this:

Because there is no public folder, so I try adding one.

My firebase-messaging-sw.js:

import * as firebase from "firebase";
import "firebase/database";
import 'firebase/messaging';

var firebaseConfig = {
apiKey: "xxxx",
authDomain: "xxxx",
projectId: "myhealthqlpkv1",
storageBucket: "xxxx",
messagingSenderId: "xxxxx",
appId: "xxxx",
measurementId: "xxxx"
};
// Initialize Firebase
firebase.default.initializeApp(firebaseConfig);
// var db = firebase.default.database().ref();

const messaging = firebase.default.messaging();
export default messaging;

In my Login.js, I try to register and getToken:

import messaging from "../../../public/firebase-messaging-sw"
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("/firebase-messaging-sw.js")
.then(function(registration) {
console.log("Registration successful, scope is:", registration.scope);
messaging.getToken({vapidKey: 'xxxx', serviceWorkerRegistration : registration })
.then((currentToken) => {
if (currentToken) {
console.log('current token for client: ', currentToken);
localStorage.setItem('registrationToken', currentToken);

        // Track the token -> client mapping, by sending to backend server
        // show on the UI that permission is secured
      } else {
        console.log('No registration token available. Request permission to generate one.');

        // shows on the UI that permission is required 
      }
    }).catch((err) => {
      console.log('An error occurred while retrieving token. ', err);
      // catch error while creating client token
    });  
  })
  .catch(function(err) {
    console.log("Service worker registration failed, error:"  , err );
});

}

I run into that error, can you help me? When I used the create-react-app originally, I was successful to get the token. But now I can't @@ Pls, I want to use this airframe.

Not able to run repo locally

Am not able to run the repo locally , can someone tell how to do this ?

Getting this :

NPM package?

Not sure if this is the appropriate place to put this; apologies if it isn't.

Have you considered bundling the components of airframe-react as an NPM package? I love the look and feel of Airframe, but I would prefer the freedom of determining my own folder structure, language (Typescript instead of Javascript), etc.

Thanks!

How can I config to run AirFrame on Heroku.

I want to try run AirFrame on Heroku and it's built ok with webpack, the build log of Heroku I put bellow. When I try to access the URL it is the response: 404 Not Found/nginx. I try many things. I think it's something releaded of the port. I try process.env.PORT too. I changed the webpack.config.cliente.prod.js like that:
devServer: {
hot: false,
contentBase: config.distDir,
compress: true,
historyApiFallback: {
index: '/'
},
host: 'https://unaroadmap.herokuapp.com',
port: process.env.PORT
}

==-=-=-=-=-=- HEROKU LOG =-=-=-=-=-

-----> React.js (create-react-app) multi app detected
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js

-----> Creating runtime environment

   NPM_CONFIG_LOGLEVEL=error
   NODE_ENV=production
   NODE_MODULES_CACHE=true
   NODE_VERBOSE=false

-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)

   Resolving node version 12.x...
   Downloading and installing node 12.17.0...
   Using default npm version: 6.14.4

-----> Restoring cache
- node_modules

-----> Installing dependencies
Installing node modules (package.json)
audited 1399 packages in 9.755s

   57 packages are looking for funding
     run `npm fund` for details
   
   found 0 vulnerabilities

-----> Build

-----> Caching build
- node_modules

-----> Pruning devDependencies
removed 932 packages and audited 463 packages in 12.798s

   23 packages are looking for funding
     run `npm fund` for details
   
   found 0 vulnerabilities

-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
=====> Detected Framework: React.js (create-react-app)
Writing static.json to support create-react-app
Enabling runtime environment variables
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
=====> Detected Framework: Static HTML
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
-----> Installed directory to /app/bin
Using release configuration from last framework (Static HTML).
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 64.1M
-----> Launching...
Released v37
https://unaroadmap.herokuapp.com/ deployed to Heroku

-==--==-
How can I change the config of this AirFrame? I'm new using react and if someone can help me I really appreciate that.

npm install failing - ESLint dependency

When trying to run npm install with a fresh cloned repo, i receive the following.
Does someone have an idea how I can solve this?
Many thanks in advance!

`npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR! dev eslint@"^6.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^4.19.1 || ^5.3.0" from [email protected]
npm ERR! node_modules/eslint-config-airbnb
npm ERR! dev eslint-config-airbnb@"^17.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users...\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users...\AppData\Local\npm-cache_logs\2022-01-11T23_55_44_907Z-debug-0.log`

external css does not work!

I'm using a module for displaying tree structure in my project, I got the following error,

./node_modules/react-sortable-tree/style.css 4:0
Module parse failed: Unexpected token (4:0)
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
|  * Extra class applied to VirtualScroll through className prop
|  */
> .rst__virtualScrollOverride {
|   overflow: auto !important;
| }

I also discovered that any external css file in my project does not get applied

is this still an active project?

I like the look of airframe and I can see that a lot of effort has been put in. Was wondering though if this is still an active project?

If so, great, but I have a bunch of issues.

there are loads of warnings appearing in the console that are making it hard to find the errors that I have caused
applying table style of 'compact' doesn't appear to work
how am I support to use the project? (it's just a demo site)

Any example of adding Side Menu using recursion.

I have parent-child menus for example:

{
            icon: 'fa-gears', label: 'Services', children: [
                { label: 'Acrs', component: AcrsPage, path: '/config/acrs' },
                { label: 'Cache', component: CachePage, path: '/config/cache' },
                { label: 'Jwks', component: JwksPage, path: '/config/jwks' },
                {
                    icon: 'fa-database', label: 'Persistence', children: [
                        { label: 'Ldap Edit', component: LdapEditPage, path: '/config/ldap/edit:configId' },
                        { label: 'Ldap Add', component: LdapAddPage, path: '/config/ldap/new' },
                        { label: 'Ldap', component: LdapListPage, path: '/config/ldap' },
                        { label: 'Couchbase', component: CouchbasePage, path: '/config/couchbase' }
                    ]
                }
            ]
        }

Is there any example where we can arrange the menus using recursion?
I tried with the below component, although it arranges menu but shows every item as parent menu (even if there is no child item to it.)

import React from 'react'
import { SidebarMenu, Divider } from '../'

export const SidebarMenusRecursiveWrapper = ({ item }) => {

    const { label, path, children = [], icon = '' } = item;

    function getIcon(name) {
        let fullName = ''
        if (name) {
            fullName = 'fa fa-fw ' + name
            return <i className={fullName}></i>
        }
        return ''
    }
    return (
        !!label &&
        <SidebarMenu>
            {children.length > 0 ? (
                <SidebarMenu.Item
                    icon={getIcon(icon)}
                    title={label}>
                    {children.map((child, i) => {
                        return (
                            <SidebarMenusRecursiveWrapper key={i} item={child} />
                        );
                    })}
                </SidebarMenu.Item>
            ) : (
                    <SidebarMenu.Item
                        icon={getIcon(icon)}
                        title={label}
                        to={path}
                    />
                )
            }
        </SidebarMenu>
    );
};

AirFrame Discontinued?

Hi guys We had problems with faker.js and I don't found new updates here. This Lib was discontinued?

Build Error

$half-drag-handle-height: math.div($drag-handle-height, 2);
^
Invalid CSS after "...le-height: math": expected expression (e.g. 1px, bold), was ".div($drag-handle-h"
in D:\AirFrame\airframe-react-master\node_modules\react-image-crop\lib\ReactCrop.scss (line 21, column 31)
at D:\AirFrame\airframe-react-master\node_modules\webpack\lib\NormalModule.js:316:20
at D:\AirFrame\airframe-react-master\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at D:\AirFrame\airframe-react-master\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (D:\AirFrame\airframe-react-master\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Object.callback (D:\AirFrame\airframe-react-master\node_modules\sass-loader\dist\index.js:89:7)
at Object.done [as callback] (D:\AirFrame\airframe-react-master\node_modules\neo-async\async.js:8069:18)
at options.error (D:\AirFrame\airframe-react-master\node_modules\node-sass\lib\index.js:294:32)
@ ./app/layout/default.js 39:0-42
@ ./app/components/App/AppClient.js
@ ./app/components/App/index.js
@ ./app/index.js
@ multi react-hot-loader/patch ./app/index.js

ERROR in ./app/routes/Forms/Typeahead/components/utils.js
Module not found: Error: Can't resolve 'isomorphic-fetch' in 'D:\AirFrame\airframe-react-master\app\routes\Forms\Typeahead\components'
@ ./app/routes/Forms/Typeahead/components/utils.js 10:0-37 14:9-14
@ ./app/routes/Forms/Typeahead/components/AsynchronousSearching.js
@ ./app/routes/Forms/Typeahead/components/index.js
@ ./app/routes/Forms/Typeahead/Typeahead.js
@ ./app/routes/Forms/Typeahead/index.js
@ ./app/routes/index.js
@ ./app/components/App/AppClient.js
@ ./app/components/App/index.js
@ ./app/index.js
@ multi react-hot-loader/patch ./app/index.js

ERROR in ./app/styles/plugins/plugins.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/plugins/plugins.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

$half-drag-handle-height: math.div($drag-handle-height, 2);
                             ^
      Invalid CSS after "...le-height: math": expected expression (e.g. 1px, bold), was ".div($drag-handle-h"
      in D:\AirFrame\airframe-react-master\node_modules\react-image-crop\lib\ReactCrop.scss (line 21, column 31)

File to import not found or unreadable: ~bootstrap/scss/code.

I face issue with
"@owczar/dashboard-style--airframe": "^0.1.23"

SassError: File to import not found or unreadable: ~bootstrap/scss/code.
on line 13 of node_modules/@owczar/dashboard-style--airframe/scss/bootstrap/bootstrap.scss
from line 3 of src/styles/styles.scss

@import "~bootstrap/scss/code";

Navbar does not collapse on "navbar only" view when using mobile (Chrome on Android)

I really like this dashboard UI however when using mobile, I've noticed that the navbar does not collapse for the "navbar only" view

Build failed with webpack 5

Can you guys please update for webpack 5?

Moving the project inside Electron

Waiting for Sketch files

Your work is really good both UI/UX taste and coding.
I wanted to plan the different pages for the little project but It's not convenient to use html. So If you provide the sketch or XD file of the components/pages would be perfect. 👍 🥇

Vue Version is not available

The link Vue Version on the page README.md is not available.

Set card minheight

What is the easiest way to set the minheight on a card, without having to setup a stylesheet for it?

Error on installing

When i try to install the airframe admin template the npm throw an error. “Https://github.com/Marak/faker.js.git is not found in this location.

I have node version 12 and npm 6.9

Thanks

Can't Make an API call

Can't make API call in Component Did mount in extended Table A. Its throwing an error cannot update state in unmounted component.

Here is my component

import React from 'react';
import { getUnits } from '../../../actions/unit';

import axios from 'axios';
import ENV from '../../../env';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import filterFactory, { Comparator, dateFilter } from 'react-bootstrap-table2-filter'
import ToolkitProvider from 'react-bootstrap-table2-toolkit';
import _ from 'lodash';
import faker from 'faker/locale/en_US';
import moment from 'moment';
import {
Container,
Row,
Col,
Badge,
Button,
CustomInput,
StarRating,
ButtonGroup
} from './../../../components';
import { CustomExportCSV } from '../pagination/CustomExportButton';
import { CustomSearch } from '../pagination/CustomSearch';
import { CustomPaginationPanel } from '../pagination/CustomPaginationPanel';
import { CustomSizePerPageButton } from '../pagination/CustomSizePerPageButton';
import { CustomPaginationTotal } from '../pagination/CustomPaginationTotal';
import { PageHeader } from '../pagination/PageHeader';
import { randomArray } from './../../../utilities';

const ProductQuality = {
Good: 'product-quality__good',
Bad: 'product-quality__bad',
Unknown: 'product-quality__unknown'
};

const sortCaret = (order) => {
if (!order)
return ;
if (order)
return <i className={fa fa-fw text-muted fa-sort-${order}}>
}

const INITIAL_PRODUCTS_COUNT = 25;
const generateRow = (index) => ({
_id: index,
unit: faker.commerce.productName(),
childUnit: randomArray([
ProductQuality.Bad,
ProductQuality.Good,
ProductQuality.Unknown
]),
convertRate: (1000 + Math.random() * 1000).toFixed(2),
status: Math.round(Math.random() * 6),
updatedAt: faker.date.past()
});

class Unit extends React.Component {

constructor() {
    super();
    this.state = {
        units: [],
        selected: [],
    };
    this.headerCheckboxRef = React.createRef();
}

componentDidMount() {
    this._isMounted = true;
    this.setState({
        units: {
            _id: 1,
            unit: "Kg",
            childUnit: "active",
            convertRate: "100",
            status: "Ok",

        }
    })
}

handleSelect(row, isSelected) {
    if (isSelected) {
        this.setState({ selected: [...this.state.selected, row._id] })
    } else {
        this.setState({
            selected: this.state.selected.filter(itemId => itemId !== row._id)
        })
    }
}

handleSelectAll(isSelected, rows) {
    if (isSelected) {
        this.setState({ selected: _.map(rows, '_id') })
    } else {
        this.setState({ selected: [] });
    }
}

handleAddRow() {
    const currentSize = this.state.units.length;

    this.setState({
        units: [
            generateRow(currentSize + 1),
            ...this.state.units,
        ]
    });
}

handleDeleteRow() {
    this.setState({
        units: _.filter(this.state.units, unit =>
            !_.includes(this.state.selected, unit._id))
    })
}

handleResetFilters() {
    this.nameFilter('');
    this.qualityFilter('');
    this.priceFilter('');
    this.satisfactionFilter('');
}

createColumnDefinitions() {
    return [{
        dataField: '_id',
        text: 'Unit ID',
        editable: false,
        headerStyle: () => {
            return { width: "15%" };
        }
    }, {
        dataField: 'unit',
        text: 'Unit Name',
        sort: true,
        sortCaret,
        editable: false,
        headerStyle: () => {
            return { width: "20%" };
        }
    }, {
        dataField: 'childUnit',
        text: 'Child Unit Name',
        editable: false,
        headerStyle: () => {
            return { width: "20%" };
        },
        sort: true,
        sortCaret,
    }, {
        dataField: 'convertRate',
        text: 'Conversion Rate',
        sort: true,
        sortCaret,
        editable: false,
        headerStyle: () => {
            return { width: "15%" };
        }
    }, {
        dataField: 'status',
        text: 'Status',
        sort: true,
        sortCaret,
        editable: false,
        headerStyle: () => {
            return { width: "15%" };
        }
    }, {
        dataField: 'updatedAt',
        text: 'Update At',
        formatter: (cell) =>
            moment(cell).format('DD/MM/YYYY'),
        editable: false,
        headerStyle: () => {
            return { width: "15%" };
        },
        sort: true,
        sortCaret
    }];
}

render() {

    const columnDefs = this.createColumnDefinitions();
    const paginationDef = paginationFactory({
        paginationSize: 5,
        showTotal: true,
        pageListRenderer: (props) => (
            <CustomPaginationPanel {...props} size="sm" className="ml-md-auto mt-2 mt-md-0" />
        ),
        sizePerPageRenderer: (props) => (
            <CustomSizePerPageButton {...props} />
        ),
        paginationTotalRenderer: (from, to, size) => (
            <CustomPaginationTotal {...{ from, to, size }} />
        )

    });
    const selectRowConfig = {
        mode: 'checkbox',
        selected: this.state.selected,
        onSelect: this.handleSelect.bind(this),
        onSelectAll: this.handleSelectAll.bind(this),
        selectionRenderer: ({ mode, checked, disabled }) => (
            <CustomInput type={mode} checked={checked} disabled={disabled} />
        ),
        selectionHeaderRenderer: ({ mode, checked, indeterminate }) => (
            <CustomInput type={mode} checked={checked} innerRef={el => el && (el.indeterminate = indeterminate)} />
        )
    };

    return (
        <Container>
            <PageHeader
                subTitle="Settings"
                subTitleLink="/allunits"
                title="All Units"
                buttonText="Add Unit"
            />
            <Row className="mb-5">
                <Col>
                    <ToolkitProvider
                        keyField="_id"
                        data={this.state.units}
                        columns={columnDefs}
                        search
                        exportCSV
                    >
                        {
                            props => (
                                <React.Fragment>
                                    <div className="d-flex justify-content-end align-items-center mb-2">
                                        <h6 className="my-0">
                                            All Units
                            </h6>
                                        <div className="d-flex ml-auto">
                                            <CustomSearch
                                                className="mr-2"
                                                {...props.searchProps}
                                            />
                                            <ButtonGroup>
                                                <CustomExportCSV
                                                    {...props.csvProps}
                                                >
                                                    Export
                                    </CustomExportCSV>
                                                <Button
                                                    size="sm"
                                                    outline
                                                    onClick={this.handleDeleteRow.bind(this)}
                                                >
                                                    Delete
                                    </Button>
                                                <Button
                                                    size="sm"
                                                    outline
                                                    onClick={this.handleAddRow.bind(this)}
                                                >
                                                    <i className="fa fa-fw fa-plus"></i>
                                                </Button>
                                            </ButtonGroup>
                                        </div>
                                    </div>
                                    <BootstrapTable
                                        rowStyle={{ backgroundColor: 'white' }}
                                        classes="table-responsive"
                                        pagination={paginationDef}
                                        filter={filterFactory()}
                                        selectRow={selectRowConfig}
                                        bordered={true}
                                        responsive={true}
                                        {...props.baseProps}
                                    />
                                </React.Fragment>
                            )
                        }
                    </ToolkitProvider>
                </Col>
            </Row>

        </Container >
    );
}

};

export default Unit;