forked from datahub-project/datahub
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui) Add alchemy component library to FE (datahub-project#12054)
- Loading branch information
1 parent
a290b24
commit 84e50d8
Showing
179 changed files
with
11,848 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { ThemeProvider } from 'styled-components'; | ||
| import { GlobalStyle } from './styledComponents'; | ||
|
|
||
| import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks'; | ||
| import { CodeBlock } from '../src/alchemy-components/.docs/mdx-components'; | ||
|
|
||
| {/* | ||
| * 👇 The isTemplate property is required to tell Storybook that this is a template | ||
| * See https://storybook.js.org/docs/api/doc-block-meta | ||
| * to learn how to use | ||
| */} | ||
|
|
||
| <Meta isTemplate /> | ||
|
|
||
| <ThemeProvider theme={{}}> | ||
| <GlobalStyle /> | ||
|
|
||
| <Title /> | ||
|
|
||
| <Subtitle /> | ||
|
|
||
| <div className="docsDescription"> | ||
| <Description /> | ||
| </div> | ||
|
|
||
| <br /> | ||
|
|
||
| ### Import | ||
|
|
||
| <CodeBlock /> | ||
|
|
||
| <br/> | ||
|
|
||
| ### Customize | ||
|
|
||
| <Primary /> | ||
| <Controls /> | ||
|
|
||
| <Stories /> | ||
| </ThemeProvider> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| // Docs for badges: https://storybook.js.org/addons/@geometricpanda/storybook-addon-badges | ||
|
|
||
| export default { | ||
| framework: '@storybook/react-vite', | ||
| features: { | ||
| buildStoriesJson: true, | ||
| }, | ||
| core: { | ||
| disableTelemetry: true, | ||
| }, | ||
| stories: [ | ||
| '../src/alchemy-components/.docs/*.mdx', | ||
| '../src/alchemy-components/components/**/*.stories.@(js|jsx|mjs|ts|tsx)' | ||
| ], | ||
| addons: [ | ||
| '@storybook/addon-onboarding', | ||
| '@storybook/addon-essentials', | ||
| '@storybook/addon-interactions', | ||
| '@storybook/addon-links', | ||
| '@geometricpanda/storybook-addon-badges', | ||
| ], | ||
| typescript: { | ||
| reactDocgen: 'react-docgen-typescript', | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <style type="text/css"> | ||
| /* Regular */ | ||
| @font-face { | ||
| font-family: 'Mulish'; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| src: url('../src/fonts/Mulish-Regular.ttf') format('truetype'); | ||
| } | ||
|
|
||
| /* Medium */ | ||
| @font-face { | ||
| font-family: 'Mulish'; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| src: url('../src/fonts/Mulish-Medium.ttf') format('truetype'); | ||
| } | ||
|
|
||
| /* SemiBold */ | ||
| @font-face { | ||
| font-family: 'Mulish'; | ||
| font-style: normal; | ||
| font-weight: 600; | ||
| src: url('../src/fonts/Mulish-SemiBold.ttf') format('truetype'); | ||
| } | ||
|
|
||
| /* Bold */ | ||
| @font-face { | ||
| font-family: 'Mulish'; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| src: url('../src/fonts/Mulish-Bold.ttf') format('truetype'); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import './storybook-theme.css'; | ||
|
|
||
| import { addons } from '@storybook/manager-api'; | ||
| import acrylTheme from './storybook-theme.js'; | ||
|
|
||
| // Theme setup | ||
| addons.setConfig({ | ||
| theme: acrylTheme, | ||
| }); | ||
|
|
||
| // Favicon | ||
| const link = document.createElement('link'); | ||
| link.setAttribute('rel', 'shortcut icon'); | ||
| link.setAttribute('href', 'https://www.acryldata.io/icons/favicon.ico'); | ||
| document.head.appendChild(link); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <style type="text/css"> | ||
| /* Regular */ | ||
| @font-face { | ||
| font-family: 'Mulish'; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| src: url('../src/fonts/Mulish-Regular.ttf') format('truetype'); | ||
| } | ||
|
|
||
| /* Medium */ | ||
| @font-face { | ||
| font-family: 'Mulish'; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| src: url('../src/fonts/Mulish-Medium.ttf') format('truetype'); | ||
| } | ||
|
|
||
| /* SemiBold */ | ||
| @font-face { | ||
| font-family: 'Mulish'; | ||
| font-style: normal; | ||
| font-weight: 600; | ||
| src: url('../src/fonts/Mulish-SemiBold.ttf') format('truetype'); | ||
| } | ||
|
|
||
| /* Bold */ | ||
| @font-face { | ||
| font-family: 'Mulish'; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| src: url('../src/fonts/Mulish-Bold.ttf') format('truetype'); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import './storybook-theme.css'; | ||
| // FYI: import of antd styles required to show components based on it correctly | ||
| import 'antd/dist/antd.css'; | ||
|
|
||
| import { BADGE, defaultBadgesConfig } from '@geometricpanda/storybook-addon-badges'; | ||
| import DocTemplate from './DocTemplate.mdx'; | ||
|
|
||
| const preview = { | ||
| tags: ['!dev', 'autodocs'], | ||
| parameters: { | ||
| previewTabs: { | ||
| 'storybook/docs/panel': { index: -1 }, | ||
| }, | ||
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/i, | ||
| }, | ||
| }, | ||
| options: { | ||
| storySort: { | ||
| method: 'alphabetical', | ||
| order: [ | ||
| // Order of Docs Pages | ||
| 'Introduction', | ||
| 'Style Guide', | ||
| 'Design Tokens', | ||
| 'Style Utilities', | ||
| 'Icons', | ||
|
|
||
| // Order of Components | ||
| 'Layout', | ||
| 'Forms', | ||
| 'Data Display', | ||
| 'Feedback', | ||
| 'Typography', | ||
| 'Overlay', | ||
| 'Disclosure', | ||
| 'Navigation', | ||
| 'Media', | ||
| 'Other', | ||
| ], | ||
| locales: '', | ||
| }, | ||
| }, | ||
| docs: { | ||
| page: DocTemplate, | ||
| toc: { | ||
| disable: false, | ||
| }, | ||
| docs: { | ||
| source: { | ||
| format: true, | ||
| }, | ||
| }, | ||
| }, | ||
|
|
||
| // Reconfig the premade badges with better titles | ||
| badgesConfig: { | ||
| stable: { | ||
| ...defaultBadgesConfig[BADGE.STABLE], | ||
| title: 'Stable', | ||
| tooltip: 'This component is stable but may have frequent changes. Use at own discretion.', | ||
| }, | ||
| productionReady: { | ||
| ...defaultBadgesConfig[BADGE.STABLE], | ||
| title: 'Production Ready', | ||
| tooltip: 'This component is production ready and has been tested in a production environment.', | ||
| }, | ||
| WIP: { | ||
| ...defaultBadgesConfig[BADGE.BETA], | ||
| title: 'WIP', | ||
| tooltip: 'This component is a work in progress and may not be fully functional or tested.', | ||
| }, | ||
| readyForDesignReview: { | ||
| ...defaultBadgesConfig[BADGE.NEEDS_REVISION], | ||
| title: 'Ready for Design Review', | ||
| tooltip: 'This component is ready for design review and feedback.', | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default preview; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.