Skip to content

Commit

Permalink
Merge pull request #13
Browse files Browse the repository at this point in the history
Feat/UI components pt#3
  • Loading branch information
Nelfimov authored May 22, 2024
2 parents e35bc65 + 8c65819 commit 2b0601c
Show file tree
Hide file tree
Showing 192 changed files with 4,062 additions and 543 deletions.
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:
'@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,
})

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

0 comments on commit 2b0601c

Please sign in to comment.