I using Storybook 6.4 (with angular framework)
I m trying to hide a property from auto generated doc (the args table of Storybook)
How to do that for the following story
export default {
component: MyComponent,
decorators: [moduleMetadata({ imports: [AModuleModule] })],
parameters: {
controls: { hideNoControlsWarning: true },
},
} as Meta;
type MyStory = MyComponent;
export const Default: StoryObj<MyStory> = {};
It is possible to control the auto generated output via the argTypes of Meta definition
export default {
component: MyComponent,
decorators: [moduleMetadata({ imports: [AModuleModule] })],
parameters: {
controls: { hideNoControlsWarning: true },
},
argTypes: {
aPropName: { table: { disable: true } },
anInputName: { control: { disable: true } },
}
} as Meta<MyComponent>; // Hint: type your meta object to have some code completion from your IDE for argTypes
type MyStory = MyComponent;
export const Default: StoryObj<MyStory> = {};
Et voilà :)
Related
I am trying to add a multi-select control using argTypes in storybook for a button component which takes propTypes in below format :
type ButtonProps = {
params: { FirstParam: string; SecondParam: string };
fields: Fields;
};
And the below is the code where I am trying to specify the control type for firstParam :
export default {
title: 'components/Button',
component: Default,
argTypes: {
params: {
FirstParam: {
name: 'FirstParam',
description: 'grid styling',
control: { type: 'multi-select', disable: false },
options: ['b', 'c', 'd'],
defaultValue: 'b c d',
},
SecondParam: {
name: 'SecondParam',
description: 'button styling',
control: 'multi-select',
options: ['none', 'secondary-button'],
},
},
},
decorators: [(story) => <div className="grid grid-cols-12">{story()}</div>],
} as ComponentMeta<typeof Default>;
const Template: ComponentStory<typeof Default> = (args) => <Default {...args} />;
export const Primary = Template.bind({});
Primary.args = {
fields: {
Link: {
value: {
href: 'https://www.google.com/',
target: '_blank',
text: 'Find Installer',
},
},
},
};
But it doesn't bind the control and breaks the storybook component.
Is it possible to have controls like multi-select working for the above kind of buttonProps?
i want to run a method when emitting how can i get it?
When handleShow(depth is clicked), I want to run collapsed in the medhod in the setup.
or
I want to trigger the function I will write in setup
<MenuLink
:link="items"
:key="items.title"
#click.stop="handleShow(depth)"
/>
<script>
import {ref} from "vue"
import MenuLink from "./MenuLink";
export default {
name: 'MenuItems',
components: {MenuLink},
props: {
items: {type: Object, required: true},
depth: {Number},
selected: {Number},
},
data() {
return {
opensCollapsed: false
};
},
methods: {
collapsed(dep) {
console.log(dep)
}
},
setup(props, {emit}) {
const showDropdown = ref(false);
const handleShow = (depth) => {
emit('clicked', depth)
}
return {
showDropdown,
handleShow,
}
},
};
</script>
emit should only be used if you want to get an event out of your component to its parent (for example, if your component is a custom button and you want its parent to specify what would happen when clicking on it). Otherwise, you can write the code you want inside of handleShow instead of calling emit. You can also change the function name to whatever you want, just make sure it's the same inside the setup method and in the #click.stop property.
In your case (since you just console.log the result):
<MenuLink
:link="items"
:key="items.title"
#click.stop="handleShow(depth)"
/>
<script>
import {ref} from "vue"
import MenuLink from "./MenuLink";
export default {
name: 'MenuItems',
components: {MenuLink},
props: {
items: {type: Object, required: true},
depth: {Number},
selected: {Number},
},
data() {
return {
opensCollapsed: false
};
},
setup(props, {emit}) {
const showDropdown = ref(false);
const handleShow = (depth) => {
console.log(depth)
// do whatever you want here
}
return {
showDropdown,
handleShow,
}
},
};
</script>
I'm making props with vue, but v-if doesn't work, and I'm wondering if the functions I've done are written correctly.
I want the data from props to work synchronously. What are my mistakes made?
What functions does vue props check at startup?
<my-alert type="warning" appearance="outline" showIcon="false">Hello</my-alert>
myAlert.vue
<template>
<div class="block" :class="[typeClass,appearanceClass]">
<div class="alert-icon" v-if="myIcon">
<i>ICON</i>
</div>
</div>
</template>
<script>
const types =
['primary','accent','warn','basic','info','success','warning','error',
];
const appearances =
['border','accent','fill','outline','soft'];
import {defineComponent} from "vue";
import {computed} from "vue";
export default {
props: {
type: {
type: String,
default: 'primary',
required: true,
validator: value => {
return ['primary', 'accent', 'warn', 'basic', 'info', 'success', 'warning', 'error'].includes(value)
}
},
appearance: {
type: String,
default: 'border',
required: true,
validator: value => {
return ['border', 'accent', 'fill', 'outline', 'soft'].includes(value)
}
},
showIcon: {
default: false
}
},
computed: {
typeClass() {
return 'alert-type-' + this.type
},
appearanceClass() {
return 'alert-appearance-' + this.appearance
},
myIcon() {
return this.showIcon;
}
}
}
</script>
From your code what I can see, that you are passing the props shwoIcon like this showIcon="false", which is static passing and eventually pass false value as a string "false" not as Boolean value. So use props like this :shwoIcon="false" I mean use colon before showIcon which make the props dynamic. link
And Also in your my-alert component for showIcon props declear type for the better practice
showIcon: {
type: Boolean,
default: false,
},
Another way is, just simply change your computed property myIcon() to check the string props value, like this below,
myIcon() {
return this.showIcon === "true";
}
When we load a storybook addon we can pass some options:
// .storybook/main.js
module.exports = {
addons: [
'a-storybook-addon-without-options',
{
name: 'a-storybook-addon-with-options',
options: {
mainColor: 'hotpink',
},
},
],
};
To write my addon I use the addon API:
// /a-storybook-addon-with-options/src/register.js
import React from 'react';
import { addons, types } from '#storybook/addons';
import MyComponent from './myComponent.js';
const ADDON_ID = 'myaddon';
const PANEL_ID = `${ADDON_ID}/panel`;
addons.register(ADDON_ID, (api) => {
addons.add(PANEL_ID, {
type: types.PANEL,
title: 'My Addon',
render: MyComponent,
});
});
I don't know how to get the developer options from the addon code. Is there an official way? I didn't get a clear help from the documentation.
I think here you should use a parameter instead of this option in the config.
This kind of config (the options field) is more for presets that alter webpack or babel config.
If you add a parameter in the preview with the key that you specify in the register file then you can easily access that parameter in the addon code.
in preview.js
export const parameters = {
myAddon: {
mainColor: 'red'
},
};
in the addon code
import { useParameter } from '#storybook/api';
const PARAM_KEY = 'myAddon';
const MyPanel = () => {
const value = useParameter(PARAM_KEY, null);
const mainColor = value ? value.mainColor : 'No mainColor defined';
return <div>{mainColor}</div>;
};
You could set some default by setting a value when they don't set any value on the parameter like:
const mainColor = value ? value.mainColor : 'red';
I need to change the language of my calendar in the angular version 7. I have not found much documentation about this. The main thing is to change the language of the days that appear on the calendar.
!-- begin snippet: js hide: false console: true babel: false -->
import { Component, OnInit, ViewChild } from '#angular/core';
import { CalendarComponent } from 'ng-fullcalendar';
import { Options } from 'fullcalendar';
#Component({
selector: 'app-calendario',
templateUrl: './calendario.component.html',
styleUrls: ['./calendario.component.css']
})
export class CalendarioComponent implements OnInit {
//calendario
calendarOptions: Options;
displayEvent: any;
#ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
constructor() { }
ngOnInit() {
this.calendarOptions = {
editable: true,
eventLimit: false,
header: {
left: '',
center: 'title',
right: 'month'
},
events: []
};
}
}
I try to add the property locale = 'es' in the calendarOptions, but it does not work,
add this to my angular json, but I do not know how to implement it
"scripts": [
"node_modules/fullcalendar/dist/locale/es.js"
]
Thanks Gabriel I make it work with this approach
First make sure you have the import of your desire lenguage
import esLocale from '#fullcalendar/core/locales/es';
import frLocale from '#fullcalendar/core/locales/fr';
In your html file, in the full-calendar selector, you should assign values to locales and locale options.
<full-calendar
defaultView="dayGridMonth"
[locales]="locales"
locale="es"
[weekends]="false"
[plugins]="calendarPlugins"></full-calendar>
Then a variable that holds all the languages that you need
locales = [esLocale, frLocale];
You can do that using the FullCalendarComponent, setting the locale code.
#ViewChild('calendar') calendarComponent: FullCalendarComponent;
and in the ngOnInit, like that:
this.calendarComponent.locales = [ { code: 'pt-br' } ];
I hope that works for you.
I suggest a simple solution "in this case, I want to change the language to French"
in your name.component.ts
import frLocale from '#fullcalendar/core/locales/fr';
calendarOptions: CalendarOptions = {
locale: frLocale, //according to the import package
events: [
{ title: 'event 1', date: '2020-04-01' },
{ title: 'event 2', date: '2020-07-15' }
]
};
in your name.component.html
<full-calendar [options]="calendarOptions"
id='fullcalendar'>
You can do that you can use getApi() on FullCalendarComponent
First Import corresponding languages in your component
import frLocale from '#fullcalendar/core/locales/fr';
import nlLocale from '#fullcalendar/core/locales/nl';
#ViewChild(FullCalendarComponent, {static: false})
calendarComponent: FullCalendarComponent;
ngAfterViewInit(): void {
this.calendarComponent.getApi().setOption('locale', nlLocale);
}
For me it worked when starting the locale inside the Full Calendar Component
#ViewChild('calendar') calendarComponent: FullCalendarComponent;
ngOnInit(): void {
this.initCalendar();
}
private initCalendar(): void {
this.calendarOptions = {
themeSystem: 'bootstrap',
bootstrapFontAwesome: false,
buttonText: {....},
dayMaxEventRows: 1,
initialView: 'dayGridMonth',
handleWindowResize: true,
headerToolbar: {.... },
events: [...],
editable: true,
selectable: true,
eventClick: this.handleEventClick.bind(this),
locales: [ { code: 'ar' }] // <==== HERE =====
}
}