diff --git a/README.md b/README.md index ab3dc6c4..71523820 100644 --- a/README.md +++ b/README.md @@ -16,13 +16,8 @@ The [Carbon Devtools](http://ibm.biz/carbon-devtools) provides designers, develo | :-------------------------------------------- | :------------------------------------------------------------------------------------------------------- | | [`web-extension`](./packages/web-extension) | The [Carbon Devtools](http://ibm.biz/carbon-devtools) cross-browser web extension build package. | | [`utilities`](./packages/utilities) | Common utilities and functions used across throughout [Carbon Devtools](http://ibm.biz/carbon-devtools). | -| [`demo-site`](./packages/demo-site) | A static webpage with basic UI elements that can be used for testing and demoing. | | [`component-list`](./packages/component-list) | Generates a list of components and their selectors across Carbon partner libraries. | - - ## 🙌 Contributing We're always looking for contributors to help us fix bugs, build new features, diff --git a/packages/demo-site/.env.example b/packages/demo-site/.env.example deleted file mode 100644 index 5c336758..00000000 --- a/packages/demo-site/.env.example +++ /dev/null @@ -1,3 +0,0 @@ -BASE_PATH= -ALTLANG_ROOT_PATH= -ENABLE_RTL= diff --git a/packages/demo-site/.eslintignore b/packages/demo-site/.eslintignore deleted file mode 100644 index de7568dd..00000000 --- a/packages/demo-site/.eslintignore +++ /dev/null @@ -1,5 +0,0 @@ -node_modules -*.log -dist -.next -out \ No newline at end of file diff --git a/packages/demo-site/.gitignore b/packages/demo-site/.gitignore deleted file mode 100644 index a7c7fe63..00000000 --- a/packages/demo-site/.gitignore +++ /dev/null @@ -1,6 +0,0 @@ -.idea -node_modules -.next -settings.json -out -.env diff --git a/packages/demo-site/.prettierignore b/packages/demo-site/.prettierignore deleted file mode 100644 index de7568dd..00000000 --- a/packages/demo-site/.prettierignore +++ /dev/null @@ -1,5 +0,0 @@ -node_modules -*.log -dist -.next -out \ No newline at end of file diff --git a/packages/demo-site/README.md b/packages/demo-site/README.md deleted file mode 100644 index 372e1978..00000000 --- a/packages/demo-site/README.md +++ /dev/null @@ -1,61 +0,0 @@ -# @carbon/devtools-demo-site - -A static webpage with basic UI elements that can be used for testing and demoing -Carbon devtools. - -https://carbon-design-system.github.io/devtools/ - -## [Random page generator](https://carbon-design-system.github.io/devtools/) - -[Visit the demo site](https://carbon-design-system.github.io/devtools/) to -generate a random page built with Carbon for IBM.com components. Each refresh -will generate a new page with dummy content. - -### [Scroll animation configurations](https://carbon-design-system.github.io/devtools?card=true&cardDelay=0&cardRepeat=false©=true©Repeat=false&cta=true&ctaDelay=0&ctaRepeat=false&full-bleed=true&heading=true&headingRepeat=false&mediaWithCaption=true&mediaWithCaptionRepeat=false&pictogram=true&pictogramRepeat=false&singleType=slide-up) - -There is also an additional option to add random or fixed scroll animations -across the random page generator. These animations can be configured below, or -you can -[click here](https://carbon-design-system.github.io/devtools?card=true&cardDelay=0&cardRepeat=false©=true©Repeat=false&cta=true&ctaDelay=0&ctaRepeat=false&full-bleed=true&heading=true&headingRepeat=false&mediaWithCaption=true&mediaWithCaptionRepeat=false&pictogram=true&pictogramRepeat=false&singleType=slide-up) -to it in action. - -| name | type | description | -| :------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `fixed` | `boolean` | `true` will fix whatever state you're in, and copy that over to the next page you click on. `false` will randomly generate new animations on each page you visit. | -| `contentType` | `string` | `grouped` will randomly add scroll animation to larger chunks of content. `individual` will do individual components. `all` will mix and match the above. | -| `singleType` | `string` | `singleType` adds a single type of scroll animation direction. If not set it will randomize the direction across different components. | - -#### By selector - -In addition to the above configurations, you can call out individual -selector/elements/components on the page and add an animation type, delay, or -decide to repeat or not. Â - -``` -selector=true (whether it animates or not) -selectorType=slide-down (what animation type to use) -selectorDelay=.1 (how long it takes to animate) -selectorRepeat=false (whether it repeats the animation every time it comes into view) -``` - -###### Here is a list of available selectors - -- heading -- copy -- media -- caption -- cta -- card -- contentBlock -- contentGroup -- contentItem -- cardGroup -- mediaWithCaption -- pictogramItem -- pictogram - -###### Example in use - -``` -https://carbon-design-system.github.io/devtools?card=true&cardDelay=0&cardRepeat=false©=true©Repeat=false&cta=true&ctaDelay=0&ctaRepeat=false&full-bleed=true&heading=true&headingRepeat=false&mediaWithCaption=true&mediaWithCaptionRepeat=false&pictogram=true&pictogramRepeat=false&singleType=slide-up -``` diff --git a/packages/demo-site/next.config.js b/packages/demo-site/next.config.js deleted file mode 100644 index 3b9dcee5..00000000 --- a/packages/demo-site/next.config.js +++ /dev/null @@ -1,83 +0,0 @@ -require('dotenv').config(); -const path = require('path'); -const withSass = require('@zeit/next-sass'); -const rtlcss = require('rtlcss'); - -const assetPrefix = process.env.ASSET_PREFIX || '/devtools/'; - -module.exports = withSass({ - assetPrefix: assetPrefix, - basePath: process.env.BASE_PATH || '', - env: { - ALTLANG_ROOT_PATH: process.env.ALTLANG_ROOT_PATH || '/', - KALTURA_PARTNER_ID: process.env.KALTURA_PARTNER_ID || '1773841', - KALTURA_UICONF_ID: process.env.KALTURA_UICONF_ID || '27941801', - DDS_CALLOUT_DATA: process.env.DDS_CALLOUT_DATA || 'false', - ENABLE_RTL: process.env.ENABLE_RTL || 'false', - }, - publicRuntimeConfig: { - _assetPrefix: assetPrefix, - }, - sassLoaderOptions: { - sassOptions: { - includePaths: [ - path.resolve(__dirname, 'node_modules'), - path.resolve(__dirname, '../../node_modules'), - ], - }, - }, - webpack: (config) => { - config.module.rules.push({ - test: /\.scss$/, - sideEffects: true, - use: [ - { - loader: 'postcss-loader', - options: { - plugins: () => { - const autoPrefixer = require('autoprefixer')({ - overrideBrowserslist: ['last 1 version', 'ie >= 11'], - }); - return process.env.ENABLE_RTL === 'true' - ? [autoPrefixer, rtlcss] - : [autoPrefixer]; - }, - }, - }, - { - loader: - process.env.NODE_ENV === 'production' - ? 'sass-loader' - : 'fast-sass-loader', - options: Object.assign( - process.env.NODE_ENV === 'production' - ? { - sassOptions: { - includePaths: [ - path.resolve(__dirname, 'node_modules'), - path.resolve(__dirname, '../../node_modules'), - ], - }, - } - : { - includePaths: [ - path.resolve(__dirname, 'node_modules'), - path.resolve(__dirname, '../../node_modules'), - ], - }, - { - additionalData: ` - $feature-flags: ( - enable-css-custom-properties: true - ); - `, - sourceMap: process.env.NODE_ENV !== 'production', - } - ), - }, - ], - }); - - return config; - }, -}); diff --git a/packages/demo-site/package.json b/packages/demo-site/package.json deleted file mode 100644 index 7cdb507a..00000000 --- a/packages/demo-site/package.json +++ /dev/null @@ -1,87 +0,0 @@ -{ - "name": "@carbon/devtools-demo-site", - "version": "2.7.7", - "private": true, - "repository": { - "type": "git", - "url": "https://github.com/carbon-design-system/devtools" - }, - "bugs": { - "url": "https://github.com/carbon-design-system/devtools/issues/new", - "email": "james.dow@us.ibm.com" - }, - "homepage": "https://github.com/carbon-design-system/devtools#readme", - "keywords": [ - "IBM", - "Carbon", - "Devtools", - "Tools", - "Development", - "Demo", - "Test" - ], - "scripts": { - "watch": "next dev", - "build": "next build && next export", - "start": "node server.js", - "clean": "rimraf dist && rimraf node_modules", - "format": "prettier --write '*.{js,json,md,scss,ts}' '**/*.{js,json,md,scss,ts}' '!**/{dist,build,es,lib,storybook,ts,umd}/**' '!**/*.{jpg,jpeg,gif,png}'", - "format:diff": "prettier --list-different '*.{js,json,md,scss,ts}' '**/*.{js,json,md,scss,ts}' '!**/{dist,build,es,lib,storybook,ts,umd}/**' '!**/*.{jpg,jpeg,gif,png}'", - "lint": "yarn lint:js && yarn lint:css", - "lint:js": "eslint . --ext .js", - "lint:css": "stylelint 'styles/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables", - "test": "yarn format && yarn lint" - }, - "dependencies": { - "@carbon/ibmdotcom-react": "^1.40.0", - "@carbon/ibmdotcom-styles": "^1.40.0", - "@carbon/ibmdotcom-web-components": "^1.25.0", - "@carbon/icons-react": "^10.37.0", - "@carbon/pictograms-react": "^11.34.0", - "eslint-config-carbon": "^2.1.0", - "stylelint-config-carbon": "^1.2.0" - }, - "devDependencies": { - "@actions/core": "^1.2.6", - "@zeit/next-sass": "^1.0.1", - "autoprefixer": "9.8.6", - "dotenv": "^8.2.0", - "eslint": "^7.12.0", - "express": "^4.17.1", - "fast-sass-loader": "1.5.0", - "lit-element": "^2.5.1", - "lorem-ipsum": "^2.0.8", - "next": "10.2.0", - "next-compose-plugins": "^2.2.1", - "prettier": "^2.7.1", - "prop-types": "^15.8.1", - "react": "^16.13.1", - "react-dom": "^16.13.1", - "rtlcss": "^2.6.0", - "sass": "1.32.8", - "stylelint": "^14.15.0", - "webpack": "^4.43.0" - }, - "resolutions": { - "dot-prop": ">=5.1.1", - "node-fetch": ">=2.6.1", - "object-path": ">=0.11.5", - "serialize-javascript": ">= 3.1.0" - }, - "eslintConfig": { - "extends": [ - "carbon" - ], - "globals": { - "chrome": "readonly" - } - }, - "stylelint": { - "extends": [ - "stylelint-config-carbon" - ], - "rules": { - "max-nesting-depth": 3 - } - } -} diff --git a/packages/demo-site/pages/_app.js b/packages/demo-site/pages/_app.js deleted file mode 100644 index e6755a34..00000000 --- a/packages/demo-site/pages/_app.js +++ /dev/null @@ -1,163 +0,0 @@ -import '../styles/global.scss'; - -if (!global.location) { - global.location = { href: '' }; -} - -import altlangs from './data/altlang.json'; -import App from 'next/app'; -import DDO from './data/DDO.json'; -import { DotcomShell } from '@carbon/ibmdotcom-react'; -import Head from 'next/head'; -import packageJson from '../package.json'; -import React from 'react'; -import getConfig from 'next/config'; - -const { publicRuntimeConfig } = getConfig(); - -/** - * Sets the root path of the alternative urls - * Learn more about configuring alternative languages at: - * https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/master/docs/building-for-ibm-dotcom.md - * - * @type {string|string} - * @private - */ -const _rootPath = process.env.ALTLANG_ROOT_PATH || '/'; - -/** - * Class CarbonForIBMDotcom - */ -export default class CarbonForIBMDotcom extends App { - constructor(props) { - super(props); - this.state = { theme: '' }; - this.updateFavicon = this.updateFavicon.bind(this); - } - - componentDidMount() { - if (window.matchMedia) { - const localUpdateFavicon = this.updateFavicon; - - localUpdateFavicon(); - window.addEventListener('load', localUpdateFavicon); - - window - .matchMedia('(prefers-color-scheme: dark)') - .addEventListener('change', localUpdateFavicon); - } - } - - updateFavicon() { - if (window.matchMedia('(prefers-color-scheme: dark)').matches) { - this.setState({ - theme: 'dark', - }); - } else { - this.setState({ - theme: 'light', - }); - } - } - - /** - * Renders the DotcomShell - * - * @returns {*} Page wrapper JSX - */ - render() { - const { Component, pageProps } = this.props; - const reactVersion = packageJson.dependencies['@carbon/ibmdotcom-react']; - const stylesVersion = packageJson.dependencies['@carbon/ibmdotcom-styles']; - const digitalData = `digitalData=${JSON.stringify(DDO)};`; - - const items = altlangs.map((alt, i) => ( - - )); - - return ( - <> - - Carbon devtools playground - - - - - - - - - - - -