diff --git a/.gitignore b/.gitignore index a840804..03cff09 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,6 @@ node_modules package-lock.json yarn-error.log -yarn.lock \ No newline at end of file +yarn.lock +.next +pages/normalize.css \ No newline at end of file diff --git a/src/components/PieCircle.tsx b/components/PieCircle.tsx similarity index 100% rename from src/components/PieCircle.tsx rename to components/PieCircle.tsx diff --git a/src/components/index.ts b/components/index.ts similarity index 100% rename from src/components/index.ts rename to components/index.ts diff --git a/index.html b/index.html deleted file mode 100644 index 00a0889..0000000 --- a/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - SpendIA - - - -
- - - - \ No newline at end of file diff --git a/src/constants.ts b/lib/constants.ts similarity index 71% rename from src/constants.ts rename to lib/constants.ts index 032b107..3f4b38f 100644 --- a/src/constants.ts +++ b/lib/constants.ts @@ -1,2 +1,3 @@ export const SPEND_SCREEN_ID = 'spend-screen'; export const SPEND_SCREEN_NAME = 'Spend'; +export const APP_NAME = 'SpendIA'; diff --git a/src/types.d.ts b/lib/types.d.ts similarity index 100% rename from src/types.d.ts rename to lib/types.d.ts diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..8aa4cdf --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,6 @@ +/* eslint-disable @typescript-eslint/triple-slash-reference */ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/package.json b/package.json index a33a2af..fa342a0 100644 --- a/package.json +++ b/package.json @@ -3,20 +3,28 @@ "private": true, "version": "0.0.0", "type": "module", - "scripts": { + "scripts.backup": { "dev": "vite", "build": "tsc && vite build", - "preview": "vite preview", + "preview": "vite preview" + }, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint", "husky-prepare": "husky install" }, "dependencies": { "chart.js": "^4.2.1", + "next": "^13.2.4", "react": "^18.2.0", "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", "styled-components": "^5.3.9" }, "devDependencies": { + "@types/node": "18.15.11", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@types/styled-components": "^5.1.26", @@ -44,5 +52,8 @@ "stylelint-processor-styled-components": "^1.10.0", "typescript": "*", "vite": "^4.2.0" + }, + "resolutions": { + "styled-components": "^5" } } diff --git a/pages/_app.js b/pages/_app.js new file mode 100644 index 0000000..1de3156 --- /dev/null +++ b/pages/_app.js @@ -0,0 +1,7 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; +import './index.css'; + +export default function MyApp({ Component, pageProps }) { + return ; +} diff --git a/src/index.css b/pages/index.css similarity index 100% rename from src/index.css rename to pages/index.css diff --git a/src/App.tsx b/pages/index.tsx similarity index 50% rename from src/App.tsx rename to pages/index.tsx index 999ba37..556c522 100644 --- a/src/App.tsx +++ b/pages/index.tsx @@ -1,7 +1,20 @@ import React, { useState } from 'react'; -import { Header, SpendScreen } from './screens'; -import { type Tab } from './types'; -import { SPEND_SCREEN_ID, SPEND_SCREEN_NAME } from './constants'; +import { Header, SpendScreen } from '@/screens'; +import { type Tab } from '@/lib/types'; +import { APP_NAME, SPEND_SCREEN_ID, SPEND_SCREEN_NAME } from '@/lib/constants'; + +import Head from 'next/head'; + +const HeadIndex = (): JSX.Element => { + return ( + <> + + {APP_NAME} + + + + ); +}; const appRender = ({ tab }: { tab: Tab }): JSX.Element => { switch (tab.id) { @@ -16,10 +29,11 @@ function App(): JSX.Element { const [tab, setTab] = useState({ id: SPEND_SCREEN_ID, title: SPEND_SCREEN_NAME }); return ( -
+ <> +
{appRender({ tab })} -
+ ); } diff --git a/src/screens/Header/Header.tsx b/screens/Header/Header.tsx similarity index 89% rename from src/screens/Header/Header.tsx rename to screens/Header/Header.tsx index 53a4570..b98fc08 100644 --- a/src/screens/Header/Header.tsx +++ b/screens/Header/Header.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { tabs } from './data'; -import { type Tab } from '../../types'; +import { type Tab } from '@/lib/types'; import styled from 'styled-components'; export const Header = ({ @@ -35,7 +35,7 @@ const TabsContainer = styled.div` const StyledTab = styled.div<{ active: boolean; }>` - background: ${({ active }) => (active ? '#443C68' : 'inherit')}; + background: ${({ active }) => (active ? '#443C68' : '#635985')}; padding: 12px 0px; text-align: center; transition: 0.2s ease-in-out all; diff --git a/src/screens/Header/data.ts b/screens/Header/data.ts similarity index 61% rename from src/screens/Header/data.ts rename to screens/Header/data.ts index 8c31935..b992c3a 100644 --- a/src/screens/Header/data.ts +++ b/screens/Header/data.ts @@ -1,5 +1,5 @@ -import { SPEND_SCREEN_ID, SPEND_SCREEN_NAME } from '../../constants'; -import { type Tab } from '../../types'; +import { SPEND_SCREEN_ID, SPEND_SCREEN_NAME } from '../../lib/constants'; +import { type Tab } from '../../lib/types'; export const tabs: Tab[] = [ { diff --git a/src/screens/Header/index.ts b/screens/Header/index.ts similarity index 100% rename from src/screens/Header/index.ts rename to screens/Header/index.ts diff --git a/src/screens/SpendScreen/SpendScreen.tsx b/screens/SpendScreen/SpendScreen.tsx similarity index 73% rename from src/screens/SpendScreen/SpendScreen.tsx rename to screens/SpendScreen/SpendScreen.tsx index 4152b6c..d6307d3 100644 --- a/src/screens/SpendScreen/SpendScreen.tsx +++ b/screens/SpendScreen/SpendScreen.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { PieCircle } from '../../components'; +import { PieCircle } from '@/components'; export const SpendScreen = (): JSX.Element => { return ( diff --git a/src/screens/SpendScreen/index.ts b/screens/SpendScreen/index.ts similarity index 100% rename from src/screens/SpendScreen/index.ts rename to screens/SpendScreen/index.ts diff --git a/src/screens/index.ts b/screens/index.ts similarity index 100% rename from src/screens/index.ts rename to screens/index.ts diff --git a/src/main.tsx b/src/main.tsx deleted file mode 100644 index 5549107..0000000 --- a/src/main.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import App from './App'; -import './index.css'; - -ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - - - , -); diff --git a/src/normalize.css b/src/normalize.css deleted file mode 100644 index 2768db4..0000000 --- a/src/normalize.css +++ /dev/null @@ -1,351 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { - /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { - /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type='button']::-moz-focus-inner, -[type='reset']::-moz-focus-inner, -[type='submit']::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type='button']:-moz-focusring, -[type='reset']:-moz-focusring, -[type='submit']:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type='checkbox'], -[type='radio'] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type='number']::-webkit-inner-spin-button, -[type='number']::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type='search'] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type='search']::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts deleted file mode 100644 index e578524..0000000 --- a/src/vite-env.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/triple-slash-reference -/// diff --git a/tsconfig.json b/tsconfig.json index 7c506b2..436bb83 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,7 +5,7 @@ "lib": ["DOM", "DOM.Iterable", "ESNext"], "allowJs": false, "skipLibCheck": true, - "esModuleInterop": false, + "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, @@ -14,8 +14,18 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react-jsx" + "jsx": "preserve", + "incremental": true, + "baseUrl": ".", + "paths": { + "@/*": ["*"] + } }, - "include": ["src", "vite.config.ts"], - "references": [{ "path": "./tsconfig.node.json" }] + "include": ["next-env.d.ts", "pages", "components", "screens", "lib/constants.ts", "lib/types.d.ts"], + "references": [ + { + "path": "./tsconfig.node.json" + } + ], + "exclude": ["node_modules"] }