introduce storybook for Link and Button

.storybook/main.js

@@ -3,6 +3,6 @@ module.exports = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/preset-typescript',
+    // '@storybook/preset-typescript',
   ],
 }

.storybook/webpack.config.js

@@ -1,20 +1,20 @@
 const path = require('path')
 
 module.exports = ({ config }) => {
-  config.module.rules[0].use[0].loader = require.resolve('babel-loader')
-  config.module.rules[0].use[0].options.presets = [
-    require.resolve('@babel/preset-react'),
-    require.resolve('@babel/preset-env'),
-  ]
+  // config.module.rules[0].use[0].loader = require.resolve('babel-loader')
+  // config.module.rules[0].use[0].options.presets = [
+  //   require.resolve('@babel/preset-react'),
+  //   require.resolve('@babel/preset-env'),
+  // ]
 
-  config.module.rules.push({
-    test: /\.(ts|tsx)$/,
-    loader: require.resolve('babel-loader'),
-    options: {
-      presets: [['react-app', { flow: false, typescript: true }]],
-      plugins: [],
-    },
-  })
+  // config.module.rules.push({
+  //   test: /\.(ts|tsx)$/,
+  //   loader: require.resolve('babel-loader'),
+  //   options: {
+  //     presets: [['react-app', { flow: false, typescript: true }]],
+  //     plugins: [],
+  //   },
+  // })
 
   // Remove the existing css rule
   config.module.rules = config.module.rules.filter(

src/components/Button/index.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Story, Meta } from '@storybook/react'
+
+import Button, { ButtonProps, ButtonSize } from './'
+
+const story: Meta = {
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    size: {
+      defaultValue: ButtonSize.Normal,
+      control: {
+        type: 'select',
+        options: [ButtonSize.Normal, ButtonSize.Small],
+      },
+    },
+    inverted: {
+      defaultValue: false,
+      control: {
+        type: 'boolean',
+      },
+    },
+    onClick: { action: 'click' },
+    onFocus: { action: 'focus' },
+    onBlur: { action: 'blur' },
+  },
+}
+
+const Template: Story<ButtonProps> = (args: ButtonProps) => <Button {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  children: 'Button',
+}
+
+export const Inverted = Template.bind({})
+Inverted.args = {
+  children: 'Button',
+  inverted: true,
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  children: 'Button',
+  size: ButtonSize.Small,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  children: 'Button',
+  disabled: true,
+}
+
+export default story

src/components/Button/index.tsx

@@ -2,8 +2,8 @@ import * as React from 'react'
 import * as S from './styles'
 
 export enum ButtonSize {
-  Normal,
-  Small,
+  Normal = 'Normal',
+  Small = 'Small',
 }
 
 export interface StyledButtonProps {

src/components/ButtonAsLink/index.tsx

@@ -3,6 +3,11 @@ import styled from 'styled-components'
 import { ButtonSize, StyledButtonProps } from '../Button'
 import { applyButtonStyles } from '../Button/styles'
 
+/**
+ * The component is used where we need to have
+ * a Button which behaves AS a Link
+ */
+
 const StyledButton = styled.a<StyledButtonProps>`
   ${(p) =>
     applyButtonStyles({

src/components/Link/index.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Story, Meta } from '@storybook/react'
+
+import Link, { LinkProps } from './'
+import { ButtonSize } from '../Button'
+
+const story: Meta = {
+  title: 'Link',
+  component: Link,
+  argTypes: {
+    href: {
+      defaultValue: 'https://cesko.digital/',
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    size: {
+      defaultValue: ButtonSize.Normal,
+      control: {
+        type: 'select',
+        options: [ButtonSize.Normal, ButtonSize.Small],
+      },
+    },
+    onClick: { action: 'click' },
+    onFocus: { action: 'focus' },
+    onBlur: { action: 'blur' },
+  },
+}
+
+const Template: Story<LinkProps> = (args: LinkProps) => <Link {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  children: 'Link',
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  children: 'Link',
+  size: ButtonSize.Small,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  children: 'Link',
+  disabled: true,
+}
+
+export default story

src/components/LinkAsButton/index.tsx

@@ -4,6 +4,11 @@ import styled from 'styled-components'
 import { applyLinkStyles } from '../Link/styles'
 import { StyledLinkProps } from '../Link'
 
+/**
+ * The component is used where we need to have
+ * a Link which behaves AS a Button
+ */
+
 const StyledLink = styled.button<StyledLinkProps>`
   ${(p) => applyLinkStyles({ size: p.size, disabled: p.disabled })}
 `