) }

const App = (props) => { return (

) } export default App;

### Styling Custom components
If you are a library developer, you may want to enable your component consumers to extend the styles of the components.
You may have different states, you may also want to have different variants.
Bamboo Molecules enables you to create a configurable component all the parts of which can be separately styled.

```tsx
import { FC, useMemo } from "react";
import type { ViewProps } from "react-native";
import { ProvideMolecules, useMolecules, useComponentStyles, extendTheme, } from "@webbeetechnologies/bamboo-molecules";

const theme = extendTheme({
  ChessTile: {
    height: 16,
    width: 16,
    variants: {
      "black": { backgroundColor: "#000" },
      "white": { backgroundColor: "#fff" },
    },
    states: {
      possible: {
        variants: {
          "black": { backgroundColor: "#222" },
          "white": { backgroundColor: "#ddd" },
        }
      },
      selected: {
        variants: {
          "black": { backgroundColor: "#111" },
          "white": { backgroundColor: "#eee" },
        }
      },
      potentialMove: {
        backgroundColor: "blue",
      }
    },
  },
});

const ChessTile: FC<ViewProps & AndSomeChessPositionArgs> = (props) => {
  const { possible, selected, potentialMove } = deriveCurrentTileState(props);
  const componentStyles = useComponentStyles("ChessTile", props.style, {
    // Represents a possible position for the selected piece
    possible,
    // Represents the position of the selected piece
    selected,
    // Represents the selected possible position of the selected piece.
    potentialMove
  });

  const { View, Text } = useMolecules();
  return <View { ...props} />
}

const components = {AwesomeViewComponent}

const App = (props) => {
  const board = useMemo(() => {
    Array.from({ length: 12 }, (_, i) => Array.from({ length: 12 }, (_, j) => <ChessTile variant={ i % 2 === j % 2 ? "white" : 'black' } />))
  }, []);

  return (
    <ProvideMolecules components={components} theme={theme}>
      {board}
    </ProvideMolecules>
  )
}
export default App;

Resolve Component styles

Though the component theme is opinionated by default. You can write your own custom style resolver allowing you to use styles you already have. Molecules provider accepts an optional resolveComponentStyles prop.

import { ProvideMolecules, extendTheme, resolveComponentStyles, extractComponentStyles } from "@webbeetechnologies/bamboo-molecules";

const theme = extendTheme({
  Knight: {
    height: 16,
    width: 16,
  },
});

const resolveStyles = (arg) => {
  const {componentName, componentTheme, variant, states, size, style, } = arg;

  switch(componentName) {
    case 'Knight':
      // Do something amazing with the componentTheme.
      // here, you can do something with the variants, states and sizes also.
      // you may choose to drop styles entirely for example.
      break;
    default:
      return resolveComponentStyles(arg);
  }
}

const extractStyles = (arg) => {
  const { theme, componentName, colorMode, style } = arg;

  switch(componentName) {
    case 'Knight':
      // here, you get the theme with duly resolved design tokens.
      // Do something with the style object and the theme.
      break;
    default:
      return resolveComponentStyles(arg);
  }
}

const App = (props) => {
  return (
      <ProvideMolecules theme={theme} extractComponentStyles={extractStyles} resolveComponentStyles={resolveStyles} />
  )
}

Nesting ProvideMolecules - Components

If you need to provide some components access in only a certain part of the application, you can nest ProvideMolecules. ProvideMolecules takes the top-down approach, thus allowing you to overwrite the components of molecules. This also allows you to provide the components at the topmost level, or at a much lower level where the component is most relevant.

Consider the example

import { ProvideMolecules, extendTheme, useMolecules } from "@webbeetechnologies/bamboo-molecules";
import { useMemo } from "react";

const componentsModal = {
  ModalTitle: (props: TextProps) => {
    const { Text } = useMolecules();
    const style = useMemo(() => [{ typescale: 'typescale.displayMedium' }], []);
    return <Text style={style}></Text>
  },
  ModalBody: (props: ViewProps) => {
    const { View } = useMolecules();
    const viewStyles = useMemo(() => [{ borderRadius: 'shapes.corner.large' }], []);
    const textStyles = useMemo(() => [{ typescale: 'typescale.displayRegular' }], []);

    return (
      <View style={viewStyles} {...props}>
        <Text style={textStyles}>{props.children}</Text>
      </View>
    )
  },
}

const componentsRoot = {
  Modal: (props: ViewProps) => {
    const { View } = useMolecules();
    return (
      <ProvideMolecules components={componentsModal}>
        <View {...props} />
      </ProvideMolecules>
    )
  },
  ModalTitle: (props: TextProps) => {
    const { Text } = useMolecules();
    const style = useMemo(() => [{ typescale: 'typescale.headlineLarge' }], []);
    return <Text style={style}></Text>
  },
}

const LibraryModalBody = () => {
  const {ModalBody, ModalTitle} = useMolecules();
  return (
      <>
        <ModalTitle>I am rendered `headlineLarge`</ModalTitle>
        <ModalBody>Some Modal Body</ModalBody>
      </>
  )
}

const AppModal = () => {
  const {Modal} = useMolecules();
  return (
    <Modal>
      <LibraryModalBody />
    </Modal>
  )
}

const App = (props) => {
  return (
          <ProvideMolecules components={componentsRoot}>
            <AppModal />
          </ProvideMolecules>
  )
}

Nesting ProvideMolecules - Themes

You may also find it useful to provide styling components separately at a lower level while still being able to extend the styles from a higher level. While it allows you to create custom styles, it enables the end consumer of these components to overwrite the design. Also, the component consumer can have a different color mode in different parts of the application without much ado.

import { ProvideMolecules, extendTheme, useMolecules } from "@webbeetechnologies/bamboo-molecules";

const theme = extendTheme({
  ViewComponent: {
    backgroundColor: "colors.primary",
    padding: "spacings.16",
    margin: "spacings.16",
  }
})

const darkTheme = extendTheme({
  ...theme,
  colorMode: "dark",
})

const ViewComponent = (props) => {
  const {View, Text} = useMolecules();
  return (
          <View { ...props }>
            <Text>{props.children}</Text>
          </View>
  )
}

const App = (props) => {
  return (
          <ProvideMolecules theme={theme}>
            <ViewComponent>I am in a light theme</ViewComponent>
            <ProvideMolecules theme={darkTheme}>
              <ViewComponent>I am in a dark theme</ViewComponent>
            </ProvideMolecules>
          </ProvideMolecules>
  )
}

Components and hooks

Bamboo Molecules components are well documented in storybooks. Learn how to use Bamboo Molecules in your React Native project now.

Scripts

# Get started with storybooks
yarn start

# Demo project
yarn demo