iteria-app / material-ui-starter Goto Github PK
View Code? Open in Web Editor NEWWe are testing Iteria Lowcode using Material-UI components
Home Page: https://demo.iteria.tech
License: MIT License
We are testing Iteria Lowcode using Material-UI components
Home Page: https://demo.iteria.tech
License: MIT License
Which one are we using? (graphqlcodegen, import)
We need only one => delete the redundant.
Goal: at least one translated message:
IntlProvider
intl.formatMessage
and/or <FormattedMessage
Check all occurences of makeStyles()
if they are properly used. Consider updating the theme or introducing local styles.
It came up here https://github.com/iteria-app/example-material-ui/pull/29/files#r655257566
Start with: iteria-app/example-grommet#11 first
Goal: list of material ui cards for https://iteria-app-example01.herokuapp.com/console/data/schema/public/tables/customer
Use case: use can list not only in data-grid (useful when you see some logo/image)
Eeach react component should have it's own input types near to functional component definition.
všetko sa vygeneruje aj je to vidieť vo vs code ale neprebehne správne react refresh
I have setup netlify to preview builds for example-material-ui and it is failing due to following compilation error:
6:22:51 AM: ────────────────────────────────────────────────────────────────
6:22:51 AM: 1. Build command from Netlify app
6:22:51 AM: ────────────────────────────────────────────────────────────────
6:22:51 AM:
6:22:51 AM: $ yarn build
6:22:51 AM: yarn run v1.22.4
6:22:51 AM: $ yarn generate && react-scripts build
6:22:52 AM: $ graphql-codegen --config codegen.yml
6:22:53 AM: [04:22:53] Parse configuration [started]
6:22:53 AM: [04:22:53] Parse configuration [completed]
6:22:53 AM: [04:22:53] Generate outputs [started]
6:22:53 AM: [04:22:53] Generate src/generated/graphql.ts [started]
6:22:53 AM: [04:22:53] Load GraphQL schemas [started]
6:23:00 AM: [04:23:00] Load GraphQL schemas [completed]
6:23:00 AM: [04:23:00] Load GraphQL documents [started]
6:23:00 AM: [04:23:00] Load GraphQL documents [completed]
6:23:00 AM: [04:23:00] Generate [started]
6:23:00 AM: [04:23:00] Generate [completed]
6:23:00 AM: [04:23:00] Generate src/generated/graphql.ts [completed]
6:23:00 AM: [04:23:00] Generate outputs [completed]
6:23:02 AM: Creating an optimized production build...
6:24:10 AM:
6:24:10 AM: Treating warnings as errors because process.env.CI = true.
6:24:10 AM: Most CI servers set it automatically.
6:24:10 AM:
6:24:10 AM: Failed to compile.
6:24:10 AM:
6:24:10 AM: src/theme/shadows.ts
6:24:10 AM: Line 1:1: Assign array to a variable before exporting as module default import/no-anonymous-default-export
6:24:10 AM: src/theme/typography.ts
6:24:10 AM: Line 1:1: Assign object to a variable before exporting as module default import/no-anonymous-default-export
6:24:10 AM: src/utils/getInitials.ts
6:24:10 AM: Line 1:1: Assign arrow function to a variable before exporting as module default import/no-anonymous-default-export
6:24:10 AM: src/views/customer/CustomerListView/UpdateCustomer.tsx
6:24:10 AM: Line 34:10: 'state' is assigned a value but never used @typescript-eslint/no-unused-vars
6:24:10 AM: Line 44:6: React Hook React.useCallback has missing dependencies: 'customer?.email', 'customer?.name', 'customer?.phone', 'handleClose', 'newEmail', 'newName', and 'newPhoneNumber'. Either include them or remove the dependency array. If 'handleClose' changes too often, find the parent component that defines it and wrap that definition in useCallback react-hooks/exhaustive-deps
6:24:10 AM: Line 47:5: React Hook React.useCallback has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked react-hooks/exhaustive-deps
6:24:10 AM: Line 48:5: React Hook React.useCallback has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked react-hooks/exhaustive-deps
6:24:10 AM: Line 49:5: React Hook React.useCallback has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked react-hooks/exhaustive-deps
6:24:10 AM: src/views/customer/CustomerListView/data.tsx
6:24:10 AM: Line 3:1: Assign array to a variable before exporting as module default import/no-anonymous-default-export
6:24:10 AM: src/views/customer/CustomerListView/index.tsx
6:24:10 AM: Line 26:18: '_reexecuteQuery1' is assigned a value but never used @typescript-eslint/no-unused-vars
6:24:10 AM: src/views/product/ProductListView/data.tsx
6:24:10 AM: Line 3:1: Assign array to a variable before exporting as module default import/no-anonymous-default-export
6:24:10 AM: src/views/test/GeneratedCustomersTable.tsx
6:24:10 AM: Line 2:28: 'DataGrid' is defined but never used @typescript-eslint/no-unused-vars
6:24:10 AM: Line 6:15: 'columns' is assigned a value but never used @typescript-eslint/no-unused-vars
6:24:10 AM: error Command failed with exit code 1.
6:24:10 AM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
6:24:10 AM:
6:24:10 AM: ────────────────────────────────────────────────────────────────
6:24:10 AM: "build.command" failed
6:24:10 AM: ────────────────────────────────────────────────────────────────
6:24:10 AM:
6:24:10 AM: Error message
6:24:10 AM: Command failed with exit code 1: yarn build
6:24:10 AM:
6:24:10 AM: Error location
6:24:10 AM: In Build command from Netlify app:
6:24:10 AM: yarn build
6:24:10 AM:
6:24:10 AM: Resolved config
6:24:10 AM: build:
6:24:10 AM: command: yarn build
6:24:10 AM: commandOrigin: ui
6:24:10 AM: publish: /opt/build/repo/build
6:24:11 AM: Caching artifacts
6:24:11 AM: Started saving node modules
6:24:11 AM: Finished saving node modules
6:24:11 AM: Started saving build plugins
6:24:11 AM: Finished saving build plugins
6:24:11 AM: Started saving yarn cache
6:24:11 AM: Finished saving yarn cache
6:24:11 AM: Started saving pip cache
6:24:11 AM: Finished saving pip cache
6:24:11 AM: Started saving emacs cask dependencies
6:24:11 AM: Finished saving emacs cask dependencies
6:24:11 AM: Started saving maven dependencies
6:24:11 AM: Finished saving maven dependencies
6:24:11 AM: Started saving boot dependencies
6:24:11 AM: Finished saving boot dependencies
6:24:11 AM: Started saving rust rustup cache
6:24:11 AM: Finished saving rust rustup cache
6:24:11 AM: Started saving go dependencies
6:24:11 AM: Finished saving go dependencies
6:24:14 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
6:24:14 AM: Creating deploy upload records
6:24:14 AM: Failing build: Failed to build site
6:24:14 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2
6:24:14 AM: Finished processing build request in 2m41.932037701s
package.json
hardcoded development:
"build:development": "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"
netlify.toml
command = "npx [email protected] i --store=node_modules/.pnpm-store && npx [email protected] run build:development"
duplicit/both pnpm lock and npm lock
let's have some pages that require authentication using Netlify, Auth0 and Firebase:
vid. web-akular AuthProvider (abstrakcia nad Firebase, Auth0, Keycloack)
useAuth()
https://github.com/Swizec/useAuth,checkAuth
https://ui.dev/react-router-v5-philosophy-introduction/displays 404
please check netlify.toml
check this problem in netlify forum/docs:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
We are fetching data from server using graphql therefore https://github.com/iteria-app/example-material-ui/blob/main/src/views/customer/CustomerListView/data.tsx is probably obsolete. If so then delete the obsolete file.
ak vybereme viacero entit tak to padne:
index.js:35435 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')
at getNestedOfType (index.js:35435:33)
at index.js:53213:31
at eventListenerCallback (index.js:53373:9)
ak vyberiem len jednu entitu tak to funguje
@msvoro, this issue continues #31
@skip
/@include
according to permissions https://hasura.io/docs/latest/graphql/core/databases/postgres/queries/variables-aliases-fragments-directives.html for individual fieldsImplement either hasura action (on top of hasura permissions tables/views or rest api https://hasura.io/docs/latest/graphql/core/auth/authorization/permission-rules.html) or postgres function
query currentUserAbilities {
currentUserAbilities {
action
subject
fields
conditions
}
]
returns:
[
{
action: ['select', 'insert', 'update'],
fields: ['id', 'seq', 'name', ...],
subject: 'Entity1',
conditions: { created_by: '%current_user%'}
},
{
inverted: true,
action: ['select', 'insert', 'update', 'delete'],
fields: ['id', 'seq', 'name', ...],
subject: 'Entity2',
conditions: { created_by: '%current_user%'}
}
]
FYI, this example pull request will be used for codegen as an example.
Please use Loadin.tsx skeleton
Goal: query by relation
Use case: new datagrid on new page orders should allow user to filter customers (modal dialog) and by doing this filters
https://iteria-app-example01.herokuapp.com/console/data/schema/public/tables/order
@msvoro, let's have icon (sun/moon) for switching between dark and light mode. Similar to https://explore.fast.design/components/fast-accordion
Change theme in <ThemeProvider
https://github.com/iteria-app/example-material-ui/blob/96f7946a35db41023d598705bac0495651a09380/src/App.tsx#L16
Automaticsly generate graphql types for customer query and mutation and use it. Modify the customer query to use grspql query fragments.
Goal: graphql filter/sort/page on Material-UI data grid
Checklist:
searchCustomers
to have optional where/order_by/limit/offset (test your query in https://iteria-app-example01.herokuapp.com/console) https://github.com/iteria-app/example-material-ui/blob/530d46dd12c06561409383b63be593ef6a957660/src/views/customer/CustomerListView/operation.graphql#L16searchCustomers
graphql query in https://github.com/iteria-app/example-material-ui/blob/main/src/views/test/GeneratedCustomers.tsx (using hook useSearchCustomersQuery()
like in https://github.com/iteria-app/example-material-ui/blob/cffe7493a443e3a9b7bf0f9ba4d4a4cdae7758c2/src/views/customer/CustomerListView/index.tsx#L26)We should not display here should be generated customer table
(for that purpose we have Generated customers
menu item)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.