@epilot360/icons 1.6.0 → 1.7.1

package/generator/run.ts

@@ -0,0 +1,102 @@
+#!/usr/bin/env -S node -r ts-node/register
+import fs from 'fs';
+import path from 'path';
+
+import ejs from 'ejs';
+import YAML from 'js-yaml';
+
+const ROOT_DIR = path.join(__dirname, '..');
+const SRC_DIR = path.join(ROOT_DIR, 'src');
+const TEMPLATE_DIR = path.join(__dirname, 'templates');
+
+interface IconConfig {
+  [Icon: string]: {
+    name: string;
+    tags: string[];
+    aliases: string[];
+    svg_import: string;
+  };
+}
+
+const main = async () => {
+  const iconsConfig = YAML.load(fs.readFileSync(path.join(ROOT_DIR, 'icons.config.yaml')).toString()) as IconConfig;
+
+  const icons = Object.entries(iconsConfig).map(([Icon, icon]) => ({
+    Icon,
+    ...icon,
+    svg_import_fill: icon.svg_import?.replace(/.svg$/, '-fill.svg'),
+  }));
+
+  // copy svg files under src/svg/<Component>/icon.svg
+  for (const icon of icons) {
+    if (icon.svg_import) {
+      const svgFile = path.join(SRC_DIR, 'svg', icon.Icon, 'icon.svg');
+      const svgFileFill = path.join(SRC_DIR, 'svg', icon.Icon, 'icon-fill.svg');
+      fs.mkdirSync(path.dirname(svgFile), { recursive: true });
+
+      fs.copyFileSync(require.resolve(icon.svg_import), svgFile);
+      fs.copyFileSync(require.resolve(icon.svg_import_fill), svgFileFill);
+      console.warn('Copied', svgFile);
+      console.warn('Copied', svgFileFill);
+    }
+
+    // Generate SVG module
+    const svgModuleTemplates = fs.readdirSync(path.join(TEMPLATE_DIR, 'svg', 'module'));
+    for (const template of svgModuleTemplates) {
+      const templatePath = path.join(TEMPLATE_DIR, 'svg', 'module', template);
+      const templateContent = fs.readFileSync(templatePath).toString();
+
+      const outFile = path.join(SRC_DIR, 'svg', icon.Icon, template.replace('.ejs', ''));
+
+      fs.mkdirSync(path.dirname(outFile), { recursive: true });
+      fs.writeFileSync(outFile, ejs.render(templateContent, icon));
+      console.warn('Wrote', outFile);
+    }
+  }
+
+  // Generate SVGIcon.ts
+  const svgIconComponentTemplate = fs.readFileSync(path.join(TEMPLATE_DIR, 'svg', 'SVGIcon.ts.ejs')).toString();
+  const svgIconOutFile = path.join(SRC_DIR, 'svg', 'SVGIcon.ts');
+  fs.writeFileSync(svgIconOutFile, ejs.render(svgIconComponentTemplate, { icons }));
+  console.warn('Wrote', svgIconOutFile);
+
+  // Generate index.ts for svg
+  const svgIndexTemplate = fs.readFileSync(path.join(TEMPLATE_DIR, 'svg', 'index.ts.ejs')).toString();
+  const svgIndexOutFile = path.join(SRC_DIR, 'svg', 'index.ts');
+  fs.writeFileSync(svgIndexOutFile, ejs.render(svgIndexTemplate, { icons }));
+  console.warn('Wrote', svgIndexOutFile);
+
+  for (const icon of icons) {
+    // Generate react component
+    const reactComponentTemplates = fs.readdirSync(path.join(TEMPLATE_DIR, 'react', 'component'));
+
+    for (const template of reactComponentTemplates) {
+      const templatePath = path.join(TEMPLATE_DIR, 'react', 'component', template);
+      const templateContent = fs.readFileSync(templatePath).toString();
+
+      const outFile = path.join(SRC_DIR, 'react', icon.Icon, template.replace('.ejs', ''));
+
+      fs.mkdirSync(path.dirname(outFile), { recursive: true });
+      fs.writeFileSync(outFile, ejs.render(templateContent, icon));
+      console.warn('Wrote', outFile);
+    }
+  }
+
+  // Generate EpilotIcon.tsx for react
+  const epilotIconComponentTemplate = fs
+    .readFileSync(path.join(TEMPLATE_DIR, 'react', 'EpilotIcon.tsx.ejs'))
+    .toString();
+  const epilotIconOutFile = path.join(SRC_DIR, 'react', 'EpilotIcon.tsx');
+  fs.writeFileSync(epilotIconOutFile, ejs.render(epilotIconComponentTemplate, { icons }));
+  console.warn('Wrote', epilotIconOutFile);
+
+  // Generate index.ts for react
+  const reactIndexTemplate = fs.readFileSync(path.join(TEMPLATE_DIR, 'react', 'index.ts.ejs')).toString();
+  const reactIndexOutFile = path.join(SRC_DIR, 'react', 'index.ts');
+  fs.writeFileSync(reactIndexOutFile, ejs.render(reactIndexTemplate, { icons }));
+  console.warn('Wrote', reactIndexOutFile);
+};
+
+if (require.main === module) {
+  main();
+}

