-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add Storybook to @atj/design and move all the React components from @atj/spotlight into @atj/design. * Add story for form section * Add story for FormEdit, and start using PascalCase and default exports for React component module names. * Add story for FormDelete * Add FormView story * Update mock router for DocumentImporter story * Add root form section to Storybook * Add Storybook build to Astro build, via symlink in the public directory. * Fix build errors * Tweak design build order so styles are available to Storybook
- Loading branch information
1 parent
7229c23
commit f64ef1e
Showing
68 changed files
with
8,053 additions
and
1,522 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| ../../../packages/design/storybook-static |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| --- | ||
| import closeSvg from '@atj/design/dist/uswds/images/usa-icons/close.svg'; | ||
| import closeSvg from '@atj/design/static/uswds/images/usa-icons/close.svg'; | ||
| --- | ||
|
|
||
| <header class="usa-header usa-header--basic usa-header--megamenu"></header> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,12 @@ | ||
| --- | ||
| import { DocumentImporter } from '../../components/react/form-builder/document-importer'; | ||
| import DocumentImporter from '@atj/design/src/form-builder/DocumentImporter'; | ||
| import { createBrowserFormService } from '@atj/form-service'; | ||
| import ContentLayout from '../../layouts/ContentLayout.astro'; | ||
| const formService = createBrowserFormService(); | ||
| --- | ||
|
|
||
| <ContentLayout title="10x Access to Justice Spotlight"> | ||
| <DocumentImporter client:only /> | ||
| <!--DocumentImporter client:only /--> | ||
| </ContentLayout> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,9 @@ | ||
| @import '@atj/design/dist/uswds/styles/styles.css'; | ||
| @import '@atj/design/static/uswds/styles/styles.css'; | ||
|
|
||
| .usa-form--large { | ||
| max-width: 32rem; | ||
| max-width: 32rem; | ||
| } | ||
|
|
||
| .usa-legend { | ||
| max-width: 100%; | ||
| max-width: 100%; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,3 @@ | ||
| dist/ | ||
| static/ | ||
| storybook-static/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { join, dirname } from 'path'; | ||
|
|
||
| import { StorybookConfig } from '@storybook/react-vite'; | ||
|
|
||
| /** | ||
| * This function is used to resolve the absolute path of a package. | ||
| * It is needed in projects that use Yarn PnP or are set up within a monorepo. | ||
| */ | ||
| const getAbsolutePath = (value: string) => { | ||
| return dirname(require.resolve(join(value, 'package.json'))); | ||
| }; | ||
|
|
||
| const config: StorybookConfig = { | ||
| stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], | ||
| addons: [ | ||
| getAbsolutePath('@storybook/addon-links'), | ||
| getAbsolutePath('@storybook/addon-essentials'), | ||
| getAbsolutePath('@storybook/addon-onboarding'), | ||
| getAbsolutePath('@storybook/addon-interactions'), | ||
| ], | ||
| framework: { | ||
| name: getAbsolutePath('@storybook/react-vite') as '@storybook/react-vite', | ||
| options: {}, | ||
| }, | ||
| docs: { | ||
| autodocs: 'tag', | ||
| }, | ||
| }; | ||
| export default config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { Preview } from '@storybook/react'; | ||
|
|
||
| import '../static/uswds/styles/styles.css'; | ||
|
|
||
| const preview: Preview = { | ||
| parameters: { | ||
| actions: { argTypesRegex: '^on[A-Z].*' }, | ||
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/i, | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default preview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
5 changes: 3 additions & 2 deletions
5
...ents/react/experiments/interview-form.tsx → ...design/src/experiments/interview-form.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
48 changes: 48 additions & 0 deletions
48
packages/design/src/form/FormDelete/FormDelete.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React from 'react'; | ||
| import { MemoryRouter } from 'react-router-dom'; | ||
| import type { Meta, StoryFn, StoryObj } from '@storybook/react'; | ||
|
|
||
| import { createForm } from '@atj/forms'; | ||
| import { createTestFormService } from '@atj/form-service'; | ||
|
|
||
| import FormDelete from '.'; | ||
|
|
||
| export default { | ||
| title: 'form/FormDelete', | ||
| component: FormDelete, | ||
| decorators: [ | ||
| (Story: StoryFn, args: any) => ( | ||
| <MemoryRouter initialEntries={['/']}> | ||
| <Story {...args} /> | ||
| </MemoryRouter> | ||
| ), | ||
| ], | ||
| args: { | ||
| formId: 'test-form', | ||
| formService: createTestFormService({ | ||
| 'test-form': createForm( | ||
| { | ||
| title: 'Test form', | ||
| description: 'Test description', | ||
| }, | ||
| [ | ||
| { | ||
| id: 'question-1', | ||
| text: 'Question 1', | ||
| initial: '', | ||
| required: true, | ||
| }, | ||
| { | ||
| id: 'question-2', | ||
| text: 'Question 2', | ||
| initial: 'initial value', | ||
| required: false, | ||
| }, | ||
| ] | ||
| ), | ||
| }), | ||
| }, | ||
| tags: ['autodocs'], | ||
| } satisfies Meta<typeof FormDelete>; | ||
|
|
||
| export const FormDeleteTest = {} satisfies StoryObj<typeof FormDelete>; |
Oops, something went wrong.