add-storybook

.storybook/main.js

@@ -0,0 +1,48 @@
+const path = require('path');
+
+const DefinePlugin = require('webpack').DefinePlugin;
+const TsConfigPaths = require('awesome-typescript-loader').TsConfigPathsPlugin;
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  webpackFinal: async (config, mode) => {
+    config.resolve.plugins.push(new TsConfigPaths({}));
+    config.resolve.alias['styles'] = path.resolve(__dirname, '../src/styles');
+    config.module.rules.push(
+      {
+        test: /\.tsx?$/,
+        loader: 'awesome-typescript-loader',
+      },
+      {
+        test: /\.scss$/,
+        exclude: path.resolve(__dirname, '../src/styles/'),
+        use: [
+          'style-loader',
+          'css-modules-typescript-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[local]___[hash:base64:5]',
+              },
+            },
+          },
+          'sass-loader',
+        ],
+      },
+      {
+        test: /\.scss$/,
+        include: path.resolve(__dirname, '../src/styles/'),
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      }
+    );
+    config.plugins.push(
+      new DefinePlugin({
+        __IMAGES_PATH__: mode === 'development' ? "'public/images'" : "'images'",
+        __CORE_API_PATH__: "'https://pillar-api-dev.azurewebsites.net/api/'",
+      })
+    );
+    return config;
+  },
+};

.storybook/preview.js

@@ -0,0 +1,4 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  layout: 'centered',
+};

package.json

@@ -11,14 +11,21 @@
     "test-watch": "jest --watch",
     "test-watch-silent": "jest --watch --silent",
     "lint": "npx eslint . --ext .ts,.tsx",
-    "lint-fix": "npx eslint . --ext .ts,.tsx --fix"
+    "lint-fix": "npx eslint . --ext .ts,.tsx --fix",
+    "storybook": "start-storybook -s ./public -p 6006",
+    "build-storybook": "build-storybook"
   },
   "author": "Adrian Połubiński",
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.8.3",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-react": "^7.8.3",
+    "@babel/preset-typescript": "^7.12.7",
+    "@storybook/addon-actions": "^6.1.11",
+    "@storybook/addon-essentials": "^6.1.11",
+    "@storybook/addon-links": "^6.1.11",
+    "@storybook/react": "^6.1.11",
     "@testing-library/jest-dom": "^5.11.3",
     "@testing-library/react": "^10.4.9",
     "@testing-library/react-hooks": "^3.2.1",

src/stories/Alert.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { Alert } from 'ui';
+
+export default {
+  title: 'ui/Alert',
+  component: Alert,
+  argTypes: {
+    message: { control: { disable: true } },
+    type: { control: { disable: true } },
+  },
+} as Meta;
+
+const Template: Story<any> = (args) => {
+  return <Alert {...args} onClose={() => {}} />;
+};
+
+export const DefaultError = Template.bind({});
+DefaultError.args = { message: `This is an alert of default type 'error'` };
+
+export const Success = Template.bind({});
+Success.args = { message: `This is an alert of type 'success'`, type: 'success' };
+
+export const CustomDelay = Template.bind({});
+CustomDelay.args = { message: `This is an alert of type 'success'`, type: 'success', delay: 1000 };

src/stories/Button.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import MessageIcon from '@material-ui/icons/Message';
+
+import { Button } from 'ui';
+
+export default {
+  title: 'ui/Button',
+  component: Button,
+} as Meta;
+
+const Template: Story<any> = (args) => {
+  return <Button {...args}>{args.children}</Button>;
+};
+
+export const Default = Template.bind({});
+Default.args = { children: 'Default' };
+
+export const Disabled = Template.bind({});
+Disabled.args = { children: 'Disabled', disabled: true };
+
+export const Transparent = Template.bind({});
+Transparent.args = { children: 'Transparent', theme: 'primaryTransparent' };
+
+export const Danger = Template.bind({});
+Danger.args = { children: 'Danger', theme: 'danger' };
+
+export const Icon = Template.bind({});
+Icon.args = { variant: 'icon', children: <MessageIcon /> };
+
+export const IconTransparent = Template.bind({});
+IconTransparent.args = { variant: 'icon', children: <MessageIcon />, theme: 'transparent' };
+
+export const IconDanger = Template.bind({});
+IconDanger.args = { variant: 'icon', children: <MessageIcon />, theme: 'danger' };

src/stories/Checkbox.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { GreyBackground } from './style';
+
+import { Checkbox } from 'ui';
+
+export default {
+  title: 'ui/Checkbox',
+  component: Checkbox,
+} as Meta;
+
+const Template: Story<any> = (args) => {
+  return <Checkbox {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = { label: 'Label' };
+
+export const Informing: Story<any> = (args) => {
+  return (
+    <GreyBackground>
+      <Checkbox label={'Informing'} variant="informing" {...args} />
+    </GreyBackground>
+  );
+};
+
+export const Invalid = Template.bind({});
+Invalid.args = { invalid: true, label: 'Invalid' };

src/stories/DateField.stories.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { DateField } from 'ui';
+
+export default {
+  title: 'ui/DateField',
+  component: DateField,
+} as Meta;
+
+const INIT_DATE = '01/01/2020';
+
+const Template: Story<any> = (args) => {
+  const [value, setValue] = useState(args.initDate);
+
+  return <DateField {...args} value={value} onSelect={setValue} />;
+};
+
+export const Default = Template.bind({});
+Default.args = { label: 'Choose your birthdate' };
+
+export const WithInitialDate = Template.bind({});
+WithInitialDate.args = { label: 'Choose your birthdate', initDate: INIT_DATE };
+
+export const WithError = Template.bind({});
+WithError.args = { label: 'Choose your birthdate', error: 'Something went wrong' };

src/stories/DatePicker.stories.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { DatePicker } from 'ui';
+
+export default {
+  title: 'ui/DatePicker',
+  component: DatePicker,
+} as Meta;
+
+const Template: Story<any> = (args) => {
+  const [date, setDate] = useState(args.initDate);
+
+  return <DatePicker {...args} value={date} onSave={setDate} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {};

src/stories/Disclaimer.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { GreyBackground } from './style';
+
+import { Disclaimer } from 'ui';
+
+export default {
+  title: 'ui/Disclaimer',
+  component: Disclaimer,
+} as Meta;
+
+const Template: Story<any> = (args) => {
+  return (
+    <GreyBackground>
+      <Disclaimer {...args}>{args.children}</Disclaimer>
+    </GreyBackground>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = { title: 'title', description: 'description' };
+
+export const WithChildren = Template.bind({});
+WithChildren.args = { title: 'title', description: 'description', children: 'Children' };

src/stories/FilesField.stories.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { FilesField } from 'ui';
+
+export default {
+  title: 'ui/FilesField',
+  component: FilesField,
+} as Meta;
+
+const FORMATS = 'png, jpeg';
+
+const Template: Story<any> = (args) => {
+  const [file, setFile] = useState<FilesField.LoadedFile[]>([]);
+
+  return <FilesField formats={FORMATS} value={file} onChange={setFile} {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = { label: 'Add an image' };
+
+export const WithError = Template.bind({});
+WithError.args = { label: 'Add an image', error: 'Oops, an error occured' };

src/stories/Img.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { Img } from 'ui';
+
+export default {
+  title: 'ui/Img',
+  component: Img,
+} as Meta;
+
+const Template: Story<any> = (args) => {
+  return (
+    <Img
+      src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"
+      size="120px:120px"
+      {...args}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};

src/stories/InputField.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { InputField } from 'ui';
+
+export default {
+  title: 'ui/InputField',
+  component: InputField,
+} as Meta;
+
+const Template: Story<any> = (args) => {
+  return <InputField {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = { label: 'This is input label' };
+
+export const WithError = Template.bind({});
+WithError.args = { label: 'This is input label', error: 'Oops, an error occured' };

src/stories/Logo.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { Logo } from 'ui';
+
+export default {
+  title: 'ui/Logo',
+  component: Logo,
+} as Meta;
+
+const Template: Story<any> = () => {
+  //THIS PATH PROP IS ONLY FOR STORYBOOK PURPOSES
+
+  return <Logo path="/images" />;
+};
+
+export const Default = Template.bind({});
+Default.args = {};