Skip to content

Commit 3a619de

Browse files
filipesilvafilipesilva
authored
Merge pull request #1648 from filipesilva/storybook-stuart-all
2 parents f1e2749 + f0ec1df commit 3a619de

File tree

141 files changed

+10567
-388
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

141 files changed

+10567
-388
lines changed

‎.babelrc

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"presets": [
3+
"@babel/env",
4+
// Compile tsx files.
5+
"@babel/preset-typescript",
6+
["@babel/preset-react", {"runtime": "automatic"}]
7+
],
8+
"plugins": [
9+
// Allow using @/ for root relative imports.
10+
["module-resolver", {"alias": {"@": "./src/js/components"}}],
11+
// Our build doesn't need the {"loose": true} option, but if not included it wil
12+
// show a lot of warnings on the storybook build.
13+
["@babel/proposal-class-properties", {"loose": true}],
14+
["@babel/proposal-object-rest-spread", {"loose": true}],
15+
// Used only by storybook, but must be included to avoid build warnings/errors.
16+
["@babel/plugin-proposal-private-methods", {"loose": true}],
17+
["@babel/plugin-proposal-private-property-in-object", {"loose": true}]
18+
]
19+
}

‎.gitignore

+2-3
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,5 @@
3232
# electron build
3333
dist
3434

35-
# design system ts output
36-
/src/js/components/**/*.js
37-
/storybook-static
35+
# design system static build
36+
/storybook-static

‎.storybook/main.js

