@proulr/sdui-components 0.1.0 → 0.1.2

package/src/renderer/ui/app-icon-size-catalog.ts

@@ -0,0 +1,15 @@
+/** Tamanhos alinhados ao compose da tela de publicar (glyph ~24 em alvo 48). */
+export const APP_ICON_SIZE = {
+  chromeHeader: 26,
+  tabBar: 26,
+  composer: 24,
+  composerAction: 26,
+  drawerRow: 24,
+  drawerAddon: 28,
+  feedAction: 22,
+  searchInline: 20,
+  banner: 22,
+  fab: 26,
+  scrollFab: 22,
+  fabMenu: 28,
+} as const;

package/src/renderer/ui/app-icon.tsx

@@ -0,0 +1,175 @@
+import type { ComponentType } from 'react';
+import { APP_ICON_SIZE } from './app-icon-size-catalog';
+import {
+  AppChromeBackGlyph,
+  AppChromeBookmarkGlyph,
+  AppChromeBoostGlyph,
+  AppChromeChatGlyph,
+  AppChromeChevronDownGlyph,
+  AppChromeChevronRightGlyph,
+  AppChromeCloseGlyph,
+  AppChromeCommunitiesGlyph,
+  AppChromeEditGlyph,
+  AppChromeEventsGlyph,
+  AppChromeFireGlyph,
+  AppChromeFlashGlyph,
+  AppChromeFlipCameraGlyph,
+  AppChromeHeartFilledGlyph,
+  AppChromeHeartGlyph,
+  AppChromeHuntGlyph,
+  AppChromeIncognitoGlyph,
+  AppChromeListGlyph,
+  AppChromeLocationGlyph,
+  AppChromeMicGlyph,
+  AppChromeOverflowGlyph,
+  AppChromePauseGlyph,
+  AppChromePlayGlyph,
+  AppChromePlusGlyph,
+  AppChromeProfileGlyph,
+  AppChromePublishGlyph,
+  AppChromeRepostGlyph,
+  AppChromeSearchGlyph,
+  AppChromeSendGlyph,
+  AppChromeSettingsGlyph,
+  AppChromeShieldGlyph,
+  AppChromeSignOutGlyph,
+  AppChromeStarGlyph,
+  AppChromeStoryEffectsGlyph,
+  AppChromeStoryGlyph,
+  AppChromeStoryMentionGlyph,
+  AppChromeStoryMusicGlyph,
+  AppChromeStoryStickerGlyph,
+  AppChromeStoryTextGlyph,
+  AppChromeTabChatGlyph,
+  AppChromeTabDiscoverGlyph,
+  AppChromeTabFlashGlyph,
+  AppChromeTabVibesGlyph,
+  type AppChromeGlyphProps,
+} from './app-glyphs';
+import {
+  ComposeCameraGlyph,
+  ComposeFollowersGlyph,
+  ComposeGalleryGlyph,
+  ComposeGlobeGlyph,
+  ComposeMentionGlyph,
+  ComposeTrashGlyph,
+  ComposeVideoGlyph,
+} from './compose-glyphs';
+
+export type AppIconName =
+  | 'search'
+  | 'hunt'
+  | 'back'
+  | 'overflow'
+  | 'location'
+  | 'mic'
+  | 'send'
+  | 'chat'
+  | 'close'
+  | 'chevron-down'
+  | 'chevron-right'
+  | 'flip-camera'
+  | 'flash'
+  | 'gallery'
+  | 'video'
+  | 'camera'
+  | 'trash'
+  | 'globe'
+  | 'tab-discover'
+  | 'tab-vibes'
+  | 'tab-flash'
+  | 'tab-chat'
+  | 'boost'
+  | 'fire'
+  | 'settings'
+  | 'edit'
+  | 'incognito'
+  | 'events'
+  | 'shield'
+  | 'profile'
+  | 'bookmark'
+  | 'list'
+  | 'communities'
+  | 'star'
+  | 'sign-out'
+  | 'publish'
+  | 'story'
+  | 'story-music'
+  | 'story-sticker'
+  | 'story-text'
+  | 'story-effects'
+  | 'story-mention'
+  | 'repost'
+  | 'heart'
+  | 'heart-filled'
+  | 'play'
+  | 'pause'
+  | 'plus'
+  | 'followers'
+  | 'mention';
+
+const ICON_REGISTRY: Record<AppIconName, ComponentType<AppChromeGlyphProps>> = {
+  search: AppChromeSearchGlyph,
+  hunt: AppChromeHuntGlyph,
+  back: AppChromeBackGlyph,
+  overflow: AppChromeOverflowGlyph,
+  location: AppChromeLocationGlyph,
+  mic: AppChromeMicGlyph,
+  send: AppChromeSendGlyph,
+  chat: AppChromeChatGlyph,
+  close: AppChromeCloseGlyph,
+  'chevron-down': AppChromeChevronDownGlyph,
+  'chevron-right': AppChromeChevronRightGlyph,
+  'flip-camera': AppChromeFlipCameraGlyph,
+  flash: AppChromeFlashGlyph,
+  gallery: ComposeGalleryGlyph,
+  video: ComposeVideoGlyph,
+  camera: ComposeCameraGlyph,
+  trash: ComposeTrashGlyph,
+  globe: ComposeGlobeGlyph,
+  'tab-discover': AppChromeTabDiscoverGlyph,
+  'tab-vibes': AppChromeTabVibesGlyph,
+  'tab-flash': AppChromeTabFlashGlyph,
+  'tab-chat': AppChromeTabChatGlyph,
+  boost: AppChromeBoostGlyph,
+  fire: AppChromeFireGlyph,
+  settings: AppChromeSettingsGlyph,
+  edit: AppChromeEditGlyph,
+  incognito: AppChromeIncognitoGlyph,
+  events: AppChromeEventsGlyph,
+  shield: AppChromeShieldGlyph,
+  profile: AppChromeProfileGlyph,
+  bookmark: AppChromeBookmarkGlyph,
+  list: AppChromeListGlyph,
+  communities: AppChromeCommunitiesGlyph,
+  star: AppChromeStarGlyph,
+  'sign-out': AppChromeSignOutGlyph,
+  publish: AppChromePublishGlyph,
+  story: AppChromeStoryGlyph,
+  'story-music': AppChromeStoryMusicGlyph,
+  'story-sticker': AppChromeStoryStickerGlyph,
+  'story-text': AppChromeStoryTextGlyph,
+  'story-effects': AppChromeStoryEffectsGlyph,
+  'story-mention': AppChromeStoryMentionGlyph,
+  repost: AppChromeRepostGlyph,
+  heart: AppChromeHeartGlyph,
+  'heart-filled': AppChromeHeartFilledGlyph,
+  play: AppChromePlayGlyph,
+  pause: AppChromePauseGlyph,
+  plus: AppChromePlusGlyph,
+  followers: ComposeFollowersGlyph,
+  mention: ComposeMentionGlyph,
+};
+
+export type AppIconProps = {
+  name: AppIconName;
+  color?: string;
+  size?: number;
+};
+
+export function AppIcon({ name, color, size = APP_ICON_SIZE.composer }: AppIconProps) {
+  const Glyph = ICON_REGISTRY[name];
+  return <Glyph color={color} size={size} />;
+}
+
+export { APP_ICON_SIZE };

