feat: refactor icons (#6)

.changeset/eight-houses-cry.md

@@ -0,0 +1,6 @@
+---
+"@just_testing13/components": patch
+"@just_testing13/coin-icons": patch
+---
+
+Rui/refactor icons

package.json

@@ -8,11 +8,11 @@
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "lint": "eslint packages/**/src --ext .ts,.tsx --config .eslintrc.json --cache",
+    "lint": "eslint packages/**/src packages/**/**/src --ext .ts,.tsx --config .eslintrc.json --cache",
     "lint:fix": "pnpm lint --fix",
     "typecheck": "turbo typecheck",
-    "format:check": "prettier --check packages/**/src --cache",
-    "format:write": "prettier --write packages/**/src --cache",
+    "format:check": "prettier --check packages/**/src packages/**/**/src --cache",
+    "format:write": "prettier --write packages/**/src packages/**/**/src --cache",
     "clean": "turbo run clean && rm -rf node_modules",
     "build": "turbo run build",
     "build:sb": "storybook build",

packages/components/package.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "@just_testing13/hooks": "workspace:*",
     "@just_testing13/icons": "workspace:*",
+    "@just_testing13/coin-icons": "workspace:*",
     "@just_testing13/theme": "workspace:*",
     "@react-aria/accordion": "3.0.0-alpha.20",
     "@react-aria/breadcrumbs": "^3.5.4",

packages/components/src/CoinIcon/CoinIcon.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryFn, StoryObj } from '@storybook/react';
-import * as coins from '@just_testing13/icons/src/svg/coin';
+import * as coins from '@just_testing13/coin-icons';
 
 import { Flex } from '../Flex';
 

packages/components/src/CoinIcon/CoinIcon.tsx

@@ -1,7 +1,6 @@
 import { forwardRef } from 'react';
-import { IconProps } from '@just_testing13/icons';
-
-import * as coins from '../../../icons/src/svg/coin';
+import { IconProps } from '@just_testing13/coin-icons';
+import * as coins from '@just_testing13/coin-icons';
 
 import { FallbackIcon } from './FallbackIcon';
 import { LPCoinIcon } from './LPCoinIcon';

packages/components/src/TokenInput/TokenInput.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import * as coins from '@just_testing13/icons/src/svg/coin';
+import * as coins from '@just_testing13/coin-icons';
 import { useState } from 'react';
 import { mergeProps } from '@react-aria/utils';
 

packages/icons/coin/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@just_testing13/coin-icons",
+  "version": "0.0.0",
+  "main": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "sideEffects": false,
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --ext ts,tsx --fix",
+    "build": "tsup src/index.ts --dts",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "clean-package": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@just_testing13/icon": "workspace:*"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}

packages/icons/src/svg/coin/common/BTC.tsx → packages/icons/coin/src/common/BTC.tsx

@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
-
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const BTC = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/common/ETH.tsx → packages/icons/coin/src/common/ETH.tsx

@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
-
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const ETH = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/common/USDT.tsx → packages/icons/coin/src/common/USDT.tsx

@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
-
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const USDT = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'>

packages/icons/coin/src/index.ts

@@ -0,0 +1,4 @@
+export * from './common';
+export * from './polkadot';
+export { Icon } from '@just_testing13/icon';
+export type { IconProps, IconSize } from '@just_testing13/icon';

packages/icons/src/svg/coin/polkadot/AUSD.tsx → packages/icons/coin/src/polkadot/AUSD.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const AUSD = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/DOT.tsx → packages/icons/coin/src/polkadot/DOT.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const DOT = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 45 45' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/IBTC.tsx → packages/icons/coin/src/polkadot/IBTC.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const IBTC = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/INTR.tsx → packages/icons/coin/src/polkadot/INTR.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const INTR = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/KAR.tsx → packages/icons/coin/src/polkadot/KAR.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const KAR = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/KBTC.tsx → packages/icons/coin/src/polkadot/KBTC.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const KBTC = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/KINT.tsx → packages/icons/coin/src/polkadot/KINT.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const KINT = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/KSM.tsx → packages/icons/coin/src/polkadot/KSM.tsx

@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
-
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const KSM = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/LDOT.tsx → packages/icons/coin/src/polkadot/LDOT.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const LDOT = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/LKSM.tsx → packages/icons/coin/src/polkadot/LKSM.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const LKSM = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/LSKSM.tsx → packages/icons/coin/src/polkadot/LSKSM.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const LSKSM = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/MOVR.tsx → packages/icons/coin/src/polkadot/MOVR.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const MOVR = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/SKSM.tsx → packages/icons/coin/src/polkadot/SKSM.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const SKSM = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/VKSM.tsx → packages/icons/coin/src/polkadot/VKSM.tsx

@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
-
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const VKSM = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/qDOT.tsx → packages/icons/coin/src/polkadot/qDOT.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qDOT = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/qIBTC.tsx → packages/icons/coin/src/polkadot/qIBTC.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qIBTC = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/qINTR.tsx → packages/icons/coin/src/polkadot/qINTR.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qINTR = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/qKBTC.tsx → packages/icons/coin/src/polkadot/qKBTC.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qKBTC = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/qKINT.tsx → packages/icons/coin/src/polkadot/qKINT.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qKINT = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/qKSM.tsx → packages/icons/coin/src/polkadot/qKSM.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qKSM = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/qMOVR.tsx → packages/icons/coin/src/polkadot/qMOVR.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qMOVR = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/svg/coin/polkadot/qUSDT.tsx → packages/icons/coin/src/polkadot/qUSDT.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qUSDT = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

packages/icons/src/stories/coin.stories.tsx → packages/icons/coin/src/stories/index.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { Icon, IconProps } from '@just_testing13/icon';
 
-import * as SVGS from '../svg/coin';
-import { Icon, IconProps } from '../Icon';
+import * as SVGS from '../';
 
 export const Default: StoryObj<IconProps> = {
   args: {

packages/icons/tsconfig.json → packages/icons/coin/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../../tsconfig.json",
   "compilerOptions": { "baseUrl": ".", "declaration": false },
   "include": ["src"]
 }

packages/icons/package.json → packages/icons/common/package.json

@@ -16,18 +16,15 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-dom": ">=18",
-    "styled-components": ">=6.0.0"
+    "react-dom": ">=18"
   },
   "devDependencies": {
-    "@types/styled-components": "^5.1.26",
     "clean-package": "^2.2.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^6.0.7"
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@just_testing13/theme": "workspace:*"
+    "@just_testing13/icon": "workspace:*"
   },
-  "clean-package": "../../clean-package.config.json"
+  "clean-package": "../../../clean-package.config.json"
 }