{"id":21824323,"url":"https://github.com/shopify/discount-app-components","last_synced_at":"2025-05-16T15:07:44.526Z","repository":{"id":37031809,"uuid":"503399936","full_name":"Shopify/discount-app-components","owner":"Shopify","description":"A library of discounts-focused React components to help in building Shopify apps.","archived":false,"fork":false,"pushed_at":"2025-04-28T19:57:58.000Z","size":1473,"stargazers_count":85,"open_issues_count":23,"forks_count":26,"subscribers_count":200,"default_branch":"main","last_synced_at":"2025-05-15T19:49:34.725Z","etag":null,"topics":["component-library","discounts","react","shopify-apps","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@shopify/discount-app-components","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/Shopify.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-14T14:42:21.000Z","updated_at":"2025-04-21T12:01:35.000Z","dependencies_parsed_at":"2023-09-26T15:42:48.349Z","dependency_job_id":"872923b2-b8d7-4253-8998-c66b706798c2","html_url":"https://github.com/Shopify/discount-app-components","commit_stats":{"total_commits":239,"total_committers":20,"mean_commits":11.95,"dds":0.803347280334728,"last_synced_commit":"8e4935f6dc91a2a9d321b6e8208ff9ee0e38ed59"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shopify%2Fdiscount-app-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shopify%2Fdiscount-app-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shopify%2Fdiscount-app-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shopify%2Fdiscount-app-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Shopify","download_url":"https://codeload.github.com/Shopify/discount-app-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254553958,"owners_count":22090417,"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","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":["component-library","discounts","react","shopify-apps","typescript"],"created_at":"2024-11-27T17:57:30.983Z","updated_at":"2025-05-16T15:07:44.431Z","avatar_url":"https://github.com/Shopify.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# discount-app-components\n\n[![npm Package Version](https://img.shields.io/npm/v/@shopify/discount-app-components)](https://www.npmjs.com/package/@shopify/discount-app-components)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md)\n\n`@shopify/discount-app-components` provides a set of stateless discount components to help 3p app developers create discounts apps.\n\n## Note on updates\n\nWhile we strive to keep the library updated, please note that the current version available in the Shopify admin may be different from this version. We will communicate upcoming updates as they are planned.\n\n## App development\n\nFor more information about creating apps for the Shopify App Store, see the [app development documentation](https://shopify.dev/apps).\n\n---\n\n## Using the repo\n\n### Installation\n\nRun the following command using [npm](https://www.npmjs.com/):\n\n```bash\nnpm install @shopify/discount-app-components --save\n```\n\nIf you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead:\n\n```bash\nyarn add @shopify/discount-app-components\n```\n\n\u003e 🛑 The project has `peerDependencies` of `@shopify/app-bridge`, and `@shopify/polaris` which must also be installed in your app.\n\n### Usage\n\n1.  Import the CSS for this repo and Polaris directly into your project if your asset packager supports it:\n\n    ```js\n    import '@shopify/discount-app-components/build/esm/styles.css';\n    import '@shopify/polaris/build/esm/styles.css';\n    ```\n\n    Otherwise include the CSS in your HTML. We suggest copying the styles file into your own project, but you may also use it directly:\n\n    ```html\n    \u003clink\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/@shopify/discount-app-components@\u003cyour version number\u003e/build/esm/styles.css\"\n    /\u003e\n    \u003clink\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/@shopify/polaris@\u003cyour version number\u003e/build/esm/styles.css\"\n    /\u003e\n    ```\n\n2.  This library contains a number of locale-specific components, and you will be required to pass a `locale` and a `ianaTimezone` to the discounts AppProvider.\n\n    ```js\n    import {Page, AppProvider as PolarisAppProvider} from '@shopify/polaris';\n    import {AppProvider as DiscountsProvider} from '@shopify/discount-app-components';\n\n    // See [Polaris AppProvider documentation](https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/AppProvider/README.md#using-translations) for more details on using Polaris translations\n    import enPolarisTranslations from '@shopify/polaris/locales/en.json';\n\n    // Import polaris styles\n    import \"@shopify/polaris/build/esm/styles.css\";\n\n    // Import this discount-app-components styles\n    import \"@shopify/discount-app-components/build/esm/styles.css\";\n\n    export default function App() {\n\n      ...\n\n      return (\n          \u003cPolarisAppProvider i18n={enPolarisTranslations}\u003e\n            {/* discount-app-component specific AppProvider */}\n            \u003cDiscountsProvider locale=\"en-US\" ianaTimezone=\"America/Los_Angeles\"\u003e\n              \u003cPage title=\"Example app\"\u003e\n                {/* Add your discount components here */}\n              \u003c/Page\u003e\n            \u003c/DiscountsProvider\u003e\n          \u003c/PolarisAppProvider\u003e\n      );\n    }\n    ```\n\n_**Note**: you may need to rename the discounts AppProvider to avoid clashing with another AppProvider component:_\n\n## Development\n\n### Testing local changes in a consuming project\n\n0. In your terminal, install [yalc](https://github.com/wclr/yalc) globally. `npm i yalc -g`\n\n1. In your terminal, run `yalc publish --private` from the discount-app-components repo\n\n2. In your terminal, open a second tab in your consuming project's directory and run `yalc add @shopify/discount-app-components`. This will the dependency to your project's package.json that resembles the following:\n\n```json\n\"dependencies\": {\n...\n\"@shopify/discount-app-components\": \"file:.yalc/@shopify/discount-app-components\",\n...\n}\n```\n\n3. Build your project to install the @shopify/discount-app-components's dependencies (e.g. `yarn`). **NOTE** This may update your project's dependency lockfile, be cautious about committing changes added by importing @shopify/discount-app-components locally.\n\n#### To make changes in @shopify/discount-app-components and update your yalc link\n\n1. Republish your changes from @shopify/discount-app-components with `yalc publish --private`\n2. Update the dependency in your consuming project with `yalc update @shopify/discount-app-components`\n   - Note that you may need to `rm -rf ./node_modules \u0026\u0026 rm -rf .yalc \u0026\u0026 yarn` for the changes to apply.\n\n---\n\n## Troubleshooting\n\n### Can't import the named export `XYZ` from non EcmaScript module (only default export is available)\n\nIf you run into an error that resembles the following:\n\n```shell\nERROR in ./node_modules/@shopify/react-i18n/build/esm/i18n.mjs 406:68-76\nCan't import the named export 'TimeUnit' from non EcmaScript module (only default export is available)\n @ ./node_modules/@shopify/react-i18n/build/esm/index.mjs\n @ ./node_modules/@shopify/react-i18n/index.mjs\n @ ./node_modules/@shopify/discount-app-components/build/esm/components/FormattedNumberField/FormattedNumberField.js\n @ ./node_modules/@shopify/discount-app-components/build/esm/index.js\n @ ./src/App.js\n @ ./src/index.js\n```\n\nYou may need to update your webpack.config.js to include a `module.rules` of:\n\n```json\n{\n  test: /\\.mjs$/,\n  include: /node_modules/,\n  type: 'javascript/auto',\n}\n```\n\n### Deploying new versions\n\nWriting changelogs and releasing should be as seamless and automated as possible. This repo uses changesets to version and release packages. To create a new version and release, follow these steps:\n\n#### Typical flow:\n\n##### Feature work\n\n1. Changes are made in a working branch and it is deemed that a version (patch/minor/major) bump is needed.\n2. On the working branch:\n   a. If you want to include those changes into the changelog, run `yarn changeset add` and commit the generated changesets.\n   b. If you don't want to include those changes in the changelog, you can label your pr with 🤖 Skip Changelog.\n3. Then push the generated changesets and or changes to your working branch\n4. Merge working branch as you would normally, after getting reviews and CI passing\n\n##### New version and releasing\n\n1. When feature work is merged into main there is a release GitHub action that runs which generates a Version Packages pull request.\n2. It runs `yarn version` and incorporates the changesets into the changelog and bumps the version accordingly. (patch/minor/major) It then creates a `Version Packages` pull request.\n3. Merge the Version Packages PR.\n4. The release action runs `yarn release`, which publishes the package to npm.\n\n### Contributing\n\nPlease see our [contributing guidelines](https://github.com/Shopify/discount-app-components/blob/main/CONTRIBUTING.md) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshopify%2Fdiscount-app-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshopify%2Fdiscount-app-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshopify%2Fdiscount-app-components/lists"}