From 3db7789050ddd37191bd0b92fdcb8874891a20cc Mon Sep 17 00:00:00 2001 From: Navin Moorthy Date: Mon, 1 Aug 2022 17:59:20 +0530 Subject: [PATCH 1/2] =?UTF-8?q?feat(icons):=20=E2=9C=A8=20add=20new=20icon?= =?UTF-8?q?=20&=20createIcon=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/modules/primitives/BadgeScreen.tsx | 47 +++++++++---- src/primitives/icons/AdaptIcon.tsx | 59 +++++++++++++++++ src/primitives/icons/__utils.tsx | 20 ++++++ src/primitives/icons/createIcon.tsx | 66 +++++++++++++++++++ src/primitives/icons/index.ts | 3 + src/primitives/index.ts | 1 + src/theme/defaultTheme/icon.ts | 3 + src/theme/defaultTheme/index.ts | 2 + 8 files changed, 190 insertions(+), 11 deletions(-) create mode 100644 src/primitives/icons/AdaptIcon.tsx create mode 100644 src/primitives/icons/__utils.tsx create mode 100644 src/primitives/icons/createIcon.tsx create mode 100644 src/primitives/icons/index.ts create mode 100644 src/theme/defaultTheme/icon.ts diff --git a/example/src/modules/primitives/BadgeScreen.tsx b/example/src/modules/primitives/BadgeScreen.tsx index 5d37970c..8ed49d26 100644 --- a/example/src/modules/primitives/BadgeScreen.tsx +++ b/example/src/modules/primitives/BadgeScreen.tsx @@ -1,22 +1,47 @@ import React from "react"; +import { Path } from "react-native-svg"; import { - BadgeNew, - BadgeText, - BadgeWrapper, + AdaptIcon, Box, + createAdaptIcon, } from "@adaptui/react-native-tailwind"; +const ClockIcon = createAdaptIcon({ + path: ( + + ), +}); + +const DeleteIcon = createAdaptIcon({ + d: "M4.65 0.199219C4.29101 0.199219 4 0.490234 4 0.849219C4 1.2082 4.29101 1.49922 4.65 1.49922H7.35C7.70899 1.49922 8 1.2082 8 0.849219C8 0.490234 7.70899 0.199219 7.35 0.199219H4.65ZM0 2.84922C0 2.49023 0.291015 2.19922 0.65 2.19922H11.35C11.709 2.19922 12 2.49023 12 2.84922C12 3.2082 11.709 3.49922 11.35 3.49922H0.65C0.291015 3.49922 0 3.2082 0 2.84922ZM2.65 4.99922C2.65 4.64023 2.35898 4.34922 2 4.34922C1.64101 4.34922 1.35 4.64023 1.35 4.99922V8.99922C1.35 10.4628 2.53645 11.6492 4 11.6492H8C9.46355 11.6492 10.65 10.4628 10.65 8.99922V4.99922C10.65 4.64023 10.359 4.34922 10 4.34922C9.64102 4.34922 9.35 4.64023 9.35 4.99922V8.99922C9.35 9.7448 8.74558 10.3492 8 10.3492H4C3.25442 10.3492 2.65 9.7448 2.65 8.99922V4.99922ZM6.65 4.99922C6.65 4.64023 6.35898 4.34922 6 4.34922C5.64102 4.34922 5.35 4.64023 5.35 4.99922V7.49922C5.35 7.8582 5.64102 8.14922 6 8.14922C6.35898 8.14922 6.65 7.8582 6.65 7.49922V4.99922Z", + pathFill: "#000", +}); + export const BadgeScreen = () => { return ( - - Scheduled - - - <>Badge - - - + + + + + + + ); }; diff --git a/src/primitives/icons/AdaptIcon.tsx b/src/primitives/icons/AdaptIcon.tsx new file mode 100644 index 00000000..03713ed7 --- /dev/null +++ b/src/primitives/icons/AdaptIcon.tsx @@ -0,0 +1,59 @@ +import Svg, { Path } from "react-native-svg"; + +import { useTheme } from "../../theme"; +import { cx } from "../../utils"; +import { + As, + createComponentType, + createElement, + createHook, + Props, +} from "../../utils/system"; +import { BoxOptions, useBox } from "../box"; + +import { fallbackIcon } from "./__utils"; + +export const useAdaptIcon = createHook( + ({ d, pathFill = "#000", ...props }) => { + console.log("%cprops", "color: #ffa280", props); + const _viewBox = props.viewBox ?? fallbackIcon.viewBox; + const fallback = d ? : fallbackIcon.children; + const children = props.children ?? fallback; + + const iconStyles = useTheme("icon"); + const className = cx(iconStyles.base, props.className); + + props = { + ...props, + viewBox: _viewBox, + children, + className, + }; + + props = useBox(props); + + return props; + }, +); + +export const AdaptIcon = createComponentType(props => { + const htmlProps = useAdaptIcon(props); + + return createElement(Svg, htmlProps); +}, "AdaptIcon"); + +export type AdaptIconOptions = BoxOptions & { + /** + * If the has a single path, simply copy the path's `d` attribute + */ + d?: string; + /** + * Fill color for the AdaptIcon Component. + * @default "#000" + */ + pathFill?: string; +}; + +export type AdaptIconProps = Props< + AdaptIconOptions +>; diff --git a/src/primitives/icons/__utils.tsx b/src/primitives/icons/__utils.tsx new file mode 100644 index 00000000..f32582d0 --- /dev/null +++ b/src/primitives/icons/__utils.tsx @@ -0,0 +1,20 @@ +import { Circle, G, Path } from "react-native-svg"; + +export const fallbackIcon = { + viewBox: "0 0 24 24", + children: ( + + + + + + ), +}; diff --git a/src/primitives/icons/createIcon.tsx b/src/primitives/icons/createIcon.tsx new file mode 100644 index 00000000..368e410c --- /dev/null +++ b/src/primitives/icons/createIcon.tsx @@ -0,0 +1,66 @@ +// Credits to https://github.com/chakra-ui/chakra-ui/tree/main/packages/icon +import * as React from "react"; +import { forwardRef } from "react"; +import { View } from "react-native"; + +import { AdaptIcon, AdaptIconProps } from "./AdaptIcon"; + +export interface CreateAdaptIconOptions { + /** + * The icon `svg` viewBox + * + * @default "0 0 24 24" + */ + viewBox?: string; + /** + * The `svg` path or group element + * + * @type React.ReactNode | React.ReactNode[] + */ + path?: React.ReactNode | React.ReactNode[]; + /** + * If the has a single path, simply copy the path's `d` attribute + */ + d?: string; + /** + * Fill color for the AdaptIcon Component. + * @default "#000" + */ + pathFill?: string; + /** + * The display name useful in the dev tools + */ + displayName?: string; + /** + * Default props automatically passed to the component; overwriteable + */ + defaultProps?: AdaptIconProps; +} + +export function createAdaptIcon(options: CreateAdaptIconOptions) { + const { + path, + viewBox = "0 0 12 12", + displayName, + defaultProps = {}, + ...restOptions + } = options; + + const AdaptIconComponent = forwardRef((props, ref) => { + return ( + + {path} + + ); + }); + + AdaptIconComponent.displayName = displayName; + + return AdaptIconComponent; +} diff --git a/src/primitives/icons/index.ts b/src/primitives/icons/index.ts new file mode 100644 index 00000000..2c50d4b2 --- /dev/null +++ b/src/primitives/icons/index.ts @@ -0,0 +1,3 @@ +export * from "./__utils"; +export * from "./AdaptIcon"; +export * from "./createIcon"; diff --git a/src/primitives/index.ts b/src/primitives/index.ts index df197260..d1742cd3 100644 --- a/src/primitives/index.ts +++ b/src/primitives/index.ts @@ -1,5 +1,6 @@ export * from "./animated-box"; export * from "./box"; +export * from "./icons"; export * from "./rn-textinput"; export * from "./text"; export * from "./touchable"; diff --git a/src/theme/defaultTheme/icon.ts b/src/theme/defaultTheme/icon.ts new file mode 100644 index 00000000..7f5640f4 --- /dev/null +++ b/src/theme/defaultTheme/icon.ts @@ -0,0 +1,3 @@ +export const icon = { + base: "w-4 h-4", +}; diff --git a/src/theme/defaultTheme/index.ts b/src/theme/defaultTheme/index.ts index 26e561f4..a2dfc347 100644 --- a/src/theme/defaultTheme/index.ts +++ b/src/theme/defaultTheme/index.ts @@ -3,6 +3,7 @@ import { badge } from "./badge"; import { button } from "./button"; import { checkbox } from "./checkbox"; import { circularProgress } from "./circularProgress"; +import { icon } from "./icon"; import { input } from "./input"; import { meter } from "./meter"; import { progress } from "./progress"; @@ -22,6 +23,7 @@ const extendedTheme = { button, spinner, circularProgress, + icon, tag, input, tooltip, From bed24ac7adc4d5309cf64f40a90b9a060ab8ed19 Mon Sep 17 00:00:00 2001 From: Navin Moorthy Date: Mon, 1 Aug 2022 18:00:23 +0530 Subject: [PATCH 2/2] =?UTF-8?q?refactor(icons):=20=E2=99=BB=EF=B8=8F=20ren?= =?UTF-8?q?ame=20createIcon=20to=20createAdaptIcon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/primitives/icons/{createIcon.tsx => createAdaptIcon.tsx} | 0 src/primitives/icons/index.ts | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/primitives/icons/{createIcon.tsx => createAdaptIcon.tsx} (100%) diff --git a/src/primitives/icons/createIcon.tsx b/src/primitives/icons/createAdaptIcon.tsx similarity index 100% rename from src/primitives/icons/createIcon.tsx rename to src/primitives/icons/createAdaptIcon.tsx diff --git a/src/primitives/icons/index.ts b/src/primitives/icons/index.ts index 2c50d4b2..f1a0632a 100644 --- a/src/primitives/icons/index.ts +++ b/src/primitives/icons/index.ts @@ -1,3 +1,3 @@ export * from "./__utils"; export * from "./AdaptIcon"; -export * from "./createIcon"; +export * from "./createAdaptIcon";