@epilot360/icons 1.12.1 → 1.12.2

package/src/react/TwoColumns/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { TwoColumns } from '.';
+
+const story = generateStory(TwoColumns);
+
+export default {
+  title: 'Icons/TwoColumns',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/Upload/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { ReactComponent as Filled } from '../../svg/Upload/icon-fill.svg';
+import { ReactComponent as Outlined } from '../../svg/Upload/icon.svg';
+import { defaultIconProps } from '../common';
+import type { IconPropsReact } from '../types';
+
+const name = 'upload';
+
+export function Upload(props: IconPropsReact) {
+  const { variant, ...restProps } = {
+    ...defaultIconProps,
+    ...props,
+  };
+  const IconComponent = variant === 'outlined' ? Outlined : Filled;
+
+  const overrides = props.size ? { width: props.size, height: props.size } : {};
+
+  return <IconComponent aria-label={name} {...restProps} {...overrides} />;
+}
+
+export default Upload;

package/src/react/Upload/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { Upload } from '.';
+
+const story = generateStory(Upload);
+
+export default {
+  title: 'Icons/Upload',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/Visibility/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { ReactComponent as Filled } from '../../svg/Visibility/icon-fill.svg';
+import { ReactComponent as Outlined } from '../../svg/Visibility/icon.svg';
+import { defaultIconProps } from '../common';
+import type { IconPropsReact } from '../types';
+
+const name = 'visibility';
+
+export function Visibility(props: IconPropsReact) {
+  const { variant, ...restProps } = {
+    ...defaultIconProps,
+    ...props,
+  };
+  const IconComponent = variant === 'outlined' ? Outlined : Filled;
+
+  const overrides = props.size ? { width: props.size, height: props.size } : {};
+
+  return <IconComponent aria-label={name} {...restProps} {...overrides} />;
+}
+
+export default Visibility;

package/src/react/Visibility/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { Visibility } from '.';
+
+const story = generateStory(Visibility);
+
+export default {
+  title: 'Icons/Visibility',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/VisibilityOff/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { ReactComponent as Filled } from '../../svg/VisibilityOff/icon-fill.svg';
+import { ReactComponent as Outlined } from '../../svg/VisibilityOff/icon.svg';
+import { defaultIconProps } from '../common';
+import type { IconPropsReact } from '../types';
+
+const name = 'visibility_off';
+
+export function VisibilityOff(props: IconPropsReact) {
+  const { variant, ...restProps } = {
+    ...defaultIconProps,
+    ...props,
+  };
+  const IconComponent = variant === 'outlined' ? Outlined : Filled;
+
+  const overrides = props.size ? { width: props.size, height: props.size } : {};
+
+  return <IconComponent aria-label={name} {...restProps} {...overrides} />;
+}
+
+export default VisibilityOff;

package/src/react/VisibilityOff/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { VisibilityOff } from '.';
+
+const story = generateStory(VisibilityOff);
+
+export default {
+  title: 'Icons/VisibilityOff',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/Warning/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { ReactComponent as Filled } from '../../svg/Warning/icon-fill.svg';
+import { ReactComponent as Outlined } from '../../svg/Warning/icon.svg';
+import { defaultIconProps } from '../common';
+import type { IconPropsReact } from '../types';
+
+const name = 'warning';
+
+export function Warning(props: IconPropsReact) {
+  const { variant, ...restProps } = {
+    ...defaultIconProps,
+    ...props,
+  };
+  const IconComponent = variant === 'outlined' ? Outlined : Filled;
+
+  const overrides = props.size ? { width: props.size, height: props.size } : {};
+
+  return <IconComponent aria-label={name} {...restProps} {...overrides} />;
+}
+
+export default Warning;

package/src/react/Warning/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { Warning } from '.';
+
+const story = generateStory(Warning);
+
+export default {
+  title: 'Icons/Warning',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/Webhook/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { ReactComponent as Filled } from '../../svg/Webhook/icon-fill.svg';
+import { ReactComponent as Outlined } from '../../svg/Webhook/icon.svg';
+import { defaultIconProps } from '../common';
+import type { IconPropsReact } from '../types';
+
+const name = 'webhook';
+
+export function Webhook(props: IconPropsReact) {
+  const { variant, ...restProps } = {
+    ...defaultIconProps,
+    ...props,
+  };
+  const IconComponent = variant === 'outlined' ? Outlined : Filled;
+
+  const overrides = props.size ? { width: props.size, height: props.size } : {};
+
+  return <IconComponent aria-label={name} {...restProps} {...overrides} />;
+}
+
+export default Webhook;

package/src/react/Webhook/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { Webhook } from '.';
+
+const story = generateStory(Webhook);
+
+export default {
+  title: 'Icons/Webhook',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/Workflow/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { ReactComponent as Filled } from '../../svg/Workflow/icon-fill.svg';
+import { ReactComponent as Outlined } from '../../svg/Workflow/icon.svg';
+import { defaultIconProps } from '../common';
+import type { IconPropsReact } from '../types';
+
+const name = 'workflow';
+
+export function Workflow(props: IconPropsReact) {
+  const { variant, ...restProps } = {
+    ...defaultIconProps,
+    ...props,
+  };
+  const IconComponent = variant === 'outlined' ? Outlined : Filled;
+
+  const overrides = props.size ? { width: props.size, height: props.size } : {};
+
+  return <IconComponent aria-label={name} {...restProps} {...overrides} />;
+}
+
+export default Workflow;

package/src/react/Workflow/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { Workflow } from '.';
+
+const story = generateStory(Workflow);
+
+export default {
+  title: 'Icons/Workflow',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/common.ts

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types';
+
+export const defaultIconProps: IconProps = {
+  width: 20,
+  height: 20,
+  fill: 'currentColor',
+  variant: 'filled',
+};

package/src/react/index.ts

@@ -0,0 +1,132 @@
+export * from './Epilot';
+export * from './Edit';
+export * from './OpenInNew';
+export * from './Share';
+export * from './Delete';
+export * from './Add';
+export * from './AddCircle';
+export * from './Check';
+export * from './CheckCircle';
+export * from './Warning';
+export * from './Error';
+export * from './Info';
+export * from './Help';
+export * from './ContentCopy';
+export * from './DataObject';
+export * from './Notifications';
+export * from './Visibility';
+export * from './VisibilityOff';
+export * from './Close';
+export * from './ExpandMore';
+export * from './ExpandLess';
+export * from './ChevronRight';
+export * from './ChevronLeft';
+export * from './Search';
+export * from './Settings';
+export * from './Calendar';
+export * from './Explore';
+export * from './DragIndicator';
+export * from './Download';
+export * from './Refresh';
+export * from './Menu';
+export * from './Link';
+export * from './Login';
+export * from './Logout';
+export * from './Lock';
+export * from './LockOpen';
+export * from './Table';
+export * from './Attributes';
+export * from './ArrowRight';
+export * from './ArrowLeft';
+export * from './Dashboard';
+export * from './Opportunity';
+export * from './Order';
+export * from './Contact';
+export * from './Account';
+export * from './Contract';
+export * from './Message';
+export * from './File';
+export * from './Note';
+export * from './Document';
+export * from './Templates';
+export * from './Product';
+export * from './Price';
+export * from './Tax';
+export * from './Submission';
+export * from './Partner';
+export * from './Partnering';
+export * from './Meter';
+export * from './Entity';
+export * from './Webhook';
+export * from './Design';
+export * from './Workflow';
+export * from './Phase';
+export * from './Automation';
+export * from './Journey';
+export * from './Relations';
+export * from './Availability';
+export * from './Filter';
+export * from './Sort';
+export * from './Desktop';
+export * from './Phone';
+export * from './Image';
+export * from './Pause';
+export * from './Play';
+export * from './Alarm';
+export * from './ArrowCircleLeft';
+export * from './MoreVert';
+export * from './MoreHoriz';
+export * from './QuestionMark';
+export * from './Skip';
+export * from './Checklist';
+export * from './PersonCheck';
+export * from './Comment';
+export * from './Star';
+export * from './Exclamation';
+export * from './Primary';
+export * from './PriceMapping';
+export * from './Reply';
+export * from './Resize';
+export * from './Portal';
+export * from './ThumbUp';
+export * from './ThumbDown';
+export * from './EntityBuilder';
+export * from './Connection';
+export * from './CheckBox';
+export * from './Number';
+export * from './RadioButton';
+export * from './TextField';
+export * from './Address';
+export * from './Signature';
+export * from './Upload';
+export * from './Calculator';
+export * from './Payment';
+export * from './Consent';
+export * from './Paragraph';
+export * from './Action';
+export * from './AttributeEdit';
+export * from './Summary';
+export * from './Solar';
+export * from './SDK';
+export * from './Lookup';
+export * from './PreviousProvider';
+export * from './SuccessConfirmation';
+export * from './Category';
+export * from './ExpandContent';
+export * from './CollapseContent';
+export * from './Map';
+export * from './Sun';
+export * from './Frame';
+export * from './EnergySavingsLeaf';
+export * from './AvgTime';
+export * from './Call';
+export * from './Mail';
+export * from './Cable';
+export * from './Stack';
+export * from './TwoColumns';
+export * from './Diagram';
+export * from './Repeat';
+export * from './MoveDown';
+export * from './StepOver';
+
+export * from './EpilotIcon';

package/src/react/types.ts

@@ -0,0 +1,5 @@
+import { SVGProps } from 'react';
+
+import { IconProps } from '../types';
+
+export interface IconPropsReact extends IconProps, SVGProps<SVGElement> {}

package/src/stories/Readme.mdx

@@ -0,0 +1,69 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Readme" />
+
+# @epilot360/icons
+
+[![License](http://img.shields.io/:license-mit-blue.svg)](#)
+[![npm version](https://img.shields.io/npm/v/@epilot360/icons.svg)](https://www.npmjs.com/package/@epilot360/icons)
+
+Curated set of epilot icons based on [material-symbols](https://www.npmjs.com/package/material-symbols)
+
+```
+yarn add @epilot360/icons
+```
+
+## Usage
+
+The `@epilot360/icons` package is shipped as an external system module in the 360 portal.
+
+You can import any icon as a React component by name:
+
+```tsx
+import { Edit as EditIcon, EpilotIcon } from '@epilot360/icons'
+
+<EditIcon />
+// or
+<EpilotIcon name="edit" />
+```
+
+## Usage outside 360 portal
+
+To avoid bundling the entire `@epilot360/icons` library, you can import the module directly:
+
+```tsx
+import EditIcon from '@epilot360/icons/react/Edit'
+
+<EditIcon />
+```
+
+## Using SVG
+
+To directly use svg files shipped as part of this package, e.g. with `file-loader` you can import from:
+
+```tsx
+import EditIconSVG from '@epilot360/icons/svg/Edit/icon.svg'
+import EditIconSVGFill from '@epilot360/icons/svg/Edit/icon-fill.svg'
+
+<img src={EditIconSVG} />
+```
+
+## Using svgIcon()
+
+The `svgIcon()` function returns the raw SVG as a string.
+
+```tsx
+import { svgIcon } from '@epilot360/icons';
+
+<div dangerouslySetInnerHTML={{ __html: svgIcon({ name: 'epilot' }) }} />
+
+<pre>
+  {svgIcon({ name: 'epilot', variant: 'filled', width: 48, height: 48, fill: 'white' })}
+</pre>
+```
+
+# All Icons
+
+import { SearchComponent } from './SearchComponent';
+
+<SearchComponent />

package/src/stories/SVGExample.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryContext, StoryObj } from '@storybook/react';
+import { codeBlock } from 'common-tags';
+
+import { SVGExample } from './SVGExample';
+
+const meta: Meta<typeof SVGExample> = {
+  title: 'SVG',
+  component: SVGExample,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'The `svgIcon()` function returns the raw SVG as a string.',
+      },
+      source: {
+        transform: (_code: string, ctx: StoryContext) => {
+          /* eslint-disable prettier/prettier */
+          const { name, variant, fill, size, width, height, xclass } = ctx.args;
+          const iconOpts = `{ name: '${name}', variant: '${variant}', fill: '${fill}'${size || width || height ? size ? `, size: '${size}'` : `, width: '${width}', height: '${height}'` : ''}${xclass ? `, xclass: '${xclass}'` : ''} }`
+
+          return codeBlock`
+          <div dangerouslySetInnerHTML={{ __html: svgIcon(${iconOpts}) }} />
+          
+          <pre>
+            {svgIcon(${iconOpts})}
+          </pre>
+          `;
+          /* eslint-enable prettier/prettier */
+        },
+      },
+      canvas: {
+        sourceState: 'shown',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    fill: { control: 'color' },
+    size: { control: 'number' },
+    width: { control: 'number' },
+    height: { control: 'number' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SVGExample>;
+
+export const Story: Story = {
+  args: {
+    name: 'edit',
+    variant: 'filled',
+    fill: '#000',
+  },
+};

package/src/stories/SVGExample.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { svgIcon } from '../svg/svgIcon';
+
+export const SVGExample = (props: Parameters<typeof svgIcon>[0]) => (
+  <>
+    <div dangerouslySetInnerHTML={{ __html: svgIcon(props) }} />
+    <pre style={{ whiteSpace: 'pre-wrap', overflowWrap: 'break-word' }}>{svgIcon(props)}</pre>
+  </>
+);

package/src/stories/Search.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/blocks';
+import { SearchComponent } from './SearchComponent';
+
+<Meta title="Search All Icons" order={20} />
+
+# Search All Icons
+
+<SearchComponent />

package/src/stories/SearchComponent.css

@@ -0,0 +1,48 @@
+.search-component .search-component__input {
+  margin-top: 2rem;
+  margin-bottom: .2rem;
+  position: relative;
+  display: flex;
+}
+
+.search-component__search_icon {
+  position: absolute;
+  top: .5rem;
+  left: .5rem;
+}
+
+.search-component .search-component__count {
+  margin-bottom: 2rem;
+}
+
+.search-component .search-component__input input {
+  font-size: 1.2rem;
+  padding: .4rem .5rem .4rem 2rem;
+  width: 100%;
+  border-radius: 1rem;
+  border: 1px solid #ccc;
+}
+
+
+.search-component .search-component__icons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  width: 100%;
+}
+
+.search-component .search-component__icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 151px;
+  height: 150px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  border-radius: 1rem;
+}
+
+.search-component .search-component__icon:hover {
+  background-color: #ccc;
+}

package/src/stories/SearchComponent.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable import/no-unresolved */
+import YAML from 'js-yaml';
+import uniqBy from 'lodash/uniqBy';
+import { SnackbarProvider, enqueueSnackbar } from 'notistack';
+import React, { FC, useMemo } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import iconConfigYaml from '../../icons.config.yaml?raw';
+import * as reactIcons from '../react';
+import { IconProps } from '../types';
+import './SearchComponent.css';
+
+// eslint-disable-next-line prettier/prettier
+const iconLib = reactIcons as unknown as { [key: string]: FC<IconProps> & { iconName: string } };
+
+interface IconConfig {
+  [Icon: string]: {
+    name: string;
+    tags: string[];
+    aliases: string[];
+  };
+}
+const iconConfig = YAML.load(iconConfigYaml) as IconConfig;
+
+export const SearchComponent = () => {
+  const [searchTerm, setSearchTerm] = React.useState('');
+
+  const icons = useMemo(() => {
+    const iconComponents = Object.keys(iconConfig)
+      .filter((iconName) => {
+        if (searchTerm) {
+          return iconConfig[iconName].aliases.some((alias) => alias.toLowerCase().includes(searchTerm.toLowerCase()));
+        }
+
+        return true;
+      })
+      .filter((iconName) => iconLib[iconName] !== undefined)
+      .map((iconName) => ({ Component: iconLib[iconName], ...iconConfig[iconName] }));
+
+    // exact match
+    const exactMatch = iconComponents.find(({ name }) => name.toLowerCase() === searchTerm.toLowerCase());
+    if (searchTerm && exactMatch) {
+      iconComponents.unshift(exactMatch);
+    }
+
+    return uniqBy(iconComponents, 'name');
+  }, [searchTerm]);
+
+  const copyNameToClipboard = (name: string) => {
+    navigator.clipboard.writeText(name);
+    enqueueSnackbar(`Copied "${name}" to clipboard`, {
+      variant: 'success',
+      anchorOrigin: { vertical: 'top', horizontal: 'center' },
+    });
+  };
+
+  return (
+    <div className="search-component">
+      <SnackbarProvider />
+
+      <div className="search-component__input">
+        <input
+          type="text"
+          placeholder="Search by name..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+        <span className="search-component__search_icon">
+          <reactIcons.Search fill="#888" />
+        </span>
+      </div>
+
+      <div className="search-component__count">{icons.length} icons</div>
+
+      <div className="search-component__icons">
+        {icons.map(({ Component: IconComponent, name }) => (
+          <div className="search-component__icon" title={name} key={name} onClick={() => copyNameToClipboard(name)}>
+            <div className="search-component__icon_icon">
+              <IconComponent width={24} height={24} />
+            </div>
+
+            <div className="search-component__icon_title">{name}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};