├── .config └── example.env ├── .env ├── .firebaserc ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── enhancement.md │ └── help_wanted.md └── pull_request_template.md ├── .gitignore ├── .prettierignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── firebase.json ├── firecors.json ├── firestorage.rules ├── firestore.indexes.json ├── firestore.rules ├── functions ├── .config │ └── example.env ├── .gitignore ├── package-lock.json ├── package.json ├── src │ ├── 0_constants │ │ ├── AuthConstants.js │ │ ├── DatabaseConstants.js │ │ ├── EnvKeyConstants.js │ │ ├── EnvValueConstants.js │ │ ├── FireStorageConstants.js │ │ ├── FunctionConstants.js │ │ ├── InternalErrorConstants.js │ │ ├── UnexpectedErrorConstants.js │ │ └── index.js │ ├── 1_fire_init │ │ ├── core.js │ │ └── index.js │ ├── 1_utils │ │ ├── badWords.js │ │ ├── codeToolings.js │ │ ├── index.js │ │ ├── objects.js │ │ ├── reservedUsername.js │ │ └── validation.js │ ├── 2_fire_storage │ │ ├── index.js │ │ ├── userAvatar.js │ │ └── utils.js │ ├── 2_fire_store │ │ ├── index.js │ │ ├── seller.js │ │ ├── sellerSettings.js │ │ ├── senshiReviews.js │ │ ├── userSettings.js │ │ └── utils.js │ ├── 3_fire_funct │ │ ├── constants.js │ │ ├── getCustomToken.js │ │ ├── index.js │ │ ├── onBillingAlert.js │ │ ├── onCommentCreate.js │ │ ├── onCommentDelete.js │ │ ├── onDocCreate.js │ │ ├── onDocUpdate.js │ │ ├── onFacebookSignIn.js │ │ ├── onSellerSeed.js │ │ ├── onTwitchSignIn.js │ │ ├── onUserCreate.js │ │ └── utils.js │ ├── index.js │ └── resolvers │ │ ├── Mutation.js │ │ ├── Query.js │ │ ├── index.js │ │ └── typeDefs.js └── uploadEnv.js ├── install.js ├── package-lock.json ├── package.json ├── project.json ├── public ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── browserconfig.xml ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── index.html ├── manifest.json ├── mstile-150x150.png └── safari-pinned-tab.svg └── src ├── 0_apollo_init └── index.js ├── 0_app_flavor └── index.js ├── 0_assets ├── audio │ └── sampleVoice.mp3 ├── css │ ├── App.css │ ├── animate.module.css │ └── nucleo-icons.css ├── demo │ ├── demo.css │ └── react-demo.css ├── fonts │ ├── nucleo.eot │ ├── nucleo.ttf │ ├── nucleo.woff │ └── nucleo.woff2 ├── icons │ ├── games │ │ ├── Apex.ico │ │ ├── Dota2.png │ │ ├── Fortnite.ico │ │ ├── LOL.ico │ │ └── PUBG.ico │ └── gifts │ │ ├── affection.png │ │ ├── bauble.png │ │ ├── building.png │ │ ├── carousel.png │ │ ├── crowns.png │ │ ├── cupid.png │ │ ├── donut.png │ │ ├── flower-bouquet.png │ │ ├── friends.png │ │ ├── handbag.png │ │ ├── kitty.png │ │ ├── lips.png │ │ ├── lollipop.png │ │ ├── love-message.png │ │ ├── microphone.png │ │ ├── positive-vote.png │ │ ├── ring.png │ │ ├── rose.png │ │ ├── sunflower.png │ │ └── top-hat.png ├── img │ ├── braden-collum.jpg │ ├── christian.jpg │ ├── denys.jpg │ ├── dots.png │ ├── fabien-bazanegue.jpg │ ├── favicon-32x32.png │ ├── favicon-soldier.png │ ├── favicon.ico │ ├── gucci.png │ ├── index │ │ ├── dota2.jpg │ │ ├── fornite.jpg │ │ └── lol.jpg │ ├── jacket.png │ ├── james.jpg │ ├── johana.jpg │ ├── kareya-saleh.jpg │ ├── logo-soldier.png │ ├── mark-finn.jpg │ ├── michael.jpg │ ├── mike.jpeg │ ├── mike.jpg │ ├── olivia.jpg │ ├── p10.jpg │ ├── path4.png │ ├── placeholder.jpg │ ├── readme │ │ ├── error.png │ │ ├── index.png │ │ ├── joinChannel.png │ │ ├── policy.png │ │ ├── profile.png │ │ ├── reset.png │ │ ├── settings.png │ │ ├── signIn.png │ │ └── signUp.png │ ├── ryan.png │ ├── shape.png │ ├── square-purple-1.png │ ├── square1.png │ ├── square2.png │ ├── square3.png │ ├── square4.png │ └── square5.png └── scss │ ├── blk-design-system-pro-react.scss │ └── blk-design-system-pro │ ├── _buttons-extend.scss │ ├── _dropdown-extend.scss │ ├── _example-pages.scss │ ├── _footers.scss │ ├── _info-areas.scss │ ├── _media.scss │ ├── _misc-extend.scss │ ├── _mixins.scss │ ├── _modals-extend.scss │ ├── _navbar-extend.scss │ ├── _pills-extend.scss │ ├── _responsive.scss │ ├── _sections-extend.scss │ ├── _social-buttons.scss │ ├── _tables.scss │ ├── _variables.scss │ ├── avatars │ ├── _avatar-group.scss │ └── _avatar.scss │ ├── bootstrap │ ├── _alert.scss │ ├── _badge.scss │ ├── _breadcrumb.scss │ ├── _button-group.scss │ ├── _buttons.scss │ ├── _card.scss │ ├── _carousel.scss │ ├── _close.scss │ ├── _code.scss │ ├── _custom-forms.scss │ ├── _dropdown.scss │ ├── _forms.scss │ ├── _functions.scss │ ├── _grid.scss │ ├── _images.scss │ ├── _input-group.scss │ ├── _jumbotron.scss │ ├── _list-group.scss │ ├── _media.scss │ ├── _mixins.scss │ ├── _modal.scss │ ├── _nav.scss │ ├── _navbar.scss │ ├── _pagination.scss │ ├── _popover.scss │ ├── _print.scss │ ├── _progress.scss │ ├── _reboot.scss │ ├── _root.scss │ ├── _spinners.scss │ ├── _tables.scss │ ├── _toasts.scss │ ├── _tooltip.scss │ ├── _transitions.scss │ ├── _type.scss │ ├── _utilities.scss │ ├── _variables.scss │ ├── bootstrap-grid.scss │ ├── bootstrap-reboot.scss │ ├── bootstrap.scss │ ├── mixins │ │ ├── _alert.scss │ │ ├── _background-variant.scss │ │ ├── _badge.scss │ │ ├── _border-radius.scss │ │ ├── _box-shadow.scss │ │ ├── _breakpoints.scss │ │ ├── _buttons.scss │ │ ├── _caret.scss │ │ ├── _clearfix.scss │ │ ├── _deprecate.scss │ │ ├── _float.scss │ │ ├── _forms.scss │ │ ├── _gradients.scss │ │ ├── _grid-framework.scss │ │ ├── _grid.scss │ │ ├── _hover.scss │ │ ├── _image.scss │ │ ├── _list-group.scss │ │ ├── _lists.scss │ │ ├── _nav-divider.scss │ │ ├── _pagination.scss │ │ ├── _reset-text.scss │ │ ├── _resize.scss │ │ ├── _screen-reader.scss │ │ ├── _size.scss │ │ ├── _table-row.scss │ │ ├── _text-emphasis.scss │ │ ├── _text-hide.scss │ │ ├── _text-truncate.scss │ │ ├── _transition.scss │ │ └── _visibility.scss │ ├── utilities │ │ ├── _align.scss │ │ ├── _background.scss │ │ ├── _borders.scss │ │ ├── _clearfix.scss │ │ ├── _display.scss │ │ ├── _embed.scss │ │ ├── _flex.scss │ │ ├── _float.scss │ │ ├── _overflow.scss │ │ ├── _position.scss │ │ ├── _screenreaders.scss │ │ ├── _shadows.scss │ │ ├── _sizing.scss │ │ ├── _spacing.scss │ │ ├── _stretched-link.scss │ │ ├── _text.scss │ │ └── _visibility.scss │ └── vendor │ │ └── _rfs.scss │ ├── cards │ ├── _card-background.scss │ ├── _card-blog.scss │ ├── _card-contact.scss │ ├── _card-extend.scss │ ├── _card-fashion.scss │ ├── _card-form-horizontal.scss │ ├── _card-login.scss │ ├── _card-no-shadow.scss │ ├── _card-pricing.scss │ ├── _card-product.scss │ ├── _card-profile.scss │ ├── _card-raised.scss │ └── _card-testimonials.scss │ ├── change maded to vendor scss files.txt │ ├── custom │ ├── _alerts.scss │ ├── _badge.scss │ ├── _buttons.scss │ ├── _card.scss │ ├── _checkboxes-radio.scss │ ├── _dropdown.scss │ ├── _example-pages.scss │ ├── _fixed-plugin.scss │ ├── _footer.scss │ ├── _forms.scss │ ├── _functions.scss │ ├── _icons.scss │ ├── _images.scss │ ├── _info-areas.scss │ ├── _input-group.scss │ ├── _misc.scss │ ├── _mixins.scss │ ├── _modal.scss │ ├── _navbar.scss │ ├── _pagination.scss │ ├── _pills.scss │ ├── _progress.scss │ ├── _rtl.scss │ ├── _sections.scss │ ├── _tables.scss │ ├── _tabs.scss │ ├── _type.scss │ ├── _utilities.scss │ ├── _variables.scss │ ├── cards │ │ ├── _card-chart.scss │ │ ├── _card-map.scss │ │ ├── _card-plain.scss │ │ ├── _card-register.scss │ │ ├── _card-stats.scss │ │ ├── _card-task.scss │ │ └── _card-user.scss │ ├── mixins │ │ ├── _alert.scss │ │ ├── _background-variant.scss │ │ ├── _badges.scss │ │ ├── _buttons.scss │ │ ├── _dropdown.scss │ │ ├── _forms.scss │ │ ├── _icon.scss │ │ ├── _inputs.scss │ │ ├── _modals.scss │ │ ├── _page-header.scss │ │ ├── _popovers.scss │ │ ├── _vendor-prefixes.scss │ │ ├── _wizard.scss │ │ └── opacity.scss │ ├── sections │ │ ├── _blogs.scss │ │ ├── _contactus.scss │ │ ├── _features.scss │ │ ├── _headers.scss │ │ ├── _pricing.scss │ │ ├── _projects.scss │ │ ├── _social-subscribe-lines.scss │ │ ├── _team.scss │ │ └── _testimonials.scss │ ├── utilities │ │ ├── _backgrounds.scss │ │ ├── _floating.scss │ │ ├── _helper.scss │ │ ├── _position.scss │ │ ├── _shadows.scss │ │ ├── _sizing.scss │ │ ├── _spacing.scss │ │ ├── _text.scss │ │ └── _transform.scss │ └── vendor │ │ ├── _plugin-animate-bootstrap-notify.scss │ │ ├── _plugin-bootstrap-switch.scss │ │ ├── _plugin-datetimepicker.scss │ │ ├── _plugin-nouislider.scss │ │ └── _plugin-perfect-scrollbar.scss │ ├── mixins │ ├── _social-buttons.scss │ └── _tags.scss │ ├── plugins │ ├── _plugin-bootstrap-select.scss │ ├── _plugin-carousel-slick.scss │ ├── _plugin-datetimepicker.scss │ ├── _plugin-isometricGrids.scss │ ├── _plugin-jasny-fileupload.scss │ └── _plugin-tagsinput.scss │ ├── react │ ├── _dropdown-extend.scss │ ├── _example-pages.scss │ ├── _fileinput.scss │ ├── _footers.scss │ ├── _misc-extend.scss │ ├── _modals-extend.scss │ ├── _navbar-extend.scss │ ├── _responsive.scss │ ├── custom │ │ ├── _alerts.scss │ │ ├── _checkboxes-radio.scss │ │ ├── _example-pages.scss │ │ ├── _footer.scss │ │ ├── _inputs.scss │ │ ├── _navbar.scss │ │ ├── _sections.scss │ │ ├── _tabs.scss │ │ └── _type.scss │ ├── plugins │ │ ├── _plugin-headroomjs.scss │ │ ├── _plugin-react-datetime.scss │ │ ├── _plugin-react-select.scss │ │ ├── _plugin-react-slick.scss │ │ └── _plugin-react-tagsinput.scss │ └── react-differences.scss │ └── sections │ ├── _accordion.scss │ ├── _blogs.scss │ ├── _contactus.scss │ ├── _features.scss │ ├── _headers.scss │ ├── _pricing.scss │ ├── _projects.scss │ ├── _social-subscribe-lines.scss │ ├── _tables.scss │ ├── _team.scss │ └── _testimonials.scss ├── 0_constants ├── AuthConstants.js ├── DatabaseConstants.js ├── EnvKeyConstants.js ├── EnvValueConstants.js ├── FireStorageConstants.js ├── FunctionConstants.js ├── InternalErrorConstants.js ├── UnexpectedErrorConstants.js └── index.js ├── 0_styled ├── index.js ├── justify.js ├── marPad.js └── utils.js ├── 1_fire_init ├── core.js ├── handleDifferentCredential.js └── index.js ├── 1_utils ├── badWords.js ├── codeToolings.js ├── index.js ├── objects.js ├── reservedUsername.js └── validation.js ├── 2_fire_funct ├── cloudFunct.js └── index.js ├── 2_fire_storage ├── index.js ├── userAvatar.js └── utils.js ├── 2_fire_store ├── index.js ├── seller.js ├── sellerReviews.js ├── sellerSettings.js ├── userSettings.js └── utils.js ├── 2_routes ├── constants.js ├── index.js └── utils.js ├── 2_state ├── Alert │ ├── StoreAlert.js │ └── index.js ├── AlertSide │ ├── StoreAlertSide.js │ └── index.js ├── Modal │ ├── StoreModal.js │ └── index.js ├── Progress │ ├── StoreProgress.js │ └── index.js ├── SignIn │ ├── StoreSignIn.js │ └── index.js ├── Sound │ ├── StoreSound.js │ └── index.js ├── StateContainer.jsx ├── User │ ├── StoreUser.js │ └── index.js ├── Wrapper │ ├── StoreWrapper.js │ └── index.js ├── constants.js └── index.js ├── 3_api ├── handleIsEmailAccountNotExist.js ├── handleIsPasswordResetAble.js ├── handlePasswordReset.js ├── handleSignInWithEmailAndPassword.js ├── handleSignInWithSocials.js ├── handleSignUpWithEmailAndPassword.js └── index.js ├── 3_app_event ├── getRedirectResult.js ├── index.js ├── onAuthStateChange.js └── userPresence.js ├── 4_comp_utils └── index.js ├── 5_comp_0 ├── Button │ ├── Button.jsx │ ├── index.js │ └── styles.module.css ├── Helmet │ ├── Helmet.js │ └── index.js ├── Icon │ ├── Icon.jsx │ └── index.js ├── Image │ ├── Image.jsx │ └── index.js ├── Link │ ├── Link.jsx │ └── index.js ├── RowCol │ ├── RowCol.jsx │ └── index.js ├── UncontrolledTooltip │ ├── UncontrolledTooltip.jsx │ └── index.js └── index.js ├── 5_comp_1 ├── Alert │ ├── Alert.jsx │ └── index.js ├── AvatarUser │ ├── AvatarUser.jsx │ └── index.js ├── Badges │ ├── Badges.jsx │ ├── index.js │ ├── styles.module.css │ └── utils.js ├── BrandNavbar │ ├── BrandNavbar.jsx │ └── index.js ├── ButtonSignInUp │ ├── ButtonSignInUp.jsx │ └── index.js ├── ButtonSound │ ├── ButtonSound.jsx │ ├── index.js │ └── styled.js ├── ButtonSubmit │ ├── ButtonSubmit.jsx │ └── index.js ├── ButtonsCommon │ ├── ButtonsCommon.jsx │ ├── index.js │ └── utils.js ├── CardUserSimple │ ├── CardUserSimple.jsx │ └── index.js ├── Carousel │ ├── Carousel.jsx │ ├── index.js │ ├── styled.js │ └── utils.js ├── CheckBox │ ├── CheckBox.jsx │ └── index.js ├── CheckBoxIcon │ ├── CheckBoxIcon.jsx │ ├── index.js │ └── utils.js ├── Comments │ ├── Comments.jsx │ └── index.js ├── DropdownMenuNavbar │ ├── DropdownMenuNavbar.jsx │ ├── index.js │ └── utils.js ├── ErrorBoundary │ ├── ErrorBoundary.jsx │ └── index.js ├── FinalForm │ ├── FinalForm.jsx │ └── index.js ├── Footer │ ├── Footer.jsx │ ├── index.js │ └── styled.js ├── HeaderCollapsed │ ├── HeaderCollapsed.jsx │ └── index.js ├── HeaderLined │ ├── HeaderLined.jsx │ └── index.js ├── IconCard │ ├── IconCard.jsx │ └── index.js ├── IconNotification │ ├── IconNotification.jsx │ └── index.js ├── ImageUpload │ ├── ImageUpload.jsx │ └── index.js ├── ImagesTooltip │ ├── ImagesTooltip.jsx │ ├── index.js │ └── utils.js ├── InputDate │ ├── InputDate.jsx │ └── index.js ├── InputInteger │ ├── InputInteger.jsx │ └── index.js ├── InputSelect │ ├── InputSelect.jsx │ ├── index.js │ └── styles.css ├── InputText │ ├── InputText.jsx │ └── index.js ├── LabelForm │ ├── LabelForm.js │ └── index.js ├── LightBox │ ├── LightBox.jsx │ └── index.js ├── ListNavItem │ ├── ListNavItem.jsx │ ├── index.js │ ├── style.css │ └── utils.js ├── LoaderNavLink │ ├── LoaderNavLink.jsx │ └── index.js ├── MenuHamburger │ ├── MenuHamburger.jsx │ └── index.js ├── Modal │ ├── Modal.jsx │ └── index.js ├── ModalSimple │ ├── ModalSimple.jsx │ └── index.js ├── PageError │ ├── PageError.jsx │ └── index.js ├── Pagination │ ├── Pagination.jsx │ └── index.js ├── Popover │ ├── Popover.jsx │ └── index.js ├── Progress │ ├── Progress.jsx │ └── index.js ├── Section │ ├── Section.jsx │ └── index.js ├── Status │ ├── Status.jsx │ ├── index.js │ ├── styles.module.css │ └── utils.js ├── Tab │ ├── Tab.jsx │ └── index.js ├── TabListVertical │ ├── TabListVertical.jsx │ ├── index.js │ └── utils.js ├── TabPaneContainer │ ├── TabPaneContainer.jsx │ └── index.jsx ├── TextAlert │ ├── TextAlert.jsx │ └── index.js ├── TextIcon │ ├── TextIcon.jsx │ └── index.js ├── Wrapper │ ├── Wrapper.jsx │ └── index.js └── index.js ├── 5_comp_2 ├── ButtonsImage │ ├── ButtonsImage.jsx │ ├── index.js │ ├── styled.js │ └── utils.js ├── CardGift │ ├── CardGift.jsx │ ├── index.js │ └── utils.js ├── CardUser │ ├── CardUser.jsx │ ├── index.js │ └── styled.js ├── CardUserHorizontal │ ├── CardUserHorizontal.jsx │ ├── index.js │ └── styled.js ├── CarouselCardSimple │ ├── CarouselCardSimple.jsx │ ├── index.js │ └── utils.js ├── CarouselLightBox │ ├── CarouselLightBox.jsx │ ├── index.js │ └── utils.js ├── ChatContactList │ ├── ChatContactList.jsx │ ├── index.js │ └── utils.js ├── CommentWithPagination │ ├── CommentWithPagination.jsx │ └── index.js ├── DropdownNavbar │ ├── DropdownNavbar.jsx │ └── index.js ├── FinalInput │ ├── FinalInput.jsx │ └── index.js ├── ModalImageCropper │ ├── ModalImageCropper.jsx │ └── index.js ├── PanelFilterSearch │ ├── PanelFilterSearch.jsx │ └── index.js ├── PanelSortBy │ ├── PanelSortBy.jsx │ └── index.js ├── TabPaneSettingList │ ├── TabPaneSettingList.jsx │ ├── index.js │ └── utils.js ├── TabPanelService │ ├── TabPanelService.jsx │ └── index.js └── index.js ├── 5_comp_3 ├── ChatMessageContainer │ ├── ChatMessageContainer.jsx │ ├── index.js │ └── utils.js ├── FinalDateBirthDate │ ├── FinalDateBirthDate.jsx │ └── index.js ├── FinalSelectCountry │ ├── FinalSelectCountry.jsx │ └── index.js ├── FinalSelectExpiryMonth │ ├── FinalSelectExpiryMonth.jsx │ └── index.js ├── FinalSelectExpiryYear │ ├── FinalSelectExpiryYear.jsx │ └── index.js ├── FinalSelectGame │ ├── FinalSelectGame.jsx │ └── index.js ├── FinalSelectGender │ ├── FinalSelectGender.jsx │ └── index.js ├── FinalSelectLanguages │ ├── FinalSelectLanguages.jsx │ └── index.js ├── FinalTextCardCVC │ ├── FinalTextCardCVC.jsx │ └── index.js ├── FinalTextCardHolderName │ ├── FinalTextCardHolderName.jsx │ └── index.js ├── FinalTextCardNumber │ ├── FinalTextCardNumber.jsx │ └── index.js ├── FinalTextEmail │ ├── FinalTextEmail.jsx │ └── index.js ├── FinalTextName │ ├── FinalTextName.jsx │ └── index.js ├── FinalTextPassword │ ├── FinalTextPassword.jsx │ └── index.js ├── TabServices │ ├── TabServices.jsx │ └── index.js ├── UploaderAvatar │ ├── UploaderAvatar.js │ ├── index.js │ └── utils.js └── index.js ├── 5_comp_4 ├── CheckoutCard │ ├── CheckoutCard.jsx │ ├── index.js │ └── utils.js ├── ContainerSearchResults │ ├── ContainerSearchResults.jsx │ ├── index.js │ └── utils.js ├── FormCard │ ├── FormCard.jsx │ └── index.js ├── FormResetPassword │ ├── FormResetPassword.jsx │ └── index.js ├── FormSignIn │ ├── FormSignIn.jsx │ └── index.js ├── FormSignUp │ ├── FormSignUp.jsx │ ├── index.js │ └── utils.js ├── NavbarIndex │ ├── NavbarIndex.jsx │ └── index.js ├── TabPaneAccountSettings │ ├── TabPaneAccountSettings.jsx │ └── index.js ├── TabPaneGeneralSettings │ ├── TabPaneGeneralSettings.jsx │ └── index.js └── index.js ├── 5_comp_5 ├── TabPanePaymentSettings │ ├── TabPanePaymentSettings.jsx │ └── index.js └── index.js ├── 5_comp_6 ├── PageChat │ ├── PageChat.jsx │ └── index.js ├── PageCheckout │ ├── PageCheckout.jsx │ └── index.js ├── PageFilter │ ├── PageFilter.jsx │ └── index.js ├── PageHelp │ ├── PageHelp.jsx │ └── index.js ├── PageIndex │ ├── PageIndex.jsx │ ├── TabDiscover.js │ └── index.js ├── PagePasswordReset.jsx ├── PagePolicies │ ├── Cookie.js │ ├── PagePolicies.jsx │ ├── Privacy.js │ ├── Terms.js │ └── index.js ├── PageProfile │ ├── PageProfile.jsx │ ├── index.js │ ├── styled.js │ └── utils.js ├── PageSettings.jsx ├── PageSignIn.jsx ├── PageSignUp.jsx └── Router.jsx ├── App.jsx ├── index.js ├── serviceWorker.js ├── sw-build.js └── sw-template.js /.config/example.env: -------------------------------------------------------------------------------- 1 | # currently there is no variables yet 2 | # you need two env file: prod.env and dev.env 3 | REACT_APP_API_KEY='isdhaodowqje9120dj821hd81dwdidsoaik' 4 | REACT_APP_AUTH_DOMAIN='xxx.firebaseapp.com' 5 | REACT_APP_DATABASE_URL='https://xxx.firebaseio.com' 6 | REACT_APP_PROJECT_ID='xxx' 7 | REACT_APP_STORAGE_BUCKET='xxx.appspot.com' 8 | REACT_APP_MESSAGING_SENDER_ID='8949848484848' 9 | REACT_APP_APP_ID='1:8949848484848:web:z27yx73pz7my3e7' 10 | REACT_APP_FOLLOW_CURSOR=1 11 | REACT_APP_TWITCH_CLIENT=dhjshdjsahdsaidhsadjksa 12 | PORT=3000 13 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | 2 | # this environment variable file is safe to expose 3 | # https://itnext.io/configure-absolute-paths-with-create-react-app-and-flow-e4b8922676a2 4 | NODE_PATH=src 5 | BROWSER=none 6 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "gamessenshi" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "[BUG]" 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/enhancement.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Enhancement 3 | about: New feature or request 4 | title: "[Enhancement]" 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/help_wanted.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Help wanted 3 | about: Looking for help 4 | title: "[Help Wanted]" 5 | labels: help wanted 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | What has been changed? 2 | 1. 3 | 2. 4 | 3. 5 | 6 | What has been achieved? 7 | 1. 8 | 2. 9 | 3. 10 | 11 | From which issue(s) or card(s) (link if any)? 12 | 1. 13 | 2. 14 | 3. 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # environments 15 | .config/dev.env 16 | .config/prod.env 17 | .config/devLocal.env 18 | .config/prodLocal.env 19 | .config.zip 20 | 21 | # cache 22 | /.firebase 23 | 24 | # editor 25 | /.vscode 26 | 27 | # misc 28 | .DS_Store 29 | .env.local 30 | .env.development.local 31 | .env.test.local 32 | .env.production.local 33 | 34 | npm-debug.log* 35 | yarn-debug.log* 36 | yarn-error.log* 37 | firebase-debug.log 38 | 39 | test.js -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | *.scss -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # CONTRIBUTING 2 | 3 | We use Trello for task management, you can join it [here](https://trello.com/invite/b/tAyH3oig/a5374e9eaa1bbe644f3e7367d1e23300/game-senshi)! 4 | 5 | ## Working on Code 6 | 7 | 1. Create a card and describe what you are going to do, skip this if you want to work on existing task. 8 | 2. Pick a new task, edit your name into the card . 9 | 3. If you want to work on a on going task, get permission from person who is already working on it first. 10 | 4. Start a new branch or fork and start hacking. 11 | 5. Always let others in `Discord` know what you are working on. 12 | 13 | ## Adding Library 14 | 15 | If you have any library that you want to use, please discuss it with the team first, as we want to avoid using different library that do the same thing. 16 | 17 | ## Resources 18 | 19 | Please read [wiki](https://github.com/tylim88/GameSenshi/wiki) for details of our code, techs, guides and resources. 20 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "firestore": { 3 | "rules": "/firestore.rules", 4 | "indexes": "/firestore.indexes.json" 5 | }, 6 | "functions": { 7 | "source": "./functions" 8 | }, 9 | "hosting": { 10 | "public": "build", 11 | "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], 12 | "rewrites": [ 13 | { 14 | "source": "**", 15 | "destination": "/index.html" 16 | } 17 | ] 18 | }, 19 | "storage": { 20 | "rules": "/firestorage.rules" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /firecors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "origin": ["*"], 4 | "method": ["GET"], 5 | "maxAgeSeconds": 3600 6 | } 7 | ] 8 | -------------------------------------------------------------------------------- /firestorage.rules: -------------------------------------------------------------------------------- 1 | service firebase.storage { 2 | match /b/{bucket}/o { 3 | match /{allPaths=**} { 4 | allow read, write: if request.auth!=null; 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /firestore.indexes.json: -------------------------------------------------------------------------------- 1 | { 2 | // Example: 3 | // 4 | // "indexes": [ 5 | // { 6 | // "collectionGroup": "widgets", 7 | // "queryScope": "COLLECTION", 8 | // "fields": [ 9 | // { "fieldPath": "foo", "arrayConfig": "CONTAINS" }, 10 | // { "fieldPath": "bar", "mode": "DESCENDING" } 11 | // ] 12 | // }, 13 | // 14 | // "fieldOverrides": [ 15 | // { 16 | // "collectionGroup": "widgets", 17 | // "fieldPath": "baz", 18 | // "indexes": [ 19 | // { "order": "ASCENDING", "queryScope": "COLLECTION" } 20 | // ] 21 | // }, 22 | // ] 23 | // ] 24 | "indexes": [], 25 | "fieldOverrides": [] 26 | } 27 | -------------------------------------------------------------------------------- /firestore.rules: -------------------------------------------------------------------------------- 1 | rules_version = '2'; 2 | service cloud.firestore { 3 | match /databases/{database}/documents { 4 | match /users/{userId} { 5 | allow get, create: if request.auth !=null && request.auth.uid == userId; 6 | 7 | match /settings/notifications { 8 | allow read, write: if request.auth !=null && request.auth.uid == userId; 9 | } 10 | match /settings/general { 11 | allow read; 12 | allow write: if request.auth !=null && request.auth.uid == userId; 13 | } 14 | match /sellers/{sellerUid}{ 15 | allow read, write: if request.auth !=null && request.auth.uid == userId; 16 | } 17 | } 18 | match /sellers/{sellerUid}{ 19 | allow get; 20 | match /settings/profile{ 21 | allow get; 22 | allow write: if request.auth !=null && request.auth.uid == sellerUid; 23 | } 24 | match /reviews/{commentsUid}{ 25 | allow get; 26 | } 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /functions/.config/example.env: -------------------------------------------------------------------------------- 1 | # you need two env file, prod.env and dev.env 2 | # the name follow front end name for convenience 3 | # name is lowecase because firebase config only allow lower case 4 | env_playground_enabled=true #allow playground or not 5 | env_cors_whitelist=https://yourapp1.com/index,https://yourapp2.com/,http://localhost:3000 6 | # third party service 7 | env_apollo_engine_api_key=4en93e9r5eh76fhqxd3kfnaev2jcxy 8 | env_project_id=gamessenshi 9 | env_twitch_id=sz9dmu9u823euyz83m8eze893ne83 10 | env_twitch_secret=ux38xyn3ixheuiurby37x73y -------------------------------------------------------------------------------- /functions/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | 4 | # environments 5 | /.config/dev.env 6 | /.config/prod.env 7 | 8 | # build 9 | /dist 10 | 11 | # cache 12 | .cache 13 | 14 | # misc 15 | test.js -------------------------------------------------------------------------------- /functions/src/0_constants/AuthConstants.js: -------------------------------------------------------------------------------- 1 | const AUTH_GOOGLE = 'Google' 2 | const AUTH_FACEBOOK = 'Facebook' 3 | const AUTH_TWITCH = 'Twitch' 4 | 5 | export { AUTH_GOOGLE, AUTH_FACEBOOK, AUTH_TWITCH } 6 | -------------------------------------------------------------------------------- /functions/src/0_constants/DatabaseConstants.js: -------------------------------------------------------------------------------- 1 | const DATABASE_STATUS_ONLINE = 'online' 2 | const DATABASE_STATUS_ONLINE_LAST = 'onlineLast' 3 | 4 | const databasePathStatus = uid => '/status/' + uid 5 | 6 | export { 7 | DATABASE_STATUS_ONLINE, 8 | DATABASE_STATUS_ONLINE_LAST, 9 | databasePathStatus, 10 | } 11 | -------------------------------------------------------------------------------- /functions/src/0_constants/EnvKeyConstants.js: -------------------------------------------------------------------------------- 1 | // firebase do not allow to use any capital letter in env var name 2 | // these env only used by backend 3 | const ENV = 'env' 4 | const generateEnv = string => ENV + '_' + string 5 | const ENV_ENABLE_PLAYGROUND = generateEnv('playground_enabled') 6 | const ENV_CORS_WHITELIST = generateEnv('cors_whitelist') 7 | const ENV_VERIFY_EMAIL_API_URL = generateEnv('verify_email_api_url') 8 | const ENV_APOLLO_ENGINE_API_KEY = generateEnv('apollo_engine_api_key') 9 | const ENV_PROJECT_ID = generateEnv('project_id') 10 | const ENV_TWITCH_ID = generateEnv('twitch_id') 11 | const ENV_TWITCH_SECRET = generateEnv('twitch_secret') 12 | 13 | export { 14 | ENV, 15 | ENV_ENABLE_PLAYGROUND, 16 | ENV_VERIFY_EMAIL_API_URL, 17 | ENV_APOLLO_ENGINE_API_KEY, 18 | ENV_CORS_WHITELIST, 19 | ENV_PROJECT_ID, 20 | ENV_TWITCH_ID, 21 | ENV_TWITCH_SECRET, 22 | } 23 | -------------------------------------------------------------------------------- /functions/src/0_constants/EnvValueConstants.js: -------------------------------------------------------------------------------- 1 | const env = process.env 2 | 3 | const ENV_VALUE_FIREBASE_CONFIG = Object.freeze({ 4 | apiKey: env.REACT_APP_API_KEY, 5 | authDomain: env.REACT_APP_AUTH_DOMAIN, 6 | databaseURL: env.REACT_APP_DATABASE_URL, 7 | projectId: env.REACT_APP_PROJECT_ID, 8 | storageBucket: env.REACT_APP_STORAGE_BUCKET, 9 | messagingSenderId: env.REACT_APP_MESSAGING_SENDER_ID, 10 | appId: env.REACT_APP_APP_ID, 11 | }) 12 | 13 | const ENV_VALUE_TWITCH_CLIENT = env.REACT_APP_TWITCH_CLIENT 14 | 15 | let redirect = '' 16 | 17 | try { 18 | redirect = window.location.origin 19 | } catch (err) { 20 | // back end doesnt need this, this is to prevent error in backen because window not defined 21 | } 22 | 23 | const ENV_VALUE_TWITCH_OAUTH_LINK = `https://id.twitch.tv/oauth2/authorize?client_id=${ENV_VALUE_TWITCH_CLIENT}&redirect_uri=${redirect}&response_type=code&scope=openid+user_read+user:read:email&force_verify=true` 24 | 25 | export { ENV_VALUE_FIREBASE_CONFIG, ENV_VALUE_TWITCH_OAUTH_LINK } 26 | -------------------------------------------------------------------------------- /functions/src/0_constants/FunctionConstants.js: -------------------------------------------------------------------------------- 1 | const FUNCTION_DATA = 'data' 2 | const FUNCTION_STATUS = 'status' 3 | const FUNCTION_CODE = 'code' 4 | const FUNCTION_MESSAGE = 'message' 5 | const FUNCTION_INPUT = 'Input' 6 | const FUNCTION_EMAIL = 'email' 7 | const FUNCTION_PASSWORD = 'password' 8 | const FUNCTION_DISPLAY_NAME = 'displayName' 9 | const FUNCTION_OAUTH_CODE = 'oAuthCode' 10 | const FUNCTION_TOKEN_CUSTOM = 'customToken' 11 | const FUNCTION_REDIRECT_URI = 'redirectUri' 12 | const FUNCTION_UID = 'uid' 13 | const FUNCTION_ON_DATA_SEED = 'onSellerSeed' 14 | const FUNCTION_ON_TWITCH_SIGN_IN = 'onTwitchSignIn' 15 | 16 | export { 17 | FUNCTION_DATA, 18 | FUNCTION_STATUS, 19 | FUNCTION_CODE, 20 | FUNCTION_MESSAGE, 21 | FUNCTION_INPUT, 22 | FUNCTION_EMAIL, 23 | FUNCTION_PASSWORD, 24 | FUNCTION_DISPLAY_NAME, 25 | FUNCTION_OAUTH_CODE, 26 | FUNCTION_TOKEN_CUSTOM, 27 | FUNCTION_REDIRECT_URI, 28 | FUNCTION_ON_DATA_SEED, 29 | FUNCTION_ON_TWITCH_SIGN_IN, 30 | FUNCTION_UID, 31 | } 32 | -------------------------------------------------------------------------------- /functions/src/1_fire_init/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | bucketDefault, 3 | firestore, 4 | auth, 5 | onCall, 6 | functions, 7 | pubSub, 8 | CORS_WHITE_LIST, 9 | PLAYGROUND_ENABLED, 10 | APOLLO_ENGINE_API_KEY, 11 | TWITCH_ID, 12 | TWITCH_SECRET, 13 | PROJECT_ID, 14 | } from './core' 15 | 16 | export { 17 | bucketDefault, 18 | firestore, 19 | auth, 20 | onCall, 21 | functions, 22 | pubSub, 23 | CORS_WHITE_LIST, 24 | PLAYGROUND_ENABLED, 25 | APOLLO_ENGINE_API_KEY, 26 | TWITCH_ID, 27 | TWITCH_SECRET, 28 | PROJECT_ID, 29 | } 30 | -------------------------------------------------------------------------------- /functions/src/2_fire_storage/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | storageUserAvatarFile, 3 | storageUserAvatarGet, 4 | storageUserAvatarSet, 5 | storageUserAvatarDelete, 6 | storageUserAvatarWriteStream, 7 | } from './userAvatar' 8 | 9 | import { bucketDefault } from './utils' 10 | 11 | export { 12 | storageUserAvatarFile, 13 | bucketDefault, 14 | storageUserAvatarGet, 15 | storageUserAvatarSet, 16 | storageUserAvatarDelete, 17 | storageUserAvatarWriteStream, 18 | } 19 | -------------------------------------------------------------------------------- /functions/src/2_fire_storage/userAvatar.js: -------------------------------------------------------------------------------- 1 | import { storageSetGenerator } from './utils' 2 | 3 | import { storagePathUserAvatar } from '0_constants' 4 | 5 | const { 6 | file: storageUserAvatarFile, 7 | get: storageUserAvatarGet, 8 | set: storageUserAvatarSet, 9 | del: storageUserAvatarDelete, 10 | writeStream: storageUserAvatarWriteStream, 11 | } = storageSetGenerator(storagePathUserAvatar) 12 | 13 | export { 14 | storageUserAvatarFile, 15 | storageUserAvatarGet, 16 | storageUserAvatarSet, 17 | storageUserAvatarDelete, 18 | storageUserAvatarWriteStream, 19 | } 20 | -------------------------------------------------------------------------------- /functions/src/2_fire_storage/utils.js: -------------------------------------------------------------------------------- 1 | import { bucketDefault } from '1_fire_init' 2 | 3 | const storageSetGenerator = path => { 4 | const file = (...args) => bucketDefault.file(path(...args)) 5 | const get = (...args) => file(...args).get() 6 | const set = (...args) => (content, options) => 7 | file(...args).save(content, options) 8 | const del = (...args) => file(...args).delete() 9 | const writeStream = (...args) => config => 10 | file(...args).createWriteStream(config) 11 | return { get, set, del, writeStream, file } 12 | } 13 | 14 | export { storageSetGenerator, bucketDefault } 15 | -------------------------------------------------------------------------------- /functions/src/2_fire_store/seller.js: -------------------------------------------------------------------------------- 1 | import { docGetSetBatch } from './utils' 2 | 3 | import { fireStorePathSeller } from '0_constants' 4 | 5 | const { 6 | ref: docSellerRef, 7 | set: docSellerSet, 8 | get: docSellerGet, 9 | } = docGetSetBatch(fireStorePathSeller) 10 | 11 | export { docSellerSet, docSellerGet, docSellerRef } 12 | -------------------------------------------------------------------------------- /functions/src/2_fire_store/senshiReviews.js: -------------------------------------------------------------------------------- 1 | import { docGetSetBatch } from './utils' 2 | 3 | import { fireStorePathSellerReviews } from '0_constants' 4 | 5 | const { batch: docSellerReviewsBatch } = docGetSetBatch( 6 | fireStorePathSellerReviews 7 | ) 8 | 9 | export { docSellerReviewsBatch } 10 | -------------------------------------------------------------------------------- /functions/src/3_fire_funct/constants.js: -------------------------------------------------------------------------------- 1 | const allPaths = [ 2 | '{collecId}/{docId}', 3 | '{collecId}/{docId}/{subCollecId}/{subDocId}', 4 | ] 5 | 6 | export { allPaths } 7 | -------------------------------------------------------------------------------- /functions/src/3_fire_funct/index.js: -------------------------------------------------------------------------------- 1 | import { onTwitchSignIn } from './onTwitchSignIn' 2 | import { onUserCreate } from './onUserCreate' 3 | import { onDocCreate, onDocSubCreate } from './onDocCreate' 4 | import { onBillingAlert } from './onBillingAlert' 5 | import { onDocUpdate, onDocSubUpdate } from './onDocUpdate' 6 | import { onSellerSeed } from './onSellerSeed' 7 | import { onCommentCreate } from './onCommentCreate' 8 | import { onCommentDelete } from './onCommentDelete' 9 | 10 | export { 11 | onTwitchSignIn, 12 | onUserCreate, 13 | onDocCreate, 14 | onDocSubCreate, 15 | onBillingAlert, 16 | onDocUpdate, 17 | onDocSubUpdate, 18 | onSellerSeed, 19 | onCommentCreate, 20 | onCommentDelete, 21 | } 22 | -------------------------------------------------------------------------------- /functions/src/3_fire_funct/onDocCreate.js: -------------------------------------------------------------------------------- 1 | import { docOnCreate, getTimestamp } from '2_fire_store' 2 | import { CREATED_AT } from '0_constants' 3 | import { allPaths } from './constants' 4 | 5 | const [onDocCreate, onDocSubCreate] = allPaths.map(path => 6 | docOnCreate(path)(snap => { 7 | const timestamp = getTimestamp() 8 | return snap.ref 9 | .update({ 10 | [CREATED_AT]: timestamp, 11 | }) 12 | .catch(console.log) 13 | }) 14 | ) 15 | 16 | export { onDocCreate, onDocSubCreate } 17 | -------------------------------------------------------------------------------- /functions/src/3_fire_funct/onDocUpdate.js: -------------------------------------------------------------------------------- 1 | import { docOnUpdate, getTimestamp } from '2_fire_store' 2 | import { UPDATED_AT } from '0_constants' 3 | import { allPaths } from './constants' 4 | 5 | const [onDocUpdate, onDocSubUpdate] = allPaths.map(path => 6 | docOnUpdate(path)(change => { 7 | const timestamp = getTimestamp() 8 | //eslint-disable-next-line 9 | const { [UPDATED_AT]: updatedAt, ...newData } = change.after.data() 10 | //eslint-disable-next-line 11 | const { [UPDATED_AT]: updatedAt2, ...oldData } = change.before.data() 12 | 13 | if (JSON.stringify(oldData) !== JSON.stringify(newData)) { 14 | return change.after.ref 15 | .update({ 16 | [UPDATED_AT]: timestamp, 17 | }) 18 | .catch(console.log) 19 | } 20 | }) 21 | ) 22 | 23 | export { onDocUpdate, onDocSubUpdate } 24 | -------------------------------------------------------------------------------- /functions/src/resolvers/Mutation.js: -------------------------------------------------------------------------------- 1 | import { FUNCTION_SIGN_IN } from '0_constants' 2 | 3 | const Mutation = { 4 | [FUNCTION_SIGN_IN]: () => {}, 5 | } 6 | 7 | export { Mutation } 8 | -------------------------------------------------------------------------------- /functions/src/resolvers/Query.js: -------------------------------------------------------------------------------- 1 | const Query = { 2 | test: () => 'test', 3 | } 4 | 5 | export { Query } 6 | -------------------------------------------------------------------------------- /functions/src/resolvers/index.js: -------------------------------------------------------------------------------- 1 | import { Mutation } from './Mutation' 2 | import { Query } from './Query' 3 | import { typeDefs } from './typeDefs' 4 | 5 | const resolvers = { Mutation, Query } 6 | 7 | export { typeDefs, resolvers } 8 | -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | #da532c 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/public/favicon.ico -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Game Senshi", 3 | "name": "Game Senshi", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "start_url": "/index.html", 17 | "scope": ".", 18 | "display": "standalone", 19 | "orientation": "portrait-primary", 20 | "background-color": "#fff", 21 | "theme-color": "#3f51b5", 22 | "description": "A platform for gamers to provide their casual services", 23 | "dir": "ltr", 24 | "lang": "en-US" 25 | } 26 | -------------------------------------------------------------------------------- /public/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/public/mstile-150x150.png -------------------------------------------------------------------------------- /src/0_app_flavor/index.js: -------------------------------------------------------------------------------- 1 | import AVATAR_DEFAULT from '0_assets/img/placeholder.jpg' 2 | 3 | const BRAND = 'Game Senshi' 4 | const SELLER = 'Senshi' 5 | 6 | export { AVATAR_DEFAULT, BRAND, SELLER } 7 | -------------------------------------------------------------------------------- /src/0_assets/audio/sampleVoice.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/audio/sampleVoice.mp3 -------------------------------------------------------------------------------- /src/0_assets/demo/react-demo.css: -------------------------------------------------------------------------------- 1 | @keyframes Floatingy { 2 | from { 3 | -webkit-transform: translate(0, 0px); 4 | } 5 | 65% { 6 | -webkit-transform: translate(50px, 0); 7 | } 8 | to { 9 | -webkit-transform: translate(0, 0px); 10 | } 11 | } 12 | 13 | @keyframes Floatingx { 14 | from { 15 | -webkit-transform: translate(50px, 0px); 16 | } 17 | 65% { 18 | -webkit-transform: translate(0, 0); 19 | } 20 | to { 21 | -webkit-transform: translate(50px, 0px); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/0_assets/fonts/nucleo.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/fonts/nucleo.eot -------------------------------------------------------------------------------- /src/0_assets/fonts/nucleo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/fonts/nucleo.ttf -------------------------------------------------------------------------------- /src/0_assets/fonts/nucleo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/fonts/nucleo.woff -------------------------------------------------------------------------------- /src/0_assets/fonts/nucleo.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/fonts/nucleo.woff2 -------------------------------------------------------------------------------- /src/0_assets/icons/games/Apex.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/games/Apex.ico -------------------------------------------------------------------------------- /src/0_assets/icons/games/Dota2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/games/Dota2.png -------------------------------------------------------------------------------- /src/0_assets/icons/games/Fortnite.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/games/Fortnite.ico -------------------------------------------------------------------------------- /src/0_assets/icons/games/LOL.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/games/LOL.ico -------------------------------------------------------------------------------- /src/0_assets/icons/games/PUBG.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/games/PUBG.ico -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/affection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/affection.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/bauble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/bauble.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/building.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/building.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/carousel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/carousel.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/crowns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/crowns.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/cupid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/cupid.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/donut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/donut.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/flower-bouquet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/flower-bouquet.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/friends.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/friends.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/handbag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/handbag.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/kitty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/kitty.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/lips.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/lips.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/lollipop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/lollipop.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/love-message.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/love-message.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/microphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/microphone.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/positive-vote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/positive-vote.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/ring.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/ring.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/rose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/rose.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/sunflower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/sunflower.png -------------------------------------------------------------------------------- /src/0_assets/icons/gifts/top-hat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/icons/gifts/top-hat.png -------------------------------------------------------------------------------- /src/0_assets/img/braden-collum.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/braden-collum.jpg -------------------------------------------------------------------------------- /src/0_assets/img/christian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/christian.jpg -------------------------------------------------------------------------------- /src/0_assets/img/denys.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/denys.jpg -------------------------------------------------------------------------------- /src/0_assets/img/dots.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/dots.png -------------------------------------------------------------------------------- /src/0_assets/img/fabien-bazanegue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/fabien-bazanegue.jpg -------------------------------------------------------------------------------- /src/0_assets/img/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/favicon-32x32.png -------------------------------------------------------------------------------- /src/0_assets/img/favicon-soldier.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/favicon-soldier.png -------------------------------------------------------------------------------- /src/0_assets/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/favicon.ico -------------------------------------------------------------------------------- /src/0_assets/img/gucci.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/gucci.png -------------------------------------------------------------------------------- /src/0_assets/img/index/dota2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/index/dota2.jpg -------------------------------------------------------------------------------- /src/0_assets/img/index/fornite.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/index/fornite.jpg -------------------------------------------------------------------------------- /src/0_assets/img/index/lol.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/index/lol.jpg -------------------------------------------------------------------------------- /src/0_assets/img/jacket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/jacket.png -------------------------------------------------------------------------------- /src/0_assets/img/james.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/james.jpg -------------------------------------------------------------------------------- /src/0_assets/img/johana.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/johana.jpg -------------------------------------------------------------------------------- /src/0_assets/img/kareya-saleh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/kareya-saleh.jpg -------------------------------------------------------------------------------- /src/0_assets/img/logo-soldier.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/logo-soldier.png -------------------------------------------------------------------------------- /src/0_assets/img/mark-finn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/mark-finn.jpg -------------------------------------------------------------------------------- /src/0_assets/img/michael.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/michael.jpg -------------------------------------------------------------------------------- /src/0_assets/img/mike.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/mike.jpeg -------------------------------------------------------------------------------- /src/0_assets/img/mike.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/mike.jpg -------------------------------------------------------------------------------- /src/0_assets/img/olivia.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/olivia.jpg -------------------------------------------------------------------------------- /src/0_assets/img/p10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/p10.jpg -------------------------------------------------------------------------------- /src/0_assets/img/path4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/path4.png -------------------------------------------------------------------------------- /src/0_assets/img/placeholder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/placeholder.jpg -------------------------------------------------------------------------------- /src/0_assets/img/readme/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/readme/error.png -------------------------------------------------------------------------------- /src/0_assets/img/readme/index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/readme/index.png -------------------------------------------------------------------------------- /src/0_assets/img/readme/joinChannel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/readme/joinChannel.png -------------------------------------------------------------------------------- /src/0_assets/img/readme/policy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/readme/policy.png -------------------------------------------------------------------------------- /src/0_assets/img/readme/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/readme/profile.png -------------------------------------------------------------------------------- /src/0_assets/img/readme/reset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/readme/reset.png -------------------------------------------------------------------------------- /src/0_assets/img/readme/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/readme/settings.png -------------------------------------------------------------------------------- /src/0_assets/img/readme/signIn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/readme/signIn.png -------------------------------------------------------------------------------- /src/0_assets/img/readme/signUp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/readme/signUp.png -------------------------------------------------------------------------------- /src/0_assets/img/ryan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/ryan.png -------------------------------------------------------------------------------- /src/0_assets/img/shape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/shape.png -------------------------------------------------------------------------------- /src/0_assets/img/square-purple-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/square-purple-1.png -------------------------------------------------------------------------------- /src/0_assets/img/square1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/square1.png -------------------------------------------------------------------------------- /src/0_assets/img/square2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/square2.png -------------------------------------------------------------------------------- /src/0_assets/img/square3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/square3.png -------------------------------------------------------------------------------- /src/0_assets/img/square4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/square4.png -------------------------------------------------------------------------------- /src/0_assets/img/square5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/GameSenshi/869f6ad4c4efc5e4d746ee0bb40689284a4120cb/src/0_assets/img/square5.png -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/_mixins.scss: -------------------------------------------------------------------------------- 1 | //Utilities 2 | @import "mixins/transparency"; 3 | 4 | //Components 5 | @import "mixins/buttons"; 6 | @import "mixins/vendor-prefixes"; 7 | @import "mixins/inputs"; 8 | @import "mixins/cards"; 9 | @import "mixins/dropdown"; 10 | @import "mixins/badges"; 11 | @import "mixins/popovers"; 12 | @import "mixins/modals"; 13 | @import "mixins/pages"; 14 | @import "mixins/datepicker"; 15 | @import "mixins/navbar"; 16 | 17 | @import "mixins/tags"; 18 | @import "mixins/social-buttons"; 19 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/_modals-extend.scss: -------------------------------------------------------------------------------- 1 | .modal{ 2 | .modal-login{ 3 | max-width: 320px; 4 | background: $card-black-background; 5 | .card-login{ 6 | .logo-container{ 7 | width: 65px; 8 | margin-bottom: 38px; 9 | margin-top: 27px; 10 | } 11 | } 12 | } 13 | 14 | .card { 15 | margin-bottom: 0; 16 | 17 | .card-header .close{ 18 | position: absolute; 19 | right: 5px; 20 | color: white; 21 | top: 5px; 22 | font-size: 14px; 23 | cursor: pointer; 24 | z-index: 9; 25 | } 26 | } 27 | 28 | &.modal-mini.show { 29 | .modal-dialog { 30 | transform: translate(0, 100%) !important; 31 | } 32 | } 33 | } 34 | 35 | @include media-breakpoint-down(xs){ 36 | .modal .modal-dialog.modal-login{ 37 | margin: 0.5rem auto; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/_pills-extend.scss: -------------------------------------------------------------------------------- 1 | .nav-pills{ 2 | &.flex-column li > a{ 3 | margin-bottom: 15px; 4 | } 5 | 6 | &:not(.nav-pills-icons):not(.nav-pills-just-icons) .nav-item .nav-link{ 7 | border-radius: $btn-round-radius; 8 | } 9 | 10 | &.nav-pills-icons{ 11 | .nav-item { 12 | i{ 13 | font-size: 20px; 14 | } 15 | } 16 | } 17 | 18 | &.nav-pills-lg{ 19 | .nav-item{ 20 | .nav-link{ 21 | padding: 11px 60px; 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/_sections-extend.scss: -------------------------------------------------------------------------------- 1 | .parallax-s{ 2 | overflow: hidden; 3 | height: 500px; 4 | width: 100%; 5 | } 6 | 7 | [class*="features-"], 8 | [class*="team-"], 9 | [class*="projects-"], 10 | [class*="pricing-"], 11 | [class*="testimonials-"], 12 | [class*="contactus-"]{ 13 | padding: 80px 0; 14 | } 15 | 16 | @import 'sections/_accordion'; 17 | @import 'sections/_tables'; 18 | @import 'sections/_headers'; 19 | @import 'sections/_features'; 20 | @import 'sections/_blogs'; 21 | @import 'sections/_team'; 22 | @import 'sections/_projects'; 23 | @import 'sections/_pricing'; 24 | @import 'sections/_testimonials'; 25 | @import 'sections/_contactus'; 26 | 27 | @import 'sections/_social-subscribe-lines'; 28 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/avatars/_avatar-group.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Avatar group 3 | // 4 | 5 | // General styles 6 | 7 | .avatar-group { 8 | .avatar { 9 | position: relative; 10 | z-index: 2; 11 | border: 2px solid $card-black-background; 12 | 13 | &:hover { 14 | z-index: 3; 15 | } 16 | } 17 | 18 | .avatar + .avatar { 19 | margin-left: -1rem; 20 | 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/avatars/_avatar.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Avatar 3 | // 4 | 5 | // General styles 6 | 7 | .avatar { 8 | color: $white; 9 | background-color: $gray-500; 10 | display: inline-flex; 11 | align-items: center; 12 | justify-content: center; 13 | font-size: 1rem; 14 | border-radius: 50%; 15 | height: 48px; 16 | width: 48px; 17 | 18 | img { 19 | width: 100%; 20 | border-radius: 50%; 21 | } 22 | 23 | + .avatar-content { 24 | display: inline-block; 25 | margin-left: .75rem; 26 | } 27 | } 28 | 29 | 30 | // Avatar size variations 31 | 32 | .avatar-lg { 33 | width: 58px; 34 | height: 58px; 35 | font-size: $font-size-sm; 36 | } 37 | 38 | .avatar-sm { 39 | width: 36px; 40 | height: 36px; 41 | font-size: $font-size-sm; 42 | } 43 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/_jumbotron.scss: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | padding: $jumbotron-padding ($jumbotron-padding / 2); 3 | margin-bottom: $jumbotron-padding; 4 | color: $jumbotron-color; 5 | background-color: $jumbotron-bg; 6 | @include border-radius($border-radius-lg); 7 | 8 | @include media-breakpoint-up(sm) { 9 | padding: ($jumbotron-padding * 2) $jumbotron-padding; 10 | } 11 | } 12 | 13 | .jumbotron-fluid { 14 | padding-right: 0; 15 | padding-left: 0; 16 | @include border-radius(0); 17 | } 18 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/_media.scss: -------------------------------------------------------------------------------- 1 | .media { 2 | display: flex; 3 | align-items: flex-start; 4 | } 5 | 6 | .media-body { 7 | flex: 1; 8 | } 9 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/_root.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | // Custom variable values only support SassScript inside `#{}`. 3 | @each $color, $value in $colors { 4 | --#{$color}: #{$value}; 5 | } 6 | 7 | @each $color, $value in $theme-colors { 8 | --#{$color}: #{$value}; 9 | } 10 | 11 | @each $bp, $value in $grid-breakpoints { 12 | --breakpoint-#{$bp}: #{$value}; 13 | } 14 | 15 | // Use `inspect` for lists so that quoted items keep the quotes. 16 | // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 17 | --font-family-sans-serif: #{inspect($font-family-sans-serif)}; 18 | --font-family-monospace: #{inspect($font-family-monospace)}; 19 | } 20 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/_transitions.scss: -------------------------------------------------------------------------------- 1 | .fade { 2 | @include transition($transition-fade); 3 | 4 | &:not(.show) { 5 | opacity: 0; 6 | } 7 | } 8 | 9 | .collapse { 10 | &:not(.show) { 11 | display: none; 12 | } 13 | } 14 | 15 | .collapsing { 16 | position: relative; 17 | height: 0; 18 | overflow: hidden; 19 | @include transition($transition-collapse); 20 | } 21 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/_utilities.scss: -------------------------------------------------------------------------------- 1 | @import "utilities/align"; 2 | @import "utilities/background"; 3 | @import "utilities/borders"; 4 | @import "utilities/clearfix"; 5 | @import "utilities/display"; 6 | @import "utilities/embed"; 7 | @import "utilities/flex"; 8 | @import "utilities/float"; 9 | @import "utilities/overflow"; 10 | @import "utilities/position"; 11 | @import "utilities/screenreaders"; 12 | @import "utilities/shadows"; 13 | @import "utilities/sizing"; 14 | @import "utilities/stretched-link"; 15 | @import "utilities/spacing"; 16 | @import "utilities/text"; 17 | @import "utilities/visibility"; 18 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/bootstrap-grid.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Grid v4.3.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2019 The Bootstrap Authors 4 | * Copyright 2011-2019 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 6 | */ 7 | 8 | html { 9 | box-sizing: border-box; 10 | -ms-overflow-style: scrollbar; 11 | } 12 | 13 | *, 14 | *::before, 15 | *::after { 16 | box-sizing: inherit; 17 | } 18 | 19 | @import "functions"; 20 | @import "variables"; 21 | 22 | @import "mixins/breakpoints"; 23 | @import "mixins/grid-framework"; 24 | @import "mixins/grid"; 25 | 26 | @import "grid"; 27 | @import "utilities/display"; 28 | @import "utilities/flex"; 29 | @import "utilities/spacing"; 30 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/bootstrap-reboot.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2019 The Bootstrap Authors 4 | * Copyright 2011-2019 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 6 | * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) 7 | */ 8 | 9 | @import "functions"; 10 | @import "variables"; 11 | @import "mixins"; 12 | @import "reboot"; 13 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | @mixin alert-variant($background, $border, $color) { 2 | color: $color; 3 | @include gradient-bg($background); 4 | border-color: $border; 5 | 6 | hr { 7 | border-top-color: darken($border, 5%); 8 | } 9 | 10 | .alert-link { 11 | color: darken($color, 10%); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_background-variant.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Contextual backgrounds 4 | 5 | @mixin bg-variant($parent, $color) { 6 | #{$parent} { 7 | background-color: $color !important; 8 | } 9 | a#{$parent}, 10 | button#{$parent} { 11 | @include hover-focus { 12 | background-color: darken($color, 10%) !important; 13 | } 14 | } 15 | } 16 | 17 | @mixin bg-gradient-variant($parent, $color) { 18 | #{$parent} { 19 | background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_badge.scss: -------------------------------------------------------------------------------- 1 | @mixin badge-variant($bg) { 2 | color: color-yiq($bg); 3 | background-color: $bg; 4 | 5 | @at-root a#{&} { 6 | @include hover-focus { 7 | color: color-yiq($bg); 8 | background-color: darken($bg, 10%); 9 | } 10 | 11 | &:focus, 12 | &.focus { 13 | outline: 0; 14 | box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5); 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | @mixin box-shadow($shadow...) { 2 | @if $enable-shadows { 3 | $result: (); 4 | 5 | @if (length($shadow) == 1) { 6 | // We can pass `@include box-shadow(none);` 7 | $result: $shadow; 8 | } @else { 9 | // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;` 10 | @for $i from 1 through length($shadow) { 11 | @if nth($shadow, $i) != "none" { 12 | $result: append($result, nth($shadow, $i), "comma"); 13 | } 14 | } 15 | } 16 | @if (length($result) > 0) { 17 | box-shadow: $result; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix() { 2 | &::after { 3 | display: block; 4 | clear: both; 5 | content: ""; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_deprecate.scss: -------------------------------------------------------------------------------- 1 | // Deprecate mixin 2 | // 3 | // This mixin can be used to deprecate mixins or functions. 4 | // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to 5 | // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap) 6 | @mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) { 7 | @if ($enable-deprecation-messages != false and $ignore-warning != true) { 8 | @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}."; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_float.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | @mixin float-left { 4 | float: left !important; 5 | @include deprecate("The `float-left` mixin", "v4.3.0", "v5"); 6 | } 7 | @mixin float-right { 8 | float: right !important; 9 | @include deprecate("The `float-right` mixin", "v4.3.0", "v5"); 10 | } 11 | @mixin float-none { 12 | float: none !important; 13 | @include deprecate("The `float-none` mixin", "v4.3.0", "v5"); 14 | } 15 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_hover.scss: -------------------------------------------------------------------------------- 1 | // Hover mixin and `$enable-hover-media-query` are deprecated. 2 | // 3 | // Originally added during our alphas and maintained during betas, this mixin was 4 | // designed to prevent `:hover` stickiness on iOS-an issue where hover styles 5 | // would persist after initial touch. 6 | // 7 | // For backward compatibility, we've kept these mixins and updated them to 8 | // always return their regular pseudo-classes instead of a shimmed media query. 9 | // 10 | // Issue: https://github.com/twbs/bootstrap/issues/25195 11 | 12 | @mixin hover { 13 | &:hover { @content; } 14 | } 15 | 16 | @mixin hover-focus { 17 | &:hover, 18 | &:focus { 19 | @content; 20 | } 21 | } 22 | 23 | @mixin plain-hover-focus { 24 | &, 25 | &:hover, 26 | &:focus { 27 | @content; 28 | } 29 | } 30 | 31 | @mixin hover-focus-active { 32 | &:hover, 33 | &:focus, 34 | &:active { 35 | @content; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | // List Groups 2 | 3 | @mixin list-group-item-variant($state, $background, $color) { 4 | .list-group-item-#{$state} { 5 | color: $color; 6 | background-color: $background; 7 | 8 | &.list-group-item-action { 9 | @include hover-focus { 10 | color: $color; 11 | background-color: darken($background, 5%); 12 | } 13 | 14 | &.active { 15 | color: $white; 16 | background-color: $color; 17 | border-color: $color; 18 | } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_lists.scss: -------------------------------------------------------------------------------- 1 | // Lists 2 | 3 | // Unstyled keeps list items block level, just removes default browser padding and list-style 4 | @mixin list-unstyled { 5 | padding-left: 0; 6 | list-style: none; 7 | } 8 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_nav-divider.scss: -------------------------------------------------------------------------------- 1 | // Horizontal dividers 2 | // 3 | // Dividers (basically an hr) within dropdowns and nav lists 4 | 5 | @mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) { 6 | height: 0; 7 | margin: $margin-y 0; 8 | overflow: hidden; 9 | border-top: 1px solid $color; 10 | } 11 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { 4 | .page-link { 5 | padding: $padding-y $padding-x; 6 | @include font-size($font-size); 7 | line-height: $line-height; 8 | } 9 | 10 | .page-item { 11 | &:first-child { 12 | .page-link { 13 | @include border-left-radius($border-radius); 14 | } 15 | } 16 | &:last-child { 17 | .page-link { 18 | @include border-right-radius($border-radius); 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_reset-text.scss: -------------------------------------------------------------------------------- 1 | @mixin reset-text { 2 | font-family: $font-family-base; 3 | // We deliberately do NOT reset font-size or word-wrap. 4 | font-style: normal; 5 | font-weight: $font-weight-normal; 6 | line-height: $line-height-base; 7 | text-align: left; // Fallback for where `start` is not supported 8 | text-align: start; 9 | text-decoration: none; 10 | text-shadow: none; 11 | text-transform: none; 12 | letter-spacing: normal; 13 | word-break: normal; 14 | word-spacing: normal; 15 | white-space: normal; 16 | line-break: auto; 17 | } 18 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | @mixin resizable($direction) { 4 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 5 | resize: $direction; // Options: horizontal, vertical, both 6 | } 7 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_screen-reader.scss: -------------------------------------------------------------------------------- 1 | // Only display content to screen readers 2 | // 3 | // See: https://a11yproject.com/posts/how-to-hide-content/ 4 | // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ 5 | 6 | @mixin sr-only { 7 | position: absolute; 8 | width: 1px; 9 | height: 1px; 10 | padding: 0; 11 | overflow: hidden; 12 | clip: rect(0, 0, 0, 0); 13 | white-space: nowrap; 14 | border: 0; 15 | } 16 | 17 | // Use in conjunction with .sr-only to only display content when it's focused. 18 | // 19 | // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 20 | // 21 | // Credit: HTML5 Boilerplate 22 | 23 | @mixin sr-only-focusable { 24 | &:active, 25 | &:focus { 26 | position: static; 27 | width: auto; 28 | height: auto; 29 | overflow: visible; 30 | clip: auto; 31 | white-space: normal; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_size.scss: -------------------------------------------------------------------------------- 1 | // Sizing shortcuts 2 | 3 | @mixin size($width, $height: $width) { 4 | width: $width; 5 | height: $height; 6 | @include deprecate("`size()`", "v4.3.0", "v5"); 7 | } 8 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_table-row.scss: -------------------------------------------------------------------------------- 1 | // Tables 2 | 3 | @mixin table-row-variant($state, $background, $border: null) { 4 | // Exact selectors below required to override `.table-striped` and prevent 5 | // inheritance to nested tables. 6 | .table-#{$state} { 7 | &, 8 | > th, 9 | > td { 10 | background-color: $background; 11 | } 12 | 13 | @if $border != null { 14 | th, 15 | td, 16 | thead th, 17 | tbody + tbody { 18 | border-color: $border; 19 | } 20 | } 21 | } 22 | 23 | // Hover states for `.table-hover` 24 | // Note: this is not available for cells or rows within `thead` or `tfoot`. 25 | .table-hover { 26 | $hover-background: darken($background, 5%); 27 | 28 | .table-#{$state} { 29 | @include hover { 30 | background-color: $hover-background; 31 | 32 | > td, 33 | > th { 34 | background-color: $hover-background; 35 | } 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_text-emphasis.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Typography 4 | 5 | @mixin text-emphasis-variant($parent, $color) { 6 | #{$parent} { 7 | color: $color !important; 8 | } 9 | @if $emphasized-link-hover-darken-percentage != 0 { 10 | a#{$parent} { 11 | @include hover-focus { 12 | color: darken($color, $emphasized-link-hover-darken-percentage) !important; 13 | } 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_text-hide.scss: -------------------------------------------------------------------------------- 1 | // CSS image replacement 2 | @mixin text-hide($ignore-warning: false) { 3 | // stylelint-disable-next-line font-family-no-missing-generic-family-keyword 4 | font: 0/0 a; 5 | color: transparent; 6 | text-shadow: none; 7 | background-color: transparent; 8 | border: 0; 9 | 10 | @include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning); 11 | } 12 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_text-truncate.scss: -------------------------------------------------------------------------------- 1 | // Text truncate 2 | // Requires inline-block or block for proper styling 3 | 4 | @mixin text-truncate() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_transition.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-blacklist 2 | @mixin transition($transition...) { 3 | @if $enable-transitions { 4 | @if length($transition) == 0 { 5 | transition: $transition-base; 6 | } @else { 7 | transition: $transition; 8 | } 9 | } 10 | 11 | @if $enable-prefers-reduced-motion-media-query { 12 | @media (prefers-reduced-motion: reduce) { 13 | transition: none; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/mixins/_visibility.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Visibility 4 | 5 | @mixin invisible($visibility) { 6 | visibility: $visibility !important; 7 | @include deprecate("`invisible()`", "v4.3.0", "v5"); 8 | } 9 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/utilities/_align.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | .align-baseline { vertical-align: baseline !important; } // Browser default 4 | .align-top { vertical-align: top !important; } 5 | .align-middle { vertical-align: middle !important; } 6 | .align-bottom { vertical-align: bottom !important; } 7 | .align-text-bottom { vertical-align: text-bottom !important; } 8 | .align-text-top { vertical-align: text-top !important; } 9 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/utilities/_background.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | @each $color, $value in $theme-colors { 4 | @include bg-variant(".bg-#{$color}", $value); 5 | } 6 | 7 | @if $enable-gradients { 8 | @each $color, $value in $theme-colors { 9 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value); 10 | } 11 | } 12 | 13 | .bg-white { 14 | background-color: $white !important; 15 | } 16 | 17 | .bg-transparent { 18 | background-color: transparent !important; 19 | } 20 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/utilities/_clearfix.scss: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | @include clearfix(); 3 | } 4 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/utilities/_display.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // 4 | // Utilities for common `display` values 5 | // 6 | 7 | @each $breakpoint in map-keys($grid-breakpoints) { 8 | @include media-breakpoint-up($breakpoint) { 9 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 10 | 11 | @each $value in $displays { 12 | .d#{$infix}-#{$value} { display: $value !important; } 13 | } 14 | } 15 | } 16 | 17 | 18 | // 19 | // Utilities for toggling `display` in print 20 | // 21 | 22 | @media print { 23 | @each $value in $displays { 24 | .d-print-#{$value} { display: $value !important; } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/utilities/_embed.scss: -------------------------------------------------------------------------------- 1 | // Credit: Nicolas Gallagher and SUIT CSS. 2 | 3 | .embed-responsive { 4 | position: relative; 5 | display: block; 6 | width: 100%; 7 | padding: 0; 8 | overflow: hidden; 9 | 10 | &::before { 11 | display: block; 12 | content: ""; 13 | } 14 | 15 | .embed-responsive-item, 16 | iframe, 17 | embed, 18 | object, 19 | video { 20 | position: absolute; 21 | top: 0; 22 | bottom: 0; 23 | left: 0; 24 | width: 100%; 25 | height: 100%; 26 | border: 0; 27 | } 28 | } 29 | 30 | @each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios { 31 | $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1); 32 | $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2); 33 | 34 | .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} { 35 | &::before { 36 | padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/utilities/_float.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | @each $breakpoint in map-keys($grid-breakpoints) { 4 | @include media-breakpoint-up($breakpoint) { 5 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 6 | 7 | .float#{$infix}-left { float: left !important; } 8 | .float#{$infix}-right { float: right !important; } 9 | .float#{$infix}-none { float: none !important; } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/utilities/_overflow.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | @each $value in $overflows { 4 | .overflow-#{$value} { overflow: $value !important; } 5 | } 6 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/utilities/_position.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Common values 4 | @each $position in $positions { 5 | .position-#{$position} { position: $position !important; } 6 | } 7 | 8 | // Shorthand 9 | 10 | .fixed-top { 11 | position: fixed; 12 | top: 0; 13 | right: 0; 14 | left: 0; 15 | z-index: $zindex-fixed; 16 | } 17 | 18 | .fixed-bottom { 19 | position: fixed; 20 | right: 0; 21 | bottom: 0; 22 | left: 0; 23 | z-index: $zindex-fixed; 24 | } 25 | 26 | .sticky-top { 27 | @supports (position: sticky) { 28 | position: sticky; 29 | top: 0; 30 | z-index: $zindex-sticky; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/utilities/_screenreaders.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Screenreaders 3 | // 4 | 5 | .sr-only { 6 | @include sr-only(); 7 | } 8 | 9 | .sr-only-focusable { 10 | @include sr-only-focusable(); 11 | } 12 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/utilities/_shadows.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | .shadow-sm { box-shadow: $box-shadow-sm !important; } 4 | .shadow { box-shadow: $box-shadow !important; } 5 | .shadow-lg { box-shadow: $box-shadow-lg !important; } 6 | .shadow-none { box-shadow: none !important; } 7 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/utilities/_sizing.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Width and height 4 | 5 | @each $prop, $abbrev in (width: w, height: h) { 6 | @each $size, $length in $sizes { 7 | .#{$abbrev}-#{$size} { #{$prop}: $length !important; } 8 | } 9 | } 10 | 11 | .mw-100 { max-width: 100% !important; } 12 | .mh-100 { max-height: 100% !important; } 13 | 14 | // Viewport additional helpers 15 | 16 | .min-vw-100 { min-width: 100vw !important; } 17 | .min-vh-100 { min-height: 100vh !important; } 18 | 19 | .vw-100 { width: 100vw !important; } 20 | .vh-100 { height: 100vh !important; } 21 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/utilities/_stretched-link.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Stretched link 3 | // 4 | 5 | .stretched-link { 6 | &::after { 7 | position: absolute; 8 | top: 0; 9 | right: 0; 10 | bottom: 0; 11 | left: 0; 12 | z-index: 1; 13 | // Just in case `pointer-events: none` is set on a parent 14 | pointer-events: auto; 15 | content: ""; 16 | // IE10 bugfix, see https://stackoverflow.com/questions/16947967/ie10-hover-pseudo-class-doesnt-work-without-background-color 17 | background-color: rgba(0, 0, 0, 0); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/bootstrap/utilities/_visibility.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // 4 | // Visibility utilities 5 | // 6 | 7 | .visible { 8 | visibility: visible !important; 9 | } 10 | 11 | .invisible { 12 | visibility: hidden !important; 13 | } 14 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/cards/_card-contact.scss: -------------------------------------------------------------------------------- 1 | .card-contact{ 2 | .header{ 3 | .title{ 4 | margin: 10px 0 10px; 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/cards/_card-form-horizontal.scss: -------------------------------------------------------------------------------- 1 | .card-form-horizontal{ 2 | .card-body{ 3 | padding-left: 15px; 4 | padding-right: 15px; 5 | } 6 | .form-group{ 7 | padding-bottom: 0px; 8 | margin: 3px 0 0 0; 9 | 10 | .form-control{ 11 | margin-bottom: 0; 12 | } 13 | } 14 | .btn{ 15 | margin: 0; 16 | } 17 | .input-group, 18 | .form-group{ 19 | margin: 0; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/cards/_card-login.scss: -------------------------------------------------------------------------------- 1 | .card-login { 2 | overflow: hidden; 3 | text-align: left; 4 | z-index: 2; 5 | 6 | .card-header{ 7 | padding: 0 0 50px; 8 | overflow: hidden; 9 | img { 10 | position: absolute; 11 | margin-left: -50px; 12 | margin-top: -220px; 13 | border-radius: 20%; 14 | width: 350px; 15 | } 16 | 17 | .card-title { 18 | position: relative; 19 | font-size: 5em; 20 | font-weight: 900; 21 | color: $black; 22 | text-transform: lowercase; 23 | margin-left: -5px; 24 | z-index: 1; 25 | } 26 | } 27 | 28 | .card-footer{ 29 | padding: 15px; 30 | } 31 | } 32 | 33 | @include media-breakpoint-down(md){ 34 | .card.card-login .card-img { 35 | margin-left: -45px; 36 | } 37 | } 38 | 39 | @include media-breakpoint-down(xs){ 40 | .card.card-login { 41 | margin-top: 50px; 42 | } 43 | 44 | .modal-content .card.card-login{ 45 | margin-top: 0; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/cards/_card-no-shadow.scss: -------------------------------------------------------------------------------- 1 | .card-no-shadow{ 2 | box-shadow: none; 3 | border-radius: 0; 4 | margin: 0; 5 | 6 | &:after{ 7 | border-radius: 0; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/cards/_card-raised.scss: -------------------------------------------------------------------------------- 1 | 2 | .card-raised{ 3 | box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.3); 4 | } 5 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/change maded to vendor scss files.txt: -------------------------------------------------------------------------------- 1 | 1. twicth button 2 | https://github.com/zero-to-mastery/GameSenshi/commit/02420118590f4d4dcec052c3c01b949701b756e7 -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/_badge.scss: -------------------------------------------------------------------------------- 1 | /* badges */ 2 | .badge{ 3 | text-transform: uppercase; 4 | line-height: 12px; 5 | border: none; 6 | text-decoration: none; 7 | margin-bottom: 5px; 8 | 9 | &:hover, 10 | &:focus{ 11 | text-decoration: none; 12 | } 13 | } 14 | 15 | .badge-icon{ 16 | padding: 0.4em 0.55em; 17 | 18 | i { 19 | font-size: 0.8em; 20 | } 21 | } 22 | 23 | .badge-success{ 24 | @include badge-variant(darken($success,10%)); 25 | } 26 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/_functions.scss: -------------------------------------------------------------------------------- 1 | // Retrieve color Sass maps 2 | 3 | @function section-color($key: "primary") { 4 | @return map-get($section-colors, $key); 5 | } 6 | 7 | // Lines colors 8 | 9 | @function shapes-primary-color($key: "step-1-gradient-bg") { 10 | @return map-get($shapes-primary-colors, $key); 11 | } 12 | 13 | @function shapes-default-color($key: "step-1-gradient-bg") { 14 | @return map-get($shapes-default-colors, $key); 15 | } 16 | 17 | @function lines-light-color($key: "step-1-gradient-bg") { 18 | @return map-get($shapes-light-colors, $key); 19 | } 20 | 21 | @function shapes-dark-color($key: "step-1-gradient-bg") { 22 | @return map-get($shapes-dark-colors, $key); 23 | } -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/_images.scss: -------------------------------------------------------------------------------- 1 | img{ 2 | max-width: 100%; 3 | border-radius: $border-radius-sm; 4 | } 5 | .img-raised{ 6 | box-shadow: $box-shadow-raised; 7 | } 8 | 9 | .img-center { 10 | display: block; 11 | margin-right: auto; 12 | margin-left: auto; 13 | } 14 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/alert.scss"; 2 | @import "mixins/badges.scss"; 3 | @import "mixins/background-variant.scss"; 4 | @import "mixins/buttons.scss"; 5 | @import "mixins/forms.scss"; 6 | @import "mixins/icon.scss"; 7 | @import "mixins/modals.scss"; 8 | @import "mixins/popovers.scss"; 9 | @import "mixins/page-header.scss"; 10 | @import "mixins/vendor-prefixes.scss"; 11 | @import "mixins/opacity.scss"; 12 | @import "mixins/modals.scss"; 13 | @import "mixins/inputs.scss"; 14 | @import "mixins/dropdown.scss"; 15 | @import "mixins/wizard.scss"; 16 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/_utilities.scss: -------------------------------------------------------------------------------- 1 | @import "utilities/backgrounds.scss"; 2 | @import "utilities/floating.scss"; 3 | @import "utilities/helper.scss"; 4 | @import "utilities/position.scss"; 5 | @import "utilities/sizing.scss"; 6 | @import "utilities/spacing.scss"; 7 | @import "utilities/shadows.scss"; 8 | @import "utilities/text.scss"; 9 | @import "utilities/transform.scss"; 10 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/cards/_card-map.scss: -------------------------------------------------------------------------------- 1 | .map { 2 | height: 500px; 3 | } 4 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/cards/_card-plain.scss: -------------------------------------------------------------------------------- 1 | .card-plain { 2 | background: transparent; 3 | box-shadow: none; 4 | 5 | .card-header, 6 | .card-footer { 7 | margin-left: 0; 8 | margin-right: 0; 9 | background-color: transparent; 10 | } 11 | 12 | &:not(.card-subcategories).card-body { 13 | padding-left: 0; 14 | padding-right: 0; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/cards/_card-task.scss: -------------------------------------------------------------------------------- 1 | .card-tasks { 2 | height: 473px; 3 | 4 | .table-full-width { 5 | max-height: 410px; 6 | position: relative; 7 | } 8 | 9 | .card-header { 10 | .title { 11 | margin-right: 20px; 12 | font-weight: $font-weight-normal; 13 | } 14 | 15 | .dropdown { 16 | float: right; 17 | color: darken($white, 20%); 18 | } 19 | } 20 | 21 | .card-body { 22 | i { 23 | color: $dark-gray; 24 | font-size: 1.4em; 25 | &:hover { 26 | color: $white; 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | @mixin alert-variant($background, $border, $color) { 2 | color: color-yiq($background); 3 | // @include gradient-bg($background); 4 | background-color: lighten($background, 5%); 5 | border-color: $border; 6 | 7 | hr { 8 | border-top-color: darken($border, 5%); 9 | } 10 | 11 | .alert-link { 12 | color: darken($color, 10%); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/mixins/_background-variant.scss: -------------------------------------------------------------------------------- 1 | // Contextual backgrounds 2 | @mixin bg-variant($parent, $color) { 3 | #{$parent} { 4 | background-color: $color !important; 5 | } 6 | a#{$parent}, 7 | button#{$parent} { 8 | @include hover-focus { 9 | background-color: darken($color, 10%) !important; 10 | } 11 | } 12 | } 13 | 14 | @mixin bg-gradient-variant($parent, $color) { 15 | #{$parent} { 16 | background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/mixins/_badges.scss: -------------------------------------------------------------------------------- 1 | @mixin badge-variant($bg) { 2 | color: color-yiq($bg); 3 | background-color: $bg; 4 | 5 | &[href] { 6 | @include hover-focus { 7 | color: color-yiq($bg); 8 | text-decoration: none; 9 | background-color: darken($bg, 3%); 10 | } 11 | } 12 | .tagsinput-remove-link{ 13 | color: $white; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/mixins/_dropdown.scss: -------------------------------------------------------------------------------- 1 | @mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) { 2 | background-color: $brand-color; 3 | 4 | &:before{ 5 | color: $brand-color; 6 | } 7 | 8 | .dropdown-header:not([href]):not([tabindex]){ 9 | color: $dropdown-header-color; 10 | } 11 | 12 | .dropdown-item{ 13 | color: $dropdown-color; 14 | 15 | &:hover, 16 | &:focus{ 17 | background-color: $background-color; 18 | } 19 | } 20 | 21 | .dropdown-divider{ 22 | background-color: $background-color; 23 | } 24 | 25 | 26 | } 27 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/mixins/_icon.scss: -------------------------------------------------------------------------------- 1 | @mixin icon-shape-variant($color) { 2 | color: saturate(darken($color, 10%), 10); 3 | background-color: transparentize(lighten($color, 10%), .5); 4 | } 5 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/mixins/_modals.scss: -------------------------------------------------------------------------------- 1 | @mixin modal-colors($bg-color, $color) { 2 | .modal-content{ 3 | background-color: $bg-color; 4 | color: $color; 5 | } 6 | 7 | .modal-body p{ 8 | color: rgba($white, 0.8); 9 | } 10 | 11 | //inputs 12 | @include input-coloured-bg($opacity-5, $white, $white, $transparent-bg, $opacity-1, $opacity-2); 13 | 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/mixins/_page-header.scss: -------------------------------------------------------------------------------- 1 | @mixin linear-gradient($color1, $color2){ 2 | background: $color1; /* For browsers that do not support gradients */ 3 | background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */ 4 | background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */ 5 | background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */ 6 | background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */ 7 | } 8 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/mixins/_popovers.scss: -------------------------------------------------------------------------------- 1 | @mixin popover-variant($background) { 2 | background-color: $background; 3 | 4 | .popover-header { 5 | background-color: $background; 6 | color: color-yiq($background); 7 | opacity: .6; 8 | } 9 | 10 | .popover-body { 11 | color: color-yiq($background); 12 | } 13 | 14 | .popover-header{ 15 | border-color: rgba(color-yiq($background), .2); 16 | } 17 | 18 | &.bs-popover-top { 19 | .arrow::after { 20 | border-top-color: $background; 21 | } 22 | } 23 | 24 | &.bs-popover-right { 25 | .arrow::after { 26 | border-right-color: $background; 27 | } 28 | } 29 | 30 | &.bs-popover-bottom { 31 | .arrow::after { 32 | border-bottom-color: $background; 33 | } 34 | } 35 | 36 | &.bs-popover-left { 37 | .arrow::after { 38 | border-left-color: $background; 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/mixins/_wizard.scss: -------------------------------------------------------------------------------- 1 | @mixin set-wizard-color($color) { 2 | .progress-with-circle .progress-bar{ 3 | background: $color; 4 | } 5 | 6 | .nav-pills .nav-item .nav-link{ 7 | color: $color; 8 | 9 | &.checked, &.active{ 10 | background: $color; 11 | color: white; 12 | } 13 | &:hover{ 14 | background: $white; 15 | } 16 | } 17 | 18 | .nav-pills .nav-item .nav-link.active, 19 | .nav-pills .nav-item .nav-link.checked:focus, 20 | .nav-pills .nav-item .nav-link.checked:hover, 21 | .nav-pills .nav-item .nav-link.active:focus, 22 | .nav-pills .nav-item .nav-link.active:hover{ 23 | background: $color; 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/mixins/opacity.scss: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | @mixin opacity($opacity) { 4 | opacity: $opacity; 5 | // IE8 filter 6 | $opacity-ie: ($opacity * 100); 7 | filter: #{alpha(opacity=$opacity-ie)}; 8 | } 9 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/sections/_blogs.scss: -------------------------------------------------------------------------------- 1 | [class*="blogs-"]{ 2 | padding: 50px 0; 3 | } 4 | 5 | 6 | .blogs-1{ 7 | .card{ 8 | margin-bottom: 80px; 9 | } 10 | } 11 | 12 | .blogs-4{ 13 | .card{ 14 | margin-bottom: 60px; 15 | text-align: center; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/sections/_pricing.scss: -------------------------------------------------------------------------------- 1 | .pricing-1{ 2 | h2.title{ 3 | margin-bottom: 10px; 4 | } 5 | 6 | .card-separator{ 7 | width: 1px; 8 | display: block; 9 | height: 100%; 10 | background-color: rgba($default-color, .2); 11 | position: absolute; 12 | left: 0; 13 | top: 0; 14 | } 15 | // &.section-image:after{ 16 | // background-color: rgba(0, 0, 0, 0.8); 17 | // } 18 | } 19 | 20 | .pricing-2{ 21 | .nav-pills{ 22 | margin-bottom: 50px; 23 | } 24 | 25 | } 26 | 27 | .pricing-5{ 28 | .nav-pills{ 29 | margin-top: 50px; 30 | margin-bottom: 50px; 31 | } 32 | } 33 | 34 | .pricing-3, 35 | .pricing-4{ 36 | .title{ 37 | margin-bottom: 10px; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/utilities/_backgrounds.scss: -------------------------------------------------------------------------------- 1 | @each $color, $value in $colors { 2 | @include bg-variant(".bg-#{$color}", $value); 3 | } 4 | 5 | @each $color, $value in $theme-colors { 6 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value); 7 | } 8 | 9 | @each $color, $value in $colors { 10 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value); 11 | } 12 | 13 | 14 | // Sections 15 | 16 | section { 17 | //background-color: section-color("primary"); 18 | } 19 | 20 | @each $color, $value in $section-colors { 21 | @include bg-variant(".section-#{$color}", $value); 22 | } 23 | 24 | @each $color, $value in $theme-colors { 25 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value); 26 | } 27 | 28 | 29 | // Shape (svg) fill colors 30 | @each $color, $value in $theme-colors { 31 | .fill-#{$color} { 32 | fill: $value; 33 | } 34 | 35 | .stroke-#{$color} { 36 | stroke: $value; 37 | } 38 | } 39 | 40 | .fill-opacity-8 { 41 | fill-opacity: .8; 42 | } -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/utilities/_position.scss: -------------------------------------------------------------------------------- 1 | @each $size, $value in $spacers { 2 | .top-#{$size} { 3 | top: $value; 4 | } 5 | .right-#{$size} { 6 | right: $value; 7 | } 8 | .bottom-#{$size} { 9 | bottom: $value; 10 | } 11 | .left-#{$size} { 12 | left: $value; 13 | } 14 | } 15 | 16 | .center { 17 | left: 50%; 18 | transform: translateX(-50%); 19 | } -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/utilities/_shadows.scss: -------------------------------------------------------------------------------- 1 | [class*="shadow"] { 2 | @if $enable-transitions { 3 | transition: $transition-base; 4 | } 5 | } 6 | 7 | .shadow-sm--hover:hover { box-shadow: $box-shadow-sm !important; } 8 | .shadow--hover:hover { box-shadow: $box-shadow !important; } 9 | .shadow-lg--hover:hover { box-shadow: $box-shadow-lg !important; } 10 | .shadow-none--hover:hover { box-shadow: none !important; } 11 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/utilities/_sizing.scss: -------------------------------------------------------------------------------- 1 | // Height values in vh 2 | 3 | .h-100vh { 4 | height: 100vh !important; 5 | } 6 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/custom/utilities/_transform.scss: -------------------------------------------------------------------------------- 1 | @include media-breakpoint-up(lg) { 2 | .transform-perspective-right { 3 | transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg); 4 | } 5 | .transform-perspective-left{ 6 | transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) rotate(-2deg) 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/mixins/_tags.scss: -------------------------------------------------------------------------------- 1 | @mixin tag-color ($color){ 2 | background-color: $color; 3 | color: $white; 4 | border:none; 5 | .tagsinput-remove-link{ 6 | color: $white; 7 | } 8 | .tagsinput-add{ 9 | color: $color; 10 | } 11 | } 12 | 13 | @mixin create-colored-tags(){ 14 | &.tag-primary{ 15 | @include tag-color($brand-primary); 16 | } 17 | &.tag-info { 18 | @include tag-color($brand-info); 19 | } 20 | &.tag-success{ 21 | @include tag-color($brand-success); 22 | } 23 | &.tag-warning{ 24 | @include tag-color($brand-warning); 25 | } 26 | &.tag-danger{ 27 | @include tag-color($brand-danger); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/_dropdown-extend.scss: -------------------------------------------------------------------------------- 1 | .navbar .dropdown.show .dropdown-menu .dropdown-menu{ 2 | height: 200px; 3 | top: -100px !important; 4 | } 5 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/_example-pages.scss: -------------------------------------------------------------------------------- 1 | .presentation-page { 2 | .section-pricing{ 3 | .card-pricing ul.b-left{ 4 | &:after{ 5 | background: $info; 6 | } 7 | li{ 8 | &:after{ 9 | border-color: $info; 10 | } 11 | } 12 | } 13 | } 14 | } 15 | 16 | .landing-page .section-lg{ 17 | overflow: unset; 18 | } 19 | .profile-page .page-header .container{ 20 | z-index: 2; 21 | } 22 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/_fileinput.scss: -------------------------------------------------------------------------------- 1 | .fileinput > input[type="file"] { 2 | display: none; 3 | } 4 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/_footers.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | border-color: $info; 3 | } 4 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/_misc-extend.scss: -------------------------------------------------------------------------------- 1 | button,*{ 2 | &:focus { 3 | outline: none; 4 | } 5 | } 6 | .navbar .navbar-collapse .nav-item.dropdown.show .dropdown.show .dropdown-menu.show{ 7 | opacity: 1 !important; 8 | pointer-events: auto !important; 9 | } 10 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/_modals-extend.scss: -------------------------------------------------------------------------------- 1 | .modal{ 2 | &.modal-login .modal-dialog{ 3 | max-width: 320px; 4 | background: $card-black-background; 5 | .card-login{ 6 | .logo-container{ 7 | width: 65px; 8 | margin-bottom: 38px; 9 | margin-top: 27px; 10 | } 11 | } 12 | } 13 | } 14 | 15 | @include media-breakpoint-down(xs){ 16 | .modal.modal-login .modal-dialog{ 17 | margin: 0.5rem auto; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/_navbar-extend.scss: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 350px){ 2 | .navbar .navbar-brand { 3 | margin: 0; 4 | } 5 | } 6 | @media screen and (max-width: 991px){ 7 | .navbar .navbar-collapse { 8 | max-height: calc(100vh - 1.4rem); 9 | overflow: scroll; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/_responsive.scss: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 576px){ 2 | .page-header .content-center.brand{ 3 | width: 100%; 4 | } 5 | .header.header-6 .page-header .content-center{ 6 | padding-top: 74px; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/custom/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert { 2 | button.close { 3 | margin-top: -1px; 4 | color: $white; 5 | opacity: 0.9; 6 | text-shadow: none; 7 | line-height: 0; 8 | outline: 0; 9 | &::after { 10 | display: inline-block; 11 | font: normal normal normal 1em/1 "Nucleo"; 12 | vertical-align: middle; 13 | speak: none; 14 | text-transform: none; 15 | -webkit-font-smoothing: antialiased; 16 | font-size: 1rem; 17 | content: "\ea48"; 18 | } 19 | span { 20 | display: none !important; 21 | } 22 | } 23 | &.alert-dismissible { 24 | padding-right: 1.25rem; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/custom/_checkboxes-radio.scss: -------------------------------------------------------------------------------- 1 | .form-check input[type="checkbox"]:checked + .form-check-sign::before, 2 | .form-check input[type="checkbox"]:checked + .form-check-sign::before, 3 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after{ 4 | background-color: $info; 5 | } 6 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after, 7 | .form-check-radio input[type="radio"]:checked + .form-check-sign::before{ 8 | border-color: $info; 9 | } 10 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/custom/_example-pages.scss: -------------------------------------------------------------------------------- 1 | // style for the landing page 2 | .index-page .squares{ 3 | @include linear-gradient($info-states, $info); 4 | } 5 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/custom/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | border-color: #8c3db9; 3 | } 4 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/custom/_inputs.scss: -------------------------------------------------------------------------------- 1 | .form-control:focus, 2 | .form-control:focus + .input-group-append .input-group-text, 3 | .form-control:focus ~ .input-group-append .input-group-text, 4 | .form-control:focus + .input-group-prepend .input-group-text, 5 | .form-control:focus ~ .input-group-prepend .input-group-text, 6 | .input-group-focus .input-group-prepend .input-group-text, 7 | .input-group-focus .input-group-append .input-group-text { 8 | border-color: $info; 9 | } 10 | .has-danger .form-control:focus { 11 | border-color: lighten($danger-states,5%); 12 | } 13 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/custom/_navbar.scss: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 991px){ 2 | .navbar-nav .dropdown-menu { 3 | position: static !important; 4 | float: none; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/custom/_sections.scss: -------------------------------------------------------------------------------- 1 | .section-examples .container .col-sm-6 img{ 2 | border-color: $info; 3 | } 4 | @include media-breakpoint-down(xs) { 5 | .page-header{ 6 | .content-center { 7 | &.brand { 8 | width: unset; 9 | } 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/custom/_type.scss: -------------------------------------------------------------------------------- 1 | .blockquote{ 2 | &.blockquote-info{ 3 | border-color: $info; 4 | color: $info; 5 | small{ 6 | color: $info; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/plugins/_plugin-headroomjs.scss: -------------------------------------------------------------------------------- 1 | .headroom { 2 | will-change: transform; 3 | background-color: inherit; 4 | @include transition($transition-base); 5 | } 6 | .headroom--pinned { 7 | @extend .position-fixed; 8 | transform: translateY(0%); 9 | } 10 | .headroom--unpinned { 11 | @extend .position-fixed; 12 | transform: translateY(-100%); 13 | } 14 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/plugins/_plugin-react-slick.scss: -------------------------------------------------------------------------------- 1 | .slick-slide { 2 | float: none; 3 | } 4 | .slick-track { 5 | display: flex; 6 | } 7 | .slick-prev, .slick-next { 8 | z-index: 1; 9 | } 10 | .slick-buttons-under { 11 | .slick-arrow { 12 | position: absolute; 13 | top: 100%; 14 | right: 48%; 15 | &.slick-prev { 16 | margin-right: 50px; 17 | } 18 | } 19 | } 20 | .testimonials-4 .slick-arrow{ 21 | &.slick-prev{ 22 | left: calc(100% - 65% - #{$icon-size-regular}); 23 | margin-left: 0; 24 | } 25 | &.slick-next{ 26 | left: calc(100% - 65% + #{$icon-size-regular} / 2); 27 | } 28 | } 29 | 30 | .testimonials-4 .slick-arrow.slick-prev{ 31 | position: absolute; 32 | bottom: 0; 33 | } 34 | 35 | .blog-post .slick-arrow.slick-prev{ 36 | position: absolute; 37 | bottom: 0; 38 | } 39 | 40 | .blog-post .slick-arrow.slick-next{ 41 | margin-left: 50px; 42 | } 43 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/react/react-differences.scss: -------------------------------------------------------------------------------- 1 | // Differences from the HTML to the React product 2 | 3 | // React plugins 4 | @import "plugins/plugin-headroomjs"; 5 | @import "plugins/plugin-react-datetime"; 6 | @import "plugins/plugin-react-select"; 7 | @import "plugins/plugin-react-slick"; 8 | @import "plugins/plugin-react-tagsinput"; 9 | 10 | // Custom components 11 | 12 | @import "custom/alerts"; 13 | @import "custom/checkboxes-radio"; 14 | @import "custom/example-pages"; 15 | @import "custom/footer"; 16 | @import "custom/inputs"; 17 | @import "custom/navbar"; 18 | @import "custom/sections"; 19 | @import "custom/tabs"; 20 | @import "custom/type"; 21 | 22 | // Fancy stuff 23 | @import "dropdown-extend"; 24 | @import "example-pages"; 25 | @import "fileinput"; 26 | @import "footers"; 27 | @import "misc-extend"; 28 | @import "modals-extend"; 29 | @import "navbar-extend"; 30 | @import "responsive"; 31 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/sections/_accordion.scss: -------------------------------------------------------------------------------- 1 | .accordion-1{ 2 | .accordion{ 3 | margin-top: 80px; 4 | margin-bottom: 100px; 5 | .card{ 6 | margin-top: 0; 7 | box-shadow: none; 8 | border-bottom: 1px solid !important; 9 | &:last-child{ 10 | border-bottom: none !important; 11 | } 12 | .card-header{ 13 | padding: 10px 15px; 14 | .btn[aria-expanded="true"]{ 15 | .tim-icons{ 16 | transform: rotate(180deg); 17 | } 18 | } 19 | 20 | .tim-icons{ 21 | transition: 0.1s ease; 22 | } 23 | } 24 | 25 | .card-body{ 26 | padding: 10px 30px 30px; 27 | } 28 | 29 | .btn.btn-link{ 30 | color: rgba($white, 0.7); 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/0_assets/scss/blk-design-system-pro/sections/_blogs.scss: -------------------------------------------------------------------------------- 1 | [class*="blogs-"]{ 2 | padding: 50px 0; 3 | 4 | .title { 5 | margin-bottom: 70px; 6 | } 7 | } 8 | 9 | .blogs-1 { 10 | .card { 11 | &.card-background { 12 | .card-title, 13 | .card-category { 14 | bottom: 0; 15 | } 16 | } 17 | } 18 | } 19 | 20 | .blogs-4 { 21 | .card { 22 | margin-bottom: 60px; 23 | text-align: center; 24 | } 25 | 26 | [class^=col-] { 27 | padding: 0; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/0_constants/AuthConstants.js: -------------------------------------------------------------------------------- 1 | const AUTH_GOOGLE = 'Google' 2 | const AUTH_FACEBOOK = 'Facebook' 3 | const AUTH_TWITCH = 'Twitch' 4 | 5 | export { AUTH_GOOGLE, AUTH_FACEBOOK, AUTH_TWITCH } 6 | -------------------------------------------------------------------------------- /src/0_constants/DatabaseConstants.js: -------------------------------------------------------------------------------- 1 | const DATABASE_STATUS_ONLINE = 'online' 2 | const DATABASE_STATUS_ONLINE_LAST = 'onlineLast' 3 | 4 | const databasePathStatus = uid => '/status/' + uid 5 | 6 | export { 7 | DATABASE_STATUS_ONLINE, 8 | DATABASE_STATUS_ONLINE_LAST, 9 | databasePathStatus, 10 | } 11 | -------------------------------------------------------------------------------- /src/0_constants/EnvKeyConstants.js: -------------------------------------------------------------------------------- 1 | // firebase do not allow to use any capital letter in env var name 2 | // these env only used by backend 3 | const ENV = 'env' 4 | const generateEnv = string => ENV + '_' + string 5 | const ENV_ENABLE_PLAYGROUND = generateEnv('playground_enabled') 6 | const ENV_CORS_WHITELIST = generateEnv('cors_whitelist') 7 | const ENV_VERIFY_EMAIL_API_URL = generateEnv('verify_email_api_url') 8 | const ENV_APOLLO_ENGINE_API_KEY = generateEnv('apollo_engine_api_key') 9 | const ENV_PROJECT_ID = generateEnv('project_id') 10 | const ENV_TWITCH_ID = generateEnv('twitch_id') 11 | const ENV_TWITCH_SECRET = generateEnv('twitch_secret') 12 | 13 | export { 14 | ENV, 15 | ENV_ENABLE_PLAYGROUND, 16 | ENV_VERIFY_EMAIL_API_URL, 17 | ENV_APOLLO_ENGINE_API_KEY, 18 | ENV_CORS_WHITELIST, 19 | ENV_PROJECT_ID, 20 | ENV_TWITCH_ID, 21 | ENV_TWITCH_SECRET, 22 | } 23 | -------------------------------------------------------------------------------- /src/0_constants/EnvValueConstants.js: -------------------------------------------------------------------------------- 1 | const env = process.env 2 | 3 | const ENV_VALUE_FIREBASE_CONFIG = Object.freeze({ 4 | apiKey: env.REACT_APP_API_KEY, 5 | authDomain: env.REACT_APP_AUTH_DOMAIN, 6 | databaseURL: env.REACT_APP_DATABASE_URL, 7 | projectId: env.REACT_APP_PROJECT_ID, 8 | storageBucket: env.REACT_APP_STORAGE_BUCKET, 9 | messagingSenderId: env.REACT_APP_MESSAGING_SENDER_ID, 10 | appId: env.REACT_APP_APP_ID, 11 | }) 12 | 13 | const ENV_VALUE_TWITCH_CLIENT = env.REACT_APP_TWITCH_CLIENT 14 | 15 | let redirect = '' 16 | 17 | try { 18 | redirect = window.location.origin 19 | } catch (err) { 20 | // back end doesnt need this, this is to prevent error in backen because window not defined 21 | } 22 | 23 | const ENV_VALUE_TWITCH_OAUTH_LINK = `https://id.twitch.tv/oauth2/authorize?client_id=${ENV_VALUE_TWITCH_CLIENT}&redirect_uri=${redirect}&response_type=code&scope=openid+user_read+user:read:email&force_verify=true` 24 | 25 | export { ENV_VALUE_FIREBASE_CONFIG, ENV_VALUE_TWITCH_OAUTH_LINK } 26 | -------------------------------------------------------------------------------- /src/0_constants/FunctionConstants.js: -------------------------------------------------------------------------------- 1 | const FUNCTION_DATA = 'data' 2 | const FUNCTION_STATUS = 'status' 3 | const FUNCTION_CODE = 'code' 4 | const FUNCTION_MESSAGE = 'message' 5 | const FUNCTION_INPUT = 'Input' 6 | const FUNCTION_EMAIL = 'email' 7 | const FUNCTION_PASSWORD = 'password' 8 | const FUNCTION_DISPLAY_NAME = 'displayName' 9 | const FUNCTION_OAUTH_CODE = 'oAuthCode' 10 | const FUNCTION_TOKEN_CUSTOM = 'customToken' 11 | const FUNCTION_REDIRECT_URI = 'redirectUri' 12 | const FUNCTION_UID = 'uid' 13 | const FUNCTION_ON_DATA_SEED = 'onSellerSeed' 14 | const FUNCTION_ON_TWITCH_SIGN_IN = 'onTwitchSignIn' 15 | 16 | export { 17 | FUNCTION_DATA, 18 | FUNCTION_STATUS, 19 | FUNCTION_CODE, 20 | FUNCTION_MESSAGE, 21 | FUNCTION_INPUT, 22 | FUNCTION_EMAIL, 23 | FUNCTION_PASSWORD, 24 | FUNCTION_DISPLAY_NAME, 25 | FUNCTION_OAUTH_CODE, 26 | FUNCTION_TOKEN_CUSTOM, 27 | FUNCTION_REDIRECT_URI, 28 | FUNCTION_ON_DATA_SEED, 29 | FUNCTION_ON_TWITCH_SIGN_IN, 30 | FUNCTION_UID, 31 | } 32 | -------------------------------------------------------------------------------- /src/0_styled/justify.js: -------------------------------------------------------------------------------- 1 | const NAME = 'name' 2 | const ABB = 'abb' 3 | 4 | export const { 5 | justify_content_start, 6 | justify_content_end, 7 | justify_content_center, 8 | justify_content_between, 9 | justify_content_around, 10 | } = [ 11 | { [ABB]: 'start', [NAME]: 'flex-start' }, 12 | { [ABB]: 'end', [NAME]: 'flex-end' }, 13 | { [ABB]: 'center', [NAME]: 'center' }, 14 | { [ABB]: 'between', [NAME]: 'space-between' }, 15 | { [ABB]: 'around', [NAME]: 'space-around' }, 16 | ].reduce((acc, positioning) => { 17 | acc['justify_content_' + positioning[ABB]] = 18 | 'justify-content:' + positioning[NAME] + ';' 19 | return acc 20 | }, {}) 21 | -------------------------------------------------------------------------------- /src/0_styled/utils.js: -------------------------------------------------------------------------------- 1 | import { css } from 'styled-components' 2 | import styledBreak from 'styled-break' 3 | 4 | const config = { 5 | breakpoints: { 6 | xs: 0, 7 | sx: 500, 8 | sm: 576, 9 | md: 768, 10 | lg: 992, 11 | xl: 1200, 12 | }, 13 | sLevel: 3, 14 | } 15 | 16 | const { cssR, styledR, styledHOC } = styledBreak(config) 17 | 18 | export { cssR, styledR, styledHOC, css } 19 | -------------------------------------------------------------------------------- /src/1_fire_init/core.js: -------------------------------------------------------------------------------- 1 | import firebase from 'firebase/app' 2 | import 'firebase/auth' // https://stackoverflow.com/questions/48592656/firebase-auth-is-not-a-function/56280110#56280110 3 | import 'firebase/functions' 4 | import 'firebase/storage' 5 | import 'firebase/firestore' 6 | import 'firebase/database' 7 | import { ENV_VALUE_FIREBASE_CONFIG } from '0_constants' 8 | 9 | firebase.initializeApp(ENV_VALUE_FIREBASE_CONFIG) 10 | 11 | const fireFunct = firebase.functions 12 | 13 | const firestore = firebase.firestore 14 | 15 | const auth = firebase.auth 16 | 17 | const fbStorage = firebase.storage 18 | 19 | const database = firebase.database 20 | 21 | // use device default language 22 | auth().useDeviceLanguage() 23 | 24 | export { fireFunct, firestore, auth, fbStorage, database } 25 | -------------------------------------------------------------------------------- /src/1_fire_init/index.js: -------------------------------------------------------------------------------- 1 | import { auth, firestore, database, fireFunct, fbStorage } from './core' 2 | 3 | import { 4 | handleDifferentCredential, 5 | linkedThen, 6 | } from './handleDifferentCredential' 7 | 8 | export { 9 | fbStorage, 10 | auth, 11 | firestore, 12 | database, 13 | handleDifferentCredential, 14 | linkedThen, 15 | fireFunct, 16 | } 17 | -------------------------------------------------------------------------------- /src/2_fire_funct/cloudFunct.js: -------------------------------------------------------------------------------- 1 | import { fireFunct } from '1_fire_init' 2 | import { 3 | FUNCTION_ON_TWITCH_SIGN_IN, 4 | FUNCTION_ON_DATA_SEED, 5 | FUNCTION_OAUTH_CODE, 6 | FUNCTION_REDIRECT_URI, 7 | FUNCTION_UID, 8 | } from '0_constants' 9 | 10 | //! why this cannot use 11 | // const httpsCallable =fireFunct().httpsCallable 12 | 13 | const functSignInTwicth = oAuthCode => 14 | fireFunct().httpsCallable(FUNCTION_ON_TWITCH_SIGN_IN)({ 15 | [FUNCTION_OAUTH_CODE]: oAuthCode, 16 | [FUNCTION_REDIRECT_URI]: window.location.origin, 17 | }) 18 | const functOnSeedData = uid => 19 | fireFunct() 20 | .httpsCallable(FUNCTION_ON_DATA_SEED)({ [FUNCTION_UID]: uid }) 21 | .catch(e => console.log(e)) 22 | 23 | export { functSignInTwicth, functOnSeedData } 24 | -------------------------------------------------------------------------------- /src/2_fire_funct/index.js: -------------------------------------------------------------------------------- 1 | import { functSignInTwicth, functOnSeedData } from './cloudFunct' 2 | 3 | export { functSignInTwicth, functOnSeedData } 4 | -------------------------------------------------------------------------------- /src/2_fire_storage/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | storageUserAvatarGet, 3 | storageUserAvatarSet, 4 | storageUserAvatarRemove, 5 | storageUserAvatarOn, 6 | } from './userAvatar' 7 | 8 | export { 9 | storageUserAvatarGet, 10 | storageUserAvatarSet, 11 | storageUserAvatarRemove, 12 | storageUserAvatarOn, 13 | } 14 | -------------------------------------------------------------------------------- /src/2_fire_storage/userAvatar.js: -------------------------------------------------------------------------------- 1 | import { storageSetGenerator } from './utils' 2 | 3 | import { storagePathUserAvatar } from '0_constants' 4 | 5 | const [ 6 | storageUserAvatarGet, 7 | storageUserAvatarSet, 8 | storageUserAvatarRemove, 9 | storageUserAvatarOn, 10 | ] = storageSetGenerator(storagePathUserAvatar) 11 | 12 | export { 13 | storageUserAvatarGet, 14 | storageUserAvatarSet, 15 | storageUserAvatarRemove, 16 | storageUserAvatarOn, 17 | } 18 | -------------------------------------------------------------------------------- /src/2_fire_storage/utils.js: -------------------------------------------------------------------------------- 1 | import { fbStorage, auth } from '1_fire_init' 2 | 3 | const taskEvent = fbStorage.TaskEvent 4 | 5 | const storageSetGenerator = path => { 6 | const ref = (uid = auth().currentUser.uid, ...otherArgs) => 7 | fbStorage().ref(path(uid, ...otherArgs)) 8 | const get = (...args) => ref(...args).getDownloadURL() 9 | const set = (...args) => (dataUrl = '') => 10 | ref(...args).putString(dataUrl, 'data_url') 11 | const remove = (...args) => ref(...args).delete() 12 | const onSnapShot = (...args) => (dataUrl = '', task = {}) => 13 | set(...args)(dataUrl).on(taskEvent.STATE_CHANGED, task) 14 | return [get, set, remove, onSnapShot] 15 | } 16 | 17 | export { storageSetGenerator } 18 | -------------------------------------------------------------------------------- /src/2_fire_store/seller.js: -------------------------------------------------------------------------------- 1 | import { docGetSetBatch } from './utils' 2 | 3 | import { fireStorePathSeller } from '0_constants' 4 | 5 | const { on: docSellereOnSnapShot } = docGetSetBatch(fireStorePathSeller) 6 | 7 | export { docSellereOnSnapShot } 8 | -------------------------------------------------------------------------------- /src/2_fire_store/sellerReviews.js: -------------------------------------------------------------------------------- 1 | import { docGetSetBatch } from './utils' 2 | 3 | import { fireStorePathSellerReviews } from '0_constants' 4 | 5 | const { on: docSellereReviewsOnSnapShot } = docGetSetBatch( 6 | fireStorePathSellerReviews 7 | ) 8 | 9 | export { docSellereReviewsOnSnapShot } 10 | -------------------------------------------------------------------------------- /src/2_state/Alert/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | StoreAlert, 3 | STORE_ALERT_STATE_BODY, 4 | STORE_ALERT_STATE_IS_OPEN, 5 | STORE_ALERT_STATE_STATUS, 6 | SHOW, 7 | TOGGLE, 8 | SET_STATE, 9 | RESET_STATE, 10 | STATE, 11 | SIMPLE_ERROR, 12 | } from './StoreAlert' 13 | 14 | const storeAlert = new StoreAlert() 15 | const storeAlertShow = storeAlert[SHOW] 16 | const storeAlertToggle = storeAlert[TOGGLE] 17 | const storeAlertSetState = storeAlert[SET_STATE] 18 | const storeAlertResetState = storeAlert[RESET_STATE] 19 | const storeAlertSimpleError = storeAlert[SIMPLE_ERROR] 20 | const storeAlertGet = state => storeAlert[STATE][state] 21 | 22 | // why no export state? Because it lose reference 23 | // no need to output method constant as they are now variable name 24 | export { 25 | storeAlert, 26 | storeAlertShow, 27 | storeAlertToggle, 28 | storeAlertSetState, 29 | storeAlertResetState, 30 | storeAlertSimpleError, 31 | STORE_ALERT_STATE_BODY, 32 | STORE_ALERT_STATE_IS_OPEN, 33 | STORE_ALERT_STATE_STATUS, 34 | storeAlertGet, 35 | } 36 | -------------------------------------------------------------------------------- /src/2_state/AlertSide/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | StoreAlertSide, 3 | STORE_ALERT_SIDE_STATE_BODY, 4 | STORE_ALERT_SIDE_STATE_IS_OPEN, 5 | STORE_ALERT_SIDE_STATE_STATUS, 6 | SHOW, 7 | TOGGLE, 8 | SET_STATE, 9 | RESET_STATE, 10 | STATE, 11 | SIMPLE_ERROR, 12 | } from './StoreAlertSide' 13 | 14 | const storeAlertSide = new StoreAlertSide() 15 | const storeAlertSideShow = storeAlertSide[SHOW] 16 | const storeAlertSideToggle = storeAlertSide[TOGGLE] 17 | const storeAlertSideSetState = storeAlertSide[SET_STATE] 18 | const storeAlertSideResetState = storeAlertSide[RESET_STATE] 19 | const storeAlertSideSimpleError = storeAlertSide[SIMPLE_ERROR] 20 | const storeAlertSideGet = state => storeAlertSide[STATE][state] 21 | 22 | export { 23 | storeAlertSide, 24 | storeAlertSideShow, 25 | storeAlertSideToggle, 26 | storeAlertSideSetState, 27 | storeAlertSideResetState, 28 | storeAlertSideSimpleError, 29 | STORE_ALERT_SIDE_STATE_BODY, 30 | STORE_ALERT_SIDE_STATE_IS_OPEN, 31 | STORE_ALERT_SIDE_STATE_STATUS, 32 | storeAlertSideGet, 33 | } 34 | -------------------------------------------------------------------------------- /src/2_state/Progress/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | StoreProgress, 3 | STORE_PROGRESS_STATE_VALUE, 4 | STORE_PROGRESS_STATE_COLOR, 5 | STORE_PROGRESS_STATE_IS_OPEN, 6 | SHOW, 7 | CLOSE, 8 | SET_STATE, 9 | RESET_STATE, 10 | STATE, 11 | } from './StoreProgress' 12 | 13 | const storeProgress = new StoreProgress() 14 | const storeProgressShow = storeProgress[SHOW] 15 | const storeProgressClose = storeProgress[CLOSE] 16 | const storeProgressSetState = storeProgress[SET_STATE] 17 | const storeProgressResetState = storeProgress[RESET_STATE] 18 | const storeProgressGet = state => storeProgress[STATE][state] 19 | 20 | export { 21 | storeProgress, 22 | storeProgressShow, 23 | storeProgressClose, 24 | storeProgressSetState, 25 | storeProgressResetState, 26 | STORE_PROGRESS_STATE_VALUE, 27 | STORE_PROGRESS_STATE_COLOR, 28 | STORE_PROGRESS_STATE_IS_OPEN, 29 | storeProgressGet, 30 | } 31 | -------------------------------------------------------------------------------- /src/2_state/SignIn/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | StoreSignIn, 3 | STORE_SIGN_IN_STATE_EMAIL, 4 | STORE_SIGN_IN_STATE_IS_OPEN, 5 | STORE_SIGN_IN_STATE_SUBMITTED_CALLBACK, 6 | SHOW, 7 | CLOSE, 8 | TOGGLE, 9 | ON_SUCCESSFUL_SUBMISSION, 10 | SET_STATE, 11 | RESET_STATE, 12 | STATE, 13 | } from './StoreSignIn' 14 | 15 | const storeSignIn = new StoreSignIn() 16 | const storeSignInShow = storeSignIn[SHOW] 17 | const storeSignInClose = storeSignIn[CLOSE] 18 | const storeSignInToggle = storeSignIn[TOGGLE] 19 | const storeSignInSetState = storeSignIn[SET_STATE] 20 | const storeSignInResetState = storeSignIn[RESET_STATE] 21 | const storeSignInOnSuccessfulSubmission = storeSignIn[ON_SUCCESSFUL_SUBMISSION] 22 | const storeSignInGet = state => storeSignIn[STATE][state] 23 | 24 | export { 25 | storeSignIn, 26 | storeSignInShow, 27 | storeSignInClose, 28 | storeSignInToggle, 29 | storeSignInSetState, 30 | storeSignInResetState, 31 | storeSignInOnSuccessfulSubmission, 32 | STORE_SIGN_IN_STATE_EMAIL, 33 | STORE_SIGN_IN_STATE_IS_OPEN, 34 | STORE_SIGN_IN_STATE_SUBMITTED_CALLBACK, 35 | storeSignInGet, 36 | } 37 | -------------------------------------------------------------------------------- /src/2_state/Sound/StoreSound.js: -------------------------------------------------------------------------------- 1 | import { Container } from 'unstated' 2 | import { STATE, SET_STATE, RESET_STATE } from '2_state/constants' 3 | 4 | const STORE_SOUND_STATE_UUID = 'uuid' 5 | const SET_UUID = 'setUuid' 6 | 7 | const defaultValues = () => ({ 8 | [STORE_SOUND_STATE_UUID]: null, 9 | }) 10 | 11 | // the prupose of this store is to automatically stop other sound playing when the latest sound is playing 12 | class StoreSound extends Container { 13 | constructor() { 14 | super() 15 | this[STATE] = defaultValues() 16 | this[SET_STATE] = this[SET_STATE].bind(this) 17 | } 18 | 19 | [RESET_STATE] = () => { 20 | this[SET_STATE](defaultValues()) 21 | return this 22 | }; 23 | 24 | [SET_UUID] = bool => { 25 | this[SET_STATE]({ [STORE_SOUND_STATE_UUID]: bool }) 26 | return this 27 | } 28 | } 29 | 30 | export { 31 | StoreSound, 32 | STATE, 33 | SET_STATE, 34 | RESET_STATE, 35 | SET_UUID, 36 | STORE_SOUND_STATE_UUID, 37 | } 38 | -------------------------------------------------------------------------------- /src/2_state/Sound/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | StoreSound, 3 | SET_STATE, 4 | RESET_STATE, 5 | SET_UUID, 6 | STORE_SOUND_STATE_UUID, 7 | STATE, 8 | } from './StoreSound' 9 | 10 | const storeSound = new StoreSound() 11 | const storeSoundSetUuid = storeSound[SET_UUID] 12 | const storeSoundSetState = storeSound[SET_STATE] 13 | const storeSoundResetState = storeSound[RESET_STATE] 14 | const storeSoundGet = state => storeSound[STATE][state] 15 | 16 | export { 17 | storeSound, 18 | storeSoundSetState, 19 | storeSoundResetState, 20 | storeSoundSetUuid, 21 | STORE_SOUND_STATE_UUID, 22 | storeSoundGet, 23 | } 24 | -------------------------------------------------------------------------------- /src/2_state/Wrapper/StoreWrapper.js: -------------------------------------------------------------------------------- 1 | import { Container } from 'unstated' 2 | import { STATE, SET_STATE, RESET_STATE } from '2_state/constants' 3 | 4 | const STORE_WRAPPER_STATE_OFFSET_TOP = 'offsetTop' 5 | const SET_OFFSET_TOP = 'setOffsetTop' 6 | 7 | const defaultValues = () => ({ 8 | [STORE_WRAPPER_STATE_OFFSET_TOP]: 80, 9 | }) 10 | 11 | class StoreWrapper extends Container { 12 | constructor() { 13 | super() 14 | this[STATE] = defaultValues() 15 | this[SET_STATE] = this[SET_STATE].bind(this) 16 | } 17 | 18 | [RESET_STATE] = () => { 19 | this[SET_STATE](defaultValues()) 20 | return this 21 | }; 22 | 23 | [SET_OFFSET_TOP] = height => { 24 | this[SET_STATE]({ [STORE_WRAPPER_STATE_OFFSET_TOP]: height }) 25 | return this 26 | } 27 | } 28 | 29 | export { 30 | StoreWrapper, 31 | STATE, 32 | SET_STATE, 33 | RESET_STATE, 34 | SET_OFFSET_TOP, 35 | STORE_WRAPPER_STATE_OFFSET_TOP, 36 | } 37 | -------------------------------------------------------------------------------- /src/2_state/Wrapper/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | StoreWrapper, 3 | SET_STATE, 4 | RESET_STATE, 5 | SET_OFFSET_TOP, 6 | STORE_WRAPPER_STATE_OFFSET_TOP, 7 | STATE, 8 | } from './StoreWrapper' 9 | 10 | const storeWrapper = new StoreWrapper() 11 | const storeWrapperSetOffsetTop = storeWrapper[SET_OFFSET_TOP] 12 | const storeWrapperSetState = storeWrapper[SET_STATE] 13 | const storeWrapperResetState = storeWrapper[RESET_STATE] 14 | const storeWrapperGet = state => storeWrapper[STATE][state] 15 | 16 | export { 17 | storeWrapper, 18 | storeWrapperSetState, 19 | storeWrapperResetState, 20 | storeWrapperSetOffsetTop, 21 | STORE_WRAPPER_STATE_OFFSET_TOP, 22 | storeWrapperGet, 23 | } 24 | -------------------------------------------------------------------------------- /src/2_state/constants.js: -------------------------------------------------------------------------------- 1 | const STATE = 'state' 2 | const SET_STATE = 'setState' 3 | const RESET_STATE = 'resetState' 4 | 5 | export { STATE, SET_STATE, RESET_STATE } 6 | -------------------------------------------------------------------------------- /src/3_api/handleIsEmailAccountNotExist.js: -------------------------------------------------------------------------------- 1 | import { auth } from '1_fire_init' 2 | import { simplerResponseHandling } from '1_utils' 3 | import { UNEXPECTED_ERROR_CODE_2 } from '0_constants' 4 | 5 | const handleIsEmailAccountNotExist = email => { 6 | return auth() 7 | .fetchSignInMethodsForEmail(email) 8 | .then(methods => { 9 | if (methods.includes('password')) { 10 | return simplerResponseHandling( 11 | false, 12 | 'this email is already registered!' 13 | ) 14 | } else { 15 | return simplerResponseHandling( 16 | true, 17 | 'This email is available for registration!' 18 | ) 19 | } 20 | }) 21 | .catch(err => { 22 | return simplerResponseHandling(false, UNEXPECTED_ERROR_CODE_2, err) 23 | }) 24 | } 25 | 26 | export { handleIsEmailAccountNotExist } 27 | -------------------------------------------------------------------------------- /src/3_api/handleIsPasswordResetAble.js: -------------------------------------------------------------------------------- 1 | import { auth } from '1_fire_init' 2 | import { UNEXPECTED_ERROR_CODE_1 } from '0_constants' 3 | import { simplerResponseHandling } from '1_utils' 4 | 5 | const handleIsPasswordResetAble = email => { 6 | return auth() 7 | .fetchSignInMethodsForEmail(email) 8 | .then(methods => { 9 | if (methods.includes('password')) { 10 | return simplerResponseHandling( 11 | true, 12 | 'this account password is reset-able' 13 | ) 14 | } else { 15 | return simplerResponseHandling( 16 | false, 17 | 'this email does not have password account.' 18 | ) 19 | } 20 | }) 21 | .catch(err => { 22 | return simplerResponseHandling(false, UNEXPECTED_ERROR_CODE_1, err) 23 | }) 24 | } 25 | 26 | export { handleIsPasswordResetAble } 27 | -------------------------------------------------------------------------------- /src/3_api/handlePasswordReset.js: -------------------------------------------------------------------------------- 1 | import { auth } from '1_fire_init' 2 | import { UNEXPECTED_ERROR_CODE_3 } from '0_constants' 3 | import { simplerResponseHandling } from '1_utils' 4 | 5 | const handlePasswordReset = email => { 6 | return auth() 7 | .sendPasswordResetEmail(email) 8 | .then(() => { 9 | return simplerResponseHandling(true) 10 | }) 11 | .catch(err => { 12 | return simplerResponseHandling(false, UNEXPECTED_ERROR_CODE_3, err) 13 | }) 14 | } 15 | 16 | export { handlePasswordReset } 17 | -------------------------------------------------------------------------------- /src/3_api/handleSignInWithEmailAndPassword.js: -------------------------------------------------------------------------------- 1 | import { auth } from '1_fire_init' 2 | import { UNEXPECTED_ERROR_CODE_4 } from '0_constants' 3 | import { simplerResponseHandling } from '1_utils' 4 | 5 | const handleSignInWithEmailAndPassword = async (email, password) => { 6 | // sign in set local persistence by default, allowing user to auto sign in 7 | // https://firebase.google.com/docs/auth/web/auth-state-persistence?authuser=0 8 | 9 | return auth() 10 | .signInWithEmailAndPassword(email, password) 11 | .then(() => simplerResponseHandling(true)) 12 | .catch(err => { 13 | // Handle Errors here. 14 | switch (err.code) { 15 | case 'auth/invalid-email': 16 | case 'auth/user-disabled': 17 | case 'auth/user-not-found': 18 | case 'auth/wrong-password': 19 | return simplerResponseHandling( 20 | false, 21 | 'Invalid Email or Password', 22 | err 23 | ) 24 | default: 25 | return simplerResponseHandling(false, UNEXPECTED_ERROR_CODE_4, err) 26 | } 27 | }) 28 | } 29 | 30 | export { handleSignInWithEmailAndPassword } 31 | -------------------------------------------------------------------------------- /src/3_api/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | handleSignUpWithEmailAndPassword, 3 | FUNCTION_EMAIL, 4 | FUNCTION_PASSWORD, 5 | } from './handleSignUpWithEmailAndPassword' 6 | import { handleIsEmailAccountNotExist } from './handleIsEmailAccountNotExist' 7 | import { handleIsPasswordResetAble } from './handleIsPasswordResetAble' 8 | import { handleSignInWithEmailAndPassword } from './handleSignInWithEmailAndPassword' 9 | import { handleSignInWithSocials } from './handleSignInWithSocials' 10 | import { handlePasswordReset } from './handlePasswordReset' 11 | 12 | export { 13 | handleSignUpWithEmailAndPassword, 14 | FUNCTION_EMAIL, 15 | FUNCTION_PASSWORD, 16 | handleIsEmailAccountNotExist, 17 | handleIsPasswordResetAble, 18 | handleSignInWithSocials, 19 | handleSignInWithEmailAndPassword, 20 | handlePasswordReset, 21 | } 22 | -------------------------------------------------------------------------------- /src/3_app_event/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | databaseUserPresenceSetOffline, 3 | databaseUserPresenceOnSnapshot, 4 | } from './userPresence' 5 | 6 | import { getRedirectResult } from './getRedirectResult' 7 | 8 | import { 9 | onAuthStateChange, 10 | setNonLoginUserLastIntendedAction, 11 | } from './onAuthStateChange' 12 | 13 | export { 14 | databaseUserPresenceSetOffline, 15 | onAuthStateChange, 16 | setNonLoginUserLastIntendedAction, 17 | databaseUserPresenceOnSnapshot, 18 | getRedirectResult, 19 | } 20 | -------------------------------------------------------------------------------- /src/5_comp_0/Button/Button.jsx: -------------------------------------------------------------------------------- 1 | import React, { forwardRef, Fragment } from 'react' 2 | import { Button as ButtonRS } from 'reactstrap' 3 | import { ButtonBase } from '@material-ui/core' 4 | import clsx from 'clsx' 5 | import styles from './styles.module.css' 6 | 7 | const Button = forwardRef((props, ref) => { 8 | const { 9 | baseClass, 10 | baseStyle, 11 | className, 12 | tag, 13 | // eslint-disable-next-line 14 | staticContext, 15 | ...otherProps 16 | } = props 17 | const Enclosure = tag ? Fragment : ButtonBase 18 | const className_ = className || '' 19 | 20 | return ( 21 | 31 | 38 | 39 | ) 40 | }) 41 | 42 | export { Button } 43 | -------------------------------------------------------------------------------- /src/5_comp_0/Button/index.js: -------------------------------------------------------------------------------- 1 | import { Button } from './Button' 2 | 3 | export { Button } 4 | -------------------------------------------------------------------------------- /src/5_comp_0/Button/styles.module.css: -------------------------------------------------------------------------------- 1 | .btn-round.btn-round { 2 | border-width: 1px; 3 | border-radius: 30px; 4 | } 5 | 6 | .btn.btn { 7 | border-width: 2px; 8 | border-radius: 0.4285rem; 9 | } 10 | -------------------------------------------------------------------------------- /src/5_comp_0/Helmet/Helmet.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Helmet as HelmetRH } from 'react-helmet' 3 | import { BRAND } from '0_app_flavor' 4 | 5 | const Helmet = props => { 6 | const { title, descr } = props 7 | return ( 8 | 9 | {title && ( 10 | {`${title !== BRAND ? title + ' | ' : ''}${BRAND}`} 11 | )} 12 | {descr && } 13 | 14 | ) 15 | } 16 | 17 | export { Helmet } 18 | -------------------------------------------------------------------------------- /src/5_comp_0/Helmet/index.js: -------------------------------------------------------------------------------- 1 | import { Helmet } from './Helmet' 2 | 3 | export { Helmet } 4 | -------------------------------------------------------------------------------- /src/5_comp_0/Icon/Icon.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useCallback } from 'react' 2 | import Image from 'material-ui-image' 3 | import clsx from 'clsx' 4 | 5 | const Icon = props => { 6 | const [error, setError] = useState(false) 7 | 8 | const { image, emoji, icon, 'aria-label': aria, className, style } = props 9 | 10 | const onError = useCallback(() => { 11 | setError(true) 12 | }, []) 13 | 14 | return ( 15 | (image || emoji || icon) && ( 16 | <> 17 | {image && !error && ( 18 | 25 | )} 26 | {(!image || (emoji && error)) && ( 27 | 28 | {emoji} 29 | 30 | )} 31 | {(!image || (icon && error)) && icon && icon()} 32 | 33 | ) 34 | ) 35 | } 36 | 37 | export { Icon } 38 | -------------------------------------------------------------------------------- /src/5_comp_0/Icon/index.js: -------------------------------------------------------------------------------- 1 | import { Icon } from './Icon' 2 | 3 | export { Icon } 4 | -------------------------------------------------------------------------------- /src/5_comp_0/Image/Image.jsx: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react' 2 | import ImageMU from 'material-ui-image' 3 | import clsx from 'clsx' 4 | 5 | const Image = memo(props => { 6 | const { className, style, ...otherProp } = props 7 | return ( 8 | 14 | ) 15 | }) 16 | 17 | export { Image } 18 | -------------------------------------------------------------------------------- /src/5_comp_0/Image/index.js: -------------------------------------------------------------------------------- 1 | import { Image } from './Image' 2 | 3 | export { Image } 4 | -------------------------------------------------------------------------------- /src/5_comp_0/Link/Link.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import LinkNoStack from 'react-router-link-nostack' 3 | import ButtonBase from '@material-ui/core/ButtonBase' 4 | import clsx from 'clsx' 5 | 6 | const Link = props => { 7 | const { 8 | baseClass, 9 | baseStyle, 10 | to, 11 | href, 12 | children, 13 | className, 14 | ...otherProps 15 | } = props 16 | return ( 17 | 18 | {to && ( 19 | 24 | {children} 25 | 26 | )} 27 | {!to && href && ( 28 | 35 | {children} 36 | 37 | )} 38 | 39 | ) 40 | } 41 | 42 | export { Link, LinkNoStack } 43 | -------------------------------------------------------------------------------- /src/5_comp_0/Link/index.js: -------------------------------------------------------------------------------- 1 | import { Link, LinkNoStack } from './Link' 2 | 3 | export { Link, LinkNoStack } 4 | -------------------------------------------------------------------------------- /src/5_comp_0/RowCol/index.js: -------------------------------------------------------------------------------- 1 | import { Row, Col, Container } from './RowCol' 2 | 3 | export { Row, Col, Container } 4 | -------------------------------------------------------------------------------- /src/5_comp_0/UncontrolledTooltip/UncontrolledTooltip.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { UncontrolledTooltip as UncontrolledTooltip1 } from 'reactstrap' 3 | 4 | const UncontrolledTooltip = props => { 5 | const { children } = props 6 | return children ? : null 7 | } 8 | 9 | export { UncontrolledTooltip } 10 | -------------------------------------------------------------------------------- /src/5_comp_0/UncontrolledTooltip/index.js: -------------------------------------------------------------------------------- 1 | import { UncontrolledTooltip } from './UncontrolledTooltip' 2 | 3 | export { UncontrolledTooltip } 4 | -------------------------------------------------------------------------------- /src/5_comp_0/index.js: -------------------------------------------------------------------------------- 1 | import { Link, LinkNoStack } from './Link' 2 | import { Button } from './Button' 3 | import { UncontrolledTooltip } from './UncontrolledTooltip' 4 | import { Icon } from './Icon' 5 | import { Row, Col, Container } from './RowCol' 6 | import { Helmet } from './Helmet' 7 | import { Image } from './Image' 8 | 9 | export const Exports = { 10 | Link, 11 | LinkNoStack, 12 | Button, 13 | UncontrolledTooltip, 14 | Icon, 15 | Row, 16 | Col, 17 | Container, 18 | Helmet, 19 | Image, 20 | } 21 | -------------------------------------------------------------------------------- /src/5_comp_1/Alert/Alert.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // reactstrap components 3 | import { Container, Alert as AlertRS } from 'reactstrap' 4 | 5 | const ALERT_STATE_BODY = 'body' 6 | const ALERT_STATE_IS_OPEN = 'isOpen' 7 | const ALERT_STATE_STATUS = 'status' 8 | const ALERT_TOGGLE = 'toggle' 9 | 10 | const Alert = props => { 11 | const { 12 | [ALERT_STATE_BODY]: body, 13 | [ALERT_STATE_IS_OPEN]: isOpen, 14 | [ALERT_STATE_STATUS]: status, 15 | [ALERT_TOGGLE]: toggle, 16 | } = props 17 | return ( 18 | 24 | 25 | 32 | {body} 33 | 34 | 35 | ) 36 | } 37 | 38 | export { 39 | Alert, 40 | ALERT_STATE_BODY, 41 | ALERT_STATE_IS_OPEN, 42 | ALERT_STATE_STATUS, 43 | ALERT_TOGGLE, 44 | } 45 | -------------------------------------------------------------------------------- /src/5_comp_1/Alert/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | Alert, 3 | ALERT_STATE_BODY, 4 | ALERT_STATE_STATUS, 5 | ALERT_STATE_IS_OPEN, 6 | ALERT_TOGGLE, 7 | } from './Alert' 8 | 9 | import { 10 | StateContainer, 11 | storeAlert, 12 | STORE_ALERT_STATE_BODY, 13 | STORE_ALERT_STATE_STATUS, 14 | STORE_ALERT_STATE_IS_OPEN, 15 | storeAlertToggle, 16 | } from '2_state' 17 | 18 | const mapStoreAlertStateToProp = { 19 | [ALERT_STATE_BODY]: STORE_ALERT_STATE_BODY, 20 | [ALERT_STATE_STATUS]: STORE_ALERT_STATE_STATUS, 21 | [ALERT_STATE_IS_OPEN]: STORE_ALERT_STATE_IS_OPEN, 22 | } 23 | 24 | const mapStoreAlertMethodToProp = { 25 | [ALERT_TOGGLE]: storeAlertToggle, 26 | } 27 | 28 | const AlertStoreAlert = StateContainer( 29 | Alert, 30 | [storeAlert], 31 | [mapStoreAlertStateToProp], 32 | [mapStoreAlertMethodToProp] 33 | ) 34 | 35 | export { Alert, AlertStoreAlert } 36 | -------------------------------------------------------------------------------- /src/5_comp_1/AvatarUser/AvatarUser.jsx: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react' 2 | import { Exports } from '5_comp_0' 3 | import { stopUndefined } from '1_utils' 4 | const { Image } = stopUndefined(Exports) 5 | 6 | const AVATAR_USER_STATE_SRC = 'src' 7 | 8 | const AvatarUser = memo(props => { 9 | const { [AVATAR_USER_STATE_SRC]: src, height, width } = props 10 | const size = { height: height || 36, width: width || 36 } 11 | return ( 12 | user avatar 19 | ) 20 | }) 21 | 22 | export { AvatarUser, AVATAR_USER_STATE_SRC } 23 | -------------------------------------------------------------------------------- /src/5_comp_1/AvatarUser/index.js: -------------------------------------------------------------------------------- 1 | import { AvatarUser, AVATAR_USER_STATE_SRC } from './AvatarUser' 2 | 3 | import { StateContainer, storeUser, STORE_USER_STATE_AVATAR } from '2_state' 4 | 5 | const mapStoreUserStateToProps = { 6 | [AVATAR_USER_STATE_SRC]: STORE_USER_STATE_AVATAR, 7 | } 8 | 9 | const AvatarUserStoreUser = StateContainer( 10 | AvatarUser, 11 | [storeUser], 12 | [mapStoreUserStateToProps], 13 | [] 14 | ) 15 | 16 | export { AvatarUserStoreUser, AvatarUser } 17 | -------------------------------------------------------------------------------- /src/5_comp_1/Badges/index.js: -------------------------------------------------------------------------------- 1 | import React, { useMemo } from 'react' 2 | import { Badges } from './Badges' 3 | import { getOptions } from './utils' 4 | import styles from './styles.module.css' 5 | 6 | const BadgesOptioned = props => { 7 | const { badges, ...otherProps } = props 8 | const badges_ = useMemo(() => getOptions(badges), [badges]) 9 | return 10 | } 11 | 12 | const BadgesPropedSenshi = props => { 13 | return ( 14 | 19 | ) 20 | } 21 | 22 | export { BadgesOptioned, BadgesPropedSenshi, Badges } 23 | -------------------------------------------------------------------------------- /src/5_comp_1/Badges/styles.module.css: -------------------------------------------------------------------------------- 1 | .online.online { 2 | background-color: #10b93c; 3 | } 4 | 5 | .padding-y { 6 | padding-left: 15px; 7 | padding-right: 15px; 8 | } 9 | -------------------------------------------------------------------------------- /src/5_comp_1/Badges/utils.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FIRESTORE_SELLER_SETTINGS_PROFILE_GENDER_FEMALE } from '0_constants' 3 | import { BADGES_COLOR, BADGES_BODY, BADGES_ID, BADGES_CLASS } from './Badges' 4 | import { createGetOptions } from '1_utils' 5 | import styles from './styles.module.css' 6 | 7 | const options = [ 8 | { 9 | [BADGES_ID]: FIRESTORE_SELLER_SETTINGS_PROFILE_GENDER_FEMALE, 10 | [BADGES_COLOR]: 'primary', 11 | [BADGES_BODY]: ( 12 | <> 13 | Female 14 | 15 | ), 16 | }, 17 | { 18 | [BADGES_ID]: 'online', 19 | [BADGES_BODY]: , 20 | [BADGES_CLASS]: `${styles.online} text-white`, 21 | }, 22 | ] 23 | 24 | const getOptions = createGetOptions(options, BADGES_ID) 25 | 26 | export { getOptions } 27 | -------------------------------------------------------------------------------- /src/5_comp_1/BrandNavbar/index.js: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react' 2 | import { ROUTE_PAGE_INDEX } from '2_routes' 3 | import { BrandNavbar, NAVBAR_BRAND_ON_ERROR } from './BrandNavbar' 4 | import logo from '0_assets/img/favicon.ico' 5 | import { StateContainer, storeUser, storeUserResetAvatar } from '2_state' 6 | 7 | const BrandNavbarStoreUserPropedNavbar = memo(props => { 8 | return ( 9 | 10 | GAME SENSHI 11 | 12 | ) 13 | }) 14 | 15 | const mapStoreUserMethodToProp = { 16 | [NAVBAR_BRAND_ON_ERROR]: storeUserResetAvatar, 17 | } 18 | 19 | const BrandNavbarStoreUser = StateContainer( 20 | BrandNavbar, 21 | [storeUser], 22 | [], 23 | [mapStoreUserMethodToProp] 24 | ) 25 | 26 | export { BrandNavbarStoreUserPropedNavbar } 27 | -------------------------------------------------------------------------------- /src/5_comp_1/ButtonSound/styled.js: -------------------------------------------------------------------------------- 1 | import { Col } from 'reactstrap' 2 | import { styledR } from '0_styled' 3 | 4 | const ColStyledPlay = styledR(Col)( 5 | { 6 | xs: `justify-content: center;`, 7 | sm: `display: none;`, 8 | }, 9 | 3 10 | ) 11 | 12 | export { ColStyledPlay } 13 | -------------------------------------------------------------------------------- /src/5_comp_1/ButtonSubmit/ButtonSubmit.jsx: -------------------------------------------------------------------------------- 1 | import React, { forwardRef } from 'react' 2 | import Loader from 'react-loader-spinner' 3 | import { Exports } from '5_comp_0' 4 | import { stopUndefined } from '1_utils' 5 | const { Button } = stopUndefined(Exports) 6 | 7 | const ButtonSubmit = forwardRef((props, ref) => { 8 | const { submitting, children, ...otherProps } = props 9 | return ( 10 | 20 | ) 21 | }) 22 | 23 | export { ButtonSubmit } 24 | -------------------------------------------------------------------------------- /src/5_comp_1/ButtonSubmit/index.js: -------------------------------------------------------------------------------- 1 | import { ButtonSubmit } from './ButtonSubmit' 2 | 3 | export { ButtonSubmit } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/CardUserSimple/CardUserSimple.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Card, CardFooter } from 'reactstrap' 3 | import { Exports } from '5_comp_0' 4 | import { stopUndefined } from '1_utils' 5 | const { Link, Image } = stopUndefined(Exports) 6 | 7 | const CardUserSimple = props => { 8 | const { src, name } = props 9 | return ( 10 | 17 | 18 | {name} 27 | 28 |

