Skip to content

feat: add @cocso-ui/react-native-icons package#164

Merged
hakilee merged 4 commits intov1from
feat/react-native-icons
Apr 8, 2026
Merged

feat: add @cocso-ui/react-native-icons package#164
hakilee merged 4 commits intov1from
feat/react-native-icons

Conversation

@hakilee
Copy link
Copy Markdown
Contributor

@hakilee hakilee commented Apr 8, 2026

Summary

  • Add React Native icon generation pipeline (generate-react-native.ts) that transforms SVGs into react-native-svg components
  • Add @cocso-ui/react-native-icons published package with peer deps: react, react-native, react-native-svg
  • Extend icons build/validation pipeline and update AGENTS.md

Changes

  • ecosystem/icons/scripts/generate-react-native.ts — SVG → React Native TSX codegen (86 icons: 71 semantic + 15 brand)
  • ecosystem/icons/templates/react-native/ — Icon wrapper + IconProps (extends SvgProps)
  • packages/react-native-icons/ — publishable package (Rollup CJS+ESM bundles)
  • ecosystem/icons/package.json./react-native export, build pipeline
  • ecosystem/icons/scripts/validate.ts — React Native validation section
  • AGENTS.md — monorepo structure map updated

Usage

import { CheckIcon, SearchIcon } from "@cocso-ui/react-native-icons";

<CheckIcon size={24} color="#000" />

Test plan

  • pnpm --filter @cocso-ui/icons build — 86 RN components generated
  • pnpm --filter @cocso-ui/icons validate — 5/5 checks passed
  • pnpm --filter @cocso-ui/react-native-icons build — CJS/ESM + types built
  • pnpm --filter @cocso-ui/icons lint — clean
  • pnpm --filter @cocso-ui/react-native-icons lint — clean
  • pnpm build — full monorepo build 11/11 tasks passed
  • Generated output verified (CheckIcon, KakaoLogo with useId/clipPath, SeoulPharmaLogo with circle)

🤖 Generated with Claude Code

Add React Native icon generation to the existing icon ecosystem. SVGs are
transformed into react-native-svg components via a new codegen script,
mirroring the established generate-react.ts pattern.

- Add ecosystem/icons/scripts/generate-react-native.ts (SVG → RN TSX)
- Add ecosystem/icons/templates/react-native/ (Icon wrapper + IconProps)
- Add packages/react-native-icons/ (published package, re-exports from icons)
- Update ecosystem/icons build pipeline and validation
- Update AGENTS.md monorepo structure map

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 8, 2026

⚠️ No Changeset found

Latest commit: 9994ea2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 8, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
cocso-ui Ready Ready Preview, Comment Apr 8, 2026 2:11pm
cocso-ui-storybook Ready Ready Preview, Comment Apr 8, 2026 2:11pm

Request Review

@github-actions github-actions Bot added size/xl Extra large PR (500+ lines) enhancement New feature or request documentation Improvements or additions to documentation ci CI/CD related changes react css baseframe icons recipe figma storybook website codegen and removed enhancement New feature or request size/xl Extra large PR (500+ lines) labels Apr 8, 2026
@hakilee hakilee changed the base branch from main to v1 April 8, 2026 08:59
@hakilee
Copy link
Copy Markdown
Contributor Author

hakilee commented Apr 8, 2026

@codex review

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a9c202bdb5

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread packages/react-native-icons/package.json
@hakilee
Copy link
Copy Markdown
Contributor Author

hakilee commented Apr 8, 2026

Review comment applied: docs/project-react-native-icons.md 생성 및 docs/project-icons.md에 react-native codegen 관련 내용 반영 완료.

- Create docs/project-react-native-icons.md per Documentation Policy
- Update docs/project-icons.md with react-native codegen references

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions github-actions Bot added enhancement New feature or request size/xl Extra large PR (500+ lines) and removed ci CI/CD related changes size/xl Extra large PR (500+ lines) react labels Apr 8, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 8, 2026

Test Coverage

Package Statements Branches Functions Lines
@cocso-ui/react 🟢 99.17% 🟢 95.81% 🟢 98.92% 🟢 99.14%
@cocso-ui/recipe 🟢 94.03% 🟢 96.1% 🟢 100% 🟢 94%
@cocso-ui/codegen 🟢 91.26% 🟡 82.14% 🟢 100% 🟢 92.74%
@cocso-ui/figma 🟢 95.78% 🟡 87.73% 🟢 100% 🟢 95.75%
@cocso-ui/baseframe 🟢 95.96% 🟢 90.39% 🟢 100% 🟢 95.89%
@cocso-ui/react — File Coverage
File Stmts Branch Funcs Lines
src/components/avatar/avatar.tsx 🟡 85.71% 🟡 80% 🟢 100% 🟡 85.71%
src/components/typography/typography.tsx 🟢 97.61% 🟢 95.23% 🟢 95% 🟢 97.36%
src/cn.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/accordion/accordion.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/alert/alert.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/badge/badge.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/breadcrumb/breadcrumb.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/button/button.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/card/card.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/checkbox/checkbox.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/day-picker/day-picker.tsx 🟢 100% 🔴 66.66% 🟢 100% 🟢 100%
src/components/dialog/dialog.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/dropdown/dropdown.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/field/field.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/input/input.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/link/link.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/month-picker/month-picker.tsx 🟢 100% 🔴 50% 🟢 100% 🟢 100%
src/components/one-time-password-field/one-time-password-field.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/pagination/pagination.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/popover/popover.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/progress/progress.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/radio-group/radio-group.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/select/select.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/skeleton/skeleton.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/spinner/spinner.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/stock-quantity-status/stock-quantity-status.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/switch/switch.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/tab/tab.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/components/tooltip/tooltip.tsx 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/primitives/accordion.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/primitives/checkbox.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/primitives/dialog.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/primitives/menu.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/primitives/merge-props.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/primitives/popover.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/primitives/radio-group.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/primitives/radio.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/primitives/switch.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/primitives/tabs.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/primitives/tooltip.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/primitives/use-render.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/token/color.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/token/radius.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/token/spacing.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/token/typography.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
@cocso-ui/recipe — File Coverage
File Stmts Branch Funcs Lines
src/recipes/alert.recipe.ts 🔴 0% 🟢 100% 🟢 100% 🔴 0%
src/recipes/avatar.recipe.ts 🔴 0% 🟢 100% 🟢 100% 🔴 0%
src/recipes/breadcrumb.recipe.ts 🔴 0% 🟢 100% 🟢 100% 🔴 0%
src/recipes/card.recipe.ts 🔴 0% 🟢 100% 🟢 100% 🔴 0%
src/recipes/progress.recipe.ts 🔴 0% 🟢 100% 🟢 100% 🔴 0%
src/recipes/skeleton.recipe.ts 🔴 0% 🟢 100% 🟢 100% 🔴 0%
src/utils/semantic-mapping.ts 🔴 0% 🟢 100% 🟢 100% 🔴 0%
src/resolvers/react-styles.ts 🟢 94.59% 🟡 78.57% 🟢 100% 🟢 94.44%
src/define-recipe.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/types.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/recipes/badge.recipe.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/recipes/button.recipe.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/recipes/checkbox.recipe.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/recipes/dialog.recipe.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/recipes/input.recipe.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/recipes/link.recipe.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/recipes/pagination.recipe.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/recipes/radio-group.recipe.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/recipes/select.recipe.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/recipes/spinner.recipe.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/recipes/stock-quantity-status.recipe.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/recipes/switch.recipe.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/recipes/typography.recipe.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/resolvers/react.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/utils/property-categories.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/utils/token-classification.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
@cocso-ui/codegen — File Coverage
File Stmts Branch Funcs Lines
src/generate-recipe.ts 🟢 90.9% 🟡 83.33% 🟢 100% 🟢 92.07%
src/generate.ts 🟢 93.33% 🟡 75% 🟢 100% 🟢 96.55%
@cocso-ui/figma — File Coverage
File Stmts Branch Funcs Lines
src/generators/recipe-resolver.ts 🟢 95.27% 🟡 86.17% 🟢 100% 🟢 95.23%
src/core/color-converter.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/core/token-converter.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
@cocso-ui/baseframe — File Coverage
File Stmts Branch Funcs Lines
src/core/parsers/value.ts 🟢 92.71% 🟢 90.9% 🟢 100% 🟢 92.61%
src/core/transforms/validate.ts 🟢 95.52% 🔴 68.18% 🟢 100% 🟢 95.52%
src/core/builders/css-vars.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/core/builders/tailwind.ts 🟢 100% 🟢 94.73% 🟢 100% 🟢 100%
src/core/builders/utils/css.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/core/builders/utils/naming.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/core/parsers/ast.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/core/transforms/build.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/core/transforms/resolve.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%
src/utils/fs.ts 🟢 100% 🟢 100% 🟢 100% 🟢 100%

Updated: 2026-04-08 14:15 UTC

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 8, 2026

Visual Regression Report

All 108 snapshot(s) matched — no visual regressions.

