diff --git a/packages/wizard/README.md b/packages/wizard/README.md new file mode 100644 index 0000000000..f6d912208f --- /dev/null +++ b/packages/wizard/README.md @@ -0,0 +1,26 @@ + +# Wizard + +![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/wizard.svg) +#### [View on MongoDB.design](https://www.mongodb.design/component/wizard/live-example/) + +## Installation + +### PNPM + +```shell +pnpm add @leafygreen-ui/wizard +``` + +### Yarn + +```shell +yarn add @leafygreen-ui/wizard +``` + +### NPM + +```shell +npm install @leafygreen-ui/wizard +``` + diff --git a/packages/wizard/package.json b/packages/wizard/package.json new file mode 100644 index 0000000000..91384840b9 --- /dev/null +++ b/packages/wizard/package.json @@ -0,0 +1,43 @@ + +{ + "name": "@leafygreen-ui/wizard", + "version": "0.1.0", + "description": "LeafyGreen UI Kit Wizard", + "main": "./dist/umd/index.js", + "module": "./dist/esm/index.js", + "types": "./dist/types/index.d.ts", + "license": "Apache-2.0", + "exports": { + ".": { + "require": "./dist/umd/index.js", + "import": "./dist/esm/index.js", + "types": "./dist/types/index.d.ts" + }, + "./testing": { + "require": "./dist/umd/testing/index.js", + "import": "./dist/esm/testing/index.js", + "types": "./dist/types/testing/index.d.ts" + } + }, + "scripts": { + "build": "lg-build bundle", + "tsc": "lg-build tsc", + "docs": "lg-build docs" + }, + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@leafygreen-ui/emotion": "workspace:^", + "@leafygreen-ui/lib": "workspace:^", + "@lg-tools/test-harnesses": "workspace:^" + }, + "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/wizard", + "repository": { + "type": "git", + "url": "https://github.com/mongodb/leafygreen-ui" + }, + "bugs": { + "url": "https://jira.mongodb.org/projects/LG/summary" + } +} diff --git a/packages/wizard/src/Wizard.stories.tsx b/packages/wizard/src/Wizard.stories.tsx new file mode 100644 index 0000000000..4c4b56cf46 --- /dev/null +++ b/packages/wizard/src/Wizard.stories.tsx @@ -0,0 +1,17 @@ + +import React from 'react'; +import { StoryFn } from '@storybook/react'; + +import { Wizard } from '.'; + +export default { + title: 'Components/Wizard', + component: Wizard, +} + +const Template: StoryFn = (props) => ( + +); + +export const Basic = Template.bind({}); + diff --git a/packages/wizard/src/Wizard/Wizard.spec.tsx b/packages/wizard/src/Wizard/Wizard.spec.tsx new file mode 100644 index 0000000000..07591fd2e6 --- /dev/null +++ b/packages/wizard/src/Wizard/Wizard.spec.tsx @@ -0,0 +1,11 @@ + +import React from 'react'; +import { render } from '@testing-library/react'; + +import { Wizard } from '.'; + +describe('packages/wizard', () => { + test('condition', () => { + + }) +}) diff --git a/packages/wizard/src/Wizard/Wizard.styles.ts b/packages/wizard/src/Wizard/Wizard.styles.ts new file mode 100644 index 0000000000..928608f58d --- /dev/null +++ b/packages/wizard/src/Wizard/Wizard.styles.ts @@ -0,0 +1,4 @@ + +import { css } from '@leafygreen-ui/emotion'; + +export const baseStyles = css``; diff --git a/packages/wizard/src/Wizard/Wizard.tsx b/packages/wizard/src/Wizard/Wizard.tsx new file mode 100644 index 0000000000..112fe70c75 --- /dev/null +++ b/packages/wizard/src/Wizard/Wizard.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { WizardProps } from './Wizard.types'; + +export function Wizard({}: WizardProps) { + return
your content here
; +} + +Wizard.displayName = 'Wizard'; diff --git a/packages/wizard/src/Wizard/Wizard.types.ts b/packages/wizard/src/Wizard/Wizard.types.ts new file mode 100644 index 0000000000..cfa270475f --- /dev/null +++ b/packages/wizard/src/Wizard/Wizard.types.ts @@ -0,0 +1 @@ +export interface WizardProps {} \ No newline at end of file diff --git a/packages/wizard/src/Wizard/index.ts b/packages/wizard/src/Wizard/index.ts new file mode 100644 index 0000000000..82aa8f69a6 --- /dev/null +++ b/packages/wizard/src/Wizard/index.ts @@ -0,0 +1,3 @@ + +export { Wizard } from './Wizard'; +export { type WizardProps } from './Wizard.types'; diff --git a/packages/wizard/src/WizardFooter/WizardFooter.spec.tsx b/packages/wizard/src/WizardFooter/WizardFooter.spec.tsx new file mode 100644 index 0000000000..f0081b35c3 --- /dev/null +++ b/packages/wizard/src/WizardFooter/WizardFooter.spec.tsx @@ -0,0 +1,11 @@ + +import React from 'react'; +import { render } from '@testing-library/react'; + +import { WizardFooter } from '.'; + +describe('packages/wizard-footer', () => { + test('condition', () => { + + }) +}) diff --git a/packages/wizard/src/WizardFooter/WizardFooter.styles.ts b/packages/wizard/src/WizardFooter/WizardFooter.styles.ts new file mode 100644 index 0000000000..928608f58d --- /dev/null +++ b/packages/wizard/src/WizardFooter/WizardFooter.styles.ts @@ -0,0 +1,4 @@ + +import { css } from '@leafygreen-ui/emotion'; + +export const baseStyles = css``; diff --git a/packages/wizard/src/WizardFooter/WizardFooter.tsx b/packages/wizard/src/WizardFooter/WizardFooter.tsx new file mode 100644 index 0000000000..f0b6c5519a --- /dev/null +++ b/packages/wizard/src/WizardFooter/WizardFooter.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { WizardFooterProps } from './WizardFooter.types'; + +export function WizardFooter({}: WizardFooterProps) { + return
your content here
; +} + +WizardFooter.displayName = 'WizardFooter'; diff --git a/packages/wizard/src/WizardFooter/WizardFooter.types.ts b/packages/wizard/src/WizardFooter/WizardFooter.types.ts new file mode 100644 index 0000000000..02f3f87b43 --- /dev/null +++ b/packages/wizard/src/WizardFooter/WizardFooter.types.ts @@ -0,0 +1 @@ +export interface WizardFooterProps {} \ No newline at end of file diff --git a/packages/wizard/src/WizardFooter/index.ts b/packages/wizard/src/WizardFooter/index.ts new file mode 100644 index 0000000000..bc9a177cfe --- /dev/null +++ b/packages/wizard/src/WizardFooter/index.ts @@ -0,0 +1,3 @@ + +export { WizardFooter } from './WizardFooter'; +export { type WizardFooterProps } from './WizardFooter.types'; diff --git a/packages/wizard/src/WizardStep/WizardStep.spec.tsx b/packages/wizard/src/WizardStep/WizardStep.spec.tsx new file mode 100644 index 0000000000..fb00cde028 --- /dev/null +++ b/packages/wizard/src/WizardStep/WizardStep.spec.tsx @@ -0,0 +1,11 @@ + +import React from 'react'; +import { render } from '@testing-library/react'; + +import { WizardStep } from '.'; + +describe('packages/wizard-step', () => { + test('condition', () => { + + }) +}) diff --git a/packages/wizard/src/WizardStep/WizardStep.styles.ts b/packages/wizard/src/WizardStep/WizardStep.styles.ts new file mode 100644 index 0000000000..928608f58d --- /dev/null +++ b/packages/wizard/src/WizardStep/WizardStep.styles.ts @@ -0,0 +1,4 @@ + +import { css } from '@leafygreen-ui/emotion'; + +export const baseStyles = css``; diff --git a/packages/wizard/src/WizardStep/WizardStep.tsx b/packages/wizard/src/WizardStep/WizardStep.tsx new file mode 100644 index 0000000000..6c699df9e8 --- /dev/null +++ b/packages/wizard/src/WizardStep/WizardStep.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { WizardStepProps } from './WizardStep.types'; + +export function WizardStep({}: WizardStepProps) { + return
your content here
; +} + +WizardStep.displayName = 'WizardStep'; diff --git a/packages/wizard/src/WizardStep/WizardStep.types.ts b/packages/wizard/src/WizardStep/WizardStep.types.ts new file mode 100644 index 0000000000..3998534991 --- /dev/null +++ b/packages/wizard/src/WizardStep/WizardStep.types.ts @@ -0,0 +1 @@ +export interface WizardStepProps {} \ No newline at end of file diff --git a/packages/wizard/src/WizardStep/index.ts b/packages/wizard/src/WizardStep/index.ts new file mode 100644 index 0000000000..866f9c3f6c --- /dev/null +++ b/packages/wizard/src/WizardStep/index.ts @@ -0,0 +1,3 @@ + +export { WizardStep } from './WizardStep'; +export { type WizardStepProps } from './WizardStep.types'; diff --git a/packages/wizard/src/index.ts b/packages/wizard/src/index.ts new file mode 100644 index 0000000000..cfbd7d46d8 --- /dev/null +++ b/packages/wizard/src/index.ts @@ -0,0 +1 @@ +export { Wizard, type WizardProps } from './Wizard'; \ No newline at end of file diff --git a/packages/wizard/src/testing/getTestUtils.spec.tsx b/packages/wizard/src/testing/getTestUtils.spec.tsx new file mode 100644 index 0000000000..99117014a5 --- /dev/null +++ b/packages/wizard/src/testing/getTestUtils.spec.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { render } from '@testing-library/react'; + +import { Wizard } from '.'; + +describe('packages/wizard/getTestUtils', () => { + test('condition', () => { + + }) +}) diff --git a/packages/wizard/src/testing/getTestUtils.tsx b/packages/wizard/src/testing/getTestUtils.tsx new file mode 100644 index 0000000000..ad89a6e99d --- /dev/null +++ b/packages/wizard/src/testing/getTestUtils.tsx @@ -0,0 +1,15 @@ +import { findByLgId, getByLgId, queryByLgId } from '@lg-tools/test-harnesses'; + +import { LgIdString } from '@leafygreen-ui/lib'; + +import { DEFAULT_LGID_ROOT, getLgIds } from '../utils/getLgIds'; + +import { TestUtilsReturnType } from './getTestUtils.types'; + +export const getTestUtils = ( + lgId: LgIdString = DEFAULT_LGID_ROOT, +): TestUtilsReturnType => { + const lgIds = getLgIds(lgId); + + return {}; +}; diff --git a/packages/wizard/src/testing/getTestUtils.types.ts b/packages/wizard/src/testing/getTestUtils.types.ts new file mode 100644 index 0000000000..50d2fb417a --- /dev/null +++ b/packages/wizard/src/testing/getTestUtils.types.ts @@ -0,0 +1 @@ +export interface TestUtilsReturnType {} \ No newline at end of file diff --git a/packages/wizard/src/testing/index.ts b/packages/wizard/src/testing/index.ts new file mode 100644 index 0000000000..4c102995fa --- /dev/null +++ b/packages/wizard/src/testing/index.ts @@ -0,0 +1,2 @@ +export { getTestUtils } from './getTestUtils'; +export { type TestUtilsReturnType } from './getTestUtils.types'; diff --git a/packages/wizard/src/utils/getLgIds.ts b/packages/wizard/src/utils/getLgIds.ts new file mode 100644 index 0000000000..9590c84563 --- /dev/null +++ b/packages/wizard/src/utils/getLgIds.ts @@ -0,0 +1,12 @@ +import { LgIdString } from '@leafygreen-ui/lib'; + +export const DEFAULT_LGID_ROOT = 'lg-wizard'; + +export const getLgIds = (root: LgIdString = DEFAULT_LGID_ROOT) => { + const ids = { + root, + } as const; + return ids; +}; + +export type GetLgIdsReturnType = ReturnType; diff --git a/packages/wizard/tsconfig.json b/packages/wizard/tsconfig.json new file mode 100644 index 0000000000..5a0f368e7f --- /dev/null +++ b/packages/wizard/tsconfig.json @@ -0,0 +1,22 @@ +{ + "extends": "@lg-tools/build/config/package.tsconfig.json", + "compilerOptions": { + "paths": { + "@leafygreen-ui/icon/dist/*": ["../icon/src/generated/*"], + "@leafygreen-ui/*": ["../*/src"] + } + }, + "include": ["src/**/*"], + "exclude": ["**/*.spec.*", "**/*.stories.*"], + "references": [ + { + "path": "../emotion" + }, + { + "path": "../lib" + }, + { + "path": "../../tools/test-harnesses" + } + ] +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3db280b369..c4e76f3070 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3790,6 +3790,18 @@ importers: specifier: workspace:^ version: link:../../tools/storybook-utils + packages/wizard: + dependencies: + '@leafygreen-ui/emotion': + specifier: workspace:^ + version: link:../emotion + '@leafygreen-ui/lib': + specifier: workspace:^ + version: link:../lib + '@lg-tools/test-harnesses': + specifier: workspace:^ + version: link:../../tools/test-harnesses + tools/build: dependencies: '@babel/core': diff --git a/tools/install/src/ALL_PACKAGES.ts b/tools/install/src/ALL_PACKAGES.ts index 14b1d919c3..3e268d5c5d 100644 --- a/tools/install/src/ALL_PACKAGES.ts +++ b/tools/install/src/ALL_PACKAGES.ts @@ -76,6 +76,7 @@ export const ALL_PACKAGES = [ '@leafygreen-ui/toolbar', '@leafygreen-ui/tooltip', '@leafygreen-ui/typography', + '@leafygreen-ui/wizard', '@leafygreen-ui/vertical-stepper', '@lg-charts/chart-card', '@lg-charts/colors',