migrate layout components (#2961)

* move old layout components for ref * update pkgs + try dark theme * basic light mode working * color modes working in components * configure toolbar + start adding params * dark mode theme config working, start on DocsPage configs * keep migrating * anchors working * aboutheader working, need to start working on other headers + types * fix type errors in .storybook layout components * test stories, need to fix prettier * fix formatting * fixed theming ! * better heading * fix other pkg weirdness * fix default homepage + docs ordering * add absolute paths * add absolute paths * create story template (#2964) * create story template * move template out of atoms * update import * withSource to sourceState --------- Co-authored-by: cassie spain <[email protected]> * add source to template * fix Canvas in template * allow static images in storybook 8 (#2973) * test image stuff * getting closer * test dist * remove asset tests * test in pr * tweak some more examples * create foundations + layout stories (#2966) * create foundations + layout stories * feat(Molecules Pages) (#2971) added existing Molecules pages * typography + meta (#2975) * create foundations + layout stories * start foundations * start retooling componentheader * component header tweak * start restructure of header components * TOC + Theme working, need DataTable + code background color * working on color mode - need to fix text color * revert test * Theme page sorted, need to fix ColorMode * colormode sorted * colormode sorted * start type fix + what to do about blocks * LayoutGrid + content Container * LayoutGrid done * start flexbox, need to look into sandbox stuff * gridbox + flexbox are good, just need to tweak * tweaks to headers * lots of style tweaks + deduplications * fix typograpth, need to fix color mode switches * start on system stories * unify shared elements * add variance + fix tables * more tweaks to status * design tweaks * add hub * more tweaks * rename DataTable * clean up of default * typography + meta stories * add anchor story * start text + hiddentext * text done * started snippet changes * fixed code snippets * meta and sorted done?" * renamed + sorting * more kenny edits * more kenny edits + other new tab for links * the last of it * fix molecule order * update production deploy (#2980) * [gm-916] update storybook production deploy * swap to relative pathing * again * feat(Organisms) (#2978) * added in Organisms stories * remove old styleguide files * Revert "remove old styleguide files" This reverts commit baba497. * feat(Atoms): migrate all Atom stories (#2972) * create story template * move template out of atoms * update import * skip to content * withSource to sourceState * update skip to content * tag story * add statuses * radial progress story * updates from figma * toggle story * update status * pattern story * update toggle interactive example * illustrations story * focus trap story * update playground examples * floating card story * update illustrations subtitle * drawer story * update drawer story * animation story * add figma links * card story * about page * progress bar story * popovercontainer story * loader stories * fix about pages * move examples below * icon stories * checkbox story * add checkbox example * most of input story * Badges started (#2979) * Badges started * badges done * add most GH links, need to test * add github links to most pages * remove comment * finish input stories * update more github links * textarea story * radio story * update examples * select story * fix card usage guidelines * feat(Atoms): adding in the remaining Atoms (#2982) * finished badges * added buttons * added formelements * updated about page * minor touchups * fixed minor ts error * updated usage for CTAButton and IconButton * selectdropdown story * remove optional text * update forminputs table of contents * fix forminput table of contents links * remove logo story * remove placeholder text * update main table of contents * fix icon table of contents * fix loaders table of contents links * PR feedback * uncomment link --------- Co-authored-by: cassie spain <[email protected]> Co-authored-by: Kenny Lin <[email protected]> * remove old styleguide files (#2985) --------- Co-authored-by: Amy Resnik <[email protected]> Co-authored-by: Kenny Lin <[email protected]>
Codecademy · Dec 9, 2024 · 80a3986 · 80a3986
1 parent 98595ca
commit 80a3986
Show file tree

Hide file tree

Showing 357 changed files with 16,906 additions and 15,026 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -169,7 +169,7 @@ jobs:
       - *build_all_packages
       - run:
           name: build storybook
-          command: yarn build-storybook
+          command: yarn nx run styleguide:build-storybook
       - run:
           name: deploy
           command: yarn deploy

diff --git a/.vscode/stories.code-snippets b/.vscode/stories.code-snippets
@@ -1,86 +1,137 @@
 {
-  "Component Story": {
-    "prefix": "component-story",
+  "Component Doc": {
+    "prefix": "component-doc",
     "body": [
-      "import { $1 } from '@codecademy/$2';",
-      "import title from '@codecademy/macros/lib/title.macro';",
-      "import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';",
-      "import { PropsTable } from '@codecademy/storybook-addon-variance';",
+      "import { Canvas, Controls, Meta } from '@storybook/blocks';",
+      "",
+      "import { ComponentHeader } from '~styleguide/blocks';",
+      "",
+      "import * as $1Stories from './$1.stories';",
+      "",
+      "export const parameters = {",
+      "subtitle: `Template component`,",
+      "design: {",
+      "type: 'figma',",
+      "url: 'https: //www.figma.com/file/XXX',",
+      " },",
+      "status: 'current',",
+      "source: {",
+      "repo: '$2',",
+      "// this is easy to find by right clicking on the file in VSCode and clicking 'Copy Remote File Url From...' and the selecting 'main' or amending the url path below like so: https://github.com/Codecademy/gamut/blob/main/packages/${2}/src/file/location",
+      "githubLink:",
+      "'https: //github.com/Codecademy/gamut/blob/main/packages/gamut/src/Logo',",
+      " },",
+      "};",
+      "<Meta of={$1Stories}/>",
+      "",
+      "<ComponentHeader {...parameters} />",
+      "",
+      "## Usage",
+      "",
+      "Use $1 to [what it should be used for]",
+      "",
+      "### Best practices:",
+      "",
+      "- [recommendation / best practice for implementation]",
+      "- [recommendation / best practice for implementation]",
+      "",
+      "When NOT to use",
+      "",
+      "- [use case]- for [describe the use case], use the [similar component] component.",
+      "- [use case]- for [describe the use case], use the [similar component] component",
+      "",
+      "## Anatomy",
+      "",
+      "[Insert image exported from Figma]",
+      "",
+      "1. [Element name]",
+      "- [description including available options and ux writing if relevant]",
       "",
-      "<Meta",
-      "  title={title}",
-      "  component={$1}",
-      "  parameters={{",
-      "    subtitle: '$3',",
-      "    source: '$2',",
-      "    status: 'current' | 'updating' | 'deprecated' | 'static'$4 ,",
-      "    design: {",
-      "      type: 'figma',",
-      "      url: 'https://www.figma.com/file/$5',",
-      "    }",
-      "  }}",
-      "  args={{}}",
-      "/>",
+      "## Variants",
       "",
-      "`$1` component summary goes here",
+      "### [Variant 1 name]",
       "",
-      "## Design Principles",
+      "Use the [variant 1 name] to [what it should be used for]",
       "",
-      "Design Principles summary",
+      "<Canvas of={$1Stories.Default} />",
       "",
-      "## Usage Guidelines",
+      "## Playground",
       "",
-      "Usage summary",
+      "If you are using a story named 'Default', you can forgo the `of` prop.",
       "",
-      "## Code Playground",
+      "<Canvas sourceState='shown' of={$1Stories.Default} />",
       "",
-      "<Canvas>",
-      "  <Story name=\"$1\">",
-      "    {(args) => <$1 {...args} />}",
-      "  </Story>",
-      "</Canvas>",
+      "<Controls />",
       "",
-      "<PropsTable story=\"$1\"/>"
+      "## Accessibility considerations",
+      "",
+      "- [Accessibility guidance]",
+      "",
+      "## UX writing",
+      "",
+      "- [content]",
+      " - [guidance]",
+      " - [guidance]"
     ],
-    "description": "Default Component Story Structure."
+    "description": "Default Component Doc Structure."
   },
   "Table of Contents Story": {
     "prefix": "toc-story",
     "body": [
-      "import title from '@codecademy/macros/lib/title.macro';",
-      "import { Meta } from '@storybook/addon-docs/blocks';",
+      "import { Meta } from '@storybook/blocks';",
+      "import { AboutHeader, TableOfContents } from '~styleguide/blocks';",
+      "",
+      "export const parameters = {",
+      "  id: '$1',",
+      "  title: '$1/About',",
+      "  subtitle: '$2',",
+      "  }",
       "",
-      "import { TableOfContents } from '~styleguide/blocks';",
+      "<Meta title='$1/About' />",
       "",
-      "<Meta",
-      "  title={title}",
-      "  parameters={{",
-      "    subtitle: '$3',",
-      "  }}",
-      "/>",
+      "<AboutHeader {...parameters} />",
       "",
-      "<TableOfContents />"
+      "Foundations make up the smallest scale design values that comprise a design system. Sometimes referred to elsewhere as "tokens", they are the abstract units that comprise and stitch together our atoms, molecules, and organisms.",
+      "",
+      "<TableOfContents",
+      " links={[",
+      "   {",
+      "     id: '$1/Category',",
+      "     subtitle: 'Short description',",
+      "     title: 'Category',",
+      "   }",
+      " ]}",
+      "/>"
     ],
     "description": "TOC Story Structure."
   },
-  "Canvas Block": {
-    "prefix": "canvas-block",
-    "body": [
-      "<Canvas>",
-      "  <Story name=\"$1\" args={{}}>",
-      "    {(args) => <$2 {...args} />}",
-      "  </Story>",
-      "</Canvas>"
-    ],
-    "description": "A single story block wrapped in a canvas"
-  },
-  "Story Block": {
-    "prefix": "story-block",
+  "Component Story": {
+    "prefix": "component-story",
     "body": [
-      "  <Story name=\"$1\" args={{}}>",
-      "    {(args) => <$2 {...args} />}",
-      "  </Story>"
+      "import { $1 } from '@codecademy/gamut';",
+      "import type { Meta, StoryObj } from '@storybook/react';",
+      "",
+      "const meta: Meta<typeof $1> = {",
+      " component: $1,",
+      " args: {},",
+      "};",
+      "",
+      "export default meta;",
+      "type Story = StoryObj<typeof $1>;",
+      "",
+      "export const Default: Story = {",
+      " args: {",
+      "   children: 'Test'",
+      " },",
+      "};",
+      "",
+      "export const Secondary: Story = {",
+      " args: {",
+      "   children: 'Test again',",
+      "   variant: 'secondary'",
+      " }",
+      "};"
     ],
-    "description": "A single story block without a canvas"
+    "description": "Default TSX story structure."
   }
 }
diff --git a/dist/static/CNAME b/dist/static/CNAME
diff --git a/dist/static/robots.txt b/dist/static/robots.txt
diff --git a/dist/static/storybook/index.html b/dist/static/storybook/index.html
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "lodash": "^4.17.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-helmet": "6.1.0"
+    "react-helmet-async": "^2.0.5"
   },
   "devDependencies": {
     "@babel/cli": "7.24.7",
@@ -23,21 +23,26 @@
     "@codecademy/tsconfig": "^0.3.0",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/jest": "^11.11.0",
+    "@mdx-js/react": "^3.1.0",
     "@nx/jest": "19.3.2",
     "@nx/js": "19.3.2",
     "@nx/react": "19.3.2",
     "@nx/storybook": "19.3.2",
     "@nx/web": "19.3.2",
     "@nx/webpack": "19.3.2",
-    "@storybook/addon-controls": "8.3.5",
+    "@storybook/addon-controls": "8.3.6",
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-docs": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/core-server": "8.3.5",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/core-server": "8.3.6",
+    "@storybook/docs-tools": "^8.3.6",
     "@storybook/icons": "1.2.12",
-    "@storybook/react-webpack5": "^8.3.5",
+    "@storybook/manager-api": "^8.3.6",
+    "@storybook/react-webpack5": "^8.3.6",
+    "@storybook/theming": "^8.3.6",
     "@svgr/cli": "5.5.0",
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.16.1",
@@ -79,7 +84,7 @@
     "onchange": "^7.0.2",
     "prettier": "^2.6.2",
     "react-test-renderer": "18.3.1",
-    "storybook": "^8.3.5",
+    "storybook": "^8.3.6",
     "svgo": "^1.3.2",
     "syncpack": "^10.9.3",
     "ts-jest": "29.1.1",

diff --git a/packages/gamut/src/AccordionButtonDeprecated/ButtonDeprecated/index.tsx b/packages/gamut/src/AccordionButtonDeprecated/ButtonDeprecated/index.tsx
@@ -4,7 +4,7 @@ import hasIn from 'lodash/hasIn';
 import { ReactNode } from 'react';
 import * as React from 'react';
 
-import { omitProps } from '@codecademy/gamut/src/utils/omitProps';
+import { omitProps } from '../../utils';
 import {
   ButtonDeprecatedBase,
   ButtonDeprecatedBaseProps,

diff --git a/packages/gamut/src/AccordionButtonDeprecated/ButtonDeprecatedBase/index.tsx b/packages/gamut/src/AccordionButtonDeprecated/ButtonDeprecatedBase/index.tsx
@@ -2,8 +2,8 @@ import cx from 'classnames';
 import { HTMLProps, ReactNode } from 'react';
 import * as React from 'react';
 
-import { ChildComponentDescriptor } from '@codecademy/gamut/src/typings/react';
-import { omitProps } from '@codecademy/gamut/src/utils/omitProps';
+import { ChildComponentDescriptor } from '../../typings/react';
+import { omitProps } from '../../utils';
 // eslint-disable-next-line gamut/no-css-standalone
 import styles from './styles.module.scss';
 

diff --git a/packages/gamut/src/Popover/elements.tsx b/packages/gamut/src/Popover/elements.tsx
@@ -78,7 +78,7 @@ export const PopoverPortal: React.FC<
     <BodyPortal {...rest} />
   );
 
-type PopoverContainerProps = Pick<PopoverProps, 'position' | 'align'>;
+export type PopoverContainerProps = Pick<PopoverProps, 'position' | 'align'>;
 
 export const PopoverContainer = styled.div<PopoverContainerProps>`
   position: fixed;

diff --git a/packages/old_styleguide/stories/Atoms/About.stories.mdx b/packages/old_styleguide/stories/Atoms/About.stories.mdx
diff --git a/packages/old_styleguide/stories/Atoms/Animation.examples.tsx b/packages/old_styleguide/stories/Atoms/Animation.examples.tsx