[Document] Wrote a document for FAB.

docs/src/components/FAB/FAB.stories.mdx

@@ -0,0 +1,56 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+import {Light, Dark} from './index';
+
+<Meta title="Components/FAB" />
+
+# FAB
+
+> [FAB] Floating Action Button is a component for represent the primary action of screen
+
+## Usage
+
+```tsx
+import {FAB} from 'dooboo-ui';
+
+<FAB {...props} />;
+```
+
+## Props
+
+|                | Types                                       | Description                                | Default |
+| -------------- | ------------------------------------------- | ------------------------------------------ | ------- |
+| isActive       | `boolean`                                   |                                            |         |
+| FABItems       | `Array<Item>`                               | List of id and iconName form each FABItems |         |
+| onPressFAB     | `() => void`                                | Press callback for main FAB button         |         |
+| onPressFABItem | `(item?: Item) => void`                     | Press callback for main FAB button         |         |
+| renderFAB?     | `() => ReactElement`                        |                                            |         |
+| renderFABItem? | `(item: Item, idx: number) => ReactElement` |                                            |         |
+| style?         | `Styles`                                    |                                            |         |
+| styles?        | `Styles`                                    | Extra Props for FAB styles                 |         |
+
+## FABItem
+
+|      | Types      | Description                                                                        | Default |
+| ---- | ---------- | ---------------------------------------------------------------------------------- | ------- |
+| icon | `IconName` |                                                                                    |         |
+| id   | `string`   | Id for distinguishing from other FABItems that passed from onPressFABItem callback |         |
+
+## Styles
+
+|            | Types                  | Description             | Default |
+| ---------- | ---------------------- | ----------------------- | ------- |
+| FAB?       | `StyleProp<ViewStyle>` | Style for main FAB      |         |
+| FABItem?   | `StyleProp<ViewStyle>` | Style for FABItem       |         |
+| iconSize?  | `number`               |                         | 24      |
+| buttonSize | `ButtonSize`           |                         |         |
+| gap?       | `number`               | Gap between FAB Buttons | 20      |
+
+## Demo
+
+#### Light Theme
+
+<Light />
+
+#### Dark Theme
+
+<Dark />

docs/src/components/FAB/index.tsx

@@ -0,0 +1,55 @@
+import {FAB, ThemeProvider, withTheme} from 'dooboo-ui';
+import {FC, ReactElement, useState} from 'react';
+import {SafeAreaView, View} from 'react-native';
+
+import styled from '@emotion/native';
+import {useFonts} from 'expo-font';
+
+const StoryContainer = styled.View`
+  flex: 1;
+  width: 100%;
+  height: 300px;
+  align-self: stretch;
+  background-color: ${({theme}) => theme.background};
+`;
+
+const FABContainer: FC = () => {
+  const [active, setActive] = useState<boolean>(false);
+
+  const [fontsLoaded] = useFonts({
+    IcoMoon: require('../../assets/doobooui.ttf'),
+  });
+
+  if (!fontsLoaded) return <View />;
+
+  return (
+    <StoryContainer>
+      <SafeAreaView style={{display: 'flex', width: '100%', height: '100%'}}>
+        <FAB
+          styles={{buttonSize: 'medium'}}
+          isActive={active}
+          FABItems={[
+            {id: 'search', icon: 'home-light'},
+            {id: 'like', icon: 'like-light'},
+          ]}
+          onPressFAB={() => setActive((prev) => !prev)}
+          onPressFABItem={() => {}}
+        />
+      </SafeAreaView>
+    </StoryContainer>
+  );
+};
+
+const FABStory = withTheme(FABContainer);
+
+export const Light = (): ReactElement => (
+  <ThemeProvider initialThemeType="light">
+    <FABStory />
+  </ThemeProvider>
+);
+
+export const Dark = (): ReactElement => (
+  <ThemeProvider initialThemeType="dark">
+    <FABStory />
+  </ThemeProvider>
+);