@extrawest/design-system v0.1.63
List of Tools
Extrawest Design System
Silence is golden
List of components:
- Before you begin
- Required global wrapper
- Authentication component
- Error component
- Edit User Info component
- Delete User component
- Change user password component
- Terms of use component
Demo
https://ew-design-system-fcbab.web.app/
Usage
npm i @extrawest/design-system
Before you begin
Please create firebase app using firebase console and firebase documentation . In a result you will get all required variables which we will need in following section.
ENVIRONMENT VARIABLES LIST
NX_FIREBASE_API_KEY
orREACT_APP_FIREBASE_API_KEY
- firebase app api keyNX_FIREBASE_AUTH_DOMAIN
orREACT_APP_FIREBASE_AUTH_DOMAIN
- firebase authentication domainNX_FIREBASE_PROJECT_ID
orREACT_APP_FIREBASE_PROJECT_ID
- firebase project idNX_FIREBASE_STORAGE_BUCKET
orREACT_APP_FIREBASE_STORAGE_BUCKET
- firebase storage bucketNX_FIREBASE_MESSAGING_SENDER_ID
orREACT_APP_MESSAGING_SENDER_ID
- firebase messaging sender idNX_FIREBASE_APP_ID
orREACT_APP_FIREBASE_APP_ID
- firebase app idNX_FIREBASE_MEASUREMENT_ID
orREACT_APP_FIREBASE_MEASUREMENT_ID
- firebase measurement id
Required global wrapper
import { EwGlobal } from "@extrawest/design-system";
Usage:
<EwGlobal.EwProvider
footerLinks={{
onFeedbackButtonClick: noop,
onPrivacyButtonClick: noop,
onTermsButtonClick: noop,
}}
>
{app code goes here}
</EwGlobal.EwProvider>
You need to wrap your app at higher level as possible.
Options List:
Property | Type | Value |
---|---|---|
footerLinks | object | onFeedbackButtonClick: VoidFunction onPrivacyButtonClick: VoidFunction onTermsButtonClick: VoidFunction |
isFooterVisible | boolean | true/false |
isHeaderVisible | boolean | true/false |
overrideTheme | ThemeOptions | see mui theme options |
disabledLocaleList | Array<CountryCode> | |
termsOfUseContent | ReactNode | any react node |
overrideTranslations | CountryData | see object bellow |
overrideTranslations={{
US: {
label: "Eng",
messages: {
"messageCode": "message",
...
}
}
}}
All available messages codes could be found at
@extrawest/design-system/lib/translations/index.d.ts
Authentication component
Usage:
<EwMacroComponents.SignIn
type={SignInType.EMAIL}
/>
Property | Type | Value | Required |
---|---|---|---|
type | SignInType | SignInType.EMAI SignInType.PHONE SignInType.SOCIALS | true |
socialsList | SocialListItem | SocialListItem.APPLE SocialListItem.FACEBOOK SocialListItem.GOOGLE SocialListItem.TWITTER | false |
asGuest | boolean | true \| false | false |
isTermsRequired | boolean | true \| false | false |
allowCreate | boolean | true \| false | false |
onAuthChange | function (user: User) => void; | callback function | false |
showBgImage | boolean | true \| false | false |
bgImageUrl | string | image url | false |
Authentication setup
Before you begin
Please make sure that env variables are in place.
Authenticate with Firebase Using Email Link
- Enable Email Link sign-in for your Firebase project
- On the Sign in method tab, enable the Email/Password provider. Note that email/password sign-in must be enabled to use email link sign-in.
- In the same section, enable Email link (passwordless sign-in) sign-in method.
- Click Save.
Authenticate Using Google
- In the Firebase console, open the Auth section.
- On the Sign in method tab, enable the Google sign-in method and click Save.
Authenticate with Firebase using Password-Based Accounts
- In the Firebase console, open the Auth section.
- On the Sign in method tab, enable the Email/password sign-in method and click Save.
Authenticate with Firebase with a Phone Number
- In the Firebase console, open the Auth section.
- On the Sign-in Method page, enable the Phone Number sign-in method.
- On the same page, if the domain that will host your app isn't listed in the OAuth redirect domains section, add your domain.
- Place
<div id="recapcha"></div>
code somewhere in your index.html to allow reCAPTCHA invisible verifier render in that div.
Before you can sign in users with their phone numbers, you must set up Firebase's reCAPTCHA verifier. Firebase uses reCAPTCHA to prevent abuse, such as by ensuring that the phone number verification request comes from one of your app's allowed domains.
The RecaptchaVerifier object supports invisible reCAPTCHA, which can often verify the user without requiring any user action, as well as the reCAPTCHA widget, which always requires user interaction to complete successfully.
Authenticate Using Facebook Login
- On the Facebook for Developers site, get the App ID and an App Secret for your app.
- In the Firebase console, open the Auth section.
- On the Sign in method tab, enable the Facebook sign-in method and specify the
App ID
andApp Secret
you got from Facebook. - Then, make sure your OAuth redirect URI (e.g.
my-app-12345.firebaseapp.com/__/auth/handler
) is listed as one of your OAuth redirect URIs in your Facebook app's settings page on the Facebook for Developers site in the Product Settings > Facebook Login config.
Authenticate Using Twitter
- In the Firebase console, open the Auth section.
- On the Sign in method tab, enable the Twitter provider.
- Add the
API key
andAPI secret
from that provider's developer console to the provider configuration - Register your app as a developer application on Twitter and get your app's OAuth API key and API secret.
- Make sure your Firebase OAuth redirect URI (e.g.
my-app-12345.firebaseapp.com/__/auth/handler
) is set as your Authorization callback URL in your app's settings page on your Twitter app's config.
Authenticate Using Apple
- Associate your website with your app as described in the first section of Configure Sign In with Apple for the web. When prompted, register the following URL as a Return URL:
https://YOUR_FIREBASE_PROJECT_ID.firebaseapp.com/__/auth/handler
You can get your Firebase project ID on the Firebase console settings page. - Create a Sign In with Apple private key.
- In the Firebase console, open the Auth section. On the Sign in method tab, enable the Apple provider. Specify the Service ID you created in the previous section. Also, in the OAuth code flow configuration section, specify your Apple Team ID and the private key and key ID
Authentication usage
To use any authetication provider you can use <EwMacroComponents.SignIn>
with socialsList
array param using SocialListItem
enum from @extrawest/design-system
package (e.g. import { SocialListItem } from "@extrawest/design-system";
Usage Example:
<EwMacroComponents.SignIn
type={SignInType.EMAIL}
socialsList={[SocialListItem.GOOGLE, SocialListItem.APPLE]}
/>
Error component
Usage:
<EwMacroComponents.ErrorPage
errorCode={500}
defaultImage
onMainButtonClick={noop}
bottomNavLinks={{
onFeedbackButtonClick: noop,
onPrivacyButtonClick: noop,
onTermsButtonClick: noop
}}
/>
Property | Type | Value | Required |
---|---|---|---|
errorCode | number | number | true |
defaultImage | boolean | true \| false | false |
onMainButtonClick | VoidFunction | function | false |
Edit User component
Usage:
<EwMacroComponents.EditUserInfo />
Property | Type | Value | Required |
---|---|---|---|
onUserDetele | VoidFunction | callback function | false |
showDeleteUserOption | boolean | true \| false | false |
onBackButton | VoidFunction | callback | false |
DeleteItemsContent | ReactNode | any react node | false |
example:
<EwMacroComponents.EditUserInfo
onBackButton={() => void 0}
showDeleteUserOption
DeleteItemsContent={
<>
<div>
item 1
</div>
<div>
item 1
</div>
<div>
item 1
</div>
</>
}
/>
Delete User component
Property | Type | Value | Required |
---|---|---|---|
children | ReactNode | Content of deleted items to display in modal | false |
onUserDetele | VoidFunction | any callback function | false |
Usage:
<DeleteUser
onUserDetele={onUserDetele}
>
<div>...</div>
</DeleteUser>
Change user password component
No props required.
Usage:
<EwMacroComponents.ChangePassword />
Terms of use Component
Property | Type | Value | Required |
---|---|---|---|
children | ReactNode | Override content of terms of use component | false |
Usage:
<EwMacroComponents.TermsOfUse />
Authors
License
12 days ago
1 month ago
1 month ago
1 month ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago