@codecademy/styleguide 79.1.3-alpha.bbcee7.0 → 79.1.3-alpha.cb3936.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +2 -2
  3. package/src/lib/Meta/Installation.mdx +30 -7
  4. package/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.mdx +69 -3
  5. package/src/lib/Organisms/ConnectedForm/ConnectedForm/example.ts +0 -67
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ### [79.1.3-alpha.bbcee7.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3-alpha.bbcee7.0) (2026-02-19)
6
+ ### [79.1.3-alpha.cb3936.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3-alpha.cb3936.0) (2026-02-26)
7
7
 
8
8
  **Note:** Version bump only for package @codecademy/styleguide
9
9
 
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@codecademy/styleguide",
3
3
  "description": "Styleguide & Component library for codecademy.com",
4
- "version": "79.1.3-alpha.bbcee7.0",
4
+ "version": "79.1.3-alpha.cb3936.0",
5
5
  "author": "Codecademy Engineering",
6
6
  "license": "MIT",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },
10
10
  "repository": "git@github.com:Codecademy/gamut.git",
11
- "gitHead": "223adaa2693af668e6e511c88428a1012229f2ee"
11
+ "gitHead": "90771f84117becea521a3bbae0c48d70c134061d"
12
12
  }
package/src/lib/Meta/Installation.mdx CHANGED
@@ -39,21 +39,44 @@ yarn add @codecademy/gamut-kit @emotion/react @emotion/styled
39
39
 
40
40
  3. Wrap your application root with `GamutProvider` and give it the theme you would like to use for your app.
41
41
 
42
+ **React 19:**
43
+
42
44
  ```tsx
43
45
  import React from 'react';
44
- import { render } from 'react-dom';
46
+ import { createRoot } from 'react-dom/client';
45
47
  import { GamutProvider, theme } from '@codecademy/gamut-styles';
46
48
 
47
49
  import { App } from './App';
48
50
 
49
51
  const rootElement = document.getElementById('root');
52
+ if (rootElement) {
53
+ const root = createRoot(rootElement);
54
+ root.render(
55
+ <GamutProvider>
56
+ <App />
57
+ </GamutProvider>
58
+ );
59
+ }
60
+ ```
50
61
 
51
- render(
52
- <GamutProvider>
53
- <App />
54
- </GamutProvider>,
55
- rootElement
56
- );
62
+ **React 18:**
63
+
64
+ ```tsx
65
+ import React from 'react';
66
+ import { render } from 'react-dom';
67
+ import { GamutProvider, theme } from '@codecademy/gamut-styles';
68
+
69
+ import { App } from './App';
70
+
71
+ const rootElement = document.getElementById('root');
72
+ if (rootElement) {
73
+ render(
74
+ <GamutProvider>
75
+ <App />
76
+ </GamutProvider>,
77
+ rootElement
78
+ );
79
+ }
57
80
  ```
58
81
 
59
82
  GamutProvider handles a few critical tasks that need to happen in order for components to work.
package/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.mdx CHANGED
@@ -1,10 +1,8 @@
1
- import { DetailedCode } from '@codecademy/gamut';
2
1
  import { Canvas, Controls, Meta } from '@storybook/blocks';
3
2
 
4
3
  import { ComponentHeader, LinkTo } from '~styleguide/blocks';
5
4
 
6
5
  import * as ConnectedFormStories from './ConnectedForm.stories';
7
- import { example } from './example';
8
6
 
