{"id":20779632,"url":"https://github.com/smartlogic/smartbox","last_synced_at":"2025-03-11T22:21:44.694Z","repository":{"id":39355239,"uuid":"214006297","full_name":"smartlogic/smartbox","owner":"smartlogic","description":"A react template that includes the SmartBox UI kit and Storybook","archived":false,"fork":false,"pushed_at":"2023-01-04T22:27:25.000Z","size":2980,"stargazers_count":0,"open_issues_count":23,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-07T02:39:51.811Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smartlogic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-09T19:30:22.000Z","updated_at":"2021-05-11T18:59:30.000Z","dependencies_parsed_at":"2023-02-02T22:15:22.190Z","dependency_job_id":null,"html_url":"https://github.com/smartlogic/smartbox","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smartlogic%2Fsmartbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smartlogic%2Fsmartbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smartlogic%2Fsmartbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smartlogic%2Fsmartbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smartlogic","download_url":"https://codeload.github.com/smartlogic/smartbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243120408,"owners_count":20239467,"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":[],"created_at":"2024-11-17T13:29:01.115Z","updated_at":"2025-03-11T22:21:44.674Z","avatar_url":"https://github.com/smartlogic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Smartbox\nSmartbox is an open source React component library, built for [SmartLogic's Clients](https://smartlogic.io).\n\nIt is a fork of [SparkPost's _Matchbox_ project](https://github.com/sparkpost/matchbox), so mucho thanks to SparkPost.\n\n[![Build Status](https://img.shields.io/travis/smartlogic/smartbox/master.svg?style=flat-square)](https://travis-ci.org/smartlogic/smartbox)\n[![Coverage Status](https://img.shields.io/coveralls/github/smartlogic/smartbox/master.svg?style=flat-square)](https://coveralls.io/github/smartlogic/smartbox?branch=master)\n\n#### Links:\n- [Component Demo](https://smartlogic.github.io/smartbox/)\n- [Sass Documentation](src/styles/README.md)\n- [Unreleased Changes](unreleased.md)\n\n---\n\n## Usage\n### 1. Installation\n\nIn your React project, use npm to install smartbox:\n```bash\nnpm install @smartlogic/smartbox --save\n```\n\n### 2. Include Styles\n\n```scss\n // Import smartbox's styles\n @import '~@smartlogic/smartbox/styles.scss';\n // Optionally include config.scss for sass functions and mixins\n @import '~@smartlogic/smartbox/src/styles/config.scss';\n```\n\n### 3. Use the React components\nIn-depth usage docs coming in the future. For now, reference [storybook](https://smartlogic.github.io/smartbox/).\n```js\nimport React from ‘react’;\nimport { Panel } from '@smartlogic/smartbox';\n\nconst YourComponent = () =\u003e (\n \u003cPanel accent title='Hey!'\u003e\n  \u003cPanel.Section\u003e\n    Section Content\n  \u003c/Panel.Section\u003e\n \u003c/Panel\u003e\n);\n```\n\n## Storybook Development\n[React Storybook](https://github.com/storybooks/storybook) is included for local development.\n```bash\n# Runs storybook at localhost:9001\nnpm run start:storybook\n```\n\n## Running Tests\n\n### Unit Testing\nWhen running tests for the first time locally:\n```bash\nnpm run pretest\n```\n\nAfter the initial setup, tests can be run at any time via:\n```bash\nnpm run test:unit\n```\n\n### End to End Testing\nEnd to end tests can be run locally, either in headless mode or with a GUI.\n\nFirst, run storybook with a local server:\n```bash\nnpm run start:storybook\n```\n\nThen, either run Cypress in headless mode:\n```bash\nnpm run test:e2e:headless\n```\n\nOr, run Cypress with the GUI\n```bash\nnpm run test:e2e:gui\n```\n\n## Publishing\n```bash\n# First merge your PR into master\n# Move into the package you want to publish\ncd packages/smartbox\n\n# Bump version number\nnpm version x.x.x\n\n# Commit the release\ngit add .\ngit commit -m \"Publish @smartlogic/smartbox x.x.x\"\ngit push\n\n# Run the build and publish to NPM with your 2fa code\nnpm run build\nnpm publish --otp=xxxxxx\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmartlogic%2Fsmartbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmartlogic%2Fsmartbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmartlogic%2Fsmartbox/lists"}