Skip to content

Commit d95a0cf

Browse files
OleksiiLavrovOleksiiLavrov
committed
Initial structure commit. Sidebar is ready
1 parent 2b32b5d commit d95a0cf

24 files changed

+696
-130
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
22

3+
/.storybook
4+
35
# dependencies
46
/node_modules
57
/.pnp
68
.pnp.js
9+
.env
710

811
# testing
912
/coverage

‎package.json

+27
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,21 @@
1010
"@types/node": "^16.7.13",
1111
"@types/react": "^18.0.0",
1212
"@types/react-dom": "^18.0.0",
13+
"@types/react-router": "^5.1.20",
14+
"@types/react-router-dom": "^5.3.3",
15+
"apexcharts": "^3.37.3",
16+
"autoprefixer": "^10.4.14",
17+
"axios": "^1.3.5",
18+
"dotenv": "^16.0.3",
19+
"moment": "^2.29.4",
20+
"postcss": "^8.4.21",
1321
"react": "^18.2.0",
22+
"react-apexcharts": "^1.4.0",
1423
"react-dom": "^18.2.0",
24+
"react-router": "^6.10.0",
25+
"react-router-dom": "^6.10.0",
1526
"react-scripts": "5.0.1",
27+
"tailwindcss": "^3.3.1",
1628
"typescript": "^4.4.2",
1729
"web-vitals": "^2.1.0"
1830
},
@@ -26,6 +38,16 @@
2638
"extends": [
2739
"react-app",
2840
"react-app/jest"
41+
],
42+
"overrides": [
43+
{
44+
"files": [
45+
"**/*.stories.*"
46+
],
47+
"rules": {
48+
"import/no-anonymous-default-export": "off"
49+
}
50+
}
2951
]
3052
},
3153
"browserslist": {
@@ -39,5 +61,10 @@
3961
"last 1 firefox version",
4062
"last 1 safari version"
4163
]
64+
},
65+
"devDependencies": {
66+
"babel-plugin-named-exports-order": "^0.0.2",
67+
"prop-types": "^15.8.1",
68+
"webpack": "^5.78.0"
4269
}
4370
}

‎postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎src/App.css

-38
This file was deleted.

‎src/App.test.tsx

-9
This file was deleted.

‎src/App.tsx

+11-23
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,14 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
4-
5-
function App() {
1+
import { Outlet } from "react-router-dom";
2+
import { Sidebar } from "./modules/sidebar";
3+
export const App: React.FC = () => {
64
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.tsx</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
5+
<div className="overflow-x-hidden">
6+
<div className="h-full w-24 fixed top-0 left-0 group/menu peer/menu bg-gray-800 duration-300 hover:w-60">
7+
<Sidebar />
8+
</div>
9+
<div className="translate-x-24 pl-10 pr-60 peer-hover/menu:translate-x-60 duration-300">
10+
<Outlet />
11+
</div>
2212
</div>
2313
);
24-
}
25-
26-
export default App;
14+
};

‎src/Example.tsx

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import axios from "axios";
2+
import moment from "moment";
3+
import React, { useEffect, useState } from "react";
4+
import $api from "./http/api";
5+
6+
type ClientInfo = {
7+
accounts: Array<AccountInfo>;
8+
clientId: string;
9+
jars: JarInfo[];
10+
name: string;
11+
permissions: string;
12+
webHookUrl: string;
13+
};
14+
15+
type AccountInfo = {
16+
balance: number;
17+
cashbackType: string;
18+
creditLimit: number;
19+
currencyCode: number;
20+
iban: string;
21+
id: string;
22+
maskedPan: string[];
23+
sendId: string;
24+
type: string;
25+
};
26+
27+
type JarInfo = {
28+
balance: number;
29+
currencyCode: number;
30+
description: string;
31+
id: string;
32+
sendId: string;
33+
title: string;
34+
};
35+
36+
export const Example: React.FC = () => {
37+
const [transactions, setTransactions] = useState<any[]>();
38+
39+
useEffect(() => {
40+
fetchData();
41+
}, []);
42+
43+
const fetchData = async () => {
44+
if (localStorage.getItem("transactions")) {
45+
const transactions = JSON.parse(
46+
localStorage.getItem("transactions") || "{}"
47+
);
48+
console.log(transactions);
49+
50+
setTransactions(transactions);
51+
} else {
52+
const clientInfo: ClientInfo = (await $api.get("/client-info")).data;
53+
const transactions = (
54+
await $api.get(
55+
`/statement/${clientInfo.accounts[0].id}/1678442447/1681120847`
56+
)
57+
).data;
58+
console.log(transactions);
59+
60+
setTransactions(transactions);
61+
localStorage.setItem("transactions", JSON.stringify(transactions));
62+
}
63+
};
64+
65+
return (
66+
<div>
67+
{transactions &&
68+
transactions.map((item: any, index: number) => {
69+
const time = moment.unix(item.time).format("LLL");
70+
return (
71+
<p key={time + index}>
72+
{time} - {item.description}
73+
</p>
74+
);
75+
})}
76+
</div>
77+
);
78+
};

