@cypress-design/react-icon 0.1.0

package/.gitignore

@@ -0,0 +1 @@
+TreeShakableIcons.ts

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @cypress-design/react-icon
+
+## 0.1.0
+
+### Minor Changes
+
+- [#10](https://github.com/cypress-io/cypress-design/pull/10) [`e20eea8`](https://github.com/cypress-io/cypress-design/commit/e20eea84375b7f4bd3a15a80fce3bdbfcb327981) Thanks [@elevatebart](https://github.com/elevatebart)! - Creation of vue and react icon components
+
+### Patch Changes
+
+- Updated dependencies [[`e20eea8`](https://github.com/cypress-io/cypress-design/commit/e20eea84375b7f4bd3a15a80fce3bdbfcb327981)]:
+  - @cypress-design/icon-registry@0.1.0

package/Icon.cy.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Icon, { IconObjectBookCode } from './index'
+import { mount } from 'cypress/react';
+
+describe('Icon', () => {
+  it('renders correctly', () => {
+    mount(<ul className="m-4">
+      <li className="flex items-center mb-3 px-2">
+        fillColor="red-100" - <IconObjectBookCode fillColor="red-100" className="ml-2" strokeColor="red-500" secondaryFillColor="indigo-100" secondaryStrokeColor="indigo-600"/>
+        </li>
+      <li className="flex items-center mb-3 px-2 bg-magenta-100">
+        fillColor="transparent" - <Icon name="arrow-outline-down" strokeColor="magenta-500" fillColor="transparent" className="ml-2" />
+        </li>
+      <li className="flex items-center px-2">
+        strokeColor="current" - <button className="flex gap-2 items-center m-2 bg-jade-400 hover:bg-jade-500 text-white py-1 px-2 rounded">
+          <Icon name="action-add-large" strokeColor="current" />
+          Add a new icon
+        </button>
+      </li>
+    </ul>)
+  })
+})

package/Icon.stories.mdx

@@ -0,0 +1,83 @@
+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/>
+
+## 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="blue-600" fillColor="red-200" />
+  </button>)
+}
+```
+
+<Description>
+  {changelog.replace(/^# .+/, '## Changelog')}
+</Description>

package/Icon.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import type { FunctionComponent, SVGProps } from 'react';
+import { compileIcon } from '@cypress-design/icon-registry';
+import type { IconProps } from '@cypress-design/icon-registry';
+
+type SVGPropsWithoutColorsOrSize = Omit<React.SVGProps<SVGSVGElement>, 'fill' | 'stroke' | 'fillColor' | 'strokeColor' | 'size' >
+
+export const Icon: FunctionComponent<
+  IconProps & SVGPropsWithoutColorsOrSize
+> = (props) => {
+  return React.createElement(
+    'svg',
+    compileReactIconProperties(compileIcon(props))
+  );
+};
+
+export const compileReactIconProperties = ({
+  body,
+  compiledClasses,
+  size,
+  strokeColor,
+  fillColor,
+  secondaryStrokeColor,
+  secondaryFillColor,
+  ...attributes
+}: {
+  body: string;
+  compiledClasses: string[];
+  size: string;
+  strokeColor?;
+  fillColor?;
+  secondaryStrokeColor?;
+  secondaryFillColor?;
+} & SVGPropsWithoutColorsOrSize) => {
+  const componentProps = {
+    width: size,
+    height: size,
+    fill: 'none',
+    dangerouslySetInnerHTML: {
+      __html: body,
+    },
+    ...attributes, // add all standard attributes back to the svg tag
+  };
+  if (attributes.className) {
+    compiledClasses.push(attributes.className);
+  }
+  if (compiledClasses.length) {
+    componentProps.className = compiledClasses.join(' ');
+  }
+  return componentProps;
+};
+
+export default Icon;

package/ReadMe.md

@@ -0,0 +1,50 @@
+# Icon
+
+## 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="blue-600" fillColor="red-200" />
+    </button>
+  );
+};
+```
+
+## install
+
+```bash
+npm install @cypress-design/react-icon
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/react-icon
+```

package/compileProperties.ts

@@ -0,0 +1,35 @@
+export const compileReactIconProperties = ({
+  body,
+  compiledClasses,
+  size,
+  strokeColor,
+  fillColor,
+  secondaryStrokeColor,
+  secondaryFillColor,
+  ...attributes
+}: {
+  body: string;
+  compiledClasses: string[];
+  size: string;
+  strokeColor?;
+  fillColor?;
+  secondaryStrokeColor?;
+  secondaryFillColor?;
+} & React.SVGProps<SVGSVGElement>) => {
+  const componentProps: any = {
+    width: size,
+    height: size,
+    fill: 'none',
+    dangerouslySetInnerHTML: {
+      __html: body,
+    },
+    ...attributes, // add all standard attributes back to the svg tag
+  };
+  if (attributes.className) {
+    compiledClasses.push(attributes.className);
+  }
+  if (compiledClasses.length) {
+    componentProps.className = compiledClasses.join(' ');
+  }
+  return componentProps;
+};