, "">> = React.useMemo(
() => (props) =>
(
@@ -64,13 +63,7 @@ export default function Dashboard() {
-
+
@@ -84,13 +77,13 @@ export default function Dashboard() {
className="font-semibold inline-flex items-center space-x-2 hover:space-x-3"
>
connect
-
+
),
- []
+ [navigate]
);
/* --------------------------------- Markup --------------------------------- */
if (subscriptionsLoading) {
@@ -128,7 +121,6 @@ export default function Dashboard() {
open
-
@@ -175,7 +167,6 @@ export default function Dashboard() {
className="font-semibold inline-flex items-center space-x-2 hover:space-x-3"
>
open
-
diff --git a/src/pages/NoMatch.tsx b/src/pages/NoMatch.tsx
index b107f07..895268d 100644
--- a/src/pages/NoMatch.tsx
+++ b/src/pages/NoMatch.tsx
@@ -9,7 +9,6 @@ import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
/* -------------------------------------------------------------------------- */
/* Components */
-import Button from "components/controls/Button";
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* Misc */
@@ -17,7 +16,6 @@ import Button from "components/controls/Button";
/* -------------------------------------------------------------------------- */
/* Icons */
/* -------------------------------------------------------------------------- */
-import { ReactComponent as SVGBackIcon } from "assets/svg/backstab.svg";
/* -------------------------------------------------------------------------- */
/* Account information management page */
/* -------------------------------------------------------------------------- */
@@ -33,23 +31,7 @@ const NoMatch = (): JSX.Element => {
404
Page Not Found
{t('serv.noSuchPath')}
-
+
);
};
diff --git a/src/stories/AllIcons.stories.tsx b/src/stories/AllIcons.stories.tsx
new file mode 100644
index 0000000..14daf67
--- /dev/null
+++ b/src/stories/AllIcons.stories.tsx
@@ -0,0 +1,270 @@
+import React, { Component } from "react";
+import { ComponentMeta, ComponentStory, Meta} from "@storybook/react";
+import { ReactComponent as SVGArrowBigRight } from "../assets/svg/arrow-big-right.svg" ;
+import { ReactComponent as SVGArrowRight} from "../assets/svg/arrow-right.svg";
+// import {ReactComponent as SVGArrowLeft} from "../assets/svg/arrow-left.svg";
+import {ReactComponent as SVGArrowDown} from "../assets/svg/arrow-down.svg";
+import {ReactComponent as SVGBookmark} from "../assets/svg/bookmark.svg";
+import {ReactComponent as SVGCaretDown} from "../assets/svg/caret-down.svg"
+import {ReactComponent as SVGCaretLeft} from "../assets/svg/caret-left.svg"
+import {ReactComponent as SVGCaretRight} from "../assets/svg/caret-right.svg"
+import {ReactComponent as SVGCaretUp} from "../assets/svg/caret-up.svg";
+import {ReactComponent as SVGChevronesLeft} from "../assets/svg/chevrones-left.svg";
+import {ReactComponent as SVGChevronesRight} from "../assets/svg/chevrones-right.svg";
+import {ReactComponent as SVGCite} from "../assets/svg/cite.svg";
+import {ReactComponent as SVGCopy} from "../assets/svg/copy.svg";
+import {ReactComponent as SVGDelete} from "../assets/svg/delete.svg";
+import {ReactComponent as SVGDownload} from "../assets/svg/download.svg";
+import {ReactComponent as SVGEdit1} from "../assets/svg/edit1.svg";
+import {ReactComponent as SVGEdit2} from "../assets/svg/edit2.svg";
+import {ReactComponent as SVGError} from "../assets/svg/error.svg";
+import {ReactComponent as SVGEye} from "../assets/svg/eye.svg";
+import {ReactComponent as SVGFavorite} from "../assets/svg/favorite.svg";
+import {ReactComponent as SVGFiletext} from "../assets/svg/filetext.svg";
+import {ReactComponent as SVGFolder} from "../assets/svg/folder.svg";
+import {ReactComponent as SVGKey} from "../assets/svg/key.svg";
+import {ReactComponent as SVGList} from "../assets/svg/list.svg";
+import {ReactComponent as SVGMinus} from "../assets/svg/minus.svg";
+import {ReactComponent as SVGMore} from "../assets/svg/more.svg";
+import {ReactComponent as SVGPlus} from "../assets/svg/plus.svg";
+import {ReactComponent as SVGPrinter} from "../assets/svg/printer.svg";
+import {ReactComponent as SVGSearch} from "../assets/svg/search.svg";
+import {ReactComponent as SVGShare} from "../assets/svg/share.svg";
+import {ReactComponent as SVGUser} from "../assets/svg/user.svg";
+import {ReactComponent as SVGXMark} from "../assets/svg/xmark.svg";
+
+
+export default {
+ title: "Icons",
+}
+
+
+const ArrowBigRightStory: ComponentStory = (args) => ;
+const ArrowRightStory: ComponentStory = (args) => ;
+//const SVGArrowLeftStory : ComponentStory = (args) =>
+const SVGArrowDownStory : ComponentStory = (args) =>
+const SVGBookmarkStory : ComponentStory = (args) =>
+const SVGCaretDownStory : ComponentStory = (args) =>
+const SVGCaretLeftStory : ComponentStory = (args) =>
+const SVGCaretRightStory : ComponentStory = (args) =>
+const SVGCaretUpStory : ComponentStory = (args) =>
+const SVGChevronesLeftStory : ComponentStory = (args) =>
+const SVGChevronesRightStory : ComponentStory = (args) =>
+const SVGCiteStory : ComponentStory = (args) =>
+const SVGCopyStory : ComponentStory = (args) =>
+const SVGDeleteStory : ComponentStory = (args) =>
+const SVGDownloadStory : ComponentStory = (args) =>
+const SVGEdit1Story : ComponentStory = (args) =>
+const SVGEdit2Story : ComponentStory = (args) =>
+const SVGErrorStory : ComponentStory = (args) =>
+const SVGEyeStory : ComponentStory = (args) =>
+const SVGFavoriteStory : ComponentStory = (args) =>
+const SVGFiletextStory : ComponentStory = (args) =>
+const SVGFolderStory : ComponentStory = (args) =>
+const SVGKeyStory : ComponentStory = (args) =>
+const SVGListStory : ComponentStory = (args) =>
+const SVGMinusStory : ComponentStory = (args) =>
+const SVGMoreStory : ComponentStory = (args) =>
+const SVGPlusStory : ComponentStory = (args) =>
+const SVGPrinterStory : ComponentStory = (args) =>
+const SVGSearchStory : ComponentStory = (args) =>
+const SVGShareStory : ComponentStory = (args) =>
+const SVGUserStory : ComponentStory = (args) =>
+const SVGXMarkStory : ComponentStory = (args) =>
+
+export const ArrowBigRight= ArrowBigRightStory.bind({});
+export const ArrowRight = ArrowRightStory.bind({});
+//export const ArrowLeft = SVGArrowLeftStory.bind({});
+export const ArrowDown = SVGArrowDownStory.bind({});
+export const Bookmark = SVGBookmarkStory.bind({});
+export const CaretDown = SVGCaretDownStory.bind({});
+export const CaretLeft = SVGCaretLeftStory.bind({});
+export const CaretRight = SVGCaretRightStory.bind({});
+export const CaretUp = SVGCaretUpStory.bind({});
+export const ChevronesLeft = SVGChevronesLeftStory.bind({});
+export const ChevronesRight = SVGChevronesRightStory.bind({});
+export const Cite = SVGCiteStory.bind({});
+export const Copy = SVGCopyStory.bind({});
+export const Delete = SVGDeleteStory.bind({});
+export const Download = SVGDownloadStory.bind({});
+export const Edit1 = SVGEdit1Story.bind({});
+export const Edit2 = SVGEdit2Story.bind({});
+export const Error = SVGErrorStory.bind({});
+export const Eye = SVGEyeStory.bind({});
+export const Favorite = SVGFavoriteStory.bind({});
+export const Filetext = SVGFiletextStory.bind({});
+export const Folder = SVGFolderStory.bind({});
+export const Key = SVGKeyStory.bind({});
+export const List = SVGListStory.bind({});
+export const Minus = SVGMinusStory.bind({});
+export const More = SVGMoreStory.bind({});
+export const Plus = SVGPlusStory.bind({});
+export const Printer = SVGPrinterStory.bind({});
+export const Search = SVGSearchStory.bind({});
+export const Share = SVGShareStory.bind({});
+export const User = SVGUserStory.bind({});
+export const XMark = SVGXMarkStory.bind({});
+
+
+ArrowBigRight.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+
+ArrowRight.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+
+// ArrowLeft.args = {
+// fill: 'blue',
+// stroke: 'blue',
+// width: 25,
+// };
+ArrowDown.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Bookmark.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+CaretDown.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+CaretLeft.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+CaretRight.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+CaretUp.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+ChevronesLeft.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+ChevronesRight.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Cite.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Copy.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Delete.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Download.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Edit1.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Edit2.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Error.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Eye.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Favorite.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Filetext.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Folder.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Key.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+List.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Minus.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+More.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Plus.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Printer.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Search.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+Share.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+User.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+};
+XMark.args = {
+ fill: 'blue',
+ stroke: 'blue',
+ width: 25,
+}
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index c331bd4..97390a8 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -1,41 +1,30 @@
-import React from 'react';
+import React, { Children } from "react";
import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Button } from "../components/Button";
-import { Button } from './Button';
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
- title: 'Example/Button',
- component: Button,
- // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
- argTypes: {
- backgroundColor: { control: 'color' },
- },
+
+export default{
+ title: 'Button',
+ component: Button,
} as ComponentMeta;
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory = (args) => ;
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
- primary: true,
- label: 'Button',
+export const High = Template.bind({});
+High.args = {
+ emphasis: 'high',
+ children: ['High'],
};
-export const Secondary = Template.bind({});
-Secondary.args = {
- label: 'Button',
+export const Medium = Template.bind({});
+Medium.args = {
+ emphasis: 'medium',
+ children: ['Medium'],
};
-export const Large = Template.bind({});
-Large.args = {
- size: 'large',
- label: 'Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
- size: 'small',
- label: 'Button',
-};
+export const Low = Template.bind({});
+Low.args = {
+ emphasis:'low',
+ children:['Low'],
+};
\ No newline at end of file
diff --git a/src/stories/Radio.stories.tsx b/src/stories/Radio.stories.tsx
new file mode 100644
index 0000000..bc1dc72
--- /dev/null
+++ b/src/stories/Radio.stories.tsx
@@ -0,0 +1,46 @@
+import Radio from "../components/Radio";
+import { Meta, Story, ComponentStory, ComponentMeta } from "@storybook/react";
+import React, { useState } from "react";
+import { ReactComponent as Checkmark } from "assets/svg/check.svg";
+import { boolean } from "yup/lib/locale";
+
+export default {
+ title: "Radio",
+ component: Radio,
+ // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+ argTypes: {
+ checked: {
+ type: "boolean",
+ },
+ children: {
+ type: "string",
+ defaultValue: "Use light theme",
+ },
+ className: {
+ type: "string",
+ defaultValue: "mt-4 ml-4",
+ },
+ disabled: {
+ type: "boolean",
+ defaultValue: "false",
+ },
+ },
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => ;
+
+export const Checked = Template.bind({});
+Checked.args = {
+ checked: true,
+ children: "This is a custom Radio",
+};
+
+export const Unchecked = Template.bind({});
+Unchecked.args = {
+ checked: false,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+ disabled: true,
+};
diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx
new file mode 100644
index 0000000..177c8b2
--- /dev/null
+++ b/src/stories/TextInput.stories.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import {TextInput} from "../components/TextInput";
+
+export default {
+ title: 'Text Input',
+ component: TextInput,
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) =>
+
+export const TextInputStory = Template.bind({});
+
+TextInputStory.args ={
+ inGroup: true,
+ placeholder: "Search",
+ className: ["px-4", "py-2.5"]
+};
diff --git a/src/ui/views/GlobalSearch.tsx b/src/ui/views/GlobalSearch.tsx
index 9b14ba3..25b32e6 100644
--- a/src/ui/views/GlobalSearch.tsx
+++ b/src/ui/views/GlobalSearch.tsx
@@ -6,12 +6,9 @@ import Modal from "components/containers/modal/Modal";
/* -------------------------------------------------------------------------- */
/* Icons/SVG */
/* -------------------------------------------------------------------------- */
-import { ReactComponent as SVGSearchIcon } from "assets/svg/search.svg";
-import { ReactComponent as SVGTimesIcon } from "assets/svg/times.svg";
/* -------------------------------------------------------------------------- */
/* Components */
/* -------------------------------------------------------------------------- */
-import Button from "components/controls/Button";
/* -------------------------------------------------------------------------- */
/* Hooks */
/* -------------------------------------------------------------------------- */
@@ -36,28 +33,7 @@ export default function GlobalSearchbar() {
{}}>
-
-
-
- {}}
- placeholder={t('search.label')}
- className="bg-transparent
- focus:outline-none
- px-4 py-2 w-full"
- />
-
-
-
+
diff --git a/src/user/useCases/updatePersonalInformationUseCase.ts b/src/user/useCases/updatePersonalInformationUseCase.ts
index d6a8c6a..7f7ddc7 100644
--- a/src/user/useCases/updatePersonalInformationUseCase.ts
+++ b/src/user/useCases/updatePersonalInformationUseCase.ts
@@ -1,4 +1,4 @@
-import debounce from "lodash.debounce";
+import {debounce} from "lodash";
import { User } from "../domain/userEntity";
import { updateUser } from "../domain/userModel";
import { UserStore } from "../domain/userStore";
diff --git a/src/user/useCases/updateUserUseCase.ts b/src/user/useCases/updateUserUseCase.ts
index 5675f32..d3baba1 100644
--- a/src/user/useCases/updateUserUseCase.ts
+++ b/src/user/useCases/updateUserUseCase.ts
@@ -1,5 +1,5 @@
import Failure from "core/failure";
-import debounce from "lodash.debounce";
+import {debounce} from "lodash";
import { UpdateUserArtifacts } from "user/domain/userModel";
import { User } from "../domain/userEntity";
import { UserStore } from "../domain/userStore";
diff --git a/src/user/views/EmailEditor.tsx b/src/user/views/EmailEditor.tsx
index d1c82db..ce11f0f 100644
--- a/src/user/views/EmailEditor.tsx
+++ b/src/user/views/EmailEditor.tsx
@@ -12,12 +12,10 @@ import { useEmailDataViewModel } from "../controller/emailDataViewModel";
/* Components */
/* -------------------------------------------------------------------------- */
import Modal from "components/containers/modal/Modal";
-import Button from "components/controls/Button";
import InputField from "components/controls/InputField";
/* -------------------------------------------------------------------------- */
/* Icons */
/* -------------------------------------------------------------------------- */
-import { ReactComponent as SVGCircleProgressIcon } from "assets/svg/circle-progress.svg";
import { useTranslation } from "react-i18next";
/* -------------------------------------------------------------------------- */
/* Component */
@@ -60,7 +58,6 @@ export default function EmailEditor({ isShown, onClose: extOnClose }: Props) {
return (
diff --git a/src/user/views/PasswordConfirmation.tsx b/src/user/views/PasswordConfirmation.tsx
index 9985bbc..630e53b 100644
--- a/src/user/views/PasswordConfirmation.tsx
+++ b/src/user/views/PasswordConfirmation.tsx
@@ -3,7 +3,6 @@ import Modal from "components/containers/modal/Modal";
import { Formik } from "formik";
import { useTranslation } from "react-i18next";
import InputField from "components/controls/InputField";
-import Button from "components/controls/Button";
type Props = {
isShown: boolean;
@@ -28,7 +27,6 @@ export default function PasswordConfirmation({
return (
-
{t("dialogues.confirmAction.title")}
-
)}
diff --git a/src/user/views/PersonalInfomrationEditor.tsx b/src/user/views/PersonalInfomrationEditor.tsx
index c564a0d..edfdd71 100644
--- a/src/user/views/PersonalInfomrationEditor.tsx
+++ b/src/user/views/PersonalInfomrationEditor.tsx
@@ -1,10 +1,8 @@
import React from "react";
import Modal from "components/containers/modal/Modal";
-import Button from "components/controls/Button";
import InputField from "components/controls/InputField";
import { useUserStore } from "../data/userSlice";
-import { ReactComponent as SVGCircleProgressIcon } from "assets/svg/circle-progress.svg";
import classNames from "classnames";
import { useTranslation } from "react-i18next";
import { Formik } from "formik";
@@ -38,7 +36,6 @@ export default function PersonalInfomrationEditor({
return (
-
{t("account.info")}
-
-
+
)}
diff --git a/tailwind.config.js b/tailwind.config.js
index ce47318..f8b96c6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -67,7 +67,7 @@ module.exports = {
function ({ addComponents }) {
addComponents({
'.container': {
- maxWidth: '100%',
+ maxWidth: '840px',
paddingLeft: '0.5rem',
paddingRight: '0.5rem',
'@screen sm': {
@@ -77,13 +77,13 @@ module.exports = {
maxWidth: 'calc(100% - 30px)',
},
'@screen lg': {
- maxWidth: '960px',
+ maxWidth: '840px',
},
'@screen xl': {
- maxWidth: '1080px',
+ maxWidth: '840px',
},
'@screen 2xl': {
- maxWidth: '1080px',
+ maxWidth: '840px',
},
},
});
diff --git a/tsconfig.json b/tsconfig.json
index a9023e8..5d40442 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
"lib": [
"dom",
"dom.iterable",
- "esnext"
+ "esnext",
],
"allowJs": true,
"skipLibCheck": true,
@@ -19,9 +19,15 @@
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
- "baseUrl": "./src",
+ "baseUrl": "src",
},
"include": [
- "src",
+ "src/**/*",
+ ],
+ "files": ["./global.d.ts"],
+ "exclude": [
+ "storybook-static",
+ "src/**/*.stories.tsx",
+ "src/**/*.test.tsx"
]
}