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

Update version 1.8.0

Author: KennethWise

CHANGELOG.md

@@ -9,6 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+-   Added `Alert` component.
+-   Added `Progress` component.
+-   Added default `scroll` for `Table` component.
+
+## [1.8.0]
+
+### Added
+
 -   Added chart to `SummaryCard` component.
 -   Added `Statistic` component.
 -   Added `Grid.useBreakpoint()` hooks.

package.json

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

src/molecules/Alert/Alert.tsx

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

src/molecules/Alert/Timer.tsx

@@ -0,0 +1,6 @@
+import { TimerStyled } from './styles';
+import { RdAlertTimerComponent } from './types';
+
+export const Timer: RdAlertTimerComponent = props => {
+    return <TimerStyled {...props} />;
+};

src/molecules/Alert/index.tsx

@@ -0,0 +1,2 @@
+export * from './Alert';
+export * from './types';

src/molecules/Alert/styles.tsx

@@ -0,0 +1,4 @@
+import styled from '@emotion/styled';
+import { Alert } from 'antd';
+
+export const AlertStyled = styled(Alert)``;

src/molecules/Alert/types.ts

@@ -0,0 +1,40 @@
+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';
+
+type AlertPropsAntd = GetProps<typeof Alert>;
+type AlertErrorBoundaryPropsAntd = GetProps<typeof Alert.ErrorBoundary>;
+
+type AlertRefAntd = AlertRef;
+
+//#endregion
+
+//#region Define extended component tokens
+type AlertComponentTokenExtend = {};
+//#endregion
+
+//#region Define extended types
+type AlertPropsExtend = {};
+type AlertErrorBoundaryPropsExtend = {};
+
+type AlertRefExtend = {};
+//#endregion
+
+//#region Export types
+export type RdAlertProps = AlertPropsAntd & AlertPropsExtend;
+export type RdAlertErrorBoundaryProps = AlertErrorBoundaryPropsAntd & AlertErrorBoundaryPropsExtend;
+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 type RdAlertCompoundedComponent = RdAlertComponent & {
+    // Timer: RdAlertErrorBoundaryComponent;
+};
+//#endregion

src/molecules/Progress/Progress.tsx

@@ -0,0 +1,7 @@
+import { forwardRef } from 'react';
+import { ProgressStyles } from './styles';
+import { RdProgressComponent } from './types';
+
+export const Progress: RdProgressComponent = forwardRef((props, ref) => {
+    return <ProgressStyles ref={ref} {...props} />;
+});

src/molecules/Progress/index.tsx

@@ -0,0 +1,2 @@
+export * from './Progress';
+export * from './types';

src/molecules/Progress/styles.tsx

@@ -0,0 +1,4 @@
+import styled from '@emotion/styled';
+import { Progress } from 'antd';
+
+export const ProgressStyles = styled(Progress)``;