I want to create stories using both Typescript and MDX, therefore I have in my main.js:
module.exports = {
stories: ['../src/**/*.stories.(mdx|ts)'],
addons: ['#storybook/addon-docs', 'storybook-addon-preview']
};
However I don't want to have "Docs" tab next to "Canvas". How do I remove it? Without '#storybook/addon-docs' MDX story is not displayed.
Put this in preview.js:
export const parameters = {
previewTabs: {
'storybook/docs/panel': {
hidden: true
}
}
};
Used in Storybook version 6.0.x
I am currently using #storybook/angular#6.0.21 and the previous answer unfortunately did not work for me. I was able to find a solution in the storybook DocsPage documentation.
The relevant section:
You can replace DocsPage at any level by overriding the docs.page parameter:
- With null to remove docs
- With MDX docs
- With a custom React component
I was able to completely remove the DocsPage for a single story like this:
export const myStory = () => ({
moduleMetadata: MODULE_METADATA,
component: MyComponent,
});
myStory.parameters = {
docs: { page: null },
};
Related
I have a Form component in Vue where I import the vue-recaptcha like this:
<template>
... Contains the form and button that triggers onSubmit function
</template>
<script>
import { VueReCaptcha } from 'vue-recaptcha-v3';
Vue.use(VueReCaptcha, {
siteKey: "hard-coded site-key here",
loaderOptions: {
useRecaptchaNet: true,
},
});
export default {
methods: {
async onSubmit(e) {
// Uses the recapatcha and handles errors/success etc.
},
},
};
...
This works since the value for site-key is hard-coded.
However, I wish to be able to pass the site-key as a prop to the Form component and then use this as the site-key.
I tried something as bold as simply creating a prop in the Form component and passing it in as the site-key when setting the vue-recaptcha options, like this:
<script>
import { VueReCaptcha } from 'vue-recaptcha-v3';
Vue.use(VueReCaptcha, {
siteKey: this.siteKey,
loaderOptions: {
useRecaptchaNet: true,
},
});
export default {
props: {
siteKey: String,
},
...
</script>
This does not work because this.siteKey is undefined, as expected. However, is there a way to set the site-key value as the prop siteKey? Maybe there is a way to set the vue-recaptcha plugin options inside the component where this.siteKey isn't undefined, for example in mounted()?
Have you tried to provide the Key to the Form over prop?
<my-form siteKey="<My Site Key>" ...
or
<my-form site-key="<My Site Key>" ...
Pay attention:
You should be careful with components and prop's naming & using, since there are DOM
Template Parsing Caveats
I'm having an issue with storybook. It seems that when I try to pass props from the component to my stories.js it doesn't find my global variable. Everything seems to work correctly, except for the props not showing, sending an error that my prop is undefined.
This is my Component.stories.js code
import Component from './Component';
export default {
title: "Component",
component: Component,
}
// prop1 and prop2 are gathered globally from a .json-file in my project
// prop1 and prop2 are lists
const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Component },
template: '<Component :prop1="prop1" :prop2="prop2" />',
});
// Here I want to chose which props I want to show to be able to see it in storybook
export const allProps = Template.bind({});
allProps.args = {
prop1: ['prop1'],
prop2: ['prop2']
}
Is this even possible or how can I reach a global variable in stories? If there is a possible way to do this I'd love to hear it. I have googled for two days and didn't find anything that worked.
I did try to import the global variable inside my peview.js file but that didn't seem to help either.
I've tried changing globalTypes, argTypes, preview.js. And googled for 2 days. I want storybook to show all fields in my Component. Feel free to ask any questions.
I'm trying to use tailwindCSS on angular 12, and it's works fine.
My question is about using flowbite or tailwindui for UI component - is it support on angular too?
because i'm trying to flow the instructions of flowbite and it's not working
https://flowbite.com/docs/getting-started/quickstart/
the css work's fine but not the script.
For example I try to build a dropdowns like this - and it's not working (i'm not getting any error on console)
https://flowbite.com/docs/components/dropdowns/#
What is wrong ?
Having the same issue, tried:
Using scripts:["../path/to/#themesberg/flowbite/dist/flowbite.bundle.js"] in angular.json
Adding <script src="../path/to/#themesberg/flowbite/dist/flowbite.bundle.js"></script> on the head of index.hmtl
Update:
Adding import '#themesberg/flowbite'; on either the main.ts or polyfills.ts correctly exports the functions to the vendor.js or polyfills.js respectfully. But even though they are present, the event listeners are not working:
() => {
const toggleCollapse = (elementId, show = true) => {
const collapseEl = document.getElementById(elementId);
if (show) {
collapseEl.classList.remove('hidden');
} else {
collapseEl.classList.add('hidden');
}
}; // Toggle target elements using [data-collapse-toggle]
document.querySelectorAll('[data-collapse-toggle]').forEach(function (collapseToggleEl) {
var collapseId = collapseToggleEl.getAttribute('data-collapse-toggle');
collapseToggleEl.addEventListener('click', function () {
toggleCollapse(collapseId, document.getElementById(collapseId).classList.contains('hidden'));
});
});
window.toggleCollapse = toggleCollapse;
/***/
},
I'm using Storybook v5.2.6 and am trying to change the size of the grid lines shown in my stories.
After adding #storybook/addon-backgrounds a toggle grid button appears in my Storybook toolbar. Clicking the button plots a 20px grid:
I want to globally change the grid size to be 8px and I have tried the following:
import { configure, addParameters } from '#storybook/react';
import { create } from '#storybook/theming/create';
const storyBookTheme = create({
gridCellSize: 8,
grid: { cellSize: 8 }, // alternative approach
brandTitle: 'Hello, World!',
});
addParameters({
options: {
theme: storyBookTheme,
},
...
});
configure(require.context('../stories', true, /\.stories\.js$/), module);
I haven't been able to find any documentation on how to use this parameter globally, but it seems to be the correct approach because:
In the Storybook 'Kitchen Sink' repo, the gridCellSize parameter is set like this, along with other theme variables.
In PR #6252 the author makes a change to "Pick up gridCellSize from Theme configuration options"
So I thought my above attempt would work, however a 20px grid is still plotted.
In the release notes for Storybook 5.2.0-alpha.43 they mention the breaking change:
"Move grid toolbar feature to background-addon".
However, there are no migration instructions
So, the question is, how do I set the grid cell size?
Update
I've upgraded to Storybook 5.3.0-beta.19 and can now set the grid size on a story-by-story basis, but I'm still unable to set this globally.
Button.story = {
parameters: {
grid: { cellSize: 8 },
},
};
After trying various permutations, I've stumbled upon the correct configuration.
This works with Storybook 5.3.0-beta.19. I'm not sure about earlier versions.
Rather than setting the gridCellSize parameter in the theme, you need to add grid: { cellSize: 8 } to the configuration parameters. In your config.js file, do the following:
import { configure, addParameters } from '#storybook/react';
import { create } from '#storybook/theming/create';
const storyBookTheme = create({
brandTitle: 'Hello, World!',
});
addParameters({
grid: { cellSize: 8 }
options: {
theme: storyBookTheme,
},
...
});
configure(require.context('../stories', true, /\.stories\.js$/), module);
I need access to my hostname variable in every component.
Is it a good idea to put it inside data?
Am I right in understanding that if I do so, I will able to call it everywhere with this.hostname?
As you need access to your hostname variable in every component, and to change it to localhost while in development mode, or to production hostname when in production mode, you can define this variable in the prototype.
Like this:
Vue.prototype.$hostname = 'http://localhost:3000'
And $hostname will be available in all Vue instances:
new Vue({
beforeCreate: function () {
console.log(this.$hostname)
}
})
In my case, to automatically change from development to production, I've defined the $hostname prototype according to a Vue production tip variable in the file where I instantiated the Vue.
Like this:
Vue.config.productionTip = false
Vue.prototype.$hostname = (Vue.config.productionTip) ? 'https://hostname' : 'http://localhost:3000'
An example can be found in the docs:
Documentation on Adding Instance Properties
More about production tip config can be found here:
Vue documentation for production tip
a vue3 replacement of this answer:
// Vue3
const app = Vue.createApp({})
app.config.globalProperties.$hostname = 'http://localhost:3000'
app.component('a-child-component', {
mounted() {
console.log(this.$hostname) // 'http://localhost:3000'
}
})
Warning: The following answer is using Vue 1.x. The twoWay data mutation is removed from Vue 2.x (fortunately!).
In case of "global" variables—that are attached to the global object, which is the window object in web browsers—the most reliable way to declare the variable is to set it on the global object explicitly:
window.hostname = 'foo';
However form Vue's hierarchy perspective (the root view Model and nested components) the data can be passed downwards (and can be mutated upwards if twoWay binding is specified).
For instance if the root viewModel has a hostname data, the value can be bound to a nested component with v-bind directive as v-bind:hostname="hostname" or in short :hostname="hostname".
And within the component the bound value can be accessed through component's props property.
Eventually the data will be proxied to this.hostname and can be used inside the current Vue instance if needed.
var theGrandChild = Vue.extend({
template: '<h3>The nested component has also a "{{foo}}" and a "{{bar}}"</h3>',
props: ['foo', 'bar']
});
var theChild = Vue.extend({
template: '<h2>My awesome component has a "{{foo}}"</h2> \
<the-grandchild :foo="foo" :bar="bar"></the-grandchild>',
props: ['foo'],
data: function() {
return {
bar: 'bar'
};
},
components: {
'the-grandchild': theGrandChild
}
});
// the root view model
new Vue({
el: 'body',
data: {
foo: 'foo'
},
components: {
'the-child': theChild
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<h1>The root view model has a "{{foo}}"</h1>
<the-child :foo="foo"></the-child>
In cases that we need to mutate the parent's data upwards, we can add a .sync modifier to our binding declaration like :foo.sync="foo" and specify that the given 'props' is supposed to be a twoWay bound data.
Hence by mutating the data in a component, the parent's data would be changed respectively.
For instance:
var theGrandChild = Vue.extend({
template: '<h3>The nested component has also a "{{foo}}" and a "{{bar}}"</h3> \
<input v-model="foo" type="text">',
props: {
'foo': {
twoWay: true
},
'bar': {}
}
});
var theChild = Vue.extend({
template: '<h2>My awesome component has a "{{foo}}"</h2> \
<the-grandchild :foo.sync="foo" :bar="bar"></the-grandchild>',
props: {
'foo': {
twoWay: true
}
},
data: function() {
return { bar: 'bar' };
},
components: {
'the-grandchild': theGrandChild
}
});
// the root view model
new Vue({
el: 'body',
data: {
foo: 'foo'
},
components: {
'the-child': theChild
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<h1>The root view model has a "{{foo}}"</h1>
<the-child :foo.sync="foo"></the-child>
I strongly recommend taking a look at Vuex, it is made for globally accessible data in Vue.
If you only need a few base variables that will never be modified, I would use ES6 imports:
// config.js
export default {
hostname: 'myhostname'
}
// .vue file
import config from 'config.js'
console.log(config.hostname)
You could also import a json file in the same way, which can be edited by people without code knowledge or imported into SASS.
For any Single File Component users, here is how I set up global variable(s)
Assuming you are using Vue-Cli's webpack template
Declare your variable(s) in somewhere variable.js
const shallWeUseVuex = false;
Export it in variable.js
module.exports = { shallWeUseVuex : shallWeUseVuex };
Require and assign it in your vue file
export default {
data() {
return {
shallWeUseVuex: require('../../variable.js')
};
}
}
Ref: https://v2.vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch
In vue cli-3 You can define the variable in main.js like
window.basurl="http://localhost:8000/";
And you can also access this variable in any component by using
the the
window.basurl
A possibility is to declare the variable at the index.html because it is really global. It can be done adding a javascript method to return the value of the variable, and it will be READ ONLY.
An example of this solution can be found at this answer:
https://stackoverflow.com/a/62485644/1178478