Skip to content

Commit

Permalink
Merge pull request #62 from hotosm/dev
Browse files Browse the repository at this point in the history
Refactor and simplify
spwoodcock authored Oct 21, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 51c3a06 + 850af69 commit c8864ca
Showing 220 changed files with 3,754 additions and 15,037 deletions.
8 changes: 0 additions & 8 deletions .eslintignore

This file was deleted.

18 changes: 0 additions & 18 deletions .eslintrc.yml

This file was deleted.

16 changes: 0 additions & 16 deletions .storybook-react/main.ts

This file was deleted.

15 changes: 0 additions & 15 deletions .storybook-react/preview.ts

This file was deleted.

4 changes: 0 additions & 4 deletions .storybook-react/static/assets/icons/check2-circle.svg

This file was deleted.

4 changes: 0 additions & 4 deletions .storybook-react/static/assets/icons/exclamation-octagon.svg

This file was deleted.

66 changes: 0 additions & 66 deletions .storybook-react/stories/button.stories.ts

This file was deleted.

79 changes: 0 additions & 79 deletions .storybook-react/stories/header.stories.ts

This file was deleted.

18 changes: 0 additions & 18 deletions .storybook-react/stories/logo.ts

This file was deleted.

17 changes: 0 additions & 17 deletions .storybook-react/stories/toolbar.stories.ts

This file was deleted.

11 changes: 11 additions & 0 deletions .storybook/custom.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.docblock-typeset > div > div:first-child {
width: 25%;
}

.docblock-typeset > div > div:last-child {
width: 75%;
}

a {
color: var(--hot-color-primary-700)
}
3 changes: 1 addition & 2 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import type { StorybookConfig } from "@storybook/web-components-vite";

const config: StorybookConfig = {
stories: ["./stories/**/*.stories.ts"],
stories: ["./stories/**/*.mdx", "./stories/**/*.stories.ts"],
staticDirs: ["./static"],
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
framework: {
7 changes: 7 additions & 0 deletions .storybook/preview-head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
3 changes: 3 additions & 0 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import type { Preview } from "@storybook/web-components";

import '../src/style.css';
import './custom.css';

const preview: Preview = {
parameters: {
controls: {
50 changes: 50 additions & 0 deletions .storybook/stories/0_index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { Meta } from '@storybook/blocks';
import { Logo, Button } from '../../src/react';

<Meta title="Intro" />

<Logo /><br />

# HOTOSM UI

## Shared UI Components with HOT Theming

This repository contains HOT themed UI components to reduce code duplication
and simplify the lives of developers needing to prototype and develop well
designed web applications quickly.

They are available as
[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
and has first-class React support.

The main goal of this project is not to re-invent the wheel, or add an extra burden
of development and maintenance.

## Install

`npm install @hotosm/ui`

And import the styles:

```js
import '@hotosm/dist/style.css';
```

## Use

Now you can use any component, you can try with a button:

```html
<hot-button variant="primary">Click me!</hot-button>
```

<Button variant="primary">Click me!</Button>

Or the HOT logo!

```html
<hot-logo></hot-logo>
```

<Logo />

Loading

0 comments on commit c8864ca

Please sign in to comment.