fix(security): Removed dependency on tar-fs by removing dependencies on storybook and sharp. (#5438)
This commit is contained in:
Joe Boccanfuso
GitHub
parent
a6408d6033
commit
80f314a422
@ -62,7 +62,7 @@
|
||||
"jest-junit": "^6.4.0",
|
||||
"lerna": "^7.2.0",
|
||||
"lint-staged": "^9.0.2",
|
||||
"mini-css-extract-plugin": "^2.1.0",
|
||||
"mini-css-extract-plugin": "2.9.2",
|
||||
"optimize-css-assets-webpack-plugin": "^6.0.1",
|
||||
"postcss": "^8.3.5",
|
||||
"postcss-import": "^14.0.2",
|
||||
@ -80,7 +80,7 @@
|
||||
"terser-webpack-plugin": "^5.1.4",
|
||||
"typescript": "5.5.4",
|
||||
"unused-webpack-plugin": "2.4.0",
|
||||
"webpack": "^5.94.0",
|
||||
"webpack": "5.95.0",
|
||||
"webpack-bundle-analyzer": "^4.8.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "5.2.2",
|
||||
|
||||
@ -45,7 +45,6 @@
|
||||
"glob-parent": "^6.0.2",
|
||||
"trim": "^1.0.0",
|
||||
"package-json": "^8.1.0",
|
||||
"typescript": "5.5.4",
|
||||
"sharp": "^0.32.6"
|
||||
"typescript": "5.5.4"
|
||||
}
|
||||
}
|
||||
|
||||
15
package.json
15
package.json
@ -96,18 +96,27 @@
|
||||
"@babel/preset-env": "7.28.0",
|
||||
"@babel/preset-react": "^7.27.1",
|
||||
"@babel/preset-typescript": "^7.27.1",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "0.5.17",
|
||||
"babel-loader": "8.4.1",
|
||||
"babel-plugin-istanbul": "^7.0.0",
|
||||
"@istanbuljs/nyc-config-typescript": "^1.0.2",
|
||||
"css-loader": "6.11.0",
|
||||
"cypress": "14.5.2",
|
||||
"cypress-file-upload": "^5.0.8",
|
||||
"file-loader": "6.2.0",
|
||||
"istanbul": "0.4.5",
|
||||
"nyc": "^17.1.0",
|
||||
"patch-package": "^8.0.0",
|
||||
"playwright-test-coverage": "^1.2.12",
|
||||
"postcss-loader": "6.2.1",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "0.6.9",
|
||||
"shader-loader": "1.3.1",
|
||||
"source-map-support": "^0.5.21",
|
||||
"ts-node": "^10.9.2"
|
||||
"style-loader": "1.3.0",
|
||||
"terser-webpack-plugin": "5.3.14",
|
||||
"ts-node": "^10.9.2",
|
||||
"worker-loader": "3.0.8"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
@ -129,13 +138,13 @@
|
||||
"glob-parent": "^6.0.2",
|
||||
"trim": "^1.0.0",
|
||||
"package-json": "^8.1.0",
|
||||
"sharp": "^0.32.6",
|
||||
"rollup": "2.79.2",
|
||||
"body-parser": "1.20.3",
|
||||
"form-data": ">=4.0.4",
|
||||
"axios": "1.12.0",
|
||||
"core-js": "3.45.1",
|
||||
"@babel/runtime-corejs2": "7.26.10"
|
||||
"@babel/runtime-corejs2": "7.26.10",
|
||||
"tapable": "2.2.2"
|
||||
},
|
||||
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||
}
|
||||
|
||||
@ -107,10 +107,19 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-transform-private-methods": "^7.27.1",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "0.5.17",
|
||||
"@types/node": "^20.12.12",
|
||||
"clean-webpack-plugin": "4.0.0",
|
||||
"copy-webpack-plugin": "10.2.4",
|
||||
"cross-env": "^7.0.3",
|
||||
"extract-css-chunks-webpack-plugin": "4.10.0",
|
||||
"html-webpack-plugin": "5.6.3",
|
||||
"identity-obj-proxy": "3.0.x",
|
||||
"mini-css-extract-plugin": "2.9.2",
|
||||
"shx": "^0.3.4",
|
||||
"tailwindcss": "3.2.4"
|
||||
"tailwindcss": "3.2.4",
|
||||
"terser-webpack-plugin": "5.3.14",
|
||||
"webpack-dev-server": "5.2.2",
|
||||
"workbox-webpack-plugin": "6.6.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
"README.md"
|
||||
],
|
||||
"scripts": {
|
||||
"clean": "rm -rf node_modules/.cache/storybook && shx rm -rf dist",
|
||||
"clean": "shx rm -rf dist",
|
||||
"clean:deep": "yarn run clean && shx rm -rf node_modules",
|
||||
"start": "yarn run build --watch",
|
||||
"dev": "cross-env NODE_ENV=development webpack serve --config .webpack/webpack.playground.js",
|
||||
@ -44,6 +44,7 @@
|
||||
"@radix-ui/react-switch": "^1.1.0",
|
||||
"@radix-ui/react-tabs": "^1.1.0",
|
||||
"@radix-ui/react-toggle": "^1.1.0",
|
||||
"@radix-ui/react-toggle-group": "1.1.10",
|
||||
"@radix-ui/react-tooltip": "^1.1.2",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "*",
|
||||
|
||||
1
platform/ui/.gitignore
vendored
1
platform/ui/.gitignore
vendored
@ -1,2 +1 @@
|
||||
node_modules
|
||||
storybook-static
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
import { create } from '@storybook/theming';
|
||||
|
||||
export default create({
|
||||
base: 'light',
|
||||
brandTitle: 'OHIF',
|
||||
brandUrl: 'https://ohif.org',
|
||||
brandImage: 'ohif-logo-light.svg',
|
||||
});
|
||||
@ -1,3 +0,0 @@
|
||||
#storybook-explorer-menu svg {
|
||||
color: #5034ff;
|
||||
}
|
||||
@ -1,105 +0,0 @@
|
||||
import path, { dirname, join } from 'path';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import type { StorybookConfig } from '@storybook/react-webpack5';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ['../src/**/*.stories.@(mdx)'],
|
||||
addons: [
|
||||
getAbsolutePath('@storybook/addon-links'),
|
||||
getAbsolutePath('@storybook/addon-essentials'),
|
||||
// Other addons go here
|
||||
{
|
||||
name: '@storybook/addon-docs',
|
||||
options: {
|
||||
mdxPluginOptions: {
|
||||
mdxCompileOptions: {
|
||||
remarkPlugins: [remarkGfm],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
core: {},
|
||||
framework: {
|
||||
name: getAbsolutePath('@storybook/react-webpack5'),
|
||||
options: {},
|
||||
},
|
||||
docs: {
|
||||
autodocs: true, // see below for alternatives
|
||||
defaultName: 'Docs', // set to change the name of generated docs entries
|
||||
},
|
||||
staticDirs: ['../static'],
|
||||
webpackFinal: async (config: any, { configType }) => {
|
||||
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
|
||||
// You can change the configuration based on that.
|
||||
// 'PRODUCTION' is used when building the static version of storybook.
|
||||
|
||||
// config.module.rules[0].use[0].options.plugins[1] = [
|
||||
// '@babel/plugin-proposal-class-properties',
|
||||
// { loose: true },
|
||||
// ];
|
||||
|
||||
// config.module.rules[0].use[0].options.plugins[3] = [
|
||||
// '@babel/plugin-proposal-private-methods',
|
||||
// { loose: true },
|
||||
// ];
|
||||
|
||||
// config.module.rules[0].use[0].options.plugins[4] = [
|
||||
// '@babel/plugin-proposal-private-property-in-object',
|
||||
// { loose: true },
|
||||
// ];
|
||||
|
||||
// Make whatever fine-grained changes you need
|
||||
config.module.rules.push({
|
||||
test: /\.m?js/,
|
||||
resolve: {
|
||||
fullySpecified: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Default rule for images /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
|
||||
const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'));
|
||||
fileLoaderRule.exclude = /\.svg$/;
|
||||
|
||||
config.module.rules.push({
|
||||
test: /\.svg$/,
|
||||
use: [
|
||||
{ loader: require.resolve('babel-loader') },
|
||||
// { loader: 'svg-inline-loader' },
|
||||
],
|
||||
});
|
||||
|
||||
config.module.rules.push({
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
// HERE: OPTIONS
|
||||
postcssOptions: {
|
||||
plugins: [require('tailwindcss'), require('autoprefixer')],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
include: path.resolve(__dirname, '../'),
|
||||
});
|
||||
|
||||
// ignore the file @icr/polyseg-wasm during the build as it is a wasm file and
|
||||
// we don't need that for ui
|
||||
config.module.rules.push({
|
||||
test: /@icr\/polyseg-wasm/,
|
||||
type: 'javascript/auto',
|
||||
loader: 'file-loader',
|
||||
});
|
||||
|
||||
// Return the altered config
|
||||
return config;
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
function getAbsolutePath(value: string): any {
|
||||
return dirname(require.resolve(join(value, 'package.json')));
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
<title>OHIF UI Component</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #f0f3ff !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#storybook-explorer-menu svg {
|
||||
color: #2b5282;
|
||||
}
|
||||
</style>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=G-3S63CTHNP6"
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-3S63CTHNP6');
|
||||
</script>
|
||||
@ -1,15 +0,0 @@
|
||||
// .storybook/manager.js
|
||||
|
||||
import { addons } from '@storybook/addons';
|
||||
import ohifTheme from './OHIFTheme';
|
||||
|
||||
const link = document.createElement('link');
|
||||
link.setAttribute('rel', 'shortcut icon');
|
||||
document.head.appendChild(link);
|
||||
|
||||
addons.setConfig({
|
||||
theme: ohifTheme,
|
||||
});
|
||||
|
||||
window.STORYBOOK_GA_ID = 'G-3S63CTHNP6';
|
||||
window.STORYBOOK_REACT_GA_OPTIONS = {};
|
||||
@ -1,79 +0,0 @@
|
||||
import React from 'react';
|
||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs';
|
||||
import {
|
||||
Heading,
|
||||
SectionName,
|
||||
Footer,
|
||||
AnchorListItem,
|
||||
LinkComponent,
|
||||
} from '../src/storybook/components';
|
||||
|
||||
import '../src/tailwind.css';
|
||||
import './custom.css';
|
||||
|
||||
// https://github.com/mondaycom/monday-ui-react-core/tree/master/.storybook
|
||||
|
||||
export const parameters = {
|
||||
docs: {
|
||||
inlineStories: true,
|
||||
container: ({ children, context }) => (
|
||||
<DocsContainer context={context}>{children}</DocsContainer>
|
||||
),
|
||||
page: DocsPage,
|
||||
components: {
|
||||
Heading,
|
||||
Footer,
|
||||
h2: SectionName,
|
||||
h3: ({ children }) => <h3 className="my-2 to-blue-900 text-xl">{children}</h3>,
|
||||
li: AnchorListItem,
|
||||
a: LinkComponent,
|
||||
p: ({ children }) => <p className="font-inter my-2 text-gray-800">{children}</p>,
|
||||
// todo: add pre and code
|
||||
},
|
||||
},
|
||||
viewMode: 'docs',
|
||||
previewTabs: {
|
||||
'storybook/docs/panel': {
|
||||
index: -1,
|
||||
},
|
||||
canvas: { title: 'Sandbox' },
|
||||
},
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
viewport: {
|
||||
disable: true,
|
||||
},
|
||||
backgrounds: {
|
||||
default: 'OHIF-v3',
|
||||
values: [
|
||||
{
|
||||
name: 'White',
|
||||
value: '#FFFFFF',
|
||||
},
|
||||
{
|
||||
name: 'OHIF-v3',
|
||||
value: '#090C29',
|
||||
},
|
||||
{
|
||||
name: 'Light',
|
||||
value: '#F8F8F8',
|
||||
},
|
||||
{
|
||||
name: 'Dark',
|
||||
value: '#333333',
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
storySort: {
|
||||
order: ['Welcome', 'Contribute', 'Foundations', 'Modals', '*'],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const decorators = [];
|
||||
@ -1,14 +1 @@
|
||||
# @ohif/ui
|
||||
|
||||
## For Running Storybook
|
||||
|
||||
```
|
||||
cd platform/ui
|
||||
|
||||
yarn install
|
||||
|
||||
yarn storybook
|
||||
|
||||
```
|
||||
|
||||
Stories are available default at `http://localhost:6006/`
|
||||
|
||||
@ -19,14 +19,11 @@
|
||||
"README.md"
|
||||
],
|
||||
"scripts": {
|
||||
"clean": "rm -rf node_modules/.cache/storybook && shx rm -rf dist",
|
||||
"clean": "shx rm -rf dist",
|
||||
"clean:deep": "yarn run clean && shx rm -rf node_modules",
|
||||
"start": "yarn run build --watch",
|
||||
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
||||
"build:package": "yarn run build",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"dev": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build"
|
||||
"build:package": "yarn run build"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.3.1",
|
||||
@ -66,14 +63,6 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.28.0",
|
||||
"@storybook/addon-actions": "^7.6.10",
|
||||
"@storybook/addon-docs": "^7.6.10",
|
||||
"@storybook/addon-essentials": "^7.6.10",
|
||||
"@storybook/addon-links": "^7.6.10",
|
||||
"@storybook/cli": "^7.6.10",
|
||||
"@storybook/react": "^7.6.10",
|
||||
"@storybook/react-webpack5": "^7.6.10",
|
||||
"@storybook/source-loader": "^7.6.10",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"babel-loader": "^9.1.2",
|
||||
"dotenv-webpack": "^8.0.1",
|
||||
@ -81,7 +70,6 @@
|
||||
"postcss-loader": "^7.2.4",
|
||||
"prop-types": "^15.8.1",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"storybook": "^7.6.10",
|
||||
"tailwindcss": "3.2.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,171 +0,0 @@
|
||||
import { Button, ButtonEnums } from '../../../components';
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
import {
|
||||
createComponentTemplate,
|
||||
createStoryMetaSettings,
|
||||
} from '../../../storybook/functions/create-component-story';
|
||||
|
||||
export const argTypes = {
|
||||
component: Button,
|
||||
title: 'Components/Button',
|
||||
};
|
||||
|
||||
<Meta
|
||||
title="Components/Button"
|
||||
component={Button}
|
||||
/>
|
||||
|
||||
export const buttonTemplate = createComponentTemplate(Button);
|
||||
|
||||
<Heading
|
||||
title="Button"
|
||||
componentRelativePath="Button/Button.tsx"
|
||||
/>
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Props](#props)
|
||||
- [Usage](#usage)
|
||||
- [Contribute](#contribute)
|
||||
|
||||
## Overview
|
||||
|
||||
You can use the button component to create a button. It can be used in different ways, the default
|
||||
button is a simple button with text.
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Overview"
|
||||
args={{ children: 'Button', color: 'default' }}
|
||||
>
|
||||
{buttonTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={Button} />
|
||||
|
||||
## Usage
|
||||
|
||||
### Types
|
||||
|
||||
There can be different types of buttons: `primary`, and `secondary`.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Types">
|
||||
<div className="flex space-x-2">
|
||||
<Button type={ButtonEnums.type.primary}>Primary Button</Button>
|
||||
<Button type={ButtonEnums.type.secondary}>Secondary Button</Button>
|
||||
</div>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Sizes
|
||||
|
||||
There are different sizes for the button: `small`, and `medium`. The size refers to the button's
|
||||
height.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Sizes">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button size={ButtonEnums.size.small}>Small Button</Button>
|
||||
<Button size={ButtonEnums.size.medium}>Medium Button</Button>
|
||||
</div>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Mixing props
|
||||
|
||||
You can mix different props together to create a button.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Custom">
|
||||
<Button
|
||||
type={ButtonEnums.type.secondary}
|
||||
size={ButtonEnums.size.small}
|
||||
>
|
||||
Small, Secondary Button
|
||||
</Button>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Disabled
|
||||
|
||||
You can disable the button by setting the `disabled` property to true.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Disabled">
|
||||
<Button disabled={true}>Disabled Button</Button>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Start/End Icons
|
||||
|
||||
You can add an icon to the start of the button. It accepts an icon component.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Start Icon">
|
||||
{() => {
|
||||
// svg icon for github
|
||||
const Github = () => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="feather feather-github"
|
||||
>
|
||||
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
return <Button startIcon={<Github />}>Start Icon Button</Button>;
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
End Icon is the same as start icon, but for the end of the button.
|
||||
|
||||
<Canvas>
|
||||
<Story name="End Icon">
|
||||
{() => {
|
||||
// svg icon for github
|
||||
const Github = () => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="feather feather-github"
|
||||
>
|
||||
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<Button
|
||||
startIcon={<Github />}
|
||||
endIcon={<Github />}
|
||||
>
|
||||
Start and End Icon Button
|
||||
</Button>
|
||||
);
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="Button/__stories__/button.stories.mdx" />
|
||||
@ -1,55 +0,0 @@
|
||||
import { Button, ButtonGroup, ButtonEnums } from '../../../components';
|
||||
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
import {
|
||||
createComponentTemplate,
|
||||
createStoryMetaSettings,
|
||||
} from '../../../storybook/functions/create-component-story';
|
||||
|
||||
export const argTypes = {
|
||||
component: ButtonGroup,
|
||||
title: 'Components/ButtonGroup',
|
||||
};
|
||||
|
||||
<Meta
|
||||
title="Components/ButtonGroup"
|
||||
component={ButtonGroup}
|
||||
/>
|
||||
|
||||
<Heading
|
||||
title="ButtonGroup"
|
||||
componentRelativePath="ButtonGroup/ButtonGroup.tsx"
|
||||
/>
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Props](#props)
|
||||
- [Usage](#usage)
|
||||
- [Contribute](#contribute)
|
||||
|
||||
## Overview
|
||||
|
||||
ButtonGroup is a container for a group of buttons.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Overview">
|
||||
<ButtonGroup
|
||||
orientation={ButtonEnums.orientation.horizontal}
|
||||
activeIndex={0}
|
||||
onActiveIndexChange={index => console.log(index)}
|
||||
>
|
||||
<button onClick={() => console.log('Button 1111 clicked')}>Button 1</button>
|
||||
<button onClick={() => console.log('Button 222 clicked')}>Button 2</button>
|
||||
<button onClick={() => console.log('Button 33 clicked')}>Button 3</button>
|
||||
</ButtonGroup>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={ButtonGroup} />
|
||||
|
||||
## Usage
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="ButtonGroup/__stories__/buttonGroup.stories.mdx" />
|
||||
@ -1,65 +0,0 @@
|
||||
import ContextMenu from '../ContextMenu';
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
|
||||
|
||||
export const argTypes = {
|
||||
component: ContextMenu,
|
||||
title: 'Modals/ContextMenu',
|
||||
};
|
||||
|
||||
<Meta
|
||||
title="Modals/ContextMenu"
|
||||
component={ContextMenu}
|
||||
/>
|
||||
|
||||
export const contextMenueTemplate = createComponentTemplate(ContextMenu);
|
||||
|
||||
<Heading
|
||||
title="ContextMenu"
|
||||
componentRelativePath="ContextMenu/ContextMenu.tsx"
|
||||
/>
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Props](#props)
|
||||
- [Contribute](#contribute)
|
||||
|
||||
## Overview
|
||||
|
||||
Context Menu is a component that is used to display a list of options to the user. This component
|
||||
can be used for use cases such as opening a list of options on user right click.
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Overview"
|
||||
args={{
|
||||
items: [
|
||||
{
|
||||
label: 'Delete measurement',
|
||||
actionType: 'Delete',
|
||||
action: item => {
|
||||
window.alert(`${item.label} clicked`);
|
||||
},
|
||||
value: {},
|
||||
},
|
||||
{
|
||||
label: 'Add Label',
|
||||
actionType: 'setLabel',
|
||||
action: item => {
|
||||
window.alert(`${item.label} clicked`);
|
||||
},
|
||||
value: {},
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
{contextMenueTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={ContextMenu} />
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="ContextMenu/__stories__/contextMenu.stories.mdx" />
|
||||
@ -1,97 +0,0 @@
|
||||
import Icon from '../Icon';
|
||||
import { ICONS } from '../getIcon';
|
||||
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
|
||||
|
||||
export const argTypes = {
|
||||
component: Icon,
|
||||
title: 'Components/Icon',
|
||||
};
|
||||
|
||||
<Meta
|
||||
title="Components/Icon"
|
||||
component={Icon}
|
||||
/>
|
||||
|
||||
export const IconTemplate = args => (
|
||||
// Todo: Icon colors
|
||||
<div className="h-8 w-8">
|
||||
<Icon {...args} />
|
||||
</div>
|
||||
);
|
||||
|
||||
<Heading
|
||||
title="Icon"
|
||||
componentRelativePath="Icon/Icon.tsx"
|
||||
/>
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Props](#props)
|
||||
- [Usage](#usage)
|
||||
- [Contribute](#contribute)
|
||||
|
||||
## Overview
|
||||
|
||||
Icon is a component that renders the Icons.
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Overview"
|
||||
args={{
|
||||
name: 'clipboard',
|
||||
}}
|
||||
>
|
||||
{IconTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={Icon} />
|
||||
|
||||
## Usage
|
||||
|
||||
You can choose the icon from the list of icons. Here we have render all the icons.
|
||||
|
||||
<Canvas>
|
||||
<Story name="All Icons">
|
||||
{() => {
|
||||
const icons = Object.keys(ICONS);
|
||||
return (
|
||||
<div className="flex flex-wrap">
|
||||
{icons
|
||||
.filter(ic => ic !== 'magnifier')
|
||||
.map(icon => (
|
||||
<div className="m-4 flex flex-col items-center justify-center">
|
||||
<div class="h-8 w-8">
|
||||
<Icon name={icon} />
|
||||
</div>
|
||||
<div className="text-gray-600">{icon}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Color
|
||||
|
||||
Icon colors can be changed by wrapping the icon in a div with the class name
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Colors"
|
||||
args={{
|
||||
name: 'clipboard',
|
||||
className: 'text-red-700',
|
||||
}}
|
||||
>
|
||||
{IconTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="Icon/__stories__/icon.stories.mdx" />
|
||||
@ -1,94 +0,0 @@
|
||||
import Input from '../Input';
|
||||
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
|
||||
|
||||
export const argTypes = {
|
||||
component: Input,
|
||||
title: 'Components/Input',
|
||||
};
|
||||
|
||||
<Meta
|
||||
title="Components/Input"
|
||||
component={Input}
|
||||
/>
|
||||
|
||||
export const InputTemplate = createComponentTemplate(Input);
|
||||
|
||||
<Heading
|
||||
title="Input"
|
||||
componentRelativePath="Input/Input.tsx"
|
||||
/>
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Props](#props)
|
||||
- [Usage](#usage)
|
||||
- [Contribute](#contribute)
|
||||
|
||||
## Overview
|
||||
|
||||
Input is a component that renders the Inputs.
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Overview"
|
||||
args={{
|
||||
label: 'Input',
|
||||
}}
|
||||
>
|
||||
{InputTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={Input} />
|
||||
|
||||
## Usage
|
||||
|
||||
### Transparent
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Transparent"
|
||||
args={{
|
||||
transparent: true,
|
||||
}}
|
||||
>
|
||||
{InputTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Small Input
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Small"
|
||||
args={{
|
||||
smallInput: true,
|
||||
}}
|
||||
>
|
||||
{InputTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Classnames
|
||||
|
||||
You can change the appearance of the container and label.
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="ClassNames"
|
||||
args={{
|
||||
label: 'Input',
|
||||
containerClassName: 'bg-gray-500',
|
||||
labelClassName: 'text-yellow-500',
|
||||
}}
|
||||
>
|
||||
{InputTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="Input/__stories__/input.stories.mdx" />
|
||||
@ -1,59 +0,0 @@
|
||||
import InputFilterText from '../InputFilterText';
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
|
||||
export const argTypes = {
|
||||
component: InputFilterText,
|
||||
title: 'Components/InputFilterText',
|
||||
};
|
||||
|
||||
<Meta
|
||||
title="Components/InputFilterText"
|
||||
component={InputFilterText}
|
||||
/>
|
||||
|
||||
export const InputFilterTextTemplate = args => (
|
||||
<div className="w-80">
|
||||
<InputFilterText {...args} />
|
||||
</div>
|
||||
);
|
||||
|
||||
<Heading
|
||||
title="InputFilterText"
|
||||
componentRelativePath="InputFilterText/InputFilterText.tsx"
|
||||
/>
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Props](#props)
|
||||
- [Contribute](#contribute)
|
||||
|
||||
## Overview
|
||||
|
||||
InputFilterText is a component that is styled such that it can be used as a text input to filter a
|
||||
list of textual items. It allows you to enter any text. There are two (optional) callbacks that can
|
||||
be invoked as the characters of the text are entered: one callback is invoked as each character is
|
||||
typed and another is debounced so that any filtering can occur once the user has entered a
|
||||
significant amount of info and pausing by a configurable amount of time in milliseconds. The
|
||||
component also provides a button on the far right of the component that when clicked will clear the
|
||||
input text. The button only appears when there is text in the component.
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Overview"
|
||||
args={{
|
||||
className: 'w-full text-white',
|
||||
placeholder: 'Search for...',
|
||||
onChange: () => console.log('input text changed'),
|
||||
onDebounceChange: () => console.log('debounce text changed'),
|
||||
}}
|
||||
>
|
||||
{InputFilterTextTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={InputFilterText} />
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="InputFilterText/__stories__/InputFilterText.stories.mdx" />
|
||||
@ -1,193 +0,0 @@
|
||||
import LegacyButton from '../LegacyButton';
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
import {
|
||||
createComponentTemplate,
|
||||
createStoryMetaSettings,
|
||||
} from '../../../storybook/functions/create-component-story';
|
||||
|
||||
export const argTypes = {
|
||||
component: LegacyButton,
|
||||
title: 'Components/LegacyButton',
|
||||
};
|
||||
|
||||
<Meta
|
||||
title="Components/LegacyButton"
|
||||
component={LegacyButton}
|
||||
/>
|
||||
|
||||
export const buttonTemplate = createComponentTemplate(LegacyButton);
|
||||
|
||||
<Heading
|
||||
title="LegacyButton"
|
||||
componentRelativePath="LegacyButton/LegacyButton.tsx"
|
||||
/>
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Props](#props)
|
||||
- [Usage](#usage)
|
||||
- [Contribute](#contribute)
|
||||
|
||||
## Overview
|
||||
|
||||
You can use the legacy button component to create a button. It can be used in different ways, the
|
||||
default button is a simple button with a text.
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Overview"
|
||||
args={{ children: 'LegacyButton', color: 'default' }}
|
||||
>
|
||||
{buttonTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={LegacyButton} />
|
||||
|
||||
## Usage
|
||||
|
||||
### Variants
|
||||
|
||||
There can be different variants of buttons: `text`, `outlined`, `contained`, and `disabled`.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Variants">
|
||||
<div className="flex space-x-2">
|
||||
<LegacyButton variant="text">Text LegacyButton</LegacyButton>
|
||||
<LegacyButton variant="outlined">Outlined LegacyButton</LegacyButton>
|
||||
<LegacyButton variant="contained">Contained LegacyButton</LegacyButton>
|
||||
<LegacyButton variant="disabled">Disabled LegacyButton</LegacyButton>
|
||||
</div>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Colors
|
||||
|
||||
There are different colors for the legacy button: `default`, `primary`, `secondary`, `white`,
|
||||
`black`, `inherit`, `light`.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Colors">
|
||||
<div className="flex space-x-2">
|
||||
<LegacyButton color="default">Default LegacyButton</LegacyButton>
|
||||
<LegacyButton color="primary">Primary LegacyButton</LegacyButton>
|
||||
<LegacyButton color="secondary">Secondary LegacyButton</LegacyButton>
|
||||
<LegacyButton color="white">White LegacyButton</LegacyButton>
|
||||
<LegacyButton color="black">Black LegacyButton</LegacyButton>
|
||||
<LegacyButton color="inherit">Inherit LegacyButton</LegacyButton>
|
||||
<LegacyButton color="light">Light LegacyButton</LegacyButton>
|
||||
</div>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Mixing props
|
||||
|
||||
You can mix different props together to create a legacy button.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Custom">
|
||||
<LegacyButton
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
Custom LegacyButton
|
||||
</LegacyButton>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Disabled
|
||||
|
||||
You can disable the legacy button by setting the variant to `disabled`.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Disabled">
|
||||
<LegacyButton variant="disabled">Disabled LegacyButton</LegacyButton>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Start/End Icons
|
||||
|
||||
You can add an icon to the start of the legacy button. It accepts an icon component.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Start Icon">
|
||||
{() => {
|
||||
// svg icon for github
|
||||
const Github = () => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="feather feather-github"
|
||||
>
|
||||
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
return <LegacyButton startIcon={<Github />}>Start Icon LegacyButton</LegacyButton>;
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
End Icon is the same as start icon, but for the end of the legacy button.
|
||||
|
||||
<Canvas>
|
||||
<Story name="End Icon">
|
||||
{() => {
|
||||
// svg icon for github
|
||||
const Github = () => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="feather feather-github"
|
||||
>
|
||||
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<LegacyButton
|
||||
startIcon={<Github />}
|
||||
endIcon={<Github />}
|
||||
>
|
||||
Start and End Icon LegacyButton
|
||||
</LegacyButton>
|
||||
);
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Full width
|
||||
|
||||
You can make the legacy button full width by setting the `fullWidth` prop to `true`.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Full Width">
|
||||
<LegacyButton
|
||||
fullWidth
|
||||
color="secondary"
|
||||
>
|
||||
Full Width LegacyButton
|
||||
</LegacyButton>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="LegacyButton/__stories__/legacyButton.stories.mdx" />
|
||||
@ -1,102 +0,0 @@
|
||||
import { LegacyButtonGroup, LegacyButton } from '../../../components';
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
import {
|
||||
createComponentTemplate,
|
||||
createStoryMetaSettings,
|
||||
} from '../../../storybook/functions/create-component-story';
|
||||
|
||||
export const argTypes = {
|
||||
component: LegacyButtonGroup,
|
||||
title: 'Components/LegacyButtonGroup',
|
||||
};
|
||||
|
||||
<Meta
|
||||
title="Components/LegacyButtonGroup"
|
||||
component={LegacyButtonGroup}
|
||||
/>
|
||||
|
||||
export const LegacybuttonGroupTemplate = args => (
|
||||
<LegacyButtonGroup {...args}>
|
||||
<LegacyButton>One</LegacyButton>
|
||||
<LegacyButton>Two</LegacyButton>
|
||||
<LegacyButton>Three</LegacyButton>
|
||||
</LegacyButtonGroup>
|
||||
);
|
||||
|
||||
<Heading
|
||||
title="LegacyButtonGroup"
|
||||
componentRelativePath="LegacyButtonGroup/LegacyButtonGroup.tsx"
|
||||
/>
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Props](#props)
|
||||
- [Usage](#usage)
|
||||
- [Contribute](#contribute)
|
||||
|
||||
## Overview
|
||||
|
||||
LegacyButtonGroup is a container for a group of buttons.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Overview">{LegacybuttonGroupTemplate.bind({})}</Story>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={LegacyButtonGroup} />
|
||||
|
||||
## Usage
|
||||
|
||||
### Variants
|
||||
|
||||
There are three different variants of LegacyButtonGroup:
|
||||
|
||||
<Canvas>
|
||||
<Story name="Variants">
|
||||
<div className="flex flex-col space-y-2">
|
||||
<LegacyButtonGroup variant="text">
|
||||
<LegacyButton>Text</LegacyButton>
|
||||
<LegacyButton>Text</LegacyButton>
|
||||
<LegacyButton>Text</LegacyButton>
|
||||
</LegacyButtonGroup>
|
||||
<LegacyButtonGroup variant="outlined">
|
||||
<LegacyButton>Outlined</LegacyButton>
|
||||
<LegacyButton>Outlined</LegacyButton>
|
||||
<LegacyButton>Outlined</LegacyButton>
|
||||
</LegacyButtonGroup>
|
||||
<LegacyButtonGroup variant="contained">
|
||||
<LegacyButton>Contained</LegacyButton>
|
||||
<LegacyButton>Contained</LegacyButton>
|
||||
<LegacyButton>Contained</LegacyButton>
|
||||
</LegacyButtonGroup>
|
||||
</div>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Orientation
|
||||
|
||||
You can change the orientation of the buttons in the group by setting the `orientation` prop.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Orientation Horizontal">
|
||||
<LegacyButtonGroup orientation="horizontal">
|
||||
<LegacyButton>Horizontal-1</LegacyButton>
|
||||
<LegacyButton>Horizontal-2</LegacyButton>
|
||||
</LegacyButtonGroup>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
Or vertical
|
||||
|
||||
<Canvas>
|
||||
<Story name="Orientation Vertical">
|
||||
<LegacyButtonGroup orientation="vertical">
|
||||
<LegacyButton>Vertical-1</LegacyButton>
|
||||
<LegacyButton>Vertical-2</LegacyButton>
|
||||
</LegacyButtonGroup>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="LEgacyButtonGroup/__stories__/legacyButtonGroup.stories.mdx" />
|
||||
@ -1,56 +0,0 @@
|
||||
import { Select } from '../../../components';
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
|
||||
export const argTypes = {
|
||||
component: Select,
|
||||
title: 'Components/Select',
|
||||
};
|
||||
|
||||
<Meta
|
||||
title="Components/Select"
|
||||
component={Select}
|
||||
/>
|
||||
|
||||
export const SelectTemplate = args => (
|
||||
<div className="h-80 w-40">
|
||||
<Select {...args} />
|
||||
</div>
|
||||
);
|
||||
|
||||
<Heading
|
||||
title="Select"
|
||||
componentRelativePath="Select/Select.tsx"
|
||||
/>
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Props](#props)
|
||||
- [Contribute](#contribute)
|
||||
|
||||
## Overview
|
||||
|
||||
Select is a component that allows you to select from a list
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Overview"
|
||||
args={{
|
||||
isClearable: false,
|
||||
onChange: item => alert(item.label),
|
||||
options: [
|
||||
{ label: 'item1', value: 1 },
|
||||
{ label: 'item2', value: 2 },
|
||||
],
|
||||
value: 2,
|
||||
}}
|
||||
>
|
||||
{SelectTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={Select} />
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="Select/__stories__/Select.stories.mdx" />
|
||||
@ -1,56 +0,0 @@
|
||||
import StudyListExpandedRow from '../StudyListExpandedRow';
|
||||
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
|
||||
|
||||
export const argTypes = {
|
||||
component: StudyListExpandedRow,
|
||||
title: 'Components/StudyListExpandedRow',
|
||||
};
|
||||
|
||||
<Meta
|
||||
title="Components/StudyListExpandedRow"
|
||||
component={StudyListExpandedRow}
|
||||
/>
|
||||
|
||||
export const StudyListExpandedRowTemplate = createComponentTemplate(StudyListExpandedRow);
|
||||
|
||||
<Heading
|
||||
title="StudyListExpandedRow"
|
||||
componentRelativePath="StudyListExpandedRow/StudyListExpandedRow.js"
|
||||
/>
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Props](#props)
|
||||
- [Contribute](#contribute)
|
||||
|
||||
## Overview
|
||||
|
||||
StudyListExpandedRow is a component that renders the StudyListExpandedRows.
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Overview"
|
||||
args={{
|
||||
seriesTableColumns: {
|
||||
description: 'Description',
|
||||
seriesNumber: 'Series',
|
||||
modality: 'Modality',
|
||||
instances: 'Instances',
|
||||
},
|
||||
seriesTableDataSource: [],
|
||||
}}
|
||||
>
|
||||
{StudyListExpandedRowTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={StudyListExpandedRow} />
|
||||
|
||||
## Usage
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="StudyListExpandedRow/__stories__/studyListExpandedRow.stories.mdx" />
|
||||
@ -1,91 +0,0 @@
|
||||
import Tooltip from '../Tooltip';
|
||||
import Icon from '../../Icon';
|
||||
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
|
||||
|
||||
export const argTypes = {
|
||||
component: Tooltip,
|
||||
title: 'Components/Tooltip',
|
||||
};
|
||||
|
||||
<Meta
|
||||
title="Components/Tooltip"
|
||||
component={Tooltip}
|
||||
/>
|
||||
|
||||
export const TooltipTemplate = args => (
|
||||
<div className="h-16 w-full">
|
||||
<div class="mx-auto h-8 w-8">
|
||||
<Tooltip {...args}>
|
||||
<Icon name="clipboard" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
<Heading
|
||||
title="Tooltip"
|
||||
componentRelativePath="Tooltip/Tooltip.js"
|
||||
/>
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Props](#props)
|
||||
- [Usage](#usage)
|
||||
- [Contribute](#contribute)
|
||||
|
||||
## Overview
|
||||
|
||||
Tooltip is a component that renders the Tooltips.
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Overview"
|
||||
args={{
|
||||
content: 'Tooltip',
|
||||
}}
|
||||
>
|
||||
{TooltipTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={Tooltip} />
|
||||
|
||||
## Usage
|
||||
|
||||
### Position
|
||||
|
||||
You can set the position of the tooltip by using the `position` prop.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Position">
|
||||
<div className="m-8 h-16 w-full">
|
||||
<div class="mx-auto h-8 w-8">
|
||||
<Tooltip
|
||||
position="right"
|
||||
content="right"
|
||||
>
|
||||
<Icon name="clipboard" />
|
||||
<span>Right</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div className="m-8 h-16 w-full">
|
||||
<div class="mx-auto h-8 w-8">
|
||||
<Tooltip
|
||||
position="left"
|
||||
content="left"
|
||||
>
|
||||
<Icon name="clipboard" />
|
||||
<span>Left</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="Tooltip/__stories__/tooltip.stories.mdx" />
|
||||
@ -1,218 +0,0 @@
|
||||
import Typography from '../Typography';
|
||||
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
|
||||
|
||||
export const argTypes = {
|
||||
component: Typography,
|
||||
title: 'Foundations/Typography',
|
||||
};
|
||||
|
||||
<Meta
|
||||
title="Foundations/Typography"
|
||||
component={Typography}
|
||||
/>
|
||||
|
||||
<Heading
|
||||
title="Typography"
|
||||
componentRelativePath="Typography/Typography.js"
|
||||
/>
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Props](#props)
|
||||
- [Usage](#usage)
|
||||
- [Contribute](#contribute)
|
||||
|
||||
## Overview
|
||||
|
||||
Typography is a component that renders the Typographys.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Overview">
|
||||
<Typography
|
||||
variant="h1"
|
||||
className="text-blue-800"
|
||||
>
|
||||
Heading 1
|
||||
</Typography>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Usage
|
||||
|
||||
#### Variants
|
||||
|
||||
There are several variants of the Typography component.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Variants">
|
||||
<Typography
|
||||
variant="h1"
|
||||
className="text-blue-800"
|
||||
>
|
||||
Heading 1
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h2"
|
||||
className="text-blue-800"
|
||||
>
|
||||
Heading 2
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h3"
|
||||
className="text-blue-800"
|
||||
>
|
||||
Heading 3
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h4"
|
||||
className="text-blue-800"
|
||||
>
|
||||
Heading 4
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
className="text-blue-800"
|
||||
>
|
||||
Heading 5
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
className="text-blue-800"
|
||||
>
|
||||
Heading 6
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="p"
|
||||
className="text-blue-800"
|
||||
>
|
||||
Paragraph
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="subtitle"
|
||||
className="text-blue-800"
|
||||
>
|
||||
Subtitle
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-blue-800"
|
||||
>
|
||||
Caption
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body"
|
||||
className="text-blue-800"
|
||||
>
|
||||
Body
|
||||
</Typography>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
#### Text Color
|
||||
|
||||
You can use the `color` prop to change the color of the text.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Text Color">
|
||||
<Typography
|
||||
variant="h5"
|
||||
color="primary"
|
||||
>
|
||||
Primary Color
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
color="secondary"
|
||||
>
|
||||
Secondary Color
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
color="error"
|
||||
>
|
||||
Error Color
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
color="inherit"
|
||||
>
|
||||
Inherit Color
|
||||
</Typography>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
#### Custom className
|
||||
|
||||
You can use the `className` prop to add a custom className to the Typography.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Custom Class">
|
||||
<Typography
|
||||
variant="h5"
|
||||
className="text-red-400"
|
||||
>
|
||||
Custom Red Color
|
||||
</Typography>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
#### Align
|
||||
|
||||
<Canvas>
|
||||
<Story name="Align">
|
||||
<Typography
|
||||
variant="body"
|
||||
align="left"
|
||||
color="primary"
|
||||
>
|
||||
Align Left: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt tempus
|
||||
ante, non blandit sem vehicula ac. Vestibulum in dolor commodo, elementum massa scelerisque,
|
||||
molestie nulla. Aenean sed odio interdum, rutrum ex at, volutpat diam. Donec vel tristique
|
||||
sem, eget iaculis velit. Aenean placerat justo
|
||||
</Typography>
|
||||
<br />
|
||||
<Typography
|
||||
variant="body"
|
||||
align="center"
|
||||
color="primary"
|
||||
>
|
||||
Align Center: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt tempus
|
||||
ante, non blandit sem vehicula ac. Vestibulum in dolor commodo, elementum massa scelerisque,
|
||||
molestie nulla. Aenean sed odio interdum, rutrum ex at, volutpat diam. Donec vel tristique
|
||||
sem, eget iaculis velit. Aenean placerat justo
|
||||
</Typography>
|
||||
<br />
|
||||
<Typography
|
||||
variant="body"
|
||||
align="right"
|
||||
color="primary"
|
||||
>
|
||||
Align Right: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt tempus
|
||||
ante, non blandit sem vehicula ac. Vestibulum in dolor commodo, elementum massa scelerisque,
|
||||
molestie nulla. Aenean sed odio interdum, rutrum ex at, volutpat diam. Donec vel tristique
|
||||
sem, eget iaculis velit. Aenean placerat justo
|
||||
</Typography>
|
||||
<br />
|
||||
<Typography
|
||||
variant="body"
|
||||
align="justify"
|
||||
color="primary"
|
||||
>
|
||||
Align Justify: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt tempus
|
||||
ante, non blandit sem vehicula ac. Vestibulum in dolor commodo, elementum massa scelerisque,
|
||||
molestie nulla. Aenean sed odio interdum, rutrum ex at, volutpat diam. Donec vel tristique
|
||||
sem, eget iaculis velit. Aenean placerat justo
|
||||
</Typography>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={Typography} />
|
||||
|
||||
## Usage
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="Typography/__stories__/typography.stories.mdx" />
|
||||
Loading…
Reference in New Issue
Block a user