Skip to content

Commit

Permalink
fix: all core packages issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@HamzaAmar
HamzaAmar committed Sep 29, 2024
1 parent 85f11c6 commit 82a98e3
Show file tree
Hide file tree
Showing 25 changed files with 85 additions and 198 deletions.
2 changes: 1 addition & 1 deletion apps/docs/src/app/_components/footer/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const footer = () => {
<Paper background="b-3" as={Grid} p="6" gap="4" grid="repeat(4, minmax(1px, 1fr))" xs="1fr" lg="1fr 1fr">
<div>
<Logo width={100} />
<Text transform="first-letter-only" color="b" low>
<Text transform="capitalize-once" color="b" low>
Your comprehensive solution for modern web development. Reusable UI components, React hooks, icons, and
tools designed with accessibility and scalability in mind. Empower your web applications effortlessly
</Text>
Expand Down
6 changes: 3 additions & 3 deletions apps/stories/stories/IconButton.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export function ButtonCornerDefaults() {
<IconButton title="Hello world" icon={<ThumbUp />} color="p" />
</Flex>

<Flex gap="4" style={{ '--button-rad': '5px' } as CSSProperties}>
<Flex gap="4" style={{ '--bu-rad': '5px' } as CSSProperties}>
<Paper corner="0">
<IconButton title="Hello world" icon={<ThumbUp />} color="p" />
</Paper>
Expand All @@ -99,7 +99,7 @@ export function ButtonCornerDefaults() {
</Paper>
<IconButton title="Hello world" icon={<ThumbUp />} color="p" />
</Flex>
<Flex gap="4" style={{ '--button-rad': '10px' } as CSSProperties}>
<Flex gap="4" style={{ '--bu-rad': '10px' } as CSSProperties}>
<Paper corner="0">
<IconButton title="Hello world" icon={<ThumbUp />} color="p" />
</Paper>
Expand All @@ -115,7 +115,7 @@ export function ButtonCornerDefaults() {
<IconButton title="Hello world" icon={<ThumbUp />} color="p" />
</Flex>

<Flex gap="4" style={{ '--button-rad': '20px' } as CSSProperties}>
<Flex gap="4" style={{ '--bu-rad': '20px' } as CSSProperties}>
<Paper corner="0">
<IconButton title="Hello world" icon={<ThumbUp />} color="p" />
</Paper>
Expand Down
2 changes: 1 addition & 1 deletion apps/stories/stories/alert.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ export function AlertCornerDefaults() {
return (
<div className="Sf3">
<Heading>Alert Corner 20px corner</Heading>
<Flex direction="col" gap="4" style={{ '--alert-rad': '20px' } as CSSProperties}>
<Flex direction="col" gap="4" style={{ '--al-rad': '20px' } as CSSProperties}>
<AlertBase variant="solid" />
<AlertBase variant="soft" />
<AlertBase variant="outline" />
Expand Down
24 changes: 1 addition & 23 deletions apps/stories/stories/badge.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,33 +118,11 @@ export const BadgeNumericColor = () => {
<Badge type="numeric" number={15} max={15} color="p" />
<Badge type="numeric" number={15} max={15} color="se" />
<Badge type="numeric" number={15} max={15} color="b" />
<Badge type="numeric" number={15} max={15} color="i" />
</Flex>
)
}

export const BadgeHighContrastColor = () => {
return (
<div className="Sf3">
<Flex gap="4">
<Badge type="numeric" number={15} max={15} color="d" />
<Badge type="numeric" number={15} max={15} color="su" />
<Badge type="numeric" number={15} max={15} color="w" />
<Badge type="numeric" number={15} max={15} color="p" />
<Badge type="numeric" number={15} max={15} color="se" />
<Badge type="numeric" number={15} max={15} color="b" />
</Flex>
<Flex gap="4">
<Badge type="numeric" highContrast number={15} max={15} color="d" />
<Badge type="numeric" highContrast number={15} max={15} color="su" />
<Badge type="numeric" highContrast number={15} max={15} color="w" />
<Badge type="numeric" highContrast number={15} max={15} color="p" />
<Badge type="numeric" highContrast number={15} max={15} color="se" />
<Badge type="numeric" highContrast number={15} max={15} color="b" />
</Flex>
</div>
)
}

export const BadgeCorner = () => {
return (
<div className="Sf4">
Expand Down
122 changes: 12 additions & 110 deletions apps/stories/stories/blockquote.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,128 +169,30 @@ export const BlockquoteCustomStyle = () => {
export function ButtonCornerDefaults() {
return (
<div className="Sf3">
<Flex gap="4">
<Paper corner="0">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Paper corner="2">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Paper corner="3">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Paper corner="4">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Blockquote size="1">
<Paper corner="0">
<Blockquote>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Flex>

<Flex gap="4" style={{ '--blockquote-rad': '0' } as CSSProperties}>
<Paper corner="0">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Paper corner="2">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Paper corner="3">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Paper corner="4">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Blockquote size="1">
</Paper>
<Paper style={{ '--blockquote-rad': '0' } as CSSProperties}>
<Blockquote>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Flex>
<Flex gap="4" style={{ '--blockquote-rad': '10px' } as CSSProperties}>
<Paper corner="0">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Paper corner="2">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Paper corner="3">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Paper corner="4">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Blockquote size="1">
</Paper>
<Paper style={{ '--blockquote-rad': '10px' } as CSSProperties}>
<Blockquote>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Flex>

<Flex gap="4" style={{ '--blockquote-rad': '20px' } as CSSProperties}>
<Paper corner="0">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Paper corner="2">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Paper corner="3">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Paper corner="4">
<Blockquote size="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Paper>
<Blockquote size="1">
</Paper>
<Paper style={{ '--blockquote-rad': '20px' } as CSSProperties}>
<Blockquote>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
</Blockquote>
</Flex>
</Paper>
</div>
)
}
Expand Down
39 changes: 16 additions & 23 deletions apps/stories/stories/button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export function ButtonsColors() {
<Button color="se">Secondary</Button>
<Button color="b">bg</Button>
<Button color="p">Primary</Button>
<Button color="i">Info</Button>
</Flex>
)
}
Expand Down Expand Up @@ -111,19 +112,19 @@ export function ButtonsTransforms() {
</Button>
</Flex>
<h1>with Global Capitalize</h1>
<Flex gap="4" style={{ '--button-transform': 'capitalize' } as CSSProperties}>
<Flex gap="4" style={{ '--bu-transform': 'capitalize' } as CSSProperties}>
<Button color="su">Green</Button>
<Button color="w">Orange</Button>
<Button color="d">Red</Button>
</Flex>
<h1>with Global lowercase</h1>
<Flex gap="4" style={{ '--button-transform': 'lowercase' } as CSSProperties}>
<Flex gap="4" style={{ '--bu-transform': 'lowercase' } as CSSProperties}>
<Button color="su">Green</Button>
<Button color="w">Orange</Button>
<Button color="d">Red</Button>
</Flex>
<h1>with Global uppercase</h1>
<Flex gap="4" style={{ '--button-transform': 'uppercase' } as CSSProperties}>
<Flex gap="4" style={{ '--bu-transform': 'uppercase' } as CSSProperties}>
<Button color="su">Green</Button>
<Button color="w">Orange</Button>
<Button color="d">Red</Button>
Expand Down Expand Up @@ -212,7 +213,7 @@ export function ButtonsCorners() {
</Flex>
<h1>Specify the button Corner circle</h1>

<Flex gap="4" style={{ '--button-rad': '1000px' } as CSSProperties}>
<Flex gap="4" style={{ '--bu-rad': '1000px' } as CSSProperties}>
<Button color="su">Green</Button>
<Button color="w">Orange</Button>
<Button color="d">Red</Button>
Expand All @@ -223,7 +224,7 @@ export function ButtonsCorners() {

<h1>Specify the button Corner Medium</h1>

<Flex gap="4" style={{ '--button-rad': 'var(--rad-md)' } as CSSProperties}>
<Flex gap="4" style={{ '--bu-rad': 'var(--rad-md)' } as CSSProperties}>
<Button color="su">Green</Button>
<Button color="w">Orange</Button>
<Button color="d">Red</Button>
Expand Down Expand Up @@ -391,7 +392,7 @@ export function ButtonCornerDefaults() {
<Button color="su">Green</Button>
</Flex>

<Flex gap="4" style={{ '--button-rad': '5px' } as CSSProperties}>
<Flex gap="4" style={{ '--bu-rad': '5px' } as CSSProperties}>
<Paper corner="0">
<Button color="su">Green</Button>
</Paper>
Expand All @@ -406,23 +407,15 @@ export function ButtonCornerDefaults() {
</Paper>
<Button color="su">Green</Button>
</Flex>
<Flex gap="4" style={{ '--button-rad': '10px' } as CSSProperties}>
<Paper corner="0">
<Button color="su">Green</Button>
</Paper>
<Paper corner="2">
<Button color="su">Green</Button>
</Paper>
<Paper corner="3">
<Button color="su">Green</Button>
</Paper>
<Paper corner="4">
<Button color="su">Green</Button>
</Paper>
<Flex gap="4" style={{ '--bu-rad': '10px' } as CSSProperties}>
<Button color="su">Green</Button>
<Button color="su">Green</Button>
<Button color="su">Green</Button>
<Button color="su">Green</Button>
<Button color="su">Green</Button>
</Flex>

<Flex gap="4" style={{ '--button-rad': '20px' } as CSSProperties}>
<Flex gap="4" style={{ '--bu-rad': '50px' } as CSSProperties}>
<Paper corner="0">
<Button color="su">Green</Button>
</Paper>
Expand All @@ -444,11 +437,11 @@ export function ButtonCornerDefaults() {
export function ButtonTransformDefaults() {
return (
<div className="Sf3">
<Flex gap="4" style={{ '--button-transform': 'lowercase' } as CSSProperties}>
<Flex gap="4" style={{ '--bu-transform': 'lowercase' } as CSSProperties}>
<Button transform="uppercase" color="su">
green
</Button>
<Button transform="first-letter-only" color="su">
<Button transform="capitalize-once" color="su">
green
</Button>
<Button transform="lowercase" color="su">
Expand All @@ -463,7 +456,7 @@ export function ButtonTransformDefaults() {
export function ButtonSizeDefaults() {
return (
<div className="Sf3">
<Flex gap="4" style={{ '--button-size': '8px' } as CSSProperties}>
<Flex gap="4" style={{ '--bu-size': '8px' } as CSSProperties}>
<Button size="2" color="su">
green
</Button>
Expand Down
5 changes: 4 additions & 1 deletion apps/stories/stories/checkbox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ export const CheckboxColor = () => {
<Checkbox name="hello" label="Warning" color="w" />
<Checkbox name="hello" label="Primary" color="p" />
<Checkbox name="hello" label="Secondary" color="se" />
<Checkbox name="hello" label="b" color="b" />
<Checkbox name="hello" label="Background" color="b" />
<Checkbox name="hello" label="Info" color="i" />
</Flex>
)
}
Expand All @@ -63,6 +64,7 @@ export const CheckboxDisabled = () => {
<Checkbox disabled name="hello" label="Hello" color="p" />
<Checkbox disabled name="hello" label="Hello" color="se" />
<Checkbox disabled name="hello" label="Hello" color="b" />
<Checkbox disabled name="hello" label="Hello" color="i" />
</Flex>
<Flex gap="4" items="center">
<Checkbox disabled defaultChecked name="hello" label="Hello" color="d" />
Expand All @@ -71,6 +73,7 @@ export const CheckboxDisabled = () => {
<Checkbox disabled defaultChecked name="hello" label="Hello" color="p" />
<Checkbox disabled defaultChecked name="hello" label="Hello" color="se" />
<Checkbox disabled defaultChecked name="hello" label="Hello" color="b" />
<Checkbox disabled defaultChecked name="hello" label="Hello" color="i" />
</Flex>
</div>
)
Expand Down
Loading

0 comments on commit 82a98e3

Please sign in to comment.