‎src/assets/icons/IconSvgSelector.tsx

+124
Large diffs are not rendered by default.

‎src/http/api.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import axios from "axios";
2+
3+
export const API_URL = process.env.REACT_APP_API_URL;
4+
5+
const token = process.env.REACT_APP_API_TOKEN;
6+
7+
const $api = axios.create({
8+
baseURL: API_URL,
9+
});
10+
11+
$api.interceptors.request.use((config) => {
12+
config.headers["X-Token"] = token;
13+
return config;
14+
});
15+
16+
export default $api;

‎src/index.css

+3-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
body {
2-
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5-
sans-serif;
6-
-webkit-font-smoothing: antialiased;
7-
-moz-osx-font-smoothing: grayscale;
8-
}
9-
10-
code {
11-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12-
monospace;
13-
}
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎src/index.tsx

+6-16
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,9 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
3-
import './index.css';
4-
import App from './App';
5-
import reportWebVitals from './reportWebVitals';
1+
import "./index.css";
2+
import ReactDOM from "react-dom/client";
3+
import { RouterProvider } from "react-router";
4+
import { router } from "./router/Root";
65

76
const root = ReactDOM.createRoot(
8-
document.getElementById('root') as HTMLElement
7+
document.getElementById("root") as HTMLElement
98
);
10-
root.render(
11-
<React.StrictMode>
12-
<App />
13-
</React.StrictMode>
14-
);
15-
16-
// If you want to start measuring performance in your app, pass a function
17-
// to log results (for example: reportWebVitals(console.log))
18-
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
19-
reportWebVitals();
9+
root.render(<RouterProvider router={router} />);

‎src/logo.svg

-1
This file was deleted.

‎src/modules/sidebar/components/SidebarItem/SidebarItem.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import "./index.css";
2+
import { useState } from "react";
3+
import { NavLink } from "react-router-dom";
4+
import { IconSvgSelector } from "../../../../assets/icons/IconSvgSelector";
5+
6+
export const SidebarItem = (props: { item: string }) => {
7+
// const [isActive, setIsActive] = useState<boolean>(false);
8+
return (
9+
<li>
10+
<NavLink
11+
to={`/${props.item.toLowerCase()}`}
12+
className="menu-item group/menuItem"
13+
>
14+
<div className="relative">
15+
<IconSvgSelector
16+
icon={`menu-${props.item.toLowerCase()}`}
17+
classname="h-7 w-7 transition-all duration-300 hover:duration-300
18+
group-hover/menuItem:fill-yellow-400"
19+
/>
20+
<span
21+
className="absolute top-1/2 left-12 -translate-y-1/2 opacity-0 duration-300
22+
group-hover/menuItem:text-yellow-400 group-hover/menu:opacity-100"
23+
>
24+
{props.item}
25+
</span>
26+
</div>
27+
</NavLink>
28+
</li>
29+
);
30+
};

‎src/modules/sidebar/components/SidebarItem/index.css

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.menu-item.active {
2+
position: relative;
3+
}
4+
.menu-item.active::after {
5+
position: absolute;
6+
content: "";
7+
top: 50%;
8+
z-index: 2;
9+
right: 0;
10+
width: 7px;
11+
height: 100%;
12+
border-radius: 4px 0 0 4px;
13+
transform: translateY(-50%);
14+
background-color: #facc15;
15+
}
16+
17+
.menu-item svg {
18+
fill: rgb(156 163 175);
19+
}
20+
21+
.menu-item span {
22+
color: rgb(156 163 175);
23+
}
24+
25+
.menu-item.active svg {
26+
fill: #facc15;
27+
}
28+
29+
.menu-item.active span {
30+
color: #facc15;
31+
}

‎src/modules/sidebar/consts/menuItems.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export const menuItems: string[] = [
2+
"Dashboard",
3+
"Transactions",
4+
"Wallet",
5+
"Analytics",
6+
"Personal",
7+
"Settings",
8+
];

0 commit comments

Comments
 (0)