logo
Tags down

shadow

Specify default page for Storybook


By : Wolfpack Apps
Date : October 14 2020, 02:15 PM
this one helps. The Kind and Story are selected based on the URL query parameters (i.e. http://localhost:9001/?selectedKind=Component&selectedStory=default will select the Component kind and default story). If you don't have any URL parameters, then storybook will choose the first story in the list (which is the first story loaded via however you have storybook configured).
If you just want to choose the first story in the list, then load you story files in a specific order in your loadStories function in .storybook/config.js file.
code :
// .storybook/addons.js
import addonAPI from '@storybook/addons';

let firstLoad = true;
addonAPI.register('my-organisation/my-addon', (storybookAPI) => {
  storybookAPI.onStory((kind, story) => {
    // when you enter a story, if you are just loading storybook up, default to a specific kind/story. 
    if (firstLoad) {
      firstLoad = false; // make sure to set this flag to false, otherwise you will never be able to look at another story.
      storybookAPI.selectStory('FirstKind', 'default story');
    }
  });
});



Share : facebook icon twitter icon

Error running storybook - sh: 1: start-storybook: not found


By : dileep
Date : March 29 2020, 07:55 AM
will be helpful for those in need I kind of solved the issue. I think the issue was due to the file system. I restarted my system and then again reinstalled storybook. Worked like a charm.

Can I move storybook directory to prjroot/build/storybook? (in React Native)


By : Nobody
Date : March 29 2020, 07:55 AM
will be helpful for those in need By adding the outDir option to your Typescript config.
tsconfig.json
code :
{
  "compilerOptions": {
    "outDir": "build/",
    ...
  }
}
"prestorybook": "rnstl --outputFile ./build/storybook/storyLoader.js --pattern \"**/*.story.tsx\" --searchDir ./App"

VueJS wtith storyhot config for storybook and jest error of Cannot find module '@storybook/vue/dist/server/babel_config'


By : user1989746
Date : March 29 2020, 07:55 AM
it helps some times Resolve it by opening issue all over the github! It was a result of inconsistent storybook addon versions vs storybook version!
Please look at my commit here for the key configurations https://github.com/adamchenwei/vuejs-storybook-storyshot-jest-webpack-boilerplate/commit/df9cc7cacb045633b20bb0ffad71abed31a81b73

storybook @storybook/addon-options dosent work


By : user2306331
Date : March 29 2020, 07:55 AM
may help you . Edit after testing with provided versions:
I tested this locally with the above versions, and what it looks like is that because @storybook/react and @storybook/addons are on different versions, even by a patch, @storybook/react ends up installing it's own addons dependency and the 2 become out of sync.
code :
import { addDecorator, configure } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';

addDecorator(withOptions({ name: 'my name' }));

// rest of the config goes here

Storybook with Vue in TypeScript how to import from a .storybook.ts file (Webpack configs)?


By : Devon Cook
Date : March 29 2020, 07:55 AM
it helps some times This .storybook/webpack.config.js is working for me, along with storysource addon. If you are not needing storysource, just remove the use loader object with @storybook/addon-storysource/loader:
code :
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const path = require('path');

module.exports = async ({ config }) => {

  config.module.rules.push({
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader', 'postcss-loader'],
    include: path.resolve(__dirname, '../'),
  });

  config.module.rules.push({
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../assets/styles')
  });

  config.resolve = {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      'assets': path.resolve('../src/assets'),
      '@': path.join(__dirname, '../src'),
    }
  };

  config.module.rules.push({
    test: /\.stories\.ts?$/,
    exclude: /node_modules/,
    use: [
      {
        loader: require.resolve('babel-loader')
      },
      {
        loader: require.resolve('@storybook/addon-storysource/loader')
      }
    ]
  });

  config.module.rules.push({
    test: /\.ts$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true
        },
      }
    ]
  });

  config.plugins.push(new ForkTsCheckerWebpackPlugin());

  return config;
};
Related Posts Related Posts :
  • Mongoose Document.toObject produces GraphQL error
  • Nativescript transparent row gridlayout
  • Apache Airflow - Maintain table for dag_ids with last run date?
  • .NET standard 2.0 project not able to load Dapper 1.50.5
  • CGAL: How do I rotate one 3D vector onto another?
  • Google receipt validation - 401 - permissionDenied
  • Create 2D Circle from Existing Grid
  • Setting up Rethinkdb with bash command in docker-compose
  • Microsoft Cognitive Services Sentiment Analysis: Retention period
  • How to install Cocoapods behind a firewall
  • rxjs - stop observable with a subject subscription
  • Verilog : A task with continuous assign output for local variables
  • Delphi flow with indy
  • How to hide drop-downs when clicking Tableau buttons using Tableau Reader
  • What is the best way to restrict access to an Application Load Balancer?
  • google d8 (v8 shell) navigation on Mac (arrow keys) do not navigate
  • is Bluetooth BR/EDR same as bluetooth Classic
  • How to pass onClick handler from parent to child components through optional labeled arguments
  • Timer Routine to Auto close database doesn't always kick off
  • Why can I not access a variable declared in a macro unless I pass in the name of the variable?
  • How to get the address of a constant in MIPS?
  • What does this Zurb Foundation 6 mixin @include xy-grid() mean?
  • C++ Builder > TControl.Parent property > does the parent free the children?
  • Pyspark create new data frame with updating few columns from old data frame
  • Best way to get Twilio SMS failures hourly or daily
  • mybatis foreach but submiting individual inserts
  • Isolate Bazel C++ build from system include directories
  • How to get order article image
  • zero point one in the IEEE 754 standard
  • How to fix the size of the tables on power BI
  • Xamarin.Forms Prism Master Detail Exception Queue Empty
  • Marklogic URL encoding
  • Karate API : Passing variables to other feature file is not working
  • Accessing resources of a dynamically loaded module
  • the PyQt4.QtCore module failed to register with the sip module
  • Location of auth:api Middleware
  • Provider configuration set number of messages to prefectch
  • AMAZON.TIME issue in Alexa Skill
  • How can I perform maths in a silverstripe template?
  • Optional CloudFront Lambda function association in Terraform
  • With Asciidoctor, how to exclude code between tags during an "include::"?
  • Parameters on Url.Action() have null properties
  • Syntax error when create enum type using knex.raw()
  • Does the semaphore solution work for multiple producer consumer?
  • Exception in thread "main" - java.lang.NoClassDefFoundError
  • Process connection_type after resolved
  • AHK Script using PostClick and PostMessage
  • Add application insights to stateless service fabric app
  • IFTTT - Exclude Twitter Retweets
  • Hyperledger Fabric: Where can one find complete description of network-config.yaml?
  • What's the difference between knex.raw() and knex.schema.raw()?
  • What is the lifetime of Dialog flow session?
  • With Google+ being shutdown, is the OAuth API gone too?
  • Change/Update Field name in the NiFi Schema Text property Across various parallel flows
  • Can m4 execute user defined bash scripts?
  • How can I index a collection of records by one of their field?
  • How to prevent creating a new record from dashboard grid?
  • DDD - Multiple Bounded Contexts because of differing aggregate data?
  • I am trying to implement lodash _.difference(array, [values]) using .filter() method
  • Show / Hide another element based on primefaces p:fileUpload
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org