feat: #148

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,38 +1,39 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
+title: '🐛 bug: '
+labels: 'bug'
+assignees: 'mauroerta'
 
 ---
 
-**Describe the bug**
-A clear and concise description of what the bug is.
+## Describe the bug
+
+> A clear and concise description of what the bug is.
+
+## To Reproduce
 
-**To Reproduce**
 Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
+
+1. Set the theme '...'
+2. Call this method '....'
+3. Run the test '....'
 4. See error
 
-**Expected behavior**
-A clear and concise description of what you expected to happen.
+## Expected behavior
+
+> A clear and concise description of what you expected to happen.
+
+## Screenshots
+
+> If applicable, add screenshots to help explain your problem.
 
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
+## Environment
 
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+- Packages: [e.g. @morfeo/core v1.0, @morfeo/react v1.0]
+- OS: [e.g. iOS, MacOS, Windows]
+- Platform: [e.g. chrome, safari, iOS (React Native)]
 
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+## Additional context
 
-**Additional context**
-Add any other context about the problem here.
+> Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +1,25 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
+title: '✨ feat: '
 labels: ''
-assignees: ''
+assignees: 'mauroerta'
 
 ---
 
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+## 🤔 Problem
 
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
+> Is your feature request related to a problem? Please describe.
+> A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
+## 🚑 Solution
 
-**Additional context**
-Add any other context or screenshots about the feature request here.
+> A clear and concise description of the solution you'd like.
+
+## 💡 Alternatives I've considered
+
+> A clear and concise description of any alternative solutions or features you've considered.
+
+## 📝 Additional context
+
+> Add any other context or screenshots about the feature request here.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,27 +1,29 @@
-## Proposed changes
+# Proposed changes
 
-Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request. If it fixes a bug or resolves a feature request, be sure to link to that issue.
+> Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request. If it fixes a bug or resolves a feature request, be sure to link to that issue.
 
 ## Types of changes
 
-What types of changes does your code introduce to morfeo?
-_Put an `x` in the boxes that apply_
+> What types of changes does your code introduce to morfeo?
+> _Put an `x` in the boxes that apply_
 
-- [ ] Bugfix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] Documentation Update (if none of the other choices apply)
+- [ ] 🐛 Bugfix (non-breaking change which fixes an issue)
+- [ ] ✨ New feature (non-breaking change which adds functionality or enhancements)
+- [ ] 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] ✅ Tests (added tests for an existing feature)
+- [ ] 📚 Documentation Update (if none of the other choices apply)
+- [ ] 🙌 Other (please, write a clear and concise description of the proposal in the section above)
 
 ## Checklist
 
-_Put an `x` in the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code._
+> _Put an `x` in the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code._
 
-- [ ] I have read the [CONTRIBUTING](https://github.com/VLK-STUDIO/morfeo/blob/main/CONTRIBUTING.md) doc
-- [ ] Lint and unit tests pass locally with my changes
-- [ ] I have added tests that prove my fix is effective or that my feature works
-- [ ] I have added necessary documentation (if appropriate)
-- [ ] Any dependent changes have been merged and published in downstream modules
+- [ ] 👀 I have read the [CONTRIBUTING](https://github.com/VLK-STUDIO/morfeo/blob/main/CONTRIBUTING.md) doc
+- [ ] ✅ Lint and unit tests pass locally with my changes
+- [ ] 🧪 I have added tests that prove my fix is effective or that my feature works
+- [ ] 📚 I have added necessary documentation (if appropriate)
+- [ ] 🔀 Any dependent changes have been merged and published in downstream modules
 
 ## Further comments
 
-If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc...
+> If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc...

docs/docs/Features/easy-to-test.mdx

@@ -58,16 +58,16 @@ The following component is used to switch the theme from light to dark and vice-
 
 ```tsx title="ThemeToggle.tsx"
 import { useState, useCallback } from 'react';
-import { Theme, morfeo } from '@morfeo/react';
+import { Theme, morfeo, useCurrentTheme } from '@morfeo/react';
 import { Button } from './Button';
 
 export const ThemeToggle: React.FC = () => {
-  const [isLight, setIsLight] = useState(morfeo.getCurrentTheme() === 'light');
+  const [currentTheme, setCurrentTheme] = useCurrentTheme();
+  const isLight = currentTheme === 'light';
 
-  const onClick = useCallback(() => {
-    morfeo.setCurrentTheme(isLight ? 'dark' : 'light');
-    setIsLight(!isLight);
-  }, [isLight, light, dark]);
+  const onClick = () => {
+    setCurrentTheme(isLight ? 'dark' : 'light');
+  };
 
   return <Button onClick={onClick}>{isLight ? `🌙` : `☀️`}</Button>;
 };

docs/docs/Features/single-source-of-truth.mdx

@@ -16,14 +16,17 @@ All the style generated by morfeo is strongly dependent on this object, this wil
 ```typescript title="morfeo style object"
 const style = {
   padding: 's',
-  bg: 'primary',
+  bg: 'background',
   borderRadius: 'm',
+  color: 'text',
 };
 ```
 
 Will be converted in a different CSS-in-JS object depending on how you configure your theme:
 
-<ThemeSelect style={{ padding: 's', bg: 'primary', borderRadius: 'm' }} />
+<ThemeSelect
+  style={{ padding: 's', bg: 'background', borderRadius: 'm', color: 'text' }}
+/>
 
 ---
 

docs/docs/Packages/hooks.mdx

@@ -21,6 +21,7 @@ yarn add @morfeo/hooks
 - [useTheme](#usetheme)
   - [useThemeSlice](#usethemeslice)
   - [useThemeValue](#usethemevalue)
+- [useCurrentTheme](#usecurrenttheme)
 - [useStyles](#usestyles)
   - [useStyle](#usestyle)
 
@@ -48,17 +49,24 @@ function App() {
 
 Use this hook to get the current theme and use it inside a components:
 
-```jsx
-const MyComponent: React.FC = () => {
+```jsx live
+function MyComponent() {
   const theme = useTheme();
 
   return (
-    <div>
-      <p>My primary color is: {theme.colors.primary}</p>
-      <p>My xxl space is: {theme.spaces.xxl}</p>
-    </div>
+    <>
+      <p>
+        My primary color is:{' '}
+        <code style={{ color: theme.colors.primary }}>
+          {theme.colors.primary}
+        </code>
+      </p>
+      <p>
+        My xl space is: <code>{theme.spacings.xl}</code>
+      </p>
+    </>
   );
-};
+}
 ```
 
 :::note
@@ -69,43 +77,81 @@ Most of the time you don't need the whole theme, but just a slice or single valu
 
 ### useThemeSlice
 
-```jsx
-const MyComponent: React.FC = () => {
+```jsx live
+function MyComponent() {
   const colors = useThemeSlice('colors');
 
   return (
-    <div>
-      <p>My primary color is: {colors.primary}</p>
-      <p>My secondary color is: {colors.secondary}</p>
-    </div>
+    <>
+      <p>
+        My primary color is:{' '}
+        <code style={{ color: colors.primary }}>{colors.primary}</code>
+      </p>
+      <p>
+        My secondary color is:{' '}
+        <code style={{ color: colors.secondary }}>{colors.secondary}</code>
+      </p>
+    </>
   );
-};
+}
 ```
 
 ### useThemeValue
 
-```jsx
-const MyComponent: React.FC = () => {
+```jsx live
+function MyComponent() {
   const primaryColor = useThemeValue('colors', 'primary');
 
   return (
-    <div>
-      <p>My primary color is: {primaryColor}</p>
-    </div>
+    <p>
+      My primary color is:{' '}
+      <code style={{ color: primaryColor }}>{primaryColor}</code>
+    </p>
+  );
+}
+```
+
+## useCurrentTheme
+
+A hook to retrieve the current theme name and a callback to change it,
+they correspond to `morfeo.getCurrentTheme` and `morfeo.setCurrentTheme` of the core-api.
+
+```jsx live
+function Button() {
+  // highlight-start
+  const [currentTheme, setCurrentTheme] = useCurrentTheme();
+  // highlight-end
+
+  const style = useStyle({
+    componentName: 'Button',
+    color: 'text',
+    bg: 'background',
+  });
+
+  const onClick = () => {
+    // highlight-start
+    setCurrentTheme(currentTheme === 'light' ? 'dark' : 'light');
+    // highlight-end
+  };
+
+  return (
+    <button onClick={onClick} style={style}>
+      Toggle theme
+    </button>
   );
-};
+}
 ```
 
 ## useStyles
 
 If you don't need the theme, but to generate a style based on the theme; The hooks `useStyles` and `useStyle` are made for this reason:
 
-```jsx
-const MyComponent: React.FC = () => {
+```jsx live
+function MyComponent() {
   const { agreeStyle, disagreeStyle, textStyle } = useStyles({
-    agreeStyle: { componentName: 'Button', variant: 'success' },
+    agreeStyle: { componentName: 'Button', variant: 'success', mb: 'm' },
     disagreeStyle: { componentName: 'Button' },
-    textStyle: { fontSize: '2xl', color: 'white' },
+    textStyle: { fontSize: 'xl', color: 'text' },
   });
 
   return (
@@ -115,22 +161,22 @@ const MyComponent: React.FC = () => {
       <button style={disagreeStyle}>What about a Coke? 🥤</button>
     </div>
   );
-};
+}
 ```
 
 ## useStyle
 
 Use it if you need to generate just one style:
 
-```jsx
-const AgreeButton: React.FC = ({ children }) => {
-  const buttonStyle = useStyles({
+```jsx live
+function AgreeButton() {
+  const buttonStyle = useStyle({
     componentName: 'Button',
     variant: 'success',
   });
 
-  return <button style={buttonStyle}>{children}</button>;
-};
+  return <button style={buttonStyle}>Agree</button>;
+}
 ```
 
 :::note

docs/src/components/CodeExample/CodeExample.jsx

@@ -21,10 +21,10 @@ export function CodeExample() {
       variant: 'primary',
     }
   });
+  const [currentTheme, setCurrentTheme] = useCurrentTheme();
 
   const onClick = () => {
-    const current = morfeo.getCurrentTheme();
-    morfeo.setCurrentTheme(current === 'light' ? 'dark' : 'light')
+    setCurrentTheme(currentTheme === 'light' ? 'dark' : 'light')
   }
 
   return (