{"id":17859178,"url":"https://github.com/sonics-team/sonics","last_synced_at":"2025-10-17T19:41:53.374Z","repository":{"id":162975150,"uuid":"637871015","full_name":"sonics-team/sonics","owner":"sonics-team","description":"Free and open source Reactjs ui and utilities library","archived":false,"fork":false,"pushed_at":"2023-05-10T09:55:50.000Z","size":7912,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-06T10:53:43.208Z","etag":null,"topics":["react","reactjs","reactjs-components","ui-components","utilities"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sonics-team.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-08T15:29:35.000Z","updated_at":"2023-09-17T14:38:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"68c6b314-5e5c-4b25-bb6e-3602fde0eca2","html_url":"https://github.com/sonics-team/sonics","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/sonics-team/sonics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonics-team%2Fsonics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonics-team%2Fsonics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonics-team%2Fsonics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonics-team%2Fsonics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sonics-team","download_url":"https://codeload.github.com/sonics-team/sonics/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonics-team%2Fsonics/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267278631,"owners_count":24063252,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","reactjs","reactjs-components","ui-components","utilities"],"created_at":"2024-10-28T06:03:22.856Z","updated_at":"2025-10-17T19:41:48.339Z","avatar_url":"https://github.com/sonics-team.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://ibb.co/sjsHcww\"\u003e\u003cimg src=\"https://i.ibb.co/xhzHwjj/sonic-team.png\" alt=\"sonic-team\" border=\"0\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/@sonics-team/core\"\u003e\n    CORE: 0.0.1\n  \u003c/a\u003e\n  \u003ca aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/@sonics-team/utils\"\u003e\n    UTILS: 0.1.0\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Important Links\n\u003col\u003e\n\u003cli\u003e\n\u003ca href=\"https://turbo.build/repo/docs\"\u003e\nTurborepo Documentation\n\u003c/a\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"https://github.com/vercel/turbo/tree/main/examples\"\u003e\nTurborepo Examples\n\u003c/a\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\n## Core Team\n\u003ca href=\"https://github.com/ahmad-aqr\"\u003e\n\u003cp\u003eAhmad Al-aqraa\u003c/p\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/AousMohammad\"\u003e\n\u003cp\u003eAous Mohammad\u003c/p\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/dytohan\"\u003e\n\u003cp\u003eDyaa Tohan\u003c/p\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/mohammedyosef761\"\u003e\n\u003cp\u003eMohammad Youssef\u003c/p\u003e\n\u003c/a\u003e\n\u003ca href=\"\"\u003e\n\u003cp\u003eRahaf thiab\u003c/p\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/RiadAlsaqal\"\u003e\n\u003cp\u003eRiad Al-saqal\u003c/p\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/RoulaRohban\"\u003e\n\u003cp\u003eRoula Al-rouhban\u003c/p\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/Shayar-Hassan\"\u003e\n\u003cp\u003eShayar Hasan\u003c/p\u003e\n\u003c/a\u003e\n\n## Installation:\n\u003col\u003e\n\u003cli\u003e\ninstall pnpm:\n\n```npm install -g pnpm```\n\u003c/li\u003e\n\u003cli\u003e\ninstall all dependencies in root project directory:\n\n```pnpm install```\n\u003c/li\u003e\n\u003c/ol\u003e\n\n### Useful Commands\n\n- `pnpm build` - Build all packages, including the Storybook site\n- `pnpm dev` - Run all packages locally and preview with Storybook\n- `pnpm lint` - Lint all packages\n- `pnpm changeset` - Generate a changeset\n- `pnpm clean` - Clean up all `node_modules` and `dist` folders (runs each package's clean script)\n\n## Apps \u0026 Packages\n\nThis Turborepo includes the following packages and applications:\n\n- `apps/docs`: Component documentation site with Storybook\n- `apps/web`: React application to use packages and test it\n- `packages/@sonics-team/core`: Core React components\n- `packages/@sonics-team/utils`: Shared React utilities\n- `packages/@sonics-team/tsconfig`: Shared `tsconfig.json`s used throughout the Turborepo\n- `packages/@sonics-team/eslint`: ESLint preset\n\nEach package and app is 100% [TypeScript](https://www.typescriptlang.org/). Workspaces enables us to \"hoist\" dependencies that are shared between packages to the root `package.json`. This means smaller `node_modules` folders and a better local dev experience. To install a dependency for the entire monorepo, use the `-w` workspaces flag with `pnpm add`.\n\nThis example sets up your `.gitignore` to exclude all generated files, other folders like `node_modules` used to store your dependencies.\n\n### Compilation\n\nTo make the core library code work across all browsers, we need to compile the raw TypeScript and React code to plain JavaScript. We can accomplish this with `tsup`, which uses `esbuild` to greatly improve performance.\n\nRunning `pnpm build` from the root of the Turborepo will run the `build` command defined in each package's `package.json` file. Turborepo runs each `build` in parallel and caches \u0026 hashes the output to speed up future builds.\n\nFor `sonics-core`, the `build` command is the following:\n\n```bash\ntsup src/index.tsx --format esm,cjs --dts --external react\n```\n\n`tsup` compiles `src/index.tsx`, which exports all of the components in the design system, into both ES Modules and CommonJS formats as well as their TypeScript types. The `package.json` for `sonics-core` then instructs the consumer to select the correct format:\n\n```json:sonics-core/package.json\n{\n  \"name\": \"@sonics-team/core\",\n  \"version\": \"0.0.0\",\n  \"main\": \"./dist/index.js\",\n  \"module\": \"./dist/index.mjs\",\n  \"types\": \"./dist/index.d.ts\",\n  \"sideEffects\": false,\n}\n```\n\nRun `pnpm build` to confirm compilation is working correctly. You should see a folder `sonics-core/dist` which contains the compiled output.\n\n```bash\nsonics-core\n└── dist\n    ├── index.d.ts  \u003c-- Types\n    ├── index.js    \u003c-- CommonJS version\n    └── index.mjs   \u003c-- ES Modules version\n```\n\n## Components\n\nEach file inside of `sonics-core/src` is a component inside our design system. For example:\n\n```tsx:sonics-core/src/Button.tsx\nimport * as React from 'react';\n\nexport interface ButtonProps {\n  children: React.ReactNode;\n}\n\nexport function Button(props: ButtonProps) {\n  return \u003cbutton\u003e{props.children}\u003c/button\u003e;\n}\n\nButton.displayName = 'Button';\n```\n\nWhen adding a new file, ensure the component is also exported from the entry `index.tsx` file:\n\n```tsx:sonics-core/src/index.tsx\nimport * as React from \"react\";\nexport { Button, type ButtonProps } from \"./Button\";\n// Add new component exports here\n```\n\n## Storybook\n\nStorybook provides us with an interactive UI playground for our components. This allows us to preview our components in the browser and instantly see changes when developing locally. This example preconfigures Storybook to:\n\n- Use Vite to bundle stories instantly (in milliseconds)\n- Automatically find any stories inside the `stories/` folder\n- Support using module path aliases like `@sonics-core` for imports\n- Write MDX for component documentation pages\n\nFor example, here's the included Story for our `Button` component:\n\n```js:apps/docs/stories/button.stories.mdx\nimport { Button } from '@sonics-core/src';\nimport { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';\n\n\u003cMeta title=\"Components/Button\" component={Button} /\u003e\n\n# Button\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur tempor, nisl nunc egestas nisi, euismod aliquam nisl nunc euismod.\n\n## Props\n\n\u003cProps of={Box} /\u003e\n\n## Examples\n\n\u003cPreview\u003e\n  \u003cStory name=\"Default\"\u003e\n    \u003cButton\u003eHello\u003c/Button\u003e\n  \u003c/Story\u003e\n\u003c/Preview\u003e\n```\n\nThis example includes a few helpful Storybook scripts:\n\n- `pnpm dev`: Starts Storybook in dev mode with hot reloading at `localhost:6006`\n- `pnpm build`: Builds the Storybook UI and generates the static HTML files\n- `pnpm preview-storybook`: Starts a local server to view the generated Storybook UI\n\n## React application for testing\n\nReact app allows us to preview our components in the browser and instantly see changes when developing locally\n\nFor example, test button:\n\n```js:apps/web/App.tsx\nimport { Button } from '@sonics-core/src';\n\nexport default function App() {\n  return \u003cButton\u003ebutton from sonics-core\u003c/Button\u003e\n}\n```\n\n## Versioning \u0026 Publishing Packages\n\nWe uses [Changesets](https://github.com/changesets/changesets) to manage versions, create changelogs, and publish to npm. It's preconfigured so you can start publishing packages immediately.\n\nYou'll need to create an `NPM_TOKEN` and `GITHUB_TOKEN` and add it to your GitHub repository settings to enable access to npm. It's also worth installing the [Changesets bot](https://github.com/apps/changeset-bot) on your repository.\n\n### Changesets instructions:\n\n- When we fix a bug in @sonics-team/core as example:\n1. `cd packages/sonics-core`\n2. `npm version patch`\n \n- When we add feature or improve it:\n1. `cd packages/sonics-core`\n2. `npm version minor`\n\n- When we finish our milestone or reach planned target:\n1. `cd packages/sonics-core`\n2. `npm version major`\n\n### Generating the Changelog\n\nTo generate your changelog, run `pnpm changeset` locally:\n\n1. **Which packages would you like to include?** – This shows which packages and changed and which have remained the same. By default, no packages are included. Press `space` to select the packages you want to include in the `changeset`.\n1. **Which packages should have a major bump?** – Press `space` to select the packages you want to bump versions for.\n1. If doing the first major version, confirm you want to release.\n1. Write a summary for the changes.\n1. Confirm the changeset looks as expected.\n1. A new Markdown file will be created in the `changeset` folder with the summary and a list of the packages included.\n\n### Releasing\n\nWhen you push your code to GitHub, the [GitHub Action](https://github.com/changesets/action) will run the `release` script defined in the root `package.json`:\n\n```bash\npnpm release\n```\n\nTurborepo runs the `build` script for all publishable packages (excluding docs/web) and publishes the packages to npm. By default, this example includes `sonics` as the npm organization.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonics-team%2Fsonics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsonics-team%2Fsonics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonics-team%2Fsonics/lists"}