feat(www): refactor insights pages and add packages (#10282)

* feat(www): update pages and add packages pages

* chore(www): lint styles

* refactor(www): update insights page

* chore(www): add eslintrc for www

* chore(www): remove log from Flex component

* chore(www): update with stylelint fixes

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: joshblack

packages/carbon-react/scss/_layer.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/layer';

packages/carbon-react/tasks/build-styles.js

@@ -35,6 +35,10 @@ async function build() {
         type: 'file',
         filepath: '_grid.scss',
       },
+      {
+        type: 'file',
+        filepath: '_layer.scss',
+      },
       {
         type: 'file',
         filepath: '_motion.scss',

www/.eslintrc.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = {
+  extends: [require.resolve('../config/eslint-config-carbon/internal.js')],
+  rules: {
+    'jsx-a11y/anchor-is-valid': 'off',
+    'react/prop-types': 'off',
+    'react/react-in-jsx-scope': 'off',
+  },
+};

www/package.json

@@ -37,6 +37,9 @@
     "sass": "^1.43.4"
   },
   "devDependencies": {
-    "rimraf": "^3.0.2"
+    "fast-glob": "^3.2.7",
+    "lodash.merge": "^4.6.2",
+    "rimraf": "^3.0.2",
+    "semver": "^7.3.5"
   }
 }

www/src/components/Box/Box.module.scss

@@ -0,0 +1,141 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:string';
+@use '@carbon/react/scss/spacing';
+
+// Padding
+$index: 1;
+
+.p0 {
+  padding: 0;
+}
+
+.px-0 {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.pl-0 {
+  padding-left: 0;
+}
+
+.pr-0 {
+  padding-right: 0;
+}
+
+.pt-0 {
+  padding-top: 0;
+}
+
+.pb-0 {
+  padding-bottom: 0;
+}
+
+@each $key, $value in spacing.$spacing {
+  .p#{$index} {
+    padding: $value;
+  }
+
+  .px-#{$index} {
+    padding-right: $value;
+    padding-left: $value;
+  }
+
+  .py-#{$index} {
+    padding-top: $value;
+    padding-bottom: $value;
+  }
+
+  .pl-#{$index} {
+    padding-left: $value;
+  }
+
+  .pr-#{$index} {
+    padding-right: $value;
+  }
+
+  .pt-#{$index} {
+    padding-top: $value;
+  }
+
+  .pb-#{$index} {
+    padding-bottom: $value;
+  }
+  $index: $index + 1;
+}
+
+// Margin
+$index: 1;
+
+.m0 {
+  margin: 0;
+}
+
+.mx-0 {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.ml-0 {
+  margin-left: 0;
+}
+
+.mr-0 {
+  margin-right: 0;
+}
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+@each $key, $value in spacing.$spacing {
+  .m#{$index} {
+    margin: $value;
+  }
+
+  .mx-#{$index} {
+    margin-right: $value;
+    margin-left: $value;
+  }
+
+  .my-#{$index} {
+    margin-top: $value;
+    margin-bottom: $value;
+  }
+
+  .ml-#{$index} {
+    margin-left: $value;
+  }
+
+  .mr-#{$index} {
+    margin-right: $value;
+  }
+
+  .mt-#{$index} {
+    margin-top: $value;
+  }
+
+  .mb-#{$index} {
+    margin-bottom: $value;
+  }
+  $index: $index + 1;
+}

www/src/components/Box/index.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as classes from './Box.module.scss';
+
+import cx from 'clsx';
+import React from 'react';
+
+const keys = Object.keys(classes);
+
+function Box({ children, ...rest }) {
+  const child = React.Children.only(children);
+  const childProps = {};
+  const tokens = keys.filter((key) => {
+    if (rest[key]) {
+      return true;
+    }
+    childProps[key] = rest[key];
+    return false;
+  });
+  const className = cx(
+    tokens.map((token) => {
+      return classes[token];
+    })
+  );
+  return React.cloneElement(child, {
+    ...childProps,
+    className: cx(child.props.className, className),
+  });
+}
+
+export { Box };

www/src/components/Flex/Flex.module.scss

@@ -0,0 +1,111 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/react/scss/spacing';
+
+.flex {
+  display: flex;
+}
+
+/// https://tailwindcss.com/docs/flex-wrap
+.wrap {
+  flex-wrap: wrap;
+}
+
+.wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.nowrap {
+  flex-wrap: nowrap;
+}
+
+/// https://tailwindcss.com/docs/flex-direction
+.row {
+  flex-direction: row;
+}
+
+.row-reverse {
+  flex-direction: row-reverse;
+}
+
+.col {
+  flex-direction: column;
+}
+
+.col-reverse {
+  flex-direction: column-reverse;
+}
+
+/// https://tailwindcss.com/docs/gap
+.gap-0 {
+  gap: 0;
+}
+
+.gap-x-0 {
+  column-gap: 0;
+}
+
+.gap-y-0 {
+  row-gap: 0;
+}
+
+$index: 1;
+
+@each $key, $value in spacing.$spacing {
+  .gap-#{$index} {
+    gap: $value;
+  }
+
+  .gap-x-#{$index} {
+    column-gap: $value;
+  }
+
+  .gap-y-#{$index} {
+    row-gap: $value;
+  }
+
+  $index: $index + 1;
+}
+
+/// https://tailwindcss.com/docs/justify-content
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: flex-center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
+/// https://tailwindcss.com/docs/align-items
+.align-start {
+  align-items: flex-start;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.align-center {
+  align-items: center;
+}

www/src/components/Flex/index.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as classes from './Flex.module.scss';
+
+import cx from 'clsx';
+import React from 'react';
+import { Box } from '../Box';
+
+function Flex({ as: BaseComponent = 'div', children, ...rest }) {
+  const childProps = {};
+  const utilityClasses = Object.keys(rest).filter((key) => {
+    if (classes[key]) {
+      return true;
+    }
+    childProps[key] = rest[key];
+    return false;
+  });
+  const className = cx(
+    classes.flex,
+    utilityClasses.map((key) => {
+      return classes[key];
+    })
+  );
+
+  return (
+    <Box {...childProps}>
+      <BaseComponent className={className}>{children}</BaseComponent>
+    </Box>
+  );
+}
+
+export { Flex };