From d8dccabc5dc62e6630c2f98934620d817d5d7e15 Mon Sep 17 00:00:00 2001 From: retrofox Date: Thu, 27 Jul 2023 20:30:45 +0000 Subject: [PATCH] AI Client: add AI Client icon components (#32079) * [not verified] add AI Client package * [not verified] add icons * [not verified] add index icons file * [not verified] export icons * [not verified] add simple icon Readme file * [not verified] add icon story * [not verified] changelog * [not verified] add ai-client into build list * [not verified] update story importing path * add @wordpress/components dep * add @storybook/react dev dep * pnpm update * update pnpm-lock * fix exporting icons bug --------- Co-authored-by: sdixon194 Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/5684981773 --- CHANGELOG.md | 1 + index.ts | 3 ++ package.json | 4 ++- src/icons/Readme.md | 22 ++++++++++++++ src/icons/ai-assistant.tsx | 31 +++++++++++++++++++ src/icons/index.ts | 3 ++ src/icons/origami-plane.tsx | 20 +++++++++++++ src/icons/speak-tone.tsx | 24 +++++++++++++++ src/icons/stories/index.stories.tsx | 46 +++++++++++++++++++++++++++++ src/icons/stories/style.module.scss | 21 +++++++++++++ 10 files changed, 174 insertions(+), 1 deletion(-) create mode 100644 src/icons/Readme.md create mode 100644 src/icons/ai-assistant.tsx create mode 100644 src/icons/index.ts create mode 100644 src/icons/origami-plane.tsx create mode 100644 src/icons/speak-tone.tsx create mode 100644 src/icons/stories/index.stories.tsx create mode 100644 src/icons/stories/style.module.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index bcd9313..71ca875 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 This is an alpha version! The changes listed here are not final. ### Added +- Add AI Client icon components - AI Client: Add useAiSuggestions() react custom hook ### Changed diff --git a/index.ts b/index.ts index 6481a11..19241fe 100644 --- a/index.ts +++ b/index.ts @@ -5,4 +5,7 @@ export { default as askQuestion } from './src/ask-question'; // Hooks export { default as useAiSuggestions } from './src/hooks/use-ai-suggestions'; +// Icons +export * from './src/icons'; + export * from './src/index.js'; diff --git a/package.json b/package.json index b02450c..cc7f602 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ }, "type": "module", "devDependencies": { - "jest": "^29.6.1", + "@storybook/react": "7.1.0", + "jest": "^29.6.2", "jest-environment-jsdom": "29.5.0", "typescript": "5.0.4" }, @@ -33,6 +34,7 @@ "@automattic/jetpack-shared-extension-utils": "^0.10.9", "@microsoft/fetch-event-source": "2.0.1", "@wordpress/api-fetch": "6.34.0", + "@wordpress/components": "25.3.0", "@wordpress/data": "9.7.0", "@wordpress/element": "5.14.0", "@wordpress/i18n": "4.37.0", diff --git a/src/icons/Readme.md b/src/icons/Readme.md new file mode 100644 index 0000000..220908d --- /dev/null +++ b/src/icons/Readme.md @@ -0,0 +1,22 @@ +# Icons + +This library provides you with a selection of icons to use in your Gutenberg applications. + +- aiAssistantIcon +- origamiPlane +- speakTone + +```jsx +import { Icon } from '@wordpress/components'; +import { aiAssistantIcon } from '@automattic/jetpack-ai-client'; + +function YourComponent() { + // ... + return ( +
+ // Your code here... + +
+ ); +} +``` \ No newline at end of file diff --git a/src/icons/ai-assistant.tsx b/src/icons/ai-assistant.tsx new file mode 100644 index 0000000..e79a137 --- /dev/null +++ b/src/icons/ai-assistant.tsx @@ -0,0 +1,31 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/components'; +import React from 'react'; + +const aiAssistant = ( + + + + + +); + +export default aiAssistant; diff --git a/src/icons/index.ts b/src/icons/index.ts new file mode 100644 index 0000000..2e9a066 --- /dev/null +++ b/src/icons/index.ts @@ -0,0 +1,3 @@ +export { default as aiAssistantIcon } from './ai-assistant'; +export { default as origamiPlane } from './origami-plane'; +export { default as speakTone } from './speak-tone'; diff --git a/src/icons/origami-plane.tsx b/src/icons/origami-plane.tsx new file mode 100644 index 0000000..8802191 --- /dev/null +++ b/src/icons/origami-plane.tsx @@ -0,0 +1,20 @@ +/** + * External dependencies + */ +import { SVG, Path } from '@wordpress/components'; +import React from 'react'; + +const origamiPlane = ( + + + + +); + +export default origamiPlane; diff --git a/src/icons/speak-tone.tsx b/src/icons/speak-tone.tsx new file mode 100644 index 0000000..f5bbd0c --- /dev/null +++ b/src/icons/speak-tone.tsx @@ -0,0 +1,24 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/components'; +import React from 'react'; + +const speakTone = ( + + + + +); + +export default speakTone; diff --git a/src/icons/stories/index.stories.tsx b/src/icons/stories/index.stories.tsx new file mode 100644 index 0000000..8fed3e6 --- /dev/null +++ b/src/icons/stories/index.stories.tsx @@ -0,0 +1,46 @@ +/** + * External dependencies + */ +import { Icon } from '@wordpress/components'; +import React from 'react'; +/** + * Internal dependencies + */ +import * as allIcons from '../index'; +import styles from './style.module.scss'; +/** + * Types + */ +import type { Meta } from '@storybook/react'; + +export default { + title: 'JS Packages/AI Client/Icons', + component: allIcons, + parameters: {}, +} as Meta< typeof allIcons >; + +/** + * Icons story components. + * + * @returns {object} - story component + */ +function IconsStory() { + return ( +
+ { Object.entries( allIcons ).map( ( [ name, icon ] ) => { + return ( +
+ +
{ name }
+
+ ); + } ) } +
+ ); +} + +const Template = args => ; + +const DefaultArgs = {}; +export const Default = Template.bind( {} ); +Default.args = DefaultArgs; diff --git a/src/icons/stories/style.module.scss b/src/icons/stories/style.module.scss new file mode 100644 index 0000000..27bc01e --- /dev/null +++ b/src/icons/stories/style.module.scss @@ -0,0 +1,21 @@ +.icons-container { + display: flex; + flex-wrap: wrap; + margin-bottom: 20px; + flex-direction: column; +} + +.icon-container { + padding: 10px; + box-shadow: 0 0 1px inset rgba(0, 0, 0 , 0.5 ); + background-color: white; + border-radius: 5px; + margin: 2px; + display: flex; + gap: 8px; + align-items: center; +} + +.icon-name { + font-size: 14px; +}