@cypress-design/react-icon 0.1.0

package/generate-icons.js

@@ -0,0 +1,61 @@
+const path = require('path');
+const dedent = require('dedent');
+const { promises: fs } = require('fs');
+const camelcase = require('camelcase');
+const { iconsMetadata, iconSet } = require('@cypress-design/icon-registry');
+
+const iconsComponents = Object.keys(iconsMetadata).map((name) => {
+  const pascalCaseName = camelcase(name, { pascalCase: true });
+  const iconMetadata = iconsMetadata[name];
+  const availableIds = iconMetadata.availableSizes.map(
+    (size) => `${camelcase(name)}X${size}`
+  );
+
+  const iconBodies = iconSet.reduce((acc, icon) => {
+    const sizeIndex = availableIds.indexOf(icon.name);
+    if (sizeIndex > -1) {
+      acc[iconMetadata.availableSizes[sizeIndex]] = icon.data;
+    }
+    return acc;
+  }, {});
+  return dedent`
+  export const Icon${pascalCaseName}: React.FC<
+    Omit<iconsRegistry.Icon${pascalCaseName}Props, 'name'> & React.SVGProps<SVGSVGElement>
+  > = (props) => {
+    const { sizeWithDefault: size, compiledClasses } = iconsRegistry.getComponentAttributes({ ...(props as any), availableSizes: ${JSON.stringify(
+      iconMetadata.availableSizes
+    )} })
+    const iconBodies: Record<string, string> = ${JSON.stringify(
+      iconBodies,
+      null,
+      2
+    )}
+    const body = iconBodies[size]
+    if(!body){
+      throw Error(\`Icon "${name}" is not available in size ${'$'}{size}\`)
+    }
+    return React.createElement('svg', compileReactIconProperties({
+      ...props,
+      size,
+      body,
+      compiledClasses
+    }))
+  }
+  `;
+});
+
+writeFile(`
+import * as iconsRegistry from '@cypress-design/icon-registry'
+import { compileReactIconProperties } from './compileProperties'
+import * as React from 'react';
+
+${iconsComponents.join('\n\n\n')}
+`);
+
+async function writeFile(fileContents) {
+  await fs.writeFile(
+    path.resolve(__dirname, './TreeShakableIcons.ts'),
+    fileContents,
+    'utf-8'
+  );
+}

package/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Icon';
+export * from './TreeShakableIcons';

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@cypress-design/react-icon",
+  "version": "0.1.0",
+  "files": [
+    "*"
+  ],
+  "typings": "./dist/index.d.ts",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "scripts": {
+    "build": "yarn build:codegen && yarn build:module && yarn build:types",
+    "build:codegen": "node ./generate-icons.js",
+    "build:module": "rollup -c ./rollup.config.js",
+    "build:types": "tsc --project ./tsconfig.build.json"
+  },
+  "dependencies": {
+    "@cypress-design/icon-registry": "^0.1.0"
+  },
+  "devDependencies": {
+    "camelcase": "^6.3.0",
+    "dedent": "^0.7.0"
+  },
+  "license": "MIT"
+}

package/rollup.config.js

@@ -0,0 +1,3 @@
+import rootRollupConfig from '../../root.rollup.config';
+
+export default rootRollupConfig({ input: './index.ts' });

package/tsconfig.build.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.react.build.json",
+  "include": ["./Icon.tsx", "./index.ts"],
+  "compilerOptions": {
+    "outDir": "dist",
+  }
+}

package/tsconfig.json

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