Merge pull request #47 from 1Byte-Software/develop

Update version 1.10.0

Author: KennethWise

CHANGELOG.md

@@ -5,7 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.8.0]
+## [1.10.0]
+
+### Added
+
+-   Added `Segmented` component.
+-   Added `Alert.ErrorBoundary` component.
+-   Add `fixedSiderBreakpoint` prop for `DashboardTemplateSider`.
+
+## [1.9.0]
 
 ### Added
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "1byte-react-design",
-    "version": "1.9.0",
+    "version": "1.10.0",
     "description": "A simple React UI library",
     "main": "dist/index.js",
     "module": "dist/index.js",

src/molecules/Alert/Alert.tsx

@@ -1,9 +1,12 @@
 import { forwardRef } from 'react';
 import { AlertStyled } from './styles';
 import { RdAlertComponent, RdAlertCompoundedComponent } from './types';
+import { AlertErrorBoundary } from './ErrorBoundary';
 
 export const InternalAlert: RdAlertComponent = forwardRef((props, ref) => {
     return <AlertStyled {...props} ref={ref} />;
 });
 
 export const Alert: RdAlertCompoundedComponent = InternalAlert as RdAlertCompoundedComponent;
+
+Alert.ErrorBoundary = AlertErrorBoundary;

src/molecules/Alert/ErrorBoundary.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { AlertErrorBoundaryStyled } from './styles';
+import {
+    RdAlertErrorBoundaryComponent,
+    RdAlertErrorBoundaryProps,
+    RdAlertErrorBoundaryStates,
+} from './types';
+
+export class AlertErrorBoundary
+    extends React.Component<RdAlertErrorBoundaryProps, RdAlertErrorBoundaryStates>
+    implements RdAlertErrorBoundaryComponent
+{
+    state: RdAlertErrorBoundaryStates = {
+        error: undefined,
+        info: {
+            componentStack: '',
+        },
+    };
+
+    componentDidCatch(error: Error | null, info: object): void {
+        // update state with error + stack trace from Antd
+        this.setState({
+            error,
+            info: {
+                componentStack: (info as any).componentStack ?? '',
+            },
+        });
+    }
+
+    render() {
+        return <AlertErrorBoundaryStyled {...this.props} />;
+    }
+}

src/molecules/Alert/styles.tsx

@@ -1,4 +1,9 @@
 import styled from '@emotion/styled';
 import { Alert } from 'antd';
+import { RdAlertErrorBoundaryComponent } from './types';
 
 export const AlertStyled = styled(Alert)``;
+
+export const AlertErrorBoundaryStyled = styled(
+    Alert.ErrorBoundary as typeof RdAlertErrorBoundaryComponent
+)``;

src/molecules/Alert/types.ts

@@ -1,11 +1,61 @@
 import { Alert, GetProps } from 'antd';
 import { AlertRef } from 'antd/es/alert/Alert';
 import { ComponentToken as AlertComponentTokenAntd } from 'antd/es/drawer/style';
-import { ComponentProps } from 'react';
+import React, { ComponentProps } from 'react';
 
 type AlertPropsAntd = GetProps<typeof Alert>;
-type AlertErrorBoundaryPropsAntd = GetProps<typeof Alert.ErrorBoundary>;
 
+/**
+ * 📝 Explanation:
+ *
+ * For most Ant Design components, we can simply get the props type using:
+ *    type XxxPropsAntd = GetProps<typeof Xxx>;
+ *
+ * However, `Alert.ErrorBoundary` is a special case:
+ * - Ant Design does NOT export a public props interface for ErrorBoundary.
+ * - If we directly use `GetProps<typeof Alert.ErrorBoundary>`,
+ *   TypeScript will try to expose internal types and throw an error:
+ *     ts(4023): "Exported variable '...' has or is using name '...' but cannot be named".
+ *
+ * 🚑 Workaround:
+ * - Use `ComponentProps<typeof Alert.ErrorBoundary>` to get the props,
+ *   then clone it via a mapped type to produce a "public" type.
+ * - This way we avoid referencing Ant Design’s internal types.
+ *
+ * 🔮 Note:
+ * - If Ant Design exports a proper `AlertErrorBoundaryProps` type in the future,
+ *   we can safely remove this workaround and write:
+ *     type AlertErrorBoundaryPropsAntd = GetProps<typeof Alert.ErrorBoundary>;
+ */
+type AlertErrorBoundaryPropsAntd = {
+    [K in keyof ComponentProps<typeof Alert.ErrorBoundary>]: ComponentProps<
+        typeof Alert.ErrorBoundary
+    >[K];
+};
+
+/**
+ * 📝 Explanation:
+ *
+ * Ant Design also does not export the `ErrorBoundaryStates` type.
+ * Therefore, instead of extracting it automatically, we need to define this interface manually.
+ *
+ * The state shape is referenced from the source code:
+ *    state: {
+ *        error: undefined;
+ *        info: {
+ *            componentStack: string;
+ *        };
+ *    }
+ *
+ * This is simply a copied definition to ensure type safety for our extended components.
+ * If Ant Design exports `ErrorBoundaryStates` in the future, we should switch to that instead.
+ */
+interface AlertErrorBoundaryStatesAntd {
+    error?: Error | null;
+    info?: {
+        componentStack?: string;
+    };
+}
 type AlertRefAntd = AlertRef;
 
 //#endregion