{name}

29 | 30 | 31 | 32 | ) 33 | } 34 | 35 | export { CardUserSimple } 36 | -------------------------------------------------------------------------------- /src/5_comp_1/CardUserSimple/index.js: -------------------------------------------------------------------------------- 1 | import { CardUserSimple } from './CardUserSimple' 2 | export { CardUserSimple } 3 | -------------------------------------------------------------------------------- /src/5_comp_1/Carousel/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Carousel } from './Carousel' 3 | import { itemsIndex } from './utils' 4 | 5 | const CarouselPropedIndex = props => { 6 | return ( 7 | 14 | ) 15 | } 16 | 17 | export { Carousel, CarouselPropedIndex } 18 | -------------------------------------------------------------------------------- /src/5_comp_1/Carousel/styled.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import Image from 'material-ui-image' 3 | 4 | const ImageStyled = styled(Image)` 5 | cursor: pointer; 6 | ` 7 | export { ImageStyled } 8 | -------------------------------------------------------------------------------- /src/5_comp_1/Carousel/utils.js: -------------------------------------------------------------------------------- 1 | // temp data array 2 | import { FIRESTORE_SELLER_SETTINGS_PROFILE_CAROUSEL_IMAGE } from '0_constants' 3 | 4 | const getIndexImage = name => require(`0_assets/img/index/${name}.jpg`) 5 | 6 | const itemsIndex = [ 7 | { 8 | [FIRESTORE_SELLER_SETTINGS_PROFILE_CAROUSEL_IMAGE]: getIndexImage('dota2'), 9 | }, 10 | { 11 | [FIRESTORE_SELLER_SETTINGS_PROFILE_CAROUSEL_IMAGE]: getIndexImage('lol'), 12 | }, 13 | { 14 | [FIRESTORE_SELLER_SETTINGS_PROFILE_CAROUSEL_IMAGE]: getIndexImage( 15 | 'fornite' 16 | ), 17 | }, 18 | ] 19 | 20 | export { itemsIndex } 21 | -------------------------------------------------------------------------------- /src/5_comp_1/CheckBox/index.js: -------------------------------------------------------------------------------- 1 | import { CheckBox } from './CheckBox' 2 | 3 | export { CheckBox } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/Comments/index.js: -------------------------------------------------------------------------------- 1 | import { Comments } from './Comments' 2 | 3 | export { Comments } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/DropdownMenuNavbar/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { DropdownMenuNavbar } from './DropdownMenuNavbar' 3 | import { StateContainer, storeUser } from '2_state' 4 | import { NavbarIndexItems } from './utils' 5 | 6 | const DropdownMenuNavbarStoreUser = StateContainer( 7 | DropdownMenuNavbar, 8 | [storeUser], 9 | [], 10 | [] 11 | ) 12 | 13 | const DropdownMenuNavbarStoreUserPropedNavbar = props => { 14 | return 15 | } 16 | 17 | export { DropdownMenuNavbarStoreUserPropedNavbar } 18 | -------------------------------------------------------------------------------- /src/5_comp_1/ErrorBoundary/ErrorBoundary.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | class ErrorBoundary extends React.Component { 4 | constructor(props) { 5 | super(props) 6 | this.state = { hasError: false } 7 | } 8 | 9 | static getDerivedStateFromError(error) { 10 | // Update state so the next render will show the fallback UI. 11 | return { hasError: true } 12 | } 13 | 14 | componentDidCatch(error, info) { 15 | // You can also log the error to an error reporting service 16 | //logErrorToMyService(error, info) 17 | } 18 | 19 | render() { 20 | if (this.state.hasError) { 21 | // You can render any custom fallback UI 22 | return Something went wrong. 23 | } 24 | 25 | return this.props.children 26 | } 27 | } 28 | 29 | export { ErrorBoundary } 30 | -------------------------------------------------------------------------------- /src/5_comp_1/ErrorBoundary/index.js: -------------------------------------------------------------------------------- 1 | import { ErroBoundary } from './ErroBoundary' 2 | 3 | export { ErroBoundary } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/FinalForm/index.js: -------------------------------------------------------------------------------- 1 | import { FinalForm } from './FinalForm' 2 | 3 | export { FinalForm } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/Footer/index.js: -------------------------------------------------------------------------------- 1 | import { Footer } from './Footer' 2 | 3 | export { Footer } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/Footer/styled.js: -------------------------------------------------------------------------------- 1 | import { styledR } from '0_styled' 2 | 3 | const titleCss = { 4 | xl: 'text-align: left !important;', 5 | xs: 'text-align: center !important;', 6 | } 7 | 8 | const H1Styled = styledR('h1')(titleCss, 3) 9 | 10 | const H3Styled = styledR('h3')(titleCss, 3) 11 | 12 | export { H1Styled, H3Styled } 13 | -------------------------------------------------------------------------------- /src/5_comp_1/HeaderCollapsed/HeaderCollapsed.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Row, Col } from 'reactstrap' 3 | 4 | import { Exports } from '5_comp_0' 5 | import { stopUndefined } from '1_utils' 6 | 7 | const { Link } = stopUndefined(Exports) 8 | 9 | const HeaderCollapsed = props => { 10 | const { isOpen, toggle, children, to } = props 11 | return ( 12 |
13 | 14 | 15 | {children} 16 | 17 | 18 | 24 | 25 | 26 |
27 | ) 28 | } 29 | 30 | export { HeaderCollapsed } 31 | -------------------------------------------------------------------------------- /src/5_comp_1/HeaderCollapsed/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { HeaderCollapsed } from './HeaderCollapsed' 3 | import { ROUTE_PAGE_INDEX } from '2_routes' 4 | 5 | const HeaderCollapsedPropedNavbarIndex = props => { 6 | return ( 7 | 8 | GAME SENSHI 9 | 10 | ) 11 | } 12 | 13 | export { HeaderCollapsedPropedNavbarIndex } 14 | -------------------------------------------------------------------------------- /src/5_comp_1/HeaderLined/HeaderLined.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const HeaderLined = props => { 4 | const { children } = props 5 | return ( 6 | <> 7 |
8 |

9 | {children} 10 |

11 |
12 |
13 | 14 | ) 15 | } 16 | 17 | export { HeaderLined } 18 | -------------------------------------------------------------------------------- /src/5_comp_1/HeaderLined/index.js: -------------------------------------------------------------------------------- 1 | import { HeaderLined } from './HeaderLined' 2 | 3 | export { HeaderLined } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/IconCard/index.js: -------------------------------------------------------------------------------- 1 | import { IconCard } from './IconCard' 2 | 3 | export { IconCard } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/IconNotification/IconNotification.jsx: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react' 2 | import { NavItem, NavLink } from 'reactstrap' 3 | 4 | import { Exports } from '5_comp_0' 5 | import { stopUndefined } from '1_utils' 6 | 7 | const { Link } = stopUndefined(Exports) 8 | 9 | const ICON_NOTIFICATION_STATE_SIGNED_IN = 'signedIn' 10 | 11 | const IconNotification = memo(props => { 12 | const { 13 | [ICON_NOTIFICATION_STATE_SIGNED_IN]: signedIn, 14 | small, 15 | to, 16 | className, 17 | } = props 18 | return ( 19 | signedIn && ( 20 | 21 | 22 | 23 | 24 | 25 | ) 26 | ) 27 | }) 28 | 29 | export { IconNotification, ICON_NOTIFICATION_STATE_SIGNED_IN } 30 | -------------------------------------------------------------------------------- /src/5_comp_1/IconNotification/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | IconNotification, 4 | ICON_NOTIFICATION_STATE_SIGNED_IN, 5 | } from './IconNotification' 6 | import { StateContainer, storeUser, STORE_USER_STATE_SIGNED_IN } from '2_state' 7 | import { ROUTE_PAGE_NOTIFICATIONS } from '2_routes' 8 | 9 | const mapStoreUserStateToProp = { 10 | [ICON_NOTIFICATION_STATE_SIGNED_IN]: STORE_USER_STATE_SIGNED_IN, 11 | } 12 | 13 | const IconNotificationStoreUser = StateContainer( 14 | IconNotification, 15 | [storeUser], 16 | [mapStoreUserStateToProp], 17 | [] 18 | ) 19 | 20 | const IconNotificationStoreUserPropedNavbar = props => { 21 | return 22 | } 23 | 24 | export { IconNotificationStoreUserPropedNavbar } 25 | -------------------------------------------------------------------------------- /src/5_comp_1/ImageUpload/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { ImageUpload } from './ImageUpload' 3 | import { AVATAR_DEFAULT } from '0_app_flavor' 4 | 5 | const ImageUploadPropedDefaultAvatar = props => { 6 | return 7 | } 8 | 9 | export { ImageUploadPropedDefaultAvatar } 10 | -------------------------------------------------------------------------------- /src/5_comp_1/ImagesTooltip/index.js: -------------------------------------------------------------------------------- 1 | import React, { useMemo } from 'react' 2 | import { ImagesTooltip } from './ImagesTooltip' 3 | import { getImagesTooltip } from './utils' 4 | 5 | const ImagesTooltipOptioned = props => { 6 | const { icons, ...otherProps } = props 7 | const icons_ = useMemo(() => getImagesTooltip(icons), [icons]) 8 | return 9 | } 10 | 11 | export { ImagesTooltipOptioned } 12 | -------------------------------------------------------------------------------- /src/5_comp_1/InputDate/InputDate.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import clsx from 'clsx' 3 | import { FormGroup } from 'reactstrap' 4 | import ReactDatetime from 'react-datetime' 5 | 6 | const InputDate = props => { 7 | const { 8 | className, 9 | hasFocus, 10 | hasDanger, 11 | hasSuccess, 12 | children, 13 | placeholder, 14 | ...restProps 15 | } = props 16 | 17 | return ( 18 | 19 | 32 | {children} 33 | 34 | ) 35 | } 36 | 37 | export { InputDate } 38 | -------------------------------------------------------------------------------- /src/5_comp_1/InputDate/index.js: -------------------------------------------------------------------------------- 1 | import { InputDate } from './InputDate' 2 | 3 | export { InputDate } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/InputInteger/index.js: -------------------------------------------------------------------------------- 1 | import { InputInteger } from './InputInteger' 2 | 3 | export { InputInteger } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/InputSelect/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | InputSelect, 3 | INPUT_SELECT_VALUE, 4 | INPUT_SELECT_LABEL, 5 | INPUT_SELECT_DISABLED, 6 | COLOR, 7 | } from './InputSelect' 8 | 9 | export { 10 | InputSelect, 11 | INPUT_SELECT_VALUE, 12 | INPUT_SELECT_LABEL, 13 | INPUT_SELECT_DISABLED, 14 | COLOR, 15 | } 16 | -------------------------------------------------------------------------------- /src/5_comp_1/InputSelect/styles.css: -------------------------------------------------------------------------------- 1 | .react-select 2 | .react-select__control 3 | .react-select__value-container--has-value 4 | .react-select__single-value { 5 | top: 48%; 6 | color: #cad1d7; 7 | } 8 | -------------------------------------------------------------------------------- /src/5_comp_1/InputText/index.js: -------------------------------------------------------------------------------- 1 | import { InputText } from './InputText' 2 | 3 | export { InputText } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/LabelForm/LabelForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Col, Row } from 'reactstrap' 3 | 4 | const LabelForm = props => { 5 | const { htmlFor, label, children, Inputmd } = props 6 | return ( 7 | 8 | 9 | 12 | 13 | 14 | {children} 15 | 16 | 17 | ) 18 | } 19 | 20 | export { LabelForm } 21 | -------------------------------------------------------------------------------- /src/5_comp_1/LabelForm/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { LabelForm } from './LabelForm' 3 | // reactstrap components 4 | import { FormGroup } from 'reactstrap' 5 | 6 | const LabelFormSimple = props => { 7 | const { htmlFor, children, ...restProps } = props 8 | return ( 9 | 10 | 11 | 14 | 15 | 16 | ) 17 | } 18 | 19 | export { LabelForm, LabelFormSimple } 20 | -------------------------------------------------------------------------------- /src/5_comp_1/LightBox/index.js: -------------------------------------------------------------------------------- 1 | import { LightBox } from './LightBox' 2 | 3 | export { LightBox } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/ListNavItem/style.css: -------------------------------------------------------------------------------- 1 | .avatarLink { 2 | padding-left: 12; 3 | padding-right: 18; 4 | } 5 | -------------------------------------------------------------------------------- /src/5_comp_1/LoaderNavLink/LoaderNavLink.jsx: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react' 2 | import { NavItem, NavLink } from 'reactstrap' 3 | import Loader from 'react-loader-spinner' 4 | 5 | const LOADER_NAV_LINK_STATE_IS_LOADING = 'loading' 6 | 7 | const LoaderNavLink = memo(props => { 8 | const { 9 | [LOADER_NAV_LINK_STATE_IS_LOADING]: isLoading, 10 | body, 11 | children, 12 | small, 13 | } = props 14 | return isLoading ? ( 15 | 16 | 21 | 22 |   {body} 23 | 24 | 25 | ) : ( 26 | children 27 | ) 28 | }) 29 | 30 | export { LoaderNavLink, LOADER_NAV_LINK_STATE_IS_LOADING } 31 | -------------------------------------------------------------------------------- /src/5_comp_1/LoaderNavLink/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | LoaderNavLink, 4 | LOADER_NAV_LINK_STATE_IS_LOADING, 5 | } from './LoaderNavLink' 6 | import { StateContainer, storeUser, STORE_USER_STATE_SIGNING_IN } from '2_state' 7 | 8 | const mapStoreUserStateToProp = { 9 | [LOADER_NAV_LINK_STATE_IS_LOADING]: STORE_USER_STATE_SIGNING_IN, 10 | } 11 | 12 | const LoaderNavLinkStoreUser = StateContainer( 13 | LoaderNavLink, 14 | [storeUser], 15 | [mapStoreUserStateToProp], 16 | [] 17 | ) 18 | 19 | const LoaderNavLinkStoreUserPropedNavbar = props => { 20 | return 21 | } 22 | 23 | export { LoaderNavLinkStoreUserPropedNavbar } 24 | -------------------------------------------------------------------------------- /src/5_comp_1/MenuHamburger/MenuHamburger.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { NavItem } from 'reactstrap' 3 | 4 | const MenuHamburger = props => { 5 | const { isOpen, toggle } = props 6 | return ( 7 | 8 | 16 | 17 | ) 18 | } 19 | 20 | export { MenuHamburger } 21 | -------------------------------------------------------------------------------- /src/5_comp_1/MenuHamburger/index.js: -------------------------------------------------------------------------------- 1 | import { MenuHamburger } from './MenuHamburger' 2 | 3 | export { MenuHamburger } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/ModalSimple/ModalSimple.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Modal } from 'reactstrap' 3 | 4 | const ModalSimple = props => { 5 | const { isOpen, toggle, children } = props 6 | return ( 7 | 14 |
15 | 24 |
25 | {children} 26 | 27 | ) 28 | } 29 | 30 | export { ModalSimple } 31 | -------------------------------------------------------------------------------- /src/5_comp_1/ModalSimple/index.js: -------------------------------------------------------------------------------- 1 | import { ModalSimple } from './ModalSimple' 2 | 3 | export { ModalSimple } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/PageError/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | PageError, 3 | PAGE_ERROR_CODE_NOT_FOUND, 4 | PAGE_ERROR_CODE_UNAUTHORIZED, 5 | PAGE_ERROR_CODE_NOT_A_SELLER, 6 | } from './PageError' 7 | 8 | export { 9 | PageError, 10 | PAGE_ERROR_CODE_NOT_FOUND, 11 | PAGE_ERROR_CODE_UNAUTHORIZED, 12 | PAGE_ERROR_CODE_NOT_A_SELLER, 13 | } 14 | -------------------------------------------------------------------------------- /src/5_comp_1/Pagination/index.js: -------------------------------------------------------------------------------- 1 | import { Pagination } from './Pagination' 2 | 3 | export { Pagination } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/Popover/Popover.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Loader from 'react-loader-spinner' 3 | import { 4 | Popover as PopoverRS, 5 | PopoverHeader, 6 | PopoverBody, 7 | Row, 8 | Col, 9 | } from 'reactstrap' 10 | 11 | const Popover = props => { 12 | const { isOpen, target, spinner, header, children } = props 13 | 14 | return ( 15 | 21 | 22 | 23 | 24 | {spinner && ( 25 | 31 | )} 32 | 33 | {header} 34 | 35 | 36 | {children} 37 | 38 | ) 39 | } 40 | 41 | export { Popover } 42 | -------------------------------------------------------------------------------- /src/5_comp_1/Popover/index.js: -------------------------------------------------------------------------------- 1 | import { Popover } from './Popover' 2 | 3 | export { Popover } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/Progress/Progress.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // reactstrap components 3 | import { Progress as ProgressRS } from 'reactstrap' 4 | 5 | const PROGRESS_STATE_IS_OPEN = 'isOpen' 6 | const PROGRESS_STATE_COLOR = 'color' 7 | const PROGRESS_STATE_VALUE = 'value' 8 | 9 | const Progress = props => { 10 | const { 11 | [PROGRESS_STATE_IS_OPEN]: isOpen, 12 | [PROGRESS_STATE_COLOR]: color, 13 | [PROGRESS_STATE_VALUE]: value, 14 | } = props 15 | return isOpen ? ( 16 |
17 | 18 | {value}% 19 | 20 |
21 | ) : null 22 | } 23 | 24 | export { 25 | Progress, 26 | PROGRESS_STATE_IS_OPEN, 27 | PROGRESS_STATE_COLOR, 28 | PROGRESS_STATE_VALUE, 29 | } 30 | -------------------------------------------------------------------------------- /src/5_comp_1/Progress/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | Progress, 3 | PROGRESS_STATE_IS_OPEN, 4 | PROGRESS_STATE_COLOR, 5 | PROGRESS_STATE_VALUE, 6 | } from './Progress' 7 | 8 | import { 9 | StateContainer, 10 | storeProgress, 11 | STORE_PROGRESS_STATE_IS_OPEN, 12 | STORE_PROGRESS_STATE_COLOR, 13 | STORE_PROGRESS_STATE_VALUE, 14 | } from '2_state' 15 | 16 | const mapStoreProgressStateToProp = { 17 | [PROGRESS_STATE_IS_OPEN]: STORE_PROGRESS_STATE_IS_OPEN, 18 | [PROGRESS_STATE_COLOR]: STORE_PROGRESS_STATE_COLOR, 19 | [PROGRESS_STATE_VALUE]: STORE_PROGRESS_STATE_VALUE, 20 | } 21 | 22 | const ProgressStoreProgress = StateContainer( 23 | Progress, 24 | [storeProgress], 25 | [mapStoreProgressStateToProp] 26 | ) 27 | 28 | export { Progress, ProgressStoreProgress } 29 | -------------------------------------------------------------------------------- /src/5_comp_1/Section/Section.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import clsx from 'clsx' 3 | 4 | const Section = props => { 5 | const { className, ...otherProps } = props 6 | return ( 7 |
8 | ) 9 | } 10 | 11 | export { Section } 12 | -------------------------------------------------------------------------------- /src/5_comp_1/Section/index.js: -------------------------------------------------------------------------------- 1 | import { Section } from './Section' 2 | 3 | export { Section } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/Status/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Status } from './Status' 3 | import { useOnline } from './utils' 4 | 5 | const StatusPropedOnline = props => { 6 | const { uid, ...otherPops } = props 7 | const [loading, online] = useOnline(uid) 8 | return ( 9 | 16 | ) 17 | } 18 | 19 | export { StatusPropedOnline } 20 | -------------------------------------------------------------------------------- /src/5_comp_1/Status/styles.module.css: -------------------------------------------------------------------------------- 1 | .dot { 2 | height: 0.75rem; 3 | width: 0.75rem; 4 | border-radius: 50%; 5 | } 6 | 7 | .on { 8 | background-color: #66ff00; 9 | } 10 | 11 | .off { 12 | background-color: #6c757d; 13 | } 14 | -------------------------------------------------------------------------------- /src/5_comp_1/Status/utils.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | import { databaseUserPresenceOnSnapshot } from '3_app_event' 3 | 4 | const useOnline = uid => { 5 | const [loading, setLoading] = useState(true) 6 | const [online, setOnline] = useState(false) 7 | 8 | useEffect(() => { 9 | const unsubscribe = databaseUserPresenceOnSnapshot(uid)(state => { 10 | setLoading(false) 11 | setOnline(state) 12 | }) 13 | return unsubscribe 14 | }, [uid]) 15 | 16 | return [loading, online] 17 | } 18 | 19 | export { useOnline } 20 | -------------------------------------------------------------------------------- /src/5_comp_1/Tab/index.js: -------------------------------------------------------------------------------- 1 | import { Tab, TAB_NAME, TAB_CONTENT } from './Tab' 2 | 3 | export { Tab, TAB_NAME, TAB_CONTENT } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/TabListVertical/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | TabListVertical, 4 | TAB_LIST_VERTICAL_NAME, 5 | TAB_LIST_VERTICAL_TO, 6 | TAB_LIST_VERTICAL_ICON, 7 | } from './TabListVertical' 8 | import { useLocation } from '2_routes' 9 | 10 | const TabListVerticalPropedWithRouter = props => { 11 | const { pathname } = useLocation() 12 | const { tablist } = props 13 | return 14 | } 15 | 16 | export { 17 | TabListVerticalPropedWithRouter, 18 | TAB_LIST_VERTICAL_NAME, 19 | TAB_LIST_VERTICAL_TO, 20 | TAB_LIST_VERTICAL_ICON, 21 | } 22 | -------------------------------------------------------------------------------- /src/5_comp_1/TabListVertical/utils.js: -------------------------------------------------------------------------------- 1 | // routing 2 | import { 3 | ROUTE_PAGE_SETTINGS_GENERAL, 4 | ROUTE_PAGE_SETTINGS_PAYMENT, 5 | ROUTE_PAGE_SETTINGS_ACCOUNT, 6 | ROUTE_PAGE_SETTINGS_NOTIFICATION, 7 | } from '2_routes' 8 | 9 | const settingPageTabList = [ 10 | { 11 | navLink: 'General', 12 | icon: 'icon-single-02', 13 | to: ROUTE_PAGE_SETTINGS_GENERAL, 14 | }, 15 | { 16 | navLink: 'Payment', 17 | icon: 'icon-credit-card', 18 | to: ROUTE_PAGE_SETTINGS_PAYMENT, 19 | }, 20 | { 21 | navLink: 'Account', 22 | icon: 'icon-lock-circle', 23 | to: ROUTE_PAGE_SETTINGS_ACCOUNT, 24 | }, 25 | { 26 | navLink: 'Notification', 27 | icon: 'icon-volume-98', 28 | to: ROUTE_PAGE_SETTINGS_NOTIFICATION, 29 | }, 30 | ] 31 | 32 | export { settingPageTabList } 33 | -------------------------------------------------------------------------------- /src/5_comp_1/TabPaneContainer/TabPaneContainer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const TabPaneContainer = props => { 4 | const { children } = props 5 | 6 | return ( 7 |
8 | {children} 9 |
10 | ) 11 | } 12 | 13 | export { TabPaneContainer } 14 | -------------------------------------------------------------------------------- /src/5_comp_1/TabPaneContainer/index.jsx: -------------------------------------------------------------------------------- 1 | import { TabPaneContainer } from './TabPaneContainer' 2 | 3 | export { TabPaneContainer } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/TextAlert/TextAlert.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import clsx from 'clsx' 3 | import { Row, Col, Alert } from 'reactstrap' 4 | 5 | const TextAlert = props => { 6 | const { messages, icon, isOpen, timeout } = props 7 | let messages_ = messages 8 | ? Array.isArray(messages) 9 | ? messages 10 | : [messages] 11 | : [] 12 | 13 | return messages_.map(message => { 14 | return ( 15 | 26 | 27 | 28 | 29 | 30 | 31 | {message} 32 | 33 | 34 | 35 | ) 36 | }) 37 | } 38 | 39 | export { TextAlert } 40 | -------------------------------------------------------------------------------- /src/5_comp_1/TextAlert/index.js: -------------------------------------------------------------------------------- 1 | import { TextAlert } from './TextAlert' 2 | 3 | export { TextAlert } 4 | -------------------------------------------------------------------------------- /src/5_comp_1/TextIcon/TextIcon.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import clsx from 'clsx' 3 | import { Exports } from '5_comp_0' 4 | import { stopUndefined } from '1_utils' 5 | const { Icon } = stopUndefined(Exports) 6 | 7 | const TextIcon = props => { 8 | const { 9 | h: H, 10 | className, 11 | children, 12 | image, 13 | icon, 14 | emoji, 15 | aria, 16 | ...otherProps 17 | } = props 18 | 19 | return ( 20 | 21 | 22 | {children} 23 | 24 | ) 25 | } 26 | 27 | export { TextIcon } 28 | -------------------------------------------------------------------------------- /src/5_comp_1/Wrapper/Wrapper.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react' 2 | import clsx from 'clsx' 3 | 4 | const WRAPPER_STATE_OFFSET_TOP = 'offsetTop' 5 | 6 | const Wrapper = props => { 7 | const wrapper = useRef(null) 8 | 9 | const { 10 | bodyClassName, 11 | className, 12 | children, 13 | [WRAPPER_STATE_OFFSET_TOP]: offsetTop, 14 | ...otherProps 15 | } = props 16 | 17 | useEffect(() => { 18 | document.body.classList.add(bodyClassName) 19 | document.documentElement.scrollTop = 0 20 | document.scrollingElement.scrollTop = 0 21 | wrapper.current.scrollTop = 0 22 | return () => { 23 | document.body.classList.remove(bodyClassName) 24 | } 25 | }, []) 26 | 27 | return ( 28 |
33 |
34 | {children} 35 |
36 | ) 37 | } 38 | 39 | export { Wrapper, WRAPPER_STATE_OFFSET_TOP } 40 | -------------------------------------------------------------------------------- /src/5_comp_2/ButtonsImage/index.js: -------------------------------------------------------------------------------- 1 | import React, { useMemo } from 'react' 2 | import { 3 | ButtonsImage, 4 | BUTTONS_COMMON_IMAGE_ID, 5 | BUTTONS_COMMON_IMAGE_TEXT, 6 | } from './ButtonsImage' 7 | import { buttonsIndex, getButtonsImage } from './utils' 8 | 9 | const ButtonsImageOptioned = props => { 10 | const { buttons, ...otherProps } = props 11 | const buttons_ = useMemo(() => getButtonsImage(buttons), [buttons]) 12 | return 13 | } 14 | 15 | const ButtonsImagePropedIndex = props => { 16 | return ( 17 | 26 | ) 27 | } 28 | 29 | export { 30 | ButtonsImagePropedIndex, 31 | BUTTONS_COMMON_IMAGE_ID, 32 | BUTTONS_COMMON_IMAGE_TEXT, 33 | } 34 | -------------------------------------------------------------------------------- /src/5_comp_2/ButtonsImage/styled.js: -------------------------------------------------------------------------------- 1 | import { styledR, p_0, p_1, p_2, p_3 } from '0_styled' 2 | import { Exports } from '5_comp_1' 3 | import { stopUndefined } from '1_utils' 4 | const { Button, Col } = stopUndefined(Exports) 5 | 6 | const ButtonStyled = styledR(Button)( 7 | { 8 | xs: p_1, 9 | sm: p_2, 10 | lg: p_3, 11 | }, 12 | 3 13 | ) 14 | 15 | const ColStyled = styledR(Col)( 16 | { 17 | xs: p_0, 18 | sm: p_1, 19 | md: p_2, 20 | lg: p_3, 21 | }, 22 | 3 23 | ) 24 | 25 | export { ButtonStyled, ColStyled } 26 | -------------------------------------------------------------------------------- /src/5_comp_2/CardGift/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CardGift } from './CardGift' 3 | import { gifts } from './utils' 4 | 5 | const CardGiftPropedProfile = props => { 6 | return 7 | } 8 | export { CardGiftPropedProfile } 9 | -------------------------------------------------------------------------------- /src/5_comp_2/CardUser/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CardUser } from './CardUser' 3 | 4 | const CardProfileOptioned = props => { 5 | return 6 | } 7 | 8 | const CardUserPropedDiscover = props => { 9 | return 10 | } 11 | 12 | const CardProfilePropedSearch = props => { 13 | return 14 | } 15 | 16 | export { CardUserPropedDiscover, CardProfilePropedSearch } 17 | -------------------------------------------------------------------------------- /src/5_comp_2/CardUserHorizontal/index.js: -------------------------------------------------------------------------------- 1 | import { CardUserHorizontal } from './CardUserHorizontal' 2 | 3 | export { CardUserHorizontal } 4 | -------------------------------------------------------------------------------- /src/5_comp_2/CardUserHorizontal/styled.js: -------------------------------------------------------------------------------- 1 | import { styledR, mt_3, mt_4 } from '0_styled' 2 | import { Exports } from '5_comp_1' 3 | import { stopUndefined } from '1_utils' 4 | const { Container, Col, Row } = stopUndefined(Exports) 5 | 6 | const ContainerStyled = styledR(Container)({ 7 | xs: `border: 2px solid #344675; 8 | z-index: 3; 9 | border-radius: 0.4285rem; // rounded-lg`, 10 | lg: `border-radius: 50rem; // rounded-pill`, 11 | }) 12 | 13 | const RowStyledUsername = styledR(Row)({ 14 | xs: `text-align: center; 15 | ${mt_3};`, 16 | lg: `text-align: left; 17 | ${mt_4};`, 18 | }) 19 | 20 | const ColStyledBadges = styledR(Col)({ 21 | xs: `text-align: center;`, 22 | }) 23 | 24 | const TextStyledSubscribe = styledR('p')({ 25 | xs: mt_3, 26 | lg: mt_4, 27 | }) 28 | 29 | export { 30 | ContainerStyled, 31 | RowStyledUsername, 32 | ColStyledBadges, 33 | TextStyledSubscribe, 34 | } 35 | -------------------------------------------------------------------------------- /src/5_comp_2/CarouselCardSimple/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CarouselCardSimple } from './CarouselCardSimple' 3 | import { cardPlayers } from './utils' 4 | 5 | const CarouselCardSimplePropedNew = props => { 6 | const { ...otherProps } = props 7 | return 8 | } 9 | export { CarouselCardSimplePropedNew } 10 | -------------------------------------------------------------------------------- /src/5_comp_2/CarouselLightBox/CarouselLightBox.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useCallback } from 'react' 2 | import { stopUndefined } from '1_utils' 3 | import { Exports } from '5_comp_1' 4 | const { Carousel, LightBox } = stopUndefined(Exports) 5 | 6 | const CarouselLightBox = props => { 7 | const [slide, setSlide] = useState(0) 8 | const [toggle, setToggle] = useState(false) 9 | const { items, aspectRatio } = props 10 | 11 | const onSlide = useCallback(currentIndex => { 12 | setSlide(currentIndex) 13 | }, []) 14 | 15 | const onImageClick = useCallback(() => { 16 | setToggle(state => !state) 17 | }, []) 18 | return ( 19 | <> 20 | 21 | 30 | 31 | ) 32 | } 33 | 34 | export { CarouselLightBox } 35 | -------------------------------------------------------------------------------- /src/5_comp_2/CarouselLightBox/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CarouselLightBox } from './CarouselLightBox' 3 | import { itemsProfile } from './utils' 4 | 5 | const CarouselLightBoxPropedProfile = props => { 6 | return 7 | } 8 | 9 | export { CarouselLightBoxPropedProfile } 10 | -------------------------------------------------------------------------------- /src/5_comp_2/CarouselLightBox/utils.js: -------------------------------------------------------------------------------- 1 | // temp data array 2 | import { 3 | FIRESTORE_SELLER_SETTINGS_PROFILE_CAROUSEL_IMAGE, 4 | FIRESTORE_SELLER_SETTINGS_PROFILE_CAROUSEL_YOUTUBE, 5 | } from '0_constants' 6 | 7 | const getProfileImage = name => require(`0_assets/img/${name}.jpg`) 8 | 9 | const itemsProfile = [ 10 | { 11 | [FIRESTORE_SELLER_SETTINGS_PROFILE_CAROUSEL_IMAGE]: getProfileImage( 12 | 'denys' 13 | ), 14 | }, 15 | { 16 | [FIRESTORE_SELLER_SETTINGS_PROFILE_CAROUSEL_YOUTUBE]: 'bdgTa9ni4S8', 17 | }, 18 | { 19 | [FIRESTORE_SELLER_SETTINGS_PROFILE_CAROUSEL_IMAGE]: getProfileImage( 20 | 'mark-finn' 21 | ), 22 | }, 23 | { 24 | [FIRESTORE_SELLER_SETTINGS_PROFILE_CAROUSEL_YOUTUBE]: 'vZX8WJJyXvM', 25 | }, 26 | { 27 | [FIRESTORE_SELLER_SETTINGS_PROFILE_CAROUSEL_IMAGE]: getProfileImage( 28 | 'fabien-bazanegue' 29 | ), 30 | }, 31 | { 32 | [FIRESTORE_SELLER_SETTINGS_PROFILE_CAROUSEL_YOUTUBE]: 'vtjorh21b8Q', 33 | }, 34 | ] 35 | 36 | export { itemsProfile } 37 | -------------------------------------------------------------------------------- /src/5_comp_2/ChatContactList/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { ChatContactList } from './ChatContactList' 4 | import { contactList } from './utils' 5 | 6 | const ChatContactListWithProps = props => { 7 | const { otherProps } = props 8 | return 9 | } 10 | export { ChatContactListWithProps } 11 | -------------------------------------------------------------------------------- /src/5_comp_2/CommentWithPagination/index.js: -------------------------------------------------------------------------------- 1 | import { CommentWithPagination } from './CommentWithPagination' 2 | 3 | export { CommentWithPagination } 4 | -------------------------------------------------------------------------------- /src/5_comp_2/DropdownNavbar/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | DropdownNavbar, 3 | DROPDOWN_NAVBAR_STATE_SHOW, 4 | DROPDOWN_NAVBAR_STATE_AVATAR, 5 | } from './DropdownNavbar' 6 | import { 7 | StateContainer, 8 | storeUser, 9 | STORE_USER_STATE_SIGNED_IN, 10 | STORE_USER_STATE_AVATAR, 11 | } from '2_state' 12 | 13 | const mapStoreUserStateToProp = { 14 | [DROPDOWN_NAVBAR_STATE_SHOW]: STORE_USER_STATE_SIGNED_IN, 15 | [DROPDOWN_NAVBAR_STATE_AVATAR]: STORE_USER_STATE_AVATAR, 16 | } 17 | 18 | const DropdownNavbarStoreUser = StateContainer( 19 | DropdownNavbar, 20 | [storeUser], 21 | [mapStoreUserStateToProp], 22 | [] 23 | ) 24 | 25 | export { DropdownNavbarStoreUser } 26 | -------------------------------------------------------------------------------- /src/5_comp_2/ModalImageCropper/index.js: -------------------------------------------------------------------------------- 1 | import { ModalImageCropper } from './ModalImageCropper' 2 | 3 | export { ModalImageCropper } 4 | -------------------------------------------------------------------------------- /src/5_comp_2/PanelFilterSearch/index.js: -------------------------------------------------------------------------------- 1 | import { PanelFilterSearch } from './PanelFilterSearch' 2 | export { PanelFilterSearch } 3 | -------------------------------------------------------------------------------- /src/5_comp_2/PanelSortBy/index.js: -------------------------------------------------------------------------------- 1 | import { PanelSortBy } from './PanelSortBy' 2 | export { PanelSortBy } 3 | -------------------------------------------------------------------------------- /src/5_comp_2/TabPanelService/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | TabPanelService, 3 | TAB_PRODUCT_DESCRIPTION, 4 | TAB_PRODUCT_NUM_ORDERS, 5 | TAB_PRODUCT_PRICE, 6 | } from './TabPanelService' 7 | 8 | export { 9 | TAB_PRODUCT_DESCRIPTION, 10 | TAB_PRODUCT_NUM_ORDERS, 11 | TAB_PRODUCT_PRICE, 12 | TabPanelService, 13 | } 14 | -------------------------------------------------------------------------------- /src/5_comp_3/ChatMessageContainer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { ChatMessageContainer } from './ChatMessageContainer' 3 | import { messages } from './utils' 4 | 5 | const ChatMessageContainerWithProps = props => { 6 | const { otherProps } = props 7 | return 8 | } 9 | 10 | export { ChatMessageContainerWithProps } 11 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalDateBirthDate/FinalDateBirthDate.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import moment from 'moment' 3 | import { stopUndefined } from '1_utils' 4 | import { Exports } from '5_comp_2' 5 | 6 | const { FinalInputDate } = stopUndefined(Exports) 7 | 8 | const FINAL_DATE_BIRTH_DATE = 'birthDate' 9 | 10 | const upperLimit = moment().subtract(7, 'y') 11 | const lowerLimit = moment().subtract(90, 'y') 12 | 13 | const valid = current => { 14 | return current.isAfter(lowerLimit) && current.isBefore(upperLimit) 15 | } 16 | 17 | const defaultValue = moment() 18 | .subtract(20, 'y') 19 | .month(0) 20 | .date(1) 21 | 22 | const FinalDateBirthDate = props => { 23 | const { value, ...restProps } = props 24 | return ( 25 | 34 | ) 35 | } 36 | 37 | export { FinalDateBirthDate, FINAL_DATE_BIRTH_DATE } 38 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalDateBirthDate/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FinalDateBirthDate, FINAL_DATE_BIRTH_DATE } from './FinalDateBirthDate' 3 | 4 | import { stopUndefined } from '1_utils' 5 | 6 | // components 7 | import { Exports } from '5_comp_2' 8 | 9 | const { LabelForm } = stopUndefined(Exports) 10 | 11 | const FinalDateBirthDatePropedGeneraL = props => { 12 | return ( 13 | 14 | 15 | 16 | ) 17 | } 18 | 19 | export { FinalDateBirthDatePropedGeneraL, FINAL_DATE_BIRTH_DATE } 20 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalSelectCountry/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { FinalSelectCountry, FINAL_SELECT_COUNTRY } from './FinalSelectCountry' 4 | 5 | // components 6 | import { stopUndefined } from '1_utils' 7 | import { Exports } from '5_comp_2' 8 | 9 | const { LabelForm } = stopUndefined(Exports) 10 | 11 | const FinalSelectCountryPropedGeneraL = props => { 12 | return ( 13 | 14 | 15 | 16 | ) 17 | } 18 | 19 | export { FinalSelectCountryPropedGeneraL, FINAL_SELECT_COUNTRY } 20 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalSelectExpiryMonth/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | FinalSelectExpiryMonth, 4 | FINAL_SELECT_EXPIRY_MONTH, 5 | } from './FinalSelectExpiryMonth' 6 | import { cardExpiryValidation } from '1_utils' 7 | import { Col } from 'reactstrap' 8 | 9 | const FinalSelectExpiryMonthPropedDefault = props => { 10 | return ( 11 | 12 | 13 | 14 | ) 15 | } 16 | 17 | export { FinalSelectExpiryMonthPropedDefault, FINAL_SELECT_EXPIRY_MONTH } 18 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalSelectExpiryYear/FinalSelectExpiryYear.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { stopUndefined } from '1_utils' 3 | import { Exports } from '5_comp_2' 4 | 5 | const { 6 | FinalInputSelect, 7 | INPUT_SELECT_VALUE, 8 | INPUT_SELECT_LABEL, 9 | INPUT_SELECT_DISABLED, 10 | } = stopUndefined(Exports) 11 | 12 | const FINAL_SELECT_EXPIRY_YEAR = 'expiryYear' 13 | 14 | const year = new Date().getFullYear() 15 | 16 | const yearOptions = Array.from(new Array(30), (e, i) => { 17 | const yearString = (year + i).toString() 18 | return { [INPUT_SELECT_VALUE]: yearString, [INPUT_SELECT_LABEL]: yearString } 19 | }) 20 | 21 | yearOptions.unshift({ 22 | [INPUT_SELECT_VALUE]: '', 23 | [INPUT_SELECT_LABEL]: 'Year', 24 | [INPUT_SELECT_DISABLED]: true, 25 | }) 26 | 27 | const FinalSelectExpiryYear = props => { 28 | return ( 29 | 35 | ) 36 | } 37 | 38 | export { FinalSelectExpiryYear, FINAL_SELECT_EXPIRY_YEAR } 39 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalSelectExpiryYear/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | FinalSelectExpiryYear, 4 | FINAL_SELECT_EXPIRY_YEAR, 5 | } from './FinalSelectExpiryYear' 6 | import { cardExpiryValidation } from '1_utils' 7 | import { Col } from 'reactstrap' 8 | 9 | const FinalSelectExpiryYearPropedDefault = props => { 10 | return ( 11 | 12 | 13 | 14 | ) 15 | } 16 | 17 | export { FinalSelectExpiryYearPropedDefault, FINAL_SELECT_EXPIRY_YEAR } 18 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalSelectGame/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FinalSelectGame, FINAL_SELECT_GAME } from './FinalSelectGame' 3 | 4 | // components 5 | import { stopUndefined } from '1_utils' 6 | import { Exports } from '5_comp_2' 7 | 8 | const { LabelForm } = stopUndefined(Exports) 9 | 10 | const FinalSelectGamePropedGeneraL = props => { 11 | return ( 12 | 13 | 14 | 15 | ) 16 | } 17 | 18 | export { FinalSelectGamePropedGeneraL, FINAL_SELECT_GAME } 19 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalSelectGender/FinalSelectGender.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { stopUndefined } from '1_utils' 3 | import { Exports } from '5_comp_2' 4 | 5 | const { 6 | FinalInputSelect, 7 | INPUT_SELECT_VALUE, 8 | INPUT_SELECT_LABEL, 9 | INPUT_SELECT_DISABLED, 10 | } = stopUndefined(Exports) 11 | 12 | const genderOptions = [ 13 | { 14 | [INPUT_SELECT_VALUE]: '', 15 | [INPUT_SELECT_LABEL]: 'Gender', 16 | [INPUT_SELECT_DISABLED]: true, 17 | }, 18 | { [INPUT_SELECT_VALUE]: '0', [INPUT_SELECT_LABEL]: 'Male' }, 19 | { [INPUT_SELECT_VALUE]: '1', [INPUT_SELECT_LABEL]: 'Female' }, 20 | { 21 | [INPUT_SELECT_VALUE]: '2', 22 | [INPUT_SELECT_LABEL]: 'Feeling Lucky', 23 | }, 24 | ] 25 | 26 | const FINAL_SELECT_GENDER = 'Gender' 27 | 28 | const FinalSelectGender = props => { 29 | return ( 30 | 36 | ) 37 | } 38 | 39 | export { FinalSelectGender, FINAL_SELECT_GENDER } 40 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalSelectGender/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FinalSelectGender, FINAL_SELECT_GENDER } from './FinalSelectGender' 3 | 4 | // components 5 | import { stopUndefined } from '1_utils' 6 | import { Exports } from '5_comp_2' 7 | 8 | const { LabelForm } = stopUndefined(Exports) 9 | 10 | const FinalSelectGenderPropedGeneraL = props => { 11 | return ( 12 | 13 | 14 | 15 | ) 16 | } 17 | 18 | export { FinalSelectGenderPropedGeneraL, FINAL_SELECT_GENDER } 19 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalSelectLanguages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | FinalSelectLanguages, 4 | FINAL_SELECT_LANGUAGES, 5 | } from './FinalSelectLanguages' 6 | 7 | // components 8 | import { stopUndefined } from '1_utils' 9 | import { Exports } from '5_comp_2' 10 | 11 | const { LabelForm } = stopUndefined(Exports) 12 | 13 | const FinalSelectLanguagesPropedGeneraL = props => { 14 | return ( 15 | 16 | 17 | 18 | ) 19 | } 20 | 21 | export { FinalSelectLanguagesPropedGeneraL, FINAL_SELECT_LANGUAGES } 22 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalTextCardCVC/FinalTextCardCVC.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { stopUndefined } from '1_utils' 3 | import { Exports } from '5_comp_2' 4 | 5 | const { FinalInputText } = stopUndefined(Exports) 6 | 7 | const FINAL_TEXT_CARD_CVC = 'cvc' 8 | 9 | const onChange = (e, onValueChange = () => {}) => { 10 | const { 11 | target: { value }, 12 | } = e 13 | if (!isNaN(value) && value.length < 5) { 14 | onValueChange(value) 15 | return e.target.value 16 | } 17 | return false 18 | } 19 | 20 | const FinalTextCardCVC = props => { 21 | return ( 22 | 31 | ) 32 | } 33 | 34 | export { FinalTextCardCVC, FINAL_TEXT_CARD_CVC } 35 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalTextCardCVC/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FinalTextCardCVC, FINAL_TEXT_CARD_CVC } from './FinalTextCardCVC' 3 | import { cardCvcValidation } from '1_utils' 4 | import { Col } from 'reactstrap' 5 | 6 | const FinalTextCardCVCPropedDefault = props => { 7 | return ( 8 | 9 | 10 | 11 | ) 12 | } 13 | 14 | export { FinalTextCardCVCPropedDefault, FINAL_TEXT_CARD_CVC } 15 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalTextCardHolderName/FinalTextCardHolderName.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { stopUndefined } from '1_utils' 3 | import { Exports } from '5_comp_2' 4 | 5 | const { FinalInputText } = stopUndefined(Exports) 6 | 7 | const onChange = (e, onValueChange = () => {}) => { 8 | const { 9 | target: { value }, 10 | } = e 11 | if (value.length < 100) { 12 | onValueChange(value) 13 | return e.target.value 14 | } 15 | return false 16 | } 17 | 18 | const FINAL_TEXT_CARD_HOLDER_NAME = 'ccname' 19 | 20 | const FinalTextCardHolderName = props => { 21 | return ( 22 | 31 | ) 32 | } 33 | 34 | export { FinalTextCardHolderName, FINAL_TEXT_CARD_HOLDER_NAME } 35 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalTextCardHolderName/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | FinalTextCardHolderName, 4 | FINAL_TEXT_CARD_HOLDER_NAME, 5 | } from './FinalTextCardHolderName' 6 | import { cardNameValidation } from '1_utils' 7 | import { Row, Col } from 'reactstrap' 8 | 9 | const FinalTextCardHolderNamePropedDefault = props => { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | ) 17 | } 18 | 19 | export { FinalTextCardHolderNamePropedDefault, FINAL_TEXT_CARD_HOLDER_NAME } 20 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalTextCardNumber/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | FinalTextCardNumber, 4 | FINAL_TEXT_CARD_NUMBER, 5 | } from './FinalTextCardNumber' 6 | import { cardNumberValidation } from '1_utils' 7 | import { Col, Row } from 'reactstrap' 8 | 9 | const FinalTextCardNumberPropedDefault = props => { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | ) 17 | } 18 | 19 | export { FinalTextCardNumberPropedDefault, FINAL_TEXT_CARD_NUMBER } 20 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalTextEmail/FinalTextEmail.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { stopUndefined } from '1_utils' 3 | import { Exports } from '5_comp_2' 4 | 5 | const { FinalInputText } = stopUndefined(Exports) 6 | 7 | const FINAL_TEXT_EMAIL = 'email' 8 | 9 | const FinalTextEmail = props => { 10 | return ( 11 | 19 | ) 20 | } 21 | 22 | export { FinalTextEmail, FINAL_TEXT_EMAIL } 23 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalTextName/FinalTextName.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { stopUndefined } from '1_utils' 3 | import { Exports } from '5_comp_2' 4 | 5 | const { FinalInputText } = stopUndefined(Exports) 6 | 7 | const FINAL_TEXT_NAME = 'name' 8 | 9 | const FinalTextName = props => { 10 | return ( 11 | 18 | ) 19 | } 20 | 21 | export { FinalTextName, FINAL_TEXT_NAME } 22 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalTextName/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FinalTextName, FINAL_TEXT_NAME } from './FinalTextName' 3 | 4 | import { signUpUsernameValidation, stopUndefined } from '1_utils' 5 | 6 | // components 7 | import { Exports } from '5_comp_2' 8 | 9 | const { LabelForm } = stopUndefined(Exports) 10 | 11 | const FinalTextNamePropedSignUp = props => { 12 | return 13 | } 14 | 15 | const FinalTextNamePropedGeneraL = props => { 16 | return ( 17 | 18 | 24 | 25 | ) 26 | } 27 | 28 | export { 29 | FinalTextNamePropedSignUp, 30 | FinalTextNamePropedGeneraL, 31 | FINAL_TEXT_NAME, 32 | } 33 | -------------------------------------------------------------------------------- /src/5_comp_3/FinalTextPassword/FinalTextPassword.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { stopUndefined } from '1_utils' 3 | import { Exports } from '5_comp_2' 4 | 5 | const { FinalInputText } = stopUndefined(Exports) 6 | 7 | const FINAL_TEXT_PASSWORD = 'password' 8 | 9 | const FinalTextPassword = props => { 10 | return ( 11 | 18 | ) 19 | } 20 | 21 | export { FinalTextPassword, FINAL_TEXT_PASSWORD } 22 | -------------------------------------------------------------------------------- /src/5_comp_3/TabServices/TabServices.jsx: -------------------------------------------------------------------------------- 1 | import React, { useMemo } from 'react' 2 | import { stopUndefined } from '1_utils' 3 | import { Exports } from '5_comp_2' 4 | 5 | const { 6 | TabPanelService, 7 | Tab, 8 | TAB_NAME, 9 | TAB_CONTENT, 10 | TAB_PRODUCT_DESCRIPTION, 11 | TAB_PRODUCT_NUM_ORDERS, 12 | TAB_PRODUCT_PRICE, 13 | } = stopUndefined(Exports) 14 | 15 | const TabServices = props => { 16 | const { services } = props 17 | const tabs = useMemo( 18 | () => 19 | services.map(services_ => { 20 | const service = Object.keys(services_)[0] 21 | const { 22 | [TAB_PRODUCT_DESCRIPTION]: description, 23 | [TAB_PRODUCT_NUM_ORDERS]: orders, 24 | [TAB_PRODUCT_PRICE]: price, 25 | } = services_[service] 26 | return { 27 | [TAB_NAME]: service, 28 | [TAB_CONTENT]: ( 29 | 35 | ), 36 | } 37 | }), 38 | [services] 39 | ) 40 | 41 | return 42 | } 43 | 44 | export { TabServices } 45 | -------------------------------------------------------------------------------- /src/5_comp_3/TabServices/index.js: -------------------------------------------------------------------------------- 1 | import { TabServices } from './TabServices' 2 | 3 | export { TabServices } 4 | -------------------------------------------------------------------------------- /src/5_comp_3/UploaderAvatar/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | UploaderAvatar, 4 | UPLOADER_AVATAR_STATE_IMAGE, 5 | UPLOADER_AVATAR_ON_REMOVE, 6 | } from './UploaderAvatar' 7 | import { onRemove, onCrop } from './utils' 8 | import { 9 | StateContainer, 10 | storeUser, 11 | storeUserResetAvatar, 12 | STORE_USER_STATE_AVATAR, 13 | } from '2_state' 14 | 15 | const UploaderAvatarPropedCrop = props => { 16 | return 17 | } 18 | const mapStoreUserStateToProps = { 19 | [UPLOADER_AVATAR_STATE_IMAGE]: STORE_USER_STATE_AVATAR, 20 | } 21 | 22 | const mapStoreUserMethodToProps = { 23 | [UPLOADER_AVATAR_ON_REMOVE]: () => { 24 | storeUserResetAvatar() 25 | onRemove() 26 | }, 27 | } 28 | 29 | const UploaderAvatarPropedCropStoreUser = StateContainer( 30 | UploaderAvatarPropedCrop, 31 | [storeUser], 32 | [mapStoreUserStateToProps], 33 | [mapStoreUserMethodToProps] 34 | ) 35 | 36 | export { UploaderAvatarPropedCropStoreUser } 37 | -------------------------------------------------------------------------------- /src/5_comp_4/CheckoutCard/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CheckoutCard } from './CheckoutCard' 3 | import { products } from './utils' 4 | 5 | const CheckoutCardPropedDefault = () => { 6 | return 7 | } 8 | 9 | export { CheckoutCardPropedDefault } 10 | -------------------------------------------------------------------------------- /src/5_comp_4/CheckoutCard/utils.js: -------------------------------------------------------------------------------- 1 | import { 2 | PRODUCT_IMAGE, 3 | PRODUCT_NAME, 4 | PRODUCT_SIZE, 5 | PRODUCT_PRICE, 6 | } from './CheckoutCard' 7 | 8 | const products = [ 9 | { 10 | [PRODUCT_NAME]: 'Shorts', 11 | [PRODUCT_IMAGE]: require('0_assets/img/gucci.png'), 12 | [PRODUCT_SIZE]: 'Small', 13 | [PRODUCT_PRICE]: '$29', 14 | }, 15 | { 16 | [PRODUCT_NAME]: 'Jacket', 17 | [PRODUCT_IMAGE]: require('0_assets/img/jacket.png'), 18 | [PRODUCT_SIZE]: '-', 19 | [PRODUCT_PRICE]: '$999', 20 | }, 21 | ] 22 | 23 | export { products } 24 | -------------------------------------------------------------------------------- /src/5_comp_4/ContainerSearchResults/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { ContainerSearchResults } from './ContainerSearchResults' 3 | import { cardPlayers } from './utils' 4 | 5 | const ContainerSearchResultsPropedDefault = props => { 6 | return 7 | } 8 | 9 | export { ContainerSearchResultsPropedDefault } 10 | -------------------------------------------------------------------------------- /src/5_comp_4/FormCard/index.js: -------------------------------------------------------------------------------- 1 | import { FormCard, FORM_CARD_DEFAULT } from './FormCard' 2 | 3 | export { FormCard, FORM_CARD_DEFAULT } 4 | -------------------------------------------------------------------------------- /src/5_comp_4/FormResetPassword/index.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback } from 'react' 2 | import { FormResetPassword, FINAL_TEXT_EMAIL } from './FormResetPassword' 3 | // api 4 | import { handlePasswordReset } from '3_api' 5 | // route 6 | import { ROUTE_PAGE_SIGN_IN } from '2_routes' 7 | 8 | const FormResetPasswordPropedDefault = props => { 9 | const onSubmit = useCallback( 10 | values => handlePasswordReset(values[FINAL_TEXT_EMAIL]), 11 | [] 12 | ) 13 | return ( 14 | 19 | ) 20 | } 21 | 22 | export { FormResetPasswordPropedDefault } 23 | -------------------------------------------------------------------------------- /src/5_comp_4/FormSignUp/utils.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // state management 3 | import { storeAlertShow, storeUserSetSigningIn } from '2_state' 4 | import { FINAL_TEXT_EMAIL, FINAL_TEXT_NAME } from './FormSignUp' 5 | 6 | const onSuccessfulSignUp = values => { 7 | const { [FINAL_TEXT_EMAIL]: email, [FINAL_TEXT_NAME]: username } = values 8 | const alertBody = ( 9 | 10 | Welcome {username}! An verification email has been sent to  11 | 17 | {` ${email}`} 18 | 19 | 20 | ) 21 | storeUserSetSigningIn(true) 22 | storeAlertShow(alertBody, 'success', 'tim-icons icon-bell-55') 23 | } 24 | 25 | export { onSuccessfulSignUp } 26 | -------------------------------------------------------------------------------- /src/5_comp_4/NavbarIndex/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { NavbarIndex, NAVBAR_COLORED } from './NavbarIndex' 3 | import { StateContainer, storeAlert, STORE_ALERT_STATE_IS_OPEN } from '2_state' 4 | import ReactResizeDetector from 'react-resize-detector' 5 | import { stopUndefined } from '1_utils' 6 | import { storeWrapperSetOffsetTop } from '2_state' 7 | import { Exports } from '5_comp_3' 8 | 9 | const { AlertStoreAlert } = stopUndefined(Exports) 10 | 11 | const mapStoreAlertStateToProp = { 12 | [NAVBAR_COLORED]: STORE_ALERT_STATE_IS_OPEN, 13 | } 14 | 15 | const NavbarIndexStoreAlert = StateContainer( 16 | NavbarIndex, 17 | [storeAlert], 18 | [mapStoreAlertStateToProp], 19 | [] 20 | ) 21 | 22 | const onResize = (width, height) => { 23 | storeWrapperSetOffsetTop(height) 24 | } 25 | const NavbarIndexStoreAlertPropApp = props => { 26 | return ( 27 | 28 | 29 | 30 | 31 | ) 32 | } 33 | 34 | export { NavbarIndexStoreAlertPropApp } 35 | -------------------------------------------------------------------------------- /src/5_comp_4/TabPaneAccountSettings/index.js: -------------------------------------------------------------------------------- 1 | import { TabPaneAccountSettings } from './TabPaneAccountSettings' 2 | 3 | export { TabPaneAccountSettings } 4 | -------------------------------------------------------------------------------- /src/5_comp_4/TabPaneGeneralSettings/index.js: -------------------------------------------------------------------------------- 1 | import { TabPaneGeneralSettings } from './TabPaneGeneralSettings' 2 | 3 | export { TabPaneGeneralSettings } 4 | -------------------------------------------------------------------------------- /src/5_comp_5/TabPanePaymentSettings/index.js: -------------------------------------------------------------------------------- 1 | import { TabPanePaymentSettings } from './TabPanePaymentSettings' 2 | 3 | export { TabPanePaymentSettings } 4 | -------------------------------------------------------------------------------- /src/5_comp_5/index.js: -------------------------------------------------------------------------------- 1 | import { Exports as ExportOrganisms } from '5_comp_4' 2 | import { TabPanePaymentSettings } from './TabPanePaymentSettings' 3 | 4 | export const Exports = { 5 | ...ExportOrganisms, 6 | TabPanePaymentSettings, 7 | } 8 | -------------------------------------------------------------------------------- /src/5_comp_6/PageChat/index.js: -------------------------------------------------------------------------------- 1 | import { PageChat } from './PageChat' 2 | export { PageChat } 3 | -------------------------------------------------------------------------------- /src/5_comp_6/PageCheckout/PageCheckout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { stopUndefined } from '1_utils' 3 | import { Container, Row, Col } from 'reactstrap' 4 | import { Exports } from '5_comp_5' 5 | 6 | const { 7 | CheckoutCardPropedDefault, 8 | Section, 9 | WrapperStoreWrapperPropedCheckout, 10 | } = stopUndefined(Exports) 11 | 12 | const PageCheckout = () => { 13 | return ( 14 | 15 |
16 | 17 | 18 | 19 |

