From f9be50dea48b109b2b549516e4e3f3b9438268c2 Mon Sep 17 00:00:00 2001 From: deminearchiver Date: Sat, 23 Nov 2024 15:44:01 +0300 Subject: [PATCH] Finished glossary --- .editorconfig | 3 + apps/frontend/package.json | 3 + .../accordion/accordion.module.sass | 31 +- .../src/components/glossary/budget.mdx | 1 + .../src/components/glossary/economy.mdx | 9 + .../src/components/glossary/finance-plan.mdx | 9 + .../components/glossary/glossary.module.sass | 5 +- .../src/components/glossary/glossary.tsx | 73 +- .../components/glossary/income-expenses.mdx | 6 + .../src/components/glossary/investments.mdx | 4 + .../src/components/glossary/loans.mdx | 9 + .../frontend/src/components/glossary/rate.mdx | 10 + apps/frontend/src/routes/__root.tsx | 26 +- apps/frontend/vite.config.ts | 10 +- yarn.lock | 1244 ++++++++++++++++- 15 files changed, 1382 insertions(+), 61 deletions(-) create mode 100644 apps/frontend/src/components/glossary/budget.mdx create mode 100644 apps/frontend/src/components/glossary/economy.mdx create mode 100644 apps/frontend/src/components/glossary/finance-plan.mdx create mode 100644 apps/frontend/src/components/glossary/income-expenses.mdx create mode 100644 apps/frontend/src/components/glossary/investments.mdx create mode 100644 apps/frontend/src/components/glossary/loans.mdx create mode 100644 apps/frontend/src/components/glossary/rate.mdx diff --git a/.editorconfig b/.editorconfig index 00e3862..d25400b 100644 --- a/.editorconfig +++ b/.editorconfig @@ -11,3 +11,6 @@ trim_trailing_whitespace = true [*.py] indent_style = space indent_size = 4 + +[*.{md,mdx}] +trim_trailing_whitespace = false diff --git a/apps/frontend/package.json b/apps/frontend/package.json index 36dd58c..0dad095 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -20,6 +20,7 @@ "@fontsource-variable/recursive": "^5.1.0", "@fontsource-variable/roboto-flex": "^5.1.0", "@fontsource/roboto": "^5.1.0", + "@mdx-js/react": "^3.1.0", "@star4/react": "^0.1.7", "@star4/vanilla-extract": "^0.0.14", "@tanstack/react-router": "^1.82.2", @@ -31,8 +32,10 @@ "react-dom": "^18.3.1" }, "devDependencies": { + "@mdx-js/rollup": "^3.1.0", "@tanstack/router-devtools": "^1.82.2", "@tanstack/router-plugin": "^1.81.9", + "@types/mdx": "^2.0.13", "@types/node": "^22.9.3", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", diff --git a/apps/frontend/src/components/accordion/accordion.module.sass b/apps/frontend/src/components/accordion/accordion.module.sass index 5bfe182..a51c59c 100644 --- a/apps/frontend/src/components/accordion/accordion.module.sass +++ b/apps/frontend/src/components/accordion/accordion.module.sass @@ -11,14 +11,19 @@ position: relative border-radius: star4.shape(extra-small) - background-color: star4.color(surface-container-highest) + background-color: star4.color(secondary-container) + // background-color: star4.color(surface-container-highest) overflow: hidden + transition-property: border-radius + transition-duration: star4.duration(long2) + transition-timing-function: star4.easing(emphasized) + &__header outline: none border: none - background-color: star4.color(surface-container-highest) + // background-color: star4.color(surface-container-highest) cursor: pointer position: relative @@ -30,9 +35,17 @@ transition-property: padding-block transition-duration: star4.duration(long2) transition-timing-function: star4.easing(emphasized) + + color: star4.color(on-secondary-container) + --star4-component-ripple-hover-color: #{star4.color(on-secondary-container)} + --star4-component-ripple-pressed-color: #{star4.color(on-secondary-container)} &__headline @include star4.typescale(title, medium) - color: star4.color(on-surface) + font-family: var(--star4-typeface-brand) + transition-property: font-family, font-size, font-weight, line-height, letter-spacing + transition-duration: star4.duration(long2) + transition-timing-function: star4.easing(emphasized) + &__icon position: relative display: flex @@ -50,8 +63,9 @@ display: grid grid-template-rows: 0fr overflow: hidden + opacity: 0 - transition-property: grid-template-rows + transition-property: grid-template-rows, opacity transition-duration: star4.duration(long2) transition-timing-function: star4.easing(emphasized) &__content @@ -68,10 +82,17 @@ border-bottom-left-radius: star4.shape(medium) border-bottom-right-radius: star4.shape(medium) &--expanded + border-radius: star4.shape(extra-large) + background-color: star4.color(surface-container-highest) & .accordion__item__header padding-block: 24px - // background-color: star4.color(secondary-container) + color: star4.color(on-surface) + --star4-component-ripple-hover-color: #{star4.color(on-surface)} + --star4-component-ripple-pressed-color: #{star4.color(on-surface)} + & .accordion__item__headline + @include star4.typescale(title, large) & .accordion__item__icon transform: rotate(180deg) & .accordion__item__content-wrapper grid-template-rows: 1fr + opacity: 1 diff --git a/apps/frontend/src/components/glossary/budget.mdx b/apps/frontend/src/components/glossary/budget.mdx new file mode 100644 index 0000000..f4ba6f3 --- /dev/null +++ b/apps/frontend/src/components/glossary/budget.mdx @@ -0,0 +1 @@ +Бюджет — это план или расчёт того, сколько денег получают и как планируют их тратить. Он помогает контролировать финансы и позволяет принимать информированные решения о том, как использовать ресурсы. diff --git a/apps/frontend/src/components/glossary/economy.mdx b/apps/frontend/src/components/glossary/economy.mdx new file mode 100644 index 0000000..7f4f668 --- /dev/null +++ b/apps/frontend/src/components/glossary/economy.mdx @@ -0,0 +1,9 @@ +Экономия — это бережливое отношение к расходованию денежных средств, +при котором главный принцип — добиться наилучшего результата при наименьших затратах и приложенных усилий.\ +\ +Некоторые аспекты экономии денег: +- Понимание, куда уходят деньги, учёт и контроль. +- Подробное изучение расходов поможет понять, где можно сэкономить. +- Поиск способов экономии на покупках и платежах без ущерба качеству. Например, покупки оптом или заказы с длительной доставкой, но низким ценником. +- Выбор схемы планирования бюджета и строгое следование ей. +- Важно помнить, что экономия — это процесс, требующий времени и усилий. diff --git a/apps/frontend/src/components/glossary/finance-plan.mdx b/apps/frontend/src/components/glossary/finance-plan.mdx new file mode 100644 index 0000000..030331e --- /dev/null +++ b/apps/frontend/src/components/glossary/finance-plan.mdx @@ -0,0 +1,9 @@ +Финансовый план — это стратегия управления личными финансами, +где прописаны анализ доходов и расходов, +суммы накоплений, конечная цель и сроки достижения. + +Личный финансовый план помогает: +- разобраться с финансами; +- управлять расходами; +- регулярно откладывать и копить деньги; +- ставить конкретные финансовые цели. diff --git a/apps/frontend/src/components/glossary/glossary.module.sass b/apps/frontend/src/components/glossary/glossary.module.sass index 83f06d9..074d647 100644 --- a/apps/frontend/src/components/glossary/glossary.module.sass +++ b/apps/frontend/src/components/glossary/glossary.module.sass @@ -145,11 +145,14 @@ $shade-color: star4.color(surface-container) border-radius: star4.shape(small) border: 1px solid star4.color(outline) &__action + position: sticky + bottom: 0 display: flex aling-items: center justify-content: center padding-inline: 16px - padding-block: 8px + padding-block: 16px + background-color: star4.color(surface-container) @include star4.layout(compact, medium) padding-inline: 16px diff --git a/apps/frontend/src/components/glossary/glossary.tsx b/apps/frontend/src/components/glossary/glossary.tsx index 4cbcefe..598cf83 100644 --- a/apps/frontend/src/components/glossary/glossary.tsx +++ b/apps/frontend/src/components/glossary/glossary.tsx @@ -8,6 +8,14 @@ import { Card } from "../card"; import { THEME } from "~/theme"; import { Accordion } from "../accordion"; +import Budget from "./budget.mdx"; +import FinancePlan from "./finance-plan.mdx"; +import Economy from "./economy.mdx"; +import IncomeExpenses from "./income-expenses.mdx"; +import Investments from "./investments.mdx"; +import Loans from "./loans.mdx"; +import Rate from "./rate.mdx"; + export namespace Glossary { export type Props = {} } @@ -44,11 +52,15 @@ const GlossaryComponent = function Glossary( ); return ( <> - setIsOpen(prev => !prev)} + {/* setIsOpen(true)} + variant="filledTonal" + icon={} /> */} +