@tincre/promo-start v0.0.4
promo-start, by Tincre.dev
A modal onboarding component for Tincre Promo. Use it in conjunction with the promo-dashboard
and other Promo integration applications.
Installation
Use your favorite package manager to rock installation of promo-start
.
Yarn
yarn add @tincre/promo-start@latest @tincre/promo-types@latest # -D if you want this as a dev dep
Npm
npm install @tincre/promo-start@latest @tincre/promo-types@latest # --save-dev if you want it as a dev dep
Tailwindcss Setup
Make sure you add to your tailwind.config.js
configuration file a
new element in the content
property array.
For example,
content: [
'./src/**/*.{js,jsx,ts,tsx}',
'./src/*.{js,jsx,ts,tsx}',
'./node_modules/@tincre/promo-button/**',
'./node_modules/@tincre/promo-dashboard/**',
'./node_modules/@tincre/promo-chat/**',
'./node_modules/@tincre/promo-start/**',
],
Your configuration file will likely look different from the above, depending on your source directories.
.env.local
Example
OPENAI_API_KEY=blahblah
Usage
- Import the frontend component
- Add backend functionality
- Deploy!
Usage example
import { PromoStart, dialogData } from '@tincre/promo-start';
<PromoStart
isOpen={true}
setIsOpen={() => null}
dialogData={dialogData('Tincre')}
/>;
Where isOpen
and setIsOpen
are probably the return values from React's useState
hook.
Backend functionality
Customize styling
Just add the following classes to your tailwindcss or regular css. If
using tailwindcss, use an @apply
directive.
#promo-start-main-dialog-container
#promo-start-main-dialog-backdrop
#promo-start-main-dialog-background-div
#promo-start-dialog-container
#promo-start-dialog-title
#promo-start-dialog-description-container
#promo-start-dialog-description
#promo-start-dialog-button-container
#promo-start-dialog-button
Full CSS Customization Example
The below customizations are an example of how to change the colors of the chat interface and button to your own liking.
#promo-start-main-dialog-container {
@apply relative z-10;
}
#promo-start-main-dialog-backdrop {
@apply fixed inset-0 bg-black/25;
}
#promo-start-main-dialog-background-div {
@apply flex min-h-full items-center justify-center p-4 text-center;
}
#promo-start-dialog-container {
@apply w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all h-96;
}
#promo-start-dialog-title {
@apply text-lg font-medium leading-6 text-gray-900;
}
#promo-start-dialog-description-container {
@apply mt-2;
}
#promo-start-dialog-description {
@apply text-sm text-gray-500;
}
#promo-start-dialog-description-title {
@apply mt-8 text-xl font-bold;
}
#promo-start-dialog-description-content-primary {
@apply ml-4 bg-blue-700 text-gray-50 text-2xl p-1 rounded-md;
}
#promo-start-dialog-description-content-secondary {
@apply dark:text-gray-200;
}
#promo-start-dialog-round-number-1 {
@apply bg-green-700;
}
#promo-start-dialog-round-number-2 {
@apply bg-yellow-500;
}
#promo-start-dialog-round-number-3 {
@apply bg-red-700;
}
#promo-start-dialog-button-container {
@apply absolute bottom-0 pb-6;
}
#promo-start-dialog-button {
@apply inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2;
}
Support
- Documentation: tincre.dev/docs
- Guides and how-tos: tincre.dev/docs/guides
- Reference docs: tincre.dev/docs/reference
- Community: community.tincre.dev
License
This code is free to use for your commercial or personal projects. It is open-source licensed under the Mozilla Public License 2.0.
You will see various headers throughout the codebase and can reference the license directly via LICENSE herein.
Development
Releases
We use npm
for releases. In particular, we use
npm --publish
to publish.
Currently, only @thinkjrs has the ability to release.
Release prep
Prior to using npm --publish
a release tag needs to be created for
the library using our standard tagging practices.
Ensure that tests :white_check_mark: pass during this process prior to releasing via npm.
Test release
To do a proper release, ensure you're in the base repo directory and run
npm publish . --access public --dry-run
.
Release latest
tag
To complete a full release to the latest
npm dist-tag
, ensure you're in
the base repo directory and run npm publish . --access public
.
š That's it! š