diff --git a/.eslintignore b/.eslintignore index 4a5bcae8627a..e163ab3d126e 100644 --- a/.eslintignore +++ b/.eslintignore @@ -9,7 +9,6 @@ umd node_modules packages/*/examples/* -packages/cra-template # Components packages/components/demo/*.css diff --git a/.stylelintignore b/.stylelintignore index d9f50f190cf6..78cae7c2c4df 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -4,7 +4,6 @@ **/vendor/** **/_inlined/** **/coverage/** -**/cra-template/** # Generated SCSS directories and files **/packages/colors/**/*.scss diff --git a/jest.config.js b/jest.config.js index cd0b71dd583d..eb989026c2f1 100644 --- a/jest.config.js +++ b/jest.config.js @@ -17,7 +17,6 @@ module.exports = { '!**/*.stories.js', '!**/*-test.e2e.js', ], - modulePathIgnorePatterns: ['/cra-template/'], moduleNameMapper: { // This is a temporary workaround from moving to Jest v28. In this update, // certain dependencies are only providing ESM through exports and so we use diff --git a/packages/cra-template/README.md b/packages/cra-template/README.md deleted file mode 100644 index 455193692d03..000000000000 --- a/packages/cra-template/README.md +++ /dev/null @@ -1,38 +0,0 @@ -# @carbon/cra-template - -This is the official Carbon Design System template for -[Create React App](https://github.com/facebook/create-react-app). - -## Usage - -To use this template, add `--template @carbon` when creating a new app. - -For example: - -``` -npx create-react-app my-app --template @carbon - -# or - -yarn create react-app my-app --template @carbon -``` - -For more information, please refer to: - -- [Getting Started](https://create-react-app.dev/docs/getting-started) – How to - create a new app. -- [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped - with Create React App. - -## Prerequisites - -A GitHub personal access token (PAT) is required for the example `/repopage` to -be able to fetch repository data. - -1. [Create a personal access token in GitHub](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) -2. Create an `.env` file in the root directory -3. Add the token to the `.env` file - -``` -REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN=xxx -``` diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json deleted file mode 100644 index 37f34083c1ff..000000000000 --- a/packages/cra-template/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "@carbon/cra-template", - "version": "0.2.0", - "description": "The Carbon Design System template for Create React App", - "license": "Apache-2.0", - "engines": { - "node": ">=16" - }, - "keywords": [ - "react", - "create-react-app", - "template", - "ibm", - "carbon", - "carbon-design-system", - "components", - "react" - ], - "main": "template.json", - "files": [ - "template", - "template.json" - ] -} diff --git a/packages/cra-template/template.json b/packages/cra-template/template.json deleted file mode 100644 index 95edb9a9cb25..000000000000 --- a/packages/cra-template/template.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "package": { - "dependencies": { - "@apollo/client": "^3.7.4", - "@carbon/react": "^1.20.0", - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^12.0.0", - "@testing-library/user-event": "^12.0.0", - "react": "17.0.1", - "react-dom": "17.0.1", - "react-router-dom": "^6.6.2", - "react-scripts": "5.0.0", - "sass": "^1.57.1", - "web-vitals": "^2.1.4" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" - }, - "eslintConfig": { - "extends": ["react-app", "react-app/jest"] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } - } -} diff --git a/packages/cra-template/template/gitignore b/packages/cra-template/template/gitignore deleted file mode 100644 index 4d29575de804..000000000000 --- a/packages/cra-template/template/gitignore +++ /dev/null @@ -1,23 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# production -/build - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* diff --git a/packages/cra-template/template/public/favicon.ico b/packages/cra-template/template/public/favicon.ico deleted file mode 100644 index a11777cc471a..000000000000 Binary files a/packages/cra-template/template/public/favicon.ico and /dev/null differ diff --git a/packages/cra-template/template/public/index.html b/packages/cra-template/template/public/index.html deleted file mode 100644 index aa069f27cbd9..000000000000 --- a/packages/cra-template/template/public/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - - - - - - - React App - - - -
- - - diff --git a/packages/cra-template/template/public/logo192.png b/packages/cra-template/template/public/logo192.png deleted file mode 100644 index fc44b0a3796c..000000000000 Binary files a/packages/cra-template/template/public/logo192.png and /dev/null differ diff --git a/packages/cra-template/template/public/logo512.png b/packages/cra-template/template/public/logo512.png deleted file mode 100644 index a4e47a6545bc..000000000000 Binary files a/packages/cra-template/template/public/logo512.png and /dev/null differ diff --git a/packages/cra-template/template/public/manifest.json b/packages/cra-template/template/public/manifest.json deleted file mode 100644 index 080d6c77ac21..000000000000 --- a/packages/cra-template/template/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/packages/cra-template/template/public/robots.txt b/packages/cra-template/template/public/robots.txt deleted file mode 100644 index e9e57dc4d41b..000000000000 --- a/packages/cra-template/template/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/packages/cra-template/template/public/tab-illo.png b/packages/cra-template/template/public/tab-illo.png deleted file mode 100644 index 736f59dd643b..000000000000 Binary files a/packages/cra-template/template/public/tab-illo.png and /dev/null differ diff --git a/packages/cra-template/template/src/App.js b/packages/cra-template/template/src/App.js deleted file mode 100644 index 81c725201d7d..000000000000 --- a/packages/cra-template/template/src/App.js +++ /dev/null @@ -1,30 +0,0 @@ -import React, { useState } from 'react'; -import './App.scss'; -import { Content, Theme } from '@carbon/react'; -import AppHeader from './components/Header'; -import HomePage from './content/HomePage/HomePage'; -import { Route, BrowserRouter as Router, Routes } from 'react-router-dom'; -import RepoPage from './content/RepoPage'; - -function App() { - const [appTheme, modifyAppTheme] = useState('white'); - const sendDataToParent = (value) => { - modifyAppTheme(value); - }; - - return ( - - - - - - } /> - } /> - - - - - ); -} - -export default App; diff --git a/packages/cra-template/template/src/App.scss b/packages/cra-template/template/src/App.scss deleted file mode 100644 index 40d036ecba32..000000000000 --- a/packages/cra-template/template/src/App.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use './components/Header/header'; -@use 'content/HomePage/homepage'; -@use 'content/RepoPage/repo-page'; diff --git a/packages/cra-template/template/src/App.test.js b/packages/cra-template/template/src/App.test.js deleted file mode 100644 index f46def7239da..000000000000 --- a/packages/cra-template/template/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - //const linkElement = screen.getByText(/learn react/i); - expect(true).toBe(true); -}); diff --git a/packages/cra-template/template/src/components/Header/Header.js b/packages/cra-template/template/src/components/Header/Header.js deleted file mode 100644 index d765e5a97dac..000000000000 --- a/packages/cra-template/template/src/components/Header/Header.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { - Header, - HeaderName, - HeaderNavigation, - HeaderMenuItem, - HeaderGlobalBar, - RadioButtonGroup, - RadioButton, -} from '@carbon/react'; - -const AppHeader = (props) => { - return ( -
-
- - [Platform] - -
- - - Home - RepoPage - - -
- { - // eslint-disable-next-line react/prop-types - props.sendDataToParent(value); - }}> - - - - - -
- -
- ); -}; - -export default AppHeader; diff --git a/packages/cra-template/template/src/components/Header/Header.test.js b/packages/cra-template/template/src/components/Header/Header.test.js deleted file mode 100644 index bf6e0ca8ab95..000000000000 --- a/packages/cra-template/template/src/components/Header/Header.test.js +++ /dev/null @@ -1,56 +0,0 @@ -import { render, fireEvent, screen, cleanup } from '@testing-library/react'; -import AppHeader from './Header'; -//import renderer from 'react-test-renderer'; -afterEach(cleanup); - -let sendDataToParent = jest.fn().mockReturnValue('white'); - -describe('Header', () => { - it('Check theme section - White', () => { - const sendDataToParent = jest.fn().mockReturnValue('White'); - const { getByTestId, queryByTestId, getByLabelText, queryByLabelText } = - render(); - const radioButton = getByLabelText('White'); - expect(radioButton).toBeInTheDocument(); - expect(radioButton.checked).toEqual(false); - fireEvent.click(radioButton); - expect(sendDataToParent()).toEqual('White'); - expect(radioButton.checked).toEqual(true); - }); - - it('Check theme section - g10', () => { - const sendDataToParent = jest.fn().mockReturnValue('g10'); - const { getByTestId, queryByTestId, getByLabelText, queryByLabelText } = - render(); - const radioButton = getByLabelText('g10'); - expect(radioButton).toBeInTheDocument(); - expect(radioButton.checked).toEqual(false); - fireEvent.click(radioButton); - expect(sendDataToParent()).toEqual('g10'); - expect(radioButton.checked).toEqual(true); - }); - - it('Check theme section - g80', () => { - const sendDataToParent = jest.fn().mockReturnValue('g80'); - const { getByTestId, queryByTestId, getByLabelText, queryByLabelText } = - render(); - const radioButton = getByLabelText('g80'); - expect(radioButton).toBeInTheDocument(); - expect(radioButton.checked).toEqual(false); - fireEvent.click(radioButton); - expect(sendDataToParent()).toEqual('g80'); - expect(radioButton.checked).toEqual(true); - }); - - it('Check theme section - g100', () => { - const sendDataToParent = jest.fn().mockReturnValue('g100'); - const { getByTestId, queryByTestId, getByLabelText, queryByLabelText } = - render(); - const radioButton = getByLabelText('g100'); - expect(radioButton).toBeInTheDocument(); - expect(radioButton.checked).toEqual(false); - fireEvent.click(radioButton); - expect(sendDataToParent()).toEqual('g100'); - expect(radioButton.checked).toEqual(true); - }); -}); diff --git a/packages/cra-template/template/src/components/Header/_header.scss b/packages/cra-template/template/src/components/Header/_header.scss deleted file mode 100644 index a49550a0f3fc..000000000000 --- a/packages/cra-template/template/src/components/Header/_header.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '@carbon/react/scss/colors'; - -// overriding header tooltip bg color -// because the navigation is dark themed while the content is white -// which means the dark theme tooltip bg blends into the white content bg -.cds--header__global .cds--popover-content { - background-color: colors.$gray-20; -} - -.cds--header__global .cds--popover-caret { - background-color: colors.$gray-20; -} diff --git a/packages/cra-template/template/src/components/Header/index.js b/packages/cra-template/template/src/components/Header/index.js deleted file mode 100644 index 75220e1fb856..000000000000 --- a/packages/cra-template/template/src/components/Header/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import AppHeader from './Header'; -export default AppHeader; diff --git a/packages/cra-template/template/src/components/Info/Info.js b/packages/cra-template/template/src/components/Info/Info.js deleted file mode 100644 index 28153fa1115f..000000000000 --- a/packages/cra-template/template/src/components/Info/Info.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import { Grid, Column } from '@carbon/react'; - -// Take in a phrase and separate the third word in an array -function createArrayFromPhrase(phrase) { - const splitPhrase = phrase.split(' '); - const thirdWord = splitPhrase.pop(); - return [splitPhrase.join(' '), thirdWord]; -} - -const InfoSection = (props) => ( - - -

