Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/UI components pt#3 #13

Merged
merged 34 commits into from
May 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
ed02a18
feat: input component
kirill-ivanovvv May 8, 2024
c81edcd
fix: visibility of themeprovider
Nelfimov May 9, 2024
79fa3bc
feat: input component done
kirill-ivanovvv May 9, 2024
383cf26
feat: switch component, need refactoring, some ui bugs
kirill-ivanovvv May 9, 2024
c533797
feat: use switch package
kirill-ivanovvv May 10, 2024
f78f101
fix: yarn check
kirill-ivanovvv May 10, 2024
356bcfc
fix: dropdown delete
kirill-ivanovvv May 10, 2024
4129d6e
fix: clean components
kirill-ivanovvv May 10, 2024
a06e704
feat: connect inter font 400 width from google fonts
kirill-ivanovvv May 13, 2024
24969e0
feat: rewrite input with dark mode
kirill-ivanovvv May 13, 2024
cbe40c2
feat: simple switch component without icons
kirill-ivanovvv May 13, 2024
3e2299a
fix: input background colors renamed
kirill-ivanovvv May 13, 2024
6eebcc4
feat: devide switch component by 3 different domponents: base, icon a…
kirill-ivanovvv May 13, 2024
92b95e0
feat: icon switch sizes style and colors
kirill-ivanovvv May 13, 2024
da05e48
feat: add test icon for switch-icon developenet
kirill-ivanovvv May 14, 2024
7b89c4f
chore: draft for component help
kirill-ivanovvv May 14, 2024
09cc70d
feat: icon switch done
kirill-ivanovvv May 14, 2024
c83f29f
feat: theme switch component done
kirill-ivanovvv May 15, 2024
40e81ec
feat: create dropdown with errors on typecheck
kirill-ivanovvv May 15, 2024
8bbe65a
feat: open modal on click
kirill-ivanovvv May 15, 2024
666be28
feat: styles for modal
kirill-ivanovvv May 15, 2024
dff1667
feat: close modal on click
kirill-ivanovvv May 15, 2024
12a418d
fix: add stopPropagation to child container in modal; fix modal layout
kirill-ivanovvv May 15, 2024
e841347
feat: basic dropdown functionality
kirill-ivanovvv May 15, 2024
8953890
feat: style dropdown button
kirill-ivanovvv May 16, 2024
507f1d6
fix: yarn checks
kirill-ivanovvv May 16, 2024
aa5b9c5
fix: types/react version fix
kirill-ivanovvv May 16, 2024
aff3707
refactor: draft review feedback fixes
kirill-ivanovvv May 17, 2024
9bc06d1
fix: package extention fix
kirill-ivanovvv May 19, 2024
5659cb9
refactor: review fixes
kirill-ivanovvv May 20, 2024
a4539ea
refactor: review fixes
kirill-ivanovvv May 20, 2024
99de0de
feat: add icons for theme switch component
kirill-ivanovvv May 20, 2024
4f41714
refactor: theme spaces refactor mostly
kirill-ivanovvv May 21, 2024
8c65819
refactor: spaces; move default css properties to component styles
kirill-ivanovvv May 21, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,017 changes: 1,762 additions & 255 deletions .pnp.cjs

Large diffs are not rendered by default.

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
8 changes: 8 additions & 0 deletions .yarnrc.yml
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
packageExtensions:
Nelfimov marked this conversation as resolved.
Show resolved Hide resolved
'@atls-ui-parts/input@*':
dependencies:
'@types/react': '*'
'@atls-ui-parts/switch@*':
dependencies:
'@types/react': '*'

compressionLevel: mixed

defaultSemverRangePrefix: ''
Expand Down
42 changes: 21 additions & 21 deletions app/entrypoints/renderer/package.json
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
{
"name": "@app/renderer-entrypoint",
"version": "0.0.1",
"license": "BSD-3-Clause",
"type": "module",
"scripts": {
"build": "yarn next build src --no-lint && rm ./src/.next/standalone/package.json ; cp -r ./src/.next/standalone ./dist && cp -r ./src/.next/static ./dist/src/.next/static && mv ./dist/src/server.js ./dist/src/index.cjs",
"dev": "yarn next dev src",
"prepack": "run build",
"start": "node dist/src/index.cjs"
},
"dependencies": {
"next": "14.1.0",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@types/node": "20.11.5",
"@types/react": "18.3.1",
"@types/react-dom": "18.3.0",
"typescript": "5.2.2"
}
"name": "@app/renderer-entrypoint",
"version": "0.0.1",
"license": "BSD-3-Clause",
"type": "module",
"scripts": {
"build": "yarn next build src --no-lint && rm ./src/.next/standalone/package.json ; cp -r ./src/.next/standalone ./dist && cp -r ./src/.next/static ./dist/src/.next/static && mv ./dist/src/server.js ./dist/src/index.cjs",
"dev": "yarn next dev src",
"prepack": "run build",
"start": "node dist/src/index.cjs"
},
"devDependencies": {
"@emotion/react": "11.11.4",
"@types/node": "20.12.12",
"@types/react": "18.3.2",
"@types/react-dom": "18.3.0",
"@ui/theme": "workspace:*",
"next": "14.1.0",
"react": "18.3.1",
"react-dom": "18.3.1",
"typescript": "5.2.2"
}
}
10 changes: 8 additions & 2 deletions app/entrypoints/renderer/src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@
import React from 'react'
'use client'

import React from 'react'

import { ThemeProvider } from '@ui/theme'

const RootLayout = ({ children }) => (
<html>
<body>{children}</body>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
)

Expand Down
4 changes: 3 additions & 1 deletion app/entrypoints/renderer/src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
'use client'

import React from 'react'

const Page = () => <h1>Team management</h1>
const Page = () => <>page</>

export default Page
5 changes: 2 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@
"@atls/config-jest": "0.0.18",
"@atls/prettier-plugin": "0.0.8",
"@jest/core": "29.7.0",
"@types/eslint": "^8",
"@types/eslint": "^8.56.10",
"@types/jest": "29.5.12",
"@types/node": "20.12.8",
"@types/react": "^18",
"@types/node": "20.12.12",
"eslint": "8.57.0",
"husky": "9.0.11",
"prettier": "3.1.1",
Expand Down
37 changes: 37 additions & 0 deletions ui/dropdown/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{
"name": "@ui/dropdown",
"version": "0.0.1",
"private": true,
"license": "BSD-3-Clause",
"main": "src/index.ts",
"dependencies": {
"@atls-ui-parts/layout": "0.1.1",
"@atls-ui-parts/select": "0.1.1",
"@atls-ui-parts/text": "0.1.3",
"@atls-ui-proto/button": "0.1.1"
},
"devDependencies": {
"@emotion/css": "11.11.2",
"@emotion/react": "11.11.4",
"@emotion/styled": "11.11.5",
"@types/react": "18.3.2",
"@types/react-dom": "18.3.0",
"@types/styled-system": "5.1.22",
"framer-motion": "10.16.1",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-laag": "2.0.5",
"styled-system": "5.1.5",
"styled-tools": "1.7.2"
},
"peerDependencies": {
"@emotion/css": "*",
"@emotion/react": "*",
"@emotion/styled": "*",
"framer-motion": "*",
"react": "*",
"react-dom": "*",
"styled-system": "*",
"styled-tools": "*"
}
}
46 changes: 46 additions & 0 deletions ui/dropdown/src/button/button.component.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import styled from '@emotion/styled'
import { Box } from '@atls-ui-parts/layout'
import { useTheme } from '@emotion/react'

import React from 'react'
import { FC } from 'react'
import { PropsWithChildren } from 'react'
import { useHover } from 'react-laag'

import { DropdownButtonProps } from './button.interfaces'
import { DropdownButtonContainerProps } from './button.interfaces'
import { DotTheme } from './button.interfaces'
import { DotComponent } from './dot'
import { baseButtonStyles } from './button.styles'
import { sizeButtonStyles } from './button.styles'
import { appearanceButtonStyles } from './button.styles'

