Skip to content

Commit

Permalink
Fix Inline + Stack props
Browse files Browse the repository at this point in the history
Signed-off-by: Charles de Dreuille <[email protected]>
  • Loading branch information
cdedreuille committed Dec 19, 2024
1 parent 02d6808 commit 7404c09
Show file tree
Hide file tree
Showing 6 changed files with 134 additions and 29 deletions.
51 changes: 41 additions & 10 deletions packages/canon/src/components/Inline/Inline.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,41 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;

const fakeBlockList = [
{ width: 45, height: 60 },
{ width: 150, height: 75 },
{ width: 80, height: 50 },
{ width: 120, height: 70 },
{ width: 95, height: 65 },
{ width: 110, height: 55 },
{ width: 130, height: 60 },
{ width: 100, height: 80 },
{ width: 140, height: 45 },
{ width: 85, height: 70 },
{ width: 125, height: 50 },
{ width: 105, height: 75 },
{ width: 115, height: 65 },
{ width: 135, height: 55 },
{ width: 90, height: 60 },
{ width: 145, height: 80 },
{ width: 75, height: 45 },
{ width: 155, height: 70 },
{ width: 60, height: 50 },
{ width: 160, height: 75 },
{ width: 70, height: 65 },
{ width: 150, height: 55 },
{ width: 95, height: 60 },
{ width: 120, height: 80 },
{ width: 85, height: 45 },
{ width: 130, height: 70 },
{ width: 100, height: 50 },
{ width: 140, height: 75 },
{ width: 110, height: 65 },
{ width: 125, height: 55 },
{ width: 105, height: 60 },
{ width: 145, height: 80 },
];

