@cypress-design/react-icon 0.18.1 → 0.19.0

package/generate-icons.js

@@ -56,7 +56,7 @@ ${iconsComponents.join('\n\n\n')}
 
 async function writeFile(fileContents) {
   await fs.writeFile(
-    path.resolve(__dirname, './TreeShakableIcons.ts'),
+    path.resolve(__dirname, './_TreeShakableIcons.ts'),
     fileContents,
     'utf-8'
   )

package/index.ts

@@ -2,6 +2,6 @@ import type { iconsMetadata } from '@cypress-design/icon-registry'
 export type { WindiColor } from '@cypress-design/icon-registry'
 export { default } from './Icon'
 export { compileReactIconProperties } from './compileProperties'
-export * from './TreeShakableIcons'
+export * from './_TreeShakableIcons'
 
 export type IconId = keyof typeof iconsMetadata

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cypress-design/react-icon",
-	"version": "0.18.1",
+	"version": "0.19.0",
 	"files": [
 		"*"
 	],
@@ -20,10 +20,11 @@
 		"build:types": "tsc --project ./tsconfig.build.json"
 	},
 	"dependencies": {
-		"@cypress-design/icon-registry": "^0.20.3"
+		"@cypress-design/icon-registry": "^0.21.0"
 	},
 	"devDependencies": {
-		"@types/lodash": "^4.14.182",
+		"@cypress-design/css": "*",
+		"@types/lodash": "^4.14.192",
 		"lodash": "^4.17.21",
 		"dedent": "^0.7.0"
 	},

package/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "../../../tsconfig.react.json",
+  "compilerOptions": {
+    "rootDir": "../"
+  },
   "include": ["*.tsx", "*.ts"]
 }

package/Icon.stories.mdx

@@ -1,113 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story, Description } from '@storybook/addon-docs'
-import { iconsMetadata } from '@cypress-design/icon-registry';
-import { version } from "./package.json";
-import changelog from "./CHANGELOG.md";
-
-import { Icon } from './Icon'
-
-<h1>Icon<span className="text-lg font-normal"> - v{version}</span></h1>
-
-<Meta
-  title="Icon"
-  component={Icon}
-  argTypes={{
-    name: {
-      control: { type: 'select' },
-    },
-    size: {
-      control: { type: 'select' },
-    },
-    strokeColor: {
-      control: { type: 'select' },
-    },
-    fillColor: {
-      control: { type: 'select' },
-    },
-    secondaryStrokeColor: {
-      control: { type: 'select' },
-    },
-    secondaryFillColor: {
-      control: { type: 'select' },
-    },
-  }}
-  parameters={{
-    design: {
-      type: "figma",
-      url: 'https://www.figma.com/file/1WJ3GVQyMV5e7xVxPg3yID/Design-System?node-id=864%3A11',
-    }
-  }}
-/>
-
-<Canvas>
-  <Story name="Icon">
-    {(args) => {
-      const name = args.name ?? 'general-placeholder'
-      if(args.size && !iconsMetadata[name]?.availableSizes.includes(args.size)) {
-        return <p className="text-red-500 bg-red-50">Not available at this size</p>
-      }
-      return <Icon {...{...args, name }} className="m-2"/>
-    }}
-  </Story>
-</Canvas>
-
-<ArgsTable exclude={/^(hover|focus|hocus)/g} />
-
-## Usage
-
-The simple way using the Icon component
-
-```tsx
-import { Icon } from '@cypress-design/react-icon'
-
-export const MyButtonWithIcon = () => {
-  return (<button>
-    <Icon name="book" size="16" strokeColor="blue-600" fillColor="red-200" className="bg-red-100" />Read
-  </button>)
-}
-```
-
-The tree-shakable way (more optimized)
-
-```tsx
-import { IconBook } from '@cypress-design/react-icon'
-
-export const MyButtonWithIcon = () => {
-  return (<button>
-    <IconBook size="16" strokeColor="indigo-600" fillColor="red-200" />
-  </button>)
-}
-```
-
-Should you need to change the color of the icon on `hover` or `focus` prefix the props with these words.
-
-Here, the `strokeColor` will change on hover from indigo to jade
-
-```tsx
-import { IconBook } from '@cypress-design/react-icon'
-
-export const MyButtonWithIcon = () => {
-  return (<button>
-    <IconBook size="16" strokeColor="indigo-600" hoverStrokeColor="jade-600" />
-  </button>)
-}
-```
-
-If you need the `hover` or `focus` effect to be triggered on the parent group, use `interactiveColorsOnGroup`. 
-This prop will change all the pseudo prefixes to be group focused instead of triggered by the icon itself.
-
-To achieve the same goal, in WindiCSS, we would use `group-hover:` instead of `hover:`.
-
-```tsx
-import { IconBook } from '@cypress-design/react-icon'
-
-export const MyButtonWithIcon = () => {
-  return (<button className="group hover:text-jade-800">
-    <IconBook size="16" strokeColor="indigo-600" hoverStrokeColor="jade-600" interactiveColorsOnGroup />
-    Book
-  </button>)
-}
-```
-
-<Description>
-  {changelog.replace(/^# .+/, '## Changelog')}
-</Description>