Icon fixes

.storybook/index.css

@@ -0,0 +1,134 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  @font-face {
+    font-family: "Poppins";
+    src: url("assets/fonts/Poppins-Bold.eot");
+    src: url("assets/fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"),
+      url("assets/fonts/Poppins-Bold.woff2") format("woff2"),
+      url("assets/fonts/Poppins-Bold.ttf") format("truetype");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Poppins";
+    src: url("assets/fonts/Poppins-Medium.eot");
+    src: url("assets/fonts/Poppins-Medium.eot?#iefix") format("embedded-opentype"),
+      url("assets/fonts/Poppins-Medium.woff2") format("woff2"),
+      url("assets/fonts/Poppins-Medium.ttf") format("truetype");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Poppins";
+    src: url("assets/fonts/Poppins-Regular.eot");
+    src: url("assets/fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"),
+      url("assets/fonts/Poppins-Regular.woff2") format("woff2"),
+      url("assets/fonts/Poppins-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Poppins";
+    src: url("assets/fonts/Poppins-Thin.eot");
+    src: url("assets/fonts/Poppins-Thin.eot?#iefix") format("embedded-opentype"),
+      url("assets/fonts/Poppins-Thin.woff2") format("woff2"),
+      url("assets/fonts/Poppins-Thin.ttf") format("truetype");
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  html {
+    font-family: "Poppins", -apple-system, "Segoe UI", system-ui, "Roboto",
+      "Helvetica Neue", "Arial";
+    color: var(--color-text);
+  }
+
+  *,
+  ::before,
+  ::after,
+  .theme-dark *,
+  .theme-dark::before,
+  .theme-dark::after {
+    /* ------------------------------- Body color ------------------------------- */
+    --color-aside: #0a0e1a;
+    --color-footer: 10 10 10;
+    --color-text: rgb(38, 38, 38);
+    /* -------------------------------------------------------------------------- */
+    --color-serv: 25 29 43;
+    --color-serv-50: 227 230 237;
+    --color-serv-100: 200 205 223;
+    --color-serv-200: 142 152 189;
+    --color-serv-300: 90 104 155;
+    --color-serv-400: 58 67 100;
+    --color-serv-500: 25 29 43;
+    --color-serv-600: 21 24 35;
+    --color-serv-700: 15 17 26;
+    --color-serv-800: 9 11 16;
+    --color-serv-900: 6 7 10;
+    /* ---------------------------------- Blue ---------------------------------- */
+    --color-blue-50: 240 247 254;
+    --color-blue-100: 221 237 254;
+    --color-blue-200: 182 216 252;
+    --color-blue-300: 137 192 250;
+    --color-blue-400: 74 158 247;
+    --color-blue-500: 9 109 217;
+    --color-blue-600: 8 99 196;
+    --color-blue-700: 7 87 171;
+    --color-blue-800: 6 69 137;
+    --color-blue-900: 4 49 98;
+    /* ---------------------------------- Gray ---------------------------------- */
+    --color-gray-50: 250 250 250;
+    --color-gray-75: 240 240 240;
+    --color-gray-100: 235 235 235;
+    ;
+    --color-gray-200: 214 214 214;
+    --color-gray-300: 191 191 191;
+    --color-gray-400: 166 166 166;
+    --color-gray-500: 140 140 140;
+    --color-gray-600: 115 115 115;
+    --color-gray-700: 89 89 89;
+    --color-gray-800: 64 64 64;
+    --color-gray-900: 38 38 38;
+  }
+
+  /* Dark theme */
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: hsl(var(--hue), 10%, 10%);
+      --fg: hsl(var(--hue), 10%, 90%);
+    }
+  }
+}
+
+@layer components {
+  /* Separate
+    ======================================================================== */
+
+  .separate {
+    @apply flex items-center text-center;
+  }
+
+  .separate::after,
+  .separate::before {
+    content: '';
+    @apply border-b border-gray-300 flex-1;
+  }
+
+  .separate:not(:empty)::after {
+    @apply ml-2;
+  }
+
+  .separate:not(:empty)::before {
+    @apply mr-2;
+  }
+}

.storybook/main.js

@@ -1,16 +0,0 @@
-module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/preset-create-react-app"
-  ],
-  "framework": "@storybook/react",
-  "core": {
-    "builder": "@storybook/builder-webpack5"
-  }
-}

.storybook/main.ts

