add: create not selected icons

package.json

@@ -45,7 +45,7 @@
 		"chromatic": "^10.6.1",
 		"css-loader": "^6.7.3",
 		"husky": "^8.0.2",
-		"postcss": "^8.4.33",
+		"postcss": "^8.4.38",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"storybook": "^7.6.7",

sh-scripts/gen_icon_c.sh

@@ -31,7 +31,7 @@ for svg_file in "$SVG_FOLDER"/*.svg; do
 
     # Use echo with a here document to insert the content
     echo "import React from 'react'" > "$FILE_PATH"
-    echo "import { IconProps } from '../../types/Icons/types'" >> "$FILE_PATH"
+    echo "import { IconProps } from '../../types'" >> "$FILE_PATH"
     echo "import BaseIcon from '../components/BaseIcon'" >> "$FILE_PATH"
     echo "import DEFAULT_ICON from '../constant'" >> "$FILE_PATH"
     echo "" >> "$FILE_PATH"

src/Icons/culling/CheckFillCircleIcon.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { IconProps } from '../../../types'
+import BaseIcon from '../../components/BaseIcon'
+import DEFAULT_ICON from '../../constant'
+
+type IconVariant = 'primary'
+type Props = Omit<IconProps, 'variant'> & {
+	variant?: IconVariant
+	fillColor?: string
+}
+
+export const CheckFillCircleIcon = React.forwardRef<SVGSVGElement, Props>((props, forwardedRef) => {
+	//props
+	const {
+		variant = 'primary',
+		color = DEFAULT_ICON.COLOR,
+		fillColor = DEFAULT_ICON.FILL_COLOR,
+		size = DEFAULT_ICON.SIZE,
+		inActive = false,
+		...restProps
+	} = props
+
+	const modifiedColor = inActive ? DEFAULT_ICON.INACTIVE_COLOR : color
+
+	const iconSize = typeof size === 'number' ? `${size}px` : size
+
+	// variants
+	const primary = (
+		<svg style={{ width: iconSize }} {...restProps} ref={forwardedRef} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+			<circle cx='10' cy='10' r='10' fill={fillColor} />
+			<path
+				d='M15 9.54286V10.0029C14.9994 11.0811 14.6503 12.1302 14.0047 12.9938C13.3591 13.8573 12.4516 14.4891 11.4177 14.7948C10.3837 15.1005 9.27863 15.0638 8.26724 14.6902C7.25584 14.3165 6.39233 13.6259 5.80548 12.7214C5.21863 11.8169 4.9399 10.7469 5.01084 9.67102C5.08178 8.59514 5.4986 7.57103 6.19914 6.7514C6.89968 5.93177 7.84639 5.36055 8.89809 5.12293C9.9498 4.88532 11.0501 4.99403 12.035 5.43286'
+				stroke={modifiedColor}
+				stroke-linecap='round'
+				stroke-linejoin='round'
+			/>
+			<path d='M15 6.00293L10 11.0079L8.5 9.50793' stroke={modifiedColor} stroke-linecap='round' stroke-linejoin='round' />
+		</svg>
+	)
+	return <BaseIcon variants={{ primary }} variant={variant} />
+})

src/Icons/culling/NotSelectedCircleIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { IconProps } from '../../../types'
+import BaseIcon from '../../components/BaseIcon'
+import DEFAULT_ICON from '../../constant'
+
+type IconVariant = 'primary'
+type Props = Omit<IconProps, 'variant'> & {
+	variant?: IconVariant
+}
+
+export const NotSelectedCircleIcon = React.forwardRef<SVGSVGElement, Props>((props, forwardedRef) => {
+	//props
+	const { variant = 'primary', color = DEFAULT_ICON.COLOR, size = DEFAULT_ICON.SIZE, inActive = false, ...restProps } = props
+
+	const modifiedColor = inActive ? DEFAULT_ICON.INACTIVE_COLOR : color
+
+	const iconSize = typeof size === 'number' ? `${size}px` : size
+
+	// variants
+	const primary = (
+		<svg style={{ width: iconSize }} {...restProps} ref={forwardedRef} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+			<path
+				d='M19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.75329 19.5 0.5 15.2467 0.5 10C0.5 4.7533 4.7533 0.5 10 0.5C15.2467 0.5 19.5 4.75329 19.5 10Z'
+				stroke={modifiedColor}
+			/>
+		</svg>
+	)
+	return <BaseIcon variants={{ primary }} variant={variant} />
+})

src/Icons/culling/index.ts

@@ -3,6 +3,7 @@ export * from './BorderSquareIcon';
 export * from './CardBgIcon';
 export * from './CartIcon';
 export * from './CelebrateIcon';
+export * from './CheckFillCircleIcon';
 export * from './ComputerBgIcon';
 export * from './ContactSupportIcon';
 export * from './CouponIcon';
@@ -61,6 +62,7 @@ export * from './NoDuplicateIcon';
 export * from './NoneIcon';
 export * from './NoneSelectedIcon';
 export * from './NotAllowIcon';
+export * from './NotSelectedCircleIcon';
 export * from './RecullIcon';
 export * from './ReloadIcon';
 export * from './ReloadWarningIcon';

src/Icons/general/CheckCircleBgIcon.tsx

@@ -48,6 +48,7 @@ export const CheckCircleBgIcon = React.forwardRef<SVGSVGElement, Props>((props,
 			</defs>
 		</svg>
 	)
+
 	return <BaseIcon variants={{ primary }} variant={variant} />
 })
 

src/index.ts

@@ -1,2 +1,2 @@
 export * from './icons'
-export * from './img'
+// export * from './img'

src/stories/CheckFillCircleIcon.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { CheckFillCircleIcon } from '../icons'
+
+const meta: Meta<typeof CheckFillCircleIcon> = {
+	component: CheckFillCircleIcon,
+	title: 'culling/CheckFillCircleIcon',
+	decorators: [
+		(Story) => (
+			<div style={{ margin: '1rem' }}>
+				<Story />
+			</div>
+		),
+	],
+}
+
+export default meta
+type Story = StoryObj<typeof CheckFillCircleIcon>
+
+export const Default: Story = {}
+
+export const Red: Story = {
+	args: {
+		color: 'red',
+	},
+}
+
+export const inActive: Story = {
+	args: {
+		inActive: true,
+	},
+}
+
+export const Large: Story = {
+	args: {
+		size: 30,
+	},
+}

src/stories/NotSelectedCircleIcon.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { NotSelectedCircleIcon } from '../icons'
+
+const meta: Meta<typeof NotSelectedCircleIcon> = {
+	component: NotSelectedCircleIcon,
+	title: 'culling/NotSelectedCircleIcon',
+	decorators: [
+		(Story) => (
+			<div style={{ margin: '1rem' }}>
+				<Story />
+			</div>
+		),
+	],
+}
+
+export default meta
+type Story = StoryObj<typeof NotSelectedCircleIcon>
+
+export const Default: Story = {}
+
+export const Red: Story = {
+	args: {
+		color: 'red',
+	},
+}
+
+export const inActive: Story = {
+	args: {
+		inActive: true,
+	},
+}
+
+export const Large: Story = {
+	args: {
+		size: 30,
+	},
+}

src/styles/tailwind.css

@@ -566,10 +566,6 @@ video {
   top: 0px;
 }
 
-.block {
-  display: block;
-}
-
 .w-\[1000px\] {
   width: 1000px;
 }

tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+	loader: {
+		'.jpg': 'base64',
+		'.png': 'base64',
+		'.svg': 'file',
+		'.webp': 'file',
+	},
+	sourcemap: true,
+	treeshake: true,
+	external: ['./src/img/**/*'],
+})

types.d.ts

@@ -19,10 +19,3 @@ export interface IconProps extends React.SVGAttributes<SVGElement> {
 export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
 	size?: number | string
 }
-
-declare module '*.png' {
-	const value: any
-	export = value
-}
-
-declare module '*.png'