+17-6
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
1+
const path = require('path');
2+
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
3+
14
module.exports = {
5+
features: {
6+
postcss: false,
7+
},
28
"stories": [
39
"../src/js/**/*.stories.mdx",
410
"../src/js/**/*.stories.tsx"
511
],
612
"addons": [
713
"@storybook/addon-links",
8-
"@storybook/addon-essentials"
14+
"@storybook/addon-essentials",
15+
"@storybook/addon-a11y",
16+
'storybook-dark-mode',
17+
'@geometricpanda/storybook-addon-badges'
918
],
1019
webpackFinal: async (config, { configType }) => {
11-
// Always prefer .tsx files when resolving modules.
12-
// We output the .js files from tsc directly on the same folder, but want
13-
// storybook to process the original .tsx for the additional TS tooling.
14-
config.resolve.extensions.unshift(".tsx");
15-
20+
// Resolve the root path defined in tsconfig.json
21+
config.resolve.plugins.push(
22+
new TsconfigPathsPlugin({
23+
configFile: path.resolve(__dirname, '../tsconfig.json'),
24+
})
25+
);
26+
1627
// Return the altered config.
1728
return config;
1829
}

‎.storybook/preview.js

+59-130
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,75 @@
11
import React from 'react';
2-
import styled from 'styled-components';
2+
import { themes } from '@storybook/theming';
3+
4+
import { classnames } from '../src/js/components/utils/classnames';
5+
import { GlobalStyles } from '../src/js/components/utils/style/style';
6+
import { badges, Storybook } from '../src/js/components/utils/storybook';
37

48
export const parameters = {
59
actions: { argTypesRegex: "^on[A-Z].*" },
10+
layout: 'fullscreen',
611
controls: {
712
matchers: {
813
color: /(background|color)$/i,
914
date: /Date$/,
1015
},
1116
},
17+
badgesConfig: {
18+
...badges
19+
},
20+
darkMode: {
21+
// Override the default dark theme
22+
dark: {
23+
...themes.dark,
24+
appBg: '#151515',
25+
appContentBg: '#1A1A1A',
26+
},
27+
// Override the default light theme
28+
light: {
29+
...themes.normal,
30+
appBg: '#EFEDEB',
31+
appContentBg: "#F6F6F6"
32+
}
33+
}
1234
}
1335

14-
const cssVars = `
15-
:root {
16-
--background-color---opacity-high: hsla(0, 0%, 10.196078431372548%, 0.75);
17-
--background-color---opacity-higher: hsla(0, 0%, 10.196078431372548%, 0.85);
18-
--background-color---opacity-low: hsla(0, 0%, 10.196078431372548%, 0.25);
19-
--background-color---opacity-lower: hsla(0, 0%, 10.196078431372548%, 0.1);
20-
--background-color---opacity-med: hsla(0, 0%, 10.196078431372548%, 0.5);
21-
--background-color: #1A1A1A;
22-
--background-minus-1---opacity-high: hsla(0, 0%, 8.235294117647058%, 0.75);
23-
--background-minus-1---opacity-higher: hsla(0, 0%, 8.235294117647058%, 0.85);
24-
--background-minus-1---opacity-low: hsla(0, 0%, 8.235294117647058%, 0.25);
25-
--background-minus-1---opacity-lower: hsla(0, 0%, 8.235294117647058%, 0.1);
26-
--background-minus-1---opacity-med: hsla(0, 0%, 8.235294117647058%, 0.5);
27-
--background-minus-1: #151515;
28-
--background-minus-2---opacity-high: hsla(0, 0%, 6.6667%, 0.75);
29-
--background-minus-2---opacity-higher: hsla(0, 0%, 6.6667%, 0.85);
30-
--background-minus-2---opacity-low: hsla(0, 0%, 6.6667%, 0.25);
31-
--background-minus-2---opacity-lower: hsla(0, 0%, 6.6667%, 0.1);
32-
--background-minus-2---opacity-med: hsla(0, 0%, 6.6667%, 0.5);
33-
--background-minus-2: #111;
34-
--background-plus-1---opacity-high: hsla(0, 0%, 13.333%, 0.75);
35-
--background-plus-1---opacity-higher: hsla(0, 0%, 13.333%, 0.85);
36-
--background-plus-1---opacity-low: hsla(0, 0%, 13.333%, 0.25);
37-
--background-plus-1---opacity-lower: hsla(0, 0%, 13.333%, 0.1);
38-
--background-plus-1---opacity-med: hsla(0, 0%, 13.333%, 0.5);
39-
--background-plus-1: #222;
40-
--background-plus-2---opacity-high: hsla(0, 0%, 20%, 0.75);
41-
--background-plus-2---opacity-higher: hsla(0, 0%, 20%, 0.85);
42-
--background-plus-2---opacity-low: hsla(0, 0%, 20%, 0.25);
43-
--background-plus-2---opacity-lower: hsla(0, 0%, 20%, 0.1);
44-
--background-plus-2---opacity-med: hsla(0, 0%, 20%, 0.5);
45-
--background-plus-2: #333;
46-
--body-text-color---opacity-high: hsla(0, 0%, 66.666%, 0.75);
47-
--body-text-color---opacity-higher: hsla(0, 0%, 66.666%, 0.85);
48-
--body-text-color---opacity-low: hsla(0, 0%, 66.666%, 0.25);
49-
--body-text-color---opacity-lower: hsla(0, 0%, 66.666%, 0.1);
50-
--body-text-color---opacity-med: hsla(0, 0%, 66.666%, 0.5);
51-
--body-text-color: #AAA;
52-
--border-color---opacity-high: hsla(0, 0%, 0%, 0.75);
53-
--border-color---opacity-higher: hsla(0, 0%, 0%, 0.85);
54-
--border-color---opacity-low: hsla(0, 0%, 0%, 0.25);
55-
--border-color---opacity-lower: hsla(0, 0%, 0%, 0.1);
56-
--border-color---opacity-med: hsla(0, 0%, 0%, 0.5);
57-
--border-color: hsla(32, 81%, 90%, 0.08);
58-
--confirmation-color---opacity-high: hsla(133.43283582089555, 73.62637362637363%, 35.68627450980392%, 0.75);
59-
--confirmation-color---opacity-higher: hsla(133.43283582089555, 73.62637362637363%, 35.68627450980392%, 0.85);
60-
--confirmation-color---opacity-low: hsla(133.43283582089555, 73.62637362637363%, 35.68627450980392%, 0.25);
61-
--confirmation-color---opacity-lower: hsla(133.43283582089555, 73.62637362637363%, 35.68627450980392%, 0.1);
62-
--confirmation-color---opacity-med: hsla(133.43283582089555, 73.62637362637363%, 35.68627450980392%, 0.5);
63-
--confirmation-color: #189E36;
64-
--error-color---opacity-high: hsla(4.838709677419331, 97.89473684210527%, 62.745098039215684%, 0.75);
65-
--error-color---opacity-higher: hsla(4.838709677419331, 97.89473684210527%, 62.745098039215684%, 0.85);
66-
--error-color---opacity-low: hsla(4.838709677419331, 97.89473684210527%, 62.745098039215684%, 0.25);
67-
--error-color---opacity-lower: hsla(4.838709677419331, 97.89473684210527%, 62.745098039215684%, 0.1);
68-
--error-color---opacity-med: hsla(4.838709677419331, 97.89473684210527%, 62.745098039215684%, 0.5);
69-
--error-color: #fd5243;
70-
--graph-control-bg---opacity-high: hsla(0, 0%, 15.294117647058824%, 0.75);
71-
--graph-control-bg---opacity-higher: hsla(0, 0%, 15.294117647058824%, 0.85);
72-
--graph-control-bg---opacity-low: hsla(0, 0%, 15.294117647058824%, 0.25);
73-
--graph-control-bg---opacity-lower: hsla(0, 0%, 15.294117647058824%, 0.1);
74-
--graph-control-bg---opacity-med: hsla(0, 0%, 15.294117647058824%, 0.5);
75-
--graph-control-bg: #272727;
76-
--graph-control-color---opacity-high: hsla(0, 0%, 0%, 0.75);
77-
--graph-control-color---opacity-higher: hsla(0, 0%, 0%, 0.85);
78-
--graph-control-color---opacity-low: hsla(0, 0%, 0%, 0.25);
79-
--graph-control-color---opacity-lower: hsla(0, 0%, 0%, 0.1);
80-
--graph-control-color---opacity-med: hsla(0, 0%, 0%, 0.5);
81-
--graph-control-color: white;
82-
--graph-link-normal---opacity-high: hsla(0, 0%, 19.607843137254903%, 0.75);
83-
--graph-link-normal---opacity-higher: hsla(0, 0%, 19.607843137254903%, 0.85);
84-
--graph-link-normal---opacity-low: hsla(0, 0%, 19.607843137254903%, 0.25);
85-
--graph-link-normal---opacity-lower: hsla(0, 0%, 19.607843137254903%, 0.1);
86-
--graph-link-normal---opacity-med: hsla(0, 0%, 19.607843137254903%, 0.5);
87-
--graph-link-normal: #323232;
88-
--graph-node-hlt---opacity-high: hsla(35.92105263157896, 94.99999999999999%, 68.62745098039215%, 0.75);
89-
--graph-node-hlt---opacity-higher: hsla(35.92105263157896, 94.99999999999999%, 68.62745098039215%, 0.85);
90-
--graph-node-hlt---opacity-low: hsla(35.92105263157896, 94.99999999999999%, 68.62745098039215%, 0.25);
91-
--graph-node-hlt---opacity-lower: hsla(35.92105263157896, 94.99999999999999%, 68.62745098039215%, 0.1);
92-
--graph-node-hlt---opacity-med: hsla(35.92105263157896, 94.99999999999999%, 68.62745098039215%, 0.5);
93-
--graph-node-hlt: #FBBE63;
94-
--graph-node-normal---opacity-high: hsla(0, 0%, 56.470588235294116%, 0.75);
95-
--graph-node-normal---opacity-higher: hsla(0, 0%, 56.470588235294116%, 0.85);
96-
--graph-node-normal---opacity-low: hsla(0, 0%, 56.470588235294116%, 0.25);
97-
--graph-node-normal---opacity-lower: hsla(0, 0%, 56.470588235294116%, 0.1);
98-
--graph-node-normal---opacity-med: hsla(0, 0%, 56.470588235294116%, 0.5);
99-
--graph-node-normal: #909090;
100-
--header-text-color---opacity-high: hsla(0, 0%, 72.94117647058823%, 0.75);
101-
--header-text-color---opacity-higher: hsla(0, 0%, 72.94117647058823%, 0.85);
102-
--header-text-color---opacity-low: hsla(0, 0%, 72.94117647058823%, 0.25);
103-
--header-text-color---opacity-lower: hsla(0, 0%, 72.94117647058823%, 0.1);
104-
--header-text-color---opacity-med: hsla(0, 0%, 72.94117647058823%, 0.5);
105-
--header-text-color: #BABABA;
106-
--highlight-color---opacity-high: hsla(35.92105263157896, 94.99999999999999%, 68.62745098039215%, 0.75);
107-
--highlight-color---opacity-higher: hsla(35.92105263157896, 94.99999999999999%, 68.62745098039215%, 0.85);
108-
--highlight-color---opacity-low: hsla(35.92105263157896, 94.99999999999999%, 68.62745098039215%, 0.25);
109-
--highlight-color---opacity-lower: hsla(35.92105263157896, 94.99999999999999%, 68.62745098039215%, 0.1);
110-
--highlight-color---opacity-med: hsla(35.92105263157896, 94.99999999999999%, 68.62745098039215%, 0.5);
111-
--highlight-color: #FBBE63;
112-
--link-color---opacity-high: hsla(203.8775510204082, 80.32786885245902%, 52.156862745098046%, 0.75);
113-
--link-color---opacity-higher: hsla(203.8775510204082, 80.32786885245902%, 52.156862745098046%, 0.85);
114-
--link-color---opacity-low: hsla(203.8775510204082, 80.32786885245902%, 52.156862745098046%, 0.25);
115-
--link-color---opacity-lower: hsla(203.8775510204082, 80.32786885245902%, 52.156862745098046%, 0.1);
116-
--link-color---opacity-med: hsla(203.8775510204082, 80.32786885245902%, 52.156862745098046%, 0.5);
117-
--link-color: #2399E7;
118-
--text-highlight-color---opacity-high: hsla(35.92105263157896, 94.99999999999999%, 68.62745098039215%, 0.75);
119-
--text-highlight-color---opacity-higher: hsla(35.92105263157896, 94.99999999999999%, 68.62745098039215%, 0.85);
120-
--text-highlight-color---opacity-low: hsla(35.92105263157896, 94.99999999999999%, 68.62745098039215%, 0.25);
121-
--text-highlight-color---opacity-lower: hsla(35.92105263157896, 94.99999999999999%, 68.62745098039215%, 0.1);
122-
--text-highlight-color---opacity-med: hsla(35.92105263157896, 94.99999999999999%, 68.62745098039215%, 0.5);
123-
--text-highlight-color: #FBBE63;
124-
--warning-color---opacity-high: hsla(8.571428571428555, 74.11764705882354%, 50%, 0.75);
125-
--warning-color---opacity-higher: hsla(8.571428571428555, 74.11764705882354%, 50%, 0.85);
126-
--warning-color---opacity-low: hsla(8.571428571428555, 74.11764705882354%, 50%, 0.25);
127-
--warning-color---opacity-lower: hsla(8.571428571428555, 74.11764705882354%, 50%, 0.1);
128-
--warning-color---opacity-med: hsla(8.571428571428555, 74.11764705882354%, 50%, 0.5);
129-
--warning-color: #DE3C21;
130-
}
131-
132-
.docs-story {
133-
background: var(--background-color);
134-
}`
36+
export const globalTypes = {
37+
theme: {
38+
name: 'Story Theme',
39+
description: 'Global theme for components',
40+
defaultValue: 'light',
41+
toolbar: {
42+
// Array of plain string values or MenuItem shape (see below)
43+
items: ['light', 'dark'],
44+
// Property that specifies if the name of the item will be displayed
45+
showName: true,
46+
},
47+
},
48+
};
13549

136-
const StoryWrapper = styled.div`
137-
`;
13850

13951
export const decorators = [
140-
(Story) => (
141-
<StoryWrapper>
142-
<style>{cssVars}</style>
143-
<Story />
144-
</StoryWrapper>
145-
),
52+
(Story, context) => {
53+
54+
React.useEffect(() => {
55+
const theme = context.globals.theme === 'dark' ? 'is-theme-dark' : 'is-theme-light';
56+
document.body.classList.add(theme);
57+
return () => document.body.classList.remove(theme);
58+
}, [context])
59+
60+
console.log(context);
61+
return (
62+
<>
63+
<GlobalStyles />
64+
<Storybook.App
65+
id="app"
66+
className={classnames(
67+
context.globals.hostType === 'electron' ? 'is-electron' : 'is-browser',
68+
context.viewMode === 'docs' ? 'is-storybook-docs' : 'is-storybook-canvas'
69+
)}>
70+
<Story />
71+
</Storybook.App>
72+
</>
73+
)
74+
},
14675
];

‎package.json

+27-6
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
"update": "standard-version -p --releaseCommitMessageFormat v{{currentTag}}",
1313
"dev": "yarn components && concurrently \"yarn components:watch\" \"yarn client:watch\"",
1414
"client:watch": "shadow-cljs watch main renderer app",
15-
"components": "yarn tsc",
16-
"components:watch": "yarn tsc --watch",
15+
"components": "babel ./src/js/components/ --extensions \".ts,.tsx\" --out-dir ./dist/js/components/",
16+
"components:watch": "yarn components --watch",
1717
"compile": "yarn components && shadow-cljs compile main renderer app",
1818
"prod": "yarn components && shadow-cljs release main renderer app",
1919
"clean": "rm -rf resources/public/**/*.js target .shadow-cljs ./src/stories/**/*.js",
@@ -59,11 +59,15 @@
5959
}
6060
},
6161
"dependencies": {
62+
"@geometricpanda/storybook-addon-badges": "^0.0.4",
6263
"@js-joda/core": "1.12.0",
6364
"@js-joda/locale_en-us": "3.1.1",
6465
"@js-joda/timezone": "2.2.0",
6566
"@material-ui/core": "^4.10.1",
6667
"@material-ui/icons": "^4.9.1",
68+
"@react-aria/checkbox": "^3.2.3",
69+
"@react-aria/meter": "^3.1.3",
70+
"@react-stately/toggle": "^3.2.3",
6771
"@sentry/integrations": "^6.1.0",
6872
"@sentry/react": "^5.27.2",
6973
"@sentry/tracing": "^5.27.2",
@@ -74,23 +78,38 @@
7478
"highlight.js": "^10.7.2",
7579
"iconoir": "^1.0.0",
7680
"katex": "^0.12.0",
81+
"luxon": "^2.0.2",
7782
"marked": "^1.0.0",
7883
"nedb": "^1.8.0",
84+
"polished": "^4.1.3",
7985
"react": "17.0.1",
8086
"react-codemirror2": "^7.2.1",
87+
"react-colorful": "^5.4.0",
88+
"react-day-picker": "^7.4.10",
8189
"react-dom": "17.0.1",
8290
"react-force-graph-2d": "^1.19.0",
8391
"react-highlight.js": "1.0.7",
92+
"react-intersection-observer": "^8.32.1",
8493
"styled-components": "^5.3.0",
8594
"tslib": "^2.3.1"
8695
},
8796
"devDependencies": {
97+
"@babel/cli": "^7.15.4",
8898
"@babel/core": "^7.15.0",
89-
"@storybook/addon-actions": "^6.3.7",
90-
"@storybook/addon-essentials": "^6.3.7",
91-
"@storybook/addon-links": "^6.3.7",
92-
"@storybook/react": "^6.3.7",
99+
"@babel/plugin-proposal-class-properties": "^7.14.5",
100+
"@babel/plugin-proposal-object-rest-spread": "^7.15.6",
101+
"@babel/plugin-proposal-private-methods": "^7.14.5",
102+
"@babel/plugin-proposal-private-property-in-object": "^7.15.4",
103+
"@babel/preset-env": "^7.15.6",
104+
"@babel/preset-react": "^7.14.5",
105+
"@babel/preset-typescript": "^7.15.0",
106+
"@storybook/addon-a11y": "^6.3.8",
107+
"@storybook/addon-actions": "^6.3.8",
108+
"@storybook/addon-essentials": "^6.3.8",
109+
"@storybook/addon-links": "^6.3.8",
110+
"@storybook/react": "^6.3.8",
93111
"babel-loader": "^8.2.2",
112+
"babel-plugin-module-resolver": "^4.1.0",
94113
"concurrently": "^6.2.1",
95114
"electron": "^12.0.4",
96115
"electron-builder": "22.10",
@@ -103,6 +122,8 @@
103122
"shadow-cljs": "^2.15.3",
104123
"source-map-support": "^0.5.19",
105124
"standard-version": "^9.3.1",
125+
"storybook-dark-mode": "^1.0.8",
126+
"tsconfig-paths-webpack-plugin": "^3.5.1",
106127
"typescript": "^4.3.5"
107128
},
108129
"standard-version": {

‎project.clj

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757

5858
:min-lein-version "2.5.3"
5959

60-
:source-paths ["src/clj" "src/cljs" "src/cljc" "src/js"]
60+
:source-paths ["src/clj" "src/cljs" "src/cljc" "src/js" "dist/js"]
6161

6262
:main athens.self-hosted.core
6363
:aot [athens.self-hosted.core]

0 commit comments

Comments
 (0)