@@ -17,24 +67,34 @@ type AlertComponentTokenExtend = {};
 //#region Define extended types
 type AlertPropsExtend = {};
 type AlertErrorBoundaryPropsExtend = {};
+type AlertErrorBoundaryStatesExtend = {};
 
 type AlertRefExtend = {};
 //#endregion
 
 //#region Export types
 export type RdAlertProps = AlertPropsAntd & AlertPropsExtend;
 export type RdAlertErrorBoundaryProps = AlertErrorBoundaryPropsAntd & AlertErrorBoundaryPropsExtend;
+export type RdAlertErrorBoundaryStates = AlertErrorBoundaryStatesAntd &
+    AlertErrorBoundaryStatesExtend;
 export type RdAlertRef = AlertRefAntd & AlertRefExtend;
 export type RdAlertComponentToken = AlertComponentTokenAntd & AlertComponentTokenExtend;
 //#endregion
 
 //#region Define component types
-// export type RdAlertComponent = React.FC<RdAlertProps>;
 export type RdAlertComponent = React.ForwardRefExoticComponent<
     RdAlertProps & React.RefAttributes<RdAlertRef>
 >;
+export declare class RdAlertErrorBoundaryComponent extends React.Component<
+    RdAlertErrorBoundaryProps,
+    RdAlertErrorBoundaryStates
+> {
+    state: RdAlertErrorBoundaryStates;
+    componentDidCatch(error: Error | null, info: object): void;
+    render(): React.ReactNode;
+}
 
 export type RdAlertCompoundedComponent = RdAlertComponent & {
-    // Timer: RdAlertErrorBoundaryComponent;
+    ErrorBoundary: typeof RdAlertErrorBoundaryComponent;
 };
 //#endregion

src/molecules/Segmented/Segmented.tsx

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { SegmentedStyledFunc } from './styles';
+import { RdSegmentedComponent, RdSegmentedProps } from './types';
+
+export const InternalSegmented = <ValueType extends string | number>(
+    props: RdSegmentedProps<ValueType>
+) => {
+    const SegmentedStyled = useMemo(() => {
+        return SegmentedStyledFunc<ValueType>();
+    }, [SegmentedStyledFunc]);
+
+    return <SegmentedStyled {...props} />;
+};
+
+export const Segmented = InternalSegmented as RdSegmentedComponent;

src/molecules/Segmented/index.tsx

@@ -0,0 +1,2 @@
+export { Segmented } from './Segmented';
+export * from './types';

src/molecules/Segmented/styles.tsx

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+import { Segmented } from 'antd';
+
+export const SegmentedStyles = styled(Segmented)``;
+
+export const SegmentedStyledFunc = <ValueType extends string | number>() =>
+    styled(Segmented<ValueType>)``;

src/molecules/Segmented/types.ts

@@ -0,0 +1,30 @@
+import { GetProps, Segmented } from 'antd';
+import { ComponentToken as SegmentedComponentTokenAntd } from 'antd/es/affix/style';
+import { InternalSegmented } from './Segmented';
+
+//#region Define Ant Design types
+type SegmentedPropsAntd<ValueType> = GetProps<typeof Segmented<ValueType>>;
+//#endregion
+
+//#region Define extended component tokens
+type SegmentedComponentTokenExtend = {};
+//#endregion
+
+//#region Define extended types
+type SegmentedPropsExtend = {};
+
+type SegmentedRefExtend = {};
+//#endregion
+
+//#region Export types
+export type RdSegmentedProps<ValueType> = SegmentedPropsAntd<ValueType> & SegmentedPropsExtend;
+
+export type RdSegmentedComponentToken = SegmentedComponentTokenAntd & SegmentedComponentTokenExtend;
+//#endregion
+
+//#region Define component types
+export type RdSegmentedComponent = (<ValueType>(
+    props: RdSegmentedProps<ValueType> & React.RefAttributes<HTMLDivElement>
+) => ReturnType<typeof InternalSegmented>) &
+    Pick<React.FC, 'displayName'>;
+//#endregion