diff --git a/plugins/vite.ts b/plugins/vite.ts index 6dfebaba3..bbaf83e7f 100644 --- a/plugins/vite.ts +++ b/plugins/vite.ts @@ -1,7 +1,13 @@ import path from 'path' import fs from 'fs/promises' -import { ILLUS_OPTIONS, SPRITES_OPTIONS, processSvgWithOutput } from '../scripts/svg.js' +import { + ILLUS_OPTIONS, + SPRITES_OPTIONS, + getSvgIds, + processSvgWithOutput, + replaceAvailableSvgs, +} from '../scripts/svg.js' import { forFile, __dirname } from '../scripts/utils.js' import { fetchStatusAssetLogos, replaceAssetLogosSource } from '../scripts/asset-logos.js' import { @@ -9,7 +15,7 @@ import { replaceDefaultMetricsRestrictionsSource, } from '../scripts/metrics-restrictions/index.js' -export function WebkitSvg() { +export async function WebkitSvg() { const base = __dirname() const isLibPackage = base.includes('node_modules') @@ -19,9 +25,20 @@ export function WebkitSvg() { const staticDir = './static/webkit/' const spritesStaticDir = './static/webkit/sprites/' + const svgIds = await getSvgIds() + return { name: 'webkit-svg', + transform(src: string, id: string) { + if (id.includes('/core/Svg/ids.ts')) { + return { + code: replaceAvailableSvgs(src, svgIds), + map: null, + } + } + }, + async buildStart() { if (isLibPackage) { const root = path.resolve(base, '..') diff --git a/scripts/release.js b/scripts/release.js index cca179111..0a8807abc 100644 --- a/scripts/release.js +++ b/scripts/release.js @@ -8,7 +8,7 @@ import { fetchMetricsRestrictions, replaceDefaultMetricsRestrictionsSource, } from './metrics-restrictions/index.js' -import { ILLUS_OPTIONS, SPRITES_OPTIONS, processSvgWithOutput, replaceSvgIdsType } from './svg.js' +import { combineSvgsToSprite, getSvgIds, replaceAvailableSvgs, replaceSvgIdsType } from './svg.js' const MAIN_BRANCH = 'next' const RELEASE_BRANCH = 'lib-release' @@ -204,18 +204,13 @@ async function replaceSrcImports() { } async function processSvg() { - const ids = [] - async function process(path, options) { - await forFile(path, async (entry) => { - const id = entry.replace('./dist/icons/', '').replace('./dist/illus/', '').replace('.svg', '') - ids.push(id) - - processSvgWithOutput(entry, './dist/', './dist/sprites/', options, './dist/') - }) - } + const [ids] = await Promise.all([getSvgIds(), combineSvgsToSprite()]) + + await forFile(['./dist/**/core/Svg/ids.js'], (entry) => { + const file = fs.readFileSync(entry) - await process(['./dist/icons/**/*.svg'], SPRITES_OPTIONS) - await process(['./dist/illus/**/*.svg'], ILLUS_OPTIONS) + fs.writeFileSync(entry, replaceAvailableSvgs(file.toString(), ids)) + }) await forFile(['./dist/**/core/Svg/types.d.ts'], (entry) => { const file = fs.readFileSync(entry) diff --git a/scripts/svg.js b/scripts/svg.js index 813f1cd5e..357bd661e 100644 --- a/scripts/svg.js +++ b/scripts/svg.js @@ -1,6 +1,8 @@ import path from 'path' import fs from 'fs' +import { forFile } from './utils.js' + /** * * @param {string} path @@ -110,3 +112,51 @@ export const replaceSvgIdsType = (src, ids) => 'type TSvgId = string', `type TSvgId = ${ids.map((id) => `"${id}"`).join(' | ')} | (string & {})`, ) + +export async function combineSvgsToSprite() { + /** + * + * @param {string[]} path + * @param {any} options + */ + async function process(path, options) { + await forFile(path, async (entry) => { + processSvgWithOutput(entry, './dist/', './dist/sprites/', options, './dist/') + }) + } + + await process(['./dist/icons/**/*.svg'], SPRITES_OPTIONS) + await process(['./dist/illus/**/*.svg'], ILLUS_OPTIONS) +} + +export async function getSvgIds() { + /** + * @type {string[]} + */ + const ids = [] + + /** + * + * @param {string[]} path + */ + async function process(path) { + await forFile(path, async (entry) => { + const id = entry.replace('./dist/icons/', '').replace('./dist/illus/', '').replace('.svg', '') + ids.push(id) + }) + } + + await process(['./dist/icons/**/*.svg']) + await process(['./dist/illus/**/*.svg']) + + return ids +} + +/** + * + * @param {string} src - Source code + * @param {Array} svgs - Stringified JSON array + * @returns {string} + */ +export const replaceAvailableSvgs = (src, svgs) => + src.replace('AVAILABLE_IDS = []', `AVAILABLE_IDS = ${JSON.stringify(svgs)}`) diff --git a/src/lib/icons/search-12.svg b/src/lib/icons/search-12.svg new file mode 100644 index 000000000..3ac304e46 --- /dev/null +++ b/src/lib/icons/search-12.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/lib/icons/search-20.svg b/src/lib/icons/search-20.svg new file mode 100644 index 000000000..91ff3ffd5 --- /dev/null +++ b/src/lib/icons/search-20.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/lib/icons/search.svg b/src/lib/icons/search.svg index 7c73f4521..d3f775fa7 100644 --- a/src/lib/icons/search.svg +++ b/src/lib/icons/search.svg @@ -1,3 +1,5 @@ - - - + + + \ No newline at end of file diff --git a/src/lib/icons/sidebar.svg b/src/lib/icons/sidebar.svg index 0d8826614..ac7cb170c 100644 --- a/src/lib/icons/sidebar.svg +++ b/src/lib/icons/sidebar.svg @@ -1,3 +1,5 @@ - - - + + + \ No newline at end of file diff --git a/src/lib/ui/app/Alerts/categories/social-trends/select-trend-form-step/ui/Word.svelte b/src/lib/ui/app/Alerts/categories/social-trends/select-trend-form-step/ui/Word.svelte index e34217da3..8b66ab466 100644 --- a/src/lib/ui/app/Alerts/categories/social-trends/select-trend-form-step/ui/Word.svelte +++ b/src/lib/ui/app/Alerts/categories/social-trends/select-trend-form-step/ui/Word.svelte @@ -85,7 +85,7 @@
- +
{#each filteredWatchlists as watchlist} diff --git a/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/Metrics.svelte b/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/Metrics.svelte index cff03aa49..a011ff7cc 100644 --- a/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/Metrics.svelte +++ b/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/Metrics.svelte @@ -31,7 +31,7 @@
@@ -68,7 +68,22 @@ const isPhone = $derived(device.$.isPhone) const size = $derived(initialSize ?? (isPhone ? 'lg' : 'md')) - const iconSize = $derived(initialIconSize ?? (size === 'md' || size === 'lg' ? 16 : 12)) + + const { icon: sizedIcon, size: autoIconSize } = $derived.by(() => { + if (!icon) return {} + if (size === 'md' || size === 'lg') return { icon, size: undefined } + + const smallId = `${icon}-12` + const isSmallIconAvailable = checkSvgIdAvailable(`${icon}-12`) + + if (isSmallIconAvailable) return { icon: smallId, size: undefined } + + return { icon, size: 12 } + }) + + const iconSize = $derived( + initialIconSize === 'auto' || !initialIconSize ? autoIconSize : initialIconSize, + ) const button = tv({ base: 'flex items-center cursor-pointer gap-2 rounded-md', @@ -212,8 +227,8 @@ className, )} > - {#if icon} - + {#if sizedIcon} + {/if} {#if children} diff --git a/src/lib/ui/core/Input/UniversalInput.svelte b/src/lib/ui/core/Input/UniversalInput.svelte index d16e7a27e..01ab6e4b5 100644 --- a/src/lib/ui/core/Input/UniversalInput.svelte +++ b/src/lib/ui/core/Input/UniversalInput.svelte @@ -45,7 +45,7 @@ as, placeholder = '', icon, - iconSize = 12, + iconSize, disabled, left, right, diff --git a/src/lib/ui/core/Svg/Svg.svelte b/src/lib/ui/core/Svg/Svg.svelte index 7355678d7..bc6e769b8 100644 --- a/src/lib/ui/core/Svg/Svg.svelte +++ b/src/lib/ui/core/Svg/Svg.svelte @@ -3,11 +3,21 @@ import { cn } from '$ui/utils/index.js' - let { id, class: className = '', w = 16, h = w, illus = false, style = '' }: TProps = $props() + const { id, class: className = '', w, h, illus = false, style = '' }: TProps = $props() + + const defaultWidth = getSizeFromId() + + const width = $derived(w ?? defaultWidth) + const height = $derived(h ?? width) + + function getSizeFromId() { + const size = Number(id.split('-').at(-1)) + return Number.isFinite(size) ? size : 16 + } diff --git a/src/lib/ui/core/Svg/ids.ts b/src/lib/ui/core/Svg/ids.ts new file mode 100644 index 000000000..044ca78a2 --- /dev/null +++ b/src/lib/ui/core/Svg/ids.ts @@ -0,0 +1,8 @@ +import type { TSvgId } from './types.js' + +// Replace in build time +const AVAILABLE_IDS = [] as TSvgId[] + +const SVG_IDS = new Set(AVAILABLE_IDS) + +export const checkSvgIdAvailable = (id: string) => SVG_IDS.has(id) diff --git a/src/lib/ui/core/Svg/index.ts b/src/lib/ui/core/Svg/index.ts index 59bce398c..33d5a8a56 100644 --- a/src/lib/ui/core/Svg/index.ts +++ b/src/lib/ui/core/Svg/index.ts @@ -1,2 +1,3 @@ export { default } from './Svg.svelte' export type { TSvgId } from './types.js' +export { checkSvgIdAvailable } from './ids.js' diff --git a/src/stories/Design System - Core UI/Input/index.svelte b/src/stories/Design System - Core UI/Input/index.svelte index 82259007b..cb110f89f 100644 --- a/src/stories/Design System - Core UI/Input/index.svelte +++ b/src/stories/Design System - Core UI/Input/index.svelte @@ -8,9 +8,9 @@ - + -