Order summary

20 | 21 | 22 | 23 | 24 |
25 | 26 | ) 27 | } 28 | 29 | export { PageCheckout } 30 | -------------------------------------------------------------------------------- /src/5_comp_6/PageCheckout/index.js: -------------------------------------------------------------------------------- 1 | import { PageCheckout } from './PageCheckout' 2 | export { PageCheckout } 3 | -------------------------------------------------------------------------------- /src/5_comp_6/PageFilter/PageFilter.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { stopUndefined } from '1_utils' 3 | import { Exports } from '5_comp_5' 4 | import { Container } from 'reactstrap' 5 | 6 | const { 7 | ContainerSearchResultsPropedDefault, 8 | Section, 9 | WrapperStoreWrapperPropedIndex, 10 | } = stopUndefined(Exports) 11 | 12 | const PageFilter = () => { 13 | return ( 14 | 15 |
16 | 17 | 18 | 19 |
20 | 21 | ) 22 | } 23 | 24 | export { PageFilter } 25 | -------------------------------------------------------------------------------- /src/5_comp_6/PageFilter/index.js: -------------------------------------------------------------------------------- 1 | import { PageFilter } from './PageFilter' 2 | export { PageFilter } 3 | -------------------------------------------------------------------------------- /src/5_comp_6/PageHelp/PageHelp.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react' 2 | import { stopUndefined } from '1_utils' 3 | import { Exports } from '5_comp_5' 4 | 5 | // reactstrap components 6 | import { Container, Row, Col } from 'reactstrap' 7 | 8 | const { WrapperStoreWrapperPropedIndex } = stopUndefined(Exports) 9 | 10 | const PageHelp = () => { 11 | useEffect(() => { 12 | document.body.classList.add('index-page') 13 | document.documentElement.scrollTop = 0 14 | document.scrollingElement.scrollTop = 0 15 | return () => { 16 | document.body.classList.remove('index-page') 17 | } 18 | }, []) 19 | return ( 20 | 21 | 22 | 23 | 24 |

