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(() => ( -