9
7
  export const parameters = {
10
8
  title: 'ConnectedForm',
@@ -42,7 +40,75 @@ This hook also returns the `FormRequiredText` component - include this before yo
42
40
 
43
41
  ### Example code
44
42
 
45
- <DetailedCode code={example} preview />
43
+ ```tsx
44
+ import {
45
+ ConnectedCheckbox,
46
+ ConnectedInput,
47
+ ConnectedSelect,
48
+ useConnectedForm,
49
+ } from '@codecademy/gamut';
50
+
51
+ import { TerminalIcon } from '@codecademy/gamut-icons';
52
+
53
+ export const GoodForm = () => {
54
+ const {
55
+ ConnectedFormGroup,
56
+ ConnectedForm,
57
+ connectedFormProps,
58
+ FormRequiredText,
59
+ } = useConnectedForm({
60
+ defaultValues: {
61
+ thisField: true,
62
+ thatField: 'zero',
63
+ anotherField: 'state your name.',
64
+ },
65
+ validationRules: {
66
+ thisField: { required: 'you need to check this.' },
67
+ thatField: {
68
+ pattern: {
69
+ value: /^(?:(?!zero).)*$/,
70
+ message: 'literally anything but zero',
71
+ },
72
+ },
73
+ },
74
+ });
75
+
76
+ return (
77
+ <ConnectedForm
78
+ onSubmit={({ thisField }) => console.log(thisField)}
79
+ resetOnSubmit
80
+ {...connectedFormProps}
81
+ >
82
+ <SubmitButton>submit this form.</SubmitButton>
83
+ <ConnectedFormGroup
84
+ name="thisField"
85
+ label="cool checkbox bruh"
86
+ field={{
87
+ component: ConnectedCheckbox,
88
+ label: 'check it ouuut',
89
+ }}
90
+ />
91
+ <ConnectedFormGroup
92
+ name="thatField"
93
+ label="cool select dude"
94
+ field={{
95
+ component: ConnectedSelect,
96
+ options: ['one', 'two', 'zero'],
97
+ }}
98
+ />
99
+ <ConnectedFormGroup
100
+ name="anotherField"
101
+ label="cool input"
102
+ field={{
103
+ component: ConnectedInput,
104
+ icon: TerminalIcon,
105
+ }}
106
+ />
107
+ <FormRequiredText />
108
+ </ConnectedForm>
109
+ );
110
+ };
111
+ ```
46
112
 
47
113
  ## Variants
48
114
 
package/src/lib/Organisms/ConnectedForm/ConnectedForm/example.ts DELETED
@@ -1,67 +0,0 @@
1
- export const example = `import {
2
- ConnectedCheckbox,
3
- ConnectedInput,
4
- ConnectedSelect,
5
- useConnectedForm,
6
- } from '@codecademy/gamut';
7
-
8
- import { TerminalIcon } from '@codecademy/gamut-icons';
9
-
10
- export const GoodForm = () => {
11
- const {
12
- ConnectedFormGroup,
13
- ConnectedForm,
14
- connectedFormProps,
15
- FormRequiredText,
16
- } = useConnectedForm({
17
- defaultValues: {
18
- thisField: true,
19
- thatField: 'zero',
20
- anotherField: 'state your name.',
21
- },
22
- validationRules: {
23
- thisField: { required: 'you need to check this.' },
24
- thatField: {
25
- pattern: {
26
- value: /^(?:(?!zero).)*$/,
27
- message: 'literally anything but zero',
28
- },
29
- },
30
- },
31
- });
32
-
33
- return (
34
- <ConnectedForm
35
- onSubmit={({ thisField }) => console.log(thisField)}
36
- resetOnSubmit
37
- {...connectedFormProps}
38
- >
39
- <SubmitButton>submit this form.</SubmitButton>
40
- <ConnectedFormGroup
41
- name="thisField"
42
- label="cool checkbox bruh"
43
- field={{
44
- component: ConnectedCheckbox,
45
- label: 'check it ouuut',
46
- }}
47
- />
48
- <ConnectedFormGroup
49
- name="thatField"
50
- label="cool select dude"
51
- field={{
52
- component: ConnectedSelect,
53
- options: ['one', 'two', 'zero'],
54
- }}
55
- />
56
- <ConnectedFormGroup
57
- name="anotherField"
58
- label="cool input"
59
- field={{
60
- component: ConnectedInput,
61
- icon: TerminalIcon,
62
- }}
63
- />
64
- <FormRequiredText />
65
- </ConnectedForm>
66
- );
67
- };`;