@genstackio/react-admin-ui

react-admin-ui

Usage

ES6

package.json

{
    "...": "...",
    "dependencies": {
        "...": "...",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "@genstackio/react-admin-ui": "^0.8.55",
        "@genstackio/react-contexts": "^0.1.5",
        "@material-ui/core": "^4.11.4",
        "tailwindcss": "^2.2.7",
        "autoprefixer": "^10.2.6",
        "postcss": "^8.2.12",
        "postcss-import": "^14.0.2",
        "@fortawesome/fontawesome-svg-core": "^1.2.35",
        "@fortawesome/free-brands-svg-icons": "^5.15.3",
        "@fortawesome/free-regular-svg-icons": "^5.15.3",
        "@fortawesome/free-solid-svg-icons": "^5.15.3",
        "@fortawesome/react-fontawesome": "^0.1.14",
        "react-cropper": "^2.1.8",
        "react-full-screen": "^1.0.2"
    }
}

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: {
      content: [
          './src/**/*.jsx', // change to directory of your source files
          './src/**/*.js',  // change to directory of your source files
          './node_modules/@genstackio/react-admin-ui/lib/**/*.js',
          './node_modules/@genstackio/react-admin-contexts/lib/**/*.js',
      ],
    options: {
      safelist: {
        standard: [/^theme-/],
      }
    }
  },
  darkMode: 'class', // or 'media' or 'class'
  presets: [
    require('@genstackio/react-admin-ui/tailwind.config'),
  ],
}

src/App.jsx

import '@genstackio/react-admin-ui/assets/css/styles.css';
import {Panel} from '@genstackio/react-admin-ui';

function App() {
    return (
        <Panel>Hello world!</Panel>
   );
}

Typescript + CRA

package.json

{
  "name": "admin",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/dom": "^7.31.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "^4.0.3",
    "web-vitals": "^0.2.4",
    "@material-ui/core": "^4.11.4",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "prop-types": "^15.7.2",
    "autoprefixer": "^9.8.6",
    "postcss": "^7.0.35",
    "postcss-import": "^12.0.1",
    "typescript": "^4.3.2",
    "@types/node": "^15.12.2",
    "@types/react-dom": "^17.0.7",
    "@types/jest": "^26.0.23",
    "@craco/craco": "^6.1.2",
    "@genstackio/react-admin-ui": "^0.8.41",
    "@genstackio/react-contexts": "^0.2.16",
    "@genstackio/craco-plugin-genstackio": "^0.3.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "react-full-screen": "^1.0.2",
    "react-cropper": "^2.1.8"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco 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"
    ]
  }
}

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: {
      content: [
          './src/**/*.tsx',
          './src/**/*.ts',
          './node_modules/@genstackio/react-admin-ui/lib/**/*.js',
          './node_modules/@genstackio/react-admin-contexts/lib/**/*.js',
      ],
    options: {
      safelist: {
        standard: [/^theme-/],
      }
    }
  },
  darkMode: 'class', // or 'media' or 'class'
  presets: [
    require('@genstackio/react-admin-ui/tailwind.config'),
  ],
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

craco.config.js

const genstackio = require('@genstackio/craco-plugin-genstackio');

module.exports = {
    plugins: [
        genstackio,
    ],
    style: {
        postcss: {
            plugins: [
                require('postcss-import'),
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        },
    },
}

src/index.tsx

import {StrictMode} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
    <StrictMode>
        <App />
    </StrictMode>,
    document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

src/App.tsx

import '@genstackio/react-admin-ui/assets/css/styles.css';
import {Panel} from '@genstackio/react-admin-ui';

function App() {
    return <Panel>Hello world!</Panel>;
}

export default App