@storybook/react-native-theming 6.5.5 → 6.5.6-alpha.0

package/dist/index.d.ts

@@ -1 +1,488 @@
-export { theme, darkTheme, Theme } from './theme';
+import * as RN from 'react-native';
+import { TextStyle, ShadowStyleIOS, ViewStyle } from 'react-native';
+import * as React$1 from 'react';
+
+type ShadowStyle = ShadowStyleIOS | Pick<ViewStyle, 'elevation'>;
+type FontWeight = TextStyle['fontWeight'];
+/**
+ * Primitive tokens used to build the theme.
+ *
+ * Ideally components should not use these values directly, and should prefer
+ * to use more semantic values from the theme.
+ */
+interface ThemeTokens {
+    spacing1: number;
+    spacing2: number;
+    spacing3: number;
+    spacing4: number;
+    spacing5: number;
+    spacing6: number;
+    fontSize: {
+        small: number;
+        smaller: number;
+        normal: number;
+    };
+    color: {
+        navy: string;
+        offBlack: string;
+        black: string;
+        white: string;
+        grey200: string;
+        grey700: string;
+        grey800: string;
+        red500: string;
+        blue100: string;
+        blue200: string;
+        blue250: string;
+        blue300: string;
+        blue400: string;
+        blue600: string;
+        green500: string;
+    };
+    borderRadius: {
+        small: number;
+        medium: number;
+        large: number;
+        round: number;
+    };
+    borderWidthNormal: number;
+    /** Elevation shadows */
+    elevation: {
+        floating: ShadowStyle;
+    };
+}
+interface ThemeButton {
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+    borderRadius: number;
+}
+interface StorybookTheme {
+    tokens: ThemeTokens;
+    backgroundColor: string;
+    text: {
+        primaryColor: string;
+        secondaryColor: string;
+        linkColor: string;
+    };
+    preview: {
+        containerBackgroundColor: string;
+        backgroundColor: string;
+    };
+    /** Navigation bar and related area */
+    navigation: {
+        backgroundColor: string;
+        borderColor: string;
+        borderWidth: number;
+        visibilityBorderRadius: number;
+        visibilityInnerBorderColor: string;
+        visibilityOuterBorderColor: string;
+    };
+    /** Side panels (Story list, addons) */
+    panel: {
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+        paddingVertical: number;
+        paddingHorizontal: number;
+    };
+    /** Story list and list items */
+    storyList: {
+        fontSize: number;
+        headerPaddingHorizontal: number;
+        headerPaddingVertical: number;
+        headerTextColor: string;
+        headerFontWeight: FontWeight;
+        storyPaddingHorizontal: number;
+        storyPaddingVertical: number;
+        storyIndent: number;
+        storyTextColor: string;
+        storyFontWeight: FontWeight;
+        storySelectedBackgroundColor: string;
+        storySelectedTextColor: string;
+        storySelectedFontWeight: FontWeight;
+        sectionSpacing: number;
+        sectionActiveBackgroundColor: string;
+        sectionBorderRadius: number;
+        search: {
+            fontSize: number;
+            textColor: string;
+            placeholderTextColor: string;
+            borderRadius: number;
+            borderColor: string;
+            borderWidth: number;
+            backgroundColor: string;
+            paddingVertical: number;
+            paddingHorizontal: number;
+        };
+    };
+    /** Buttons */
+    button: {
+        fontSize: number;
+        fontWeight: FontWeight;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        primary: ThemeButton;
+        secondary: ThemeButton;
+    };
+    /** Tabs (navigation and addons) */
+    tabs: {
+        fontSize: number;
+        fontWeight: FontWeight;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderWidth: number;
+        borderRadius: number;
+        activeBorderColor: string;
+        activeBackgroundColor: string;
+        activeTextColor: string;
+        inactiveBorderColor: string;
+        inactiveBackgroundColor: string;
+        inactiveTextColor: string;
+    };
+    /** Inputs (text, radio, slider, etc.) */
+    inputs: {
+        errorTextColor: string;
+        labelFontSize: number;
+        labelTextColor: string;
+        text: {
+            fontSize: number;
+            textColor: string;
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: string;
+            borderRadius: number;
+            paddingVertical: number;
+            paddingHorizontal: number;
+        };
+        radio: {
+            fontSize: number;
+            height: number;
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: string;
+            paddingVertical: number;
+            paddingHorizontal: number;
+            activeBackgroundColor: string;
+            itemSpacing: number;
+            labelSpacing: number;
+        };
+        swatch: {
+            fontSize: number;
+            height: number;
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: string;
+            outerBorderRadius: number;
+            innerBorderRadius: number;
+            paddingVertical: number;
+            paddingHorizontal: number;
+            nameTextWeight: FontWeight;
+        };
+        slider: {
+            fontSize: number;
+            labelTextColor: string;
+            valueTextColor: string;
+        };
+    };
+}
+declare const theme: StorybookTheme;
+declare const darkTheme: StorybookTheme;
+
+// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
+// TypeScript Version: 3.1
+
+
+
+interface ThemeProviderProps {
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme)
+  children: React$1.ReactNode
+}
+
+declare function useTheme(): Theme
+
+interface ThemeProvider {
+  (props: ThemeProviderProps): React$1.ReactElement
+}
+
+declare const ThemeProvider: ThemeProvider
+
+// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
+// TypeScript Version: 3.4
+
+
+
+// tslint:disable-next-line: no-empty-interface
+interface Theme {}
+
+// Definitions by: Pat Sissons <https://github.com/patsissons>
+// TypeScript Version: 3.4
+
+
+
+type ReactNativeStyle = RN.ViewStyle | RN.TextStyle | RN.ImageStyle
+
+type ReactNativeStyleType<Props> = Props extends {
+  style?: RN.StyleProp<infer StyleType>
+}
+  ? StyleType extends ReactNativeStyle
+    ? StyleType
+    : ReactNativeStyle
+  : ReactNativeStyle
+
+type InterpolationPrimitive<
+  StyleType extends ReactNativeStyle = ReactNativeStyle
+> =
+  | null
+  | undefined
+  | boolean
+  | number
+  | string
+  | ObjectInterpolation<StyleType>
+
+type ObjectInterpolation<
+  StyleType extends ReactNativeStyle = ReactNativeStyle
+> = StyleType
+
+interface ArrayInterpolation<
+  MergedProps,
+  StyleType extends ReactNativeStyle = ReactNativeStyle
+> extends Array<Interpolation<MergedProps, StyleType>> {}
+
+interface FunctionInterpolation<
+  MergedProps,
+  StyleType extends ReactNativeStyle = ReactNativeStyle
+> {
+  (mergedProps: MergedProps): Interpolation<MergedProps, StyleType>
+}
+
+type Interpolation<
+  MergedProps = unknown,
+  StyleType extends ReactNativeStyle = ReactNativeStyle
+> =
+  | InterpolationPrimitive<StyleType>
+  | ArrayInterpolation<MergedProps, StyleType>
+  | FunctionInterpolation<MergedProps, StyleType>
+
+/** Same as StyledOptions but shouldForwardProp must be a type guard */
+interface FilteringStyledOptions<
+  Props = Record<string, any>,
+  ForwardedProps extends keyof Props & string = keyof Props & string
+> {
+  shouldForwardProp?: (propName: string) => propName is ForwardedProps
+}
+
+interface StyledOptions<Props = Record<string, any>> {
+  shouldForwardProp?: (propName: string) => boolean
+}
+
+/**
+ * @typeparam ComponentProps  Props which will be included when withComponent is called
+ * @typeparam SpecificComponentProps  Props which will *not* be included when withComponent is called
+ */
+interface StyledComponent<
+  ComponentProps extends {},
+  SpecificComponentProps extends {} = {},
+  JSXProps extends {} = {}
+> extends React.FC<ComponentProps & SpecificComponentProps & JSXProps> {
+  withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>(
+    component: C
+  ): StyledComponent<
+    ComponentProps & React.ComponentProps<C>,
+    {},
+    { ref?: React.Ref<InstanceType<C>> }
+  >
+  withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
+    component: C
+  ): StyledComponent<ComponentProps & React.ComponentProps<C>>
+}
+
+/**
+ * @typeparam ComponentProps  Props which will be included when withComponent is called
+ * @typeparam SpecificComponentProps  Props which will *not* be included when withComponent is called
+ */
+interface CreateStyledComponent<
+  ComponentProps extends {},
+  SpecificComponentProps extends {} = {},
+  JSXProps extends {} = {},
+  StyleType extends ReactNativeStyle = ReactNativeStyle
+> {
+  /**
+   * @typeparam AdditionalProps  Additional props to add to your styled component
+   */
+  <AdditionalProps extends {} = {}>(
+    ...styles: ArrayInterpolation<
+      ComponentProps &
+        SpecificComponentProps &
+        AdditionalProps & { theme: Theme },
+      StyleType
+    >
+  ): StyledComponent<
+    ComponentProps & AdditionalProps,
+    SpecificComponentProps,
+    JSXProps
+  >
+  /**
+   * @typeparam AdditionalProps  Additional props to add to your styled component
+   */
+  <AdditionalProps extends {} = {}>(
+    template: TemplateStringsArray,
+    ...styles: ArrayInterpolation<
+      ComponentProps &
+        SpecificComponentProps &
+        AdditionalProps & { theme: Theme },
+      StyleType
+    >
+  ): StyledComponent<
+    ComponentProps & AdditionalProps,
+    SpecificComponentProps,
+    JSXProps
+  >
+}
+
+/**
+ * @desc
+ * This function accepts a React component.
+ *
+ * @example styled(MyComponent)({ width: 100 })
+ * @example styled(MyComponent)(myComponentProps => ({ width: myComponentProps.width })
+ * @example styled(View)({ width: 100 })
+ * @example styled(View)<Props>(props => ({ width: props.width })
+ */
+interface CreateStyled$1 {
+  <
+    C extends React.ComponentClass<React.ComponentProps<C>>,
+    ForwardedProps extends keyof React.ComponentProps<C> &
+      string = keyof React.ComponentProps<C> & string
+  >(
+    component: C,
+    options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
+  ): CreateStyledComponent<
+    Pick<React.ComponentProps<C>, ForwardedProps> & {
+      theme?: Theme
+      as?: React.ElementType
+    },
+    {},
+    { ref?: React.Ref<InstanceType<C>> },
+    ReactNativeStyleType<React.ComponentProps<C>>
+  >
+
+  <C extends React.ComponentClass<React.ComponentProps<C>>>(
+    component: C,
+    options?: StyledOptions<React.ComponentProps<C>>
+  ): CreateStyledComponent<
+    React.ComponentProps<C> & {
+      theme?: Theme
+      as?: React.ElementType
+    },
+    {},
+    { ref?: React.Ref<InstanceType<C>> },
+    ReactNativeStyleType<React.ComponentProps<C>>
+  >
+
+  <
+    C extends React.ComponentType<React.ComponentProps<C>>,
+    ForwardedProps extends keyof React.ComponentProps<C> &
+      string = keyof React.ComponentProps<C> & string
+  >(
+    component: C,
+    options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
+  ): CreateStyledComponent<
+    Pick<React.ComponentProps<C>, ForwardedProps> & {
+      theme?: Theme
+      as?: React.ElementType
+    },
+    {},
+    {},
+    ReactNativeStyleType<React.ComponentProps<C>>
+  >
+
+  <C extends React.ComponentType<React.ComponentProps<C>>>(
+    component: C,
+    options?: StyledOptions<React.ComponentProps<C>>
+  ): CreateStyledComponent<
+    React.ComponentProps<C> & { theme?: Theme; as?: React.ElementType },
+    {},
+    {},
+    ReactNativeStyleType<React.ComponentProps<C>>
+  >
+}
+
+// Definitions by: Pat Sissons <https://github.com/patsissons>
+// TypeScript Version: 3.4
+
+
+
+type ReactNative = typeof RN
+
+// those 2 are just copies of the `BaseCreateStyled` with supplied `C` type argument
+type HostClassComponent<C extends React.ComponentClass<any>> =
+  CreateStyledComponent<
+    React.ComponentProps<C> & { theme?: Theme; as?: React.ElementType },
+    {},
+    { ref?: React.Ref<InstanceType<C>> },
+    ReactNativeStyleType<React.ComponentProps<C>>
+  >
+type HostFunctionComponent<C extends React.FunctionComponent<any>> =
+  CreateStyledComponent<
+    React.ComponentProps<C> & { theme?: Theme; as?: React.ElementType },
+    {},
+    {},
+    ReactNativeStyleType<React.ComponentProps<C>>
+  >
+
+interface StyledComponents {
+  ActivityIndicator: HostClassComponent<ReactNative['ActivityIndicator']>
+  Button: HostClassComponent<ReactNative['Button']>
+  DatePickerIOS: HostClassComponent<ReactNative['DatePickerIOS']>
+  DrawerLayoutAndroid: HostClassComponent<ReactNative['DrawerLayoutAndroid']>
+  FlatList: HostClassComponent<ReactNative['FlatList']>
+  Image: HostClassComponent<ReactNative['Image']>
+  ImageBackground: HostClassComponent<ReactNative['ImageBackground']>
+  KeyboardAvoidingView: HostClassComponent<ReactNative['KeyboardAvoidingView']>
+  ListView: HostClassComponent<ReactNative['ListView']>
+  Modal: HostClassComponent<ReactNative['Modal']>
+  NavigatorIOS: HostClassComponent<ReactNative['NavigatorIOS']>
+  Picker: HostClassComponent<ReactNative['Picker']>
+  PickerIOS: HostClassComponent<ReactNative['PickerIOS']>
+  Pressable: HostFunctionComponent<ReactNative['Pressable']>
+  ProgressBarAndroid: HostClassComponent<ReactNative['ProgressBarAndroid']>
+  ProgressViewIOS: HostClassComponent<ReactNative['ProgressViewIOS']>
+  RecyclerViewBackedScrollView: HostClassComponent<
+    ReactNative['RecyclerViewBackedScrollView']
+  >
+  RefreshControl: HostClassComponent<ReactNative['RefreshControl']>
+  SafeAreaView: HostClassComponent<ReactNative['SafeAreaView']>
+  ScrollView: HostClassComponent<ReactNative['ScrollView']>
+  SectionList: HostClassComponent<ReactNative['SectionList']>
+  SegmentedControlIOS: HostClassComponent<ReactNative['SegmentedControlIOS']>
+  Slider: HostClassComponent<ReactNative['Slider']>
+  SnapshotViewIOS: HostClassComponent<ReactNative['SnapshotViewIOS']>
+  StatusBar: HostClassComponent<ReactNative['StatusBar']>
+  SwipeableListView: HostClassComponent<ReactNative['SwipeableListView']>
+  Switch: HostClassComponent<ReactNative['Switch']>
+  SwitchIOS: HostClassComponent<ReactNative['SwitchIOS']>
+  TabBarIOS: HostClassComponent<ReactNative['TabBarIOS']>
+  Text: HostClassComponent<ReactNative['Text']>
+  TextInput: HostClassComponent<ReactNative['TextInput']>
+  ToolbarAndroid: HostClassComponent<ReactNative['ToolbarAndroid']>
+  TouchableHighlight: HostClassComponent<ReactNative['TouchableHighlight']>
+  TouchableNativeFeedback: HostClassComponent<
+    ReactNative['TouchableNativeFeedback']
+  >
+  TouchableOpacity: HostClassComponent<ReactNative['TouchableOpacity']>
+  TouchableWithoutFeedback: HostClassComponent<
+    ReactNative['TouchableWithoutFeedback']
+  >
+  View: HostClassComponent<ReactNative['View']>
+  ViewPagerAndroid: HostClassComponent<ReactNative['ViewPagerAndroid']>
+}
+
+interface CreateStyled extends CreateStyled$1, StyledComponents {}
+
+declare const styled: CreateStyled
+
+export { StorybookTheme, StyledComponent, ThemeProvider, darkTheme, styled, theme, useTheme };
+
+ export interface Theme extends StorybookTheme {}