widenarrow-ui 1.0.24 → 1.0.26

package/.github/workflows/azure-static-web-apps-lively-river-079e14403.yml

@@ -0,0 +1,47 @@
+name: Azure Static Web Apps CI/CD
+
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - develop
+
+jobs:
+  build_and_deploy_job:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: true
+          lfs: false
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LIVELY_RIVER_079E14403 }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: "upload"
+          app_build_command: "npm run build-storybook"
+          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: "/" # App source code path
+          api_location: "" # Api source code path - optional
+          output_location: "storybook-static" # Built app content directory - optional
+          ###### End of Repository/Build Configurations ######
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LIVELY_RIVER_079E14403 }}
+          action: "close"

package/.storybook/main.ts

@@ -18,7 +18,7 @@ module.exports = {
 				},
 				cssLoaderOptions: {
 					modules: {
-						localIdentName: '[name]__[local]--[hash:base64:5]_wn-ui'
+						localIdentName: '[name]_[local]_[hash:base64:5]'
 					}
 				}
 			}

package/lib/components/Button/Button.types.d.ts

@@ -17,7 +17,7 @@ export interface ButtonProps {
     id?: string | number;
     loading?: boolean;
     autoFocus?: boolean;
-    children?: ReactNode;
     ariaLabel?: string;
+    children?: ReactNode;
     tabIndex?: number;
 }

package/lib/components/Card/Card.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { CardProps } from './Card.types';
+declare const Card: FC<CardProps>;
+export { Card };

package/lib/components/Card/Card.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card } from 'src/components/Card';
+declare const meta: Meta<typeof Card>;
+export default meta;
+declare type Story = StoryObj<typeof Card>;
+export declare const Default: Story;

package/lib/components/Card/Card.types.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { FlexStylingInterface, PaddingInterface } from '../../types/styling.types';
+import { SizeTypes, AspectRatioTypes, IconTypes } from '../../constants';
+export interface CardProps extends PaddingInterface, FlexStylingInterface {
+    onClickCallback: () => void;
+    imageAspectRatio?: Partial<AspectRatioTypes>;
+    imageIcon?: Partial<IconTypes>;
+    imageIconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE | SizeTypes.AUTO | undefined;
+    withEllipsis?: boolean;
+    imageSrc?: string;
+    imageAlt?: string;
+    description?: string;
+    wrapperElement?: 'div' | 'li' | 'section' | 'link';
+    withHoverEffect?: boolean;
+    className?: string;
+    title?: string;
+    children?: ReactNode;
+    topCustomComponent?: ReactNode;
+    imageCustomComponent?: ReactNode;
+    descriptionComponent?: ReactNode;
+    leftFooterComponent?: ReactNode;
+    rightFooterComponent?: ReactNode;
+}

package/lib/components/Card/index.d.ts

@@ -0,0 +1 @@
+export * from './Card';

package/lib/components/IconButton/IconButton.types.d.ts

@@ -1,13 +1,15 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, CSSProperties } from 'react';
 import { IconStyleInterface, SizeStyleInterface } from '../../types/styling.types';
 import { ColorTypes, HierarchyTypes, SizeTypes } from '../../constants';
 export interface IconButtonProps extends IconStyleInterface, SizeStyleInterface {
     className?: string;
     rotateIcon?: boolean;
+    id?: string | number;
     rotateIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
     iconClassName?: string;
     type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    style?: CSSProperties;
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     iconColor?: Partial<ColorTypes>;
     href?: string;

package/lib/components/InlineButton/InlineButton.types.d.ts

@@ -1,7 +1,10 @@
-import { MouseEvent, ReactNode } from 'react';
+import { MouseEvent, ReactNode, CSSProperties } from 'react';
 import { HierarchyTypes, IconTypes, SizeTypes } from '../../constants';
 export interface InlineButtonProps {
     text: string;
+    id?: string | number;
+    loading?: boolean;
+    ariaLabel?: string;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
     className?: string;
     children?: ReactNode;
@@ -14,6 +17,6 @@ export interface InlineButtonProps {
     textClassName?: string;
     withEllipsis?: boolean;
     disabled?: boolean | undefined;
-    style?: object;
+    style?: CSSProperties;
     toolTip?: string;
 }

package/lib/components/Input/Input.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { InputProps } from './Input.types';
+declare const Input: FC<InputProps>;
+export { Input };

package/lib/components/Input/Input.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Input } from 'src/components/Input';
+declare const meta: Meta<typeof Input>;
+export default meta;
+declare type Story = StoryObj<typeof Input>;
+export declare const Default: Story;

package/lib/components/Input/Input.types.d.ts

@@ -0,0 +1,37 @@
+import { RefObject, FocusEvent, ChangeEvent, KeyboardEvent } from 'react';
+import { IconTypes, SizeTypes } from '../../constants';
+export interface IconInterface {
+    loading?: boolean;
+    disabled?: boolean;
+    icon: Partial<IconTypes>;
+    toolTip?: string;
+    onClickCallback: () => void;
+}
+export interface InputProps {
+    name: string;
+    value: string;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    className?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: string;
+    iconClassName?: string;
+    inputClassName?: string;
+    label?: string;
+    required?: boolean;
+    marginBottom?: boolean;
+    placeholder?: string;
+    inputRef?: RefObject<HTMLInputElement>;
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    helperText?: string;
+    characterLimit?: number;
+    type?: 'text' | 'number' | 'password' | 'time' | 'email';
+    iconRight?: IconInterface;
+    iconLeft?: IconInterface;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    onEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onBlur?: () => void;
+}

package/lib/components/Input/index.d.ts

@@ -0,0 +1 @@
+export * from './Input';

package/lib/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Box';
 export * from './Button';
 export * from './Checkbox';
+export * from './Card';
 export * from './RadioButton';
 export * from './DropDown';
 export * from './DropDownItem';
@@ -9,6 +10,7 @@ export * from './FormSkeleton';
 export * from './Grid';
 export * from './Icon';
 export * from './IconButton';
+export * from './Input';
 export * from './Image';
 export * from './InlineButton';
 export * from './ListItem';