@@ -0,0 +1,31 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const Path = require('path');
+
+const AppSourceDir = Path.join(__dirname, '..', 'src');
+
+
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/preset-create-react-app",
+    "storybook-addon-pseudo-states",
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "@storybook/builder-webpack5",
+  },
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.plugins = [
+      ...(config.resolve.plugins || []),
+      new TsconfigPathsPlugin({
+        extensions: config.resolve.extensions,
+      }),
+    ];
+    config.resolve.alias["@assets"] = Path.resolve(__dirname, '..', 'src', 'assets')
+    console.log(config);
+    return config;
+  },
+};

.storybook/preview.ts

@@ -1,4 +1,4 @@
-import "../src/index.css";
+import "./index.css";
 /**
  * Read https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
  * for more information about the purpose of this file.

global.d.ts

@@ -11,3 +11,5 @@ export declare global {
     state: any & {idx: number}
   }
 }
+
+declare module "svg-inline-react" 

package.json

@@ -26,9 +26,12 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-scrollbars-custom": "^4.1.0",
+    "storybook-addon-pseudo-states": "^1.15.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4",
-    "yup": "^0.32.11"
+    "yup": "^0.32.11",
+    "tailwindcss": "^3.1.7"
   },
   "scripts": {
     "dev-tools": "redux-devtools --hostname=localhost --port=8000",
@@ -87,6 +90,7 @@
     "@storybook/preset-create-react-app": "^4.1.2",
     "@storybook/react": "^6.5.9",
     "@storybook/testing-library": "^0.0.13",
+    "@svgr/webpack": "^6.3.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
@@ -97,7 +101,6 @@
     "postcss": "^8.4.14",
     "prop-types": "^15.8.1",
     "react-test-renderer": "^18.2.0",
-    "tailwindcss": "^3.1.7",
     "webpack": "^5.74.0"
   }
 }

src/assets/svg/checkmark.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.65267 11.9722L6.62614 11.9999L0 5.07261L2.1576 2.81694L6.65276 7.51641L13.8424 0L16 2.25567L6.6793 12L6.65267 11.9722Z" />
+</svg>
+  

src/components/Icons.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import {
+  SVGBookmark
+} from "./icons";
+
+
+type Props = {
+  item: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
+}& React.SVGProps<SVGSVGElement>;
+
+const Icon = ({item, ...props}: Props) => {
+  const Item = item;
+  return <span><Item {...props} /></span>
+}
+
+export default {
+  // Title inside navigation bar
+  title: 'Icons',
+  // Component to test
+  component: Icon,
+  // Specify subcomponents to be able to work with
+  // nested structure,
+} as ComponentMeta<typeof Icon>;
+
+
+const Template: ComponentStory<typeof Icon> = (args) => (
+  <Icon {...args} />
+);
+
+export const Bookmark = Template.bind({});
+Bookmark.args = {
+  item: SVGBookmark,
+  className: "fill-blue-500"
+};

src/components/icons.tsx

@@ -1,32 +1,32 @@
-export {ReactComponent as SVGArrowBigRight} from "assets/svg/arrow-big-right.svg";
+export {ReactComponent as SVGArrowBigRight} from "@assets/svg/arrow-big-right.svg";
-export {ReactComponent as SVGArrowDown} from "assets/svg/arrow-down.svg";
+export {ReactComponent as SVGArrowDown} from "@assets/svg/arrow-down.svg";
-export {ReactComponent as SVGArrowLeft} from "assets/svg/arrow-left.svg";
+export {ReactComponent as SVGArrowLeft} from "@assets/svg/arrow-left.svg";
-export {ReactComponent as SVGArrowRight} from "assets/svg/arrow-right.svg";
+export {ReactComponent as SVGArrowRight} from "@assets/svg/arrow-right.svg";
-export {ReactComponent as SVGBookmark} from "assets/svg/bookmark.svg";
+export {ReactComponent as SVGBookmark} from "@assets/svg/bookmark.svg";
-export {ReactComponent as SVGCaretDown} from "assets/svg/caret-down.svg"
+export {ReactComponent as SVGCaretDown} from "@assets/svg/caret-down.svg"
-export {ReactComponent as SVGCaretLeft} from "assets/svg/caret-left.svg"
+export {ReactComponent as SVGCaretLeft} from "@assets/svg/caret-left.svg"
-export {ReactComponent as SVGCaretRight} from "assets/svg/caret-right.svg"
+export {ReactComponent as SVGCaretRight} from "@assets/svg/caret-right.svg"
-export {ReactComponent as SVGCaretUp} from "assets/svg/caret-up.svg";
+export {ReactComponent as SVGCaretUp} from "@assets/svg/caret-up.svg";
-export {ReactComponent as SVGChevronesLeft} from "assets/svg/chevrones-left.svg";
+export {ReactComponent as SVGChevronesLeft} from "@assets/svg/chevrones-left.svg";
-export {ReactComponent as SVGChevronesRight} from "assets/svg/chevrones-right.svg";
+export {ReactComponent as SVGChevronesRight} from "@assets/svg/chevrones-right.svg";
-export {ReactComponent as SVGCite} from "assets/svg/cite.svg";
+export {ReactComponent as SVGCite} from "@assets/svg/cite.svg";
-export {ReactComponent as SVGCopy} from "assets/svg/copy.svg";
+export {ReactComponent as SVGCopy} from "@assets/svg/copy.svg";
-export {ReactComponent as SVGDelete} from "assets/svg/delete.svg";
+export {ReactComponent as SVGDelete} from "@assets/svg/delete.svg";
-export {ReactComponent as SVGDownload} from "assets/svg/download.svg";
+export {ReactComponent as SVGDownload} from "@assets/svg/download.svg";
-export {ReactComponent as SVGEdit1} from "assets/svg/edit1.svg";
+export {ReactComponent as SVGEdit1} from "@assets/svg/edit1.svg";
-export {ReactComponent as SVGEdit2} from "assets/svg/edit2.svg";
+export {ReactComponent as SVGEdit2} from "@assets/svg/edit2.svg";
-export {ReactComponent as SVGError} from "assets/svg/error.svg";
+export {ReactComponent as SVGError} from "@assets/svg/error.svg";
-export {ReactComponent as SVGEye} from "assets/svg/eye.svg";
+export {ReactComponent as SVGEye} from "@assets/svg/eye.svg";
-export {ReactComponent as SVGFavorite} from "assets/svg/favorite.svg";
+export {ReactComponent as SVGFavorite} from "@assets/svg/favorite.svg";
-export {ReactComponent as SVGFiletext} from "assets/svg/filetext.svg";
+export {ReactComponent as SVGFiletext} from "@assets/svg/filetext.svg";
-export {ReactComponent as SVGFolder} from "assets/svg/folder.svg";
+export {ReactComponent as SVGFolder} from "@assets/svg/folder.svg";
-export {ReactComponent as SVGKey} from "assets/svg/key.svg";
+export {ReactComponent as SVGKey} from "@assets/svg/key.svg";
-export {ReactComponent as SVGList} from "assets/svg/list.svg";
+export {ReactComponent as SVGList} from "@assets/svg/list.svg";
-export {ReactComponent as SVGMinus} from "assets/svg/minus.svg";
+export {ReactComponent as SVGMinus} from "@assets/svg/minus.svg";
-export {ReactComponent as SVGMore} from "assets/svg/more.svg";
+export {ReactComponent as SVGMore} from "@assets/svg/more.svg";
-export {ReactComponent as SVGPlus} from "assets/svg/plus.svg";
+export {ReactComponent as SVGPlus} from "@assets/svg/plus.svg";
-export {ReactComponent as SVGPrinter} from "assets/svg/printer.svg";
+export {ReactComponent as SVGPrinter} from "@assets/svg/printer.svg";
-export {ReactComponent as SVGSearch} from "assets/svg/search.svg";
+export {ReactComponent as SVGSearch} from "@assets/svg/search.svg";
-export {ReactComponent as SVGShare} from "assets/svg/share.svg";
+export {ReactComponent as SVGShare} from "@assets/svg/share.svg";
-export {ReactComponent as SVGUser} from "assets/svg/user.svg";
+export {ReactComponent as SVGUser} from "@assets/svg/user.svg";
-export {ReactComponent as SVGXMark} from "assets/svg/xmark.svg";
+export {ReactComponent as SVGXMark} from "@assets/svg/xmark.svg";

tsconfig.json

@@ -24,6 +24,7 @@
   "include": [
     "src/**/*",
   ],
+  "files": ["./global.d.ts"],
   "exclude": [
     "storybook-static",
     "src/**/*.stories.tsx",