added example for FC with default props (#222)

Author: SeeeRGo

README.md

@@ -90,6 +90,7 @@ I highly recommend to add a bounty to the issue that you're waiting for to incre
 - [React](#react)
   - [Function Components - FC](#function-components---fc)
     - [- Counter Component](#--counter-component)
+    - [- Counter Component with default props](#--counter-component-with-default-props)
     - [- Spreading attributes in Component](#--spreading-attributes-in-component)
   - [Class Components](#class-components)
     - [- Class Counter Component](#--class-counter-component)
@@ -325,6 +326,46 @@ export const FCCounter: React.FC<Props> = props => {
 
 [⇧ back to top](#table-of-contents)
 
+### - Counter Component with default props
+
+```tsx
+import * as React from 'react';
+
+type Props = {
+  label: string;
+  count: number;
+  onIncrement: () => void;
+};
+
+// React.FC is unaplicable here due not working properly with default props
+// https://github.com/facebook/create-react-app/pull/8177
+export const FCCounterWithDefaultProps = (props: Props): JSX.Element => {
+  const { label, count, onIncrement } = props;
+
+  const handleIncrement = () => {
+    onIncrement();
+  };
+
+  return (
+    <div>
+      <span>
+        {label}: {count}
+      </span>
+      <button type="button" onClick={handleIncrement}>
+        {`Increment`}
+      </button>
+    </div>
+  );
+};
+
+FCCounterWithDefaultProps.defaultProps = { count: 5 };
+
+```
+
+[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#fccounterwithdefaultprops)
+
+[⇧ back to top](#table-of-contents)
+
 ### - [Spreading attributes](https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes) in Component
 
 ```tsx

README_SOURCE.md

@@ -90,6 +90,7 @@ I highly recommend to add a bounty to the issue that you're waiting for to incre
 - [React](#react)
   - [Function Components - FC](#function-components---fc)
     - [- Counter Component](#--counter-component)
+    - [- Counter Component with default props](#--counter-component-with-default-props)
     - [- Spreading attributes in Component](#--spreading-attributes-in-component)
   - [Class Components](#class-components)
     - [- Class Counter Component](#--class-counter-component)
@@ -297,6 +298,14 @@ In code above `React.MouseEvent<HTMLDivElement>` is type of mouse event, and thi
 
 [⇧ back to top](#table-of-contents)
 
+### - Counter Component with default props
+
+::codeblock='playground/src/components/fc-counter-with-default-props.tsx'::
+
+[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#fccounterwithdefaultprops)
+
+[⇧ back to top](#table-of-contents)
+
 ### - [Spreading attributes](https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes) in Component
 
 ::codeblock='playground/src/components/fc-spread-attributes.tsx'::

playground/src/components/__snapshots__/fc-counter-with-default-props.stories.storyshot

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots FCCounterWithDefaultProps default 1`] = `
+<div>
+  <span>
+    FCCounterWithDefaultProps
+    : 
+    5
+  </span>
+  <button
+    onClick={[Function]}
+    type="button"
+  >
+    Increment
+  </button>
+</div>
+`;

playground/src/components/fc-counter-with-default-props.md

@@ -0,0 +1,11 @@
+Usage:
+```jsx { "filePath": "./fc-counter-with-default-props.usage.tsx" }
+```
+
+Usage Demo:
+```jsx
+const Demo = require('./fc-counter-with-default-props.usage').default;
+<Demo />
+```
+
+[⇦ back to guide](https://github.com/piotrwitek/react-redux-typescript-guide#--fc-counter-with-default-props)

playground/src/components/fc-counter-with-default-props.stories.tsx

@@ -0,0 +1,13 @@
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { FCCounterWithDefaultProps } from '.';
+
+storiesOf('FCCounterWithDefaultProps', module).add('default', () => (
+  <FCCounterWithDefaultProps
+    label={'FCCounterWithDefaultProps'}
+    onIncrement={action('onIncrement')}
+  />
+));

playground/src/components/fc-counter-with-default-props.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+type Props = {
+  label: string;
+  count: number;
+  onIncrement: () => void;
+};
+
+// React.FC is unaplicable here due not working properly with default props
+// https://github.com/facebook/create-react-app/pull/8177
+export const FCCounterWithDefaultProps = (props: Props): JSX.Element => {
+  const { label, count, onIncrement } = props;
+
+  const handleIncrement = () => {
+    onIncrement();
+  };
+
+  return (
+    <div>
+      <span>
+        {label}: {count}
+      </span>
+      <button type="button" onClick={handleIncrement}>
+        {`Increment`}
+      </button>
+    </div>
+  );
+};
+
+FCCounterWithDefaultProps.defaultProps = { count: 5 };

playground/src/components/fc-counter-with-default-props.usage.tsx

@@ -0,0 +1,11 @@
+import { action } from '@storybook/addon-actions';
+import * as React from 'react';
+
+import { FCCounterWithDefaultProps } from '.';
+
+export default () => (
+  <FCCounterWithDefaultProps
+    label={'FCCounterWithDefaultProps'}
+    onIncrement={action('onIncrement')}
+  />
+);

playground/src/components/index.ts

@@ -1,7 +1,7 @@
 export * from './error-message';
 export * from './generic-list';
 export * from './fc-counter';
-export * from './fc-forward-ref';
+export * from './fc-counter-with-default-props';
 export * from './fc-spread-attributes';
 export * from './class-counter';
 export * from './class-counter-with-default-props';

playground/src/routes/home.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import FCCounterUsage from '../components/fc-counter.usage';
+import FCCounterWithDefaultPropsUsage from '../components/fc-counter-with-default-props.usage';
 import FCSpreadAttributesUsage from '../components/fc-spread-attributes.usage';
 import ClassCounterUsage from '../components/class-counter.usage';
 import ClassCounterWithDefaultPropsUsage from '../components/class-counter-with-default-props.usage';
@@ -12,6 +13,7 @@ export function Home() {
   return (
     <section>
       <FCCounterUsage />
+      <FCCounterWithDefaultPropsUsage />
       <FCSpreadAttributesUsage />
       <ClassCounterUsage />
       <ClassCounterWithDefaultPropsUsage />

playground/src/storyshots.disabled-test.ts

@@ -0,0 +1,10 @@
+// import initStoryshots, {
+//   multiSnapshotWithOptions,
+// } from '@storybook/addon-storyshots';
+
+// initStoryshots({
+//   integrityOptions: { cwd: __dirname },
+//   test: multiSnapshotWithOptions({}),
+// });
+
+export {}