Skip to content

Commit 2eda71b

Browse files
fomalhautbfomalhautb
authored
Fixed UI bugs, added card component (stack-auth#7)
* updated default divider to shadcn * added card to signin page * removed card content, card header, and card footer * removed card from signin * Update size of text in DividerWithText component * added changeset
1 parent 693b058 commit 2eda71b

File tree

21 files changed

+177
-60
lines changed

21 files changed

+177
-60
lines changed

‎.changeset/rotten-poets-drum.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@stackframe/stack": patch
3+
---
4+
5+
Fixed UI bugs

‎apps/dev/src/app/ui/page-client.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export default function PageClient() {
7777
<Text size='xl'>{text}</Text>
7878
</div>
7979

80-
<Divider direction='vertical' />
80+
<Divider orientation='vertical' />
8181

8282
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 5 }}>
8383
<Text color="primary">{text}</Text>

‎package.json‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,21 +30,25 @@
3030
"@typescript-eslint/eslint-plugin": "^6.x",
3131
"@typescript-eslint/parser": "^6.x",
3232
"eslint": "8.30.0",
33+
"eslint-config-next": "^14",
3334
"eslint-config-standard-with-typescript": "^43",
3435
"eslint-plugin-import": "^2.25.4",
3536
"eslint-plugin-node": "^11.1.0",
3637
"eslint-plugin-promise": "^6.0.0",
3738
"eslint-plugin-react": "^7.31.11",
38-
"eslint-config-next": "^14",
39+
"rimraf": "^5.0.5",
3940
"turbo": "^1.11.3",
40-
"typescript": "5.3.3",
41-
"rimraf": "^5.0.5"
41+
"typescript": "5.3.3"
4242
},
4343
"engines": {
4444
"node": "^20.8.0"
4545
},
4646
"packageManager": "pnpm@8.9.2",
4747
"pnpm": {
4848
"overrides": {}
49+
},
50+
"dependencies": {
51+
"@radix-ui/react-separator": "^1.0.3",
52+
"@stackframe/stack": "workspace:^"
4953
}
5054
}

‎packages/stack/src/components-core-joy/card.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use client';
2+
3+
import { CardProps } from "../components-core";
4+
import { Card as JoyCard, CardContent as JoyCardContent } from '@mui/joy';
5+
6+
export function Card(props : CardProps) {
7+
const { color, size, ref, ...validProps } = props;
8+
return <JoyCard {...validProps}>
9+
<JoyCardContent>
10+
{props.children}
11+
</JoyCardContent>
12+
</JoyCard>;
13+
}

‎packages/stack/src/components-core-joy/divider.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ import { DividerProps } from "../components-core";
44
import { Divider as JoyDivider } from '@mui/joy';
55

66
export default function Divider(props : DividerProps) {
7-
const { direction, ref, ...validProps } = props;
8-
return <JoyDivider {...validProps} orientation={direction} />;
7+
const { orientation, ref, ...validProps } = props;
8+
return <JoyDivider {...validProps} orientation={orientation} />;
99
}

‎packages/stack/src/components-core/card.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
'use client';
2+
3+
import * as React from "react";
4+
import { useDesign } from "../providers/design-provider";
5+
import styled from 'styled-components';
6+
7+
const StyledCard = styled.div<{
8+
backgroundColor: string,
9+
borderColor: string,
10+
}>`
11+
border-radius: 0.75rem;
12+
border: 1px solid ${props => props.borderColor};
13+
background-color: ${props => props.backgroundColor};
14+
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
15+
padding: 1.5rem;
16+
`;
17+
18+
export type CardProps = React.HTMLProps<HTMLDivElement>;
19+
20+
const Card = React.forwardRef<HTMLDivElement, CardProps>(
21+
(props, ref) => {
22+
const { colors, colorMode } = useDesign();
23+
return <StyledCard
24+
ref={ref}
25+
{...props}
26+
backgroundColor={colors.backgroundColor}
27+
borderColor={colors.neutralColor}
28+
/>;
29+
}
30+
);
31+
Card.displayName = "Card";
32+
33+
export default Card;

‎packages/stack/src/components-core/divider.tsx‎

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,40 @@
11
'use client';
22

