diff --git a/.github/workflows/generate-bs-images.yml b/.github/workflows/generate-bs-images.yml index 708ea1777..fde54e395 100644 --- a/.github/workflows/generate-bs-images.yml +++ b/.github/workflows/generate-bs-images.yml @@ -40,7 +40,7 @@ jobs: ## Now generate the reference images - name: Run image generation working-directory: ./testing/ncids-css-testing - run: pnpm backstop reference --config='backstop.config.js' --docker + run: pnpm backstop reference --config='backstop.config.cjs' --docker env: CI: true BACKSTOP_BASE_URL: http://localhost:8080/ diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml index 844e1e92d..0c9785585 100644 --- a/.github/workflows/workflow.yml +++ b/.github/workflows/workflow.yml @@ -163,7 +163,7 @@ jobs: ## Now test the css - name: Run css tests working-directory: ./testing/ncids-css-testing - run: pnpm backstop test --config='backstop.config.js' --docker + run: pnpm backstop test --config='backstop.config.cjs' --docker env: CI: true BACKSTOP_BASE_URL: ${{ format('http://localhost:8080/{0}/storybook/', steps.set_vars.outputs.build_name) }} diff --git a/package.json b/package.json index 52f50e6a5..351e18ff3 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,6 @@ "js-docs:copy": "mkdirp dist/documentation-site/ncids-js && ncp packages/ncids-js/doc dist/documentation-site/ncids-js", "storybook:build": "lerna run build --scope=ncids-css-testing --include-dependencies", "storybook:copy": "mkdirp dist/documentation-site/storybook && ncp testing/ncids-css-testing/storybook-static dist/documentation-site/storybook", - "prepare": "lerna run prepare", "test": "lerna run test", "test:css": "lerna run test:css", "test:a11y": "lerna run test:a11y", @@ -54,10 +53,7 @@ "path": "~0.12.7", "prettier": "2.2.1", "typescript": "5.2.2", - "gatsby>webpack": "~5.89.0", - "@storybook/manager-webpack4>webpack": "~4.47.0", - "@storybook/core-client>webpack": "~4.47.0", - "@storybook/manager-webpack4>css-loader": "3.6.0" + "gatsby>webpack": "~5.89.0" }, "patchedDependencies": { "@uswds/uswds@3.7.1": "patches/@uswds__uswds@3.7.1.patch" diff --git a/packages/ncids-twig/components/usa-collection/usa-collection.twig b/packages/ncids-twig/components/usa-collection/usa-collection.twig index c53beae89..d221f57ff 100644 --- a/packages/ncids-twig/components/usa-collection/usa-collection.twig +++ b/packages/ncids-twig/components/usa-collection/usa-collection.twig @@ -34,7 +34,7 @@ - `, -} -)} />; diff --git a/testing/ncids-css-testing/stories/uswds-native/usa-summary-box/src/usa-summary-box.test-cases.stories.js b/testing/ncids-css-testing/stories/uswds-native/usa-summary-box/src/usa-summary-box.test-cases.stories.js deleted file mode 100644 index 18c991a9f..000000000 --- a/testing/ncids-css-testing/stories/uswds-native/usa-summary-box/src/usa-summary-box.test-cases.stories.js +++ /dev/null @@ -1,11 +0,0 @@ -import Component from './summary-box-with-content.twig'; -import { TestCase } from '../../../../components/test-case'; -import css from './index.scss'; - -export default { - title: 'USWDS/Components/Summary Box/Test Cases', -}; - -const Template = (args) => Component(args); - -export const SummaryBoxRow = () => ; diff --git a/testing/ncids-css-testing/stories/uswds-native/usa-table/src/usa-table--scrollable/usa-table--scrollable.stories.js b/testing/ncids-css-testing/stories/uswds-native/usa-table/src/usa-table--scrollable/usa-table--scrollable.stories.js deleted file mode 100644 index fdc356d75..000000000 --- a/testing/ncids-css-testing/stories/uswds-native/usa-table/src/usa-table--scrollable/usa-table--scrollable.stories.js +++ /dev/null @@ -1,23 +0,0 @@ -import Component from './usa-table--scrollable.twig'; -import ScrollableDefaultContent from './usa-table--scrollable.json'; -import ScrollableStripedContent from './usa-table--scrollable~striped.json'; -import ScrollableCompactContent from './usa-table--scrollable~compact.json'; -import ScrollableCompactStripedContent from './usa-table--scrollable~compact-striped.json'; -import css from '../index.scss'; - -import { table } from '@uswds/uswds/src/js/components'; -import { TestCase } from '../../../../../components/test-case'; - -export default { - title: 'USWDS/Components/Table/Scrollable', - args: { - uswdsBehaviorJs: table, - }, -}; - -const Template = (args) => Component(args); - -export const Default = () => ; -export const Striped = () => ; -export const Compact = () => ; -export const CompactStriped = () => ; diff --git a/testing/ncids-css-testing/stories/uswds-native/usa-table/src/usa-table--stacked/usa-table--stacked.stories.js b/testing/ncids-css-testing/stories/uswds-native/usa-table/src/usa-table--stacked/usa-table--stacked.stories.js deleted file mode 100644 index 29ea5f8dc..000000000 --- a/testing/ncids-css-testing/stories/uswds-native/usa-table/src/usa-table--stacked/usa-table--stacked.stories.js +++ /dev/null @@ -1,24 +0,0 @@ -import Component from './usa-table--stacked.twig'; -import StackedDefaultContent from './usa-table--stacked.json'; -import StackedBorderlessContent from './usa-table--stacked~borderless.json'; -import StackedHeaderContent from './usa-table--stacked~header.json'; -import StackedHeaderBorderlessContent from './usa-table--stacked~header-borderless.json'; -import css from '../index.scss'; - -import { table } from '@uswds/uswds/src/js/components'; -import { TestCase } from '../../../../../components/test-case'; - -export default { - title: 'USWDS/Components/Table/Stacked', - args: { - uswdsBehaviorJs: table, - }, -}; - -const Template = (args) => Component(args); - -export const Default = () => ; -export const Borderless = () => ; -export const WithHeader = () => ; -export const withHeaderBorderless = () => - ; diff --git a/testing/ncids-css-testing/stories/uswds-native/usa-table/src/usa-table.stories.js b/testing/ncids-css-testing/stories/uswds-native/usa-table/src/usa-table.stories.js deleted file mode 100644 index e59fab907..000000000 --- a/testing/ncids-css-testing/stories/uswds-native/usa-table/src/usa-table.stories.js +++ /dev/null @@ -1,24 +0,0 @@ -import Component from './usa-table.twig'; -import SortableComponent from './usa-table--sortable/usa-table--sortable.twig'; -import DefaultContent from './usa-table.json'; -import BorderlessContent from './usa-table~borderless.json'; -import StripedContent from './usa-table~striped.json'; -import css from './index.scss'; - -import { table } from '@uswds/uswds/src/js/components'; -import { TestCase } from '../../../../components/test-case'; - -export default { - title: 'USWDS/Components/Table', - args: { - uswdsBehaviorJs: table, - }, -}; - -const Template = (args) => Component(args); -const SortableTemplate = (args) => SortableComponent(args); - -export const Default = () => ; -export const Borderless = () => ; -export const Striped = () => ; -export const Sortable = () => ; diff --git a/testing/ncids-css-testing/stories/uswds-native/usa-tag/src/usa-tag.stories.js b/testing/ncids-css-testing/stories/uswds-native/usa-tag/src/usa-tag.stories.js deleted file mode 100644 index a4019b651..000000000 --- a/testing/ncids-css-testing/stories/uswds-native/usa-tag/src/usa-tag.stories.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { TestCase } from '../../../../components/test-case'; -import Component from './usa-tag.twig'; -import css from './index.scss'; -import { DefaultContent, BigContent } from './content'; - -export default { - title: 'USWDS/Components/Tags', -}; - -const Template = (args) => Component(args); - -export const Default = () => ; - -export const Big = () => ; diff --git a/testing/ncids-css-testing/stories/uswds-native/usa-time-picker/src/usa-time-picker.stories.js b/testing/ncids-css-testing/stories/uswds-native/usa-time-picker/src/usa-time-picker.stories.js deleted file mode 100644 index b30fbc8b2..000000000 --- a/testing/ncids-css-testing/stories/uswds-native/usa-time-picker/src/usa-time-picker.stories.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import Component from "./usa-time-picker.twig"; -import css from './index.scss'; - -import { TestCase } from '../../../../components/test-case'; -import { comboBox, timePicker } from '@uswds/uswds/src/js/components'; - -export default { - title: 'USWDS/Components/Form Inputs/Time Picker', - args: { - uswdsBehaviorJs: [timePicker, comboBox] - }, -}; - -const Template = (args) => Component(args); - -export const TimePicker = () => ; - -export const TimePickerDefaultValue = () => ; - diff --git a/testing/ncids-css-testing/stories/uswds-native/usa-tooltip/src/usa-tooltip.stories.js b/testing/ncids-css-testing/stories/uswds-native/usa-tooltip/src/usa-tooltip.stories.js deleted file mode 100644 index b9580ccf7..000000000 --- a/testing/ncids-css-testing/stories/uswds-native/usa-tooltip/src/usa-tooltip.stories.js +++ /dev/null @@ -1,21 +0,0 @@ - -import React from 'react'; -import { TestCase } from '../../../../components/test-case'; -import Component from './usa-tooltip.twig'; -import UtilityComponent from './usa-tooltip--utilities.twig'; -import { tooltip } from '@uswds/uswds/src/js/components'; -import css from './index.scss'; - -export default { - title: 'USWDS/Components/Tooltip', - args: { - uswdsBehaviorJs: tooltip, - }, -}; - -const Template = (args) => Component(args); -const UtilityTemplate = (args) => UtilityComponent(args); - -export const Default = () => ; - -export const Utility = () => ; diff --git a/testing/ncids-css-testing/stories/uswds-undocumented/usa-intro/index.scss b/testing/ncids-css-testing/stories/uswds-undocumented/usa-intro/index.scss deleted file mode 100644 index 2d0c0fbfd..000000000 --- a/testing/ncids-css-testing/stories/uswds-undocumented/usa-intro/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use "styles/ncids"; -@forward "usa-intro"; diff --git a/testing/ncids-css-testing/stories/uswds-undocumented/usa-intro/usa-intro.stories.jsx b/testing/ncids-css-testing/stories/uswds-undocumented/usa-intro/usa-intro.stories.jsx deleted file mode 100644 index edee646db..000000000 --- a/testing/ncids-css-testing/stories/uswds-undocumented/usa-intro/usa-intro.stories.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import Component from '@nciocpl/ncids-twig/components/usa-intro/usa-intro.twig'; -import { TestCase } from '../../../components/test-case'; -import css from './index.scss'; - -// Created since USWDS does not have an example in their storybook -export default { - title: 'USWDS/Components/Intro', -}; - -const Template = (args) => Component(args); - -export const Default = () => ; diff --git a/testing/ncids-css-testing/styles/ncids/_index.scss b/testing/ncids-css-testing/styles/ncids/_index.scss index 1b1f5f8ed..6b791f171 100644 --- a/testing/ncids-css-testing/styles/ncids/_index.scss +++ b/testing/ncids-css-testing/styles/ncids/_index.scss @@ -1,5 +1,5 @@ @use "uswds-core" with ( - $theme-image-path: "~@nciocpl/ncids-css/uswds-img", // todo webpack version upgrade + $theme-image-path: "@nciocpl/ncids-css/uswds-img", $theme-show-notifications: false, $theme-show-compile-warnings: false, $theme-utility-breakpoints: ( @@ -14,4 +14,4 @@ "widescreen": true ) ); -@use "uswds-global"; +@forward "uswds-global"; diff --git a/testing/ncids-css-testing/util/glob_hack/index.js b/testing/ncids-css-testing/util/glob_hack/index.cjs similarity index 100% rename from testing/ncids-css-testing/util/glob_hack/index.js rename to testing/ncids-css-testing/util/glob_hack/index.cjs diff --git a/testing/ncids-css-testing/vite.config.js b/testing/ncids-css-testing/vite.config.js new file mode 100644 index 000000000..83349e7da --- /dev/null +++ b/testing/ncids-css-testing/vite.config.js @@ -0,0 +1,66 @@ +import { defineConfig } from 'vite'; +import { join } from 'node:path'; + +import react from '@vitejs/plugin-react'; +import twig from 'vite-plugin-twig-drupal'; +import path from 'path'; + +// https://vitejs.dev/config/ +export default defineConfig({ + optimizeDeps: { + include: ['twig', 'drupal-attribute', 'drupal-twig-extensions', 'drupal-twig-extensions/twig'], + }, + plugins: [ + react(), + twig({ + namespaces: { + // components: join(__dirname, 'src/stories/components'), + // Other namespaces as required. + // TODO + 'nciocpl/ncids-twig': path.resolve(__dirname, './../../packages/ncids-twig'), + 'components': path.resolve(__dirname, './src/stories/uswds-native'), + 'templates': path.resolve(__dirname, '../../../packages/ncids-css/uswds-packages/templates'), + }, + // Optional if you are using React storybook renderer. The default is 'html' and works with storybook's html + // renderer. + framework: 'react', + functions: { + // You can add custom functions - each is a function that is passed the active Twig instance and should call + // e.g. extendFunction to register a function + // reverse: (twigInstance) => twigInstance.extendFunction("reverse", () => (text) => text.split(' ').reverse().join(' ')), + // e.g. extendFilter to register a filter + // clean_unique_id: (twigInstance) => twigInstance.extendFilter("clean_unique_id", () => (text) => text.split(' ').reverse().join(' ')), + }, + globalContext: { + // Global variables that should be present in all templates. + // active_theme: 'my_super_theme', + // is_front_page: false, + }, + }), + ], + resolve: { + }, + build: { + minify: true, + cssMinify: true, + rollupOptions: { + }, + }, + css: { + preprocessorOptions: { + scss: { + quietDeps: true, + includePaths: [ + path.join( + __dirname, + 'node_modules/@nciocpl/ncids-css/packages', + ), + path.join( + __dirname, + 'node_modules/@nciocpl/ncids-css/uswds-packages', + ), + ], + }, + }, + }, +});