Am new to storybook and the docs make it pretty clear on the idiomatic way to write stories in Angular. Here's an example of one for my app:

import { Meta, Story } from '@storybook/angular';

import {CustomerListComponent} from "@app/modules/customer/customer-search/components/customer-list/customer-list.component";

export default {
  title: 'Customer List',
  component: CustomerListComponent,
} as Meta;


const Template: Story = (args) => ({
  props: args,
});

export const EmptyArgs = Template.bind({});
EmptyArgs.args = {};

This fails with the following error:

Indeed, if we look at the constructor for the CustomerListComponent there is a dependency on CustomerSearchComponent.

@Component({
  selector: 'customer-list',
  templateUrl: './customer-list.component.html',
  styleUrls: ['./customer-list.component.scss']
})
export class CustomerListComponent {
  constructor (
    private customerSearchComponent: CustomerSearchComponent,
  ) {
  }
...

So what is typically done in this case? Can I just tell storybook to load that component, and any dependencies it has and so forth? Do I need to pass a mock of CustomerSearchComponent somehow? Am having trouble finding clean examples of cases like this, storybook docs seem to assume components with no depenencies on other components.

This also has me thinking - should I not plan to use storybook to render larger views (ie. parents with several child components)? Is that going to be hard to configure.

PS: random question - is storiesOf syntax deprecated? It's not in official docs but tutorials all over the web.