{props.heading}

- - {props.children} - -); - -const InfoCard = (props) => { - const splitHeading = createArrayFromPhrase(props.heading); - - return ( - -

- {`${splitHeading[0]} `} - {splitHeading[1]} -

-

{props.body}

- {props.icon()} - - ); -}; - -export { InfoSection, InfoCard }; diff --git a/packages/cra-template/template/src/components/Info/_info.scss b/packages/cra-template/template/src/components/Info/_info.scss deleted file mode 100644 index 7e57b4f49e2c..000000000000 --- a/packages/cra-template/template/src/components/Info/_info.scss +++ /dev/null @@ -1,58 +0,0 @@ -@use '@carbon/react/scss/spacing' as *; -@use '@carbon/react/scss/type' as *; -@use '@carbon/react/scss/breakpoint' as *; -@use '@carbon/react/scss/theme' as *; - -.info-section__heading { - @include type-style('heading-01'); -} - -.info-card { - display: flex; - flex-direction: column; - padding-left: 1rem; - margin-top: $spacing-09; - - svg { - margin-top: $spacing-09; - } - - // top border in only small breakpoints to prevent overrides - @include breakpoint-down(md) { - &:not(:nth-child(2)) { - padding-top: $spacing-09; - border-top: 1px solid $border-subtle-01; - } - } - - // left border in just the 2nd column items - @include breakpoint(md) { - &:nth-child(odd) { - border-left: 1px solid $border-subtle-01; - } - } - - // left border in all items - @include breakpoint(lg) { - border-left: 1px solid $border-subtle-01; - margin-top: 0; - - svg { - margin-top: $spacing-12; - } - } -} - -.info-card__heading { - @include type-style('productive-heading-03'); -} - -.info-card__body { - flex-grow: 1; - margin-top: $spacing-06; - @include type-style('body-long-01'); - - @include breakpoint-between(321px, md) { - max-width: 75%; - } -} diff --git a/packages/cra-template/template/src/components/Info/index.js b/packages/cra-template/template/src/components/Info/index.js deleted file mode 100644 index 3d93d87eb6c2..000000000000 --- a/packages/cra-template/template/src/components/Info/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './Info'; diff --git a/packages/cra-template/template/src/content/HomePage/HomePage.js b/packages/cra-template/template/src/content/HomePage/HomePage.js deleted file mode 100644 index 4f5dff3d0a95..000000000000 --- a/packages/cra-template/template/src/content/HomePage/HomePage.js +++ /dev/null @@ -1,117 +0,0 @@ -import { - Breadcrumb, - BreadcrumbItem, - Button, - Tabs, - Tab, - TabList, - TabPanels, - TabPanel, - Grid, - Column, -} from '@carbon/react'; -import { InfoSection, InfoCard } from '../../components/Info'; -import { Globe, Application, PersonFavorite } from '@carbon/react/icons'; - -const HomePage = () => { - return ( - <> - - - - - Getting started - - -

- Design & build with Carbon -

- - - - - About - Design - Develop - - - - - -

- What is Carbon? -

-

- Carbon is IBM’s open-source design system for digital - products and experiences. With the IBM Design Language as - its foundation, the system consists of working code, - design tools and resources, human interface guidelines, - and a vibrant community of contributors. -

- - - - Carbon illustration - - - - - - - Rapidly build beautiful and accessible experiences. The - Carbon kit contains all resources you need to get started. - - - - - - - Carbon provides styles and components in Vanilla, React, - Angular, and Vue for anyone building on the web. - - - - - - - - - } - /> - } - /> - } - /> - - - - - ); -}; - -export default HomePage; diff --git a/packages/cra-template/template/src/content/HomePage/Homepage.test.js b/packages/cra-template/template/src/content/HomePage/Homepage.test.js deleted file mode 100644 index 246fb3d46dae..000000000000 --- a/packages/cra-template/template/src/content/HomePage/Homepage.test.js +++ /dev/null @@ -1,40 +0,0 @@ -import { render, fireEvent, screen, cleanup } from '@testing-library/react'; -import HomePage from './HomePage'; - -describe('Homepage -', () => { - it('Check Getting started hyperlink to be clickable', () => { - const { queryByLabelText, getByLabelText, getByTestId, getByRole } = render( - - ); - const linkItem = screen.getByText(/Getting Started/i); - expect(linkItem).toBeInTheDocument(); - fireEvent.click(linkItem); - expect(linkItem).toBeTruthy(); - }); - - it('Learn more button', () => { - const { getByRole } = render(); - const button = screen.getByText(/Learn more/i); - fireEvent.click(button); - expect(button).toBeTruthy(); - }); - - it('Check tab switching', async () => { - const { getByRole } = render(); - const aboutTab = screen.getByText(/About/i); - fireEvent.click(aboutTab); - await screen.getByText(/What is Carbon?/i); - //switch to another tab; - const designTab = screen.getByText('Design'); - fireEvent.click(designTab); - await screen.getByText( - /Rapidly build beautiful and accessible experiences/i - ); - //switch to another tab; - const developTab = screen.getByText(/Develop/i); - fireEvent.click(developTab); - await screen.getByText( - /Carbon provides styles and components in Vanilla, React, Angular, and Vue for anyone building on the web/i - ); - }); -}); diff --git a/packages/cra-template/template/src/content/HomePage/_homepage.scss b/packages/cra-template/template/src/content/HomePage/_homepage.scss deleted file mode 100644 index 9b4b77988197..000000000000 --- a/packages/cra-template/template/src/content/HomePage/_homepage.scss +++ /dev/null @@ -1,71 +0,0 @@ -@use '@carbon/react/scss/spacing' as *; -@use '@carbon/react/scss/type' as *; -@use '@carbon/react/scss/breakpoint' as *; -@use '@carbon/react/scss/theme' as *; -@use './mixins.scss' as *; -@use './overrides.scss'; - -.landing-page__illo { - max-width: 100%; -} - -.landing-page__banner { - padding-top: $spacing-05; - padding-bottom: $spacing-07 * 4; - padding-left: $spacing-06; - @include landing-page-background; -} - -.landing-page__heading { - @include type-style('productive-heading-05'); -} - -.landing-page__r2 { - margin-top: to-rem(-40px); -} - -.tabs-group-content { - padding: $spacing-10 $spacing-06; -} - -.landing-page__subheading { - @include type-style('productive-heading-03'); - - font-weight: 600; -} - -.landing-page__p { - @include type-style('productive-heading-03'); - - margin-top: $spacing-06; - margin-bottom: $spacing-08; - - @include breakpoint-between((320px + 1), md) { - max-width: 75%; - } -} - -.landing-page__r3 { - padding: $spacing-09 $spacing-06; - @include landing-page-background; -} - -.landing-page__label { - @include type-style('heading-01'); -} - -.tabs-group { - background-color: $layer-01; -} - -.landing-page__banner, -.landing-page__r2, -.landing-page__r3 { - margin-right: -20px; - margin-left: -20px; - - @include breakpoint-down(md) { - margin-right: 0; - margin-left: 0; - } -} diff --git a/packages/cra-template/template/src/content/HomePage/_mixins.scss b/packages/cra-template/template/src/content/HomePage/_mixins.scss deleted file mode 100644 index 9e127d22ea4c..000000000000 --- a/packages/cra-template/template/src/content/HomePage/_mixins.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use '@carbon/react/scss/spacing' as *; -@use '@carbon/react/scss/theme' as *; - -@mixin landing-page-background() { - position: relative; - background-color: $layer-01; -} diff --git a/packages/cra-template/template/src/content/HomePage/_overrides.scss b/packages/cra-template/template/src/content/HomePage/_overrides.scss deleted file mode 100644 index 86b730030d9d..000000000000 --- a/packages/cra-template/template/src/content/HomePage/_overrides.scss +++ /dev/null @@ -1,18 +0,0 @@ -.landing-page__r2 .cds--tabs--scrollable { - justify-content: flex-end; - transform: translateZ(0); -} - -.landing-page__r2 .cds--tab-content { - padding: 0; -} - -.cds--tab--list { - justify-content: flex-end; - padding-right: 1rem; -} - -.cds--subgrid--wide { - //fix needed to keep the subgrid from scrolling horizontally - margin-right: 1rem; -} diff --git a/packages/cra-template/template/src/content/RepoPage/RepoPage.js b/packages/cra-template/template/src/content/RepoPage/RepoPage.js deleted file mode 100644 index 1bdaf16e1d2e..000000000000 --- a/packages/cra-template/template/src/content/RepoPage/RepoPage.js +++ /dev/null @@ -1,155 +0,0 @@ -import React, { useState } from 'react'; -import RepoTable from './RepoTable'; -import { gql, useQuery } from '@apollo/client'; -import { - Link, - DataTableSkeleton, - Pagination, - Grid, - Column, -} from '@carbon/react'; - -export const REPO_QUERY = gql` - query REPO_QUERY { - # Let's use carbon as our organization - organization(login: "carbon-design-system") { - # We'll grab all the repositories in one go. To load more resources - # continuously, see the advanced topics. I see 502 error, when I list more than 10 repositories. - # If you encounter 502 error, please reduce the repositories count. - repositories(first: 10, orderBy: { field: UPDATED_AT, direction: DESC }) { - totalCount - nodes { - url - homepageUrl - issues(filterBy: { states: OPEN }) { - totalCount - } - stargazers { - totalCount - } - releases(first: 1) { - totalCount - nodes { - name - } - } - name - updatedAt - createdAt - description - id - } - } - } - } -`; - -const headers = [ - { - key: 'name', - header: 'Name', - }, - { - key: 'createdAt', - header: 'Created', - }, - { - key: 'updatedAt', - header: 'Updated', - }, - { - key: 'issueCount', - header: 'Open Issues', - }, - { - key: 'stars', - header: 'Stars', - }, - { - key: 'links', - header: 'Links', - }, -]; - -const LinkList = ({ url, homepageUrl }) => ( -
    -
  • - GitHub -
    • - {homepageUrl && ( -
  • -  |  - Homepage -
    • - )} -
-); - -const getRowItems = (rows) => - rows.map((row) => ({ - ...row, - key: row.id, - stars: row.stargazers.totalCount, - issueCount: row.issues.totalCount, - createdAt: new Date(row.createdAt).toLocaleDateString(), - updatedAt: new Date(row.updatedAt).toLocaleDateString(), - links: , - })); - -const RepoPage = () => { - const [firstRowIndex, setFirstRowIndex] = useState(0); - const [currentPageSize, setCurrentPageSize] = useState(10); - - const { loading, error, data } = useQuery(REPO_QUERY); - - if (loading) { - return ( - - - - - - ); - } - - if (error) { - return `Error! ${error.message}`; - } - - if (data) { - // If we're here, we've got our data! - const { repositories } = data.organization; - const rows = getRowItems(repositories?.nodes); - - return ( - - - - { - if (pageSize !== currentPageSize) { - setCurrentPageSize(pageSize); - } - setFirstRowIndex(pageSize * (page - 1)); - }} - /> - - - ); - } -}; - -export default RepoPage; diff --git a/packages/cra-template/template/src/content/RepoPage/RepoPage.test.js b/packages/cra-template/template/src/content/RepoPage/RepoPage.test.js deleted file mode 100644 index 61d797c65d48..000000000000 --- a/packages/cra-template/template/src/content/RepoPage/RepoPage.test.js +++ /dev/null @@ -1,113 +0,0 @@ -import { render, fireEvent, screen, cleanup } from '@testing-library/react'; -import { MockedProvider } from '@apollo/client/testing'; -import RepoPage from './RepoPage'; -import { gql, useQuery } from '@apollo/client'; -import { REPO_QUERY } from './RepoPage'; - -describe('RepoPage - ', () => { - it('should show error UI -', async () => { - const errorMocks = { - request: { - query: REPO_QUERY, - }, - error: { - message: new Error('An error occured'), - }, - }; - - render( - - - - ); - - expect( - await screen.findByText('Error! Error: An error occured') - ).toBeInTheDocument(); - //There should be no table displayed in case of error conditions - expect(document.getElementsByClassName('cds--data-table')).toHaveLength(0); - }); - - it('load carbon data table successfully -', async () => { - const pendingMock = { - request: { - query: REPO_QUERY, - }, - result: { - data: { - organization: { - totalCount: 2, - repositories: { - __typename: 'RepositoryConnection', - nodes: [ - { - createdAt: '2019-12-13T17:50:35Z', - description: - 'Carbon Design System SVG icons as Svelte components', - homepageUrl: 'https://carbon-icons-svelte.onrender.com', - id: 'MDEwOlJlcG9zaXRvcnkyMjc4OTM4MjM=', - issues: { - totalCount: 5, - name: 'carbon-icons-svelte', - __typename: 'IssueConnection', - }, - releases: { - totalCount: 24, - nodes: [ - { - name: '', - __typename: 'Release', - }, - ], - __typename: 'ReleaseConnection', - }, - stargazers: { - totalCount: 321, - }, - updatedAt: '2023-01-20T05:22:01Z', - url: 'https://github.com/carbon-design-system/carbon-icons-svelte', - name: 'carbon', - __typename: 'Repository', - }, - ], - - totalCount: 1, - }, - __typename: 'Organization', - }, - }, - }, - }; - const container = render( - - - - ); - - expect(await screen.findByText('Carbon Repositories')).toBeInTheDocument(); - - //test for the presence of column names in the table header - expect(await screen.findByText(/Name/i)).toBeInTheDocument(); - expect(await screen.findByText(/Created/i)).toBeInTheDocument(); - expect(await screen.findByText(/Updated/i)).toBeInTheDocument(); - expect(await screen.findByText(/Open Issues/i)).toBeInTheDocument(); - expect(await screen.findByText(/Stars/i)).toBeInTheDocument(); - expect(await screen.findByText(/Links/i)).toBeInTheDocument(); - - // There should be ONLY 1 table element - //const table = await screen.findByText('table'); - expect( - document.getElementsByClassName('cds--data-table-header') - ).toHaveLength(1); - - // The table should have ONLY 1 thead element - expect(document.getElementsByClassName('cds--data-table')).toHaveLength(1); - // The table should have a thead and tbody tag - expect(document.querySelector('thead')).toBeInTheDocument(); - expect(document.querySelector('tbody')).toBeInTheDocument(); - // Table should have 7 columns including one for row expand - expect(document.querySelector('tr').childNodes).toHaveLength(Number(7)); - - expect(await screen.findByText('carbon')).toBeInTheDocument(); - }); -}); diff --git a/packages/cra-template/template/src/content/RepoPage/RepoTable.js b/packages/cra-template/template/src/content/RepoPage/RepoTable.js deleted file mode 100644 index 0f3e18d5a93a..000000000000 --- a/packages/cra-template/template/src/content/RepoPage/RepoTable.js +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import { - DataTable, - TableContainer, - Table, - TableHead, - TableRow, - TableExpandHeader, - TableHeader, - TableBody, - TableExpandRow, - TableCell, - TableExpandedRow, -} from '@carbon/react'; - -const RepoTable = ({ rows, headers }) => { - const getRowDescription = (rowId) => { - const row = rows.find(({ id }) => id === rowId); - return row ? row.description : ''; - }; - - return ( - ( - - - - - - {headers.map((header) => ( - - {header.header} - - ))} - - - - {rows.map((row) => ( - - - {row.cells.map((cell) => ( - {cell.value} - ))} - - -

{getRowDescription(row.id)}

- - - ))} - -
- - )} - /> - ); -}; - -export default RepoTable; diff --git a/packages/cra-template/template/src/content/RepoPage/_repo-page.scss b/packages/cra-template/template/src/content/RepoPage/_repo-page.scss deleted file mode 100644 index 0f58c3f98c6e..000000000000 --- a/packages/cra-template/template/src/content/RepoPage/_repo-page.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '@carbon/react/scss/spacing' as *; - -.repo-page__r1 { - padding-top: $spacing-05; - padding-bottom: $spacing-05; -} diff --git a/packages/cra-template/template/src/content/RepoPage/index.js b/packages/cra-template/template/src/content/RepoPage/index.js deleted file mode 100644 index 9398ae93f4ce..000000000000 --- a/packages/cra-template/template/src/content/RepoPage/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import RepoPage from './RepoPage'; -export default RepoPage; diff --git a/packages/cra-template/template/src/index.js b/packages/cra-template/template/src/index.js deleted file mode 100644 index cec591be0a3f..000000000000 --- a/packages/cra-template/template/src/index.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.scss'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; -import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client'; -const cache = new InMemoryCache(); - -const client = new ApolloClient({ - cache: cache, - uri: 'https://api.github.com/graphql', - headers: { - authorization: `Bearer ${process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN}`, - }, -}); - -ReactDOM.render( - - - - - , - document.getElementById('root') -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/packages/cra-template/template/src/index.scss b/packages/cra-template/template/src/index.scss deleted file mode 100644 index 920f0e752785..000000000000 --- a/packages/cra-template/template/src/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use '@carbon/react'; -@use '@carbon/react/scss/breakpoint' as *; diff --git a/packages/cra-template/template/src/logo.svg b/packages/cra-template/template/src/logo.svg deleted file mode 100644 index 9dfc1c058ceb..000000000000 --- a/packages/cra-template/template/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/cra-template/template/src/reportWebVitals.js b/packages/cra-template/template/src/reportWebVitals.js deleted file mode 100644 index 532f29b0bb61..000000000000 --- a/packages/cra-template/template/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = (onPerfEntry) => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/packages/cra-template/template/src/setupTests.js b/packages/cra-template/template/src/setupTests.js deleted file mode 100644 index 8f2609b7b3e0..000000000000 --- a/packages/cra-template/template/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/yarn.lock b/yarn.lock index a8da6ae05be3..da7fa16e8027 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1898,12 +1898,6 @@ __metadata: languageName: unknown linkType: soft -"@carbon/cra-template@workspace:packages/cra-template": - version: 0.0.0-use.local - resolution: "@carbon/cra-template@workspace:packages/cra-template" - languageName: unknown - linkType: soft - "@carbon/elements@workspace:packages/elements": version: 0.0.0-use.local resolution: "@carbon/elements@workspace:packages/elements"