@epilot360/icons 1.11.3 → 1.11.4

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

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

package/src/react/Visibility/index.tsx

@@ -1,22 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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

package/src/react/index.ts

@@ -1,94 +0,0 @@
-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 './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 './EpilotIcon';

package/src/react/types.ts

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

package/src/stories/Readme.mdx

@@ -1,69 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,48 +0,0 @@
-.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

@@ -1,89 +0,0 @@
-/* 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>
-  );
-};

package/src/stories/util.ts

@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { FC } from 'react';
-
-import { IconProps } from '../types';
-
-type IconComponent = FC<IconProps>;
-
-export const generateStory = (component: FC<IconProps>) => {
-  const meta: Meta<IconComponent> = {
-    title: `Icons/${component.displayName}`,
-    component: component,
-    parameters: {
-      layout: 'centered',
-      docs: {
-        canvas: {
-          sourceState: 'shown',
-        },
-      },
-    },
-    tags: ['autodocs'],
-    argTypes: {
-      fill: { control: 'color' },
-      width: { control: 'number' },
-      height: { control: 'number' },
-      size: { control: 'number' },
-      variant: { control: 'radio', options: ['filled', 'outlined'] },
-    },
-  };
-
-  const story: StoryObj<IconComponent> = {
-    args: {
-      variant: 'filled',
-    },
-  };
-
-  return { meta, story };
-};

package/src/svg/Account/icon-fill.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M67-180v-586.999q0-32.664 23.277-55.941 23.277-23.278 55.941-23.278h257.564q32.664 0 55.941 23.278 23.278 23.277 23.278 55.941v85.781h330.781q32.664 0 55.941 23.278 23.278 23.277 23.278 55.941V-180q0 33.257-23.278 56.238-23.277 22.98-55.941 22.98H146.218q-32.664 0-55.941-22.98Q66.999-146.743 66.999-180Zm73 6.218h105v-105H140v105Zm0-165h105v-105H140v105Zm0-165h105v-105H140v105Zm0-165h105v-105H140v105Zm165 495h105v-105H305v105Zm0-165h105v-105H305v105Zm0-165h105v-105H305v105Zm0-165h105v-105H305v105Zm165 495h350v-435H470v105h80v60h-80v105h80v60h-80v105Zm185-270v-60h60v60h-60Zm0 165v-60h60v60h-60Z"/></svg>

package/src/svg/Account/icon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M67-180v-586.999q0-32.664 23.277-55.941 23.277-23.278 55.941-23.278h257.564q32.664 0 55.941 23.278 23.278 23.277 23.278 55.941v85.781h330.781q32.664 0 55.941 23.278 23.278 23.277 23.278 55.941V-180q0 33.257-23.278 56.238-23.277 22.98-55.941 22.98H146.218q-32.664 0-55.941-22.98Q66.999-146.743 66.999-180Zm73 6.218h105v-105H140v105Zm0-165h105v-105H140v105Zm0-165h105v-105H140v105Zm0-165h105v-105H140v105Zm165 495h105v-105H305v105Zm0-165h105v-105H305v105Zm0-165h105v-105H305v105Zm0-165h105v-105H305v105Zm165 495h350v-435H470v105h80v60h-80v105h80v60h-80v105Zm185-270v-60h60v60h-60Zm0 165v-60h60v60h-60Z"/></svg>

package/src/svg/Account/index.ts

@@ -1,12 +0,0 @@
-import type { IconProps } from '../../types';
-
-import FilledSVG from './icon-fill.svg';
-import OutlinedSVG from './icon.svg';
-
-export const AccountSVG = (opts?: IconProps): string => {
-  const variant = opts?.variant ?? 'filled';
-
-  return variant === 'outlined' ? OutlinedSVG : FilledSVG;
-};
-
-export default AccountSVG;

package/src/svg/Add/icon-fill.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M440.391-440.391H225.478q-16.707 0-28.158-11.501-11.451-11.502-11.451-28.283 0-16.782 11.451-28.108t28.158-11.326h214.913v-214.913q0-16.636 11.501-28.405 11.502-11.769 28.283-11.769 16.782 0 28.108 11.769t11.326 28.405v214.913h214.913q16.636 0 28.405 11.501 11.769 11.502 11.769 28.283 0 16.782-11.769 28.108t-28.405 11.326H519.609v214.913q0 16.707-11.501 28.158-11.502 11.451-28.283 11.451-16.782 0-28.108-11.451t-11.326-28.158v-214.913Z"/></svg>

package/src/svg/Add/icon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M440.391-440.391H225.478q-16.707 0-28.158-11.501-11.451-11.502-11.451-28.283 0-16.782 11.451-28.108t28.158-11.326h214.913v-214.913q0-16.636 11.501-28.405 11.502-11.769 28.283-11.769 16.782 0 28.108 11.769t11.326 28.405v214.913h214.913q16.636 0 28.405 11.501 11.769 11.502 11.769 28.283 0 16.782-11.769 28.108t-28.405 11.326H519.609v214.913q0 16.707-11.501 28.158-11.502 11.451-28.283 11.451-16.782 0-28.108-11.451t-11.326-28.158v-214.913Z"/></svg>