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
Add phone number
Licenses component
Privacy Policy
Contact Us

Demo

https://ew-design-system-fcbab.web.app/

Usage

npm i @extrawest/design-system

ENVIRONMENT VARIABLES LIST

Firebase mode required env variables

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.

NX_FIREBASE_API_KEY or REACT_APP_FIREBASE_API_KEY - firebase app api key
NX_FIREBASE_AUTH_DOMAIN or REACT_APP_FIREBASE_AUTH_DOMAIN - firebase authentication domain
NX_FIREBASE_PROJECT_ID or REACT_APP_FIREBASE_PROJECT_ID - firebase project id
NX_FIREBASE_STORAGE_BUCKET or REACT_APP_FIREBASE_STORAGE_BUCKET - firebase storage bucket
NX_FIREBASE_MESSAGING_SENDER_ID or REACT_APP_MESSAGING_SENDER_ID - firebase messaging sender id
NX_FIREBASE_APP_ID or REACT_APP_FIREBASE_APP_ID - firebase app id
NX_FIREBASE_MEASUREMENT_ID or REACT_APP_FIREBASE_MEASUREMENT_ID - firebase measurement id
NX_FIREBASE_DATABASE_URL or REACT_APP_FIREBASE_DATABASE_URL - firebase database url

Supabase mode required env variables

NX_SUPABASE_URL or REACT_APP_SUPABASE_URL - supabase url
NX_SUPABASE_KEY or REACT_APP_SUPABASE_KEY - supabase key

Please create supabase app using Supabase Console and supabase documentation . In a result you will get all required variables which we will need in following section.

This variables could be found in Supabase Console

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 onPrivacyButtonClick onTermsButtonClick
isFooterVisible	`boolean`	`true/false`
isHeaderVisible	`boolean`	`true/false`
overrideTheme	`ThemeOptions`	`see mui theme options`
showCookiesModal	`boolean`	`true/false`
onAcceptCookies	`(settings: Array<CookiesSettingsResult>) => void`	`callback on decline cookies button click`
onDeclineCookies	`VoidFunction`	`callback on accept cookies button click`
disabledLocaleList	`Array<CountryCode>`
termsOfUseContent	`ReactNode`	any react node
cookiesContent	`Array<CookiesContent>`
mode	`string`	`"supabase" / "firebase"`
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 setup

Before you begin

Please make sure that env variables are in place.

Firebase mode reqiured setup

Required firebase console setup:

Please make sure you firebase storage option is enabled in Firebase console for the corresponding project.

Firebase storage rules should be explicitly set to give access to profile images to all autenticated users. Also we need to create profile-image folder in root storage to store profile images using Firebase console.

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Firebase Realtime Database option should be activated using Firebase console. Firebase Realtime Database rules should be set to

{
  "rules": {
    "users": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
      }
    }
  }
}

to provide data to authenticated users.

Firebase user management

import { auth } from "@extrawest/design-system"; auth object will provide you several options to handle firebase User.

auth.currentUser

Will provide you the currently signed-in user (or null).

auth.authStateReady Promise which will returns a promise that resolves immediately when the initial auth state is settled. When the promise resolves, the current user might be a valid user or null if the user signed out.

auth.authStateReady()

Adds an observer for changes to the user's sign-in state. Could be usefull to get and store user object.

auth.onAuthStateChanged((user) => {})

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 and App 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 and API 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

Supabase mode reqiured setup

Required Supabase console setup:

Using Supabase Console we need to configure project to handle data storing and authentication flows.

Please make sure to create public storage bucket named public-images with following policies using editor's predefined Give users access to only their own top level folder named as uid template and allowed operation set to

Select
Insert
Update
Delete

in policy editor which will allow user to manage all images under uid named folder in bucket. In a result this bucket should have 4 policy for each opeartion.

Authentication

Supabase Console allows you to manage all auth providers such as Apple, Google etc. usng project dashboard. Supabase social login documentation will provide all required information to get all rqeuired tokens.

Supabase user management

import { supabase } from "@extrawest/design-system"; supabase object will provide you several options to handle supabse User.

supabase.auth.getUser();

Gets the current user details if there is an existing session. This method performs a network request to the Supabase Auth server, so the returned value is authentic and can be used to base authorization rules on.

supabase.auth.onAuthStateChange((event, session) => {
	...
})

Receive a notification every time an auth event happens. session param will return you a session object which contains user object.

Authentication component

Usage:

<EwMacroComponents.SignIn type={SignInType.EMAIL} />

Property	Type	Value	Required
type	`SignInType`	`SignInType.EMAIL 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 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
onUserDeteleSuccess	`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`
onUserDeteleSuccess	`VoidFunction`	`any callback function`	`false`
supabaseOnDeleteuser	`VoidFunction`	`On User delete button click hanlder, required only for supabase`	`if global mode set to supabase`

Usage:

<EwMacroComponents.DeleteUser
	onUserDeteleSuccess={onUserDetele}
>
	<div>...</div>
</EwMacroComponents.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 />

Add phone number

No props required.

Usage:

<EwMacroComponents.AddPhoneNumber />

Licenses

Property	Type	Value	Required
override	`boolean`	Override licenses shown in Licensese page with provided in `licences` param	`false`
licences	`Array<SingleLicence>`	Array of SingleLicence items with `name` and `license` text (both params are required)	`false`

Usage:

<EwMacroComponents.Licences />

Privacy Policy

Property	Type	Value	Required
children	`ReactNode`	`Override placeholder content of privacy policy page`	`false`

Usage:

<EwMacroComponents.PrivacyPolicy>
	<div>content<div>
</EwMacroComponents.PrivacyPolicy>

Contact Us

Property	Type	Value	Required
children	`ReactNode`	`Override content of contact us component`	`false`
socials	`SocialContact`	`Array of Socials items with type and link required params`	`false`

types could be found via ContactsUsSocialItem enum from import { ContactsUsSocialItem } from "@extrawest/design-system";

Usage:

<EwMacroComponents.ContactUs
	socials={[
		{
			link: "link to account",
			type: ContactsUsSocialItem.TELEGRAM
		},
	]}
/>

Authors

License

MIT