Skip to content

Commit d627e34

Browse files
shiftpshshiftpsh
committed
feat: NavBar, Footer, Container
1 parent e34e74e commit d627e34

File tree

10 files changed

+356
-49
lines changed

10 files changed

+356
-49
lines changed

‎example/src/stories/Card.stories.tsx‎

Lines changed: 30 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -41,47 +41,39 @@ const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />
4141

4242
export const Default = Template.bind({})
4343
Default.args = {
44-
children: (
45-
<>
46-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
47-
vulputate arcu, nec semper est. Vestibulum ante ipsum primis in faucibus
48-
orci luctus et ultrices posuere cubilia curae; Suspendisse vel purus et
49-
metus laoreet efficitur in ut elit. Duis ultrices enim dapibus purus
50-
imperdiet molestie. Nam pretium odio metus, tempus vehicula neque sodales
51-
quis. Suspendisse vehicula, libero ac viverra consectetur, ante lectus
52-
malesuada ex, ut porta nunc justo quis neque. Aenean tristique nulla quis
53-
eros faucibus, sit amet lacinia nibh interdum. Quisque aliquet leo ut erat
54-
ultrices posuere. Duis mauris nulla, posuere sed dapibus eget, ultricies
55-
id dui. Phasellus vel augue a urna fermentum vehicula. Quisque sed elit
56-
non nibh ullamcorper lacinia. Orci varius natoque penatibus et magnis dis
57-
parturient montes, nascetur ridiculus mus. Duis nibh ligula, scelerisque
58-
porta rutrum ac, tempus vitae ipsum. Morbi ut ante a felis fringilla
59-
aliquam bibendum nec felis. Donec vel nunc congue, rhoncus mauris quis,
60-
malesuada nisi.
61-
</>
62-
),
44+
children: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
45+
vulputate arcu, nec semper est. Vestibulum ante ipsum primis in faucibus
46+
orci luctus et ultrices posuere cubilia curae; Suspendisse vel purus et
47+
metus laoreet efficitur in ut elit. Duis ultrices enim dapibus purus
48+
imperdiet molestie. Nam pretium odio metus, tempus vehicula neque sodales
49+
quis. Suspendisse vehicula, libero ac viverra consectetur, ante lectus
50+
malesuada ex, ut porta nunc justo quis neque. Aenean tristique nulla quis
51+
eros faucibus, sit amet lacinia nibh interdum. Quisque aliquet leo ut erat
52+
ultrices posuere. Duis mauris nulla, posuere sed dapibus eget, ultricies
53+
id dui. Phasellus vel augue a urna fermentum vehicula. Quisque sed elit
54+
non nibh ullamcorper lacinia. Orci varius natoque penatibus et magnis dis
55+
parturient montes, nascetur ridiculus mus. Duis nibh ligula, scelerisque
56+
porta rutrum ac, tempus vitae ipsum. Morbi ut ante a felis fringilla
57+
aliquam bibendum nec felis. Donec vel nunc congue, rhoncus mauris quis,
58+
malesuada nisi.`,
6359
}
6460

6561
export const Clickable = Template.bind({})
6662
Clickable.args = {
6763
clickable: true,
68-
children: (
69-
<>
70-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
71-
vulputate arcu, nec semper est. Vestibulum ante ipsum primis in faucibus
72-
orci luctus et ultrices posuere cubilia curae; Suspendisse vel purus et
73-
metus laoreet efficitur in ut elit. Duis ultrices enim dapibus purus
74-
imperdiet molestie. Nam pretium odio metus, tempus vehicula neque sodales
75-
quis. Suspendisse vehicula, libero ac viverra consectetur, ante lectus
76-
malesuada ex, ut porta nunc justo quis neque. Aenean tristique nulla quis
77-
eros faucibus, sit amet lacinia nibh interdum. Quisque aliquet leo ut erat
78-
ultrices posuere. Duis mauris nulla, posuere sed dapibus eget, ultricies
79-
id dui. Phasellus vel augue a urna fermentum vehicula. Quisque sed elit
80-
non nibh ullamcorper lacinia. Orci varius natoque penatibus et magnis dis
81-
parturient montes, nascetur ridiculus mus. Duis nibh ligula, scelerisque
82-
porta rutrum ac, tempus vitae ipsum. Morbi ut ante a felis fringilla
83-
aliquam bibendum nec felis. Donec vel nunc congue, rhoncus mauris quis,
84-
malesuada nisi.
85-
</>
86-
),
64+
children: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
65+
vulputate arcu, nec semper est. Vestibulum ante ipsum primis in faucibus
66+
orci luctus et ultrices posuere cubilia curae; Suspendisse vel purus et
67+
metus laoreet efficitur in ut elit. Duis ultrices enim dapibus purus
68+
imperdiet molestie. Nam pretium odio metus, tempus vehicula neque sodales
69+
quis. Suspendisse vehicula, libero ac viverra consectetur, ante lectus
70+
malesuada ex, ut porta nunc justo quis neque. Aenean tristique nulla quis
71+
eros faucibus, sit amet lacinia nibh interdum. Quisque aliquet leo ut erat
72+
ultrices posuere. Duis mauris nulla, posuere sed dapibus eget, ultricies
73+
id dui. Phasellus vel augue a urna fermentum vehicula. Quisque sed elit
74+
non nibh ullamcorper lacinia. Orci varius natoque penatibus et magnis dis
75+
parturient montes, nascetur ridiculus mus. Duis nibh ligula, scelerisque
76+
porta rutrum ac, tempus vitae ipsum. Morbi ut ante a felis fringilla
77+
aliquam bibendum nec felis. Donec vel nunc congue, rhoncus mauris quis,
78+
malesuada nisi.`,
8779
}