108 screenshot(s) — all matching baseline
  • Accordion / Default
  • Accordion / Multiple
  • Accordion / No Chevron
  • Alert / Default
  • Alert / Variants
  • Alert / With Close
  • Avatar / Default
  • Avatar / Shapes
  • Avatar / Sizes
  • Avatar / With Image
  • Badge / Default
  • Badge / Shapes
  • Badge / Sizes
  • Badge / Variants
  • Breadcrumb / Custom Separator
  • Breadcrumb / Default
  • Breadcrumb / Sizes
  • Button / Default
  • Button / Disabled
  • Button / Loading
  • Button / Shapes
  • Button / Sizes
  • Button / Variants
  • Card / Default
  • Card / Paddings
  • Card / Variants
  • Checkbox / Default
  • Checkbox / Disabled
  • Checkbox / Sizes
  • Checkbox / States
  • Checkbox / Uncontrolled
  • Checkbox / With Label
  • Daypicker / Default
  • Daypicker / Disabled
  • Daypicker / With Min Max
  • Dialog / Default
  • Dialog / Large
  • Dialog / Medium
  • Dialog / Small
  • Dialog / Without Close
  • Dropdown / Default
  • Dropdown / With Icons
  • Field / With Input
  • Field / With Select
  • Input / Default
  • Input / Disabled
  • Input / Error
  • Input / Read Only
  • Input / Sizes
  • Input / Stretch
  • Input / Types
  • Input / With Label
  • Link / Default
  • Link / Sizes
  • Link / Variants
  • Link / With External Icon
  • Monthpicker / Default
  • Monthpicker / Disabled
  • Onetimepasswordfield / Default
  • Onetimepasswordfield / Four Digits
  • Pagination / Default
  • Pagination / Few Pages
  • Pagination / Many Pages
  • Popover / Default
  • Popover / Sides
  • Popover / With Form
  • Popover / Without Arrow
  • Progress / Default
  • Progress / Sizes
  • Progress / Values
  • Progress / Variants
  • Radiogroup / Default
  • Radiogroup / Disabled
  • Radiogroup / Sizes
  • Select / Default
  • Select / Disabled
  • Select / Error
  • Select / Sizes
  • Select / Stretch
  • Select / With Label
  • Skeleton / Animations
  • Skeleton / Content Placeholder
  • Skeleton / Default
  • Skeleton / Variants
  • Spinner / Default
  • Spinner / Sizes
  • Spinner / Variants
  • Stockquantitystatus / All
  • Stockquantitystatus / Default
  • Switch / Default
  • Switch / Disabled
  • Switch / Label Positions
  • Switch / Sizes
  • Switch / Variants
  • Switch / With Label
  • Tab / Default
  • Tab / Many Tabs
  • Toast / Default
  • Toast / Variants
  • Tooltip / Default
  • Tooltip / Sides
  • Typography / Body
  • Typography / Default
  • Typography / Heading
  • Typography / Weights
  • React Icons / All Icons
  • React Icons / Brand Icons
  • React Icons / Semantic Icons

Generated by cocso-ui Visual Regression

github-actions Bot added a commit that referenced this pull request Apr 8, 2026
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel vercel Bot temporarily deployed to Preview – cocso-ui April 8, 2026 12:55 Inactive
@vercel vercel Bot temporarily deployed to Preview – cocso-ui-storybook April 8, 2026 12:55 Inactive
@github-actions github-actions Bot added the size/xl Extra large PR (500+ lines) label Apr 8, 2026
@vercel vercel Bot temporarily deployed to Preview – cocso-ui April 8, 2026 12:55 Inactive
@vercel vercel Bot temporarily deployed to Preview – cocso-ui-storybook April 8, 2026 12:55 Inactive
github-actions Bot added a commit that referenced this pull request Apr 8, 2026
github-actions Bot added a commit that referenced this pull request Apr 8, 2026
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@hakilee hakilee force-pushed the feat/react-native-icons branch from 75a0363 to 9994ea2 Compare April 8, 2026 13:03
@vercel vercel Bot temporarily deployed to Preview – cocso-ui-storybook April 8, 2026 13:03 Inactive
@vercel vercel Bot temporarily deployed to Preview – cocso-ui April 8, 2026 13:03 Inactive
github-actions Bot added a commit that referenced this pull request Apr 8, 2026
@github-actions github-actions Bot added the ci CI/CD related changes label Apr 8, 2026
github-actions Bot added a commit that referenced this pull request Apr 8, 2026
@hakilee hakilee force-pushed the feat/react-native-icons branch from 3cb92bc to 9994ea2 Compare April 8, 2026 14:13
@github-actions github-actions Bot removed the ci CI/CD related changes label Apr 8, 2026
github-actions Bot added a commit that referenced this pull request Apr 8, 2026
@hakilee hakilee merged commit d1a0ad1 into v1 Apr 8, 2026
21 checks passed
@hakilee hakilee deleted the feat/react-native-icons branch April 8, 2026 14:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation enhancement New feature or request icons size/xl Extra large PR (500+ lines)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant