feat: create storybook for colors and typography (#10)

* feat: create storybook for colors and typography

* chore: add iranyeken font license key and add lineHeight to typography

Co-authored-by: Mohsen Davoodi <Davoodi@inside.sahab.ir>

.storybook/SahabDesignSystem.js

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'Sahab Design System',
+  // brandUrl: 'https://example.com',
+  // brandImage: 'https://place-hold.it/350x150',
+  brandTarget: '_self',
+});

.storybook/main.js

@@ -1,11 +1,25 @@
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const path = require('path');
+
 module.exports = {
   stories: [],
   addons: ['@storybook/addon-essentials'],
-  // uncomment the property below if you want to apply some webpack config globally
-  // webpackFinal: async (config, { configType }) => {
-  //   // Make whatever fine-grained changes you need that should apply to all storybook configs
-
-  //   // Return the altered config
-  //   return config;
-  // },
+  staticDirs: [path.resolve(__dirname, './public')],
+  previewHead: (head) => `
+    ${head}
+    <link rel="stylesheet" href="/fonts/fontiran.css" />
+  `,
+  webpackFinal: async (config) => {
+    config.plugins?.push(
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: path.resolve(__dirname, './public/fonts'),
+            to: 'fonts',
+          },
+        ],
+      }),
+    );
+    return config;
+  },
 };

.storybook/public/fonts/FontLicense.txt

@@ -0,0 +1,18 @@
+IRANYekan fonts are considered a proprietary software.
+To gain information about the laws regarding the use of these fonts, please visit www.fontiran.com
+
+This set of fonts are used in this project under the license: WHGE5B
+
+'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
+In case you use this set of fonts in a software product, write the license code in the specified place and place this file next to the fonts.
+
+'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
+فونت های ايران‌یکان يک نرم افزار مالکيتی محسوب می شود جهت آگاهی از قوانين استفاده از اين فونت‌ها لطفاً به  وبسايت 
+www.fontiran.com 
+مراجعه نماييد 
+اين مجموعه فونت تحت اجازه نامه 
+WHGE5B
+در اين پروژه استفاده می شود
+
+'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
+در صورت استفاده از این مجموعه فونت در یک محصول نرم افزاری‌ یا وب‌سایت کد ۶ رقمی لایسنس خود را در محل مشخص شده (.....) درج کنید و این فایل را در کنار فونت ها قرار دهید.

.storybook/public/fonts/fontiran.css

@@ -0,0 +1,97 @@
+/**
+*
+*	Name:			IRANYekan Font
+*	Version:			3.0
+*	Author:			Moslem Ebrahimi (moslemebrahimi.com)
+*	Created on:		Dec 20, 2018
+*	Updated on:		Dec 20, 2018
+*	Website:			http://fontiran.com
+*	Copyright:		Commercial/Proprietary Software
+--------------------------------------------------------------------------------------
+فونت ایران یکان یک نرم افزار مالکیتی محسوب می شود. جهت آگاهی از قوانین استفاده از این فونت ها لطفا به وب سایت (فونت ایران دات کام) مراجعه نمایید
+--------------------------------------------------------------------------------------
+IRANYekan fonts are considered a proprietary software. To gain information about the laws regarding the use of these fonts, please visit www.fontiran.com 
+--------------------------------------------------------------------------------------
+This set of fonts are used in this project under the license: WHGE5B
+--------------------------------------------------------------------------------------
+*	
+**/
+@font-face {
+  font-family: iranyekan;
+  font-style: normal;
+  font-weight: bold;
+  src: url('./eot/iranyekanwebbold.eot');
+  src: url('./eot/iranyekanwebbold.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('./woff/iranyekanwebbold.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('./ttf/iranyekanwebbold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: iranyekan;
+  font-style: normal;
+  font-weight: 100;
+  src: url('./eot/iranyekanwebthin.eot');
+  src: url('./eot/iranyekanwebthin.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('./woff/iranyekanwebthin.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('./ttf/iranyekanwebthin.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: iranyekan;
+  font-style: normal;
+  font-weight: 300;
+  src: url('./eot/iranyekanweblight.eot');
+  src: url('./eot/iranyekanweblight.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('./woff/iranyekanweblight.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('./ttf/iranyekanweblight.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: iranyekan;
+  font-style: normal;
+  font-weight: normal;
+  src: url('./eot/iranyekanwebregular.eot');
+  src: url('./eot/iranyekanwebregular.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('./woff/iranyekanwebregular.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('./ttf/iranyekanwebregular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: iranyekan;
+  font-style: normal;
+  font-weight: 500;
+  src: url('./eot/iranyekanwebmedium.eot');
+  src: url('./eot/iranyekanwebmedium.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('./woff/iranyekanwebmedium.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('./ttf/iranyekanwebmedium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: iranyekan;
+  font-style: normal;
+  font-weight: 800;
+  src: url('./eot/iranyekanwebextrabold.eot');
+  src: url('./eot/iranyekanwebextrabold.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('./woff/iranyekanwebextrabold.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('./ttf/iranyekanwebextrabold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: iranyekan;
+  font-style: normal;
+  font-weight: 900;
+  src: url('./eot/iranyekanwebblack.eot');
+  src: url('./eot/iranyekanwebblack.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('./woff/iranyekanwebblack.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('./ttf/iranyekanwebblack.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: iranyekan;
+  font-style: normal;
+  font-weight: 950;
+  src: url('./eot/iranyekanwebextrablack.eot');
+  src: url('./eot/iranyekanwebextrablack.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('./woff/iranyekanwebextrablack.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('./ttf/iranyekanwebextrablack.ttf') format('truetype');
+}