package/src/renderer/ui/compose-glyphs.tsx

@@ -293,32 +293,34 @@ export function ComposeTrashGlyph({ color = m3Colors.primary, size = 22 }: Glyph
   );
 }
 
-export function ComposePostGlyph({ color = m3Colors.onPrimary, size = 22 }: GlyphProps) {
+export function ComposePostGlyph({ color = m3Colors.onPrimary, size = 24 }: GlyphProps) {
+  const stroke = Math.max(1.8, size * 0.075);
+  const frame = size * 0.74;
+  const plusLen = frame * 0.42;
   return (
     <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
       <View
         style={{
-          width: size * 0.14,
-          height: size * 0.72,
-          borderRadius: size * 0.07,
-          backgroundColor: color,
-          transform: [{ rotate: '-18deg' }],
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.08,
-          left: size * 0.34,
-          width: size * 0.34,
-          height: size * 0.12,
-          borderTopWidth: 1.8,
-          borderRightWidth: 1.8,
+          width: frame,
+          height: frame,
+          borderRadius: size * 0.12,
+          borderWidth: stroke,
           borderColor: color,
-          borderTopRightRadius: size * 0.08,
-          transform: [{ rotate: '12deg' }],
+          alignItems: 'center',
+          justifyContent: 'center',
         }}
-      />
+      >
+        <View style={{ width: plusLen, height: stroke, backgroundColor: color, borderRadius: 1 }} />
+        <View
+          style={{
+            position: 'absolute',
+            width: stroke,
+            height: plusLen,
+            backgroundColor: color,
+            borderRadius: 1,
+          }}
+        />
+      </View>
     </View>
   );
 }

package/src/renderer/ui/index.ts

@@ -17,6 +17,53 @@ export {
   ComposeTrashGlyph,
   ComposeVideoGlyph,
 } from './compose-glyphs';
+export {
+  AppChromeBackGlyph,
+  AppChromeBookmarkGlyph,
+  AppChromeBoostGlyph,
+  AppChromeChatGlyph,
+  AppChromeChevronDownGlyph,
+  AppChromeChevronRightGlyph,
+  AppChromeCloseGlyph,
+  AppChromeCommunitiesGlyph,
+  AppChromeEditGlyph,
+  AppChromeEventsGlyph,
+  AppChromeFireGlyph,
+  AppChromeFlashGlyph,
+  AppChromeFlipCameraGlyph,
+  AppChromeHeartFilledGlyph,
+  AppChromeHeartGlyph,
+  AppChromeHuntGlyph,
+  AppChromeIncognitoGlyph,
+  AppChromeListGlyph,
+  AppChromeLocationGlyph,
+  AppChromeMicGlyph,
+  AppChromeOverflowGlyph,
+  AppChromePauseGlyph,
+  AppChromePlayGlyph,
+  AppChromePlusGlyph,
+  AppChromeProfileGlyph,
+  AppChromePublishGlyph,
+  AppChromeRepostGlyph,
+  AppChromeSearchGlyph,
+  AppChromeSendGlyph,
+  AppChromeSettingsGlyph,
+  AppChromeShieldGlyph,
+  AppChromeSignOutGlyph,
+  AppChromeStarGlyph,
+  AppChromeStoryEffectsGlyph,
+  AppChromeStoryGlyph,
+  AppChromeStoryMentionGlyph,
+  AppChromeStoryMusicGlyph,
+  AppChromeStoryStickerGlyph,
+  AppChromeStoryTextGlyph,
+  AppChromeTabChatGlyph,
+  AppChromeTabDiscoverGlyph,
+  AppChromeTabFlashGlyph,
+  AppChromeTabVibesGlyph,
+  type AppChromeGlyphProps,
+} from './app-glyphs';
+export { AppIcon, APP_ICON_SIZE, type AppIconName, type AppIconProps } from './app-icon';
 export { ComposeMediaCarousel, type ComposeMediaCarouselItem } from './compose-media-carousel';
 export { ComposeMediaShortcut, COMPOSE_MEDIA_TILE_SIZE } from './compose-media-shortcut';
 export { ComposeRecentMediaGrid, type ComposeRecentMediaItem } from './compose-recent-media-grid';