diff --git a/apps/uikit/src/app/app.tsx b/apps/uikit/src/app/app.tsx index 0c591af..3d81318 100644 --- a/apps/uikit/src/app/app.tsx +++ b/apps/uikit/src/app/app.tsx @@ -4,10 +4,10 @@ import { ThemeProvider } from 'styled-components'; import { AppWrapper, GlobalStyle } from '@react-monorepo/shared-ui'; import { Route, Routes } from 'react-router-dom'; import { Layout } from './components/Layout'; -import Styleguide from './pages/styleguide'; import ProdutCard from './pages/ProdutCard'; import LoginForm from './pages/LoginForm'; import NoMatch from './pages/NoMatch'; +import Styleguide from './pages/Styleguide'; function App(): React.ReactElement { return ( diff --git a/apps/uikit/src/app/components/Layout/index.tsx b/apps/uikit/src/app/components/Layout/index.tsx index fa19a95..04587f6 100644 --- a/apps/uikit/src/app/components/Layout/index.tsx +++ b/apps/uikit/src/app/components/Layout/index.tsx @@ -8,7 +8,7 @@ import { MainContent, } from '@react-monorepo/shared-ui'; -export const Layout = () => { +export const Layout = (): React.ReactNode => { return (
diff --git a/apps/uikit/src/app/components/Menu/index.tsx b/apps/uikit/src/app/components/Menu/index.tsx index 3931354..76a329b 100644 --- a/apps/uikit/src/app/components/Menu/index.tsx +++ b/apps/uikit/src/app/components/Menu/index.tsx @@ -1,19 +1,30 @@ import React from 'react'; -import { Link } from 'react-router-dom'; -import { NavBar } from '@react-monorepo/shared-ui'; +import * as Menubar from '@radix-ui/react-menubar'; +import { + MenubarRootWrapper, + MenubarTriggerWrapper, + MenuLinkWrapper, +} from '@react-monorepo/shared-ui'; + +interface MenuProps { + to: string; + children: React.ReactNode; +} + +const MenuItem = ({ to, children }: MenuProps) => ( + + + {children} + + +); export const Menu = (): React.ReactNode => { return ( - -
  • - Style guide -
    • -
  • - Login Form -
    • -
  • - Produt Card -
    • -     + + Style Guide + Login Form + Product Card + ); }; diff --git a/apps/uikit/src/app/pages/Styleguide.tsx b/apps/uikit/src/app/pages/Styleguide.tsx index 208a75d..05f263f 100644 --- a/apps/uikit/src/app/pages/Styleguide.tsx +++ b/apps/uikit/src/app/pages/Styleguide.tsx @@ -1,7 +1,28 @@ import React from 'react'; +import { BoxElement } from '@react-monorepo/shared-ui'; const Styleguide = (): React.ReactNode => { - return
    styleguide
    ; + return ( + +
    + + + + +
    +     + ); }; export default Styleguide; diff --git a/package-lock.json b/package-lock.json index a4d690f..e9ef65b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,6 +32,7 @@ "@nx/workspace": "19.8.2", "@playwright/test": "^1.36.0", "@radix-ui/react-avatar": "^1.1.0", + "@radix-ui/react-menubar": "^1.1.1", "@radix-ui/react-popover": "^1.1.1", "@radix-ui/themes": "^3.1.4", "@storybook/addon-essentials": "^8.2.8", @@ -92,6 +93,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz", "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==", + "dev": true, "license": "Apache-2.0", "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", @@ -118,6 +120,7 @@ "version": "7.25.4", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.4.tgz", "integrity": "sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -127,6 +130,7 @@ "version": "7.25.2", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz", "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==", + "dev": true, "license": "MIT", "dependencies": { "@ampproject/remapping": "^2.2.0", @@ -198,6 +202,7 @@ "version": "7.25.2", "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz", "integrity": "sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/compat-data": "^7.25.2", @@ -298,6 +303,7 @@ "version": "7.25.2", "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz", "integrity": "sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-module-imports": "^7.24.7", @@ -374,6 +380,7 @@ "version": "7.24.7", "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz", "integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/traverse": "^7.24.7", @@ -419,6 +426,7 @@ "version": "7.24.8", "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz", "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -443,6 +451,7 @@ "version": "7.25.6", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.6.tgz", "integrity": "sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==", + "dev": true, "license": "MIT", "dependencies": { "@babel/template": "^7.25.0", @@ -6226,6 +6235,39 @@ } } }, + "node_modules/@radix-ui/react-menubar": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.1.tgz", + "integrity": "sha512-V05Hryq/BE2m+rs8d5eLfrS0jmSWSDHEbG7jEyLA5D5J9jTvWj/o3v3xDN9YsOlH6QIkJgiaNDaP+S4T1rdykw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-menu": "2.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-roving-focus": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-navigation-menu": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.0.tgz", @@ -12345,6 +12387,7 @@ "version": "4.24.0", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.0.tgz", "integrity": "sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==", + "dev": true, "funding": [ { "type": "opencollective", @@ -12634,6 +12677,7 @@ "version": "1.0.30001664", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001664.tgz", "integrity": "sha512-AmE7k4dXiNKQipgn7a2xg558IRqPN3jMQY/rOsbxDhrd0tyChwbITBfiwtnqz8bi2M5mIWbxAYBvk7W7QBUS2g==", + "dev": true, "funding": [ { "type": "opencollective", @@ -13093,6 +13137,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true, "license": "MIT" }, "node_modules/cookie": { @@ -14466,6 +14511,7 @@ "version": "1.5.29", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.29.tgz", "integrity": "sha512-PF8n2AlIhCKXQ+gTpiJi0VhcHDb69kYX4MtCiivctc2QD3XuNZ/XIOlbGzt7WAjjEev0TtaH6Cu3arZExm5DOw==", + "dev": true, "license": "ISC" }, "node_modules/emittery": { @@ -14838,6 +14884,7 @@ "version": "3.2.0", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", + "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -16883,6 +16930,7 @@ "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -19259,24 +19307,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/jest-circus/node_modules/babel-plugin-macros": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", - "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@babel/runtime": "^7.12.5", - "cosmiconfig": "^7.0.0", - "resolve": "^1.19.0" - }, - "engines": { - "node": ">=10", - "npm": ">=6" - } - }, "node_modules/jest-circus/node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -19294,25 +19324,6 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, - "node_modules/jest-circus/node_modules/cosmiconfig": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", - "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@types/parse-json": "^4.0.0", - "import-fresh": "^3.2.1", - "parse-json": "^5.0.0", - "path-type": "^4.0.0", - "yaml": "^1.10.0" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/jest-circus/node_modules/dedent": { "version": "1.5.3", "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.3.tgz", @@ -21573,6 +21584,7 @@ "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true, "license": "MIT", "bin": { "json5": "lib/cli.js" @@ -22264,6 +22276,7 @@ "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "dev": true, "license": "ISC", "dependencies": { "yallist": "^3.0.2" @@ -22775,6 +22788,7 @@ "version": "2.0.18", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==", + "dev": true, "license": "MIT" }, "node_modules/node-schedule": { @@ -26004,6 +26018,7 @@ "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "dev": true, "license": "ISC", "bin": { "semver": "bin/semver.js" @@ -28510,6 +28525,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz", "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==", + "dev": true, "funding": [ { "type": "opencollective", @@ -30462,6 +30478,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", + "dev": true, "license": "ISC" }, "node_modules/yaml": { diff --git a/package.json b/package.json index dee70f3..0b47187 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@nx/workspace": "19.8.2", "@playwright/test": "^1.36.0", "@radix-ui/react-avatar": "^1.1.0", + "@radix-ui/react-menubar": "^1.1.1", "@radix-ui/react-popover": "^1.1.1", "@radix-ui/themes": "^3.1.4", "@storybook/addon-essentials": "^8.2.8", diff --git a/shared-ui/src/lib/styles/index.ts b/shared-ui/src/lib/styles/index.ts index f08b219..adc09eb 100644 --- a/shared-ui/src/lib/styles/index.ts +++ b/shared-ui/src/lib/styles/index.ts @@ -1,6 +1,8 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; +import { Link } from 'react-router-dom'; +import * as Menubar from '@radix-ui/react-menubar'; +import { Box, Button } from '@radix-ui/themes'; import { theme } from './theme'; -import { Button } from '@radix-ui/themes'; export const AppWrapper = styled.div` display: block; @@ -55,11 +57,61 @@ export const MainWrapper = styled.main` padding: 0.5rem 1rem; background-color: #ffffff; color: #000000; - height: 100%; - width: 100%; border: 1px solid #333; `; +export const MenubarRootWrapper = styled(Menubar.Root)` + display: flex; + background-color: white; + padding: 4px; + border-radius: 6px; +`; + +export const MenubarTriggerWrapper = styled(Menubar.Trigger)` + all: unset; + padding: 8px 12px; + outline: none; + user-select: none; + font-weight: 500; + line-height: 1; + border-radius: 4px; + color: ${({ theme }) => theme.colors.primary}; + font-size: 14px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 2px; + + &:hover { + background-color: ${({ theme }) => theme.colors.yellow}; + } +`; + +export const MenuLinkWrapper = styled(Link)` + color: inherit; + text-decoration: none; +`; + +export const BoxElement = styled(Box)<{ $isBig?: boolean }>` + background-color: ${theme.colors.white}; + color: ${theme.colors.black}; + border-radius: ${theme.spacing.xs}; + padding: ${theme.spacing.md}; + min-height: 100px; + min-width: 100px; + box-sizing: 'border-box'; + ${(props) => + props.$isBig && + css` + min-height: 500px; + min-width: 400px; + background: transparent; + padding: ${theme.spacing.md}; + color: ${theme.colors.primary}; + box-shadow: ${theme.shadows.medium}; + `} +`; + export const FooterWrapper = styled.footer` display: flex; justify-content: center; @@ -89,7 +141,6 @@ export const Card = styled.div` border-radius: ${({ theme }) => theme.card.borderRadius}; box-shadow: ${({ theme }) => theme.card.boxShadow}; padding: ${({ theme }) => theme.card.padding}; - &:hover { box-shadow: ${({ theme }) => theme.card.hover.boxShadow}; }