I am using react, nx, tailwind to create a monorepo with multiple config
What I would like to achieve is
one config for the whole repo
one config per project
one plugin that extend the project config on each lib.
I currently have this :
root::tailwind.config (base styles)
module.exports = {
content: [],
theme: {
extend: {
colors: {
'27313B': '#27313B',
},
},
},
plugins: [],
};
project::tailwdind.config (extends the root and call for a plugin)
const { createGlobPatternsForDependencies } = require('#nrwl/react/tailwind');
const { join } = require('path');
module.exports = {
content: [
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,tsx,html}'),
...createGlobPatternsForDependencies(__dirname),
],
presets: [require(join(__dirname, '../../tailwind.config'))],
theme: {
extend: {},
},
plugins: [require(join(__dirname, '../../libs//tailwind.plugin'))],
};
lib::tailwind.plugin
const plugin = require('tailwindcss/plugin');
module.exports = {
plugins: [
plugin(
function ({ matchUtilities, theme }) {
matchUtilities(
{
colors: (value) => ({
colors: value,
}),
},
{ values: theme('colors') }
);
},
{
theme: {
extend: {
colors: {
F00: '#f00',
},
},
},
}
),
],
};
Sadly, the plugin never work,
doing
<div className={'text-27313B'}>asdasd</div>
show the good color but
<div className={'text-F00'}>asdasd</div>
dont
I am configuring it wrong ?
you try this
module.exports = {
content: [],
theme: {
extend: {
colors: {
27313B: '#27313B',
},
},
},
plugins: [],
};
ok I copy pasted wrong...
module.exports = plugin(
function ({ matchUtilities, theme }) {
matchUtilities(
{
colors: (value) => ({
colors: value,
}),
},
{ values: theme('colors') }
);
},
{
theme: {
extend: {
colors: {
F00: '#f00',
},
},
},
}
);
works.
I was exporting a plugin : plugin() instead of just plugin()
Related
I have the following globalTypes to enable a toolbar in storybook that lets me select the theme:
export const globalTypes = {
theme: {
name: 'Theme',
description: 'Global theme',
defaultValue: MyTheme.Light,
toolbar: {
icon: 'mirror',
items: [MyTheme.Light, MyTheme.Dark],
showName: true,
dynamicTitle: true,
},
},
};
This works fine and I can switch the theme through the toolbar:
Now I want to set the background color of the story (background-color of the body) according to the theme, but I cannot figure out how to do that for all stories globally.
I know how to configure different background colors, but I have no idea how to switch them based on the theme set in context.globals. How does this work?
You can use decorators to set global view and se
Like here
import { useEffect } from "react";
import "./preview.css";
enum MyTheme {
Light = "light",
Dark = "dark",
Tomato = "tomato"
}
export const globalTypes = {
theme: {
name: "Theme",
description: "Global theme",
defaultValue: MyTheme.Light,
toolbar: {
icon: "mirror",
items: [
{
title: "light",
value: MyTheme.Light
},
{ title: "dark", value: MyTheme.Dark },
{ title: "tomato", value: MyTheme.Tomato }
],
showName: true,
dynamicTitle: true
}
}
};
const clearStyles = (element: HTMLElement) => {
for (const className of Object.values(MyTheme)) {
element.classList.remove(className);
}
};
const applyStyle = (element: HTMLElement, className: string) => {
element.classList.add(className);
};
const WithThemeProvider = (Story, context) => {
useEffect(() => {
const body = window.document.body;
clearStyles(body);
applyStyle(body, context.globals.theme);
return () => {
clearStyles(body);
};
}, [context.globals.theme]);
return <Story />;
};
export const decorators = [WithThemeProvider];
I know it might feel "dirty" to work directly with body. But it is suggested way for instance addons decorator.
I created variant for MuiButton like so...
const theme = createTheme({
components: {
MuiButton: {
variants: [{
props: {
variant: 'myVariantX'
},
style: {
backgroundColor: 'blue'
}
}]
}
},
});
...I know I can do this...
const theme = createTheme({
components: {
// Name of the component
MuiButton: {
defaultProps: {
// The props to change the default for.
disableRipple: true, // No more ripple, on the whole application 💣!
},
},
},
});
... but is there a way I could specify defaultProps for my 'myVariantX' variant? Dont want to target all MuiButtons. Something like...
const theme = createTheme({
components: {
MuiButton: {
variants: [{
props: {
variant: 'myVariantX',
defaultProps: {
disableRipple: true
}
},
style: {
backgroundColor: 'blue'
}
}]
}
},
});
I'm using react-chartjs-2 v4.1 with ChartJS v3.8 in typescript.
I'd like to draw a horizontal line through my bar graph as shown below:
I find many half-written examples of which I cannot create a functional one. I couldn't find any complete, working example on how to use annotations.
My Code
I've added the chartjs-plugin-annotation package to my project.
Below is the code for a react component showing the graph of the screenshot. The annotation, however, does not work.
Can anyone tell me what's wrong with the code?
import React from 'react';
import { Bar } from 'react-chartjs-2';
export const MyChart: React.FC = () => {
const options2 = {
plugins: {
legend: {
display: false,
},
annotation: {
annotations: [
{
id: 'a-line-1',
type: 'line',
mode: 'horizontal',
scaleID: 'y',
value: 1.0,
borderColor: 'red',
borderWidth: 4,
label: {
enabled: false,
content: 'Test label',
},
},
],
},
},
};
const data2 = {
labels: [ 'a', 'b'],
datasets: [ { data: [1, 2] } ],
};
return (<Bar options={options2} data={data2} height={150} />
);
};
You dont import and register the annotation plugin:
import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.register(annotationPlugin);
Based on LeeLenalee's answer here's a fully working example.
Changes to code in question:
import and register annotationPlugin
set annotation type to type: 'line' as const (not just type: 'line'). Otherwise typescript complains.
import React from 'react';
import { Bar } from 'react-chartjs-2';
import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.register(annotationPlugin);
export const MyChart: React.FC = () => {
const options2 = {
plugins: {
legend: {
display: false,
},
annotation: {
annotations: [
{
id: 'a-line-1',
type: 'line' as const, // important, otherwise typescript complains
mode: 'horizontal',
scaleID: 'y',
value: 1.0,
borderColor: 'red',
borderWidth: 4,
label: {
enabled: false,
content: 'Test label',
},
},
],
},
},
};
const data2 = {
labels: [ 'a', 'b'],
datasets: [ { data: [1, 2] } ],
};
return (<Bar options={options2} data={data2} height={150} />
);
};
With this code (React-Electron-Typescript ) :
import VideoJS from './videojs/VideoJS'
import "videojs-youtube"
function App_C(props) {
const [url, setUrl] = React.useState("")
const playerRef = React.useRef(null)
console.log("App_C-url-updated: ", url)
const changeVideoSource = (player) => {
playerRef.current = player;
//setUrl('https://www.youtube.com/watch?v=voFRslp8d60')
player.changeSource(url)
}
const videoJsOptions = { // lookup the options in the docs for more options
autoplay: true,
controls: true,
responsive: true,
fluid: true,
sources: [
{
src: 'https://www.youtube.com/watch?v=voFRslp8d60',
type: 'video/youtube'
},
{
src: '/path/to/video.mp4',
type: 'video/mp4'
}
]
}
const handlePlayerReady = (player) => {
playerRef.current = player;
// you can handle player events here
player.on('waiting', () => {
console.log('player is waiting');
});
player.on('dispose', () => {
console.log('player will dispose');
});
};
return (
<div id="outer-container" className='outer-container'>
<h1>App_C</h1>
<VideoJS options={videoJsOptions} onReady={handlePlayerReady} />
</div>
);
}
export default App_C;
But I get this error message:
if I want to set the videosource to the url (a string) :
React.useEffect(() => {
setUrl("https://www.youtube.com/watch?v=voFRslp8d60")
}, [])
console.log("App_C-url-updated: ", url)
const changeVideoSource = (player) => {
playerRef.current = player;
//setUrl('https://www.youtube.com/watch?v=voFRslp8d60')
player.changeSource(url)
}
const videoJsOptions = { // lookup the options in the docs for more options
autoplay: true,
controls: true,
responsive: true,
fluid: true,
sources: [
{
src: changeVideoSource,
type: 'video/youtube'
},
{
src: '/path/to/video.mp4',
type: 'video/mp4'
}
]
}
Or:
const videoJsOptions = { // lookup the options in the docs for more options
autoplay: true,
controls: true,
responsive: true,
fluid: true,
sources: [
{
src: url,
type: 'video/youtube'
},
{
src: '/path/to/video.mp4',
type: 'video/mp4'
}
]
}
Other info:
"react": "^17.0.2"
"video.js": "^7.17.0"
"videojs-youtube": "^2.6.1"
"electron": "^16.0.7"
node: v16.13.0
O.S. : Ubuntu 20.04 Desktop
I'm having some problem in importing modules in codesandbox,
ModuleNotFoundError
Could not find module in path: 'mux.js/lib/tools/parse-sidx'
relative to '/node_modules/video.js/dist/video.es.js'
but I've put all the code in this codesandbox repo:
https://codesandbox.io/s/quizzical-yalow-y6g73
How to make it work?
My tailwind background gradient is not being applied
here is my html code:
<div>
<button className="bg-gradient-to-r from-primary-orange via-secondary-orange to-lighter-orange w-4/5 p-4 mt-10 rounded">Search Flights</button>
</div>
My tailwind.config.js:
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
backgroundColor: theme => ({
...theme('colors'),
'primary-orange': '#FF8C00',
'secondary-orange':'#FFA500',
'lighter-orange':'#FFD700'
})
},
variants: {
extend: {},
},
plugins: [],
}
Running my react script with post-css so all the other colors I add to tailwind.config are working once I generate the post-css just not the gradient.
Any idea why?
Thanks
Use the extend section of your tailwind.config.js file if you'd like to extend the default color palette rather than override it. Then add gradientColorStops attribute to it where you can write your custom colors.
module.exports = {
purge: [],
darkMode: false,
theme: {
extend: {
gradientColorStops: theme => ({
'primary': '#FF8C00',
'secondary': '#FFA500',
'danger': '#FFD700',
}),
},
},
variants: {
extend: {},
},
plugins: [],
}