I want to use the Login component provided by the ra-ui-materialui inside the next version of admin-on-rest.
I tried
import { Login } from 'ra-ui-materialui'
import { Login } from 'react-admin/ra-ui-materialui'
import { Login } from 'react-admin/ra-ui-materialui/auth'
import { Login } from 'react-admin/packages/ra-ui-materialui/src/auth'
import Login from 'react-admin/packages/ra-ui-materialui/src/auth'
They all resulted into an compile error:
Module not found: Can't resolve 'ra-ui-materialui' in '/my-app/src'
or
Module not found: Can't resolve 'react-admin/ra-ui-materialui' in '/my-app/src'
etc.
How can I import the provided Login component and use it in my react-admin app?
PS: For the time being, I've added the admin-on-rest tag too as this is the first question that concerns react-admin. For the purpose of this question and maybe many more to come, I created the tag react-admin.
I assumed that the local packages of react-admin would be available automatically just by the earlier installation of react-admin that I did. I was wrong. You need to yarn add that separately.
So, next to:
yarn add react-admin
You also need to:
yarn add ra-ui-materialui
And then this works:
import { Login } from 'ra-ui-materialui'
Related
I am trying to follow the documentation of ory login flow and in the "implementing the login" flow https://www.ory.sh/docs/hydra/guides/login#implementing-the-login-html-form page there is a node example, and on the last import line it imports AdminApi from #ory/hydra-client
import { AdminApi } from "#ory/hydra-client"
but I did the exact thing on in my express/node code, but got the error :
"#ory/hydra-client" has no exported member 'AdminApi'
I am using the newest version of #ory/hydra-client which I assume should be the version to use?
(link : https://www.npmjs.com/package/#ory/hydra-client?activeTab=readme)
does anyone have an idea on why this is happening?
There are five ckeditor5 ready-made builds available: classic, inline, balloon, balloon-block and document. I would like to use the balloon-block layout, but I want to build it from source (as is recommended) for integration into my Vue 2.x app (with webpack and Vue CLI 3). The docs for building from source use the classic editor as an example, and instead of using the pre-built package #ckeditor5/ckeditor5-build-classic, it says to import the source package #ckeditor5/ckeditor5-editor-classic and use that as a base to which you can add all the plugins you want.
The balloon layout has its own source package #ckeditor5/ckeditor5-editor-balloon which presumably can be used similarly, but I can't find any source package for balloon-block. If I'm supposed to use the ...editor-balloon package as a base, are there any docs I can use that will show me how to build my own balloon-block from source?
I've just learned that the hidden toolbar accessed from the gutter is actually a plugin calle BlockToolbar, so presumably I do just have to use the editor-balloon package as the source base and include/configure that plugin. If someone else doesn't provide a more complete example with sample config, I'll post an answer with my own solution when I have something. In the meantime, the docs here for the block toolbar plugin has lots of info on how to set it up.
You need to install the package '#ckeditor/ckeditor5-ui', which should already be a dependency of '#ckeditor/ckeditor5-editor-balloon' itself and import the plugin 'BlockToolbar' and use it in your 'create()' method call. Like so:
import BalloonEditor from '#ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
import { BlockToolbar } from '#ckeditor/ckeditor5-ui';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
BalloonEditor
.create(document.querySelector('#editor'), {
plugins: [BlockToolbar, Essentials, Paragraph], // BlockToolbar added here!
toolbar: ['bold', 'italic'],
blockToolbar: ['heading', 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList'],
});
I'm a beginner in the new Javascript world and would like to know the difference between
import { MessageBar } from "office-ui-fabric-react";
import { MessageBar } from "office-ui-fabric-react/lib-commonjs/MessageBar";
Both of them seem to work fine. I'm using webpack for creating final JS files. What is the recommended way to import components?
Both should work. The first one allows you to aggregate all your imports in a single expression.
Note that UI Fabric is deprecated and you should switch to Fluent UI React or Fluent UI React Northstar. So for example your import could look like this:
import { DatePicker, MessageBar } from '#fluentui/react';
I'm new to NativeScript. I have created a new project using the Angular Blank template. The navigation is done using page-router-outlet. I want to include a xmlns attribute on the page level. As far as i can see and understand the entire code is rendered inside a global page attribute. I've seen that I can modify the page properties by injecting the Page in a component and changing it's properties, but how can I do this for xmlns?
Best regards,
Vlad
To register a UI component in Angular based application you should use registerElement and not XML namespaces (which is a concept used in NativeScript Core). Nowadays most plugin authors are doing this job for you, but still, some of the plugins are not migrated to use the latest techniques so in some cases, we should manually register the UI element.
I've created this test applicaiton which demonstrates how to use nativescript-stripe in Angular. Here are the steps to enable and use the plugin.
Installation
npm i nativescript-stripe --save
Register the UI element in app.module.ts as done here
import { registerElement } from "nativescript-angular/element-registry";
registerElement("CreditCardView", () => require("nativescript-stripe").CreditCardView);
Add the following in main.ts as required in the plugin README
import * as app from "tns-core-modules/application";
import * as platform from "tns-core-modules/platform";
declare const STPPaymentConfiguration;
app.on(app.launchEvent, (args) => {
if (platform.isIOS) {
STPPaymentConfiguration.sharedConfiguration().publishableKey = "yourApiKey";
}
});
Use the plugin in your HTML (example)
<CreditCardView id="card"></CreditCardView>
I'm new to play, scala, and akka and I am getting an error when using sbt to build it and compiling it by loading localhost in a web browser. The in browser error I'm getting is:
Compilation error
reference to routes is ambiguous; it is imported twice in the same scope by import controllers._ and import models._
In /Users/Louis/Documents/play_actors/app/views/form.scala.html at line 9.
5#main(Html("Calculate Pi")) {
6
7 <h2>Calculate Pi</h2>
8
9 #helper.form(action = routes.Pi.submit) {
10
11 <fieldset>
12 <legend>Pi Options</legend>
I'm not sure why I'm getting this error. I call the html file from Activity.scala:
package controllers
import play.api._
import play.api.mvc._
import views._
object Application extends Controller {
def index = Action {
Ok(html.form(Pi.optionsForm))
}
}
Thanks in advance.
Play generates a number of Scala files including ones based on your routes file and your templates. If you look in the target/scala.2.9.1/src_managed directory after you've attempted to compile your app, you should find a views.html package containing Scala versions of your templates and a controllers package containing a Scala representation of your routes.
As well as a number of Play's own packages, Play templates will automatically import everything in your controllers and model packages. This includes the routes class generated from your routes file, which allows you to reference them in the way you've shown.
I assume that you must have some object or class in your model package which shares the name routes and hence, creates a collision which the compiler can't resolve.