From c2b2fcd2628363437610f08afc28aff788722846 Mon Sep 17 00:00:00 2001
From: JuyeongByeon <wndudqus@naver.com>
Date: Thu, 7 Oct 2021 00:04:31 +0900
Subject: [PATCH 1/2] [implement]

1. add story for FAB button in doc project
2. add basic introduction  doc for FAB
---
 docs/src/components/FAB/FAB.stories.mdx | 56 +++++++++++++++++++++++++
 docs/src/components/FAB/index.tsx       | 52 +++++++++++++++++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 docs/src/components/FAB/FAB.stories.mdx
 create mode 100644 docs/src/components/FAB/index.tsx

diff --git a/docs/src/components/FAB/FAB.stories.mdx b/docs/src/components/FAB/FAB.stories.mdx
new file mode 100644
index 00000000..ac447fe5
--- /dev/null
+++ b/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 />
diff --git a/docs/src/components/FAB/index.tsx b/docs/src/components/FAB/index.tsx
new file mode 100644
index 00000000..86345430
--- /dev/null
+++ b/docs/src/components/FAB/index.tsx
@@ -0,0 +1,52 @@
+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;
+  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
+          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>
+);

From 770edcd71becda02ecbeba4ab68f517cd7b77c0e Mon Sep 17 00:00:00 2001
From: JuyeongByeon <wndudqus@naver.com>
Date: Thu, 7 Oct 2021 00:50:02 +0900
Subject: [PATCH 2/2] [impelment]

add Demo
---
 docs/src/components/FAB/index.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/FAB/index.tsx b/docs/src/components/FAB/index.tsx
index 86345430..fd5f33e4 100644
--- a/docs/src/components/FAB/index.tsx
+++ b/docs/src/components/FAB/index.tsx
@@ -7,6 +7,8 @@ import {useFonts} from 'expo-font';
 
 const StoryContainer = styled.View`
   flex: 1;
+  width: 100%;
+  height: 300px;
   align-self: stretch;
   background-color: ${({theme}) => theme.background};
 `;
@@ -23,7 +25,8 @@ const FABContainer: FC = () => {
   return (
     <StoryContainer>
       <SafeAreaView style={{display: 'flex', width: '100%', height: '100%'}}>
-        {/* <FAB
+        <FAB
+          styles={{buttonSize: 'medium'}}
           isActive={active}
           FABItems={[
             {id: 'search', icon: 'home-light'},
@@ -31,7 +34,7 @@ const FABContainer: FC = () => {
           ]}
           onPressFAB={() => setActive((prev) => !prev)}
           onPressFABItem={() => {}}
-        /> */}
+        />
       </SafeAreaView>
     </StoryContainer>
   );