Merge branch 'rchavez/APPEALS-53946-storybook8-upgrade' into rchavez/…

…APPEALS-53946-storybook8-upgrade2

Grabe code other branch

.github/workflows/workflow.yml

@@ -85,7 +85,7 @@ jobs:
       - name: install node version
         uses: actions/setup-node@v4
         with:
-          node-version: '16.16.0'
+          node-version: '18.20.2'
 
       # If we don't explicitly set this, the runner doesn't find the path when trying to save the cache
       - name: Set yarn cache directory
@@ -108,7 +108,7 @@ jobs:
 
       # We run yarn install after loading the cache to update any dependencies if their version is different
       - name: Install Node Dependencies
-        run: ./ci-bin/capture-log "cd client && yarn install --frozen-lockfile --prefer-offline"
+        run: ./ci-bin/capture-log "cd client && yarn policies set-version 1.22.18 && yarn install --frozen-lockfile --prefer-offline"
 
       - name: Save Yarn Cache
         if: steps.cache-yarn-cache.outputs.cache-hit != 'true'
@@ -298,7 +298,7 @@ jobs:
       - name: install node version
         uses: actions/setup-node@v4
         with:
-          node-version: '16.16.0'
+          node-version: '18.20.2'
 
       - name: validate node version
         run: ./ci-bin/capture-log "node -v"
@@ -351,7 +351,7 @@ jobs:
       - name: install node version
         uses: actions/setup-node@v4
         with:
-          node-version: '16.16.0'
+          node-version: '18.20.2'
 
       - name: Install Node Dependencies
         run: ./ci-bin/capture-log "cd client && yarn install --frozen-lockfile"

.nvmrc

@@ -1 +1 @@
-16.16.0
+18.20.2

Dockerfile

@@ -44,10 +44,23 @@ RUN apt -y update && \
     echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
     apt -y update
 
+# Install OpenSSL 3.2.0 from source
+# RUN apt-get install -y wget && \
+#     wget https://www.openssl.org/source/openssl-3.2.0.tar.gz && \
+#     tar -zxf openssl-3.2.0.tar.gz && \
+#     cd openssl-3.2.0 && \
+#     ./config && \
+#     make && \
+#     make install && \
+#     cd .. && \
+#     rm -rf openssl-3.2.0 openssl-3.2.0.tar.gz
+# # Add OpenSSL libraries to the runtime linker path
+# RUN echo "/usr/local/lib64" >> /etc/ld.so.conf.d/openssl.conf && ldconfig
+
 # Install node
 RUN mkdir /usr/local/nvm
 ENV NVM_DIR /usr/local/nvm
-ENV NODE_VERSION 16.16.0
+ENV NODE_VERSION 18.20.2
 ENV NVM_INSTALL_PATH $NVM_DIR/versions/node/v$NODE_VERSION
 RUN curl --silent -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
 RUN source $NVM_DIR/nvm.sh \

README.md

@@ -279,3 +279,5 @@ We have a lot of technical documentation spread over a lot of different reposito
 - [Caseflow specific devops documentation](https://github.com/department-of-veterans-affairs/appeals-deployment/tree/master/docs) This folder also contains our [first responder manual](https://github.com/department-of-veterans-affairs/appeals-deployment/blob/master/docs/first-responder-manual.md), which is super in understanding our production systems.
 - [Non-Caseflow specific devops documentation](https://github.com/department-of-veterans-affairs/devops/tree/master/docs). This documentation is shared with the vets.gov team, so not all of it is relevant.
 - [Project documentation](https://github.com/department-of-veterans-affairs/appeals-design-research/tree/master/Project%20Folders)
+
+# test

client/.storybook/main.js

@@ -2,21 +2,14 @@ const custom = require('../webpack.config.js');
 
 module.exports = {
   stories: ['../stories/**/*.@(stories|story).@(js|mdx)', '../app/**/*.@(stories|story).@(js|mdx)'],
-  addons: [
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-      },
+
+  addons: [{
+    name: '@storybook/addon-docs',
+    options: {
+      configureJSX: true,
     },
-    '@storybook/addon-controls',
-    '@storybook/addon-actions',
-    '@storybook/addon-a11y'
-  ],
-  reactOptions: {
-    fastRefresh: true,
-    strictMode: true,
-  },
+  }, '@storybook/addon-controls', '@storybook/addon-actions', '@storybook/addon-a11y', '@storybook/addon-mdx-gfm', '@chromatic-com/storybook'],
+
   webpackFinal: (config) => {
     const customRules = custom.module.rules.filter((rule) => {
       return !rule.test.toString().includes('woff') && !rule.test.toString().includes('svg');
@@ -37,4 +30,21 @@ module.exports = {
       },
     };
   },
+
+  framework: {
+    name: '@storybook/react-webpack5',
+
+    options: {
+      fastRefresh: true,
+      strictMode: true
+    }
+  },
+
+  docs: {
+    autodocs: true
+  },
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
 };

client/.storybook/preview.js

@@ -1,17 +1,22 @@
-import { addParameters } from '@storybook/react';
+import { Preview } from '@storybook/react';
 import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
-
 import '../app/styles/app.scss';
 
-addParameters({
-  docs: {
-    container: DocsContainer,
-    page: DocsPage,
-  },
-});
+//Preview has changed the way addParameters are handle, and addParameters are now
+//moved inside a new object called parameters
+const tags = ['autodocs'];
 
-addParameters({ a11y: {} });
+const preview = {
+  parameters: {
+    docs: {
+      container: DocsContainer,
+      page: DocsPage,
+    },
+    a11y: {},
+  },
+};
 
-// Generate arguments for any props that start with "on" (onClick, onSubmit, etc)
-// This *should* work, but isn't currently on beta.21
-// addParameters({ actions: { argTypesRegex: '^on.*' } });
+export {
+  preview,
+  tags
+};

client/app/components/Accordion.mdx

@@ -0,0 +1,66 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+
+import { Accordion } from './Accordion';
+import AccordionSection from './AccordionSection';
+
+export const defaultProps = {};
+
+<Meta
+  title="Commons/Components/Layout/Accordion"
+  component={Accordion}
+/>
+
+export const exampleAccordionSection = [1, 2, 3, 4, 5].map((header) =>
+  (
+    <AccordionSection title={`Example title ${header}`} key={header}>
+      <p>
+        Millions of Americans interact with government services every day.
+        Veterans apply for benefits. Students compare financial aid options.
+        Small business owners seek loans. Too often, outdated tools and complex
+        systems make these interactions cumbersome and frustrating. Enter the
+        United States Digital Service. We partner leading technologists with
+        dedicated public servants to improve the usability and reliability of
+        our government's most important digital services.
+        Visit USDS.gov to learn more.
+      </p>
+    </AccordionSection>
+  )
+);
+
+# Accordion
+
+Our accordion style was taken from the US Web Design Standards.
+Accordions are a list of headers that can be clicked to hide or reveal additional
+content.
+
+### Bordered
+
+<Preview>
+  <Story name="bordered">
+    <Accordion style="bordered" accordion>
+      {exampleAccordionSection}
+    </Accordion>
+  </Story>
+</Preview>
+
+### Borderless
+
+<Preview>
+  <Story name="borderless">
+    <Accordion style="borderless" accordion>
+      {exampleAccordionSection}
+    </Accordion>
+  </Story>
+</Preview>
+
+### Bordered Outline
+
+<Preview>
+  <Story name="bordered-outline">
+    <Accordion style="outline" accordion>
+      {exampleAccordionSection}
+    </Accordion>
+  </Story>
+</Preview>
+
+<Props of={Accordion} />

client/app/components/Actions.mdx

@@ -0,0 +1,19 @@
+import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import { Actions } from './Actions.stories';
+
+<Meta
+  title="Commons/Components/Layout/Actions"
+/>
+
+# Actions 
+
+For most task-based pages, Primary and Secondary Actions sit under the App Canvas. The number of actions per page should be limited intentionally. These tasks should relate specifically to the user’s goal for the page they are on.
+
+The actions at the bottom of the page are arranged such as the primary task (the task that takes the user forward) is on the bottom right of the App Canvas. The label of this action usually hints at the title of the next page. Escape actions are placed to the left of the primary action. On the bottom left, of the App Canvas, there will be a back link, preferably with a description of where the user will go to or a link to the main page after a user has completed a task. These are actions that allow the user to move back a step or completely leave the task they’re working on.
+
+The consistent layout and arrangement of these actions reinforces the users mental model as the use Caseflow. You should avoid placing these actions in other parts of the page without good reason.
+
+<Canvas>
+  <Story story={Actions} />
+</Canvas>

client/app/components/Actions.stories.js

@@ -16,4 +16,7 @@ const Template = () => (
   </div>
 );
 
-export const Actions = Template.bind({});
+const Actions = Template.bind({});
+export default {
+  component: Actions,
+};

client/app/components/AppCanvas.mdx

@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Commons/Components/Layout/App Canvas" />
+
+# App Canvas
+
+Almost all of the interaction in Caseflow takes place in an App Canvas. The content starts off with a page title and
+minimal instructions for what the user needs to do to complete their task on the page. It then contains any interaction
+that well help this to accomplish their task including forms, document previews, tables, error messages, and more.
+The canvas has a default standard width but can be adjusted according to the needs of each application.

client/app/components/Button.stories.js

@@ -8,7 +8,10 @@ const Template = (args) => (
   </Button >
 );
 
-export const Primary = Template.bind({});
+const Primary = Template.bind({});
+export default {
+  component: Primary,
+};
 
 export const Secondary = Template.bind({});
 Secondary.args = {

client/app/components/Buttons.mdx

@@ -0,0 +1,80 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+
+import * as ButtonStories from './Button.stories';
+
+import Button from './Button';
+
+<Meta
+  title="Commons/Components/Button"
+  component={Button}
+  parameters={{
+    controls: { expanded: true }
+  }}
+  args={{
+    children: 'Click Me',
+    disabled: false,
+    linkStyling: false,
+    loading: false,
+    type: 'button',
+    name: 'myButton',
+  }}
+  argTypes={{
+    classNames: { control: { type: 'array' } },
+    type: {
+      control: { type: 'select', options: ['button', 'submit', 'reset'] },
+    },
+    loading: { control: { type: 'boolean' } },
+    onClick: { action: 'clicked' },
+    styling: { control: { type: 'object' } },
+  }}
+/>
+
+Primary actions are visually prioritized by being solid blue `usa-button` style.
+
+Finally, there are actions that we generally want to discourage but should remain visible to users as an escape hatch.
+
+These actions can be `button-link` styles or use the `usa-button-secondary style`.
+For example, the “Cancel” button frequently found at the bottom of Caseflow workflow layouts
+is usually a button link because it launches a modal.
+The button to confirm that a user wants to cancel is red and serves as a warning to the user
+that the action is destructive. These styles should be used sparingly.
+
+The width of the button will vary depending on the length of the content.
+In the source code, the buttons are set so that there is always 20px padding on the left
+and right of the text. While it is ideal not to change the default setting, in a case where
+buttons of various widths are stacked, we highly recommend adjusting the padding of the buttons
+so that they all match in width.
+
+### Primary Button
+<Canvas>
+  <Story story={ButtonStories.Primary} />
+</Canvas>
+
+### Secondary Button
+<Canvas>
+  <Story story={ButtonStories.Secondary} />
+</Canvas>
+
+### Disabled Button
+<Canvas>
+  <Story story={ButtonStories.Disabled} />
+</Canvas>
+
+### Link Button
+<Canvas>
+  <Story story={ButtonStories.Link} />
+</Canvas>
+
+### Disabled Link Button
+<Canvas>
+  <Story story={ButtonStories.DisabledLink} />
+</Canvas>
+
+### Loading Button
+Our button components are able to react to a *loading* property which,
+when *true*, causes the button to show **Loading...**
+beside a spinning icon.
+
+<Canvas>
+  <Story story={ButtonStories.Loading} />
+</Canvas>