StorYBook

how to switch locale with storybook in vue js project via the @storybook/addon-contexts

由 帅比萌擦擦* 提交于 2021-02-10 15:00:55
问题 I m looking for a sample to be able to switch locale from vue-i18n inside storybook. I have find this addon-context story on the official storybook github but i have some difficulties to make works. I m using storybook v5.3, vue.js v2.6 and vue-i18n v8.15.4. For the moment, i have the globe icon with 2 entries (english and french). But when i switch it has no effect on the vue-i18n locale. // .storybook/main.js module.exports = { stories: ["../../src/**/*.stories.(js|jsx|ts|tsx|mdx)"], addons

Hide Docs tab in Storybook

由 旧时模样 提交于 2021-02-08 08:23:21
问题 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. 回答1: Put this in preview.js : export const parameters = { previewTabs: { 'storybook/docs/panel': { hidden: true } } }; Used in Storybook version

Testing Angular with @angular-redux/store in Storybook

由 雨燕双飞 提交于 2021-01-29 08:14:06
问题 I wrote this up on @angular-redux/store and was wondering if a solution already existed. https://github.com/angular-redux/store/issues/551 Here's a recap to save you from reading the link: Using Angular and Storybook has worked out well so far. However, I have cases where my component is dependent upon @select(). How can I tell the component in my story to use a mocked observable or data point? Here's my sample code: import { storiesOf, moduleMetadata } from '@storybook/angular'; import {

React native web issue with react native vector icons in storybook

由 限于喜欢 提交于 2021-01-29 07:28:45
问题 I created a project using react native web and I got react native icons working for web and mobile except on storybook. I'm not sure how to tell storybooks webpack config to load FontAwesome fonts. I tried adding FontAwesome in the preview-head.html but Still not showing the icons just a rectangle as a placeholder. What I would like is to have my icons showing up in the storybook webpack server. .storybook/main.js: const webpack = require('webpack'); const path = require('path'); const

Resolve Absolute / Alias Imports in Components with Storybook

由 风流意气都作罢 提交于 2021-01-23 06:03:12
问题 I'm using gatsby-plugin-alias-imports to be able to do absolute imports like so: import { colors } from "@styles/theme"; This is set up in the gatsby-config . Now I've just added storybook to my project. Since storybook doesn't run through gatsby, the alias imports won't resolve and I get an error: ERROR in ./src/components/Button/index.js Module not found: Error: Can't resolve '@styles/theme' in ... This makes sense. Storybook doesn't know what to do with @styles... - but how can I fix this?

8月份Github上最热门的开源项目

由 风格不统一 提交于 2021-01-17 03:41:29
开源最前线（ID：OpenSourceTop） 猿妹整编 转载请注明来源作者 8月份GitHub上最热门的 开源项目排行已经出炉啦， 一起来看看上榜详情吧： 1 fastbook https://github.com/fastai/fastbook Star 8732 fast.ai的创始人、前Kaggle首席科学家Jeremy Howard教授在Github上开源的一本书籍，全书草稿已公布22章，通过这份它你将学到： 如何在计算机视觉、自然语言处理(NLP)、推荐系统、表格和时间序列数据分析中创建最先进的模型 如何使用全新的fastai v2库和PyTorch 深度学习的基础：什么是神经网络，它们是如何训练的，以及它们如何进行预测 为什么以及如何使用深度学习模型，以及如何使用这些知识来提高模型的准确性、速度和可靠性 如何将你的模型转换为实际的Web应用程序，以及在模型出错时如何调试模型。 最新的深度学习技术，尝试真正有意义的实践 如何阅读深度学习研究论文 如何实现深度学习算法从无到有 2 TDengine https://github.com/taosdata/TDengine Star 13038 TDengine是一个开源的专为物联网、车联网、工业互联网、IT运维等设计和优化的大数据平台。除核心的快10倍以上的时序数据库功能外，还提供缓存、数据订阅、流式计算等功能

Module parse failed: Unexpected character '@' (1:0) with Storybook 6.1.11, Webpack 5.11.0, React 17.0.1

由 丶灬走出姿态 提交于 2021-01-06 03:40:58
问题 Trying to setup a react-app with all latest versions. Github Repo Link Trying to run storybook with sass file imported will result in below error. Trying to run without importing the styles, storybook works. The same code works correctly when its run as npm start run with no warnings and errors. I have configured css modules using @dr.pogodin/babel-plugin-react-css-modules with sass, webpack 5, react 17 and with latest packages. ERROR in ./src/assets/stylesheets/app.scss 1:0 Module parse

How to configure VueJS + PostCss + Tailwind with Storybook

由 ╄→尐↘猪︶ㄣ 提交于 2020-12-29 03:38:06
问题 Anyone have success setting up a project using VueJS, PostCss, and Tailwind with component development in Storybook? I've gotten this far: New vue project ( vue-cli 3.0.5 ) @storybook/vue (4.0.0-alpha.25) tailwindcss (0.6.5) Create component using <style lang="postcss"> ... </style> Use Tailwind @apply within style block to apply utility classes to component The issue I run into is that any components I create stories for using lang="postcss" fail during compilation when running storybook. I

How to configure VueJS + PostCss + Tailwind with Storybook

由 早过忘川 提交于 2020-12-29 03:37:33
问题 Anyone have success setting up a project using VueJS, PostCss, and Tailwind with component development in Storybook? I've gotten this far: New vue project ( vue-cli 3.0.5 ) @storybook/vue (4.0.0-alpha.25) tailwindcss (0.6.5) Create component using <style lang="postcss"> ... </style> Use Tailwind @apply within style block to apply utility classes to component The issue I run into is that any components I create stories for using lang="postcss" fail during compilation when running storybook. I

How can I configure Storybook.js Webpack to work with absolute image paths in CSS modules in a Next.js project?

由 醉酒当歌 提交于 2020-12-12 11:25:07
问题 I am trying to configure Storybook to work with Next.js, Ant Design, Less, and TypeScript. In Next.js, images have to be stored in the public/ folder and referenced with absolute paths to be used throughout the project. I am having trouble configuring the Storybook.js webpack to be able to resolve these absolute image paths. For example, in a CSS module I could have: .testImage { background-image: url('/images/cucumber.png'); background-repeat: no-repeat; background-size: contain; height:
订阅 StorYBook