@westpac/ui 0.1.0 → 0.2.0

package/utils/build-icons/index.ts

@@ -0,0 +1,108 @@
+import path from 'path';
+import fs from 'fs';
+import { glob } from 'glob';
+import prettier from 'prettier';
+import { iconTemplate } from './icon-template.js';
+
+const prettierConfig = prettier.resolveConfig.sync(path.join(process.cwd(), '../../.prettierrc'));
+
+/**
+ * Format given icon file name
+ *
+ * @param {string} icon
+ * @returns {object} - object containing required names for generation
+ */
+const formatIconName = (icon: string) => {
+  const iconFileName = icon.replace(/-(outlined|filled)$/, '');
+  const name = iconFileName[0].toUpperCase() + iconFileName.slice(1);
+  const iconComponentName = name.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+  const ariaLabel = name.replace(/-([a-z])/g, (_, char) => ` ${char.toUpperCase()}`);
+  return { iconComponentName, iconFileName, ariaLabel };
+};
+
+/**
+ * Formats SVG for use as a react child
+ *
+ * @param {string} svg
+ * @param {number} pathCount - number of paths in svg
+ * @param {boolean} addFragment - extra condition to add fragment, used to filer cases where filled and outlined use the same svg
+ * @returns {string} - formatted svg path for use as react child
+ */
+const formatSVG = (svg: Buffer, pathCount: number, addFragment: Boolean) => {
+  const iconPaths = svg
+    .toString()
+    .replace(/<\/?svg[^>]*>/g, '')
+    .replace(/fill="[^"]*"/g, 'fill="currentColor"')
+    .replace(/fill-rule/g, 'fillRule')
+    .replace(/clip-rule/g, 'clipRule')
+    .replace(/clip-path/g, 'clipPath')
+    .trim();
+
+  return pathCount > 1 && addFragment ? `<Fragment>${iconPaths}</Fragment>` : iconPaths;
+};
+
+/**
+ * Create the child output of the icon component
+ *
+ * @param {boolean} sameSVG - if filled and outlined use the same SVG
+ * @param {string} filledSVG
+ * @param {string} outlinedSVG
+ * @returns {string} - final child icon component output
+ */
+const getChildren = (sameSVG: boolean, filledSVG: string, outlinedSVG: string) =>
+  sameSVG ? filledSVG : `{look === "filled" ? ${filledSVG} : ${outlinedSVG}}`;
+
+const main = async () => {
+  const iconFiles = glob.sync('assets/icons/filled/*.svg');
+  const iconCount = iconFiles.length;
+  const iconNames: string[] = [];
+  let i = 1;
+
+  console.log('Building icons...');
+
+  for (const iconPath of iconFiles) {
+    const fileName = path.basename(iconPath, path.extname(iconPath));
+    const { iconComponentName, iconFileName, ariaLabel } = formatIconName(fileName);
+    const outlinedPath = iconPath.replace(/filled/g, 'outlined');
+
+    console.log(`[${i}/${iconCount}] ${iconComponentName}Icon`);
+
+    const [filledSVG, outlinedSVG] = await Promise.all([
+      fs.promises.readFile(iconPath),
+      fs.promises.readFile(outlinedPath),
+    ]);
+
+    const sameSVG = filledSVG.toString() === outlinedSVG.toString();
+
+    const filledPathCount = filledSVG.toString().match(/path/g)?.length || 0;
+    const outlinedPathCount = outlinedSVG.toString().match(/path/g)?.length || 0;
+
+    const addFragment = !sameSVG && (filledPathCount > 1 || outlinedPathCount > 1);
+
+    const filledPaths = formatSVG(filledSVG, filledPathCount, addFragment);
+    const outlinedPaths = formatSVG(outlinedSVG, outlinedPathCount, addFragment);
+
+    const children = getChildren(sameSVG, filledPaths, outlinedPaths);
+
+    const iconComponent = prettier.format(iconTemplate(iconComponentName, ariaLabel, children, addFragment, sameSVG), {
+      parser: 'typescript',
+      ...(prettierConfig || {}),
+    });
+
+    await fs.promises.writeFile(
+      path.join(process.cwd(), `src/components/icon/components/${iconFileName}-icon.tsx`),
+      iconComponent,
+    );
+
+    iconNames.push(`export { ${iconComponentName}Icon } from './components/${iconFileName}-icon.js';`);
+    i++;
+  }
+
+  iconNames.sort();
+  iconNames.push(`\nexport { type IconProps } from './icon.types.js';\n`);
+  await fs.promises.writeFile(path.join(process.cwd(), 'src/components/icon/index.ts'), iconNames.join('\n'));
+
+  console.log('\nFinished building icons');
+};
+
+main();

package/dist/components/icon/components/clear-circle-icon.d.ts

@@ -1,2 +0,0 @@
-import { type IconProps } from '../icon.types.js';
-export declare function ClearCircleIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/copy-content-icon.d.ts

@@ -1,2 +0,0 @@
-import { type IconProps } from '../icon.types.js';
-export declare function CopyContentIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/cursor-arrow-double-click-icon.d.ts

@@ -1,2 +0,0 @@
-import { type IconProps } from '../icon.types.js';
-export declare function CursorArrowDoubleClickIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/favourite-icon.d.ts

@@ -1,2 +0,0 @@
-import { type IconProps } from '../icon.types.js';
-export declare function FavouriteIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/more-horizontal-icon.d.ts

@@ -1,2 +0,0 @@
-import { type IconProps } from '../icon.types.js';
-export declare function MoreHorizontalIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/more-vertical-icon.d.ts

@@ -1,2 +0,0 @@
-import { type IconProps } from '../icon.types.js';
-export declare function MoreVerticalIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/star-empty-icon.d.ts

@@ -1,2 +0,0 @@
-import { type IconProps } from '../icon.types.js';
-export declare function StarEmptyIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/star-empty-icon.js

@@ -1,26 +0,0 @@
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
-import React from 'react';
-import { Icon } from '../icon.component.js';
-export function StarEmptyIcon({ 'aria-label': ariaLabel = 'Star Empty' , copyrightYear ='2020' , ...props }) {
-    return React.createElement(Icon, _extends({
-        "aria-label": ariaLabel,
-        copyrightYear: copyrightYear
-    }, props), React.createElement("path", {
-        fill: "currentColor",
-        fillRule: "evenodd",
-        d: "M12,0 L8.99925,9 L0,9 L7.5,14.25 L4.5,23.25 L12,17.24925 L19.5,23.25 L16.49925,14.25 L24,9 L15,9 L12,0 Z M8.92275,14.724 L9.276,13.66275 L8.36025,13.02075 L4.75875,10.49925 L8.99925,10.49925 L10.08075,10.49925 L10.4235,9.474 L12,4.743 L13.5765,9.474 L13.91925,10.49925 L15,10.49925 L19.24125,10.49925 L15.63975,13.02075 L14.72325,13.66275 L15.0765,14.724 L16.47075,18.90525 L12.93675,16.0785 L12,15.32925 L11.0625,16.0785 L7.52925,18.90525 L8.92275,14.724 Z"
-    }));
-}

package/dist/components/icon/components/star-icon.d.ts

@@ -1,2 +0,0 @@
-import { type IconProps } from '../icon.types.js';
-export declare function StarIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/take-out-icon.d.ts

@@ -1,2 +0,0 @@
-import { type IconProps } from '../icon.types.js';
-export declare function TakeOutIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/tailwind/utils/generate-color-shades.js

@@ -1,18 +0,0 @@
-import Values from 'values.js';
-export const generateColorShades = (color)=>{
-    return Object.entries(color).reduce((acc, [colorKey, colorValue])=>{
-        const colorShades = new Values(colorValue).all(16.6666).slice(0, -2).slice(1).reduce((acc2, shade, index)=>{
-            const shadeKey = index === 0 ? 50 : index * 100;
-            return {
-                ...acc2,
-                [shadeKey]: `#${shade.hex.toUpperCase()}`
-            };
-        }, {
-            DEFAULT: colorValue
-        });
-        return {
-            ...acc,
-            [colorKey]: colorShades
-        };
-    }, {});
-};

package/src/components/icon/components/clear-circle-icon.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-import { Icon } from '../icon.component.js';
-import { type IconProps } from '../icon.types.js';
-
-export function ClearCircleIcon({ 'aria-label': ariaLabel = 'Clear', copyrightYear = '2020', ...props }: IconProps) {
-  return (
-    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M12 0c6.628 0 12 5.373 12 12s-5.372 12-12 12S0 18.627 0 12 5.372 0 12 0zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.95 3.636l1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95 4.95-4.95z"
-      />
-    </Icon>
-  );
-}

package/src/components/icon/components/copy-content-icon.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-import { Icon } from '../icon.component.js';
-import { type IconProps } from '../icon.types.js';
-
-export function CopyContentIcon({ 'aria-label': ariaLabel = 'Copy', copyrightYear = '2020', ...props }: IconProps) {
-  return (
-    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M16 0H4C2.9 0 2 .9 2 2v16h2V2h12V0zm3.867 4H8.133C6.96 4 6 5 6 6.222v15.556C6 23 6.96 24 8.133 24h11.734C21.04 24 22 23 22 21.778V6.222C22 5 21.04 4 19.867 4zM20 22H8V6h12v16z"
-      />
-    </Icon>
-  );
-}

package/src/components/icon/components/cursor-arrow-double-click-icon.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import { Icon } from '../icon.component.js';
-import { type IconProps } from '../icon.types.js';
-
-export function CursorArrowDoubleClickIcon({
-  'aria-label': ariaLabel = 'Cursor arrow double-click',
-  copyrightYear = '2021',
-  ...props
-}: IconProps) {
-  return (
-    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="m11 10 8.167 7.524-3.675.107 2.45 5.563-1.878.806-2.45-5.562L11 21.018V10Zm1-10c6.627 0 12 5.373 12 12 0 .672-.055 1.332-.162 1.974l-1.973-.33A10.07 10.07 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12a9.99 9.99 0 0 0 4.453 8.322l-1.11 1.664A11.989 11.989 0 0 1 0 12C0 5.373 5.373 0 12 0Zm0 5a7 7 0 0 1 6.906 8.152l-1.973-.33a5 5 0 1 0-7.706 3.338l-1.11 1.665A7 7 0 0 1 12 5Z"
-      />
-    </Icon>
-  );
-}

package/src/components/icon/components/favourite-icon.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-import { Icon } from '../icon.component.js';
-import { type IconProps } from '../icon.types.js';
-
-export function FavouriteIcon({ 'aria-label': ariaLabel = 'Favourite', copyrightYear = '2020', ...props }: IconProps) {
-  return (
-    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M12,23 L10.26,21.4174387 C4.08,15.8185286 0,12.1258856 0,7.59400545 C0,3.9013624 2.904,1 6.6,1 C8.688,1 10.692,1.97111717 12,3.50572207 C13.308,1.97111717 15.312,1 17.4,1 C21.096,1 24,3.9013624 24,7.59400545 C24,12.1258856 19.92,15.8185286 13.74,21.4294278 L12,23 Z"
-      />
-    </Icon>
-  );
-}

package/src/components/icon/components/more-horizontal-icon.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import { Icon } from '../icon.component.js';
-import { type IconProps } from '../icon.types.js';
-
-export function MoreHorizontalIcon({
-  'aria-label': ariaLabel = 'More Horizontal',
-  copyrightYear = '2020',
-  ...props
-}: IconProps) {
-  return (
-    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M4.5,9.5 C5.875,9.5 7,10.625 7,12 C7,13.375 5.875,14.5 4.5,14.5 C3.125,14.5 2,13.375 2,12 C2,10.625 3.125,9.5 4.5,9.5 Z M19.5,9.5 C20.875,9.5 22,10.625 22,12 C22,13.375 20.875,14.5 19.5,14.5 C18.125,14.5 17,13.375 17,12 C17,10.625 18.125,9.5 19.5,9.5 Z M12,9.5 C13.375,9.5 14.5,10.625 14.5,12 C14.5,13.375 13.375,14.5 12,14.5 C10.625,14.5 9.5,13.375 9.5,12 C9.5,10.625 10.625,9.5 12,9.5 Z"
-      />
-    </Icon>
-  );
-}

