Icons upgrade

.github/ISSUE_TEMPLATE/1-bug-report.md

@@ -11,7 +11,7 @@ about: "If something isn't working as expected 🤔."
 ## Version & Environment
 
 - Version of browser
-- Version of `himalaya/ui`
+- Version of `@himalaya-ui/core`
 
 ## Expected Behaviour
 

.gitignore

@@ -12,11 +12,14 @@
 /.next/
 /out/
 
+.source
 # production
 /build
 
 # misc
 .DS_Store
+
+.npmrc
 .env*
 .idea
 

package.json

@@ -1,17 +1,20 @@
 {
-  "name": "himalaya-ui",
-  "version": "0.0.1",
-  "main": "dist/index.js",
-  "module": "esm/index.js",
-  "types": "esm/index.d.ts",
-  "unpkg": "dist/index.min.js",
+  "name": "@himalaya-ui/core",
+  "version": "0.0.2",
+  "main": "dist/framework/index.js",
+  "module": "dist/framework-esm/index.js",
+  "types": "dist/framework-esm/index.d.ts",
   "files": [
     "/dist",
-    "/esm"
+    "README.md",
+    "package.json"
   ],
   "engines": {
     "node": ">=18.0.0"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "dev": "yarn docs:collect && yarn docs:seeds && next dev ./src",
     "docs:start": "next start src",
@@ -38,7 +41,8 @@
     "server:compileStart": "cross-env NODE_ENV=production node dist/server/main",
     "server:start": "nest start dist/documentation/server",
     "server:dev": "nest start --watch",
-    "icons": "node scripts/convert.js && node scripts/generate.js"
+    "icons:update": "ts-node -P scripts/icons scripts/icons/icons-update.ts",
+    "icons:generate": "ts-node -P scripts/icons scripts/icons/icons-generate.ts"
   },
   "author": "RedNinjas LTD",
   "license": "MIT",
@@ -72,7 +76,6 @@
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.0",
     "@fontsource-variable/figtree": "^5.0.18",
-    "@geist-ui/icons": "^1.0.2",
     "@mapbox/rehype-prism": "^0.8.0",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
@@ -145,6 +148,7 @@
     "extract-mdx-metadata": "^2.0.0",
     "fancy-canvas": "^2.1.0",
     "fs-extra": "^11.1.1",
+    "happy-dom": "^12.9.1",
     "husky": "^8.0.3",
     "i18next": "^23.5.1",
     "i18next-browser-languagedetector": "^7.1.0",
@@ -160,6 +164,7 @@
     "moment": "^2.29.4",
     "next": "^13.5.6",
     "next-images": "^1.8.5",
+    "node-fetch": "2",
     "node-sass": "^9.0.0",
     "nookies": "^2.5.2",
     "npm-run-all": "~4.1.5",
@@ -191,6 +196,7 @@
     "sitemap": "^7.1.1",
     "size-limit": "^8.2.4",
     "styled-jsx": "^5.1.2",
+    "svgo": "^3.0.2",
     "ts-jest": "^29.1.1",
     "ts-node": "~10.9.1",
     "ts-transformer-properties-rename": "^0.16.0",

scripts/icons/icons-generate.ts

@@ -0,0 +1,100 @@
+import fetch from 'node-fetch'
+import { JSDOM } from 'jsdom'
+import fs from 'fs-extra'
+import path from 'path'
+import { optimize } from 'svgo/lib/svgo'
+import { transform } from '@babel/core'
+import {
+  moduleBabelConfig,
+  allModulesBabelConfig,
+  replaceAll,
+  toHumpName,
+  toComponentName,
+  makeBasicDefinition,
+} from './utils'
+import { svgoOptions } from './svgo.config'
+
+const outputDir = path.join(__dirname, '../', '../', 'src/components/icons')
+const sourceFile = path.join(__dirname, '../', '../', '.source')
+
+export default (async () => {
+  await fs.remove(outputDir)
+  const html = await fs.readFile(sourceFile, 'utf8')
+  const document = new JSDOM(html).window.document
+
+  let exports = `import { SVGAttributes } from 'react';
+
+export interface IconProps {
+  size?: string|number,
+  color?: string,
+}
+
+type NativeAttrs = Omit<SVGAttributes<SVGElement>, keyof IconProps>
+export type IconPropsNative = IconProps & NativeAttrs
+  `
+  let definition = makeBasicDefinition()
+
+  const icons = document.querySelectorAll('.geist-list .icon')
+  const promises = Array.from(icons).map(async (icon: Element) => {
+    const name: string = icon.querySelector('.geist-text').textContent
+    const componentName = toComponentName(name)
+    const fileName = toHumpName(name)
+
+    const svg = icon.querySelector('svg')
+
+    const { data: optimizedSvgString } = await optimize(svg.outerHTML, svgoOptions)
+    const styles = parseStyles(svg.getAttribute('style'))
+
+    console.log(styles);
+
+    const component = `'use client';
+import React from 'react';
+import {IconPropsNative} from './'
+const ${componentName} = ({ size = 24, color, style, ...props } : IconPropsNative ) => {
+  return ${parseSvg(optimizedSvgString, styles, svg.getAttribute('style'))};
+}
+export default ${componentName};`
+
+    exports += `export { default as ${componentName} } from './${fileName}';\n`
+    definition += `export const ${componentName}: Icon;\n`
+
+    await fs.outputFile(path.join(outputDir, `${fileName}.tsx`), component)
+  })
+
+  await Promise.all(promises)
+  await fs.outputFile(path.join(outputDir, 'index.ts'), exports)
+})()
+
+const parseSvg = (svg: string, styles: any, styleOv) => {
+
+  svg = svg.replace(styleOv, '');
+  svg = svg.replace('style="" ', '');
+  /*
+  color: 'var(--geist-foreground)',
+  '--geist-fill': 'currentcolor', -> ui-icon-background
+  '--geist-stroke': 'var(--geist-background)', -> --ui-icon-background
+  */
+
+  svg = replaceAll(svg, 'var(--geist-fill)', 'currentColor');
+  svg = replaceAll(svg, '--geist-stroke', '--ui-icon-background');
+
+  svg = svg.replace(/-([a-z])(?=[a-z\-]*[=\s/>])/g, g => g[1].toUpperCase())
+  svg = svg.replace(/<svg([^>]+)>/, `<svg$1 {...props} height={size} width={size} style={{...style, color: color }}>`)
+
+  return svg
+}
+
+const parseStyles = (inlineStyle = '') => {
+  return (inlineStyle || '').split(';').reduce((styleObject, stylePropertyValue) => {
+    // extract the style property name and value
+    let [property, value] = stylePropertyValue
+      .split(/^([^:]+):/)
+      .filter((val, i) => i > 0)
+      .map(item => item.trim().toLowerCase())
+
+    styleObject[property] = value
+    return styleObject
+  }, {})
+
+
+}

scripts/icons/icons-update.ts

@@ -0,0 +1,15 @@
+import fetch from 'node-fetch'
+import path from 'path'
+import fs from 'fs-extra'
+const sourceFile = path.join(__dirname, '../', '../', '.source')
+
+export default (async () => {
+  try {
+    const res = await fetch('https://vercel.com/design/icons')
+    const html = await res.text()
+    await fs.writeFile(sourceFile, html)
+  } catch (e) {
+    console.log(e)
+    process.exit(1)
+  }
+})()

scripts/icons/svgo.config.ts

@@ -0,0 +1,27 @@
+import { parserStyle, getSpecifiedColorVar } from './utils'
+import type { Config, CustomPlugin } from 'svgo'
+import type { XastElement } from 'svgo/lib/types'
+
+
+
+export const svgoOptions: Config = {
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          removeViewBox: false,
+          cleanupNumericValues: {
+            floatPrecision: 1,
+          },
+        },
+      },
+    },
+    {
+      name: 'removeAttrs',
+      params: {
+        attrs: ['svg:width', 'svg:height', 'svg:color', 'svg:data-testid', 'svg:class'],
+      },
+    },
+  ],
+}

