feat: theme colors and ColorCard

.github/workflows/build.yml

@@ -4,20 +4,19 @@ name: Build
 
 on:
   push:
-    branches: ['master']
+    branches: ['master', 'develop']
   pull_request:
-    branches: ['master']
+    branches: ['master', 'develop']
 
 jobs:
   build:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [14.x, 16.x, 18.x]
     steps:
       - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
       - run: yarn

.github/workflows/lint.yml

@@ -4,21 +4,14 @@ name: Lint
 
 on:
   push:
-    branches: ['master']
+    branches: ['master', 'develop']
   pull_request:
-    branches: ['master']
+    branches: ['master', 'develop']
 
 jobs:
   lint:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
     steps:
       - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
       - run: yarn
       - run: npx eslint packages

.github/workflows/secscan.yml

@@ -0,0 +1,21 @@
+name: Security
+
+on:
+  push:
+    branches: ['master', 'develop']
+  pull_request:
+    branches: ['master', 'develop']
+
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    name: njsscan code scanning
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ajinabraham/njsscan-action@master
+        id: njsscan
+        with:
+          args: '. --sarif --output results.sarif || true'
+      - uses: github/codeql-action/upload-sarif@v2
+        with:
+          sarif_file: results.sarif

.github/workflows/tests.yml

@@ -4,21 +4,16 @@ name: Tests
 
 on:
   push:
-    branches: ['master']
+    branches: ['master', 'develop']
   pull_request:
-    branches: ['master']
+    branches: ['master', 'develop']
 
 jobs:
   test:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
     steps:
       - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
       - run: yarn
-      - run: npx vitest
+      - run: npx vitest --coverage
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v3

.gitignore

@@ -1,3 +1,4 @@
+coverage/
 node_modules/
 storybook-static/
 dist/

.storybook/globalStyles.css

@@ -0,0 +1,5 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}

.storybook/main.js

@@ -1,7 +1,7 @@
 module.exports = {
   "stories": [
     "../stories/**/*.stories.mdx",
-    "../packages/**/stories/**/*.stories.@(js|jsx|ts|tsx)"
+    "../packages/**/stories/**/*.stories.@(js|jsx|ts|tsx|mdx)"
   ],
   "addons": [
     "@storybook/addon-links",

.storybook/preview.js

@@ -1,9 +1,11 @@
+import './globalStyles.css'
+
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+}

README.md

@@ -1,8 +1,10 @@
 [![Build](https://github.com/API-Creator-Brazil/Furious-UI/actions/workflows/build.yml/badge.svg?branch=master)](https://github.com/API-Creator-Brazil/Furious-UI/actions/workflows/build.yml)
 [![Lint](https://github.com/API-Creator-Brazil/Furious-UI/actions/workflows/lint.yml/badge.svg)](https://github.com/API-Creator-Brazil/Furious-UI/actions/workflows/lint.yml)
 [![Tests](https://github.com/API-Creator-Brazil/Furious-UI/actions/workflows/tests.yml/badge.svg)](https://github.com/API-Creator-Brazil/Furious-UI/actions/workflows/tests.yml)
+[![Security](https://github.com/API-Creator-Brazil/Furious-UI/actions/workflows/secscan.yml/badge.svg?branch=master)](https://github.com/API-Creator-Brazil/Furious-UI/actions/workflows/secscan.yml)
 [![Publish](https://github.com/API-Creator-Brazil/Furious-UI/actions/workflows/publish.yml/badge.svg?branch=master)](https://github.com/API-Creator-Brazil/Furious-UI/actions/workflows/publish.yml)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/7ad1080a-bec4-4611-bf02-cead4347209d/deploy-status)](https://app.netlify.com/sites/furious-ui/deploys)
+[![codecov](https://codecov.io/gh/API-Creator-Brazil/Furious-UI/branch/master/graph/badge.svg?token=S7JYE7RAWW)](https://codecov.io/gh/API-Creator-Brazil/Furious-UI)
 
 # Description
 

package.json

@@ -22,8 +22,7 @@
     "test": "vitest",
     "build": "tsc && vite build",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "semantic-release": "semantic-release"
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@emotion/react": "^11.10.6",
@@ -48,8 +47,10 @@
     "@testing-library/react": "^14.0.0",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
+    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@vitejs/plugin-react": "^3.1.0",
+    "@vitest/coverage-c8": "^0.29.2",
     "babel-loader": "^8.3.0",
     "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.6.0",

packages/ColorCard/src/ColorCard.styles.ts

@@ -0,0 +1,23 @@
+import styled, { css } from 'styled-components'
+
+interface ContainerProps {
+  color: string
+  active?: boolean
+}
+
+export const Container = styled.div<ContainerProps>`
+  width: 100px;
+  height: 100px;
+
+  border-radius: 4px;
+
+  ${({ color }) => css`
+    background-color: ${color};
+  `}
+
+  ${({ active }) =>
+    active === true &&
+    css`
+      border: 2px solid black;
+    `}
+`

packages/ColorCard/src/ColorCard.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Container } from './ColorCard.styles'
+
+interface ColorCardProps {
+  color: string
+  active?: boolean
+}
+
+export const ColorCard: React.FC<ColorCardProps> = ({ color, active }) => {
+  return <Container color={color} active={active} />
+}

packages/ColorCard/stories/ColorCard.stories.mdx

@@ -0,0 +1,63 @@
+import { Canvas, Meta } from '@storybook/addon-docs'
+
+import { ColorCard } from '../src/ColorCard'
+import { successColors } from '../../Theme/src/defaultTheme'
+
+<Meta title="Components/Utils/ColorCard" component={ColorCard} />
+
+# ColorCard
+
+Just a sample div with color.
+
+```ts
+import React from 'react'
+import { Container } from './ColorCard.styles'
+import styled, { css } from 'styled-components'
+
+interface ColorCardProps {
+  color: string
+}
+
+interface ContainerProps {
+  color: string
+  active?: boolean
+}
+
+export const Container = styled.div<ContainerProps>`
+  width: 100px;
+  height: 100px;
+
+  ${({ color }) => css`
+    background-color: ${color};
+  `}
+
+  ${({ active, theme }) =>
+    active === true &&
+    css`
+      border: 1px solid ${theme.colors.foreground.dark};
+    `}
+`
+
+export const ColorCard: React.FC<ColorCardProps> = ({ color }) => {
+  return <Container color={color} />
+}
+```
+
+## Usage
+
+<Canvas>
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'row',
+    }}
+  >
+    {successColors.map((color, index) => (
+      <ColorCard
+        key={color}
+        color={color}
+        active={index === 8 || index === 6 || index === 4}
+      />
+    ))}
+  </div>
+</Canvas>

packages/Theme/src/FuriousThemeProvider.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useMemo, useState } from 'react'
+import { DefaultTheme } from './defaultTheme'
+import type { FuriousThemeContextProps, FuriousTheme } from './interfaces'
+import { ThemeProvider } from 'styled-components'
+
+export const FuriousThemeContext = createContext<FuriousThemeContextProps>(
+  {} as FuriousThemeContextProps
+)
+
+interface FuriousThemeProviderProps {
+  theme?: FuriousTheme
+  children: React.ReactNode
+}
+
+export const FuriousThemeProvider: React.FC<FuriousThemeProviderProps> = ({
+  children,
+  theme: injectedTheme,
+}) => {
+  const [runtimeTheme, setRuntimeTheme] = useState<FuriousTheme | undefined>(
+    undefined
+  )
+
+  const theme = useMemo(() => {
+    if (runtimeTheme !== undefined) {
+      return runtimeTheme
+    }
+
+    if (injectedTheme !== undefined) {
+      return injectedTheme
+    }
+
+    return DefaultTheme
+  }, [injectedTheme, runtimeTheme])
+
+  const value: FuriousThemeContextProps = useMemo(
+    () => ({
+      theme,
+      setTheme: setRuntimeTheme,
+    }),
+    [theme, setRuntimeTheme]
+  )
+
+  return (
+    <FuriousThemeContext.Provider value={value}>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </FuriousThemeContext.Provider>
+  )
+}