chore(ui): creating a playground for the new components (#4301)
Co-authored-by: Dan Rukas <dan.rukas@gmail.com>
This commit is contained in:
Alireza
GitHub
parent
b9eb54c71f
commit
6231629b38
@ -5,7 +5,6 @@ import 'regenerator-runtime/runtime';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import App from './App';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { history } from './utils/history';
|
||||
|
||||
/**
|
||||
|
||||
17
platform/ui-next/.webpack/template.html
Normal file
17
platform/ui-next/.webpack/template.html
Normal file
@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0"
|
||||
/>
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<div
|
||||
id="root"
|
||||
class="min-h-screen"
|
||||
></div>
|
||||
</body>
|
||||
</html>
|
||||
116
platform/ui-next/.webpack/webpack.playground.js
Normal file
116
platform/ui-next/.webpack/webpack.playground.js
Normal file
@ -0,0 +1,116 @@
|
||||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
// const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
|
||||
const isDevelopment = process.env.NODE_ENV !== 'production';
|
||||
const isProdBuild = process.env.NODE_ENV === 'production';
|
||||
|
||||
const autoprefixer = require('autoprefixer');
|
||||
const tailwindcss = require('tailwindcss');
|
||||
const tailwindConfigPath = path.resolve('./tailwind.config.js');
|
||||
|
||||
const cssToJavaScript = {
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
//'style-loader',
|
||||
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
|
||||
{ loader: 'css-loader', options: { importLoaders: 1 } },
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
postcssOptions: {
|
||||
verbose: true,
|
||||
plugins: [
|
||||
[tailwindcss(tailwindConfigPath)],
|
||||
[autoprefixer('last 2 version', 'ie >= 11')],
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
mode: 'development',
|
||||
entry: {
|
||||
home: './src/_pages/index.tsx',
|
||||
playground: './src/_pages/playground.tsx',
|
||||
viewer: './src/_pages/viewer.tsx',
|
||||
colors: './src/_pages/colors.tsx',
|
||||
// add other pages here
|
||||
},
|
||||
output: {
|
||||
filename: '[name].bundle.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
clean: true,
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js', '.jsx'],
|
||||
// plugins: [new TsconfigPathsPlugin()],
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
...(isProdBuild
|
||||
? []
|
||||
: [
|
||||
{
|
||||
test: /\.[jt]sx?$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
plugins: ['react-refresh/babel'],
|
||||
},
|
||||
},
|
||||
]),
|
||||
cssToJavaScript,
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
|
||||
new HtmlWebpackPlugin({
|
||||
template: './.webpack/template.html',
|
||||
chunks: ['home'],
|
||||
filename: 'index.html',
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: './.webpack/template.html',
|
||||
chunks: ['playground'],
|
||||
filename: 'playground.html',
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: './.webpack/template.html',
|
||||
chunks: ['viewer'],
|
||||
filename: 'viewer.html',
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: './.webpack/template.html',
|
||||
chunks: ['colors'],
|
||||
filename: 'colors.html',
|
||||
}),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].css',
|
||||
}),
|
||||
isDevelopment && new ReactRefreshWebpackPlugin(),
|
||||
!isDevelopment &&
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].css',
|
||||
}),
|
||||
],
|
||||
devServer: {
|
||||
static: {
|
||||
directory: path.join(__dirname, 'dist'),
|
||||
},
|
||||
hot: true,
|
||||
open: true,
|
||||
port: 8000,
|
||||
historyApiFallback: true,
|
||||
devMiddleware: {
|
||||
writeToDisk: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
57
platform/ui-next/babel.config.js
Normal file
57
platform/ui-next/babel.config.js
Normal file
@ -0,0 +1,57 @@
|
||||
// https://babeljs.io/docs/en/options#babelrcroots
|
||||
const { extendDefaultPlugins } = require('svgo');
|
||||
|
||||
module.exports = {
|
||||
babelrcRoots: ['./platform/*', './extensions/*', './modes/*'],
|
||||
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
|
||||
plugins: [
|
||||
['@babel/plugin-proposal-class-properties', { loose: true }],
|
||||
'@babel/plugin-transform-typescript',
|
||||
['@babel/plugin-proposal-private-methods', { loose: true }],
|
||||
'@babel/plugin-transform-class-static-block',
|
||||
],
|
||||
env: {
|
||||
test: {
|
||||
presets: [
|
||||
[
|
||||
// TODO: https://babeljs.io/blog/2019/03/19/7.4.0#migration-from-core-js-2
|
||||
'@babel/preset-env',
|
||||
{
|
||||
modules: 'commonjs',
|
||||
debug: false,
|
||||
},
|
||||
],
|
||||
'@babel/preset-react',
|
||||
'@babel/preset-typescript',
|
||||
],
|
||||
plugins: [
|
||||
'@babel/plugin-proposal-object-rest-spread',
|
||||
'@babel/plugin-syntax-dynamic-import',
|
||||
'@babel/plugin-transform-regenerator',
|
||||
'@babel/transform-destructuring',
|
||||
'@babel/plugin-transform-runtime',
|
||||
'@babel/plugin-transform-typescript',
|
||||
'@babel/plugin-transform-class-static-block',
|
||||
],
|
||||
},
|
||||
production: {
|
||||
presets: [
|
||||
// WebPack handles ES6 --> Target Syntax
|
||||
['@babel/preset-env', { modules: false }],
|
||||
'@babel/preset-react',
|
||||
'@babel/preset-typescript',
|
||||
],
|
||||
ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
|
||||
},
|
||||
development: {
|
||||
presets: [
|
||||
// WebPack handles ES6 --> Target Syntax
|
||||
['@babel/preset-env', { modules: false }],
|
||||
'@babel/preset-react',
|
||||
'@babel/preset-typescript',
|
||||
],
|
||||
plugins: ['react-refresh/babel'],
|
||||
ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -6,7 +6,7 @@
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
"css": "src/tailwind.css",
|
||||
"baseColor": "slate",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
"clean": "rm -rf node_modules/.cache/storybook && 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",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
||||
"build:package": "yarn run build"
|
||||
@ -30,6 +31,7 @@
|
||||
"@radix-ui/react-icons": "^1.3.0",
|
||||
"@radix-ui/react-popover": "^1.0.7",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
"@radix-ui/react-tooltip": "^1.1.2",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "*",
|
||||
"cmdk": "^1.0.0",
|
||||
|
||||
1
platform/ui-next/src/_pages/README.md
Normal file
1
platform/ui-next/src/_pages/README.md
Normal file
@ -0,0 +1 @@
|
||||
This is our playground for designing and developing the next generation of the platform's UI. You probably don't need to be here.
|
||||
134
platform/ui-next/src/_pages/colors.tsx
Normal file
134
platform/ui-next/src/_pages/colors.tsx
Normal file
@ -0,0 +1,134 @@
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import '../tailwind.css';
|
||||
|
||||
function Colors() {
|
||||
return (
|
||||
<main>
|
||||
<h2>Primary color</h2>
|
||||
<div className="row">
|
||||
<div className="example2">
|
||||
<div className="bg-primary h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-primary/80 h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-primary/60 h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-primary/40 h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-primary/20 h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-infosecondary h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-highlight h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-highlight h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="h-16 w-16 rounded bg-white"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="h-16 w-16 rounded bg-white"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="h-16 w-16 rounded bg-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>New colors</h2>
|
||||
<div className="row">
|
||||
<div className="example2">
|
||||
<div className="bg-highlight h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-bkg-low h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-bkg-med h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-bkg-full h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Core colors</h2>
|
||||
<div className="row">
|
||||
<div className="example2">
|
||||
<div className="bg-background h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-foreground h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-card h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-card-foreground h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-popover h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-popover-foreground h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-primary h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-primary-foreground h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-secondary h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-secondary-foreground h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-muted h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-muted-foreground h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-accent h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-accent-foreground h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="destructive h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="destructive-foreground h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-border h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Borders</h2>
|
||||
<div className="row">
|
||||
<div className="example2">
|
||||
<div className="bg-border h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-input h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-ring h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const container = document.getElementById('root');
|
||||
const root = createRoot(container);
|
||||
root.render(React.createElement(Colors));
|
||||
34
platform/ui-next/src/_pages/index.tsx
Normal file
34
platform/ui-next/src/_pages/index.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
|
||||
import '../tailwind.css';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div className="container mx-auto p-4">
|
||||
<h1 className="mb-4 text-2xl font-bold">Home Page</h1>
|
||||
<nav className="space-x-4">
|
||||
<a
|
||||
href="playground.html"
|
||||
className="text-blue-500 hover:text-blue-700"
|
||||
>
|
||||
Playground
|
||||
</a>
|
||||
<a
|
||||
href="viewer.html"
|
||||
className="text-blue-500 hover:text-blue-700"
|
||||
>
|
||||
Viewer
|
||||
</a>
|
||||
<a
|
||||
href="colors.html"
|
||||
className="text-blue-500 hover:text-blue-700"
|
||||
>
|
||||
Colors
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
|
||||
const container = document.getElementById('root');
|
||||
const root = createRoot(container);
|
||||
root.render(React.createElement(App));
|
||||
185
platform/ui-next/src/_pages/playground.tsx
Normal file
185
platform/ui-next/src/_pages/playground.tsx
Normal file
@ -0,0 +1,185 @@
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import '../tailwind.css';
|
||||
|
||||
import { Button } from '../components/Button';
|
||||
// import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '../components/Tooltip';
|
||||
|
||||
// import type { Metadata } from 'next';
|
||||
// import Script from 'next/script';
|
||||
// import BackgroundColorSelector from '@/components/backgroundcolor';
|
||||
// import { useState, useEffect } from 'react';
|
||||
// import { Inter } from 'next/font/google';
|
||||
// import { ThemeProvider } from '@/components/themeprovider';
|
||||
// import { Button2 } from '@/components/ui/button2';
|
||||
// import { Switch } from '@/components/ui/switch';
|
||||
// import { Slider } from '@/components/ui/slider';
|
||||
// import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
// import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
// import { Separator } from '@/components/ui/separator';
|
||||
// import { Toggle } from '@/components/ui/toggle';
|
||||
// import { Checkbox } from '@/components/ui/checkbox';
|
||||
// import {
|
||||
// Select,
|
||||
// SelectContent,
|
||||
// SelectItem,
|
||||
// SelectTrigger,
|
||||
// SelectValue,
|
||||
// } from '@/components/ui/select';
|
||||
// import { Input } from '@/components/ui/input';
|
||||
// import { Label } from '@/components/ui/label';
|
||||
// import icons from '../../components/icons';
|
||||
// import SegRow from '@/components/segrow';
|
||||
|
||||
export default function Playground() {
|
||||
return (
|
||||
<main>
|
||||
{/* <BackgroundColorSelector /> */}
|
||||
|
||||
<h2>Button default</h2>
|
||||
<div className="row">
|
||||
<div className="example">
|
||||
<Button
|
||||
className=""
|
||||
variant="default"
|
||||
>
|
||||
Primary Button
|
||||
</Button>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Button variant="secondary">Secondary Button</Button>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Button variant="ghost">Ghost Button</Button>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
>
|
||||
?
|
||||
</Button>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Button variant="link">Link</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Button small</h2>
|
||||
<div className="row">
|
||||
<div className="example">
|
||||
<Button
|
||||
className=""
|
||||
variant="default"
|
||||
size="sm"
|
||||
>
|
||||
Primary Button
|
||||
</Button>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
>
|
||||
Secondary Button
|
||||
</Button>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
>
|
||||
Ghost Button
|
||||
</Button>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
>
|
||||
?
|
||||
</Button>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Button
|
||||
variant="link"
|
||||
size="sm"
|
||||
>
|
||||
Link
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Button large</h2>
|
||||
<div className="row">
|
||||
<div className="example">
|
||||
<Button
|
||||
className=""
|
||||
variant="default"
|
||||
size="lg"
|
||||
>
|
||||
Primary Button
|
||||
</Button>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
>
|
||||
Secondary Button
|
||||
</Button>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="lg"
|
||||
>
|
||||
Ghost Button
|
||||
</Button>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
>
|
||||
?
|
||||
</Button>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Button
|
||||
variant="link"
|
||||
size="lg"
|
||||
>
|
||||
Link
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Color swatches</h2>
|
||||
<div className="row">
|
||||
<div className="example2">
|
||||
<div className="bg-actions h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-infosecondary h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="bg-highlight h-16 w-16 rounded"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="h-16 w-16 rounded bg-white"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="h-16 w-16 rounded bg-white"></div>
|
||||
</div>
|
||||
<div className="example2">
|
||||
<div className="h-16 w-16 rounded bg-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const container = document.getElementById('root');
|
||||
const root = createRoot(container);
|
||||
root.render(React.createElement(Playground));
|
||||
17
platform/ui-next/src/_pages/viewer.tsx
Normal file
17
platform/ui-next/src/_pages/viewer.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import '../tailwind.css';
|
||||
|
||||
// component imports
|
||||
|
||||
function Viewer() {
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<div className="text-3xl"> Viewer </div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const container = document.getElementById('root');
|
||||
const root = createRoot(container);
|
||||
root.render(React.createElement(Viewer));
|
||||
@ -5,23 +5,23 @@ import { cva, type VariantProps } from 'class-variance-authority';
|
||||
import { cn } from '../../lib/utils';
|
||||
|
||||
const buttonVariants = cva(
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded text-base font-medium leading-tight transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
||||
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
||||
default: 'bg-primary/60 text-primary-foreground hover:bg-primary/100',
|
||||
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
||||
outline:
|
||||
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
||||
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||
'border border-input bg-background hover:bg-primary/25 hover:text-accent-foreground',
|
||||
secondary: 'bg-primary/40 text-secondary-foreground hover:bg-primary/60',
|
||||
ghost: 'text-primary hover:bg-primary/25',
|
||||
link: 'text-primary underline-offset-4 hover:underline',
|
||||
},
|
||||
size: {
|
||||
default: 'h-9 px-4 py-2',
|
||||
sm: 'h-8 rounded-md px-3 text-xs',
|
||||
lg: 'h-10 rounded-md px-8',
|
||||
icon: 'h-9 w-9',
|
||||
default: 'h-7 px-2 py-2',
|
||||
sm: 'h-6 rounded px-2',
|
||||
lg: 'h-9 rounded px-2',
|
||||
icon: 'h-6 w-6',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@ -1 +1 @@
|
||||
export { Button , buttonVariants} from "./Button"
|
||||
export { Button, buttonVariants } from './Button';
|
||||
|
||||
@ -25,7 +25,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
|
||||
month: 'space-y-4',
|
||||
caption: 'flex justify-between items-center px-2',
|
||||
|
||||
caption_dropdowns: 'flex space-x-2',
|
||||
caption_dropdowns: 'flex space-x-2 text-black',
|
||||
caption_label: 'hidden',
|
||||
nav: 'space-x-1 flex items-center',
|
||||
table: 'w-full border-collapse space-y-1',
|
||||
@ -39,7 +39,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
|
||||
),
|
||||
day_range_end: 'day-range-end',
|
||||
day_selected:
|
||||
'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
|
||||
'bg-primary/60 text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground focus:bg-primary/80 focus:text-primary-foreground',
|
||||
day_today: 'bg-accent text-accent-foreground',
|
||||
day_outside:
|
||||
'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
|
||||
|
||||
@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
|
||||
'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
28
platform/ui-next/src/components/Tooltip/Tooltip.tsx
Normal file
28
platform/ui-next/src/components/Tooltip/Tooltip.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import * as React from 'react';
|
||||
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
||||
|
||||
import { cn } from '../../lib/utils';
|
||||
|
||||
const TooltipProvider = TooltipPrimitive.Provider;
|
||||
|
||||
const Tooltip = TooltipPrimitive.Root;
|
||||
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger;
|
||||
|
||||
const TooltipContent = React.forwardRef<
|
||||
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<TooltipPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
||||
3
platform/ui-next/src/components/Tooltip/index.ts
Normal file
3
platform/ui-next/src/components/Tooltip/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './Tooltip';
|
||||
|
||||
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
||||
@ -2,66 +2,229 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* OHIF Theme */
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
--highlight: 191 74% 63%;
|
||||
--background: 236 62% 5%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 236 62% 5%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 236 62% 5%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 214 98% 60%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 214 66% 48%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 234 64% 10%;
|
||||
--muted-foreground: 200 46 65%;
|
||||
--accent: 214 67% 12%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 236 45% 21%;
|
||||
--ring: 214 98% 60%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 214 98% 60%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 236 45% 21%;
|
||||
--ring: 214 98% 60%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ORIGINAL THEME for comparison and testing
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
--primary: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
--destructive: 0 72.22% 50.59%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 5% 64.9%;
|
||||
--radius: 0.5rem;
|
||||
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-4: 43 74% 66%;
|
||||
--chart-5: 27 87% 67%;
|
||||
}
|
||||
|
||||
|
||||
.dark {
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 85.7% 97.3%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
/* Theme Copy Example
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 224 71.4% 4.1%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 224 71.4% 4.1%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 224 71.4% 4.1%;
|
||||
--primary: 262.1 83.3% 57.8%;
|
||||
--primary-foreground: 210 20% 98%;
|
||||
--secondary: 220 14.3% 95.9%;
|
||||
--secondary-foreground: 220.9 39.3% 11%;
|
||||
--muted: 220 14.3% 95.9%;
|
||||
--muted-foreground: 220 8.9% 46.1%;
|
||||
--accent: 220 14.3% 95.9%;
|
||||
--accent-foreground: 220.9 39.3% 11%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 20% 98%;
|
||||
--border: 220 13% 91%;
|
||||
--input: 220 13% 91%;
|
||||
--ring: 262.1 83.3% 57.8%;
|
||||
--radius: 0.5rem;
|
||||
--chart-1: ;
|
||||
--chart-2: ;
|
||||
--chart-3: ;
|
||||
--chart-4: ;
|
||||
--chart-5: ;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 224 71.4% 4.1%;
|
||||
--foreground: 210 20% 98%;
|
||||
--card: 224 71.4% 4.1%;
|
||||
--card-foreground: 210 20% 98%;
|
||||
--popover: 224 71.4% 4.1%;
|
||||
--popover-foreground: 210 20% 98%;
|
||||
--primary: 263.4 70% 50.4%;
|
||||
--primary-foreground: 210 20% 98%;
|
||||
--secondary: 215 27.9% 16.9%;
|
||||
--secondary-foreground: 210 20% 98%;
|
||||
--muted: 215 27.9% 16.9%;
|
||||
--muted-foreground: 217.9 10.6% 64.9%;
|
||||
--accent: 215 27.9% 16.9%;
|
||||
--accent-foreground: 210 20% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 20% 98%;
|
||||
--border: 215 27.9% 16.9%;
|
||||
--input: 215 27.9% 16.9%;
|
||||
--ring: 263.4 70% 50.4%;
|
||||
--chart-1: ;
|
||||
--chart-2: ;
|
||||
--chart-3: ;
|
||||
--chart-4: ;
|
||||
--chart-5: ;
|
||||
}
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground text-base;
|
||||
}
|
||||
main {
|
||||
@apply my-4 mx-auto max-w-6xl py-6;
|
||||
}
|
||||
h1 {
|
||||
@apply py-4 text-5xl font-semibold;
|
||||
}
|
||||
h2 {
|
||||
@apply py-4 text-4xl font-semibold;
|
||||
}
|
||||
h3 {
|
||||
@apply py-3 text-xl font-normal;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.row {
|
||||
@apply mb-6 flex flex-row flex-wrap rounded-md border py-10;
|
||||
}
|
||||
.example {
|
||||
@apply flex-initial px-6;
|
||||
}
|
||||
|
||||
.example2 {
|
||||
@apply flex-initial px-4;
|
||||
}
|
||||
}
|
||||
|
||||
/* Additional CSS edits to components */
|
||||
|
||||
/* Tooltip */
|
||||
|
||||
.TooltipContent[data-side='bottom'] {
|
||||
animation-name: slideDown;
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
highlight: 'hsl(var(--highlight))',
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user