scripts/icons/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "outDir": "../../dist/icons-build",
+    "sourceMap": false,
+    "noImplicitAny": false,
+    "esModuleInterop": true,
+    "module": "commonjs",
+    "target": "es2015"
+  },
+  "include": [
+    "**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "**/*.spec.ts"
+  ]
+}

scripts/icons/utils.ts

@@ -0,0 +1,48 @@
+export const moduleBabelConfig = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+  plugins: [
+    ['@babel/plugin-proposal-object-rest-spread', { loose: true }],
+    '@babel/plugin-transform-runtime',
+  ],
+  minified: true,
+}
+
+export const allModulesBabelConfig = {
+  presets: ['@babel/preset-env'],
+  minified: true,
+}
+
+export const replaceAll = (target: string, find: string, replace: string): string => {
+  return target.split(find).join(replace)
+}
+
+export const toHumpName = (name: string): string => {
+  return name.replace(/-(.)/g, g => g[1].toUpperCase())
+}
+
+export const toComponentName = (name: string): string => {
+  const first = name.slice(0, 1).toUpperCase()
+  const last = toHumpName(name.slice(1))
+  return `${first}${last}`
+}
+
+export const makeBasicDefinition = (): string => {
+  return `import React from 'react';
+interface Props extends React.SVGProps<SVGElement> {
+  color?: string;
+  size?: number | string;
+}
+type Icon = React.FunctionComponent<Props>;\n`
+}
+
+export const parserStyle = (inlineStyle: string) => {
+  return inlineStyle
+    .split(';')
+    .filter((_, i) => i > 0)
+    .map(item => item.trim().toLowerCase())
+}
+
+export const getSpecifiedColorVar = (val: string, ident: string) => {
+  if (!val) return ''
+  return val.includes(ident) ? '{color}' : 'var(--geist-icons-background)'
+}

src/app/components/bottom-navigation/bottom-navigation.mdx

@@ -1,6 +1,6 @@
 import { Layout, Playground, Attributes } from 'lib/components'
 import { BottomNavigation } from 'components'
-import { Home, BarChart, Bell, Bookmark } from '@geist-ui/icons'
+import { Home, BarChart, Bell, Bookmark } from 'components/icons'
 
 export const meta = {
   title: 'Bottom Navigation',

src/app/components/breadcrumbs/breadcrumbs.mdx

@@ -1,8 +1,8 @@
 import { Layout, Playground, Attributes } from 'lib/components'
 import { Breadcrumbs, Spacer } from 'components'
 import NextLink from 'next/link'
-import Home from '@geist-ui/icons/home'
-import Inbox from '@geist-ui/icons/inbox'
+import Home from 'components/icons/home'
+import Inbox from 'components/icons/inbox'
 
 export const meta = {
   title: 'Breadcrumbs',