From e8d99ccf6f0c70391cdf6f0a5809431b8c59760c Mon Sep 17 00:00:00 2001 From: Thiago Chaves Date: Thu, 7 Jul 2022 02:25:41 +0300 Subject: [PATCH] Add Navigation, NavigationItem components, storybook router and icons --- .storybook/main.js | 23 +++++----- .storybook/preview.js | 12 ++++- package.json | 1 + public/icons/calendar.svg | 11 +++++ public/icons/check.svg | 6 +++ public/icons/home.svg | 8 ++++ public/icons/icons-license.txt | 21 +++++++++ .../ExpressionCard/ExpressionCard.tsx | 4 +- .../Navigation/Navigation.stories.tsx | 16 +++++++ src/components/Navigation/Navigation.tsx | 19 ++++++++ .../Navigation/NavigationItem.stories.tsx | 44 +++++++++++++++++++ src/components/Navigation/NavigationItem.tsx | 26 +++++++++++ src/components/Navigation/index.tsx | 2 + src/components/index.ts | 1 + src/styles/components.css | 38 ++++++++++++++++ yarn.lock | 9 +++- 16 files changed, 226 insertions(+), 15 deletions(-) create mode 100644 public/icons/calendar.svg create mode 100644 public/icons/check.svg create mode 100644 public/icons/home.svg create mode 100644 public/icons/icons-license.txt create mode 100644 src/components/Navigation/Navigation.stories.tsx create mode 100644 src/components/Navigation/Navigation.tsx create mode 100644 src/components/Navigation/NavigationItem.stories.tsx create mode 100644 src/components/Navigation/NavigationItem.tsx create mode 100644 src/components/Navigation/index.tsx diff --git a/.storybook/main.js b/.storybook/main.js index 77b8003..2d54e08 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,16 +1,15 @@ module.exports = { - "stories": [ - "../src/**/*.stories.mdx", - "../src/**/*.stories.@(js|jsx|ts|tsx)" - ], - "addons": [ + stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], + addons: [ "@storybook/addon-links", "@storybook/addon-essentials", - "@storybook/addon-interactions" + "@storybook/addon-interactions", + "storybook-addon-next-router", ], - "framework": "@storybook/react", - "core": { - "builder": "@storybook/builder-webpack5", - "disableTelemetry": true - } -} \ No newline at end of file + framework: "@storybook/react", + core: { + builder: "@storybook/builder-webpack5", + disableTelemetry: true, + }, + staticDirs: ["../public"], +}; diff --git a/.storybook/preview.js b/.storybook/preview.js index 48afd56..026edfb 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,3 +1,5 @@ +import { RouterContext } from "next/dist/shared/lib/router-context"; // next 12 + export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, controls: { @@ -6,4 +8,12 @@ export const parameters = { date: /Date$/, }, }, -} \ No newline at end of file + nextRouter: { + Provider: RouterContext.Provider, + asPath: "/", + pathname: "/", + query: {}, + route: "/", + push() {} + }, +}; diff --git a/package.json b/package.json index 533f54b..2114e62 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "eslint-config-next": "12.2.0", "eslint-plugin-storybook": "^0.5.13", "prettier": "^2.7.1", + "storybook-addon-next-router": "^4.0.0", "typescript": "4.7.4" } } diff --git a/public/icons/calendar.svg b/public/icons/calendar.svg new file mode 100644 index 0000000..c22b367 --- /dev/null +++ b/public/icons/calendar.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/icons/check.svg b/public/icons/check.svg new file mode 100644 index 0000000..8b703e6 --- /dev/null +++ b/public/icons/check.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icons/home.svg b/public/icons/home.svg new file mode 100644 index 0000000..d08b7da --- /dev/null +++ b/public/icons/home.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/icons/icons-license.txt b/public/icons/icons-license.txt new file mode 100644 index 0000000..1f192ee --- /dev/null +++ b/public/icons/icons-license.txt @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020-2022 Paweł Kuna + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/src/components/ExpressionCard/ExpressionCard.tsx b/src/components/ExpressionCard/ExpressionCard.tsx index 5d2abc3..1e3afbc 100644 --- a/src/components/ExpressionCard/ExpressionCard.tsx +++ b/src/components/ExpressionCard/ExpressionCard.tsx @@ -16,7 +16,9 @@ export function ExpressionCard({ return (

{prompt}

-

{categories.join(", ")}

