From c35d193d7714f35b4164d9985af6a354741771e1 Mon Sep 17 00:00:00 2001 From: Davit Date: Mon, 14 Oct 2024 02:53:27 +0400 Subject: [PATCH] nav tabs + format --- .storybook/decorators/withTheme.tsx | 100 +- .storybook/main.ts | 66 +- .storybook/manager-head.html | 3 +- .storybook/manager.ts | 12 +- .storybook/preview.ts | 3 - .storybook/theme.js | 14 +- README.md | 99 +- dist/components/Breadcrumb/index.d.ts | 2 +- dist/components/Button/Button.d.ts | 10 +- dist/components/Button/Styles.d.ts | 2 +- dist/components/Button/index.d.ts | 2 +- dist/components/Card/index.d.ts | 2 +- dist/components/Card/partials/NewCard.d.ts | 2 +- .../Card/partials/ProjectPartial.d.ts | 2 +- dist/components/CardLabel/CardLabel.d.ts | 4 +- dist/components/CardLabel/index.d.ts | 2 +- dist/components/Checkbox/Checkbox.d.ts | 4 +- dist/components/Checkbox/index.d.ts | 2 +- dist/components/Collapse/Collapse.d.ts | 6 +- dist/components/Collapse/index.d.ts | 2 +- .../CopyToClipboard/CopyToClipboard.d.ts | 4 +- dist/components/CopyToClipboard/index.d.ts | 2 +- dist/components/DataCard/DataCard.d.ts | 2 +- dist/components/DataCard/index.d.ts | 2 +- dist/components/Details/Details.d.ts | 4 +- dist/components/Details/index.d.ts | 2 +- .../EnvironmentDetails.d.ts | 2 +- dist/components/EnvironmentDetails/index.d.ts | 2 +- dist/components/Filter/index.d.ts | 2 +- dist/components/Footer/Footer.d.ts | 2 +- dist/components/Footer/index.d.ts | 2 +- dist/components/FormItem/FormItem.d.ts | 4 +- dist/components/FormItem/index.d.ts | 2 +- dist/components/Header/index.d.ts | 2 +- dist/components/Heading/H1/H1.d.ts | 4 +- dist/components/Heading/H1/index.d.ts | 2 +- dist/components/Heading/H2/H2.d.ts | 4 +- dist/components/Heading/H2/index.d.ts | 2 +- dist/components/Heading/H3/H3.d.ts | 4 +- dist/components/Heading/H3/index.d.ts | 2 +- dist/components/Heading/H4/H4.d.ts | 4 +- dist/components/Heading/H4/index.d.ts | 2 +- dist/components/Heading/H5/H5.d.ts | 4 +- dist/components/Heading/H5/index.d.ts | 2 +- dist/components/Heading/Heading.d.ts | 6 +- dist/components/Heading/Styles.d.ts | 2 +- dist/components/Heading/index.d.ts | 2 +- dist/components/Input/Input.d.ts | 4 +- dist/components/Input/index.d.ts | 2 +- dist/components/List/List.d.ts | 4 +- dist/components/List/index.d.ts | 2 +- dist/components/Modal/index.d.ts | 2 +- dist/components/Notification/index.d.ts | 2 +- dist/components/Pagination/index.d.ts | 2 +- .../ProblemsOverview/ProblemsOverview.d.ts | 2 +- dist/components/ProblemsOverview/index.d.ts | 2 +- .../ProjectDetails/ProjectDetails.d.ts | 2 +- dist/components/ProjectDetails/index.d.ts | 2 +- dist/components/ProjectsTable/index.d.ts | 2 +- dist/components/Select/index.d.ts | 2 +- dist/components/StatusTag/StatusTag.d.ts | 10 +- dist/components/StatusTag/index.d.ts | 2 +- dist/components/Steps/index.d.ts | 2 +- dist/components/Switch/Switch.d.ts | 4 +- dist/components/Tabs/Tabs.d.ts | 30 +- dist/components/Tabs/index.d.ts | 2 +- dist/components/Tabs/styles.d.ts | 7 + .../TaskTreeSelector/TaskTreeSelector.d.ts | 6 +- dist/components/TaskTreeSelector/index.d.ts | 2 +- dist/components/Text/index.d.ts | 2 +- dist/components/TextLabel/TextLabel.d.ts | 4 +- dist/components/TextLabel/index.d.ts | 2 +- dist/components/Timeline/Timeline.d.ts | 8 +- dist/components/Timeline/index.d.ts | 2 +- dist/components/Tree/Tree.d.ts | 12 +- dist/components/Tree/index.d.ts | 2 +- dist/hooks/useTheme.d.ts | 2 +- dist/index.d.ts | 2 +- dist/index.es.js | 1229 +- dist/index.js | 1253 +- dist/package.json | 178 +- dist/styles/theme.d.ts | 2 +- package-lock.json | 47598 ++++++++-------- package.json | 178 +- postinstall.js | 35 +- src/_util/colors.ts | 8 +- src/components/Breadcrumb/Breadcrumb.tsx | 2 +- src/components/Breadcrumb/index.tsx | 2 +- src/components/Button/Button.tsx | 129 +- src/components/Button/Styles.tsx | 90 +- src/components/Button/index.tsx | 5 +- src/components/Card/Card.tsx | 7 +- src/components/Card/index.tsx | 2 +- src/components/Card/partials/NewCard.tsx | 88 +- .../Card/partials/ProjectPartial.tsx | 40 +- src/components/Card/styles.tsx | 4 +- src/components/CardLabel/CardLabel.tsx | 106 +- src/components/CardLabel/index.tsx | 2 +- src/components/Checkbox/Checkbox.tsx | 22 +- src/components/Checkbox/index.tsx | 2 +- src/components/Collapse/Collapse.tsx | 51 +- src/components/Collapse/index.tsx | 2 +- .../CopyToClipboard/CopyToClipboard.tsx | 173 +- src/components/CopyToClipboard/index.tsx | 2 +- src/components/DataCard/DataCard.tsx | 123 +- src/components/DataCard/index.tsx | 2 +- src/components/Details/Details.tsx | 124 +- src/components/Details/index.tsx | 2 +- .../EnvironmentDetails/EnvironmentDetails.tsx | 108 +- src/components/EnvironmentDetails/index.tsx | 5 +- src/components/Filter/index.tsx | 2 +- src/components/Footer/Footer.tsx | 37 +- src/components/Footer/index.tsx | 2 +- src/components/Footer/styles.tsx | 82 +- src/components/FormItem/FormItem.tsx | 63 +- src/components/FormItem/index.tsx | 2 +- .../Header/helpers/getCurrentPathIndex.ts | 2 +- src/components/Header/index.tsx | 2 +- src/components/Header/styles.tsx | 2 +- src/components/Heading/H1/H1.tsx | 15 +- src/components/Heading/H1/index.tsx | 2 +- src/components/Heading/H2/H2.tsx | 15 +- src/components/Heading/H2/index.tsx | 2 +- src/components/Heading/H3/H3.tsx | 15 +- src/components/Heading/H3/index.tsx | 2 +- src/components/Heading/H4/H4.tsx | 15 +- src/components/Heading/H4/index.tsx | 2 +- src/components/Heading/H5/H5.tsx | 15 +- src/components/Heading/H5/index.tsx | 2 +- src/components/Heading/Heading.tsx | 47 +- src/components/Heading/Styles.tsx | 58 +- src/components/Heading/index.tsx | 5 +- src/components/Icons/vectors/Loading.tsx | 21 +- src/components/Input/Input.tsx | 15 +- src/components/Input/index.tsx | 2 +- src/components/Input/styles.tsx | 79 +- src/components/List/List.tsx | 108 +- src/components/List/index.tsx | 2 +- src/components/Modal/index.tsx | 2 +- src/components/Notification/Notification.tsx | 2 +- src/components/Notification/index.tsx | 6 +- src/components/PageContainer/styles.tsx | 6 +- src/components/Pagination/index.tsx | 2 +- .../ProblemsOverview/ProblemsOverview.tsx | 117 +- src/components/ProblemsOverview/index.tsx | 5 +- src/components/ProblemsOverview/styles.tsx | 62 +- .../ProjectDetails/ProjectDetails.tsx | 88 +- src/components/ProjectDetails/index.tsx | 5 +- src/components/ProjectsTable/Table.tsx | 2 +- src/components/ProjectsTable/index.tsx | 2 +- src/components/Select/index.tsx | 2 +- src/components/StatusTag/StatusTag.tsx | 137 +- src/components/StatusTag/index.tsx | 4 +- src/components/Steps/index.tsx | 4 +- src/components/Switch/Switch.tsx | 22 +- src/components/Tabs/Tabs.tsx | 122 +- src/components/Tabs/index.tsx | 2 +- src/components/Tabs/styles.tsx | 116 + .../TaskTreeSelector/TaskTreeSelector.tsx | 105 +- src/components/TaskTreeSelector/index.tsx | 5 +- src/components/Text/index.tsx | 2 +- src/components/TextLabel/TextLabel.tsx | 107 +- src/components/TextLabel/index.tsx | 5 +- src/components/Timeline/Timeline.tsx | 242 +- src/components/Timeline/index.tsx | 2 +- src/components/Tree/Tree.tsx | 106 +- src/components/Tree/index.tsx | 2 +- src/hooks/useTheme.tsx | 85 +- src/index.ts | 3 +- src/stories/Button.stories.tsx | 2 +- src/stories/Introduction.mdx | 104 +- src/stories/Notification.stories.tsx | 249 +- src/stories/Tabs.stories.tsx | 41 +- src/stories/guide/Figma.stories.mdx | 6 +- src/stories/guide/ThemingGlobals.mdx | 70 +- src/stories/guide/Tokens.stories.mdx | 5 +- src/stories/guide/Typography.stories.mdx | 2 +- src/styles/theme.ts | 134 +- src/typings/fonts.d.ts | 2 +- src/typings/jpgs.d.ts | 2 +- src/typings/styled.d.ts | 73 +- src/typings/vectors.d.ts | 2 +- tsconfig.json | 37 +- 183 files changed, 27418 insertions(+), 27417 deletions(-) create mode 100644 dist/components/Tabs/styles.d.ts create mode 100644 src/components/Tabs/styles.tsx diff --git a/.storybook/decorators/withTheme.tsx b/.storybook/decorators/withTheme.tsx index 74626b5..3bd52d9 100644 --- a/.storybook/decorators/withTheme.tsx +++ b/.storybook/decorators/withTheme.tsx @@ -1,60 +1,60 @@ -import React from "react"; -import { ThemeProvider } from "styled-components"; -import { Decorator } from "@storybook/react"; +import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import { Decorator } from '@storybook/react'; -import GlobalStyles from "../../src/providers/GlobalStyles"; -import { lightTheme, darkTheme } from "../../src/styles/theme"; +import GlobalStyles from '../../src/providers/GlobalStyles'; +import { lightTheme, darkTheme } from '../../src/styles/theme'; -import styled, { css } from "styled-components"; +import styled, { css } from 'styled-components'; const ThemeBlock = styled.div<{ left?: boolean; fill?: boolean }>( - ({ left, fill, theme }) => css` - position: absolute; - top: 0; - left: ${left || fill ? 0 : "50vw"}; - border-right: ${left ? "1px solid #202020" : "none"}; - right: ${left ? "50vw" : 0}; - width: ${fill ? "100vw" : "50vw"}; - bottom: 0; - overflow: auto; - padding: 1rem; - background: ${theme.colorScheme === "dark" ? "#1f1d1d" : "#fff"}; - ` + ({ left, fill, theme }) => css` + position: absolute; + top: 0; + left: ${left || fill ? 0 : '50vw'}; + border-right: ${left ? '1px solid #202020' : 'none'}; + right: ${left ? '50vw' : 0}; + width: ${fill ? '100vw' : '50vw'}; + bottom: 0; + overflow: auto; + padding: 1rem; + background: ${theme.colorScheme === 'dark' ? '#1f1d1d' : '#fff'}; + `, ); const withTheme: Decorator = (StoryFn, context) => { - const { theme } = context.globals; - const themeToUse = theme === "light" ? lightTheme : darkTheme; + const { theme } = context.globals; + const themeToUse = theme === 'light' ? lightTheme : darkTheme; - switch (theme) { - case "side-by-side": { - return ( - <> - - - - - - - - - - - - - - ); - } - default: { - return ( - - - - - - - ); - } - } + switch (theme) { + case 'side-by-side': { + return ( + <> + + + + + + + + + + + + + + ); + } + default: { + return ( + + + + + + + ); + } + } }; export default withTheme; diff --git a/.storybook/main.ts b/.storybook/main.ts index 0839641..e596355 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,38 +1,38 @@ -import type { StorybookConfig } from "@storybook/react-webpack5"; +import type { StorybookConfig } from '@storybook/react-webpack5'; const config: StorybookConfig = { - stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], - addons: [ - "@storybook/addon-links", - "@storybook/addon-essentials", - "@storybook/addon-interactions", - "@storybook/addon-controls", - "@storybook/addon-a11y", - "@storybook/addon-designs", - ], + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + '@storybook/addon-controls', + '@storybook/addon-a11y', + '@storybook/addon-designs', + ], - framework: { - name: "@storybook/react-webpack5", - options: { - builder: { - useSWC: true, - }, - }, - }, - docs: { - autodocs: true, - }, - core: { - disableTelemetry: true, - }, - swc: () => ({ - jsc: { - transform: { - react: { - runtime: "automatic", - }, - }, - }, - }), + framework: { + name: '@storybook/react-webpack5', + options: { + builder: { + useSWC: true, + }, + }, + }, + docs: { + autodocs: true, + }, + core: { + disableTelemetry: true, + }, + swc: () => ({ + jsc: { + transform: { + react: { + runtime: 'automatic', + }, + }, + }, + }), }; export default config; diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html index 72c5248..6ecfe7f 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -1,2 +1 @@ - - \ No newline at end of file + diff --git a/.storybook/manager.ts b/.storybook/manager.ts index e2c11a2..20ac48d 100644 --- a/.storybook/manager.ts +++ b/.storybook/manager.ts @@ -1,10 +1,10 @@ -import { addons } from "@storybook/manager-api"; +import { addons } from '@storybook/manager-api'; -import LagoonTheme from "./theme"; +import LagoonTheme from './theme'; addons.setConfig({ - theme: LagoonTheme, - sidebar: { - showRoots: false, - }, + theme: LagoonTheme, + sidebar: { + showRoots: false, + }, }); diff --git a/.storybook/preview.ts b/.storybook/preview.ts index fe856fd..34fe19f 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -22,11 +22,8 @@ const preview: Preview = { date: /Date$/i, }, }, - docs: { - - source: { language: 'tsx', }, diff --git a/.storybook/theme.js b/.storybook/theme.js index bbe4a64..20f0e20 100644 --- a/.storybook/theme.js +++ b/.storybook/theme.js @@ -1,11 +1,11 @@ -import { create } from "@storybook/theming"; +import { create } from '@storybook/theming'; -import logo from "./public/logo.svg"; +import logo from './public/logo.svg'; export default create({ - base: "dark", - brandTitle: "Lagoon", - brandUrl: "http://lagoon.sh/", - brandImage: logo, - brandTarget: "_blank", + base: 'dark', + brandTitle: 'Lagoon', + brandUrl: 'http://lagoon.sh/', + brandImage: logo, + brandTarget: '_blank', }); diff --git a/README.md b/README.md index cac2e54..c8bda2a 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ yarn add github:uselagoon/ui-library#main antd styled-components @ant-design/ico ``` Alternatively, add the following to your `package.json` and run `npm i`: + ```json "dependencies": { "react": "^18", @@ -27,17 +28,18 @@ Alternatively, add the following to your `package.json` and run `npm i`: ``` #### Viewing storybook: -* clone this repo -* run `npm run storybook` + +- clone this repo +- run `npm run storybook` Using a component from the library: ```tsx -import { Button } from '@uselagoon/ui-library' +import { Button } from '@uselagoon/ui-library'; ``` - ## The component library works with: + - React (with styled-components or tailwind out of the box) - Next < 13 - Next > 13 @@ -46,35 +48,31 @@ import { Button } from '@uselagoon/ui-library' Since the library is built on top of Ant design and Styled-components, we need `AntdRegistry` and `StyledComponentsRegistry` in Next > 13, which then wrap the `children` prop in the root layout. - - ### /lib/AntdRegistry.tsx: + ```tsx -"use client"; +'use client'; -import React from "react"; -import { useServerInsertedHTML } from "next/navigation"; -import { StyleProvider, createCache, extractStyle } from "@ant-design/cssinjs"; -import type Entity from "@ant-design/cssinjs/es/Cache"; +import React from 'react'; +import { useServerInsertedHTML } from 'next/navigation'; +import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'; +import type Entity from '@ant-design/cssinjs/es/Cache'; interface AntdRegistryProps { - children: React.ReactNode; + children: React.ReactNode; } const AntdRegistry = ({ children }: AntdRegistryProps) => { - const cache = React.useMemo(() => createCache(), []); - useServerInsertedHTML(() => ( -