{"id":19281800,"url":"https://github.com/scality/core-ui","last_synced_at":"2026-03-03T11:11:09.682Z","repository":{"id":37450925,"uuid":"173717456","full_name":"scality/core-ui","owner":"scality","description":"Shared React components for UI","archived":false,"fork":false,"pushed_at":"2025-03-30T18:23:26.000Z","size":32713,"stargazers_count":23,"open_issues_count":51,"forks_count":8,"subscribers_count":45,"default_branch":"development/1.0","last_synced_at":"2025-04-02T11:05:36.597Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://scality.github.io/core-ui/","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/scality.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":"2019-03-04T09:47:40.000Z","updated_at":"2025-03-18T10:57:14.000Z","dependencies_parsed_at":"2024-01-22T12:32:16.083Z","dependency_job_id":"333d473a-3791-4ba8-ae92-5772957aa809","html_url":"https://github.com/scality/core-ui","commit_stats":{"total_commits":1507,"total_committers":44,"mean_commits":34.25,"dds":0.774386197743862,"last_synced_commit":"917aab360c32bd86ce49f30f14e62fa0a6215d0f"},"previous_names":[],"tags_count":215,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scality%2Fcore-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scality%2Fcore-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scality%2Fcore-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scality%2Fcore-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scality","download_url":"https://codeload.github.com/scality/core-ui/tar.gz/refs/heads/development/1.0","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248036064,"owners_count":21037092,"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-09T21:24:17.033Z","updated_at":"2025-12-24T11:01:35.144Z","avatar_url":"https://github.com/scality.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Welcome to Scality Core-UI\n\nCore-UI is a component library containing all components, layouts, icons and themes used for all Scality UI projects.\n\n## Getting started\n\n### Installation\n\n#### Manual installation\n\n- Add `@scality/core-ui` in the `package.json`'s dependencies of your project.\n\n```json\n    \"@scality/core-ui\": \"^0.165.0\",\n```\n\n- `@scality/core-ui` requires the peerDependencies below. Make sure that you have them in the `package.json`'s dependencies.\n\n```json\n    \"react\": \"^18.0.0\",\n    \"react-dom\": \"^18.0.0\",\n    // to provides a Provider to the components using react-query\n    \"react-query\": \"^3.34.0\",\n    // for the components using react router\n    \"react-router\": \"^7.0.1\",\n    \"react-router-dom\": \"^7.0.1\",\n    // for legacy chart components\n    \"canvas\": \"^2.10.1\",\n```\n\n- Install the dependencies :\n\n```sh\nnpm install\n```\n\n### Usage\n\n- Import a component from `@scality/core-ui/dist/next'` or `@scality/core-ui`\n\n- Use props to change its appearance and behaviour\n\n```jsx\nimport { Button } from '@scality/core-ui/dist/next';\nimport { Icon } from '@scality/core-ui';\n\n\u003cButton\n  variant=\"primary\"\n  onClick={handleClick}\n  label=\"Save\"\n  icon={\u003cIcon name=\"Save\" /\u003e}\n/\u003e;\n```\n\nTo learn more about the available components, you can read the [documentation](https://scality.github.io/core-ui/)\n\n### Theming\n\nComponents are themable by using the [styled-components theming concept](https://www.styled-components.com/docs/advanced). \\\nWrap your app in a `ThemeProvider` and provide it a theme :\n\n```jsx\nimport { ThemeProvider } from 'styled-components';\nimport { Layout } from '@scality/core-ui';\nimport { coreUIAvailableThemes as themes } from '@scality/core-ui/dist/style/theme';\n\n\u003cThemeProvider theme={themes.darkRebrand}\u003e\n  \u003cLayout sidebar={sidebar} navbar={navbar}\u003e\n    ...\n  \u003c/Layout\u003e\n\u003c/ThemeProvider\u003e;\n```\n\nThere is 2 default theme available in Core-UI : you can find them [here](https://github.com/scality/core-ui/pull/684#:~:text=https%3A//github.com/scality/core%2Dui/blob/development/1.0/src/lib/style/theme.ts)\n\nYou can also modify or create a new theme but make sure to extend this type:\n\n```tsx\nimport { CoreUITheme } from \"@scality/core-ui/dist/next\";\n```\n\n## Development\n\nThis project is built with [React](https://react.dev/) and [TypeScript](https://www.typescriptlang.org/), and styled with [styled-components](https://styled-components.com/).\n\nTo start contributing to core-ui, clone the repository:\n\n```sh\ngit clone git@github.com:scality/core-ui.git\n```\n\nthen install the dependancies:\n\n```sh\nnpm install\n```\n\n### Create a new branch\n\nGive your branch an explicit name with the reference to the Jira ticket or issue if it exists, and prefix it with:\n\n- feature/ for new component or major component update : `feature/TICKET-123-some-feature`\n- improvement/ for code improvement, component update : `improvement/TICKET-456-some-improvement`\n- bugfix/ for bug related issue : `bugfix/TICKET-789-some-bug`\n\nUse :\n\n```sh\ngit checkout -b \u003cbranch-name\u003e\n```\n\n### Creating a new component\n\nCreate a new folder in `src/lib/components` for the component file and test file.\nDepending on your component, it can be useful to create more files for the style, hooks, or utility functions that are necessary for your component. It will make the code more readable and easier to maintain.\n\nCreate a new folder in `stories` for the documentation files.\n\nYou should end with something like below :\n\n```text\n- src/\n  - lib/\n    - components/\n      - example/\n        - Example.component.tsx\n        - Example.test.tsx\n- stories/\n  - example/\n    - example.stories.tsx\n    - example.guideline.mdx\n```\n\nExpose your component in `src/lib/index.ts`.\nWhen creating a new version of an existing component, expose it in `src/lib/next.ts` instead to avoid conflict.\n\n### Use Storybook\n\nYou can use storybook to help with the development.\nStorybook helps to test and vizualize component in isolation.\nIf it doesn't exist, write a [story](https://storybook.js.org/docs/get-started/whats-a-story) for the component:\n\n```jsx\n// in stories/example/example.stories.tsx\nimport type { Meta, StoryObj } from '@storybook/react';\nimport { Example } from '../src/lib/components/example/Example.component.tsx';\n\nconst meta: Meta\u003ctypeof Example\u003e = {\n  component: Example,\n};\n\nexport default meta;\ntype Story = StoryObj\u003ctypeof Example\u003e;\n\nexport const Default: Story = {\n  render: () =\u003e \u003cExample /\u003e,\n};\n```\n\nThen launch storybook:\n\n```sh\nnpm run storybook\n```\n\nStorybook will be launched on `http://localhost:3000`.\n\n### Lint\n\nTo make sure your code is correctly lint, run:\n\n```sh\nnpm run lint\n```\n\nIt will run ESLint by using `eslint-config-react-app` which is a shareable ESLint configuration used by [Create React App](https://github.com/facebook/create-react-app).\n\n### Test\n\nBuild tests with [jest](https://jestjs.io/)\n\nMake sure to write tests that cover all cases, then you can run all tests with:\n\n```sh\nnpm run test\n```\n\nOr run a specific test with:\n\n```sh\nnpm run test Example.test.tsx\n```\n\n### Documentation\n\nCore-UI uses [storybook](https://storybook.js.org/) for its documentation. \\\nIllustrate use cases and state variations with [stories](https://storybook.js.org/docs/writing-stories).\n\nIf possible create or update the component guideline.\nThis guideline is an MDX file containing details about the component usage and is illustrated with the stories write in stories.tsx file.\n\n```txt\n// in example.guideline.mdx\nimport { Canvas, Meta } from '@storybook/blocks';\n\nimport * as ExampleStories from './Example.stories';\n\n\u003cMeta of={ExampleStories} /\u003e\n\n# Example Component\n\nAn Example component is used for example.\n\n\u003cCanvas of={ExampleStories.Default} /\u003e\n```\n\n### Contributing\n\n- Push your code on a branch following the [branch naming convention](#create-a-new-branch)\n- Create a pull request.\n- Obtain the approval of at least one reviewer.\n- Then comment with `/approve` to merge the PR.\n\n### Release\n\nAfter merging one or more PR in Core-UI, it is possible to plublish a new release.\nIn the Core-UI repo, follow these steps:\n\n1. Go on `Releases` then `Draft a new release`\n2. In the select menu `Choose a tag`: Create a new tag (the current tag increment by 1).\n3. You can now `Generate release notes`: it will add all the PR infos since the last release. \\\n   You can add details if necessary.\n4. `Publish release`\n5. It will create a PR that need to be approved.\n\n### Build\n\n```sh\nnpm run build\n```\n\nBuild the app for production to the `dist` folder.\nIn this folder, you will find all components, icons and themes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscality%2Fcore-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscality%2Fcore-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscality%2Fcore-ui/lists"}