From 4f215fac4f5e85bd45eda76a3589f2b84fd5becb Mon Sep 17 00:00:00 2001 From: Haider Alshamma Date: Mon, 25 Nov 2024 12:20:10 -0500 Subject: [PATCH] feat: type the icon prop to improve DX --- package.json | 2 +- src/Button/Button.tsx | 3 ++- src/Button/ControlIcon.tsx | 3 ++- src/Button/IconicButton.tsx | 2 +- src/FieldLabel/FramedIcon.tsx | 3 ++- src/Icon/Icon.story.tsx | 5 +++-- src/Icon/Icon.tsx | 2 +- src/Input/InputField.tsx | 3 ++- yarn.lock | 15 +++++---------- 9 files changed, 19 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 7e9006620..de80ccde4 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "@babel/preset-env": "7.3.1", "@babel/preset-typescript": "^7.10.4", "@nulogy/eslint-config-nulogy": "^1.0.0", - "@nulogy/icons": "4.34.1", + "@nulogy/icons": "^4.36.0", "@rollup/plugin-babel": "^5.0.0", "@rollup/plugin-node-resolve": "^7.1.3", "@semantic-release/changelog": "^6.0.2", diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index d4da78bcc..3d69602ce 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -5,13 +5,14 @@ import { Icon } from "../Icon"; import { DefaultNDSThemeType } from "../theme.type"; import { useComponentSize, ComponentSize as ContextComponentSize } from "../NDSProvider/ComponentSizeContext"; import { subPx } from "../utils"; +import icons from "@nulogy/icons"; type ComponentSize = "small" | "medium" | "large"; export type ButtonProps = SpaceProps & React.ComponentPropsWithRef<"button"> & { className?: string; - icon?: any; + icon?: keyof typeof icons | "loading"; iconSide?: "left" | "right"; size?: ComponentSize; fullWidth?: boolean; diff --git a/src/Button/ControlIcon.tsx b/src/Button/ControlIcon.tsx index a3c3c7954..4bdb10588 100644 --- a/src/Button/ControlIcon.tsx +++ b/src/Button/ControlIcon.tsx @@ -1,3 +1,4 @@ +import icons from "@nulogy/icons"; import React from "react"; import styled from "styled-components"; import { space, SpaceProps } from "styled-system"; @@ -6,7 +7,7 @@ import { Icon } from "../Icon"; type ControlIconProps = React.ComponentPropsWithRef<"button"> & SpaceProps & { onClick?: React.MouseEventHandler; - icon: string; + icon: keyof typeof icons | "loading"; toggled?: boolean; disabled?: boolean; size?: string; diff --git a/src/Button/IconicButton.tsx b/src/Button/IconicButton.tsx index 8dfbbd200..f16b519ec 100644 --- a/src/Button/IconicButton.tsx +++ b/src/Button/IconicButton.tsx @@ -13,7 +13,7 @@ interface BaseProps { size?: ComponentSize; color?: string; labelHidden?: boolean; - icon?: string; + icon?: keyof typeof icons | "loading"; iconSize?: string; hoverBackgroundColor?: string; fontSize?: string; diff --git a/src/FieldLabel/FramedIcon.tsx b/src/FieldLabel/FramedIcon.tsx index 6bdbf4578..43125a843 100644 --- a/src/FieldLabel/FramedIcon.tsx +++ b/src/FieldLabel/FramedIcon.tsx @@ -1,11 +1,12 @@ import React, { ReactElement } from "react"; +import icons from "@nulogy/icons"; import { Flex } from "../Flex"; import { Tooltip } from "../Tooltip"; import { Icon } from "../Icon"; interface FramedIconProps extends React.ComponentPropsWithoutRef<"svg"> { iconSize: string; - icon: string; + icon: keyof typeof icons | "loading"; focusable?: boolean; maxWidth?: string; tooltip?: string | ReactElement; diff --git a/src/Icon/Icon.story.tsx b/src/Icon/Icon.story.tsx index e09948820..72069d3a2 100644 --- a/src/Icon/Icon.story.tsx +++ b/src/Icon/Icon.story.tsx @@ -1,11 +1,12 @@ import React from "react"; import icons from "@nulogy/icons"; +import type { IconName } from "@nulogy/icons"; import { Box, Flex, Icon, InlineIcon } from "../index"; import theme from "../theme"; -const iconNames = [...Object.keys(icons), "loading"]; -const iconSubset = [...iconNames.slice(0, 5), "loading"]; +const iconNames = [...Object.keys(icons), "loading"] as IconName[]; +const iconSubset = [...iconNames.slice(0, 5), "loading"] as IconName[]; const IconCode = ({ icon }) => ( diff --git a/src/Icon/Icon.tsx b/src/Icon/Icon.tsx index 99a6f213e..962162052 100644 --- a/src/Icon/Icon.tsx +++ b/src/Icon/Icon.tsx @@ -5,7 +5,7 @@ import icons from "@nulogy/icons"; import LoadingIcon from "./LoadingIcon"; interface IconProps extends SpaceProps { - icon: string; + icon: keyof typeof icons | "loading"; className?: string; size?: string; title?: string; diff --git a/src/Input/InputField.tsx b/src/Input/InputField.tsx index 328063132..29492b7d1 100644 --- a/src/Input/InputField.tsx +++ b/src/Input/InputField.tsx @@ -11,13 +11,14 @@ import type { DefaultNDSThemeType } from "../theme.type"; import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext"; import Prefix from "./Prefix"; import Suffix from "./Suffix"; +import icons from "@nulogy/icons"; type NativeInputProps = Omit, "size">; export interface InputFieldProps extends NativeInputProps { htmlSize?: number; size?: ComponentSize; - icon?: string; + icon?: keyof typeof icons | "loading"; error?: boolean; labelText?: string; requirementText?: string; diff --git a/yarn.lock b/yarn.lock index e20402a49..0bb58152a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3110,10 +3110,10 @@ eslint-plugin-react-hooks "^4.0.4" prettier "^2.0.5" -"@nulogy/icons@4.34.1": - version "4.34.1" - resolved "https://registry.yarnpkg.com/@nulogy/icons/-/icons-4.34.1.tgz#9255e637909b403dd877ad7631879b0b9fff023d" - integrity sha512-ZqOMxPcN/ZXFa5yhBY4cV5tMTorMPQ4BhcWpU1y8VmLftxcQS61gGhIg5MfogON4yUZJIZWrGaIRi6r2s6Qr1Q== +"@nulogy/icons@^4.36.0": + version "4.36.0" + resolved "https://registry.yarnpkg.com/@nulogy/icons/-/icons-4.36.0.tgz#3d7858b7d7a4ec83abe09f8715408344f96cf4c4" + integrity sha512-xpwbTaZbZ4qoV/FgzepxxDXDm6xzYpPnQh6OQL5l/C9aRjs7Khl2sI57zxK4DUGsLGWTeGGdXXjaxMyC99GISw== "@nulogy/tokens@^5.4.0": version "5.4.0" @@ -7511,16 +7511,11 @@ camelize@^1.0.0: resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= -caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001280, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001587: +caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001280, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001663: version "1.0.30001668" resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001668.tgz" integrity sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw== -caniuse-lite@^1.0.30001663: - version "1.0.30001668" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001668.tgz#98e214455329f54bf7a4d70b49c9794f0fbedbed" - integrity sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw== - cardinal@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/cardinal/-/cardinal-2.1.1.tgz#7cc1055d822d212954d07b085dea251cc7bc5505"