{"id":23053971,"url":"https://github.com/emcecs/dell-design-react-common","last_synced_at":"2025-08-15T05:31:23.578Z","repository":{"id":40566376,"uuid":"435399854","full_name":"EMCECS/dell-design-react-common","owner":"EMCECS","description":"Override CSS of Clarity-React components to align it with Dell design standards","archived":false,"fork":false,"pushed_at":"2024-05-23T05:46:23.000Z","size":4943,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-12-06T18:19:23.537Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EMCECS.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":"2021-12-06T07:27:52.000Z","updated_at":"2024-05-23T05:46:23.000Z","dependencies_parsed_at":"2024-05-23T06:47:22.645Z","dependency_job_id":null,"html_url":"https://github.com/EMCECS/dell-design-react-common","commit_stats":{"total_commits":204,"total_committers":16,"mean_commits":12.75,"dds":0.803921568627451,"last_synced_commit":"2e7b8a71407e4f33902c0fc116d51a4e016ae66e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EMCECS%2Fdell-design-react-common","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EMCECS%2Fdell-design-react-common/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EMCECS%2Fdell-design-react-common/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EMCECS%2Fdell-design-react-common/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EMCECS","download_url":"https://codeload.github.com/EMCECS/dell-design-react-common/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229893980,"owners_count":18140616,"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-16T00:31:49.922Z","updated_at":"2024-12-16T00:31:50.513Z","avatar_url":"https://github.com/EMCECS.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dell-design-react-common binding\n\nThis project an unofficial implementation of CSS wrapper for [Dell Design System for Product](https://web.ddsproduct.com/31b3fd8b1/p/07e33c-) on [VMware Clarity Design](https://clarity.design) in React. It leverages CSS, icons and images from the Clarity project. \n\n## Usage in React projects\n\nTo use the project simply add the dependencies with `yarn`, `npm`, etc:\n```shell\n$ yarn add @dellstorage/dell-design-react-common\n```\n\nImport styles and globals from peer dependencies:\n\n#### `index.tsx`\n```typescript\nimport \"@webcomponents/custom-elements/custom-elements.min.js\";\nimport \"@dellstorage/dell-design-react-common/main.css\";\nimport \"@clr/icons/clr-icons-lite.min.js\";\nimport \"@clr/icons/shapes/technology-shapes.js\";\n\n...\n```\nAnd make use of the components in your app:\n#### `App.tsx`\n```typescript jsx\nimport React, {Component} from 'react';\nimport MainContainer from \"@dellstorage/clarity-react/layout/main-container/MainContainer\";\n\nconst initialState = {\n};\n\ntype MainPageProps = {\n    token?: string\n    level?: string\n    message?: string\n}\n\nexport type MainPageState = Readonly\u003ctypeof initialState\u003e;\n\nexport default class MainPage extends Component\u003cMainPageProps\u003e {\n    readonly state: MainPageState = initialState;\n\n    render() {\n        return(\n            \u003cMainContainer\u003e\n                Hello\n            \u003c/MainContainer\u003e\n        );\n    }\n}\n```\n\n## Storybook\n\nThis project includes [Storybook](https://storybook.js.org/) as a component browser. To fire up storybook, download the project in Git:\n```shell\n$ git clone git@github.com:EMCECS/dell-design-react-common.git\n```\n\nInstall the dependencies with `yarn`, `npm`, etc.\n```sbtshell\n$ cd dell-design-react-common\n\n# Using yarn\n$ yarn\n\n# Using NPM\n$ npm install\n```\n\nAny run the \"storybook\" script:\n```shell\n# Using yarn\n$ yarn run storybook\n\n# Using NPM\n$ npm run storybook\n```\n\n## Licenses\n* dell-design-react-common components is licensed under Apache 2.0 License.\n* The VMware Clarity Design System is licensed under the MIT license.\n\n## SASS Style conventions\n1. SCSS File Structure\n```\nstyles\n -\u003e Common\n -\u003e Components\n -\u003e index.scss\n ```\nCommon utility styles such as Variables, Mixins, Functions, Fonts, Layout (padding, margin) etc. under the Common folder and reusable component styles are under Components like Buttons, Inputs etc.\n\n2. Use more generic to specific, semantically-named variables with kebab-case for example:\n```\nAvoid- $blue-border, $light-blue-border has no pattern\nPrefer - $border-blue, $border-light-blue\n```\nThis pattern helps in recollection and hinting by editor.\nIn this pattern you can start generically and get more specific as the text editor auto-suggests variable names.\n\n3. Declare/ indent the related CSS properties together so it helps to identify repeated blocks for reuse.\nFor example - all margin related styles (top, left, right etc) should be declared together, font-size, font-weight etc \n\n4. If block of style is getting repeated use mixins\n5. If something needs to be calculated and returned depending on variables then use function\n6. If some style is repeated declare and use as variable\n7. The color codes are named as per Dell Design Standard, refer this page if any code is missing and needs to be added. https://web.ddsproduct.com/31b3fd8b1/p/60290f-colors\n\n8. Avoid naming variables with actual values they hold, instead name them by the function they do, for example:\nAvoid- ``` $padding-top-5: 5px;```\nAs value of the this would always remain 5px\nPrefer-  ``` $checkbox-padding-top: 5px;```\n\n9. Always override the class associated with the HTML element and not the HTML element iteself\n\n10. @extend vs @include i.e Mixin - which one to use when?\n\nPrefer Mixin if\n```\n@include keyword is used to include the code written in a mixin block. \n@include/ Mixin can also accept parameters if required, use it when you need repeatable style with same parameters but with different values.\n```\n\nPrefer @extend if\n```\n@extend is used in SASS to inherit(share) the properties from another css selector\n@extend is most useful when the elements are almost same or identical and only differ in some properties\n@extend cannot accept parameters\n```\n\n11. Mixin vs Function \nMostly use mixins, unless you need complex custom logic and calculations\nIts bad practice to use functions for side-effects and is heavily discouraged\nPrefer:\n```\n    @function remy($pxsize) {\n        @return ($pxsize/16)+rem;\n    }\n    h1 { font-size: remy(32);}\n```\nAvoid using Mixin like this\n```\n    @mixin remy ($pxsize) {\n        font-size: ($pxsize/16)+rem;\n    }\n    h1 { @include remy(32);}\nFunction can be used across different elements in your project\n    h1 { font-size: remy(32);}\n    div { width: remy(800);}\n```\n\n12. Use proper nesting for the styles like HTML elements\nIts a good practice to keep it only a level or two to prevent overly specific selectors (which are less useful and harder to override).\nRefer various ways to use \u0026 selector https://css-tricks.com/the-sass-ampersand/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femcecs%2Fdell-design-react-common","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femcecs%2Fdell-design-react-common","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femcecs%2Fdell-design-react-common/lists"}