3-
import React from "react";
4-
import { useDesign } from "../providers/design-provider";
3+
import React from 'react';
4+
import * as SeparatorPrimitive from '@radix-ui/react-separator';
5+
import styled from 'styled-components';
6+
import { useDesign } from '..';
57

6-
export type DividerProps = { direction?: 'horizontal' | 'vertical'} & React.HTMLProps<HTMLHRElement>;
8+
export type DividerProps = React.ComponentProps<typeof SeparatorPrimitive.Root>;
79

8-
const Divider = React.forwardRef<HTMLHRElement, DividerProps>(
9-
({ direction='horizontal' }, ref) => {
10-
const { colors } = useDesign();
11-
return <hr
12-
ref={ref}
13-
style={{
14-
width: direction === 'horizontal' ? undefined : '1px',
15-
height: direction === 'horizontal' ? '1px' : undefined,
16-
border: 'none',
17-
backgroundColor: colors.neutralColor,
18-
margin: 0,
19-
padding: 0,
20-
}} />;
21-
}
22-
);
23-
Divider.displayName = 'Divider';
10+
const StyledDivider = styled(SeparatorPrimitive.Root)<{
11+
$orientation: string,
12+
$color: string,
13+
}>`
14+
flex-shrink: 0;
15+
background-color: ${props => props.$color};
16+
17+
${(props) =>
18+
props.$orientation === 'horizontal'
19+
? 'height: 1px; width: 100%;'
20+
: 'height: 100%; width: 1px;'}
21+
`;
2422

25-
export default Divider;
23+
const Divider = React.forwardRef<
24+
React.ElementRef<typeof SeparatorPrimitive.Root>,
25+
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
26+
>(({ orientation = 'horizontal', decorative = true, ...props }, ref) => {
27+
const { colors } = useDesign();
28+
29+
return <StyledDivider
30+
ref={ref}
31+
decorative={decorative}
32+
$orientation={orientation}
33+
$color={colors.neutralColor}
34+
{...props}
35+
/>;
36+
});
37+
38+
Divider.displayName = 'Separator';
39+
40+
export default Divider;

‎packages/stack/src/components-core/index.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { InputProps } from './input';
99
import { LabelProps } from './label';
1010
import { LinkProps } from './link';
1111
import { TextProps } from './text';
12+
import { CardProps } from './card';
1213

1314
export {
1415
ButtonProps,
@@ -18,6 +19,7 @@ export {
1819
LabelProps,
1920
LinkProps,
2021
TextProps,
22+
CardProps,
2123
};
2224

2325
export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
@@ -53,4 +55,9 @@ export function Link(props: LinkProps) { // TODO: maybe add forwardRef
5355
export const Text = forwardRef<HTMLParagraphElement, TextProps>((props, ref) => {
5456
const { Text } = useComponents();
5557
return <Text {...props} ref={ref} />;
58+
});
59+
60+
export const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
61+
const { Card } = useComponents();
62+
return <Card {...props} ref={ref} />;
5663
});

‎packages/stack/src/components-core/label.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import * as React from "react";
3+
import React from "react";
44
import * as LabelPrimitive from "@radix-ui/react-label";
55
import styled from 'styled-components';
66
import { FONT_FAMILY, FONT_SIZES, SECONDARY_FONT_COLORS } from "../utils/constants";

‎packages/stack/src/components-page/forgot-password.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import ForgotPasswordElement from "../components/forgot-password";
44
import CardFrame from "../components/card-frame";
5-
import CardHeader from "../components/card-header";
65
import { useUser, useStackApp } from "..";
76
import RedirectMessageCard from "../components/redirect-message-card";
87
import { useState } from "react";
@@ -24,14 +23,15 @@ export default function ForgotPassword({ fullPage=false }: { fullPage?: boolean
2423

2524
return (
2625
<CardFrame fullPage={fullPage}>
27-
<CardHeader title="Reset Your Password">
26+
<div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>
27+
<Text size="xl" as='h2'>Reset Your Password</Text>
2828
<Text>
2929
{"Don't need to reset? "}
3030
<Link href={stackApp.urls['signUp']}>
3131
Sign In
3232
</Link>
3333
</Text>
34-
</CardHeader>
34+
</div>
3535
<ForgotPasswordElement onSent={() => setSent(true)} />
3636
</CardFrame>
3737
);

0 commit comments

Comments
 (0)