fix: storysort (#677)

* first attempt to use sort stories

* fix: use compose config to get parameters

* fix: test fail

* v8.5.4-alpha.0

* fix: update story syntax in examples

* fix: some adjustment

* fix

Author: dannyhw

examples/expo-example/.storybook/main.ts

@@ -3,18 +3,12 @@ import { StorybookConfig } from '@storybook/react-native';
 const main: StorybookConfig = {
   stories: [
     '../components/**/*.stories.?(ts|tsx|js|jsx)',
-    '../../../packages/react-native-ui/**/*.stories.?(ts|tsx|js|jsx)',
+    '../other_components/**/*.stories.?(ts|tsx|js|jsx)',
     {
-      directory: '../other_components',
+      directory: '../../../packages/react-native-ui',
+      titlePrefix: 'react-native-ui',
       files: '**/*.stories.?(ts|tsx|js|jsx)',
-      titlePrefix: 'OtherComponents',
     },
-    // {
-    //   directory: '../other_components',
-    //   files: '**/*.storiesof.?(ts|tsx|js|jsx)',
-    //   titlePrefix: 'OtherComponents',
-    // },
-    // '../components/**/*.storiesof.?(ts|tsx|js|jsx)',
   ],
   addons: [
     { name: '@storybook/addon-ondevice-controls' },

examples/expo-example/.storybook/preview.tsx

@@ -19,6 +19,13 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    options: {
+      storySort: {
+        method: 'alphabetical',
+        includeNames: true,
+        order: ['ControlExamples', ['ControlExample'], 'InteractionExample', 'DeepControls'],
+      },
+    },
     hideFullScreenButton: false,
     noSafeArea: false,
     my_param: 'anything',

examples/expo-example/.storybook/storybook.requires.ts

@@ -25,26 +25,26 @@ const normalizedStories = [
   },
   {
     titlePrefix: "",
-    directory: "../../packages/react-native-ui",
+    directory: "./other_components",
     files: "**/*.stories.?(ts|tsx|js|jsx)",
     importPathMatcher:
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
     // @ts-ignore
     req: require.context(
-      "../../../packages/react-native-ui",
+      "../other_components",
       true,
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
     ),
   },
   {
-    titlePrefix: "OtherComponents",
-    directory: "./other_components",
+    titlePrefix: "react-native-ui",
+    directory: "../../packages/react-native-ui",
     files: "**/*.stories.?(ts|tsx|js|jsx)",
     importPathMatcher:
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
     // @ts-ignore
     req: require.context(
-      "../other_components",
+      "../../../packages/react-native-ui",
       true,
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
     ),

examples/expo-example/components/ActionExample/Actions.stories.tsx

@@ -3,7 +3,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { ActionButton } from './Actions';
 
 const meta = {
-  title: 'ActionButton',
   component: ActionButton,
   argTypes: {
     onPress: { action: 'pressed' },

examples/expo-example/components/BackgroundExample/BackgroundCsf.stories.tsx

@@ -10,7 +10,6 @@ const styles = StyleSheet.create({
 });
 
 const meta = {
-  title: 'BackgroundExample/Background CSF',
   component: Background,
   parameters: {
     backgrounds: {

examples/expo-example/components/ControlExamples/Array/Array.stories.tsx

@@ -2,20 +2,21 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { Array } from './Array';
 
 const meta = {
-  title: 'ControlExamples/Array control',
   component: Array,
   args: {
     list: ['a', 'b', 'c'],
   },
   argTypes: {
     list: {
       separator: ',',
+      // @ts-expect-error
       control: { type: 'array' },
     },
   },
   parameters: {
-    notes:
-      'Seems like the array type is not distinguishable from object so you should provide the arg type in this case',
+    notes: `
+This is actually not a proper control type and should be inferred from the object type but is currently an inconsistency in the rn addon.
+    `,
   },
 } satisfies Meta<typeof Array>;
 

examples/expo-example/components/ControlExamples/Array/Array.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 
 interface ArrayProps {

examples/expo-example/components/ControlExamples/Boolean/Boolean.stories.tsx

@@ -1,15 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Switch } from './Boolean';
 
-const BooleanExample: Meta<typeof Switch> = {
-  title: 'ControlExamples/Boolean Control',
+const meta = {
   component: Switch,
-};
+} satisfies Meta<typeof Switch>;
 
-export default BooleanExample;
+export default meta;
 
-type BooleanStory = StoryObj<typeof Switch>;
+type BooleanStory = StoryObj<typeof meta>;
 
-export const Basic: BooleanStory = {};
+export const Basic: BooleanStory = {
+  args: {
+    on: false,
+  },
+};
 
 export const On: BooleanStory = { args: { on: true } };

examples/expo-example/components/ControlExamples/Color/Color.stories.tsx

@@ -1,20 +1,19 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { Color } from './Color';
 
-const ColorMeta: Meta<typeof Color> = {
-  title: 'ControlExamples/Color control',
+const meta = {
   parameters: { notes: '- test' },
   argTypes: {
     color: {
       control: { type: 'color' },
     },
   },
   component: Color,
-};
+} satisfies Meta<typeof Color>;
 
-export default ColorMeta;
+export default meta;
 
-type ColorStory = StoryObj<typeof Color>;
+type ColorStory = StoryObj<typeof meta>;
 
 export const ColorExample: ColorStory = {
   args: {

examples/expo-example/components/ControlExamples/Color/Color.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 interface ButtonProps {