{"id":22712189,"url":"https://github.com/buildit/ds-demo-lib","last_synced_at":"2025-03-29T22:21:44.040Z","repository":{"id":78235699,"uuid":"82306091","full_name":"buildit/ds-demo-lib","owner":"buildit","description":"Design System Demo Library","archived":false,"fork":false,"pushed_at":"2017-07-13T07:01:29.000Z","size":3975,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-02-04T23:31:46.945Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/buildit.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-17T14:41:49.000Z","updated_at":"2017-04-28T13:06:59.000Z","dependencies_parsed_at":"2023-07-28T13:15:47.275Z","dependency_job_id":null,"html_url":"https://github.com/buildit/ds-demo-lib","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildit%2Fds-demo-lib","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildit%2Fds-demo-lib/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildit%2Fds-demo-lib/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildit%2Fds-demo-lib/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/buildit","download_url":"https://codeload.github.com/buildit/ds-demo-lib/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246250086,"owners_count":20747293,"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-12-10T13:09:36.868Z","updated_at":"2025-03-29T22:21:44.035Z","avatar_url":"https://github.com/buildit.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Design System Demo Library\n\n## What is this?\n\nThis is a demo of how integration with tools like [Frontify](http://frontify.com) or [Brand.ai](http://brand.ai/) can automate some parts of the workflow when it comes to building web apps. The demo consists of four repositories:\n- [ds-demo-lib](http://github.com/buildit/ds-demo-lib): this is a React library of common components\n- [ds-demo-app1](http://github.com/buildit/ds-demo-app1): a consumer app of the above library. This pretends to be some kind of banking app where a table of data is shown.\n- [ds-demo-app2](http://github.com/buildit/ds-demo-app2): a second React app, consuming the common library. This has a simple form to make a \"payment\" of some sort.\n- [ds-demo-web](http://github.com/buildit/ds-demo-web): a static HTML site which consumes the styles available in the library.\n\nHere's what the flow looks like:\n\n![Design System demo components](docs/ds-demo-diagram.png)\n\n## What am I looking at\n\nThe common library has three components:\n- a [header](https://github.com/buildit/ds-demo-lib/blob/master/src/header/index.jsx)\n- a [footer](https://github.com/buildit/ds-demo-lib/blob/master/src/footer/index.jsx)\n- a [button](https://github.com/buildit/ds-demo-lib/blob/master/src/button/index.jsx) (also used by the header)\n\nStyling is done via [less](http://lesscss.org/). To see the component in the library run the `storybook` script. For the rest of the projects (the two apps and the static site) just run the `start` script. Open the following in a browser to see each project:\n- http://localhost:9000 (library storybook)\n- http://localhost:9001 (app 1)\n- http://localhost:9002 (app 2)\n- http://localhost:9003 (static site)\n\n## Configuration\n\nThe library currently has the sample styles we created already in the `src/assets` diretory. The `assets` script will download any styles you have and extract them there. Obviously you will need a respective Frontify and/or Brand.ai account. You also need to create a `brandai.config.js` in the library root folder. This needs to look like this:\n\n```\nconst brandai = {\n  logos: \u003cBRAND.AI ENDPOINT\u003e,\n  icons: \u003cBRAND.AI ENDPOINT\u003e,\n  image:  \u003cBRAND.AI ENDPOINT\u003e,\n  styles:  \u003cBRAND.AI ENDPOINT\u003e\n};\n\nconst frontify = {\n  devkit: \u003cFRONTIFY ENDPOINT\u003e,\n  logo:  \u003cFRONTIFY ENDPOINT\u003e\n};\n\nexports.default = {\n  brandai,\n  frontify\n};\n```\n\nYou can adjust the above config and `assets` task in the gulp file depending how your style library is created.\n\n## How do the styles work?\n\nThere are three main styles files in `src`:\n- vanilla.less\n- taco-bank.less\n- unicorn-inc.less\n\nThere is also a sample styleguide in `sample.less`.\nEach of the less files provides a mapping to the styles imported from the various tools. The vanilla one is actually hardcoded values, to demonstrate how that is another option. The idea is that as a developer of a consumer app you only have to worry about the names defined in the style files. These then map them to whatever the various design tools export.\n\n## What about the static site\n\nThat is there to demo that the styles can easily be reused for a static site, not just React apps. In fact, the styles can be used by anything that understands less. Note that the choice of less is just for this example, both Frontify and Brand.ai can export SCSS or plain CSS too.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuildit%2Fds-demo-lib","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuildit%2Fds-demo-lib","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuildit%2Fds-demo-lib/lists"}