package/src/components/icon/components/more-vertical-icon.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import { Icon } from '../icon.component.js';
-import { type IconProps } from '../icon.types.js';
-
-export function MoreVerticalIcon({
-  'aria-label': ariaLabel = 'More Vertical',
-  copyrightYear = '2020',
-  ...props
-}: IconProps) {
-  return (
-    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M12,7 C13.375,7 14.5,5.875 14.5,4.5 C14.5,3.125 13.375,2 12,2 C10.625,2 9.5,3.125 9.5,4.5 C9.5,5.875 10.625,7 12,7 Z M12,9.5 C10.625,9.5 9.5,10.625 9.5,12 C9.5,13.375 10.625,14.5 12,14.5 C13.375,14.5 14.5,13.375 14.5,12 C14.5,10.625 13.375,9.5 12,9.5 Z M12,17 C10.625,17 9.5,18.125 9.5,19.5 C9.5,20.875 10.625,22 12,22 C13.375,22 14.5,20.875 14.5,19.5 C14.5,18.125 13.375,17 12,17 Z"
-      />
-    </Icon>
-  );
-}

package/src/components/icon/components/star-empty-icon.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-import { Icon } from '../icon.component.js';
-import { type IconProps } from '../icon.types.js';
-
-export function StarEmptyIcon({ 'aria-label': ariaLabel = 'Star Empty', copyrightYear = '2020', ...props }: IconProps) {
-  return (
-    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M12,0 L8.99925,9 L0,9 L7.5,14.25 L4.5,23.25 L12,17.24925 L19.5,23.25 L16.49925,14.25 L24,9 L15,9 L12,0 Z M8.92275,14.724 L9.276,13.66275 L8.36025,13.02075 L4.75875,10.49925 L8.99925,10.49925 L10.08075,10.49925 L10.4235,9.474 L12,4.743 L13.5765,9.474 L13.91925,10.49925 L15,10.49925 L19.24125,10.49925 L15.63975,13.02075 L14.72325,13.66275 L15.0765,14.724 L16.47075,18.90525 L12.93675,16.0785 L12,15.32925 L11.0625,16.0785 L7.52925,18.90525 L8.92275,14.724 Z"
-      />
-    </Icon>
-  );
-}

package/src/components/icon/components/star-icon.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-import { Icon } from '../icon.component.js';
-import { type IconProps } from '../icon.types.js';
-
-export function StarIcon({ 'aria-label': ariaLabel = 'Star', copyrightYear = '2020', ...props }: IconProps) {
-  return (
-    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <polygon
-        fill="currentColor"
-        fillRule="evenodd"
-        points="12 0 9 9 0 9 7.5 14.25 4.5 23.25 12 17.249 19.5 23.25 16.499 14.25 24 9 15 9"
-      />
-    </Icon>
-  );
-}

package/src/components/icon/components/take-out-icon.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-import { Icon } from '../icon.component.js';
-import { type IconProps } from '../icon.types.js';
-
-export function TakeOutIcon({ 'aria-label': ariaLabel = 'Take Out', copyrightYear = '2020', ...props }: IconProps) {
-  return (
-    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M3,5 L21,5 L18.99,22.23 C18.87,23.23 18.03,24 17,24 L7,24 C5.97,24 5.13,23.23 5.01,22.23 L3,5 Z M12,20 C13.66,20 15,18.66 15,17 C15,15 12,11.6 12,11.6 C12,11.6 9,15 9,17 C9,18.66 10.34,20 12,20 Z M5,2 L8,0 L16,0 L19,2 L21,2 L22,4 L2,4 L3,2 L5,2 Z"
-      />
-    </Icon>
-  );
-}

package/src/tailwind/utils/generate-color-shades.ts

@@ -1,27 +0,0 @@
-import Values from 'values.js';
-
-import { BrandConfig } from '../index.js';
-
-type ColorConfig = BrandConfig['colors'];
-export const generateColorShades = (color: Record<string, string>): ColorConfig => {
-  return Object.entries(color).reduce((acc, [colorKey, colorValue]) => {
-    const colorShades = new Values(colorValue)
-      .all(16.6666)
-      .slice(0, -2)
-      .slice(1)
-      .reduce(
-        (acc2, shade, index) => {
-          const shadeKey = index === 0 ? 50 : index * 100;
-          return {
-            ...acc2,
-            [shadeKey]: `#${shade.hex.toUpperCase()}`,
-          };
-        },
-        { DEFAULT: colorValue },
-      );
-    return {
-      ...acc,
-      [colorKey]: colorShades,
-    };
-  }, {} as ColorConfig);
-};