Ensure every component has a storybook story - vue.js

We are developing a new application, and as part of this, we want to enforce some new standards in our CI pipeline etc.
One of these standards is that new components cannot be created without corresponding Storybook stories, ensuring everything is listed in the storybook.
is there a linter or process we can run that will check every component that is covered has what is needed?

Related

Setting values whitout UI interaction. Cypress app actions

Guys! I'm kinda new in cypress and was looking in this link (https://www.cypress.io/blog/2019/01/03/stop-using-page-objects-and-start-using-app-actions/ )to see the diff between page objects and app actions. Since app actions are brand new, i was not able to find any documentation to help me out. In the link above, there was an example of how to predefine values ​​on the page so no UI interaction is required. I was able to follow the steps and realize the changes here, but i don't know how to do that outside this example.
How could i manipulate cypress application to do that?
Skimming the article, the idea of application actions is to export an API/hooks from your application that your test can use to interact with the app (its model, state etc.), for the purpose of speeding up certain workflows (such as seeding the model), awaiting certain events etc.
There's nothing magical about it, but it requires knowing your app architecture — what you need to export (i.e. expose on the window object), and how to interact with it. If you're not the developer of the app (e.g. you work in a separate QA department), and treat the app as a black box, then you'll need to discuss with the dev team how best to implement this.
Each app is different, and depending on the app architecture (What framework does it use? How does it store state/model? etc.), each solution will be different.

Launching a new Shopify theme and the best approach

I am seeking guidance on the best way to introduce a new theme onto an already complex e-commerce Shopify website.
I am new to the Shopify go-live process, this is the first time I am going to launch a new theme that I have built. I understand the building process and could do with some clarification on the go-live steps.
The job:
A complex e-commerce company has had us build a new design and way of navigating through to product pages. Introducing new collections and tags. There are also new pages and will be a dramatic change to URLs from an SEO point of view.
The store will remain in the same place, on their server, the same domain name, in their control.
I need to be able to provide them with an importable version of our development store, with guidance on how to push this live without breaking and allowing us to test the site on the live-server before opening it up to the users.
The implementation:
I have created the store, the pages, the collections, the tags, all the bells and whistles.
I have uploaded their latest database of products onto the development store and set these up into the collections and store filters.
The question:
How do I put this live onto the old store with the least down-time & having the ability to test the newly created store before customers can see it?
The break-down of the question:
What files need packaging? What is the easiest way to package up these files for the client company? What is the best way to install the packaged files? What is the best way to test the website?
One last concern:
Is it possible to keep the existing stores orders and customer user profiles?
You can preview the theme and populate data from each Section (if theme you make is a sectioned-theme). You can compiled the theme from you development and upload to their store, you don't have to send it live.

split monolithic frontend in independent project and compose them in a single page

We have a monolithic spa composed by 3 distinct "apps". Layout is divided in two parts
header: navbar containing links to apps + user information
main container: where selected app is rendered.
Everything was developed in a single repository even if every app is completely indipendent from other.
Now, we are rewriting frontend in vuejs + vuetify and need to split this monolith into indipendent projects we don't know what is the best solution to share the navbar between every app.
This are some solutions we googled:
use iframes -> usually iframes are not recomended
use ssi -> there are lack of resource and seems too complicated to set up and manage
deploy single apps as "web components"(vue-cli build -wc) -> web components created by vue-cli rely on a global VUE object and not sure this can work properly + performance could suffer
Are there some KISS patterns for our problem?
Projects like mosaic9, single-spa or similar are too much for our use case.
Thank you.

Target Membership in React Native

I am involved to a project which is targeting multiple clients. We have to handle different client needs and so it can happen that a client wants to fully change a page in the application or they would like a different logic behind the screen. And of course we don't want to include one client's specific code to another code base, so separate our code with a kind of global variables is not an option.
On iOS it was really straightforward that we had to add a new target and select files to the target membership.
How we should handle it within a React Native project?
I found many articles about react-native-config, but it is just about the global variables, URLs and so on.

Partially hydrate a SSR VUE app

We are building a website that—to our all sorrow—has a lot of advertisements. Now we wanna use VUE to build the website, do server side rendering and hydrate the website in the client.
The problem is that the advertisements can basically do anything. Ie. change the background image, inject stuff in the dom, etc. pp.
So the the strategy we want to implement is to render the site in the server and only hydrate specific parts of the website, i.e. specific components with VUE, leaving the rest to the site to the advertisements.
Is that possible with VUE?
edit to clarify: The problem ist that if we hydrate the entire site VUE will clash with things the ads have changed in the site. That is why we want to hydrate specific components in the site only.
Late answer but perhaps the Vue Quench library offers some functionality you're looking for. This presentation from the creator details how their team runs a sports website composed of 4 smaller hydrated Vue components based on static HTML markup.
A strategy such as this allows a coexistence of both a Vue app (or multiple Vue instances) alongside the advertisement content you're required to embed.