From f5f8550263d2a68a7d18b82782f98c4c94988ed8 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Sun, 2 Apr 2023 17:15:49 -0300 Subject: [PATCH] =?UTF-8?q?Initial=20commit=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.cjs | 20 ++ .gitignore | 5 + .lintstagedrc | 3 + .prettierignore | 2 + .prettierrc.json | 6 + .stylelintrc.json | 13 ++ .vscode/settings.json | 4 + index.html | 16 ++ package.json | 46 +++++ src/App.tsx | 14 ++ src/index.css | 28 +++ src/main.tsx | 10 + src/normalize.css | 351 ++++++++++++++++++++++++++++++++++ src/screens/Header/Header.tsx | 52 +++++ src/screens/Header/data.ts | 16 ++ src/screens/Header/index.ts | 1 + src/screens/Header/types.d.ts | 4 + src/screens/index.ts | 1 + src/vite-env.d.ts | 2 + tsconfig.eslint.json | 4 + tsconfig.json | 21 ++ tsconfig.node.json | 9 + vite.config.ts | 7 + 23 files changed, 635 insertions(+) create mode 100644 .eslintrc.cjs create mode 100644 .gitignore create mode 100644 .lintstagedrc create mode 100644 .prettierignore create mode 100644 .prettierrc.json create mode 100644 .stylelintrc.json create mode 100644 .vscode/settings.json create mode 100644 index.html create mode 100644 package.json create mode 100644 src/App.tsx create mode 100644 src/index.css create mode 100644 src/main.tsx create mode 100644 src/normalize.css create mode 100644 src/screens/Header/Header.tsx create mode 100644 src/screens/Header/data.ts create mode 100644 src/screens/Header/index.ts create mode 100644 src/screens/Header/types.d.ts create mode 100644 src/screens/index.ts create mode 100644 src/vite-env.d.ts create mode 100644 tsconfig.eslint.json create mode 100644 tsconfig.json create mode 100644 tsconfig.node.json create mode 100644 vite.config.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..bef0c22 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,20 @@ +module.exports = { + env: { + browser: true, + es2021: true, + }, + extends: ['plugin:react/recommended', 'standard-with-typescript', 'prettier'], + overrides: [], + parserOptions: { + ecmaVersion: 'latest', + project: './tsconfig.json', + sourceType: 'module', + }, + plugins: ['react', 'prettier', 'sort-keys-fix', 'better-styled-components'], + rules: { + '@typescript-eslint/strict-boolean-expressions': 'off', + 'better-styled-components/sort-declarations-alphabetically': 2, + 'prettier/prettier': 'error', + 'sort-keys-fix/sort-keys-fix': 'error', + }, +}; diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a840804 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +.husky +node_modules +package-lock.json +yarn-error.log +yarn.lock \ No newline at end of file diff --git a/.lintstagedrc b/.lintstagedrc new file mode 100644 index 0000000..b6e5efd --- /dev/null +++ b/.lintstagedrc @@ -0,0 +1,3 @@ +{ + "**/*.{js,jsx,ts,tsx}": ["eslint"] +} diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..227b71f --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +build +coverage \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..69f6c8d --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,6 @@ +{ + "printWidth": 100, + "tabWidth": 2, + "singleQuote": true, + "trailingComma": "all" +} diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..04ec307 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,13 @@ +{ + "processors": ["stylelint-processor-styled-components"], + "extends": ["stylelint-config-recommended", "stylelint-config-styled-components"], + "plugins": ["stylelint-order"], + "rules": { + "font-family-no-missing-generic-family-keyword": null, + "number-leading-zero": "always", + "order/properties-alphabetical-order": true, + "rule-empty-line-before": null, + "string-quotes": "single", + "no-descending-specificity": null + } +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..1b6457c --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..00a0889 --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + + + SpendIA + + + +
+ + + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..3a02113 --- /dev/null +++ b/package.json @@ -0,0 +1,46 @@ +{ + "name": "spendia", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview", + "husky-prepare": "husky install" + }, + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0", + "styled-components": "^5.3.9" + }, + "devDependencies": { + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "@types/styled-components": "^5.1.26", + "@typescript-eslint/eslint-plugin": "^5.43.0", + "@vitejs/plugin-react": "^3.1.0", + "eslint": "^8.0.1", + "eslint-config-prettier": "^8.8.0", + "eslint-config-standard-with-typescript": "^34.0.1", + "eslint-plugin-better-styled-components": "^1.1.2", + "eslint-plugin-import": "^2.25.2", + "eslint-plugin-n": "^15.0.0", + "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-promise": "^6.0.0", + "eslint-plugin-react": "^7.32.2", + "eslint-plugin-sort-keys-fix": "^1.1.2", + "husky": "^8.0.3", + "lint-staged": "^13.2.0", + "prettier": "^2.8.7", + "stylelint": "^15.3.0", + "stylelint-config-recommended": "^11.0.0", + "stylelint-config-standard": "^31.0.0", + "stylelint-config-styled-components": "^0.1.1", + "stylelint-order": "^6.0.3", + "stylelint-prettier": "^3.0.0", + "stylelint-processor-styled-components": "^1.10.0", + "typescript": "*", + "vite": "^4.2.0" + } +} diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..5ef54b7 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,14 @@ +import React, { useState } from 'react'; +import { Header } from './screens'; + +function App(): JSX.Element { + const [tab, setTab] = useState({}); + + return ( +
+
+
+ ); +} + +export default App; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..ffa936e --- /dev/null +++ b/src/index.css @@ -0,0 +1,28 @@ +/* stylelint-disable property-no-vendor-prefix */ +@import 'normalize.css'; + +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-synthesis: none; + font-weight: 400; + line-height: 1.5; + text-rendering: optimizeLegibility; + -webkit-text-size-adjust: 100%; +} + +a { + color: #646cff; + font-weight: 500; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +* { + /** wtf vite */ + margin: 0; + padding: 0; +} diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..5549107 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +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 new file mode 100644 index 0000000..2768db4 --- /dev/null +++ b/src/normalize.css @@ -0,0 +1,351 @@ +/*! 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/screens/Header/Header.tsx b/src/screens/Header/Header.tsx new file mode 100644 index 0000000..a6b1898 --- /dev/null +++ b/src/screens/Header/Header.tsx @@ -0,0 +1,52 @@ +import React, { useEffect } from 'react'; +import { tabs } from './data'; +import { type Tab } from './types'; +import styled from 'styled-components'; + +export const Header = ({ + tab, + setTab, +}: { + tab: Tab | Record; + setTab: React.Dispatch>; +}): JSX.Element => { + useEffect(() => { + setTab(tabs[0]); + }, []); + + return ( + + {tabs.map((tabData) => ( + { + setTab(tabData); + }} + > +

{tabData.title}

+ + ))} + + ); +}; + +const TabsContainer = styled.div` + background: #635985; + display: flex; +`; + +const StyledTab = styled.div<{ + active: boolean; +}>` + background: ${({ active }) => (active ? '#443C68' : 'inherit')}; + padding: 12px 0px; + text-align: center; + transition: 0.2s ease-in-out all; + user-select: none; + width: 100%; + :hover { + filter: ${({ active }) => !active && 'brightness(90%)'}; + transition: 0.2s ease-in-out all; + } +`; diff --git a/src/screens/Header/data.ts b/src/screens/Header/data.ts new file mode 100644 index 0000000..925d155 --- /dev/null +++ b/src/screens/Header/data.ts @@ -0,0 +1,16 @@ +import { type Tab } from './types'; + +export const tabs: Tab[] = [ + { + id: 'tab-1', + title: 'Tab 1', + }, + { + id: 'tab-2', + title: 'Tab 2', + }, + { + id: 'tab-3', + title: 'Tab 3', + }, +]; diff --git a/src/screens/Header/index.ts b/src/screens/Header/index.ts new file mode 100644 index 0000000..266dec8 --- /dev/null +++ b/src/screens/Header/index.ts @@ -0,0 +1 @@ +export * from './Header'; diff --git a/src/screens/Header/types.d.ts b/src/screens/Header/types.d.ts new file mode 100644 index 0000000..742f6b1 --- /dev/null +++ b/src/screens/Header/types.d.ts @@ -0,0 +1,4 @@ +export interface Tab { + title: string; + id: string; +} diff --git a/src/screens/index.ts b/src/screens/index.ts new file mode 100644 index 0000000..266dec8 --- /dev/null +++ b/src/screens/index.ts @@ -0,0 +1 @@ +export * from './Header'; diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..e578524 --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,2 @@ +// eslint-disable-next-line @typescript-eslint/triple-slash-reference +/// diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json new file mode 100644 index 0000000..8292c9b --- /dev/null +++ b/tsconfig.eslint.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "include": ["vite.config.ts"] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..7c506b2 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["src", "vite.config.ts"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..9d31e2a --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..627a319 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +});