Merge pull request #14 from squidit/feature/add-more-components

✨ New settings

.storybook/decorators.tsx

@@ -1,15 +1,47 @@
-import React from 'react'
-
-export const NdsStyles = (Story) => (
-  <div style={{ margin: '3em' }}>
-    <style>
-      {`
-      :root {
-        --nds-primary-color: 26, 67, 56;
-        --nds-secondary-color: 0, 101, 83;
-        };
-      `}
-    </style>
-    <Story />
-  </div>
-)
+import React, { Suspense, useEffect } from 'react'
+import { I18nextProvider } from 'react-i18next'
+import i18n from '../src/i18n'
+import onThemeChange from './theme-observable'
+
+export const NdsStyles = (Story, { globals }) => {
+  const { locale } = globals
+
+  useEffect(() => {
+    i18n.changeLanguage(locale)
+  }, [locale])
+
+  const setThemeForComponents = (theme = 'dark') => {
+    const html = document.getElementsByTagName('html')[0]
+    html.classList.remove('light', 'dark')
+    html.classList.add(theme)
+
+    const docsStoryElements = document.querySelectorAll('.docs-story')
+    if (docsStoryElements?.length) {
+      docsStoryElements.forEach((docsStoryElement) => {
+        docsStoryElement.setAttribute('style', `background-color: var(--background_secondary) !important`)
+      })
+    }
+  }
+
+  useEffect(() => {
+    setThemeForComponents(globals?.themeForComponents)
+  }, [globals?.themeForComponents])
+
+  return (
+    <Suspense fallback={<div>loading translations...</div>}>
+      <I18nextProvider i18n={i18n}>
+        <div>
+          <style>
+            {`
+          :root {
+            --nds-primary-color: 26, 67, 56;
+            --nds-secondary-color: 0, 101, 83;
+          };
+        `}
+          </style>
+          <Story />
+        </div>
+      </I18nextProvider>
+    </Suspense>
+  )
+}

.storybook/main.ts

@@ -7,12 +7,22 @@ const config: StorybookConfig = {
   stories: ['../src/**/*.stories.tsx', '../src/**/*.mdx'],
   addons: [
     '@storybook/addon-links',
-    '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
     '@storybook/addon-styling-webpack',
-    '@storybook/addon-docs',
     '@storybook/addon-actions',
+    {
+      name: '@storybook/addon-docs',
+      options: { configureJSX: false },
+    },
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+      },
+    },
+    '@storybook/addon-mdx-gfm',
+    '@chromatic-com/storybook'
   ],
   framework: {
     name: '@storybook/react-vite',

.storybook/manager-head.html

@@ -0,0 +1,2 @@
+<link rel="shortcut icon" href="https://storage.googleapis.com/web-hub/icons/favicon.ico">
+<link rel="icon" type="image/png" href="https://storage.googleapis.com/web-hub/icons/192x192.png" sizes="192x192">

.storybook/manager.tsx

@@ -1,6 +1,7 @@
 import { addons } from '@storybook/manager-api'
-import squidTheme from './squid.theme'
+import { themes } from '@storybook/theming'
+import squidThemeDark from './themes/squid-theme-dark'
 
 addons.setConfig({
-  theme: squidTheme,
+  theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? { ...themes.dark, ...squidThemeDark } : { ...themes.light },
 })

.storybook/preview.tsx

@@ -1,23 +1,47 @@
 import type { Parameters } from '@storybook/react'
 import DocumentationTemplate from './documentation.template.mdx'
 import { NdsStyles } from './decorators'
+import i18n from '../src/i18n'
+import { themes } from '@storybook/theming'
 
 import '../src/styles.scss'
 
-export const parameters: Parameters = {
-  backgrounds: {
-    default: 'dark',
-    values: [
-      { name: 'light', value: '#f5f5f5' },
-      { name: 'dark', value: '#333333' },
-    ],
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', title: 'English' },
+        { value: 'pt', title: 'Português' },
+        { value: 'es', title: 'Español' },
+      ],
+      showName: true,
+    },
+  },
+  themeForComponents: {
+    name: 'Theme',
+    description: 'Theme for components',
+    defaultValue: window?.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'light', title: 'Light' },
+        { value: 'dark', title: 'Dark' },
+      ],
+    },
   },
+}
+
+export const parameters: Parameters = {
+  i18n,
   viewMode: 'docs',
   previewTabs: {
     'storybook/docs/panel': { index: -1 },
   },
   actions: {
-    argTypesRegex: '^on.*',
+    // argTypesRegex: '^on.*',
   },
   controls: {
     sort: 'requiredFirst',
@@ -28,6 +52,7 @@ export const parameters: Parameters = {
   },
   docs: {
     page: DocumentationTemplate,
+    theme: window?.matchMedia('(prefers-color-scheme: dark)').matches ? themes.dark : themes.light,
   },
   options: {
     storySort: {

.storybook/theme-context.tsx

@@ -0,0 +1,20 @@
+import React, { createContext, useContext, useState } from 'react'
+
+interface ThemeContextProps {
+  theme: string
+  toggleTheme: () => void
+}
+
+export const ThemeContext = createContext<ThemeContextProps | null>(null)
+
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState('light')
+
+  const toggleTheme = () => {
+    setTheme(theme === 'light' ? 'dark' : 'light')
+  }
+
+  return <ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>
+}
+
+export const useTheme = () => useContext(ThemeContext)

.storybook/theme-observable.tsx

@@ -0,0 +1,2 @@
+import { BehaviorSubject } from 'rxjs'
+export default new BehaviorSubject<'light' | 'dark'>('dark')

.storybook/themes/squid-theme-dark.tsx

@@ -0,0 +1,35 @@
+import { create } from '@storybook/theming'
+
+export default create({
+  base: 'dark',
+
+  brandTitle: 'Squid',
+  brandUrl: '/',
+  brandImage: 'https://squidit.com.br/wp-content/themes/squid/assets/img/logo.svg',
+  brandTarget: '_self',
+
+  colorPrimary: '#ffffff',
+  colorSecondary: '#b61658',
+
+  // UI
+  appBg: '#282828',
+  appContentBg: '#282828',
+  // appBorderColor: '#585C6D',
+  appBorderRadius: 4,
+
+  // Text colors
+  textColor: '#f7f7f7',
+  textInverseColor: '#f7f7f7',
+
+  // Toolbar default and active colors
+  barTextColor: '#f7f7f7',
+  barSelectedColor: '#f7f7f7',
+  barHoverColor: '#f7f7f7',
+  barBg: '#282828',
+
+  // Form colors
+  inputBg: '#282828',
+  // inputBorder: '#10162F',
+  inputTextColor: '#f7f7f7',
+  inputBorderRadius: 2,
+})

README.md

@@ -1,30 +1,39 @@
 <p align="center">
-    <img
-    src="https://github.com/squidit/react-css/assets/56000334/88ce8652-37b0-4e34-af91-2f82a996fdae"
-    width="256px" align="center" alt="logo" />
-    <h1 align="center">@squidit/react-css</h1>
-    <p align="center">This repository contains a React component library developed to facilitate the creation of consistent and elegant interfaces, following a custom style guide. The included components are highly customizable and designed to be reusable across a variety of React projects.</p>
+  <img src="https://github.com/squidit/react-css/assets/56000334/88ce8652-37b0-4e34-af91-2f82a996fdae" width="256px" align="center" alt="logo" />
+
+  <h1 align="center">@squidit/react-css</h1>
+  <p align="center">This repository contains a React component library developed to facilitate the creation of consistent and elegant interfaces, following a custom style guide. The included components are highly customizable and designed to be reusable across a variety of React projects.</p>
 </p>
 
-## Table of contents
+## Welcome to Squid Design System
+
+⚡ Get the experience by browsing one of [our platforms](https://app.squidit.com.br)!
+
+This framework provides low level utilities and UI components for building
+custom experiences.
+
+<hr style={{ borderWidth: "0", margin: "2rem 0" }} />
+
+## Style
+
+Our Design System can be seen [here](https://css.squidit.com.br/styleguide)
 
-- [Installation](#installation)
-- [How to Use](#how-to-use)
-- [Customization](#customization)
-- [License](#license)
+## Components
 
+UI Components are currently offered as React (Web) components.
 
 ## Installation
 
-1. To use this library in your React project, you can install it via npm or yarn:
+1. Node version >= 18
+2. To use this library in your React project, you can install it via npm or yarn:
 
 ```bash
 npm install @squidit/css @squidit/react-css
 # or
 yarn add @squidit/css @squidit/react-css
 ```
 
-2. Configure css in your project according to the @squidit/css documentation described in the project's [README](https://github.com/squidit/css/blob/master/README.md)
+3. Configure css in your project according to the @squidit/css documentation described in the project's [README](https://github.com/squidit/css/blob/master/README.md)
 
 ## How to Use