@patternfly/design-tokens 1.0.0

package/config.default.json

@@ -0,0 +1,23 @@
+{
+  "source": ["tokens/default/*.json"],
+  "platforms": {
+    "css": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "build/css/",
+      "prefix": "pf-t",
+      "files": [{
+        "destination": "_tokens-default.scss",
+        "format": "css/variables",
+        "options": {
+          "outputReferences": true
+        },
+        "filter": {
+          "attributes": {
+            "category": "global"
+          }
+        }
+      }
+    ]
+    }
+  }
+}

package/config.palette-colors.json

@@ -0,0 +1,23 @@
+{
+  "source": ["tokens/default/*.json"],
+  "platforms": {
+    "css": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "build/css/",
+      "prefix": "pf-t",
+      "files": [{
+        "destination": "_tokens-palette.scss",
+        "format": "css/variables",
+        "options": {
+          "outputReferences": true
+        },
+        "filter": {
+          "attributes": {
+            "category": "color"
+          }
+        }
+      }
+    ]
+    }
+  }
+}

package/generate-fed-package-json.js

@@ -0,0 +1,65 @@
+const fse = require('fs-extra');
+const glob = require('glob');
+const path = require('path');
+
+const root = process.cwd();
+
+const sourceFiles = glob
+  .sync(`${root}/src/*/`)
+  .map((name) => name.replace(/\/$/, ''));
+  
+const indexTypings = glob.sync(`${root}/src/index.d.ts`);
+
+async function copyTypings(files, dest) {
+  const cmds = [];
+  files.forEach((file) => {
+    const fileName = file.split('/').pop();
+    cmds.push(fse.copyFile(file, `${dest}/${fileName}`));
+  });
+  return Promise.all(cmds);
+}
+
+async function createPackage(file) {
+  const fileName = file.split('/').pop();
+  const esmSource = glob.sync(`${root}/dist/esm/${fileName}/**/index.js`)[0];
+  /**
+   * Prevent creating package.json for directories with no JS files (like CSS directories)
+   */
+  if (!esmSource) {
+    return;
+  }
+
+  const destFile = `${path.resolve(`${root}/dist/esm`, fileName)}/package.json`;
+
+  const esmRelative = path.relative(file.replace('/dist/esm', ''), esmSource);
+  const content = {
+    main: 'index.js',
+    module: esmRelative,
+  };
+  const typings = glob.sync(`${root}/src/${fileName}/*.d.ts`);
+  const cmds = [];
+  content.typings = 'index.d.ts';
+  cmds.push(copyTypings(typings, `${root}/dist/${fileName}`));
+  cmds.push(fse.writeJSON(destFile, content));
+  return Promise.all(cmds);
+}
+
+async function generatePackages(files) {
+  const cmds = files.map((file) => createPackage(file));
+  return Promise.all(cmds);
+}
+
+async function run(files) {
+  try {
+    await generatePackages(files);
+    if (indexTypings.length === 1) {
+      copyTypings(indexTypings, root);
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+run(sourceFiles);

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@patternfly/design-tokens",
+  "version": "1.0.0",
+  "description": "Define the design tokens for patternfly design system and component library",
+  "main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
+  "scripts": {
+    "build": "yarn build:scss && yarn build:js-from-scss",
+    "build:fed:packages": "node generate-fed-package-json.js",
+    "build:scss": "node ./build.js",
+    "build:js-from-scss": "node ./build-js-for-docs.js",
+    "clean": "rimraf dist",
+    "docs:develop": "pf-docs-framework start",
+    "docs:build": "yarn build:scss && yarn build:js-from-scss && pf-docs-framework build all --output public",
+    "docs:serve": "pf-docs-framework serve public --port 5000",
+    "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000",
+    "test:a11y": "patternfly-a11y --config patternfly-a11y.config",
+    "serve:a11y": "yarn serve coverage"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/patternfly/design-tokens"
+  },
+  "author": "Red Hat",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/patternfly/design-tokens/issues"
+  },
+  "homepage": "https://github.com/patternfly/design-tokens#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@patternfly/react-core": "^6.0.0-alpha.5"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17 || ^18",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@patternfly/documentation-framework": "6.0.0-alpha.10",
+    "@patternfly/patternfly": "6.0.0-alpha.38",
+    "@patternfly/react-code-editor": "6.0.0-alpha.5",
+    "@patternfly/react-table": "6.0.0-alpha.5",
+    "rimraf": "^2.6.2",
+    "@patternfly/patternfly-a11y": "^4.3.1",
+    "react-monaco-editor": "^0.51.0",
+    "style-dictionary": "^3.8.0",
+    "glob": "^7.1.2",
+    "fs-extra": "^11.2.0"
+  }
+}

package/patternfly-a11y.config.js

@@ -0,0 +1,24 @@
+const { fullscreenRoutes } = require('@patternfly/documentation-framework/routes');
+
+/**
+ * Wait for a selector before running axe
+ *
+ * @param page page from puppeteer
+ */
+async function waitFor(page) {
+  await page.waitForSelector('#root > *');
+}
+
+module.exports = {
+  prefix: 'http://localhost:5000',
+  waitFor,
+  crawl: false,
+  urls: ['/','/tokens/all-patternfly-tokens'],
+  ignoreRules: [
+    'color-contrast',
+    'landmark-no-duplicate-main',
+    'landmark-main-is-top-level',
+    'scrollable-region-focusable'
+  ].join(','),
+  ignoreIncomplete: true
+};

package/patternfly-docs/content/all-patternfly-tokens.md

@@ -0,0 +1,9 @@
+---
+section: tokens
+id: All PatternFly tokens
+---
+
+
+import { TokensTable } from './tokensTable.js';
+
+<TokensTable/>

package/patternfly-docs/content/tokensTable.js

@@ -0,0 +1,143 @@
+import React from "react";
+import {
+  SearchInput,
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+} from "@patternfly/react-core";
+import {
+  Table,
+  Thead,
+  Th,
+  Tr,
+  Tbody,
+  Td,
+  ExpandableRowContent,
+  OuterScrollContainer,
+  InnerScrollContainer,
+} from "@patternfly/react-table";
+
+// eslint-disable-next-line camelcase
+import global_spacer_md from "@patternfly/react-tokens/dist/esm/global_spacer_md";
+import LevelUpAltIcon from "@patternfly/react-icons/dist/esm/icons/level-up-alt-icon";
+
+import * as scssAsJson from "../scssAsJson";
+
+export const TokensTable = () => {
+  const scssVariables = Object.keys(scssAsJson);
+  const [searchValue, setSearchValue] = React.useState('');
+  const [expandedTokens, setExpandedTokens] = React.useState([]);
+  const setExpanded = (tokenName, isExpanding = true) =>
+    setExpandedTokens((prevExpanded) => {
+      const otherExpandedTokens = prevExpanded.filter((n) => n !== tokenName);
+      return isExpanding ? [...otherExpandedTokens, tokenName] : otherExpandedTokens;
+    });
+  const isTokenExpanded = (tokenName) => expandedTokens.includes(tokenName);
+
+  const showTokenChain = (tokenName) => {
+    let tokenChain = [];
+    let tokenValue = scssAsJson[tokenName];
+
+    while (tokenValue !== undefined) {
+      tokenChain = [...tokenChain, tokenValue]
+      tokenValue = scssAsJson[tokenValue];
+    }
+
+    return (
+      <div>
+        <div
+          className="ws-css-property"
+          style={{
+            padding: `4px 0 4px calc(${global_spacer_md.value} * ${3})`
+          }}>
+          <LevelUpAltIcon style={{ transform: 'rotate(90deg)' }} />
+          <span style={{ paddingLeft: '16px' }}>
+            {tokenName}
+          </span>
+        </div>
+        {tokenChain.map((nextValue, index) => (
+          <div
+            key={index}
+            style={{
+              padding: `4px 0 4px calc(${global_spacer_md.value} * ${index + 4})`
+            }}
+          >
+            <LevelUpAltIcon style={{ transform: 'rotate(90deg)' }} />
+            <span style={{ paddingLeft: '16px' }}>
+              {nextValue}
+            </span>
+          </div>
+        ))}
+      </div>
+    )
+  };
+
+  return (
+    <React.Fragment>
+      <Toolbar id="filter-toolbar">
+        <ToolbarContent>
+          <ToolbarItem variant="search-filter">
+            <SearchInput
+              aria-label="Search all tokens"
+              placeholder="Search all tokens"
+              value={searchValue}
+              onChange={(_event, value) => setSearchValue(value)}
+              onClear={() => setSearchValue("")}
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <OuterScrollContainer>
+        <InnerScrollContainer>
+          <Table variant="compact">
+            <Thead>
+              <Th></Th>
+              <Th>Name</Th>
+              <Th>Value</Th>
+            </Thead>
+            {scssVariables.map((tokenName, rowIndex) => {
+              if (tokenName === 'default') {
+                return undefined
+              } else if (searchValue !== '' && !tokenName.includes(searchValue)) {
+                return undefined
+              } else {
+                const isResolved = scssAsJson[scssAsJson[tokenName]] === undefined;
+                return (
+                  <Tbody key={`row-${tokenName}`} isExpanded={isTokenExpanded(tokenName)}>
+                    <Tr>
+                      <Td
+                        expand={
+                          !isResolved
+                            ? {
+                              rowIndex,
+                              isExpanded: isTokenExpanded(tokenName),
+                              onToggle: () =>
+                                setExpanded(tokenName, !isTokenExpanded(tokenName)),
+                              expandId: `${tokenName}-expandable-toggle`,
+                            }
+                            : undefined
+                        }
+                      />
+                      <Td>{tokenName}</Td>
+                      <Td>{scssAsJson[scssAsJson[tokenName]] === undefined && scssAsJson[tokenName]}</Td>
+                    </Tr>
+                    {!isResolved && (
+                      <Tr isExpanded={isTokenExpanded(tokenName)}>
+                        <Td />
+                        <Td noPadding dataLabel="Details" colSpan={2}>
+                          <ExpandableRowContent>
+                            {showTokenChain(scssAsJson[tokenName])}
+                          </ExpandableRowContent>
+                        </Td>
+                      </Tr>
+                    )}
+                  </Tbody>
+                )
+              }
+            })}
+          </Table>
+        </InnerScrollContainer>
+      </OuterScrollContainer>
+    </React.Fragment>
+  )
+};

package/patternfly-docs/generated/index.js

@@ -0,0 +1,12 @@
+module.exports = {
+  '/tokens/all-patternfly-tokens/tokens': {
+    id: "All PatternFly tokens",
+    title: "All PatternFly tokens",
+    toc: [],
+    section: "tokens",
+    subsection: "",
+    source: "tokens",
+    tabName: null,
+    Component: () => import(/* webpackChunkName: "tokens/all-patternfly-tokens/tokens/index" */ './tokens/all-patternfly-tokens/tokens')
+  }
+};

package/patternfly-docs/generated/react.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { ExtendedButton } from "@patternfly/design-tokens";
+const pageData = {
+  "id": "design-tokens",
+  "section": "extensions",
+  "source": "react",
+  "slug": "/extensions/design-tokens/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/module/patternfly-docs/content/extensions/design-tokens/examples/basic.md",
+  "propComponents": [
+    {
+      "name": "ExtendedButton",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to render inside the extended button component"
+        }
+      ]
+    }
+  ],
+  "examples": [
+    "Example"
+  ],
+  "fullscreenExamples": [
+    "Fullscreen example"
+  ]
+};
+pageData.liveContext = {
+  ExtendedButton
+};
+pageData.relativeImports = {
+  
+};
+pageData.examples = {
+  'Example': props => 
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { ExtendedButton } from '@patternfly/design-tokens';\n\nexport const BasicExample: React.FunctionComponent = () => <ExtendedButton>My custom extension button</ExtendedButton>;\n","title":"Example","lang":"js"}}>
+      
+    </Example>,
+  'Fullscreen example': props => 
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { ExtendedButton } from '@patternfly/design-tokens';\n\nexport const BasicExample: React.FunctionComponent = () => <ExtendedButton>My custom extension button</ExtendedButton>;\n","title":"Fullscreen example","lang":"js","isFullscreen":true}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"basic-usage","size":"h2","className":"ws-title ws-h2"}}>
+      {`Basic usage`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Example"])}
+    {React.createElement(pageData.examples["Fullscreen example"])}
+  </React.Fragment>
+);
+Component.displayName = 'ExtensionsPatternflyExtensionSeedReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/tokens/all-patternfly-tokens/tokens.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { TokensTable } from '../../../content/./tokensTable.js';
+const pageData = {
+  "id": "All PatternFly tokens",
+  "section": "tokens",
+  "subsection": "",
+  "deprecated": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "tokens",
+  "tabName": null,
+  "slug": "/tokens/all-patternfly-tokens/tokens",
+  "sourceLink": "https://github.com/patternfly/patternfly-org/blob/main/packages/module/patternfly-docs/content/all-patternfly-tokens.md",
+  "relPath": "packages/module/patternfly-docs/content/all-patternfly-tokens.md"
+};
+pageData.liveContext = {
+  TokensTable
+};
+pageData.relativeImports = "import { TokensTable } from 'content/./tokensTable.js';"
+pageData.examples = {
+  
+};
+
+const Component = () => (
+  <React.Fragment>
+    <TokensTable/>
+  </React.Fragment>
+);
+Component.displayName = 'TokensAllPatternflyTokensTokensDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/pages/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Title, PageSection } from '@patternfly/react-core';
+
+const centerStyle = {
+  flexGrow: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+};
+
+const IndexPage = () => {
+  return (
+    <PageSection variant="light" style={centerStyle}>
+      <div style={{ flex: 'none', textAlign: 'center' }}>
+        <Title size="4xl" headingLevel="h1">
+          My extension docs
+        </Title>
+        <Title size="2xl" headingLevel="h2">
+          {'Hi people!'}
+        </Title>
+        <p>Welcome to my extension docs.</p>
+      </div>
+    </PageSection>
+  );
+};
+
+export default IndexPage;

package/patternfly-docs/patternfly-docs.config.js

@@ -0,0 +1,6 @@
+// This module is shared between NodeJS and babelled ES5
+module.exports = {
+  sideNavItems: [{ section: 'tokens' }],
+  topNavItems: [],
+  port: 8006
+};

package/patternfly-docs/patternfly-docs.css.js

@@ -0,0 +1,8 @@
+// Patternfly
+import '@patternfly/patternfly/patternfly.css';
+// Patternfly utilities
+import '@patternfly/patternfly/patternfly-addons.css';
+// Global theme CSS
+import '@patternfly/documentation-framework/global.css';
+
+// Add your extension CSS below

package/patternfly-docs/patternfly-docs.routes.js

@@ -0,0 +1,12 @@
+// This module is shared between NodeJS and babelled ES5
+const isClient = Boolean(process.env.NODE_ENV);
+
+module.exports = {
+  '/': {
+    SyncComponent: isClient && require('./pages/index').default
+  },
+  '/404': {
+    SyncComponent: isClient && require('@patternfly/documentation-framework/pages/404/index').default,
+    title: '404 Error'
+  }
+};

package/patternfly-docs/patternfly-docs.source.js

@@ -0,0 +1,20 @@
+const path = require('path');
+
+module.exports = (sourceMD) => {
+
+  // Parse md files
+  const contentBase = path.join(__dirname, './content');
+  sourceMD(path.join(contentBase, '/*.md'), 'tokens');
+
+  /**
+    If you want to parse content from node_modules instead of providing a relative/absolute path,
+    you can do something similar to this:
+    const extensionPath = require
+      .resolve('@patternfly/react-log-viewer/package.json')
+      .replace('package.json', 'src');
+    sourceProps(path.join(extensionPath, '/**\/*.tsx'), propsIgnore);
+    sourceMD(path.join(extensionPath, '../patternfly-docs/**\/examples/*.md'), 'react');
+    sourceMD(path.join(extensionPath, '../patternfly-docs/**\/demos/*.md'), 'react-demos');
+    sourceMD(path.join(extensionPath, '../patternfly-docs/**\/design-guidelines/*.md'), 'design-guidelines');
+  */
+};