‎example/src/stories/Container.stories.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Container } from '@solved-ac/ui-react'
2+
import { ComponentMeta, ComponentStory } from '@storybook/react'
3+
import React from 'react'
4+
5+
export default {
6+
title: 'Container',
7+
component: Container,
8+
argTypes: {
9+
children: {
10+
control: 'text',
11+
description: 'The text to display',
12+
},
13+
w: {
14+
control: 'text',
15+
description: 'The maximum width of the container',
16+
},
17+
padding: {
18+
control: { type: 'select', options: ['none', 'normal', 'wide'] },
19+
description: 'The padding of the container',
20+
},
21+
as: {
22+
control: { type: 'select', options: ['div', 'span', 'button', 'a'] },
23+
description: 'The element to render the container as',
24+
},
25+
},
26+
} as ComponentMeta<typeof Container>
27+
28+
const Template: ComponentStory<typeof Container> = (args) => (
29+
<Container {...args} />
30+
)
31+
32+
export const Default = Template.bind({})
33+
Default.args = {
34+
children: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
35+
vulputate arcu, nec semper est. Vestibulum ante ipsum primis in faucibus
36+
orci luctus et ultrices posuere cubilia curae; Suspendisse vel purus et
37+
metus laoreet efficitur in ut elit. Duis ultrices enim dapibus purus
38+
imperdiet molestie. Nam pretium odio metus, tempus vehicula neque sodales
39+
quis. Suspendisse vehicula, libero ac viverra consectetur, ante lectus
40+
malesuada ex, ut porta nunc justo quis neque. Aenean tristique nulla quis
41+
eros faucibus, sit amet lacinia nibh interdum. Quisque aliquet leo ut erat
42+
ultrices posuere. Duis mauris nulla, posuere sed dapibus eget, ultricies
43+
id dui. Phasellus vel augue a urna fermentum vehicula. Quisque sed elit
44+
non nibh ullamcorper lacinia. Orci varius natoque penatibus et magnis dis
45+
parturient montes, nascetur ridiculus mus. Duis nibh ligula, scelerisque
46+
porta rutrum ac, tempus vitae ipsum. Morbi ut ante a felis fringilla
47+
aliquam bibendum nec felis. Donec vel nunc congue, rhoncus mauris quis,
48+
malesuada nisi.`,
49+
}

‎example/src/stories/Footer.stories.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { Container, Footer } from '@solved-ac/ui-react'
2+
import { ComponentMeta, ComponentStory } from '@storybook/react'
3+
import React from 'react'
4+
5+
export default {
6+
title: 'Footer',
7+
component: Footer,
8+
argTypes: {
9+
children: {
10+
control: 'none',
11+
description: 'Children to display',
12+
},
13+
backgroundColor: {
14+
control: { type: 'color' },
15+
description: 'The background color of the footer',
16+
},
17+
as: {
18+
control: { type: 'select', options: ['div', 'span', 'button', 'a'] },
19+
description: 'The element to render the footer as',
20+
},
21+
},
22+
} as ComponentMeta<typeof Footer>
23+
24+
const Template: ComponentStory<typeof Footer> = (args) => <Footer {...args} />
25+
26+
export const Default = Template.bind({})
27+
Default.args = {
28+
children: (
29+
<Container>
30+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
31+
vulputate arcu, nec semper est. Vestibulum ante ipsum primis in faucibus
32+
orci luctus et ultrices posuere cubilia curae; Suspendisse vel purus et
33+
metus laoreet efficitur in ut elit. Duis ultrices enim dapibus purus
34+
imperdiet molestie. Nam pretium odio metus, tempus vehicula neque sodales
35+
quis. Suspendisse vehicula, libero ac viverra consectetur, ante lectus
36+
malesuada ex, ut porta nunc justo quis neque. Aenean tristique nulla quis
37+
eros faucibus, sit amet lacinia nibh interdum. Quisque aliquet leo ut erat
38+
ultrices posuere. Duis mauris nulla, posuere sed dapibus eget, ultricies
39+
id dui. Phasellus vel augue a urna fermentum vehicula. Quisque sed elit
40+
non nibh ullamcorper lacinia. Orci varius natoque penatibus et magnis dis
41+
parturient montes, nascetur ridiculus mus. Duis nibh ligula, scelerisque
42+
porta rutrum ac, tempus vitae ipsum. Morbi ut ante a felis fringilla
43+
aliquam bibendum nec felis. Donec vel nunc congue, rhoncus mauris quis,
44+
malesuada nisi.
45+
</Container>
46+
),
47+
}

‎example/src/stories/NavBar.stories.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Centering, Container, NavBar } from '@solved-ac/ui-react'
2+
import { ComponentMeta, ComponentStory } from '@storybook/react'
3+
import React from 'react'
4+
5+
export default {
6+
title: 'NavBar',
7+
component: NavBar,
8+
argTypes: {
9+
children: {
10+
control: 'none',
11+
description: 'Children to display',
12+
},
13+
backgroundColor: {
14+
control: { type: 'color' },
15+
description: 'The background color of the navbar',
16+
},
17+
as: {
18+
control: { type: 'select', options: ['div', 'span', 'button', 'a'] },
19+
description: 'The element to render the container as',
20+
},
21+
},
22+
} as ComponentMeta<typeof NavBar>
23+
24+
const Template: ComponentStory<typeof NavBar> = (args) => <NavBar {...args} />
25+
26+
export const Default = Template.bind({})
27+
Default.args = {
28+
children: (
29+
<>
30+
<Container>
31+
<Centering style={{ height: '100%' }}>NavBar</Centering>
32+
</Container>
33+
</>
34+
),
35+
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@solved-ac/ui-react",
3-
"version": "0.0.1-alpha.30",
3+
"version": "0.0.1-alpha.31",
44
"description": "React component library used by solved.ac",
55
"author": "shiftpsh",
66
"license": "MIT",

‎src/components/Container.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React, { ElementType } from 'react'
2+
import styled from 'styled-components'
3+
import { PC, PP, PR } from '../types/PolymorphicElementProps'
4+
import { cssVariables } from '../utils/styles'
5+
6+
export const containerVariables = cssVariables(
7+
{
8+
width: '1200px',
9+
},
10+
'container'
11+
)
12+
13+
const { vars, v } = containerVariables
14+
15+
const paddingMap = {
16+
none: 'padding: 0;',
17+
normal: 'padding: 0 16px;',
18+
wide: 'padding: 0 32px;',
19+
}
20+
21+
interface ContainerContainerProps {
22+
padding: 'none' | 'normal' | 'wide'
23+
}
24+
25+
const ContainerContainer = styled.nav<ContainerContainerProps>`
26+
max-width: ${v.width};
27+
${({ padding }) => paddingMap[padding]}
28+
margin: 0 auto;
29+
`
30+
31+
export interface ContainerProps {
32+
w?: string | number
33+
padding?: 'none' | 'normal' | 'wide'
34+
}
35+
36+
export const Container: PC<'div', ContainerProps> = React.forwardRef(
37+
<T extends ElementType>(props: PP<T, ContainerProps>, ref?: PR<T>) => {
38+
const {
39+
w = '1200px',
40+
padding = 'normal',
41+
style,
42+
as = 'div',
43+
...rest
44+
} = props
45+
46+
return (
47+
<ContainerContainer
48+
ref={ref}
49+
as={as}
50+
padding={padding}
51+
style={{
52+
[vars.width]: typeof w === 'string' ? w : `${w}px`,
53+
...style,
54+
}}
55+
{...rest}
56+
/>
57+
)
58+
}
59+
)

‎src/components/Footer.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React, { ElementType } from 'react'
2+
import styled from 'styled-components'
3+
import { PC, PP, PR } from '../types/PolymorphicElementProps'
4+
import { cssVariables } from '../utils/styles'
5+
6+
export const footerVariables = cssVariables(
7+
{
8+
backgroundColor: (theme) => theme.color.background.footer,
9+
textColor: (theme) => theme.color.text.secondary.main,
10+
},
11+
'footer'
12+
)
13+
14+
const { vars, v } = footerVariables
15+
16+
const paddingMap = {
17+
none: 'padding: 0;',
18+
normal: 'padding: 16px 0;',
19+
wide: 'padding: 32px 0;',
20+
}
21+
22+
interface FooterContainerProps {
23+
padding: 'none' | 'normal' | 'wide'
24+
}
25+
26+
const FooterContainer = styled.nav<FooterContainerProps>`
27+
background: ${v.backgroundColor};
28+
color: ${v.textColor};
29+
${({ padding }) => paddingMap[padding]}
30+
font-size: small;
31+
`
32+
33+
export interface FooterProps {
34+
backgroundColor?: string
35+
padding?: 'none' | 'normal' | 'wide'
36+
}
37+
38+
export const Footer: PC<'footer', FooterProps> = React.forwardRef(
39+
<T extends ElementType>(props: PP<T, FooterProps>, ref?: PR<T>) => {
40+
const {
41+
backgroundColor,
42+
padding = 'normal',
43+
style,
44+
as = 'footer',
45+
...rest
46+
} = props
47+
48+
return (
49+
<FooterContainer
50+
ref={ref}
51+
as={as}
52+
padding={padding}
53+
style={{
54+
[vars.backgroundColor]: backgroundColor,
55+
// TODO:
56+
// [vars.textColor]:
57+
// backgroundColor && readableColor(backgroundColor, theme),
58+
...style,
59+
}}
60+
{...rest}
61+
/>
62+
)
63+
}
64+
)

‎src/components/NavBar.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React, { ElementType } from 'react'
2+
import styled, { useTheme } from 'styled-components'
3+
import { PC, PP, PR } from '../types/PolymorphicElementProps'
4+
import { readableColor } from '../utils/color'
5+
import { cssVariables } from '../utils/styles'
6+
7+
export const navBarVariables = cssVariables(
8+
{
9+
backgroundColor: (theme) => theme.color.background.page,
10+
textColor: (theme) => theme.color.text.primary.main,
11+
},
12+
'navBar'
13+
)
14+
15+
const { vars, v } = navBarVariables
16+
17+
const NavbarContainer = styled.header`
18+
width: 100%;
19+
height: 48px;
20+
background-color: ${v.backgroundColor};
21+
color: ${v.textColor};
22+
border-bottom: ${({ theme }) => theme.styles.border()};
23+
`
24+
25+
export interface NavBarProps {
26+
backgroundColor?: string
27+
}
28+
29+
export const NavBar: PC<'header', NavBarProps> = React.forwardRef(
30+
<T extends ElementType>(props: PP<T, NavBarProps>, ref?: PR<T>) => {
31+
const theme = useTheme()
32+
const { backgroundColor, style, as = 'header', ...rest } = props
33+
34+
return (
35+
<NavbarContainer
36+
ref={ref}
37+
as={as}
38+
style={{
39+
[vars.backgroundColor]: backgroundColor,
40+
[vars.textColor]:
41+
backgroundColor && readableColor(backgroundColor, theme),
42+
...style,
43+
}}
44+
{...rest}
45+
/>
46+
)
47+
}
48+
)

0 commit comments

Comments
 (0)