Skip to content

Commit 84e50d8

Browse files
chriscollins3456chriscollins3456
authored
feat(ui) Add alchemy component library to FE (#12054)
1 parent a290b24 commit 84e50d8

File tree

179 files changed

+11848
-14
lines changed

Some content is hidden

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

179 files changed

+11848
-14
lines changed

‎datahub-web-react/.storybook/DocTemplate.mdx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
3+
import { ThemeProvider } from 'styled-components';
4+
import { GlobalStyle } from './styledComponents';
5+
6+
import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
7+
import { CodeBlock } from '../src/alchemy-components/.docs/mdx-components';
8+
9+
{/*
10+
* 👇 The isTemplate property is required to tell Storybook that this is a template
11+
* See https://storybook.js.org/docs/api/doc-block-meta
12+
* to learn how to use
13+
*/}
14+
15+
<Meta isTemplate />
16+
17+
<ThemeProvider theme={{}}>
18+
<GlobalStyle />
19+
20+
<Title />
21+
22+
<Subtitle />
23+
24+
<div className="docsDescription">
25+
<Description />
26+
</div>
27+
28+
<br />
29+
30+
### Import
31+
32+
<CodeBlock />
33+
34+
<br/>
35+
36+
### Customize
37+
38+
<Primary />
39+
<Controls />
40+
41+
<Stories />
42+
</ThemeProvider>

‎datahub-web-react/.storybook/main.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Docs for badges: https://storybook.js.org/addons/@geometricpanda/storybook-addon-badges
2+
3+
export default {
4+
framework: '@storybook/react-vite',
5+
features: {
6+
buildStoriesJson: true,
7+
},
8+
core: {
9+
disableTelemetry: true,
10+
},
11+
stories: [
12+
'../src/alchemy-components/.docs/*.mdx',
13+
'../src/alchemy-components/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'
14+
],
15+
addons: [
16+
'@storybook/addon-onboarding',
17+
'@storybook/addon-essentials',
18+
'@storybook/addon-interactions',
19+
'@storybook/addon-links',
20+
'@geometricpanda/storybook-addon-badges',
21+
],
22+
typescript: {
23+
reactDocgen: 'react-docgen-typescript',
24+
},
25+
}

‎datahub-web-react/.storybook/manager-head.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<style type="text/css">
2+
/* Regular */
3+
@font-face {
4+
font-family: 'Mulish';
5+
font-style: normal;
6+
font-weight: 400;
7+
src: url('../src/fonts/Mulish-Regular.ttf') format('truetype');
8+
}
9+
10+
/* Medium */
11+
@font-face {
12+
font-family: 'Mulish';
13+
font-style: normal;
14+
font-weight: 500;
15+
src: url('../src/fonts/Mulish-Medium.ttf') format('truetype');
16+
}
17+
18+
/* SemiBold */
19+
@font-face {
20+
font-family: 'Mulish';
21+
font-style: normal;
22+
font-weight: 600;
23+
src: url('../src/fonts/Mulish-SemiBold.ttf') format('truetype');
24+
}
25+
26+
/* Bold */
27+
@font-face {
28+
font-family: 'Mulish';
29+
font-style: normal;
30+
font-weight: 700;
31+
src: url('../src/fonts/Mulish-Bold.ttf') format('truetype');
32+
}
33+
</style>

‎datahub-web-react/.storybook/manager.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import './storybook-theme.css';
2+
3+
import { addons } from '@storybook/manager-api';
4+
import acrylTheme from './storybook-theme.js';
5+
6+
// Theme setup
7+
addons.setConfig({
8+
theme: acrylTheme,
9+
});
10+
11+
// Favicon
12+
const link = document.createElement('link');
13+
link.setAttribute('rel', 'shortcut icon');
14+
link.setAttribute('href', 'https://www.acryldata.io/icons/favicon.ico');
15+
document.head.appendChild(link);

‎datahub-web-react/.storybook/preview-head.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<style type="text/css">
2+
/* Regular */
3+
@font-face {
4+
font-family: 'Mulish';
5+
font-style: normal;
6+
font-weight: 400;
7+
src: url('../src/fonts/Mulish-Regular.ttf') format('truetype');
8+
}
9+
10+
/* Medium */
11+
@font-face {
12+
font-family: 'Mulish';
13+
font-style: normal;
14+
font-weight: 500;
15+
src: url('../src/fonts/Mulish-Medium.ttf') format('truetype');
16+
}
17+
18+
/* SemiBold */
19+
@font-face {
20+
font-family: 'Mulish';
21+
font-style: normal;
22+
font-weight: 600;
23+
src: url('../src/fonts/Mulish-SemiBold.ttf') format('truetype');
24+
}
25+
26+
/* Bold */
27+
@font-face {
28+
font-family: 'Mulish';
29+
font-style: normal;
30+
font-weight: 700;
31+
src: url('../src/fonts/Mulish-Bold.ttf') format('truetype');
32+
}
33+
</style>

‎datahub-web-react/.storybook/preview.js

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import './storybook-theme.css';
2+
// FYI: import of antd styles required to show components based on it correctly
3+
import 'antd/dist/antd.css';
4+
5+
import { BADGE, defaultBadgesConfig } from '@geometricpanda/storybook-addon-badges';
6+
import DocTemplate from './DocTemplate.mdx';
7+
8+
const preview = {
9+
tags: ['!dev', 'autodocs'],
10+
parameters: {
11+
previewTabs: {
12+
'storybook/docs/panel': { index: -1 },
13+
},
14+
controls: {
15+
matchers: {
16+
color: /(background|color)$/i,
17+
date: /Date$/i,
18+
},
19+
},
20+
options: {
21+
storySort: {
22+
method: 'alphabetical',
23+
order: [
24+
// Order of Docs Pages
25+
'Introduction',
26+
'Style Guide',
27+
'Design Tokens',
28+
'Style Utilities',
29+
'Icons',
30+
31+
// Order of Components
32+
'Layout',
33+
'Forms',
34+
'Data Display',
35+
'Feedback',
36+
'Typography',
37+
'Overlay',
38+
'Disclosure',
39+
'Navigation',
40+
'Media',
41+
'Other',
42+
],
43+
locales: '',
44+
},
45+
},
46+
docs: {
47+
page: DocTemplate,
48+
toc: {
49+
disable: false,
50+
},
51+
docs: {
52+
source: {
53+
format: true,
54+
},
55+
},
56+
},
57+
58+
// Reconfig the premade badges with better titles
59+
badgesConfig: {
60+
stable: {
61+
...defaultBadgesConfig[BADGE.STABLE],
62+
title: 'Stable',
63+
tooltip: 'This component is stable but may have frequent changes. Use at own discretion.',
64+
},
65+
productionReady: {
66+
...defaultBadgesConfig[BADGE.STABLE],
67+
title: 'Production Ready',
68+
tooltip: 'This component is production ready and has been tested in a production environment.',
69+
},
70+
WIP: {
71+
...defaultBadgesConfig[BADGE.BETA],
72+
title: 'WIP',
73+
tooltip: 'This component is a work in progress and may not be fully functional or tested.',
74+
},
75+
readyForDesignReview: {
76+
...defaultBadgesConfig[BADGE.NEEDS_REVISION],
77+
title: 'Ready for Design Review',
78+
tooltip: 'This component is ready for design review and feedback.',
79+
},
80+
},
81+
},
82+
};
83+
84+
export default preview;

‎datahub-web-react/.storybook/storybook-logo.svg

+1
Loading

0 commit comments

Comments
 (0)