const DropdownButtonContainer = styled(Box)<DropdownButtonContainerProps>(
baseButtonStyles,
sizeButtonStyles,
appearanceButtonStyles
)

export const DropdownButton: FC<PropsWithChildren<DropdownButtonProps>> = ({
triggerProps,
onClick,
isOpen,
children,
}) => {
const DEFAULT_COUNT = 3
const [hover, hoverProps] = useHover()
const theme: DotTheme = useTheme()

return (
<DropdownButtonContainer
{...triggerProps}
onClick={onClick}
pressed={isOpen}
hover={hover}
{...hoverProps}
>
<DotComponent count={theme.spaces?.normalCount || DEFAULT_COUNT} />
{children}
</DropdownButtonContainer>
)
}
22 changes: 22 additions & 0 deletions ui/dropdown/src/button/button.interfaces.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { BoxProps } from '@atls-ui-parts/layout'
import { Theme } from '@emotion/react'

import { TriggerProps } from 'react-laag'

export interface DropdownButtonProps extends BoxProps {
triggerProps: TriggerProps
onClick: VoidFunction
isOpen: boolean
}

export interface DropdownButtonContainerProps extends BoxProps {
pressed: boolean
hover: boolean
}

export interface DotTheme extends Theme {
// spaces: Record<string, string | number>
spaces?: {
normalCount: number
}
}
37 changes: 37 additions & 0 deletions ui/dropdown/src/button/button.styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { styleFn } from 'styled-system'
import { prop } from 'styled-tools'
import { ifProp } from 'styled-tools'

export const baseButtonStyles: styleFn = ({ theme }) => ({
cursor: 'pointer',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: theme.radii.f9,
gap: theme.spaces.semiTiny,
})

export const sizeButtonStyles: styleFn = ({ theme }) => ({
width: theme.spaces.increased,
height: theme.spaces.semiModerate,
})

const defaultAppearanceButtonStyles: styleFn = ({ theme }) => ({
backgroundColor: theme.colors.dropdown.button.default,
})

const hoveredAppearanceButtonStyles: styleFn = ({ theme }) => ({
backgroundColor: theme.colors.dropdown.button.hover,
boxShadow: theme.shadows.dropdownButton,
})

const pressedAppearanceButtonStyles: styleFn = ({ theme }) => ({
backgroundColor: theme.colors.dropdown.button.pressed,
boxShadow: theme.shadows.dropdownButton,
})

export const appearanceButtonStyles = ifProp(
prop('pressed', false),
pressedAppearanceButtonStyles,
ifProp(prop('hover', false), hoveredAppearanceButtonStyles, defaultAppearanceButtonStyles)
)
14 changes: 14 additions & 0 deletions ui/dropdown/src/button/dot/dot.component.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import styled from '@emotion/styled'
import { Box } from '@atls-ui-parts/layout'
import { BoxProps } from '@atls-ui-parts/layout'

import React from 'react'
import { FC } from 'react'

import { DotProps } from './dot.iterfaces'
import { sizeDotStyles } from './dot.styles'
import { appearanceDotStyles } from './dot.styles'

const Dot = styled(Box)<BoxProps>(sizeDotStyles, appearanceDotStyles)

export const DotComponent: FC<DotProps> = ({ count }) => Array(count).fill(<Dot />)
3 changes: 3 additions & 0 deletions ui/dropdown/src/button/dot/dot.iterfaces.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export interface DotProps {
count: number
}
10 changes: 10 additions & 0 deletions ui/dropdown/src/button/dot/dot.styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { styleFn } from 'styled-system'

export const appearanceDotStyles: styleFn = ({ theme }) => ({
backgroundColor: theme.colors.dropdown.dot.background,
})

export const sizeDotStyles: styleFn = ({ theme }) => ({
width: theme.spaces.semiTiny,
height: theme.spaces.semiTiny,
})
1 change: 1 addition & 0 deletions ui/dropdown/src/button/dot/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './dot.component'
1 change: 1 addition & 0 deletions ui/dropdown/src/button/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './button.component'
34 changes: 34 additions & 0 deletions ui/dropdown/src/child-container/child-container.component.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import styled from '@emotion/styled'
import { Box } from '@atls-ui-parts/layout'
import { BoxProps } from '@atls-ui-parts/layout'

