# business-storybook

> A component library

Latest version **0.0.6** (published 2022-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install business-storybook
pnpm add business-storybook
yarn add business-storybook
bun add business-storybook
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2022-03-31 |
| First published | 2022-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | kayzer |

## Links

- npm: https://www.npmjs.com/package/business-storybook
- Repository: https://github.com/lordkayzer/components-storybook
- Issues: https://github.com/lordkayzer/components-storybook/issues
- npm.io page: https://npm.io/package/business-storybook

## Dependencies (13)

- [expo](https://npm.io/package/expo.md) ~44.0.0
- [color](https://npm.io/package/color.md) ^4.2.1
- [react](https://npm.io/package/react.md) 17.0.1
- [react-dom](https://npm.io/package/react-dom.md) 17.0.1
- [react-native](https://npm.io/package/react-native.md) 0.64.3
- [expo-checkbox](https://npm.io/package/expo-checkbox.md) ^2.0.0
- [expo-status-bar](https://npm.io/package/expo-status-bar.md) ~1.2.0
- [react-native-web](https://npm.io/package/react-native-web.md) 0.17.1
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.3
- [react-native-vector-icons](https://npm.io/package/react-native-vector-icons.md) ^9.1.0
- [react-native-flash-message](https://npm.io/package/react-native-flash-message.md) ^0.2.1
- [react-native-safe-area-context](https://npm.io/package/react-native-safe-area-context.md) ^4.2.1
- [@react-native-async-storage/async-storage](https://npm.io/package/@react-native-async-storage/async-storage.md) ^1.16.3

## Recent versions

- 0.0.6 (latest) — 2022-03-31
- 0.0.5 — 2022-03-31
- 0.0.4 — 2022-03-30
- 0.0.3 — 2022-03-30
- 0.0.2 — 2022-03-30
- 0.0.1 — 2022-03-30

## README

#### Building for npm

Change in package.json the main prop:

From: `"main": "node_modules/expo/AppEntry.js",`

To: `"main": "lib/index.tsx",`

And revert the change after publish.



#### Publish the library for npm

Run the command: `npm publish` this will build the lib before publishing.

#### How to set up
`import { asyncLoadFont } from  from 'business-storybook';` and call the `asyncLoadFont` function in your app entry point.

```
import React, { useEffect, useState } from 'react';
import { asyncLoadFont } from 'business-storybook';

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    (async function() {
      await asyncLoadFont;
      setFontsLoaded(true);
    })();
  }, []);

  if (!fontsLoaded) {
    return <View/>;
  }

  return (
    ...
  );
}
```

#### Setting up a theme
```
import {StatusBar} from 'expo-status-bar';
import {ThemeProvider} from 'styled-components';
import {themes, useDarkMode} from 'business-storybook';

const {light, dark} = themes;

export default function App() {
  const [theme, themeToggler, mountedComponent] = useDarkMode();
  const themeMode = theme === 'light' ? light : dark;

if (!mountedComponent) {
    return <View/>;
  }

  return (
    <ThemeProvider theme={themeMode}>
      <StatusBar style={theme === 'light' ? 'dark' : 'light'} animated />
      <TouchableOpacity onPress={themeToggler}>
        <Text>Theme Toggle</Text>
      </TouchableOpacity>
      ...
    </ThemeProvider>
  );
}
```
#### Using FlashMessage
This library uses https://www.npmjs.com/package/react-native-flash-message, in order to use it, include `<FlashMessage/>` in you root component.

```
import React from 'react';
import { View } from 'react-native';
import { FlashMessage } from 'react-native-holper-storybook';

export default function App() {
  return (
    <View>
        ...
        <FlashMessage />
    </View>
  );
}
```

###### Sending a messages

```
import React from 'react';
import { View } from 'react-native';
import { Text, Button, showFlashMessage } from 'react-native-holper-storybook';

export default MyComponent = () => {
  return (
    <View style={styles.container}>
      <Button onPress={() => showFlashMessage({variant: 'success', title: 'The title', description: 'The description'})}>
        <Text color='white'>Shows success message</Text>
      </Button>

      <Button variant='error' onPress={() => showFlashMessage({variant: 'danger', title: 'The title', description: 'The description'})}>
        <Text color='white'>Shows error message</Text>
      </Button>
    </View>
  );
}
```

---
_Source: https://npm.io/package/business-storybook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._