Skip to content

Commit

Permalink
feat: Storybook 8 Feature Branch
Browse files Browse the repository at this point in the history
  • Loading branch information
dreamwasp authored Dec 13, 2024
1 parent 0621dd5 commit 300ef37
Show file tree
Hide file tree
Showing 459 changed files with 21,626 additions and 33,607 deletions.
8 changes: 4 additions & 4 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ orbs:
references:
default_env: &default_env
docker:
- image: cimg/node:16.17.0
- image: cimg/node:18.18.2
working_directory: ~/repo
environment:
IGNORE_COMMIT_MESSAGE: 'chore(release): publish'
Expand Down Expand Up @@ -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
Expand All @@ -190,14 +190,14 @@ jobs:
- *build_all_packages
- run:
name: build storybook
command: yarn build-storybook
command: yarn nx run styleguide:build-storybook
- *save_nx_cache
- *save_webpack_cache
- run:
name: deploy
command: |
DEPLOY_MESSAGE="User: ${CIRCLE_USERNAME} Project: ${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME} Pull Request: ${CIRCLE_PULL_REQUEST}"
npx netlify-cli@2.37.0 deploy --message="${DEPLOY_MESSAGE}" --dir=dist/docs --json > .deploy-output
npx netlify-cli@17.37.1 deploy --message "${DEPLOY_MESSAGE}" --dir dist/storybook/styleguide --json --filter @codecademy/styleguide > .deploy-output
- setup_remote_docker
- run: docker pull cloudposse/github-commenter:0.5.0-58
- run:
Expand Down
5 changes: 5 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,11 @@ module.exports = {
'@typescript-eslint/no-unsafe-return': 'off',
'@typescript-eslint/restrict-plus-operands': 'off',
'@typescript-eslint/restrict-template-expressions': 'off',
'import/no-cycle': 'off',
'react/no-unknown-property': [
'error',
{ ignore: ['mask-type', 'xmlns-x', 'xmlns-i', 'xmlns-graph'] },
],
},
},
{
Expand Down
11 changes: 10 additions & 1 deletion .github/workflows/push.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,23 @@ jobs:
steps:
- uses: Codecademy/[email protected]
with:
node-version: 16
node-version: 20
command: format:verify

lint:
strategy:
fail-fast: false
matrix:
command: ['lint', 'verify']
runs-on: ubuntu-latest
steps:
- uses: Codecademy/[email protected]
with:
node-version: 20
command: build
- run: yarn ${{ matrix.command }}


runs-on: ubuntu-latest
steps:
- uses: Codecademy/[email protected]
Expand Down
6 changes: 3 additions & 3 deletions .lintstagedrc.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ export default {
commands.push(`yarn syncpack format`);
}

// if (micromatch.some(allChanges, 'yarn.lock')) {
// commands.push(`npx yarn-deduplicate`);
// }
if (micromatch.some(allChanges, 'yarn.lock')) {
commands.push(`npx yarn-deduplicate`);
}

const eslintExtensions = `{mdx,ts,tsx,js,jsx,json}`;
const eslintFiles = micromatch(
Expand Down
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
v16.17.0
v18.18.2
4 changes: 3 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,6 @@ node_modules
packages/gamut-icons/src/icons
packages/gamut-styles/**/*.d.ts
packages/styleguide/stories/Core/Atoms/Markdown/*.md
.nx

/.nx/cache
/.nx/workspace-data
171 changes: 111 additions & 60 deletions .vscode/stories.code-snippets
Original file line number Diff line number Diff line change
@@ -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."
}
}
1 change: 0 additions & 1 deletion .yarnclean
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ tests
powered-test

# asset directories
docs
website
images

Expand Down
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Gamut

// Storybook 8 branch

_The component library & design system for Codecademy._

---
Expand Down
1 change: 0 additions & 1 deletion dist/static/CNAME

This file was deleted.

2 changes: 0 additions & 2 deletions dist/static/robots.txt

This file was deleted.

23 changes: 0 additions & 23 deletions dist/static/storybook/index.html

This file was deleted.

20 changes: 14 additions & 6 deletions nx.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,6 @@
}
},
"extends": "nx/presets/npm.json",
"affected": {
"defaultBase": "main"
},
"workspaceLayout": {
"appsDir": "packages",
"libsDir": "packages"
Expand All @@ -34,15 +31,21 @@
"default",
"!{projectRoot}/**/*.(test|spec).ts{,.snap}",
"!{projectRoot}/**/__tests__/**/*",
"!{projectRoot}/**/__fixtures__/**/*"
"!{projectRoot}/**/__fixtures__/**/*",
"!{projectRoot}/**/*.stories.@(js|jsx|ts|tsx|mdx)",
"!{projectRoot}/.storybook/**/*",
"!{projectRoot}/tsconfig.storybook.json"
]
},
"targetDefaults": {
"build": {
"dependsOn": ["^build"],
"inputs": ["production", "^production", "babelConfig", "ci"]
},
"test": {
"verify": {
"cache": true
},
"@nx/jest:jest": {
"dependsOn": ["^build"],
"inputs": [
"default",
Expand All @@ -64,5 +67,10 @@
"linter": "eslint"
}
},
"$schema": "./node_modules/nx/schemas/nx-schema.json"
"$schema": "./node_modules/nx/schemas/nx-schema.json",
"useDaemonProcess": false,
"nxCloudAccessToken": "ZmVjZWYxNzctYTdmZC00ODYzLTg4MzEtZTE1YTVmZDdkZmY1fHJlYWQ=",
"parallel": 3,
"useInferencePlugins": false,
"defaultBase": "main"
}
Loading

0 comments on commit 300ef37

Please sign in to comment.