package/generator/templates/react/EpilotIcon.tsx.ejs

@@ -0,0 +1,29 @@
+/* eslint-disable import/order */
+import React from 'react';
+
+<% icons.forEach((icon) => { -%>
+import { <%= icon.Icon %> } from './<%= icon.Icon %>';
+<% }); %>
+
+import type { IconPropsReact } from './types';
+
+export const IconComponentsMap = {
+<% icons.forEach((icon) => { -%>
+  <%= icon.name %>: <%= icon.Icon %>,
+<% }); %>
+};
+
+export type IconName = keyof typeof IconComponentsMap;
+type Props = IconPropsReact & { name: IconName };
+
+export const EpilotIcon = (props: Props) => {
+  const { name, ...restProps } = props;
+
+  const iconComponent = IconComponentsMap[name];
+
+  if (!iconComponent) return null;
+
+  return React.createElement(iconComponent, restProps);
+};
+
+export default EpilotIcon;

package/generator/templates/react/component/index.tsx.ejs

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { ReactComponent as Filled } from '../../svg/<%= Icon %>/icon-fill.svg';
+import { ReactComponent as Outlined } from '../../svg/<%= Icon %>/icon.svg';
+import type { IconPropsReact } from '../types';
+import { defaultIconProps } from '../common';
+
+const name = '<%= name %>';
+
+
+export function <%= Icon %>(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 <%= Icon %>;

package/generator/templates/react/component/story.stories.tsx.ejs

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

package/generator/templates/react/index.ts.ejs

@@ -0,0 +1,5 @@
+<% icons.forEach((icon) => { -%>
+export * from './<%= icon.Icon %>';
+<% }); %>
+
+export * from './EpilotIcon';

package/generator/templates/svg/index.ts.ejs

@@ -0,0 +1,5 @@
+<% icons.forEach((icon) => { -%>
+export * from './<%= icon.Icon %>';
+<% }); %>
+
+export * from './svgIcon';

package/generator/templates/svg/module/index.ts.ejs

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

package/generator/templates/svg/svgIcon.ts.ejs

@@ -0,0 +1,61 @@
+/* eslint-disable import/order */
+<% icons.forEach((icon) => { -%>
+import { <%= icon.Icon %>SVG } from './<%= icon.Icon %>';
+<% }); %>
+
+import type { IconProps } from '../types';
+
+export const svgMap = {
+<% icons.forEach((icon) => { -%>
+  <%= icon.name %>: <%= icon.Icon %>SVG,
+<% }); %>
+};
+
+export type IconSVGName = keyof typeof svgMap;
+type Opts = IconProps & {
+  name: IconSVGName;
+  xclass?: string;
+};
+
+const defaultOpts: Opts = {
+  name: 'epilot',
+  size: 24,
+  fill: 'currentColor',
+};
+
+export const svgIcon = (opts: Opts) => {
+  const {
+    name,
+    width,
+    height,
+    size,
+    fill,
+    xclass,
+    ...restOpts
+  } = {
+    ...defaultOpts,
+    ...opts,
+  };
+
+  const svg = svgMap[name];
+
+  if (!svg) return '';
+
+  const parser = new DOMParser();
+  const document = parser.parseFromString(svg(restOpts), 'image/svg+xml');
+
+  const svgElement = document.querySelector('svg');
+
+  if (fill) svgElement.setAttribute('fill', `${fill}`);
+  if (xclass) svgElement.setAttribute('class', `${xclass}`);
+
+  if (width !== undefined && width !== '') svgElement.setAttribute('width', `${width}`);
+  if (height !== undefined && height !== '') svgElement.setAttribute('height', `${height}`);
+
+  if (size) {
+    svgElement.setAttribute('width', `${size}`);
+    svgElement.setAttribute('height', `${size}`);
+  }
+
+  return document.documentElement.outerHTML;
+};

package/iac/.eslintrc.yml

@@ -0,0 +1,27 @@
+extends:
+  - "@epilot/eslint-config"
+ignorePatterns:
+  - node_modules
+  - dist
+rules:
+  "spaced-comment":
+    - error
+    - always
+    - line:
+        markers: ["/"]
+        exceptions: ["-", "+"]
+      block:
+        markers: ["!"]
+        exceptions: ["*"]
+        balanced: true
+  "prettier/prettier":
+    - error
+    - printWidth: 120 # https://hackernoon.com/does-column-width-of-80-make-sense-in-2018-50c161fbdcf6
+      trailingComma: all # better diffs, obviously
+      bracketSpacing: true # more space = pretty
+      semi: true # https://github.com/standard/semistandard
+      useTabs: false
+      tabWidth: 2
+      singleQuote: true
+      quoteProps: as-needed
+      proseWrap: never

package/iac/.gitignore

@@ -0,0 +1,3 @@
+*.js
+*.d.ts
+cdk.out

package/iac/cdk.json

@@ -0,0 +1,42 @@
+{
+  "app": "npx ts-node --prefer-ts-exts ./index.ts",
+  "watch": {
+    "include": [
+      "**"
+    ],
+    "exclude": [
+      "README.md",
+      "cdk*.json",
+      "**/*.d.ts",
+      "**/*.js",
+      "tsconfig.json",
+      "package*.json",
+      "yarn.lock",
+      "node_modules",
+      "test"
+    ]
+  },
+  "context": {
+    "@aws-cdk/aws-apigateway:usagePlanKeyOrderInsensitiveId": true,
+    "@aws-cdk/core:stackRelativeExports": true,
+    "@aws-cdk/aws-rds:lowercaseDbIdentifier": true,
+    "@aws-cdk/aws-lambda:recognizeVersionProps": true,
+    "@aws-cdk/aws-lambda:recognizeLayerVersion": true,
+    "@aws-cdk/aws-cloudfront:defaultSecurityPolicyTLSv1.2_2021": true,
+    "@aws-cdk-containers/ecs-service-extensions:enableDefaultLogDriver": true,
+    "@aws-cdk/aws-ec2:uniqueImdsv2TemplateName": true,
+    "@aws-cdk/core:checkSecretUsage": true,
+    "@aws-cdk/aws-iam:minimizePolicies": true,
+    "@aws-cdk/aws-ecs:arnFormatIncludesClusterName": true,
+    "@aws-cdk/core:validateSnapshotRemovalPolicy": true,
+    "@aws-cdk/aws-codepipeline:crossAccountKeyAliasStackSafeResourceName": true,
+    "@aws-cdk/aws-s3:createDefaultLoggingPolicy": true,
+    "@aws-cdk/aws-sns-subscriptions:restrictSqsDescryption": true,
+    "@aws-cdk/aws-apigateway:disableCloudWatchRole": true,
+    "@aws-cdk/core:enablePartitionLiterals": true,
+    "@aws-cdk/core:target-partitions": [
+      "aws",
+      "aws-cn"
+    ]
+  }
+}

package/iac/config.ts

@@ -0,0 +1,46 @@
+const serviceName = 'epilot360-icons';
+const projectName = 'epilot360-icons';
+
+const config = {
+  dev: {
+    serviceName: `${serviceName}-dev`,
+    projectName,
+    importBucket: 'epilot360-portal-dev-Bucket',
+    importDistributionDomainName: 'epilot360-portal-dev-DistributionDomainName',
+    importDistributionId: 'epilot360-portal-dev-DistributionId',
+  },
+  staging: {
+    serviceName: `${serviceName}-staging`,
+    projectName,
+    importBucket: 'epilot360-portal-staging-Bucket',
+    importDistributionDomainName: 'epilot360-portal-staging-DistributionDomainName',
+    importDistributionId: 'epilot360-portal-staging-DistributionId',
+  },
+  prod: {
+    serviceName: `${serviceName}-prod`,
+    projectName,
+    importBucket: 'epilot360-portal-prod-Bucket',
+    importDistributionDomainName: 'epilot360-portal-prod-DistributionDomainName',
+    importDistributionId: 'epilot360-portal-prod-DistributionId',
+  },
+};
+
+export type Stage = keyof typeof config;
+
+export const getStage = (): Stage => {
+  const stageEnv = process.env.STAGE as Stage;
+
+  if (Object.getOwnPropertyNames(config).includes(stageEnv)) {
+    return stageEnv;
+  }
+
+  return 'dev';
+};
+
+export const getConfig = () => {
+  const stage = getStage();
+
+  return {
+    ...config[stage],
+  };
+};

package/iac/index.ts

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+import 'source-map-support/register';
+import * as cdk from 'aws-cdk-lib';
+
+import { getConfig } from "./config";
+import { ServiceStack } from "./service-stack";
+
+const app = new cdk.App();
+
+const config = getConfig();
+const stackName = process.env.STACK_NAME || config.serviceName;
+
+const serviceStack = new ServiceStack(app, stackName, {
+  stackName,
+  env: {
+    account: process.env.CDK_DEFAULT_ACCOUNT,
+    region: process.env.CDK_DEFAULT_REGION || "eu-central-1",
+  },
+});
+
+serviceStack.tags.setTag("heritage", "cdk");

package/iac/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "epilot360-icons-iac",
+  "description": "cdk",
+  "version": "0.1.0",
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc -w",
+    "cdk": "cdk",
+    "synth": "cdk synth",
+    "deploy": "cdk deploy"
+  },
+  "devDependencies": {
+    "@types/jest": "^27.5.2",
+    "@types/node": "10.17.27",
+    "@types/prettier": "2.6.0",
+    "aws-cdk": "2.42.0",
+    "ts-node": "^10.9.1",
+    "typescript": "4.7.4"
+  },
+  "dependencies": {
+    "aws-cdk-lib": "2.42.0",
+    "constructs": "^10.0.0",
+    "source-map-support": "^0.5.21"
+  }
+}

package/iac/service-stack.ts

@@ -0,0 +1,33 @@
+import * as fs from 'fs';
+
+import * as cdk from 'aws-cdk-lib';
+import * as s3 from 'aws-cdk-lib/aws-s3';
+import * as s3deploy from 'aws-cdk-lib/aws-s3-deployment';
+import { Construct } from 'constructs';
+
+import { getConfig } from './config';
+
+export class ServiceStack extends cdk.Stack {
+  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
+    super(scope, id, props);
+
+    const config = getConfig();
+
+    // Content bucket
+    const siteBucket = s3.Bucket.fromBucketName(this, 'SiteBucket', cdk.Fn.importValue(config.importBucket));
+
+    const sources = [s3deploy.Source.asset('../dist')];
+    if (fs.existsSync('../storybook-static')) {
+      sources.push(s3deploy.Source.asset('../storybook-static'));
+    }
+
+    // Deploy site contents in S3 bucket
+    const _mfe = new s3deploy.BucketDeployment(this, 'DeployMFE', {
+      sources,
+      destinationBucket: siteBucket,
+      destinationKeyPrefix: `${config.projectName}/`,
+      prune: true,
+      include: [`${config.projectName}/*`],
+    });
+  }
+}

package/iac/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "commonjs",
+    "lib": [
+      "es2018"
+    ],
+    "declaration": true,
+    "strict": true,
+    "noEmit": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": false,
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "experimentalDecorators": true,
+    "strictPropertyInitialization": false,
+    "typeRoots": [
+      "./node_modules/@types"
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    "cdk.out"
+  ]
+}