Skip to content

Commit 2cd347b

Browse files
ChristopherChudzickiChristopherChudzicki
committed
feat: Add basic setup, Button, ThemeProvider
This adds basic repository setup and migrates ThemeProvider, Button, and a few other simple components from `mit-learn/ol-components`
1 parent b7a4071 commit 2cd347b

38 files changed

+17836
-0
lines changed

‎.eslintrc.js

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
module.exports = {
2+
extends: [
3+
"eslint-config-mitodl",
4+
"eslint-config-mitodl/jest",
5+
"plugin:styled-components-a11y/recommended",
6+
"plugin:import/typescript",
7+
"plugin:mdx/recommended",
8+
"prettier",
9+
],
10+
plugins: ["testing-library", "import", "styled-components-a11y"],
11+
ignorePatterns: ["**/build/**"],
12+
settings: {
13+
"jsx-a11y": {
14+
components: {
15+
"ListCard.Image": "img",
16+
"Card.Image": "img",
17+
Button: "button",
18+
ButtonLink: "a",
19+
ActionButton: "button",
20+
ActionButtonLink: "a",
21+
},
22+
},
23+
},
24+
rules: {
25+
...restrictedImports(),
26+
// This rule is disabled in the default a11y config, but unclear why.
27+
// It does catch useful errors, e.g., buttons with no text or label.
28+
// If it proves to be flaky, we can find other ways to check for this.
29+
// We need both rules below. One for normal elements, one for styled
30+
"jsx-a11y/control-has-associated-label": ["error"],
31+
"styled-components-a11y/control-has-associated-label": ["error"],
32+
"@typescript-eslint/triple-slash-reference": [
33+
"error",
34+
{
35+
path: "never",
36+
types: "prefer-import",
37+
lib: "never",
38+
},
39+
],
40+
"import/no-extraneous-dependencies": [
41+
"error",
42+
{
43+
devDependencies: [
44+
"**/*.test.ts",
45+
"**/*.test.tsx",
46+
"**/src/setupJest.ts",
47+
"**/jest-shared-setup.ts",
48+
"**/test-utils/**",
49+
"**/test-utils/**",
50+
"**/webpack.config.js",
51+
"**/webpack.exports.js",
52+
"**/postcss.config.js",
53+
"**/*.stories.ts",
54+
"**/*.stories.tsx",
55+
"**/*.mdx",
56+
".storybook/**",
57+
],
58+
},
59+
],
60+
"import/no-duplicates": "error",
61+
quotes: ["error", "double", { avoidEscape: true }],
62+
"no-restricted-syntax": [
63+
"error",
64+
/**
65+
* See https://eslint.org/docs/latest/rules/no-restricted-syntax
66+
*
67+
* The selectors use "ES Query", a css-like syntax for AST querying. A
68+
* useful tool is https://estools.github.io/esquery/
69+
*/
70+
{
71+
selector:
72+
"Property[key.name=fontWeight][value.raw=/\\d+/], TemplateElement[value.raw=/font-weight: \\d+/]",
73+
message:
74+
"Do not specify `fontWeight` manually. Prefer spreading `theme.typography.subtitle1` or similar. If you MUST use a fontWeight, refer to `fontWeights` theme object.",
75+
},
76+
{
77+
selector:
78+
"Property[key.name=fontFamily][value.raw=/Neue Haas/], TemplateElement[value.raw=/Neue Haas/]",
79+
message:
80+
"Do not specify `fontFamily` manually. Prefer spreading `theme.typography.subtitle1` or similar. If using neue-haas-grotesk-text, this is ThemeProvider's default fontFamily.",
81+
},
82+
],
83+
},
84+
overrides: [
85+
{
86+
files: ["./**/*.test.{ts,tsx}"],
87+
plugins: ["testing-library"],
88+
extends: ["plugin:testing-library/react"],
89+
rules: {
90+
"testing-library/no-node-access": "off",
91+
},
92+
},
93+
],
94+
}
95+
96+
function restrictedImports({ paths = [], patterns = [] } = {}) {
97+
/**
98+
* With the `no-restricted-imports` rule (and its typescript counterpart),
99+
* it's difficult to restrict imports but allow a few exceptions.
100+
*
101+
* For example:
102+
* - forbid importing `@mui/material/*`, EXCEPT within `ol-components`.
103+
*
104+
* It is possible to do this using overrides.
105+
*
106+
* This function exists to make it easier to share config between overrides.
107+
*
108+
* See also:
109+
* - https://github.com/eslint/eslint/discussions/17047 no-restricted-imports: allow some specific imports in some specific directories
110+
* - https://github.com/eslint/eslint/discussions/15011 Can a rule be specified multiple times without overriding itself?
111+
*
112+
* This may be easier if we swtich to ESLint's new "flat config" system.
113+
*/
114+
return {
115+
"@typescript-eslint/no-restricted-imports": [
116+
"error",
117+
{
118+
paths: [
119+
/**
120+
* No direct imports from large "barrel files". They make Jest slow.
121+
*
122+
* For more, see:
123+
* - https://github.com/jestjs/jest/issues/11234
124+
* - https://github.com/faker-js/faker/issues/1114#issuecomment-1169532948
125+
*/
126+
{
127+
name: "@faker-js/faker",
128+
message: "Please use @faker-js/faker/locale/en instead.",
129+
allowTypeImports: true,
130+
},
131+
{
132+
name: "@mui/material",
133+
message: "Please use @mui/material/<COMPONENT_NAME> instead.",
134+
allowTypeImports: true,
135+
},
136+
...paths,
137+
],
138+
patterns: [...patterns],
139+
},
140+
],
141+
}
142+
}

‎.github/workflows/ci.yml

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
name: CI
2+
on: [push]
3+
jobs:
4+
javascript-tests:
5+
runs-on: ubuntu-latest
6+
steps:
7+
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
8+
- uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
9+
with:
10+
node-version: "^22"
11+
cache: yarn
12+
cache-dependency-path: yarn.lock
13+
14+
- name: Install dependencies
15+
run: yarn install --immutable
16+
17+
- name: Format
18+
run: yarn run fmt-check
19+
20+
- name: Lints
21+
run: yarn run lint-check
22+
23+
- name: Typecheck
24+
run: yarn typecheck
25+
26+
- name: Tests
27+
run: yarn test
28+
env:
29+
CODECOV: true
30+
NODE_ENV: test
31+
32+
build-storybook:
33+
runs-on: ubuntu-latest
34+
steps:
35+
- name: Checkout
36+
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
37+
38+
- uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
39+
with:
40+
node-version: "^22"
41+
cache: yarn
42+
cache-dependency-path: yarn.lock
43+
44+
- name: Install dependencies
45+
run: yarn install
46+
47+
- name: Build Storybook
48+
run: yarn build-storybook

‎.github/workflows/publish-pages.yml

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
name: Publish Storybook
2+
3+
on:
4+
# Runs on pushes targeting the default branch
5+
push:
6+
branches: [main, cc/initial]
7+
8+
# Allows you to run this workflow manually from the Actions tab
9+
workflow_dispatch:
10+
11+
jobs:
12+
build:
13+
runs-on: ubuntu-latest
14+
steps:
15+
- name: Checkout
16+
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
17+
18+
- uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
19+
with:
20+
node-version: "^20"
21+
cache: yarn
22+
cache-dependency-path: yarn.lock
23+
24+
- name: Install dependencies
25+
run: yarn install
26+
27+
- name: Build Storybook
28+
run: yarn build-storybook
29+
30+
- name: Upload artifact
31+
uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3
32+
with:
33+
path: ./storybook-static
34+
35+
deploy:
36+
needs: build
37+
38+
permissions:
39+
pages: write # to deploy to Pages
40+
id-token: write # to verify the deployment originates from an appropriate source
41+
42+
environment:
43+
name: github-pages
44+
url: ${{ steps.deployment.outputs.page_url }}
45+
46+
runs-on: ubuntu-latest
47+
steps:
48+
- name: Deploy to GitHub Pages
49+
id: deployment
50+
uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4

‎.gitignore

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
node_modules
2+
.yarn/*
3+
!.yarn/releases
4+
5+
# Typescript
6+
tsconfig.tsbuildinfo
7+
8+
# VS-Code
9+
.vscode
10+
coverage
11+
12+
# Storybook
13+
storybook-static/
14+
15+
/**/.yarn/cache
16+
.swc
17+
dist

‎.pre-commit-config.yaml

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
# See https://pre-commit.com for more information
3+
# See https://pre-commit.com/hooks.html for more hooks
4+
ci:
5+
skip:
6+
# Because these are local hooks it seems like they won't easily run in pre-commit CI
7+
- eslint
8+
- prettier
9+
repos:
10+
- repo: https://github.com/pre-commit/pre-commit-hooks
11+
rev: v5.0.0
12+
hooks:
13+
- id: trailing-whitespace
14+
- id: end-of-file-fixer
15+
exclude: ".hbs$"
16+
- id: check-yaml
17+
- id: check-added-large-files
18+
exclude: "yarn.lock|.yarn/releases/.*|frontends/.yarn/releases/.*"
19+
- id: check-merge-conflict
20+
- id: check-toml
21+
- id: debug-statements
22+
- repo: local
23+
hooks:
24+
- id: prettier
25+
name: prettier
26+
entry: yarn fmt-fix
27+
language: node
28+
types_or:
29+
[
30+
javascript,
31+
jsx,
32+
ts,
33+
tsx,
34+
json,
35+
scss,
36+
sass,
37+
css,
38+
yaml,
39+
markdown,
40+
html,
41+
]
42+
- repo: https://github.com/scop/pre-commit-shfmt
43+
rev: v3.10.0-1
44+
hooks:
45+
- id: shfmt
46+
- repo: https://github.com/adrienverge/yamllint.git
47+
rev: v1.35.1
48+
hooks:
49+
- id: yamllint
50+
args: [--format, parsable, -d, relaxed]
51+
- repo: https://github.com/Yelp/detect-secrets
52+
rev: v1.5.0
53+
hooks:
54+
- id: detect-secrets
55+
args:
56+
- --baseline
57+
- .secrets.baseline
58+
- --exclude-files
59+
- .yarn/
60+
- --exclude-files
61+
- cassettes/
62+
- --exclude-files
63+
- test_json/
64+
- --exclude-files
65+
- ".*_test.py"
66+
- --exclude-files
67+
- "test_.*.py"
68+
- --exclude-files
69+
- poetry.lock
70+
- --exclude-files
71+
- yarn.lock
72+
- --exclude-files
73+
- ".*/generated/"
74+
additional_dependencies: ["gibberish-detector"]
75+
- repo: local
76+
hooks:
77+
- id: eslint
78+
name: eslint
79+
description: "Lint JS/TS files and apply automatic fixes"
80+
entry: npx eslint --fix
81+
language: node
82+
types_or: [javascript, jsx, ts, tsx]
83+
args: []
84+
exclude: "(node_modules/|.yarn/)"
85+
require_serial: false
86+
- repo: https://github.com/shellcheck-py/shellcheck-py
87+
rev: v0.10.0.1
88+
hooks:
89+
- id: shellcheck
90+
args: ["--severity=warning"]

‎.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.yarn/

‎.prettierrc.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"$schema": "http://json.schemastore.org/prettierrc",
3+
"semi": false
4+
}

0 commit comments

Comments
 (0)