material-ui | formerly Material-UI ) is the React UI library | User Interface library

const [sortModel, setSortModel] = useState([
    {
      field: "updatedAt",
      sort: "desc" as GridSortDirection,
    },
  ])

  const rows = currentUsersApplications.map((application) => {
    return {
      id: application.id,
      business_name: application.business_name,
      business_phone: application.business_phone,
      applicant_name: application.applicant_name,
      applicant_email: application.applicant_email,
      owner_cell_phone: application.owner_cell_phone,
      status: application.status,
      agent_name: application.agent_name,
      equipment_description: application.equipment_description,
      createdAt: formattedDate(application.createdAt),
      updatedAt: formattedDate(application.updatedAt),
      archived: application.archived,
    }
  })

  const columns = [
    { field: "id", headerName: "ID", width: 70, hide: true },
    {
      field: "business_name",
      headerName: "Business Name",
      width: 200,
      // Need renderCell() here because this is a link and not just a string
      renderCell: (params: GridCellParams) => {
        console.log(params)
        return 
      },
    },
    { field: "business_phone", headerName: "Business Phone", width: 180 },
    { field: "applicant_name", headerName: "Applicant Name", width: 180 },
    { field: "applicant_email", headerName: "Applicant Email", width: 180 },
    { field: "owner_cell_phone", headerName: "Ownership/Guarantor Phone", width: 260 },
    { field: "status", headerName: "Status", width: 130 },
    { field: "agent_name", headerName: "Agent", width: 130 },
    { field: "equipment_description", headerName: "Equipment", width: 200 },
    { field: "createdAt", headerName: "Submitted At", width: 250 },
    { field: "updatedAt", headerName: "Last Edited", width: 250 },
    { field: "archived", headerName: "Archived", width: 180, type: "boolean" },
  ]

      
         `MuiDataGrid-row--${params.getValue(params.id, "status")}`}
          rows={rows}
          columns={columns}
          pageSize={10}
          components={{
            Toolbar: GridToolbar,
          }}
          filterModel={{
            items: [{ columnField: "archived", operatorValue: "is", value: showArchived }],
          }}
          sortModel={sortModel}
          onSortModelChange={(model) => {
            console.log(model)
            //Infinitely logs model immediately
            setSortModel(model)
          }}
        />
      

import * as React from 'react';
import {
  createTheme,
  Theme,
  ThemeProvider,
  PaletteOptions
} from '@material-ui/core/styles';

import Button from '@material-ui/core/Button';

declare module '@material-ui/core/styles' {
  interface SimplePaletteColorOptions {
    lighter?: string;
    darker?: string;
  }

  interface PaletteColor {
    lighter?: string;
    darker?: string;
  }
}

const Default = () : PaletteOptions => {

  return {
    primary: {
      lighter: '#ddd',
      light: '#ddd',
      main: '#ddd',
      dark: '#ddd',
      darker: '#ddd'
    },
  };
};

export default function CustomColor() {
  const defaultColors = Default();
  
  const palette: PaletteOptions = {
    ...defaultColors,
    divider: defaultColors.primary?.main, // error in compile. Cannot find 'main'
  };

  const theme: Theme = createTheme({
    palette
  });

  console.log(theme.palette.primary.light);

  return (
    
      
        neutral
      
    
  );
}

Module '"react-router-dom"' has no exported member 'RouteComponentProps'.

Module '"react-router"' has no exported member 'RouteComponentProps'.

import { RouteComponentProps } from 'react-router-dom';

interface Props {
  history: RouteComponentProps['history']
}

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/styles": "^4.11.4",
    "@reach/router": "^1.3.4",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.37",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@types/react-redux": "^7.1.20",
    "axios": "^0.24.0",
    "history": "^5.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router": "^6.1.1",
    "react-router-dom": "^6.1.1",
    "react-scripts": "4.0.3",
    "redux": "^4.1.2",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.1",
    "thunk": "0.0.1",
    "typescript": "^4.5.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react-router": "^5.1.17",
    "@types/react-router-dom": "^5.3.2",
    "miragejs": "^0.1.43"
  }
}

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Footer from "./components/Footer/Footer";
import Header from "./components/Header/Header";
import Home from "./Pages/Home/Home";
import Quiz from "./Pages/Quiz/Quiz";
import "./App.css";
function App() {
  return (
    
      
        
        
          
          
          
        
      
      
    
  );
}

export default App;

import { Button } from "@material-ui/core";
import { Container } from "@material-ui/core";
import { useNavigate } from "react-router-dom";
import "./Home.css";

const Home = () => {
  const navigate = useNavigate();

  const sendSubmit = () => {
    navigate("/quiz");
  };
  return (
    
      Phishing Quiz
      
        Do you think you can beat our phishing quiz?
      
      

        {" "}
        There are many social engineering attacks on internet however not all of
        them are good enough to trick users. However there are some scams that
        are identical to original websites and usually most of the users get
        tricked by them.
      
      

        Do you think you are smart enough to handle these attacks?
      
      

        We are challenging you with our phishing quiz which will show you
        examples of really good social engineering attacks on internet. We hope
        you can pass!
      
      
""
      
        Start Quiz
      
    
  );
};

export default Home;

Manage

import React from "react";
import { render } from "react-dom";

import { DataGrid } from "@mui/x-data-grid";
import Select from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";

function App() {
  return (
    
      
        Ten
        Twenty
        Thirty
      
      {/* with DataGrid, Select will shown options on one line */}
      {/* comment out DataGrid and the select will work */}
       
    
  );
}
render(, document.querySelector("#root"));

{
  "name": "mui-datagrid-isolation-issue",
  "version": "5.0.0",
  "description": "",
  "keywords": [],
  "main": "index.js",
  "dependencies": {
    "@emotion/react": "latest",
    "@emotion/styled": "latest",
    "@mui/material": "^5.0.1",
    "@mui/styles": "^5.0.1",
    "@mui/x-data-grid": "^4.0.0",
    "@material-ui/core": "^4.12.3",
    "react": "latest",
    "react-dom": "latest"
  }
}

// .storybook/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  fallbackLng: 'de',
  debug: true,
});

export default i18n;

// .storybook/preview.js
import { StoreMall } from '../components/layouts/StoreMall';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import { ThemeProvider } from '@material-ui/core/styles';
import { jamesTheme } from '../components/colors';
import { themes } from '@storybook/theming';
import CssBaseline from '@material-ui/core/CssBaseline';

export const parameters = {
  // ...
};

export const decorators = [
  (Story) => (
    
      
        
        {Story()}
      
    
  ),
];

// .storybook/main.js
const path = require('path');

module.exports = {
  stories: ['../components/**/*.stories.js', '../components/**/*.stories.mdx'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-dark-mode',
  ],
  webpackFinal: async (config, { isServer }) => {
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, '../components'),
      store: path.resolve(__dirname, '../utils/stores'),
      dummy: path.resolve(__dirname, '../utils/dummy'),
    };
    if (!isServer) {
      config.node = {
        fs: 'empty',
      };
    }
    return config;
  },
};

i18next::translator: missingKey de editor unlock_page_margins unlock_page_margins

    "storybook": "start-storybook -s ./public -p 6006",

const SearchField = () => {
    const [open, setOpen] = React.useState(false)
    const [searchQuery, setSearchQuery] = React.useState('')
    const [searchResults, setSearchResults] = React.useState([])
    const loading = true //later

    const debounced = useDebouncedCallback(
        async searchQuery => {
            if (searchQuery) {
                let result = await doSearch(searchQuery)
                if (result.status === 200) {
                    setSearchResults(result.data)
                } else {
                    console.error(result)
                }
            }
        },
        1000
    )

    const handleInputChange = e => {
        if (e.target.value && e.target.value !== searchQuery) {
            debounced(e.target.value)
            setSearchQuery(e.target.value)
        }
    }

    const options = [{
        name: 'Name A',
        id: 'entry_0597856'
    },{
        name: 'Name B',
        id: 'entry_3049854'
    },{
        name: 'Name B',
        id: 'entry_3794654'
    },{
        name: 'Name C',
        id: 'entry_9087345'
    }]


    return (
         setOpen(true)}
            onClose={() => setOpen(false)}
            loading={loading}
            key={option => option.id}

            options={options}
            getOptionLabel={option => option.name}

            renderOption={(props, option) => (
                
                    {option.name}
                
            )}

            renderInput={params => {
                return (
                    
                                    {loading ?  : null}
                                    {params.InputProps.endAdornment}
                                
                            )
                        }}
                    />
                )}
            }
            
        />
    )
}