Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
7762d72a
Commit
7762d72a
authored
Feb 06, 2019
by
Dominik Prokop
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Updated stories to use new theming
parent
7eb2558f
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
60 additions
and
55 deletions
+60
-55
packages/grafana-ui/.storybook/config.ts
+6
-1
packages/grafana-ui/.storybook/webpack.config.js
+14
-2
packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx
+12
-16
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx
+12
-25
packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx
+11
-4
packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx
+3
-6
packages/grafana-ui/src/utils/storybook/withTheme.tsx
+2
-1
No files found.
packages/grafana-ui/.storybook/config.ts
View file @
7762d72a
import
{
configure
}
from
'@storybook/react'
;
import
{
configure
,
addDecorator
}
from
'@storybook/react'
;
import
{
withKnobs
}
from
'@storybook/addon-knobs'
;
import
{
withTheme
}
from
'../src/utils/storybook/withTheme'
;
import
'../../../public/sass/grafana.light.scss'
;
import
'../../../public/sass/grafana.light.scss'
;
// automatically import all files ending in *.stories.tsx
// automatically import all files ending in *.stories.tsx
const
req
=
require
.
context
(
'../src/components'
,
true
,
/.story.tsx$/
);
const
req
=
require
.
context
(
'../src/components'
,
true
,
/.story.tsx$/
);
addDecorator
(
withKnobs
);
addDecorator
(
withTheme
);
function
loadStories
()
{
function
loadStories
()
{
req
.
keys
().
forEach
(
req
);
req
.
keys
().
forEach
(
req
);
}
}
...
...
packages/grafana-ui/.storybook/webpack.config.js
View file @
7762d72a
const
path
=
require
(
'path'
);
const
path
=
require
(
'path'
);
const
getThemeVariable
=
require
(
'../../../scripts/webpack/getThemeVariable'
);
module
.
exports
=
(
baseConfig
,
env
,
config
)
=>
{
module
.
exports
=
(
baseConfig
,
env
,
config
)
=>
{
config
.
module
.
rules
.
push
({
config
.
module
.
rules
.
push
({
test
:
/
\.(
ts|tsx
)
$/
,
test
:
/
\.(
ts|tsx
)
$/
,
use
:
[
use
:
[
...
@@ -33,7 +33,15 @@ module.exports = (baseConfig, env, config) => {
...
@@ -33,7 +33,15 @@ module.exports = (baseConfig, env, config) => {
config
:
{
path
:
__dirname
+
'../../../../scripts/webpack/postcss.config.js'
},
config
:
{
path
:
__dirname
+
'../../../../scripts/webpack/postcss.config.js'
},
},
},
},
},
{
loader
:
'sass-loader'
,
options
:
{
sourceMap
:
false
}
},
{
loader
:
'sass-loader'
,
options
:
{
sourceMap
:
false
,
functions
:
{
'getThemeVariable($themeVar, $themeName: dark)'
:
getThemeVariable
,
},
},
},
],
],
});
});
...
@@ -52,5 +60,9 @@ module.exports = (baseConfig, env, config) => {
...
@@ -52,5 +60,9 @@ module.exports = (baseConfig, env, config) => {
});
});
config
.
resolve
.
extensions
.
push
(
'.ts'
,
'.tsx'
);
config
.
resolve
.
extensions
.
push
(
'.ts'
,
'.tsx'
);
// Remove pure js loading rules as Storybook's Babel config is causing problems when mixing ES6 and CJS
// More about the problem we encounter: https://github.com/webpack/webpack/issues/4039
config
.
module
.
rules
=
config
.
module
.
rules
.
filter
(
rule
=>
rule
.
test
.
toString
()
!==
/
\.(
mjs|jsx
?)
$/
.
toString
());
return
config
;
return
config
;
};
};
packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx
View file @
7762d72a
import
React
from
'react'
;
import
React
from
'react'
;
import
{
storiesOf
}
from
'@storybook/react'
;
import
{
storiesOf
}
from
'@storybook/react'
;
import
{
withKnobs
,
boolean
}
from
'@storybook/addon-knobs'
;
import
{
boolean
}
from
'@storybook/addon-knobs'
;
import
{
SeriesColorPicker
,
ColorPicker
}
from
'./ColorPicker'
;
import
{
SeriesColorPicker
,
ColorPicker
}
from
'./ColorPicker'
;
import
{
action
}
from
'@storybook/addon-actions'
;
import
{
action
}
from
'@storybook/addon-actions'
;
import
{
withCenteredStory
}
from
'../../utils/storybook/withCenteredStory'
;
import
{
withCenteredStory
}
from
'../../utils/storybook/withCenteredStory'
;
import
{
UseState
}
from
'../../utils/storybook/UseState'
;
import
{
UseState
}
from
'../../utils/storybook/UseState'
;
import
{
getThemeKnob
}
from
'../../utils/storybook/themeKnob
'
;
import
{
renderComponentWithTheme
}
from
'../../utils/storybook/withTheme
'
;
const
getColorPickerKnobs
=
()
=>
{
const
getColorPickerKnobs
=
()
=>
{
return
{
return
{
selectedTheme
:
getThemeKnob
(),
enableNamedColors
:
boolean
(
'Enable named colors'
,
false
),
enableNamedColors
:
boolean
(
'Enable named colors'
,
false
),
};
};
};
};
const
ColorPickerStories
=
storiesOf
(
'UI/ColorPicker/Pickers'
,
module
);
const
ColorPickerStories
=
storiesOf
(
'UI/ColorPicker/Pickers'
,
module
);
ColorPickerStories
.
addDecorator
(
withCenteredStory
)
.
addDecorator
(
withKnobs
)
;
ColorPickerStories
.
addDecorator
(
withCenteredStory
);
ColorPickerStories
.
add
(
'default'
,
()
=>
{
ColorPickerStories
.
add
(
'default'
,
()
=>
{
const
{
selectedTheme
,
enableNamedColors
}
=
getColorPickerKnobs
();
const
{
enableNamedColors
}
=
getColorPickerKnobs
();
return
(
return
(
<
UseState
initialState=
"#00ff00"
>
<
UseState
initialState=
"#00ff00"
>
{
(
selectedColor
,
updateSelectedColor
)
=>
{
{
(
selectedColor
,
updateSelectedColor
)
=>
{
return
(
return
renderComponentWithTheme
(
ColorPicker
,
{
<
ColorPicker
enableNamedColors
,
enableNamedColors=
{
enableNamedColors
}
color
:
selectedColor
,
color=
{
selectedColor
}
onChange
:
(
color
:
any
)
=>
{
onChange=
{
color
=>
{
action
(
'Color changed'
)(
color
);
action
(
'Color changed'
)(
color
);
updateSelectedColor
(
color
);
updateSelectedColor
(
color
);
}
}
},
theme=
{
selectedTheme
||
undefined
}
});
/>
);
}
}
}
}
</
UseState
>
</
UseState
>
);
);
});
});
ColorPickerStories
.
add
(
'Series color picker'
,
()
=>
{
ColorPickerStories
.
add
(
'Series color picker'
,
()
=>
{
const
{
selectedTheme
,
enableNamedColors
}
=
getColorPickerKnobs
();
const
{
enableNamedColors
}
=
getColorPickerKnobs
();
return
(
return
(
<
UseState
initialState=
"#00ff00"
>
<
UseState
initialState=
"#00ff00"
>
...
@@ -52,7 +49,6 @@ ColorPickerStories.add('Series color picker', () => {
...
@@ -52,7 +49,6 @@ ColorPickerStories.add('Series color picker', () => {
onToggleAxis=
{
()
=>
{}
}
onToggleAxis=
{
()
=>
{}
}
color=
{
selectedColor
}
color=
{
selectedColor
}
onChange=
{
color
=>
updateSelectedColor
(
color
)
}
onChange=
{
color
=>
updateSelectedColor
(
color
)
}
theme=
{
selectedTheme
||
undefined
}
>
>
<
div
style=
{
{
color
:
selectedColor
,
cursor
:
'pointer'
}
}
>
Open color picker
</
div
>
<
div
style=
{
{
color
:
selectedColor
,
cursor
:
'pointer'
}
}
>
Open color picker
</
div
>
</
SeriesColorPicker
>
</
SeriesColorPicker
>
...
...
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx
View file @
7762d72a
import
React
from
'react'
;
import
{
storiesOf
}
from
'@storybook/react'
;
import
{
storiesOf
}
from
'@storybook/react'
;
import
{
ColorPickerPopover
}
from
'./ColorPickerPopover'
;
import
{
ColorPickerPopover
}
from
'./ColorPickerPopover'
;
import
{
withKnobs
}
from
'@storybook/addon-knobs'
;
import
{
withCenteredStory
}
from
'../../utils/storybook/withCenteredStory'
;
import
{
withCenteredStory
}
from
'../../utils/storybook/withCenteredStory'
;
import
{
getThemeKnob
}
from
'../../utils/storybook/themeKnob'
;
import
{
SeriesColorPickerPopover
}
from
'./SeriesColorPickerPopover'
;
import
{
SeriesColorPickerPopover
}
from
'./SeriesColorPickerPopover'
;
import
{
renderComponentWithTheme
}
from
'../../utils/storybook/withTheme'
;
const
ColorPickerPopoverStories
=
storiesOf
(
'UI/ColorPicker/Popovers'
,
module
);
const
ColorPickerPopoverStories
=
storiesOf
(
'UI/ColorPicker/Popovers'
,
module
);
ColorPickerPopoverStories
.
addDecorator
(
withCenteredStory
)
.
addDecorator
(
withKnobs
)
;
ColorPickerPopoverStories
.
addDecorator
(
withCenteredStory
);
ColorPickerPopoverStories
.
add
(
'default'
,
()
=>
{
ColorPickerPopoverStories
.
add
(
'default'
,
()
=>
{
const
selectedTheme
=
getThemeKnob
();
return
renderComponentWithTheme
(
ColorPickerPopover
,
{
color
:
'#BC67E6'
,
return
(
onChange
:
(
color
:
any
)
=>
{
<
ColorPickerPopover
color=
"#BC67E6"
onChange=
{
color
=>
{
console
.
log
(
color
);
console
.
log
(
color
);
}
}
},
theme=
{
selectedTheme
||
undefined
}
});
/>
);
});
});
ColorPickerPopoverStories
.
add
(
'SeriesColorPickerPopover'
,
()
=>
{
ColorPickerPopoverStories
.
add
(
'SeriesColorPickerPopover'
,
()
=>
{
const
selectedTheme
=
getThemeKnob
();
return
renderComponentWithTheme
(
SeriesColorPickerPopover
,
{
color
:
'#BC67E6'
,
return
(
onChange
:
(
color
:
any
)
=>
{
<
SeriesColorPickerPopover
color=
"#BC67E6"
onChange=
{
color
=>
{
console
.
log
(
color
);
console
.
log
(
color
);
}
}
},
theme=
{
selectedTheme
||
undefined
}
});
/>
);
});
});
packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx
View file @
7762d72a
...
@@ -2,8 +2,9 @@ import React from 'react';
...
@@ -2,8 +2,9 @@ import React from 'react';
import
{
storiesOf
}
from
'@storybook/react'
;
import
{
storiesOf
}
from
'@storybook/react'
;
import
{
NamedColorsPalette
}
from
'./NamedColorsPalette'
;
import
{
NamedColorsPalette
}
from
'./NamedColorsPalette'
;
import
{
getColorName
,
getColorDefinitionByName
}
from
'../../utils/namedColorsPalette'
;
import
{
getColorName
,
getColorDefinitionByName
}
from
'../../utils/namedColorsPalette'
;
import
{
withKnobs
,
select
}
from
'@storybook/addon-knobs'
;
import
{
select
}
from
'@storybook/addon-knobs'
;
import
{
withCenteredStory
}
from
'../../utils/storybook/withCenteredStory'
;
import
{
withCenteredStory
}
from
'../../utils/storybook/withCenteredStory'
;
import
{
renderComponentWithTheme
}
from
'../../utils/storybook/withTheme'
;
import
{
UseState
}
from
'../../utils/storybook/UseState'
;
import
{
UseState
}
from
'../../utils/storybook/UseState'
;
const
BasicGreen
=
getColorDefinitionByName
(
'green'
);
const
BasicGreen
=
getColorDefinitionByName
(
'green'
);
...
@@ -12,7 +13,7 @@ const LightBlue = getColorDefinitionByName('light-blue');
...
@@ -12,7 +13,7 @@ const LightBlue = getColorDefinitionByName('light-blue');
const
NamedColorsPaletteStories
=
storiesOf
(
'UI/ColorPicker/Palettes/NamedColorsPalette'
,
module
);
const
NamedColorsPaletteStories
=
storiesOf
(
'UI/ColorPicker/Palettes/NamedColorsPalette'
,
module
);
NamedColorsPaletteStories
.
addDecorator
(
with
Knobs
).
addDecorator
(
with
CenteredStory
);
NamedColorsPaletteStories
.
addDecorator
(
withCenteredStory
);
NamedColorsPaletteStories
.
add
(
'Named colors swatch - support for named colors'
,
()
=>
{
NamedColorsPaletteStories
.
add
(
'Named colors swatch - support for named colors'
,
()
=>
{
const
selectedColor
=
select
(
const
selectedColor
=
select
(
...
@@ -28,7 +29,10 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors',
...
@@ -28,7 +29,10 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors',
return
(
return
(
<
UseState
initialState=
{
selectedColor
}
>
<
UseState
initialState=
{
selectedColor
}
>
{
(
selectedColor
,
updateSelectedColor
)
=>
{
{
(
selectedColor
,
updateSelectedColor
)
=>
{
return
<
NamedColorsPalette
color=
{
selectedColor
}
onChange=
{
updateSelectedColor
}
/>;
return
renderComponentWithTheme
(
NamedColorsPalette
,
{
color
:
selectedColor
,
onChange
:
updateSelectedColor
,
});
}
}
}
}
</
UseState
>
</
UseState
>
);
);
...
@@ -45,7 +49,10 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors',
...
@@ -45,7 +49,10 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors',
return
(
return
(
<
UseState
initialState=
{
selectedColor
}
>
<
UseState
initialState=
{
selectedColor
}
>
{
(
selectedColor
,
updateSelectedColor
)
=>
{
{
(
selectedColor
,
updateSelectedColor
)
=>
{
return
<
NamedColorsPalette
color=
{
getColorName
(
selectedColor
)
}
onChange=
{
updateSelectedColor
}
/>;
return
renderComponentWithTheme
(
NamedColorsPalette
,
{
color
:
getColorName
(
selectedColor
),
onChange
:
updateSelectedColor
,
});
}
}
}
}
</
UseState
>
</
UseState
>
);
);
...
...
packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx
View file @
7762d72a
import
React
from
'react'
;
import
React
from
'react'
;
import
{
storiesOf
}
from
'@storybook/react'
;
import
{
storiesOf
}
from
'@storybook/react'
;
import
{
withKnobs
}
from
'@storybook/addon-knobs'
;
import
SpectrumPalette
from
'./SpectrumPalette'
;
import
SpectrumPalette
from
'./SpectrumPalette'
;
import
{
withCenteredStory
}
from
'../../utils/storybook/withCenteredStory'
;
import
{
withCenteredStory
}
from
'../../utils/storybook/withCenteredStory'
;
import
{
UseState
}
from
'../../utils/storybook/UseState'
;
import
{
UseState
}
from
'../../utils/storybook/UseState'
;
import
{
getThemeKnob
}
from
'../../utils/storybook/themeKnob
'
;
import
{
renderComponentWithTheme
}
from
'../../utils/storybook/withTheme
'
;
const
SpectrumPaletteStories
=
storiesOf
(
'UI/ColorPicker/Palettes/SpectrumPalette'
,
module
);
const
SpectrumPaletteStories
=
storiesOf
(
'UI/ColorPicker/Palettes/SpectrumPalette'
,
module
);
SpectrumPaletteStories
.
addDecorator
(
withCenteredStory
)
.
addDecorator
(
withKnobs
)
;
SpectrumPaletteStories
.
addDecorator
(
withCenteredStory
);
SpectrumPaletteStories
.
add
(
'default'
,
()
=>
{
SpectrumPaletteStories
.
add
(
'default'
,
()
=>
{
const
selectedTheme
=
getThemeKnob
();
return
(
return
(
<
UseState
initialState=
"red"
>
<
UseState
initialState=
"red"
>
{
(
selectedColor
,
updateSelectedColor
)
=>
{
{
(
selectedColor
,
updateSelectedColor
)
=>
{
return
<
SpectrumPalette
theme=
{
selectedTheme
}
color=
{
selectedColor
}
onChange=
{
updateSelectedColor
}
/>
;
return
renderComponentWithTheme
(
SpectrumPalette
,
{
color
:
selectedColor
,
onChange
:
updateSelectedColor
})
;
}
}
}
}
</
UseState
>
</
UseState
>
);
);
...
...
packages/grafana-ui/src/utils/storybook/withTheme.tsx
View file @
7762d72a
...
@@ -9,7 +9,6 @@ const ThemableStory: React.FunctionComponent<{}> = ({ children }) => {
...
@@ -9,7 +9,6 @@ const ThemableStory: React.FunctionComponent<{}> = ({ children }) => {
const
themeKnob
=
select
(
const
themeKnob
=
select
(
'Theme'
,
'Theme'
,
{
{
Default
:
GrafanaThemeType
.
Dark
,
Light
:
GrafanaThemeType
.
Light
,
Light
:
GrafanaThemeType
.
Light
,
Dark
:
GrafanaThemeType
.
Dark
,
Dark
:
GrafanaThemeType
.
Dark
,
},
},
...
@@ -24,6 +23,8 @@ const ThemableStory: React.FunctionComponent<{}> = ({ children }) => {
...
@@ -24,6 +23,8 @@ const ThemableStory: React.FunctionComponent<{}> = ({ children }) => {
);
);
};
};
// Temporary solution. When we update to Storybook V5 we will be able to pass data from decorator to story
// https://github.com/storybooks/storybook/issues/340#issuecomment-456013702
export
const
renderComponentWithTheme
=
(
component
:
React
.
ComponentType
<
any
>
,
props
:
any
)
=>
{
export
const
renderComponentWithTheme
=
(
component
:
React
.
ComponentType
<
any
>
,
props
:
any
)
=>
{
return
(
return
(
<
ThemeContext
.
Consumer
>
<
ThemeContext
.
Consumer
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment