Merge pull request #1821 from natura-cosmeticos/DSY-4627

Dsy 4627 update lib Icons
natura-cosmeticos · Apr 30, 2024 · 095b7fd · 095b7fd
2 parents 213084e + f3cb80a
commit 095b7fd
Show file tree

Hide file tree

Showing 4 changed files with 165 additions and 13 deletions.
diff --git a/packages/react/.storybook/preview-head.html b/packages/react/.storybook/preview-head.html
@@ -1,5 +1,5 @@
 <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@1.22.1/dist/natds-icons.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@1.24.1/dist/natds-icons.css" />
 
 <link href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-themes@latest/dist/assets/aesop_fonts.css" rel="stylesheet" />
 <link href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-themes@latest/dist/assets/avon_fonts.css" rel="stylesheet" />

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -2,7 +2,7 @@
   "name": "@naturacosmeticos/natds-react",
   "displayName": "NatDS-React",
   "description": "A collection of components from Natura Design System for React",
-  "version": "2.58.2",
+  "version": "2.59.0-alpha.DSY-4627.1.0",
   "private": false,
   "keywords": [
     "design-system",
@@ -57,8 +57,8 @@
     "generate": "yarn plop --plopfile ./generators/plopfile.js"
   },
   "dependencies": {
-    "@naturacosmeticos/natds-icons": "1.22.1",
-    "@naturacosmeticos/natds-themes": "0.72.1",
+    "@naturacosmeticos/natds-icons": "1.24.1",
+    "@naturacosmeticos/natds-themes": "0.73.1",
     "react-jss": "10.9.0"
   },
   "devDependencies": {

diff --git a/packages/react/src/components/Icon/Icon.stories.tsx b/packages/react/src/components/Icon/Icon.stories.tsx
@@ -1,6 +1,13 @@
-import React from 'react'
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable no-plusplus */
+/* eslint-disable max-len */
+import React, { useState } from 'react'
 import { Story, Meta } from '@storybook/react'
+import { iconNames, IconName } from '@naturacosmeticos/natds-icons'
+import Autocomplete from '../Autocomplete/Autocomplete'
 import { Icon, IconProps } from '.'
+import { OptionProps } from '../Autocomplete/Autocomplete.props'
+import StoryContainer from '../../helpers/StoryContainer'
 
 const componentStatus = `
 > A helper component to display icons from @naturacosmeticos/natds-icons package.
@@ -30,3 +37,148 @@ export default {
 
 export const Playground: Story<IconProps> = (args) => <Icon {...args} />
 export const Icons: Story<IconProps> = (args) => <Icon {...args} />
+
+export const SearchIcon: Story<IconProps> = (args) => {
+  const [value, setValue] = useState(iconNames[0])
+  const [filterOptionsN] = useState<OptionProps[]>(iconNames.map((icon) => ({ value: icon, label: icon })))
+  const [filterOptions, setFilterOptions] = useState<OptionProps[]>(iconNames.map((icon) => ({ value: icon, label: icon })))
+
+  const handleSelect = (values: OptionProps) => {
+    setValue(values.label)
+    handleChange(values.label)
+  }
+  const handleChange = (values: string) => {
+    setValue(values)
+
+    const newFilter = filterOptionsN.filter(
+      (opt) => opt.label.toLowerCase().includes(values.toLowerCase())
+    )
+
+    if (newFilter.length > 0) {
+      setFilterOptions(newFilter)
+    } else {
+      setFilterOptions([{ value: 'false', label: 'false' }])
+    }
+  }
+  return (
+    <StoryContainer>
+      <div style={{ display: 'flex', gap: 20 }}>
+        <div style={{ minWidth: 280 }}>
+          <Autocomplete
+            onChange={(e) => handleChange(e.target.value)}
+            options={filterOptions}
+            value={value}
+            handleSelect={handleSelect}
+          />
+
+        </div>
+        <div style={{
+          display: 'flex', gap: 20, width: '480px', flexWrap: 'wrap'
+        }}
+        >
+
+          {
+        filterOptions.map((names) => (
+          <>
+            <div style={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center ',
+              padding: '8px',
+              backgroundColor: '#ffffff',
+              border: '1px solid #ccc',
+              width: '180px'
+            }}
+            >
+              <Icon color="primary" name={names.value as IconName} />
+              <p>{names.value}</p>
+            </div>
+
+          </>
+
+        ))
+      }
+        </div>
+
+      </div>
+    </StoryContainer>
+  )
+}
+SearchIcon.args = { ...Playground.args }
+
+export const ListIcon: Story<IconProps> = (args) => {
+  const [filterOptionsN] = useState<OptionProps[]>(iconNames.map((icon) => ({ value: icon, label: icon })))
+  const [filterOptions] = useState<OptionProps[]>(filterOptionsN)
+
+  const countIcons = () => {
+    const counts = {
+      filled: 1,
+      outlined: 0,
+      categories: {} as { [key: string]: number }
+    }
+
+    filterOptions.forEach((option) => {
+      const parts = option.value.split('-')
+      if (parts[0] === 'filled') {
+        counts.filled++
+      } else if (parts[0] === 'outlined') {
+        counts.outlined++
+      }
+
+      const category = parts[1]
+      if (counts.categories[category]) {
+        counts.categories[category]++
+      } else {
+        counts.categories[category] = 1
+      }
+    })
+
+    return counts
+  }
+
+  const iconCounts = countIcons()
+
+  return (
+    <StoryContainer>
+      <div style={{ display: 'flex', gap: 20 }}>
+        <div style={{
+          minWidth: 280, backgroundColor: '#fff', boxSizing: 'border-box', padding: '8px'
+        }}
+        >
+          {Object.entries(iconCounts.categories).map(([category, count]) => (
+            <p key={category}>
+              {category}
+              :
+              {' '}
+              {count}
+            </p>
+          ))}
+          <p>
+            Filled:
+            {' '}
+            {iconCounts.filled}
+          </p>
+          <p>
+            Outlined:
+            {' '}
+            {iconCounts.outlined}
+          </p>
+          <p>
+            Total de Icons:
+            {' '}
+            {filterOptionsN.length}
+          </p>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          {filterOptions.map((option, index) => (
+            <ul key={index} style={{ display: 'flex', flexDirection: 'column' }}>
+              <li>{option.value}</li>
+            </ul>
+          ))}
+        </div>
+      </div>
+    </StoryContainer>
+  )
+}
+ListIcon.args = { ...Playground.args }
diff --git a/yarn.lock b/yarn.lock
@@ -2693,10 +2693,10 @@
   resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-icons/-/natds-icons-1.11.3.tgz#e7de13d8fde2c44f9c68e73de75f02906fefdfb8"
   integrity sha512-NQVrs5aUaCc7eyrPRh5TlgRYZqT0SXDHq/VVcWUG/R7j9wzFFvCs/IbcAjeNJR4cVNDqq2ruAIl9ZnHanw5Qpw==
 
-"@naturacosmeticos/natds-icons@1.22.1":
-  version "1.22.1"
-  resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-icons/-/natds-icons-1.22.1.tgz#915eb4e0e62d2dc478c28149bd611e0137064e15"
-  integrity sha512-rHI0yI7bMvEJ2Akl/4rTirCp5KPeUYA3PMhJB3DyCRFVl1fYvtIN5H5Mix9rmChAwVW7AgJy1OMwaaXQYicA9g==
+"@naturacosmeticos/natds-icons@1.24.1":
+  version "1.24.1"
+  resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-icons/-/natds-icons-1.24.1.tgz#c005b4a7caec0b72bf6530ec618ef6cb6dc7bf55"
+  integrity sha512-3A4NnaU35QYDjLg+71/9vt6c7wnEeZQMpseCg6VzrvzrdGNmmkkqK9iz9/nPPCNzymVypeJ/4kM0LQ5lLEnNsA==
 
 "@naturacosmeticos/[email protected]":
   version "0.70.0"
@@ -2707,10 +2707,10 @@
     svg2vectordrawable "2.6.26"
     webp-converter "^2.3.3"
 
-"@naturacosmeticos/natds-themes@0.72.1":
-  version "0.72.1"
-  resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-themes/-/natds-themes-0.72.1.tgz#e79723b1823c23a74cc2b5ed390a88fb4bdec02e"
-  integrity sha512-Y8xB6BnTevaXF9bWA4JFLAdHlDISIdfTiB5ZvMsyKM7GyJGNzNhyGaY9ZqBM3zXUWTm28lw+PfVnXwL59epJnw==
+"@naturacosmeticos/natds-themes@0.73.1":
+  version "0.73.1"
+  resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-themes/-/natds-themes-0.73.1.tgz#a7256f3f00f783336ade11964ebffc11a2d40d02"
+  integrity sha512-FSnA83aojr2idEI8IlBrT/dIJ2HJHNMhuLsEEOPcLf8bmiDsxjKCxlfXVOJ+Vvc3idSeed2JQXWCpkzejiZBAw==
   dependencies:
     open-color "^1.8.0"
     svg2vectordrawable "2.6.26"