Skip to content

Commit

Permalink
Updating react minimum, updating react-resize, updating weather card …
Browse files Browse the repository at this point in the history
…examples
  • Loading branch information
shannonhochkins committed Dec 31, 2024
1 parent 0cd14e7 commit 7adc290
Show file tree
Hide file tree
Showing 9 changed files with 80 additions and 17 deletions.
19 changes: 9 additions & 10 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
"jest-environment-jsdom": "^29.6.1",
"jest-localstorage-mock": "^2.4.26",
"prettier": "^3.2.5",
"react": "^18.x",
"react": "^18.3.x",
"react-dom": "^18.x",
"react-element-to-jsx-string": "^15.0.0",
"react-error-boundary": "^4.0.13",
Expand Down
2 changes: 1 addition & 1 deletion packages/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
"react-dom": ">=16.x",
"react-error-boundary": "^4.x",
"react-leaflet": ">=4.x.x",
"react-resize-detector": ">=9.x.x",
"react-resize-detector": ">=12.x.x",
"react-switch": "^7.x.x",
"react-use": ">=17.x",
"use-debounce": ">=9.x",
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/Cards/CalendarCard/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -414,6 +414,7 @@ function _CalendarCard({
const [narrow, setNarrow] = useState<boolean>(false);
const { width, ref: widthRef } = useResizeDetector({
refreshMode: "debounce",
handleHeight: false,
refreshRate: 500,
});
const { callApi, getAllEntities } = useHass();
Expand Down
5 changes: 3 additions & 2 deletions packages/components/src/Cards/CardBase/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ import { ErrorBoundary } from "react-error-boundary";
import { isValidProp } from "../../utils/isValidProp";
import styled from "@emotion/styled";
import { useResizeDetector } from "react-resize-detector";
import { Props as ResizeDetectorProps } from "react-resize-detector/build/types/types";
import { useResizeDetectorProps } from "react-resize-detector";
import { SVG_HEIGHT, SVG_WIDTH } from "../../Shared/SvgGraph/constants";

const getMotionElement = (as: ElementType, onlyFunctionality?: boolean) => {
Expand Down Expand Up @@ -249,7 +249,7 @@ export type CardBaseProps<T extends ElementType = "div", E extends EntityName =
/** remove all base styles of the card and just use the inbuilt functionality */
onlyFunctionality?: boolean;
/** props to pass to the resize detector, this is useful if you want to trigger something whenever the card resizes */
resizeDetectorProps?: ResizeDetectorProps;
resizeDetectorProps?: useResizeDetectorProps<HTMLElement>;
};

const DEFAULT_SIZES: Required<AvailableQueries> = {
Expand Down Expand Up @@ -309,6 +309,7 @@ const _CardBase = function _CardBase<T extends ElementType, E extends EntityName
const { width = 0 } = useResizeDetector({
refreshMode: "debounce",
refreshRate: 50,
handleHeight: false,
skipOnMount: false,
targetRef: (elRef as React.MutableRefObject<HTMLElement>) ?? internalRef,
...(resizeDetectorProps ?? {}),
Expand Down
50 changes: 50 additions & 0 deletions packages/components/src/Cards/SidebarCard/SidebarCard.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,46 @@ function TemplateMenuItems(args?: Partial<SidebarCardProps>) {
);
}

function TemplateCustomWidth(args?: Partial<SidebarCardProps>) {
return (
<HassConnect hassUrl="http://localhost:8123">
<ThemeProvider includeThemeControls theme={{
device: {
sidebarCard: {
width: {
expanded: '25rem'
}
}
}
}} />
<MakeFullScreen />
<Row alignItems="stretch" justifyContent="flex-start" fullWidth fullHeight wrap="nowrap">
<SidebarCard startOpen={true} {...args}>
<p>You can insert any children in the sidebar here</p>
</SidebarCard>
<Row fullWidth fullHeight gap="0.5rem">
<p
style={{
maxWidth: 600,
}}
>
Simple example on how you can tweak the sidebar width, the reason this is done through the theme provider is because other components also consume this value to determine positions/functionality.
</p>
<Source dark code={`<ThemeProvider includeThemeControls theme={{
device: {
sidebarCard: {
width: {
expanded: '25rem'
}
}
}
}} />`} />
</Row>
</Row>
</HassConnect>
);
}

export default {
title: "COMPONENTS/Cards/SidebarCard",
component: SidebarCard,
Expand Down Expand Up @@ -239,3 +279,13 @@ export const CustomMenuItemsExample: SidebarStory = {
},
},
};

export const CustomSidebarWidthExample: SidebarStory = {
render: TemplateCustomWidth,
args: {
weatherCardProps: {
entity: "weather.entity",
includeForecast: true,
},
},
};
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ function Template(args?: Partial<WeatherCardProps>) {
<WeatherCardDetail entity="sensor.openweathermap_pressure" />,
]}
/>
<WeatherCard entity="weather.entity" forecastType="hourly" md={6} lg={6} xlg={6} {...args} />
<p>Hourly, with 2 separate rows:</p>
<WeatherCard entity="weather.entity" forecastRows={2} forecastType="hourly" md={6} lg={6} xlg={6} {...args} />
</Column>
</HassConnect>
);
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/Shared/Menu/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ export function Menu({ children, placement = "bottom", items = [], cssStyles, ..
const globalComponentStyle = useStore((state) => state.globalComponentStyles);
const { width, ref } = useResizeDetector({
refreshMode: "debounce",
handleHeight: false,
refreshRate: 500,
});
// Reference to the menu popup
Expand Down
14 changes: 12 additions & 2 deletions stories/1.demo.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,9 @@ import diningRoom from './dining-room.jpg';
function Template() {
const device = useBreakpoint();
return <Row fullWidth wrap="nowrap" fullHeight alignItems="stretch">
<SidebarCard startOpen={false} />
<SidebarCard startOpen={false} weatherCardProps={{
entity: 'weather.entity',
}} />
<Column fullWidth gap="1rem" wrap="nowrap" justifyContent="flex-start" style={{
padding: device.xxs || device.xs ? '1rem' : '2rem',
overflowY: 'auto',
Expand Down Expand Up @@ -259,7 +261,15 @@ function Template() {

function Connector() {
return <HassConnect hassUrl="https://homeassistant.local:8123">
<ThemeProvider includeThemeControls darkMode={true} />
<ThemeProvider includeThemeControls darkMode={true} theme={{
device: {
sidebarCard: {
width: {
expanded: '25rem'
}
}
}
}} />
<Template />
</HassConnect>
}
Expand Down

0 comments on commit 7adc290

Please sign in to comment.