@genstackio/react-admin-ui v0.22.27
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
14 days ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
7 months ago
9 months ago
6 months ago
7 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago