new templates

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@iteria-app/component-templates": "1.3.2",
+    "@iteria-app/component-templates": "1.3.4",
     "@mui/icons-material": "^5.2.5",
     "@mui/lab": "^5.0.0-alpha.64",
     "@mui/material": "^5.2.7",

src/routes.tsx

@@ -9,15 +9,22 @@ import DashboardView from '../src/views/reports/DashboardView'
 import { generatePagesRoutes } from '@iteria-app/component-templates'
 import * as generatedGraphql from './generated/graphql'
 
-const filebasedRouting = import.meta.globEager('./pages/**/*Container.tsx')
+const filebasedRouting = import.meta.globEager('./pages/**/*.tsx')
+const DETAIL_NAME = 'Form'
+const ONE_PAGE = '[id]'
+const MANY_PAGE = 'index'
 
 const newRoutes = Object.keys(filebasedRouting).map((route) => {
-  const path = route
-    .replace(/\/pages|index|\.tsx$/g, '')
+  let path = route
+    .replace(/\/pages|\.tsx$/g, '')
     .replace(/(\.\/|\/.*)/g, '')
     .replace(/\[\.{3}.+\]/, '*')
     .replace(/\[(.+)\]/, ':$1')
-  const Container = filebasedRouting[route].default ?? filebasedRouting[route]
+  const Container =
+    filebasedRouting[route].default ??
+    filebasedRouting[route][0] ??
+    filebasedRouting[route]
+  path = route.includes(ONE_PAGE) ? path + '/:id/' : path
   return { path, element: <Container /> }
 })
 
@@ -33,7 +40,7 @@ const routes = [
   {
     path: 'test',
     element: <DashboardLayout />,
-    children: newRoutes
+    children: newRoutes,
   },
   {
     path: '/',

src/theme/mtheme.ts

@@ -140,7 +140,7 @@ const components: Components<Theme> = {
       input: {
         borderRadius: 23,
         padding: '10px 35px 10px 20px!important',
-        background: '#f5f3f2',
+        background: '#F2F3F4',
       },
       notchedOutline: {
         border: 'none',
@@ -164,7 +164,7 @@ const components: Components<Theme> = {
         border: 'none',
       },
       columnHeaders: {
-        background: '#f5f3f2',
+        background: '#F2F3F4',
         border: 'none',
         fontWeight: 550,
         fontSize: '14px',
@@ -181,7 +181,7 @@ const components: Components<Theme> = {
   MuiTableHead: {
     styleOverrides: {
       root: {
-        background: '#f5f3f2',
+        background: '#F2F3F4',
         border: 'none',
         fontWeight: 550,
         fontSize: '14px',
@@ -295,17 +295,6 @@ const components: Components<Theme> = {
       },
     },
   },
-  MuiSelect: {
-    styleOverrides: {
-      // @ts-ignore
-      root: {
-        margin: '0 15px',
-        ':before': {
-          visibility: 'hidden',
-        },
-      },
-    },
-  },
   MuiPagination: {
     defaultProps: {
       variant: 'outlined',

templates/card-list/App.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { useRoutes } from 'react-router-dom'
+import { theme } from '../src/theme'
+import { GraphqlcodegenDataProvider } from '@iteria-app/component-templates'
+import {
+  DataContext,
+  ThemeProvider,
+  //I18nProvider,
+  //useLocale,
+} from '@iteria-app/component-templates'
+import {
+  createClient,
+  Provider as UrqlProvider,
+  debugExchange,
+  dedupExchange,
+  cacheExchange,
+  fetchExchange,
+} from 'urql'
+import PropTypes from 'prop-types'
+import '../src/mixins/chartjs'
+import routes from './routes'
+//import { messages } from './locale'
+
+import { IntlProvider } from 'react-intl'
+import { messages } from '../../../locale'
+
+const App = () => {
+  const routing = useRoutes(routes)
+  //const locale = useLocale()
+  //const messagesObject = messages(locale)
+
+  //   <IntlProvider
+  //   locale={locale}
+  //   messages={messagesObject}
+  //   onError={() => console.debug}
+  // >
+  // </IntlProvider>
+  return (
+    <I18nProvider locale={locale} messages={messagesObject}>
+      {routing}
+    </I18nProvider>
+  )
+}
+
+App.propTypes = {
+  locale: PropTypes.string,
+  messages: PropTypes.object,
+}
+
+export default App

templates/card-list/main.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { BrowserRouter as Router } from 'react-router-dom'
+
+import App from './App'
+import { ErrorBoundary } from '@iteria-app/component-templates'
+
+ReactDOM.render(
+  <ErrorBoundary>
+    <Router>
+      <App />
+    </Router>
+  </ErrorBoundary>,
+  document.getElementById('root')
+)

templates/card-list/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@iteria-app-templates/card-list",
+  "version": "0.0.0",
+  "main": "src/main.tsx",
+  "module": "./dist/react-material-ui-vite.es.js",
+  "scripts": {
+    "dev": "concurrently \"vite\" \"npm run codegen:watch\"",
+    "build": "set NODE_OPTIONS=--max_old_space_size=8192 && vite build",
+    "build:development": "set NODE_OPTIONS=--max_old_space_size=8192 && vite build --mode development",
+    "serve": "vite preview",
+    "codegen:watch": "cross-env DOTENV_CONFIG_PATH=./.env.development graphql-codegen --require dotenv/config  --watch --config codegen.yml",
+    "codegen": "cross-env DOTENV_CONFIG_PATH=./.env.development graphql-codegen --require dotenv/config --config codegen.yml"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "@iteria-app/component-templates": "workspace: *",
+    "@iteria-app/generator": "workspace: *",
+    "@iteria-app/graphql-lowcode": "workspace: *",
+    "@iteria-app/ide-devserver": "workspace: *",
+    "@mui/icons-material": "^5.2.5",
+    "@mui/lab": "^5.0.0-alpha.61",
+    "@mui/material": "^5.2.7",
+    "@mui/x-data-grid": "^5.12.2",
+    "chart.js": "^2.9.4",
+    "clsx": "^1.1.1",
+    "formik": "^2.2.9",
+    "graphql": "15.7.2",
+    "graphql-tag": "^2.12.4",
+    "history": "^5.3.0",
+    "moment": "^2.27.0",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.2",
+    "react-chartjs-2": "^2.10.0",
+    "react-dom": "^17.0.2",
+    "react-feather": "^2.0.8",
+    "react-helmet": "^6.1.0",
+    "react-hook-form": "^7.28.0",
+    "react-intl": "^6.0.4",
+    "react-perfect-scrollbar": "^1.5.8",
+    "react-router": "^6.0.0-beta.0",
+    "react-router-dom": "6.0.0-beta.8",
+    "urql": "^2.1.3",
+    "uuid": "^8.3.2",
+    "yup": "^0.29.3"
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "^2.2.0",
+    "@graphql-codegen/introspection": "^2.1.0",
+    "@graphql-codegen/typescript": "^2.2.2",
+    "@graphql-codegen/typescript-operations": "^2.1.5",
+    "@graphql-codegen/typescript-urql": "^3.2.0",
+    "@iteria-app/vite-plugin-lowcode": "workspace:*",
+    "@rollup/plugin-alias": "^3.1.9",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@vitejs/plugin-react": "^1.1.0",
+    "change-case-all": "^1.0.14",
+    "concurrently": "^6.4.0",
+    "cross-env": "^7.0.3",
+    "dotenv": "8.2.0",
+    "typescript": "4.5.4",
+    "vite": "2.8.6"
+  }
+}