+ + {categories.join(", ")} + {show_description && (
{description}
)} diff --git a/src/components/Navigation/Navigation.stories.tsx b/src/components/Navigation/Navigation.stories.tsx new file mode 100644 index 0000000..383db44 --- /dev/null +++ b/src/components/Navigation/Navigation.stories.tsx @@ -0,0 +1,16 @@ +import "../../styles/globals.css"; +import "../../styles/components.css"; + +import React from "react"; +import { ComponentStory, ComponentMeta } from "@storybook/react"; + +import { Navigation } from "./Navigation"; + +export default { + title: "Components/Navigation", + component: Navigation, +} as ComponentMeta; + +export const Example: ComponentStory = (args) => ( + +); diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx new file mode 100644 index 0000000..0072149 --- /dev/null +++ b/src/components/Navigation/Navigation.tsx @@ -0,0 +1,19 @@ +import { NavigationItem } from "./NavigationItem"; + +export function Navigation() { + return ( + + ); +} diff --git a/src/components/Navigation/NavigationItem.stories.tsx b/src/components/Navigation/NavigationItem.stories.tsx new file mode 100644 index 0000000..5539dd0 --- /dev/null +++ b/src/components/Navigation/NavigationItem.stories.tsx @@ -0,0 +1,44 @@ +import "../../styles/globals.css"; +import "../../styles/components.css"; + +import React from "react"; +import { ComponentStory, ComponentMeta } from "@storybook/react"; + +import { NavigationItem } from "./NavigationItem"; + +export default { + title: "Components/Navigation Item", + component: NavigationItem, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const TextItem = Template.bind({}); +TextItem.story = { + args: { + text: "Home", + href: "/", + }, +}; + +export const IconItem = Template.bind({}); +IconItem.args = { + iconUrl: "/icons/home.svg", + href: "/", +}; + +export const TextAndIconItem = Template.bind({}); +TextAndIconItem.args = { + text: "Home", + iconUrl: "/icons/home.svg", + href: "/", +}; + +export const InactiveItem = Template.bind({}); +InactiveItem.args = { + text: "Inactive", + iconUrl: "/icons/home.svg", + href: "current-path", +}; diff --git a/src/components/Navigation/NavigationItem.tsx b/src/components/Navigation/NavigationItem.tsx new file mode 100644 index 0000000..cc8cb78 --- /dev/null +++ b/src/components/Navigation/NavigationItem.tsx @@ -0,0 +1,26 @@ +import Image from "next/image"; +import Link from "next/link"; +import { useRouter } from "next/router"; +import { UrlObject } from "url"; + +export interface NavigationItemProps { + text: string; + iconUrl?: string; + href: string | UrlObject; +} + +export function NavigationItem({ text, iconUrl, href }: NavigationItemProps) { + const router = useRouter(); + const active = router.pathname === href; + + return ( +
  • + + + {iconUrl && } + {text} + + +
    • + ); +} diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx new file mode 100644 index 0000000..90a8706 --- /dev/null +++ b/src/components/Navigation/index.tsx @@ -0,0 +1,2 @@ +export * from "./Navigation"; +export * from "./NavigationItem"; diff --git a/src/components/index.ts b/src/components/index.ts index 2356fdd..45c6538 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1 +1,2 @@ export * from "./ExpressionCard"; +export * from "./Navigation"; diff --git a/src/styles/components.css b/src/styles/components.css index 82de464..41f5bee 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -1,3 +1,41 @@ +/* Navigation */ + +.navigation { + display: flex; + flex-direction: row; +} + +.navigation > .navigation-item { + flex: 1; +} + +.navigation-item { + list-style: none; +} + +.navigation-item > a { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + background-color: lavender; + border: 1px solid darkslategray; + font-weight: bold; + height: 64px; +} + +.navigation-item > a:hover { + background-color: lavenderblush; +} + +.navigation-item.active > a { + background-color: lightsteelblue; + cursor: default; +} + +/* Expression cards */ + .expression-card { display: flex; flex-direction: column; diff --git a/yarn.lock b/yarn.lock index 2ed91bc..b3bfcd0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9690,6 +9690,13 @@ store2@^2.12.0: resolved "https://registry.yarnpkg.com/store2/-/store2-2.13.2.tgz#01ad8802ca5b445b9c316b55e72645c13a3cd7e3" integrity sha512-CMtO2Uneg3SAz/d6fZ/6qbqqQHi2ynq6/KzMD/26gTkiEShCcpqFfTHgOxsE0egAq6SX3FmN4CeSqn8BzXQkJg== +storybook-addon-next-router@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/storybook-addon-next-router/-/storybook-addon-next-router-4.0.0.tgz#d0719e6e27cbd2c374d23fad821157f2b053b045" + integrity sha512-zaEo/RI9IXzxlaiWeFBMBkjxYabLZGFibD82xH9AcKYcN/5yZq7VKo+NckMuTVu2WBaCUR4jA/O+ftcrQEvvfA== + dependencies: + tslib "^2.3.0" + stream-browserify@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b" @@ -10146,7 +10153,7 @@ tslib@^1.8.1, tslib@^1.9.3: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== -tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.4.0: +tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.3.0, tslib@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3" integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==