Help Page

25 | 26 | 27 | 28 | 29 | ) 30 | } 31 | 32 | export { PageHelp } 33 | -------------------------------------------------------------------------------- /src/5_comp_6/PageHelp/index.js: -------------------------------------------------------------------------------- 1 | import { PageHelp } from './PageHelp' 2 | export { PageHelp } 3 | -------------------------------------------------------------------------------- /src/5_comp_6/PageIndex/index.js: -------------------------------------------------------------------------------- 1 | import { PageIndex } from './PageIndex' 2 | export { PageIndex } 3 | -------------------------------------------------------------------------------- /src/5_comp_6/PagePasswordReset.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { stopUndefined } from '1_utils' 3 | import { Container, Row, Col } from 'reactstrap' 4 | import { Exports } from '5_comp_5' 5 | 6 | const { 7 | FormResetPasswordPropedDefault, 8 | Section, 9 | WrapperStoreWrapperPropedReset, 10 | } = stopUndefined(Exports) 11 | 12 | const PagePasswordReset = () => { 13 | return ( 14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
32 | 33 | ) 34 | } 35 | 36 | export { PagePasswordReset } 37 | -------------------------------------------------------------------------------- /src/5_comp_6/PagePolicies/index.js: -------------------------------------------------------------------------------- 1 | import { PagePolicies } from './PagePolicies' 2 | 3 | export { PagePolicies } 4 | -------------------------------------------------------------------------------- /src/5_comp_6/PageProfile/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { PageProfile, PAGE_PROFILE_STATE_CURRENT_USER_UID } from './PageProfile' 3 | import { StateContainer, storeUser, STORE_USER_STATE_UID } from '2_state' 4 | import { useData, comments } from './utils' 5 | 6 | const PageProfilePropedData = props => ( 7 | 8 | ) 9 | const PageProfileStoreUser = StateContainer(PageProfilePropedData, storeUser, { 10 | [PAGE_PROFILE_STATE_CURRENT_USER_UID]: STORE_USER_STATE_UID, 11 | }) 12 | export { PageProfileStoreUser } 13 | -------------------------------------------------------------------------------- /src/5_comp_6/PageProfile/styled.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import styled from 'styled-components/macro' 3 | import React from 'react' 4 | import clsx from 'clsx' 5 | import { stopUndefined } from '1_utils' 6 | import { Exports } from '5_comp_5' 7 | const { Col } = stopUndefined(Exports) 8 | 9 | const ColStyledSection = props => { 10 | const { className, ...otherProps } = props 11 | return ( 12 | 13 | ) 14 | } 15 | 16 | const ColStyledGiftCard = props => { 17 | const { className, ...otherProps } = props 18 | return ( 19 | 23 | ) 24 | } 25 | 26 | const ColStyledTitle = props => { 27 | const { className, ...otherProps } = props 28 | return 29 | } 30 | 31 | export { ColStyledSection, ColStyledGiftCard, ColStyledTitle } 32 | -------------------------------------------------------------------------------- /src/5_comp_6/PageSignIn.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { stopUndefined } from '1_utils' 3 | import { Container, Row, Col } from 'reactstrap' 4 | import { Exports } from '5_comp_5' 5 | 6 | const { 7 | FormSignInPropedSignIn, 8 | Section, 9 | WrapperStoreWrapperPropedLogin, 10 | } = stopUndefined(Exports) 11 | 12 | const SignInPage = () => { 13 | return ( 14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
32 | 33 | ) 34 | } 35 | 36 | export { SignInPage } 37 | -------------------------------------------------------------------------------- /src/sw-build.js: -------------------------------------------------------------------------------- 1 | const workboxBuild = require('workbox-build') 2 | // NOTE: This should be run *AFTER* all your assets are built 3 | const buildSW = () => { 4 | // This will return a Promise 5 | return workboxBuild 6 | .injectManifest({ 7 | swSrc: 'src/sw-template.js', // this is your sw template file 8 | swDest: 'build/sw.js', // this will be created in the build step 9 | globDirectory: 'build', 10 | globPatterns: ['**/*.{js,css,html}'], 11 | maximumFileSizeToCacheInBytes: 4 * 1024 * 1024, 12 | }) 13 | .then(({ count, size, warnings }) => { 14 | // Optionally, log any warnings and details. 15 | warnings.forEach(console.warn) 16 | console.log(`${count} files will be precached, totaling ${size} bytes.`) 17 | }) 18 | } 19 | buildSW() 20 | -------------------------------------------------------------------------------- /src/sw-template.js: -------------------------------------------------------------------------------- 1 | if ('function' === typeof importScripts) { 2 | // eslint-disable-next-line no-undef 3 | importScripts( 4 | 'https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js' 5 | ) 6 | /* global workbox */ 7 | if (workbox) { 8 | console.log('Workbox is loaded') 9 | 10 | /* injection point for manifest files. */ 11 | workbox.precaching.precacheAndRoute([]) 12 | 13 | /* custom cache rules*/ 14 | workbox.routing.registerNavigationRoute('/index.html', { 15 | // eslint-disable-next-line no-useless-escape 16 | blacklist: [/^\/_/, /\/[^\/]+\.[^\/]+$/], 17 | }) 18 | 19 | workbox.routing.registerRoute( 20 | /\.(?:png|gif|jpg|jpeg)$/, 21 | workbox.strategies.cacheFirst({ 22 | cacheName: 'images', 23 | plugins: [ 24 | new workbox.expiration.Plugin({ 25 | maxEntries: 60, 26 | maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days 27 | }), 28 | ], 29 | }) 30 | ) 31 | } else { 32 | console.log('Workbox could not be loaded. No Offline support') 33 | } 34 | } 35 | --------------------------------------------------------------------------------