import React from 'react'
import { FC } from 'react'
import { PropsWithChildren } from 'react'
import { MouseEventHandler } from 'react'

import { ChildContainerProps } from './child-container.interfaces'
import { baseChildContainerStyles } from './child-container.styles'
import { shapeChildContainerStyles } from './child-container.styles'
import { appearanceChildContainerStyles } from './child-container.styles'

const StyledBox = styled(Box)<BoxProps>(
baseChildContainerStyles,
shapeChildContainerStyles,
appearanceChildContainerStyles
)

export const ChildContainer: FC<PropsWithChildren<ChildContainerProps>> = ({
layerProps,
children,
}) => {
const childrenContainerHandler: MouseEventHandler<HTMLDivElement> = (e) => {
e.stopPropagation()
}

return (
<StyledBox {...layerProps} onClick={childrenContainerHandler}>
{children}
</StyledBox>
)
}
5 changes: 5 additions & 0 deletions ui/dropdown/src/child-container/child-container.interfaces.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { LayerProps } from 'react-laag'

export interface ChildContainerProps {
layerProps: LayerProps
}
17 changes: 17 additions & 0 deletions ui/dropdown/src/child-container/child-container.styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { styleFn } from 'styled-system'

export const baseChildContainerStyles: styleFn = ({ theme }) => ({
display: 'flex',
flexDirection: 'column',
boxSizing: 'border-box',
padding: theme.spaces.tiny,
})

export const shapeChildContainerStyles: styleFn = ({ theme }) => ({
borderRadius: theme.radii.f9,
})

export const appearanceChildContainerStyles: styleFn = ({ theme }) => ({
backgroundColor: theme.colors.dropdown.childContainer,
boxShadow: theme.shadows.asphalt,
})
1 change: 1 addition & 0 deletions ui/dropdown/src/child-container/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './child-container.component'
38 changes: 38 additions & 0 deletions ui/dropdown/src/dropdown.component.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { Box } from '@atls-ui-parts/layout'

import React from 'react'
import { FC } from 'react'
import { PropsWithChildren } from 'react'
import { useState } from 'react'
import { useLayer } from 'react-laag'

import { DropdownButton } from './button/button.component'
import { ChildContainer } from './child-container'
import { DropdownProps } from './dropdown.interface'

export const Dropdown: FC<PropsWithChildren<DropdownProps>> = ({ children }) => {
const [isOpen, setOpen] = useState(false)

const buttonClickHandler = () => setOpen(!isOpen)
const buttonCloseClickHandler = () => setOpen(false)

const { renderLayer, triggerProps, layerProps } = useLayer({
isOpen,
onOutsideClick: buttonCloseClickHandler,
onDisappear: buttonCloseClickHandler,
placement: 'bottom-start',
overflowContainer: false,
auto: true,
triggerOffset: 12,
containerOffset: 16,
arrowOffset: 16,
Nelfimov marked this conversation as resolved.
Show resolved Hide resolved
})

return (
<DropdownButton triggerProps={triggerProps} isOpen={isOpen} onClick={buttonClickHandler}>
{renderLayer(
<Box>{isOpen && <ChildContainer layerProps={layerProps}>{children}</ChildContainer>}</Box>
)}
</DropdownButton>
)
}
1 change: 1 addition & 0 deletions ui/dropdown/src/dropdown.interface.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export interface DropdownProps {}
Empty file.
1 change: 1 addition & 0 deletions ui/dropdown/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './dropdown.component'
6 changes: 6 additions & 0 deletions ui/icons/icons.interfaces.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { SVGProps } from 'react'

export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'color' | 'stroke'> {
color?: string | boolean | any
stroke?: string | boolean | any
}
3 changes: 3 additions & 0 deletions ui/icons/icons/Dark Theme.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ui/icons/icons/Light Theme.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading