v6.0.1-alpha.0

[dannyhw]

Features

Many of these features come from the web storybook so you can find more info by looking at the storybook documentation.

• New story format CSF
• Args
• Knobs replaced by Controls
• ondevice addons Notes, actions and backgrounds have all been updated to work for 6.0+
• New declarative config style
• Auto story detection built in. Including an optional watcher.
• Overall simplified implementation

Bug fixes

• Much less warnings when using controls (knobs replacement) - no longer using deprecated components.
• Promises no longer break for the entire app when using storybook.
• Weird storylist bottom margin is now gone

Breaking Changes

• Knobs are no longer supported, use controls instead
• storiesOf syntax is no longer recommended and you should move to CSF
• You now require a main.js and preview.js file to configure storybook.
• in order to resolve issues with polyfills that caused promises to break and much more you should change your metro config to include
  • resolverMainFields: ['sbmodern', 'main'] in the resolver field

See https://github.com/storybookjs/react-native/blob/next-6.0/v6README.md for a guide to try out this alpha

---

This discussion was created from the release v6.0.1-alpha.0.

[dannyhw]

I might have forgotten some of the changes that were made so let me know if I missed anything important.

[ralph-dev]

So far, I've transitioned from V5 to V6, and everything was fairly smooth (Make sure to read instructions carefully .storybook/preview.js etc). I'll add comments of any issues I find but just wanted to say been waiting for this for a long time so great job!

[dannyhw]

Hey ralph thanks for testing out the alpha, glad to see that it's been working for you. This issue with the web is something I'd like to resolve, and probably makes sense to create an issue for it. One of the existing issues that probably is needed before fixing this is to add react-native-web to the example app. This is something that has been a bit of blocker but would be happy to receive any help or guidance regarding that.

Another thing to note is that reactjs (web) storybook with some webpack changes to add react-native-web is probably a better experience than using the ondevice ui on the web. I still want the ondevice UI to work well for all platforms however if you need a solution for the web it's worth considering that option.

[ralph-dev]

Yeah I have webpack set up here but i haven't overrided the aliases just yet for that. I'll do that after i convert every story and make sure there are no others bugs first. Will keep posted but looking forward to the next alpha version!

[ralph-dev]

@dannyhw Hey I got Storybook to Work on Web, I'll post the Fixes in a PR shortly!

[ralph-dev]

Result:

Changes Required to StoryListContainer Component:

height: Dimensions.get('window').height, // Required to use full height of the screen (Responsive)
marginTop: 38, // Required to avoid Header Bar of Storybook (search bar was hidden by Header Bar of Storybook)

StoryListView.js File Contents

import styled from '@emotion/native';
import { addons } from '@storybook/addons';
import Events from '@storybook/core-events';
import React, { useMemo, useState } from 'react';
import { Dimensions, SectionList, StyleSheet } from 'react-native';
import { Header, Name } from '../Shared/text';
const SearchBar = styled.TextInput({
    borderRadius: 4,
    fontSize: 16,
    margin: 5,
    padding: 5,
}, ({ theme }) => ({
    backgroundColor: theme.borderColor,
    color: theme.buttonActiveTextColor,
}));
const HeaderContainer = styled.View({
    paddingVertical: 5,
    paddingHorizontal: 5,
});
const StoryListContainer = styled.View({
    top: 0,
    ...StyleSheet.absoluteFillObject,
    // for this to work I need to get the top margin from safeareview context
    // shadowColor: '#000',
    // shadowOffset: {
    //   width: 0,
    //   height: 1,
    // },
    // shadowOpacity: 0.2,
    // shadowRadius: 1.41,
    // elevation: 2,
    borderRightWidth: StyleSheet.hairlineWidth,
    borderRightColor: 'lightgrey',
    height: Dimensions.get('window').height,
    marginTop: 38,
});
const SectionHeader = ({ title, selected }) => (<HeaderContainer key={title}>
    <Header selected={selected}>{title}</Header>
  </HeaderContainer>);
const ItemTouchable = styled.TouchableOpacity({
    paddingHorizontal: 16,
    paddingVertical: 5,
});
const ListItem = ({ kind, title, selected, onPress }) => (<ItemTouchable key={title} onPress={onPress} activeOpacity={0.8} testID={`Storybook.ListItem.${kind}.${title}`} accessibilityLabel={`Storybook.ListItem.${title}`}>
    <Name selected={selected}>{title}</Name>
  </ItemTouchable>);
const getStories = (storyStore) => {
    if (!storyStore) {
        return [];
    }
    return Object.values(storyStore
        .raw()
        .reduce((acc, story) => {
        acc[story.kind] = {
            title: story.kind,
            data: (acc[story.kind] ? acc[story.kind].data : []).concat(story),
        };
        return acc;
    }, {}));
};
const styles = StyleSheet.create({
    sectionList: { flex: 1 },
});
const StoryListView = ({ selectedStory, storyStore }) => {
    const originalData = useMemo(() => getStories(storyStore), [storyStore]);
    const [data, setData] = useState(originalData);
    const handleChangeSearchText = (text) => {
        const query = text.trim();
        if (!query) {
            setData(originalData);
            return;
        }
        const checkValue = (value) => value.toLowerCase().includes(query.toLowerCase());
        const filteredData = originalData.reduce((acc, story) => {
            const hasTitle = checkValue(story.title);
            const hasKind = story.data.some((ref) => checkValue(ref.name));
            if (hasTitle || hasKind) {
                acc.push({
                    ...story,
                    // in case the query matches component's title, all of its stories will be shown
                    data: !hasTitle ? story.data.filter((ref) => checkValue(ref.name)) : story.data,
                });
            }
            return acc;
        }, []);
        setData(filteredData);
    };
    const changeStory = (storyId) => {
        const channel = addons.getChannel();
        channel.emit(Events.SET_CURRENT_STORY, { storyId });
    };
    return (<StoryListContainer>
      <SearchBar testID="Storybook.ListView.SearchBar" clearButtonMode="while-editing" disableFullscreenUI onChangeText={handleChangeSearchText} placeholder="Filter" returnKeyType="search"/>
      <SectionList style={styles.sectionList} testID="Storybook.ListView" renderItem={({ item }) => (<ListItem title={item.name} kind={item.kind} selected={selectedStory && item.id === selectedStory.id} onPress={() => changeStory(item.id)}/>)} renderSectionHeader={({ section: { title } }) => (<SectionHeader title={title} selected={selectedStory && title === selectedStory.kind}/>)} keyExtractor={(item, index) => item.id + index} sections={data} stickySectionHeadersEnabled={false}/>
    </StoryListContainer>);
};
export default StoryListView;

[dannyhw]

nice one ralph, mark me as a reviewer when you open the PR 👍