const FakeBox = ({
width = 120,
height = 80,
Expand All @@ -63,12 +98,8 @@ export const Default: Story = {
args: {
children: (
<>
{Array.from({ length: 32 }).map((_, index) => (
<FakeBox
key={index}
width={Math.floor(Math.random() * (160 - 40 + 1)) + 40}
height={Math.floor(Math.random() * (80 - 40 + 1)) + 40}
/>
{fakeBlockList.map((block, index) => (
<FakeBox key={index} width={block.width} height={block.height} />
))}
</>
),
Expand All @@ -78,7 +109,7 @@ export const Default: Story = {
export const AlignLeft: Story = {
args: {
...Default.args,
align: 'start',
align: 'left',
},
};

Expand All @@ -92,14 +123,14 @@ export const AlignCenter: Story = {
export const AlignRight: Story = {
args: {
...Default.args,
align: 'end',
align: 'right',
},
};

export const VerticalAlignTop: Story = {
args: {
...Default.args,
alignY: 'start',
alignY: 'top',
},
};

Expand All @@ -113,7 +144,7 @@ export const VerticalAlignCenter: Story = {
export const VerticalAlignBottom: Story = {
args: {
...Default.args,
alignY: 'end',
alignY: 'bottom',
},
};

Expand Down
44 changes: 40 additions & 4 deletions packages/canon/src/components/Inline/Inline.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,50 @@
import { createElement, forwardRef } from 'react';
import type { InlineProps } from './types';
import { getClassNames } from '../../utils/getClassNames';
import { JustifyContent, Breakpoint, AlignItems } from '../../types';

// Function to map align values
const mapAlignValue = (value?: InlineProps['align']) => {
if (typeof value === 'string') {
let returnedValue: JustifyContent = 'stretch';
if (value === 'left') returnedValue = 'start';
if (value === 'center') returnedValue = 'center';
if (value === 'right') returnedValue = 'end';
return returnedValue;
} else if (typeof value === 'object') {
const returnedValue: Partial<Record<Breakpoint, JustifyContent>> = {};
for (const [key, val] of Object.entries(value)) {
returnedValue[key as Breakpoint] = mapAlignValue(val) as JustifyContent;
}
return returnedValue;
}
return 'stretch';
};

const mapAlignYValue = (value?: InlineProps['alignY']) => {
if (typeof value === 'string') {
let returnedValue: AlignItems = 'stretch';
if (value === 'top') returnedValue = 'start';
if (value === 'center') returnedValue = 'center';
if (value === 'bottom') returnedValue = 'end';
return returnedValue;
} else if (typeof value === 'object') {
const returnedValue: Partial<Record<Breakpoint, AlignItems>> = {};
for (const [key, val] of Object.entries(value)) {
returnedValue[key as Breakpoint] = mapAlignYValue(val) as AlignItems;
}
return returnedValue;
}
return 'stretch';
};

/** @public */
export const Inline = forwardRef<HTMLElement, InlineProps>((props, ref) => {
const {
as = 'div',
children,
align = 'start',
alignY = 'start',
align = 'left',
alignY = 'top',
gap = 'xs',
className,
style,
Expand All @@ -34,8 +70,8 @@ export const Inline = forwardRef<HTMLElement, InlineProps>((props, ref) => {
// Generate utility class names
const utilityClassNames = getClassNames({
gap,
alignItems: alignY,
justifyContent: align,
alignItems: mapAlignYValue(alignY),
justifyContent: mapAlignValue(align),
...restProps,
});

Expand Down
22 changes: 16 additions & 6 deletions packages/canon/src/components/Inline/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,28 @@
* limitations under the License.
*/

import type { SpaceProps, UtilityProps, AsProps } from '../../types';
import type {
SpaceProps,
UtilityProps,
AsProps,
Breakpoint,
} from '../../types';

/** @public */
export interface InlineProps extends SpaceProps {
children: React.ReactNode;
as?: AsProps;
gap?: UtilityProps['gap'];
align?: Omit<
UtilityProps['justifyContent'],
'stretch' | 'around' | 'between'
>;
alignY?: UtilityProps['alignItems'];
align?:
| 'left'
| 'center'
| 'right'
| Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
alignY?:
| 'top'
| 'center'
| 'bottom'
| Partial<Record<Breakpoint, 'top' | 'center' | 'bottom'>>;
className?: string;
style?: React.CSSProperties;
}
10 changes: 5 additions & 5 deletions packages/canon/src/components/Stack/Stack.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const meta = {
},
},
args: {
align: 'start',
align: 'left',
gap: 'xs',
},
} satisfies Meta<typeof Stack>;
Expand Down Expand Up @@ -72,7 +72,7 @@ export const Default: Story = {
export const AlignLeft: Story = {
args: {
...Default.args,
align: 'start',
align: 'left',
},
};

Expand All @@ -86,17 +86,17 @@ export const AlignCenter: Story = {
export const AlignRight: Story = {
args: {
...Default.args,
align: 'end',
align: 'right',
},
};

export const ResponsiveAlign: Story = {
args: {
...Default.args,
align: {
xs: 'start',
xs: 'left',
md: 'center',
lg: 'end',
lg: 'right',
},
},
};
Expand Down
23 changes: 21 additions & 2 deletions packages/canon/src/components/Stack/Stack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,32 @@
import { createElement, forwardRef } from 'react';
import { StackProps } from './types';
import { getClassNames } from '../../utils/getClassNames';
import type { AlignItems, Breakpoint } from '../../types';

// Function to map align values
const mapAlignValue = (value?: StackProps['align']) => {
if (typeof value === 'string') {
let returnedValue: AlignItems = 'stretch';
if (value === 'left') returnedValue = 'start';
if (value === 'center') returnedValue = 'center';
if (value === 'right') returnedValue = 'end';
return returnedValue;
} else if (typeof value === 'object') {
const returnedValue: Partial<Record<Breakpoint, AlignItems>> = {};
for (const [key, val] of Object.entries(value)) {
returnedValue[key as Breakpoint] = mapAlignValue(val) as AlignItems;
}
return returnedValue;
}
return 'stretch';
};

/** @public */
export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
const {
as = 'div',
children,
align = 'start',
align = 'left',
gap = 'xs',
className,
style,
Expand All @@ -33,7 +52,7 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
// Generate utility class names
const utilityClassNames = getClassNames({
gap,
alignItems: align === 'start' ? 'stretch' : align,
alignItems: mapAlignValue(align),
...restProps,
});

Expand Down
13 changes: 11 additions & 2 deletions packages/canon/src/components/Stack/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,23 @@
* limitations under the License.
*/

import type { SpaceProps, UtilityProps, AsProps } from '../../types';
import type {
SpaceProps,
UtilityProps,
AsProps,
Breakpoint,
} from '../../types';

/** @public */
export interface StackProps extends SpaceProps {
children: React.ReactNode;
as?: AsProps;
gap?: UtilityProps['gap'];
align?: UtilityProps['alignItems'];
align?:
| 'left'
| 'center'
| 'right'
| Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
className?: string;
style?: React.CSSProperties;
}

0 comments on commit 7404c09

Please sign in to comment.